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-01-31 11:39:47 +08:00
parent cc07ccb19d
commit 471a442709
5 changed files with 261 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/system/menu.ts
View File

@ -10,4 +10,8 @@ export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tre
// 获取资产类型
export const getAssetsType_api = () => server.get(`/asset/types`);
// 获取菜单详情
export const getMenuDetail_api = (id:string) => server.get(`/menu/${id}`);
export const getMenuInfo_api = (id:string) => server.get(`/menu/${id}`);
// 编辑菜单信息
export const saveMenuInfo_api = (data: object) => server.patch(`/menu`, data);
// 新增菜单信息
export const addMenuInfo_api = (data: object) => server.post(`/menu`, data);

132
src/views/system/Menu/Detail/BasicInfo.vue
View File

@ -2,7 +2,7 @@
<div class="basic-info-container">
<a-card>
<h3>基本信息</h3>
<a-form :model="form.data" class="basic-form">
<a-form ref="basicFormRef" :model="form.data" class="basic-form">
<div class="row" style="display: flex">
<a-form-item
label="菜单图标"
@ -16,13 +16,20 @@
style="flex: 0 0 186px"
>
<div class="icon-upload has-icon" v-if="form.data.icon">
<svg aria-hidden="true">
<use :xlinkHref="`#${form.data.icon}`" />
</svg>
<span class="mark">点击修改</span>
<AIcon
:type="form.data.icon"
style="font-size: 90px"
/>
<span class="mark" @click="dialog.openDialog"
>点击修改</span
>
</div>
<div v-else class="icon-upload no-icon">
<div
v-else
@click="dialog.openDialog"
class="icon-upload no-icon"
>
<span>
<plus-outlined style="font-size: 30px" />
<p>点击选择图标</p>
@ -97,7 +104,11 @@
</a-card>
<a-card>
<h3>权限配置</h3>
<a-form :model="form.data" class="basic-form permiss-form">
<a-form
ref="permissFormRef"
:model="form.data"
class="basic-form permiss-form"
>
<a-form-item name="accessSupport" required>
<template #label>
<span style="margin-right: 3px">数据权限控制</span>
@ -174,17 +185,19 @@
</a-form-item>
</a-form-item>
<a-form-item label="权限">
<a-input
v-model:value="form.data.permissions"
style="width: 300px"
allowClear
placeholder="请输入权限名称"
/>
<PermissChoose v-model:value="form.data.permissions" />
</a-form-item>
</a-form>
<a-button type="primary" @click="clickSave">保存</a-button>
<a-button type="primary" @click="clickSave" v-loading="saveLoading"
>保存</a-button
>
</a-card>
<!-- 弹窗 -->
<div class="dialogs">
<ChooseIconDialog ref="ChooseIconRef" @confirm="dialog.confirm" />
</div>
</div>
</template>
@ -194,20 +207,28 @@ import {
QuestionCircleFilled,
QuestionCircleOutlined,
} from '@ant-design/icons-vue';
import { FormInstance, message } from 'ant-design-vue';
import ChooseIconDialog from '../components/ChooseIconDialog.vue';
import PermissChoose from '../components/PermissChoose.vue';
import {
getMenuTree_api,
getAssetsType_api,
getMenuDetail_api,
getMenuInfo_api,
saveMenuInfo_api,
addMenuInfo_api,
} from '@/api/system/menu';
import { exportPermission_api } from '@/api/system/permission';
const route = useRoute();
const router = useRouter();
const routeParams = {
id: route.params.id === ':id' ? '' : (route.params.id as string),
id: route.params.id === ':id' ? undefined : (route.params.id as string),
...route.query,
url: route.query.basePath,
};
const basicFormRef = ref<FormInstance>();
const permissFormRef = ref<FormInstance>();
const form = reactive({
data: {
name: '',
@ -215,8 +236,8 @@ const form = reactive({
sortIndex: '',
icon: '',
describe: '',
permissions: '',
accessSupport: '',
permissions: [],
accessSupport: 'unsupported',
assetType: undefined,
indirectMenus: [],
...routeParams,
@ -229,23 +250,63 @@ const form = reactive({
init: () => {
// 获取菜单详情
routeParams.id &&
getMenuDetail_api(routeParams.id).then((resp) => {
getMenuInfo_api(routeParams.id).then((resp) => {
console.log('菜单详情', resp);
});
// 获取权限列表
// exportPermission_api()
// 获取关联菜单
getMenuTree_api({ paging: false }).then((resp) => {
console.log('关联菜单', resp);
});
// 获取资产类型
getAssetsType_api().then((resp:any) => {
form.assetsType = resp.result.map((item:any)=>({label:item.name,value:item.id}))
getAssetsType_api().then((resp: any) => {
form.assetsType = resp.result.map((item: any) => ({
label: item.name,
value: item.id,
}));
});
},
});
form.init();
const clickSave = () => {};
const ChooseIconRef = ref<any>(null);
const dialog = {
openDialog: () => {
ChooseIconRef.value && ChooseIconRef.value.openDialog();
},
confirm: (typeStr: string) => {
form.data.icon = typeStr || form.data.icon;
},
};
const saveLoading = ref<boolean>(false);
const clickSave = () => {
if (!basicFormRef || !permissFormRef) return;
Promise.all([
basicFormRef.value?.validate(),
permissFormRef.value?.validate(),
])
.then(() => {
const api = routeParams.id ? saveMenuInfo_api : addMenuInfo_api;
saveLoading.value = true;
api(form.data)
.then((resp: any) => {
if (resp.status === 200) {
message.success('操作成功！');
// 新增后刷新页面，编辑则不需要
if (!routeParams.id) {
router.push(
`/system/Menu/detail/${resp.result.id}`,
);
routeParams.id = resp.result.id;
form.init();
}
} else {
message.error('操作失败！');
}
})
.finally(() => (saveLoading.value = false));
})
.catch((err) => {});
};
type formType = {
name: string;
@ -253,7 +314,7 @@ type formType = {
url: string;
sortIndex: string;
icon: string;
permissions: string;
permissions: any[];
describe: string;
accessSupport: string;
assetType: string | undefined;
@ -321,6 +382,25 @@ type assetType = {
}
}
.has-icon {
position: relative;
text-align: center;
.mark {
position: absolute;
left: 0;
top: 0;
display: none;
background-color: rgba(0, 0, 0, 0.35);
color: #fff;
width: 100%;
height: 100%;
font-size: 16px;
align-items: center;
justify-content: center;
}
&:hover .mark {
display: flex;
}
}
.no-icon {
background-color: rgba(0, 0, 0, 0.06);

100
src/views/system/Menu/components/ChooseIconDialog.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<a-modal
v-model:visible="dialog.visible"
title="菜单图标"
width="800px"
@ok="dialog.handleOk"
>
<a-radio-group v-model:value="selected" class="radio">
<a-radio-button
v-for="typeStr in iconKeys"
:value="typeStr"
:class="{ active: selected === typeStr }"
>
<a-icon :type="typeStr" />
</a-radio-button>
</a-radio-group>
</a-modal>
</template>
<script setup lang="ts">
const emits = defineEmits(['confirm']);
const iconKeys = [
'EyeOutlined',
'EditOutlined',
'PlusOutlined',
'DeleteOutlined',
'CheckCircleOutlined',
'StopOutlined',
'CheckOutlined',
'CloseOutlined',
'DownOutlined',
'ImportOutlined',
'ExportOutlined',
'SyncOutlined',
'ExclamationCircleOutlined',
'UploadOutlined',
'LoadingOutlined',
'PlusCircleOutlined',
'QuestionCircleOutlined',
'DisconnectOutlined',
'LinkOutlined',
'PoweroffOutlined',
'SwapOutlined',
'BugOutlined',
'BarsOutlined',
'ArrowDownOutlined',
'SmallDashOutlined',
'TeamOutlined',
'MenuUnfoldOutlined',
'MenuFoldOutlined',
'QuestionCircleOutlined',
'InfoCircleOutlined',
'SearchOutlined',
];
const dialog = reactive({
visible: false,
handleOk: () => {
emits('confirm', selected.value);
dialog.changeVisible();
selected.value = '';
},
changeVisible: (show?: boolean) => {
dialog.visible = show === undefined ? !dialog.visible : show;
},
});
const selected = ref<string>('');
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
});
</script>
<style lang="less" scoped>
.radio {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(6, 1fr);
max-height: 500px;
overflow-y: auto;
.ant-radio-button-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
font-size: 40px;
border: 2px solid #efefef;
border-radius: 2px;
cursor: pointer;
&.active {
color: #415ed1;
border-color: #415ed1;
}
}
}
</style>

47
src/views/system/Menu/components/PermissChoose.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div class="permission-choose-container">
<a-input
v-model:value="searchValue"
style="width: 300px"
allowClear
placeholder="请输入权限名称"
/>
</div>
</template>
<script setup lang="ts">
import { exportPermission_api } from '@/api/system/permission';
const props = defineProps({
value: Array,
});
const searchValue = ref<string>('');
const permission = reactive({
list: [] as permissionType[],
// 获取权限列表
getList: () => {
exportPermission_api({ paging: false }).then((resp) => {
permission.list = resp.result as permissionType[]
});
},
});
permission.getList()
type permissionType = {
id: string;
name: string;
actions: object[]
}
</script>
<style scoped></style>

5
src/views/system/Menu/index.vue
View File

@ -208,7 +208,8 @@ const table = reactive({
};
const resp: any = await getMenuTree_api(params);
const lastItem = resp.result[resp.result.length - 1];
table.total == lastItem ? lastItem.sortIndex + 1 : 1;
table.total = lastItem ? lastItem.sortIndex + 1 : 1;
return {
code: resp.message,
result: {
@ -225,7 +226,7 @@ const table = reactive({
router.push(
`/system/Menu/detail/${row.id || ':id'}?pid=${
row.pid || ''
}&basePath=${row.basePath || ''}&sortIndex=${table.total + 1}`,
}&basePath=${row.basePath || ''}&sortIndex=${table.total}`,
);
},
// 删除