update: 应用管理组件替换、弹窗优化
This commit is contained in:
easy
parent
68720f668c
commit
58106e9fe4
|
|
@ -12,7 +12,7 @@
|
|||
内部独立应用的<span>后端服务</span>相互<span>独立运行</span>，互不影响。
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img1" />
|
||||
<j-image width="100%" :src="img1" />
|
||||
</div>
|
||||
|
||||
<h1>2.接入方式说明</h1>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</div>
|
||||
<div>内部独立应用的<span>后端服务在同一个环境运行</span>。</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img2" />
|
||||
<j-image width="100%" :src="img2" />
|
||||
</div>
|
||||
<h1>2.接入方式说明</h1>
|
||||
<div>1、页面集成</div>
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
<h1>1.概述</h1>
|
||||
<div>钉钉企业内部应用适用于通过钉钉登录<span>物联网平台</span></div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img4" />
|
||||
<j-image width="100%" :src="img4" />
|
||||
</div>
|
||||
<h1>2.接入方式说明</h1>
|
||||
<div>1、单点登录</div>
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
<h1>1.概述</h1>
|
||||
<div>微信网站应用适用于通过微信授权登录<span>物联网平台</span></div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img3" />
|
||||
<j-image width="100%" :src="img3" />
|
||||
</div>
|
||||
<h1>2.接入方式说明</h1>
|
||||
<div>1、单点登录</div>
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
。例如将公司业务管理系统集成至物联网平台，或者将物联网平台集成至业务管理系统。以实现多处访问、集中管控的业务场景。
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img5" />
|
||||
<j-image width="100%" :src="img5" />
|
||||
</div>
|
||||
<h1>2.接入方式说明</h1>
|
||||
<div>1、页面集成</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -2,10 +2,10 @@
|
|||
<div class="form-label-container">
|
||||
<span class="text">{{ props.text }}</span>
|
||||
<span class="required" v-show="props.required">*</span>
|
||||
<a-tooltip>
|
||||
<j-tooltip>
|
||||
<template #title>{{ props.tooltip }}</template>
|
||||
<AIcon type="QuestionCircleOutlined" class="icon" />
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +1,52 @@
|
|||
<template>
|
||||
<div class="request-table-container">
|
||||
<a-table
|
||||
<j-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:datj-source="tableData"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'key'">
|
||||
<a-input v-model:value="record.label" />
|
||||
<j-input v-model:value="record.label" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'value'">
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="record.value"
|
||||
v-if="props.valueType === 'input'"
|
||||
/>
|
||||
<a-select
|
||||
<j-select
|
||||
v-else-if="props.valueType === 'select'"
|
||||
v-model:value="record.value"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="item in props.valueOptions"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>{{ item.label }}</j-select-option
|
||||
>
|
||||
</a-select>
|
||||
</j-select>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'action'">
|
||||
<a-button
|
||||
<j-button
|
||||
type="link"
|
||||
@click="removeRow((current - 1) * 10 + index)"
|
||||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</a-button>
|
||||
</j-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
</j-table>
|
||||
<j-pagination
|
||||
v-show="props.value.length > 10"
|
||||
v-model:current="current"
|
||||
:page-size="10"
|
||||
:total="props.value.length"
|
||||
show-less-items
|
||||
/>
|
||||
<a-button type="dashed" @click="addRow" class="add-btn">
|
||||
<j-button type="dashed" @click="addRow" class="add-btn">
|
||||
<AIcon type="PlusOutlined" />新增
|
||||
</a-button>
|
||||
</j-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -120,7 +120,6 @@ function addRow() {
|
|||
label: '',
|
||||
value: '',
|
||||
};
|
||||
console.log(111);
|
||||
|
||||
emits('update:value', [...props.value, newRow]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<a-card class="save-container">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<div class="save-container">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="14">
|
||||
<EditForm @change-apply-type="chengeType" />
|
||||
</a-col>
|
||||
<a-col :span="10"><Does :type="rightType" /></a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</j-col>
|
||||
<j-col :span="10"><Does :type="rightType" /></j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,3 +21,10 @@ const chengeType = (newType: applyType) => {
|
|||
rightType.value = newType;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.save-container {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
<j-modal
|
||||
visible
|
||||
title="集成菜单"
|
||||
width="600px"
|
||||
@ok="dialog.handleOk"
|
||||
@cancel="dialog.cancel"
|
||||
@ok="handleOk"
|
||||
@cancel="cancel"
|
||||
class="edit-dialog-container"
|
||||
:confirmLoading="dialog.loading"
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
:confirmLoading="loading"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
v-model:value="form.checkedSystem"
|
||||
@change="(value) => value && getTree(value as string)"
|
||||
@change="(value:string) => value && getTree(value)"
|
||||
style="width: 200px"
|
||||
placeholder="请选择集成系统"
|
||||
>
|
||||
<a-select-option
|
||||
<j-select-option
|
||||
v-for="item in form.systemList"
|
||||
: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>
|
||||
<a-tree
|
||||
<p style="margin: 20px 0 0 0" v-show="form.menuTree.length > 0">
|
||||
当前集成菜单
|
||||
</p>
|
||||
<j-tree
|
||||
v-model:checkedKeys="form.checkedMenu"
|
||||
v-model:expandedKeys="form.expandedKeys"
|
||||
checkable
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
<template #title="{ name }">
|
||||
<span>{{ name }}</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-modal>
|
||||
</j-tree>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -55,69 +55,60 @@ import { message } from 'ant-design-vue';
|
|||
import { getMenuTree_api } from '@/api/system/menu';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
|
||||
const emits = defineEmits(['update:visible']);
|
||||
const props = defineProps<{
|
||||
mode: 'add' | 'edit';
|
||||
visible: boolean;
|
||||
id: string;
|
||||
provider: applyType;
|
||||
}>();
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
loading: false,
|
||||
|
||||
handleOk: () => {
|
||||
const items = filterTree(form.menuTree, [
|
||||
...form.checkedMenu,
|
||||
...form.half,
|
||||
]);
|
||||
if (form.checkedSystem) {
|
||||
if (items && items.length !== 0) {
|
||||
saveOwnerMenu_api('iot', form.id, items).then((resp) => {
|
||||
const loading = ref(false);
|
||||
const handleOk = () => {
|
||||
const items = filterTree(form.menuTree, [
|
||||
...form.checkedMenu,
|
||||
...form.half,
|
||||
]);
|
||||
if (form.checkedSystem) {
|
||||
if (items && items.length !== 0) {
|
||||
loading.value = true;
|
||||
saveOwnerMenu_api('iot', form.id, items)
|
||||
.then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
dialog.visible = false;
|
||||
emits('update:visible', false);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
message.warning('请勾选配置菜单');
|
||||
}
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
} else {
|
||||
message.warning('请选择所属系统');
|
||||
message.warning('请勾选配置菜单');
|
||||
}
|
||||
},
|
||||
cancel: () => {
|
||||
if (props.mode === 'add')
|
||||
menuStory.jumpPage('system/Apply/Save', {}, { id: form.id });
|
||||
dialog.visible = false;
|
||||
},
|
||||
changeVisible: (id: string, provider: applyType) => {
|
||||
form.id = id;
|
||||
form.provider = provider;
|
||||
form.checkedSystem = undefined;
|
||||
form.checkedMenu = [];
|
||||
dialog.visible = true;
|
||||
|
||||
if (id) {
|
||||
getSystemList();
|
||||
getMenus();
|
||||
}
|
||||
},
|
||||
});
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
} else {
|
||||
message.warning('请选择所属系统');
|
||||
}
|
||||
};
|
||||
const cancel = () => {
|
||||
if (props.mode === 'add')
|
||||
menuStory.jumpPage('system/Apply/Save', {}, { id: form.id });
|
||||
emits('update:visible', false);
|
||||
};
|
||||
|
||||
const form = reactive({
|
||||
id: '',
|
||||
checkedSystem: '' as undefined | string,
|
||||
id: props.id,
|
||||
checkedSystem: undefined as undefined | string,
|
||||
checkedMenu: [] as string[],
|
||||
expandedKeys: [] as string[],
|
||||
half: [] as string[],
|
||||
|
||||
provider: '' as applyType,
|
||||
provider: props.provider,
|
||||
systemList: [] as optionItemType[],
|
||||
menuTree: [] as any[],
|
||||
});
|
||||
|
||||
if (props.id) {
|
||||
getSystemList();
|
||||
getMenus();
|
||||
}
|
||||
/**
|
||||
* 与集成系统关联的菜单
|
||||
* @param params
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div class="apply-container">
|
||||
<Search :columns="columns" @search="search" />
|
||||
<j-advanced-search
|
||||
:columns="columns"
|
||||
@search="(params:any)=>queryParams = {...params}"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
|
|
@ -10,7 +13,7 @@
|
|||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
:params="params"
|
||||
:params="queryParams"
|
||||
:gridColumn="3"
|
||||
>
|
||||
<template #headerTitle>
|
||||
|
|
@ -53,8 +56,8 @@
|
|||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
类型
|
||||
</div>
|
||||
|
|
@ -65,45 +68,45 @@
|
|||
)
|
||||
}}
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
说明
|
||||
</div>
|
||||
<div>{{ slotProps.description }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<a-tooltip
|
||||
<j-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<a-dropdown
|
||||
<j-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<a-button>
|
||||
<j-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</a-button>
|
||||
</j-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item
|
||||
<j-menu>
|
||||
<j-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<a-button
|
||||
<j-button
|
||||
type="link"
|
||||
@click="o.onClick"
|
||||
>
|
||||
<AIcon :type="o.icon" />
|
||||
<span>{{ o.text }}</span>
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</j-button>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</j-dropdown>
|
||||
<PermissionButton
|
||||
v-else
|
||||
:uhasPermission="item.permission"
|
||||
|
|
@ -117,7 +120,7 @@
|
|||
item.text
|
||||
}}</span>
|
||||
</PermissionButton>
|
||||
</a-tooltip>
|
||||
</j-tooltip>
|
||||
</template>
|
||||
|
||||
<template #mark>
|
||||
|
|
@ -144,7 +147,7 @@
|
|||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
v-for="i in table.getActions(slotProps, 'table')"
|
||||
:uhasPermission="i.permission"
|
||||
|
|
@ -156,12 +159,18 @@
|
|||
>
|
||||
<AIcon :type="i.icon" />
|
||||
</PermissionButton>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
</div>
|
||||
<div class="dialogs">
|
||||
<MenuDialog ref="dialogRef" mode="edit" />
|
||||
<MenuDialog
|
||||
v-if="dialogVisible"
|
||||
v-model:visible="dialogVisible"
|
||||
:id="selectId"
|
||||
:provider="selectProvider"
|
||||
mode="edit"
|
||||
/>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
@ -263,11 +272,9 @@ const columns = [
|
|||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
const params = ref({});
|
||||
const search = (newParams: any) => (params.value = { ...newParams });
|
||||
const queryParams = ref({});
|
||||
|
||||
const tableRef = ref();
|
||||
const dialogRef = ref();
|
||||
const table = {
|
||||
refresh: () => {
|
||||
tableRef.value.reload();
|
||||
|
|
@ -359,8 +366,9 @@ const table = {
|
|||
},
|
||||
icon: 'MenuUnfoldOutlined',
|
||||
onClick: () => {
|
||||
dialogRef.value &&
|
||||
dialogRef.value.openDialog(data.id, data.provider);
|
||||
selectId.value = data.id;
|
||||
selectProvider.value = data.provider;
|
||||
dialogVisible.value = true;
|
||||
},
|
||||
});
|
||||
// 有api操作权限
|
||||
|
|
@ -415,6 +423,9 @@ const table = {
|
|||
return typeOptions.find((item) => item.value === val)?.label;
|
||||
},
|
||||
};
|
||||
const dialogVisible = ref(false);
|
||||
const selectId = ref<string>('');
|
||||
const selectProvider = ref<any>('');
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue