0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 应用管理组件替换、弹窗优化

This commit is contained in:
easy 2023-03-08 19:43:36 +08:00
parent 68720f668c
commit 58106e9fe4
7 changed files with 338 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/system/Apply/Save/components/Does.vue
View File

@ -12,7 +12,7 @@
内部独立应用的<span>后端服务</span>相互<span>独立运行</span>，互不影响。 内部独立应用的<span>后端服务</span>相互<span>独立运行</span>，互不影响。
</div> </div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img1" /> <j-image width="100%" :src="img1" />
</div> </div>
<h1>2.接入方式说明</h1> <h1>2.接入方式说明</h1>
@ -58,7 +58,7 @@
</div> </div>
<div>内部独立应用的<span>后端服务在同一个环境运行</span>。</div> <div>内部独立应用的<span>后端服务在同一个环境运行</span>。</div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img2" /> <j-image width="100%" :src="img2" />
</div> </div>
<h1>2.接入方式说明</h1> <h1>2.接入方式说明</h1>
<div>1、页面集成</div> <div>1、页面集成</div>
@ -86,7 +86,7 @@
<h1>1.概述</h1> <h1>1.概述</h1>
<div>钉钉企业内部应用适用于通过钉钉登录<span>物联网平台</span></div> <div>钉钉企业内部应用适用于通过钉钉登录<span>物联网平台</span></div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img4" /> <j-image width="100%" :src="img4" />
</div> </div>
<h1>2.接入方式说明</h1> <h1>2.接入方式说明</h1>
<div>1、单点登录</div> <div>1、单点登录</div>
@ -106,7 +106,7 @@
<h1>1.概述</h1> <h1>1.概述</h1>
<div>微信网站应用适用于通过微信授权登录<span>物联网平台</span></div> <div>微信网站应用适用于通过微信授权登录<span>物联网平台</span></div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img3" /> <j-image width="100%" :src="img3" />
</div> </div>
<h1>2.接入方式说明</h1> <h1>2.接入方式说明</h1>
<div>1、单点登录</div> <div>1、单点登录</div>
@ -121,7 +121,7 @@
。例如将公司业务管理系统集成至物联网平台，或者将物联网平台集成至业务管理系统。以实现多处访问、集中管控的业务场景。 。例如将公司业务管理系统集成至物联网平台，或者将物联网平台集成至业务管理系统。以实现多处访问、集中管控的业务场景。
</div> </div>
<div class="image"> <div class="image">
<a-image width="100%" :src="img5" /> <j-image width="100%" :src="img5" />
</div> </div>
<h1>2.接入方式说明</h1> <h1>2.接入方式说明</h1>
<div>1、页面集成</div> <div>1、页面集成</div>

422
src/views/system/Apply/Save/components/EditForm.vue
View File

File diff suppressed because it is too large Load Diff

4
src/views/system/Apply/Save/components/FormLabel.vue
View File

@ -2,10 +2,10 @@
<div class="form-label-container"> <div class="form-label-container">
<span class="text">{{ props.text }}</span> <span class="text">{{ props.text }}</span>
<span class="required" v-show="props.required">*</span> <span class="required" v-show="props.required">*</span>
<a-tooltip> <j-tooltip>
<template #title>{{ props.tooltip }}</template> <template #title>{{ props.tooltip }}</template>
<AIcon type="QuestionCircleOutlined" class="icon" /> <AIcon type="QuestionCircleOutlined" class="icon" />
</a-tooltip> </j-tooltip>
</div> </div>
</template> </template>

29
src/views/system/Apply/Save/components/RequestTable.vue
View File

@ -1,52 +1,52 @@
<template> <template>
<div class="request-table-container"> <div class="request-table-container">
<a-table <j-table
:columns="columns" :columns="columns"
:data-source="tableData" :datj-source="tableData"
:pagination="false" :pagination="false"
size="small" size="small"
bordered bordered
> >
<template #bodyCell="{ column, record, index }"> <template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'key'"> <template v-if="column.dataIndex === 'key'">
<a-input v-model:value="record.label" /> <j-input v-model:value="record.label" />
</template> </template>
<template v-else-if="column.dataIndex === 'value'"> <template v-else-if="column.dataIndex === 'value'">
<a-input <j-input
v-model:value="record.value" v-model:value="record.value"
v-if="props.valueType === 'input'" v-if="props.valueType === 'input'"
/> />
<a-select <j-select
v-else-if="props.valueType === 'select'" v-else-if="props.valueType === 'select'"
v-model:value="record.value" v-model:value="record.value"
> >
<a-select-option <j-select-option
v-for="item in props.valueOptions" v-for="item in props.valueOptions"
:value="item.value" :value="item.value"
>{{ item.label }}</a-select-option >{{ item.label }}</j-select-option
> >
</a-select> </j-select>
</template> </template>
<template v-else-if="column.dataIndex === 'action'"> <template v-else-if="column.dataIndex === 'action'">
<a-button <j-button
type="link" type="link"
@click="removeRow((current - 1) * 10 + index)" @click="removeRow((current - 1) * 10 + index)"
> >
<AIcon type="DeleteOutlined" /> <AIcon type="DeleteOutlined" />
</a-button> </j-button>
</template> </template>
</template> </template>
</a-table> </j-table>
<a-pagination <j-pagination
v-show="props.value.length > 10" v-show="props.value.length > 10"
v-model:current="current" v-model:current="current"
:page-size="10" :page-size="10"
:total="props.value.length" :total="props.value.length"
show-less-items show-less-items
/> />
<a-button type="dashed" @click="addRow" class="add-btn"> <j-button type="dashed" @click="addRow" class="add-btn">
<AIcon type="PlusOutlined" />新增 <AIcon type="PlusOutlined" />新增
</a-button> </j-button>
</div> </div>
</template> </template>
@ -120,7 +120,6 @@ function addRow() {
label: '', label: '',
value: '', value: '',
}; };
console.log(111);
emits('update:value', [...props.value, newRow]); emits('update:value', [...props.value, newRow]);
} }

21
src/views/system/Apply/Save/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<page-container> <page-container>
<a-card class="save-container"> <div class="save-container">
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="14"> <j-col :span="14">
<EditForm @change-apply-type="chengeType" /> <EditForm @change-apply-type="chengeType" />
</a-col> </j-col>
<a-col :span="10"><Does :type="rightType" /></a-col> <j-col :span="10"><Does :type="rightType" /></j-col>
</a-row> </j-row>
</a-card> </div>
</page-container> </page-container>
</template> </template>
@ -21,3 +21,10 @@ const chengeType = (newType: applyType) => {
rightType.value = newType; rightType.value = newType;
}; };
</script> </script>
<style lang="less" scoped>
.save-container {
background-color: #fff;
padding: 24px;
}
</style>

113
src/views/system/Apply/componenets/MenuDialog.vue
View File

@ -1,30 +1,30 @@
<template> <template>
<a-modal <j-modal
v-model:visible="dialog.visible" visible
title="集成菜单" title="集成菜单"
width="600px" width="600px"
@ok="dialog.handleOk" @ok="handleOk"
@cancel="dialog.cancel" @cancel="cancel"
class="edit-dialog-container" class="edit-dialog-container"
:confirmLoading="dialog.loading" :confirmLoading="loading"
cancelText="取消"
okText="确定"
> >
<a-select <j-select
v-model:value="form.checkedSystem" v-model:value="form.checkedSystem"
@change="(value) => value && getTree(value as string)" @change="(value:string) => value && getTree(value)"
style="width: 200px" style="width: 200px"
placeholder="请选择集成系统" placeholder="请选择集成系统"
> >
<a-select-option <j-select-option
v-for="item in form.systemList" v-for="item in form.systemList"
:value="item.value" :value="item.value"
>{{ item.label }}</a-select-option >{{ item.label }}</j-select-option
> >
</a-select> </j-select>
<p style="margin: 20px 0 0 0" v-show="form.menuTree.length > 0">当前集成菜单</p> <p style="margin: 20px 0 0 0" v-show="form.menuTree.length > 0">
<a-tree 当前集成菜单
</p>
<j-tree
v-model:checkedKeys="form.checkedMenu" v-model:checkedKeys="form.checkedMenu"
v-model:expandedKeys="form.expandedKeys" v-model:expandedKeys="form.expandedKeys"
checkable checkable
@ -35,8 +35,8 @@
<template #title="{ name }"> <template #title="{ name }">
<span>{{ name }}</span> <span>{{ name }}</span>
</template> </template>
</a-tree> </j-tree>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -55,69 +55,60 @@ import { message } from 'ant-design-vue';
import { getMenuTree_api } from '@/api/system/menu'; import { getMenuTree_api } from '@/api/system/menu';
const menuStory = useMenuStore(); const menuStory = useMenuStore();
const emits = defineEmits(['update:visible']);
const props = defineProps<{ const props = defineProps<{
mode: 'add' | 'edit'; mode: 'add' | 'edit';
visible: boolean;
id: string;
provider: applyType;
}>(); }>();
// 弹窗相关 // 弹窗相关
const dialog = reactive({ const loading = ref(false);
visible: false, const handleOk = () => {
loading: false, const items = filterTree(form.menuTree, [
...form.checkedMenu,
handleOk: () => { ...form.half,
const items = filterTree(form.menuTree, [ ]);
...form.checkedMenu, if (form.checkedSystem) {
...form.half, if (items && items.length !== 0) {
]); loading.value = true;
if (form.checkedSystem) { saveOwnerMenu_api('iot', form.id, items)
if (items && items.length !== 0) { .then((resp) => {
saveOwnerMenu_api('iot', form.id, items).then((resp) => {
if (resp.status === 200) { if (resp.status === 200) {
message.success('操作成功'); message.success('操作成功');
dialog.visible = false; emits('update:visible', false);
} }
}); })
} else { .finally(() => (loading.value = false));
message.warning('请勾选配置菜单');
}
} else { } else {
message.warning('请选择所属系统'); message.warning('请勾选配置菜单');
} }
}, } else {
cancel: () => { message.warning('请选择所属系统');
if (props.mode === 'add') }
menuStory.jumpPage('system/Apply/Save', {}, { id: form.id }); };
dialog.visible = false; const cancel = () => {
}, if (props.mode === 'add')
changeVisible: (id: string, provider: applyType) => { menuStory.jumpPage('system/Apply/Save', {}, { id: form.id });
form.id = id; emits('update:visible', false);
form.provider = provider; };
form.checkedSystem = undefined;
form.checkedMenu = [];
dialog.visible = true;
if (id) {
getSystemList();
getMenus();
}
},
});
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
});
const form = reactive({ const form = reactive({
id: '', id: props.id,
checkedSystem: '' as undefined | string, checkedSystem: undefined as undefined | string,
checkedMenu: [] as string[], checkedMenu: [] as string[],
expandedKeys: [] as string[], expandedKeys: [] as string[],
half: [] as string[], half: [] as string[],
provider: '' as applyType, provider: props.provider,
systemList: [] as optionItemType[], systemList: [] as optionItemType[],
menuTree: [] as any[], menuTree: [] as any[],
}); });
if (props.id) {
getSystemList();
getMenus();
}
/** /**
* 与集成系统关联的菜单 * 与集成系统关联的菜单
* @param params * @param params

67
src/views/system/Apply/index.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<page-container> <page-container>
<div class="apply-container"> <div class="apply-container">
<Search :columns="columns" @search="search" /> <j-advanced-search
:columns="columns"
@search="(params:any)=>queryParams = {...params}"
/>
<j-pro-table <j-pro-table
ref="tableRef" ref="tableRef"
@ -10,7 +13,7 @@
:defaultParams="{ :defaultParams="{
sorts: [{ name: 'createTime', order: 'desc' }], sorts: [{ name: 'createTime', order: 'desc' }],
}" }"
:params="params" :params="queryParams"
:gridColumn="3" :gridColumn="3"
> >
<template #headerTitle> <template #headerTitle>
@ -53,8 +56,8 @@
<h3 class="card-item-content-title"> <h3 class="card-item-content-title">
{{ slotProps.name }} {{ slotProps.name }}
</h3> </h3>
<a-row> <j-row>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
类型 类型
</div> </div>
@ -65,45 +68,45 @@
) )
}} }}
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
说明 说明
</div> </div>
<div>{{ slotProps.description }}</div> <div>{{ slotProps.description }}</div>
</a-col> </j-col>
</a-row> </j-row>
</template> </template>
<template #actions="item"> <template #actions="item">
<a-tooltip <j-tooltip
v-bind="item.tooltip" v-bind="item.tooltip"
:title="item.disabled && item.tooltip.title" :title="item.disabled && item.tooltip.title"
> >
<a-dropdown <j-dropdown
placement="bottomRight" placement="bottomRight"
v-if="item.key === 'others'" v-if="item.key === 'others'"
> >
<a-button> <j-button>
<AIcon :type="item.icon" /> <AIcon :type="item.icon" />
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
</a-button> </j-button>
<template #overlay> <template #overlay>
<a-menu> <j-menu>
<a-menu-item <j-menu-item
v-for="(o, i) in item.children" v-for="(o, i) in item.children"
:key="i" :key="i"
> >
<a-button <j-button
type="link" type="link"
@click="o.onClick" @click="o.onClick"
> >
<AIcon :type="o.icon" /> <AIcon :type="o.icon" />
<span>{{ o.text }}</span> <span>{{ o.text }}</span>
</a-button> </j-button>
</a-menu-item> </j-menu-item>
</a-menu> </j-menu>
</template> </template>
</a-dropdown> </j-dropdown>
<PermissionButton <PermissionButton
v-else v-else
:uhasPermission="item.permission" :uhasPermission="item.permission"
@ -117,7 +120,7 @@
item.text item.text
}}</span> }}</span>
</PermissionButton> </PermissionButton>
</a-tooltip> </j-tooltip>
</template> </template>
<template #mark> <template #mark>
@ -144,7 +147,7 @@
></BadgeStatus> ></BadgeStatus>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<PermissionButton <PermissionButton
v-for="i in table.getActions(slotProps, 'table')" v-for="i in table.getActions(slotProps, 'table')"
:uhasPermission="i.permission" :uhasPermission="i.permission"
@ -156,12 +159,18 @@
> >
<AIcon :type="i.icon" /> <AIcon :type="i.icon" />
</PermissionButton> </PermissionButton>
</a-space> </j-space>
</template> </template>
</j-pro-table> </j-pro-table>
</div> </div>
<div class="dialogs"> <div class="dialogs">
<MenuDialog ref="dialogRef" mode="edit" /> <MenuDialog
v-if="dialogVisible"
v-model:visible="dialogVisible"
:id="selectId"
:provider="selectProvider"
mode="edit"
/>
</div> </div>
</page-container> </page-container>
</template> </template>
@ -263,11 +272,9 @@ const columns = [
scopedSlots: true, scopedSlots: true,
}, },
]; ];
const params = ref({}); const queryParams = ref({});
const search = (newParams: any) => (params.value = { ...newParams });
const tableRef = ref(); const tableRef = ref();
const dialogRef = ref();
const table = { const table = {
refresh: () => { refresh: () => {
tableRef.value.reload(); tableRef.value.reload();
@ -359,8 +366,9 @@ const table = {
}, },
icon: 'MenuUnfoldOutlined', icon: 'MenuUnfoldOutlined',
onClick: () => { onClick: () => {
dialogRef.value && selectId.value = data.id;
dialogRef.value.openDialog(data.id, data.provider); selectProvider.value = data.provider;
dialogVisible.value = true;
}, },
}); });
// 有api操作权限 // 有api操作权限
@ -415,6 +423,9 @@ const table = {
return typeOptions.find((item) => item.value === val)?.label; return typeOptions.find((item) => item.value === val)?.label;
}, },
}; };
const dialogVisible = ref(false);
const selectId = ref<string>('');
const selectProvider = ref<any>('');
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>