mkm/TaskSystem-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新用户菜单

Browse Source
This commit is contained in:
weipengfei 2023-08-24 10:24:58 +08:00
parent cc29519aa9
commit 6efd2eb4ec
3 changed files with 147 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/user_menu/edit.vue
View File

@ -110,11 +110,15 @@ import {
import { timeFormat } from "@/utils/util"; import { timeFormat } from "@/utils/util";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { MenuEnum } from "@/enums/appEnums"; import { MenuEnum } from "@/enums/appEnums";
defineProps({ const props = defineProps({
dictData: { dictData: {
type: Object as PropType<Record<string, any[]>>, type: Object as PropType<Record<string, any[]>>,
default: () => ({}), default: () => ({}),
}, },
menuList: {
type: Array,
default: () => [],
},
}); });
const emit = defineEmits(["success", "close"]); const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>(); const formRef = shallowRef<FormInstance>();
@ -127,7 +131,13 @@ const handleMenuIcon = (res: any) => {
formData.icon = res.data.uri; formData.icon = res.data.uri;
}; };
const previousMenuList = reactive([{ id: 0, name: "顶级", children: [] }]); const previousMenuList = ref([{ id: 0, name: "顶级", children: [] }]);
const initMenu = () => {
props.menuList.forEach((item: any) => {
previousMenuList.value[0].children.push(item);
});
};
initMenu();
// 弹窗标题 // 弹窗标题
const popupTitle = computed(() => { const popupTitle = computed(() => {

15
src/views/user_menu/index.vue
View File

@ -49,16 +49,21 @@
</template> </template>
新增 新增
</el-button> </el-button>
<el-button <!-- <el-button
v-perms="['user.user_menu/delete']" v-perms="['user.user_menu/delete']"
:disabled="!selectData.length" :disabled="!selectData.length"
@click="handleDelete(selectData)" @click="handleDelete(selectData)"
> >
删除 删除
</el-button> </el-button> -->
<div class="mt-4"> <div class="mt-4">
<el-table :data="pager.lists" @selection-change="handleSelectionChange"> <el-table
<el-table-column type="selection" width="55" /> :data="pager.lists"
@selection-change="handleSelectionChange"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<!-- <el-table-column type="selection" width="55" /> -->
<el-table-column label="上级菜单" prop="pid" show-overflow-tooltip /> <el-table-column label="上级菜单" prop="pid" show-overflow-tooltip />
<!-- <el-table-column <!-- <el-table-column
label="权限类型: M=目录，C=菜单，A=按钮" label="权限类型: M=目录，C=菜单，A=按钮"
@ -76,6 +81,7 @@
label="路由地址" label="路由地址"
prop="paths" prop="paths"
show-overflow-tooltip show-overflow-tooltip
width="320px"
/> />
<el-table-column <el-table-column
label="路由参数" label="路由参数"
@ -132,6 +138,7 @@
v-if="showEdit" v-if="showEdit"
ref="editRef" ref="editRef"
:dict-data="dictData" :dict-data="dictData"
:menuList="pager.lists"
@success="getLists" @success="getLists"
@close="showEdit = false" @close="showEdit = false"
/> />

248
src/views/user_role/auth.vue
View File

@ -1,154 +1,154 @@
<template> <template>
<div class="edit-popup"> <div class="edit-popup">
<popup <popup
ref="popupRef" ref="popupRef"
title="分配权限" title="分配权限"
:async="true" :async="true"
width="550px" width="550px"
@confirm="handleSubmit" @confirm="handleSubmit"
@close="handleClose" @close="handleClose"
> >
<el-form <el-form
class="ls-form" class="ls-form"
ref="formRef" ref="formRef"
:rules="rules" :rules="rules"
:model="formData" :model="formData"
label-width="60px" label-width="60px"
v-loading="loading" v-loading="loading"
> >
<el-scrollbar class="h-[400px] sm:h-[600px]"> <el-scrollbar class="h-[400px] sm:h-[600px]">
<el-form-item label="权限" prop="menu_id"> <el-form-item label="权限" prop="menu_id">
<div> <div>
<el-checkbox label="展开/折叠" @change="handleExpand" /> <el-checkbox label="展开/折叠" @change="handleExpand" />
<el-checkbox label="全选/不全选" @change="handleSelectAll" /> <el-checkbox label="全选/不全选" @change="handleSelectAll" />
<el-checkbox v-model="checkStrictly" label="父子联动" /> <el-checkbox v-model="checkStrictly" label="父子联动" />
<div> <div>
<el-tree <el-tree
ref="treeRef" ref="treeRef"
:data="menuTree" :data="menuTree"
:props="{ :props="{
label: 'name', label: 'name',
children: 'children' children: 'children',
}" }"
:check-strictly="!checkStrictly" :check-strictly="!checkStrictly"
node-key="id" node-key="id"
:default-expand-all="isExpand" :default-expand-all="isExpand"
show-checkbox show-checkbox
/> />
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
</el-scrollbar> </el-scrollbar>
</el-form> </el-form>
</popup> </popup>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { CheckboxValueType, ElTree, FormInstance } from 'element-plus' import type { CheckboxValueType, ElTree, FormInstance } from "element-plus";
import { roleEdit } from '@/api/perms/role' import { roleEdit } from "@/api/perms/role";
import Popup from '@/components/popup/index.vue' import Popup from "@/components/popup/index.vue";
import { treeToArray } from '@/utils/util' import { treeToArray } from "@/utils/util";
import { menuAll } from '@/api/perms/menu' import { menuAll } from "@/api/perms/menu";
const emit = defineEmits(['success', 'close']) const emit = defineEmits(["success", "close"]);
const treeRef = shallowRef<InstanceType<typeof ElTree>>() const treeRef = shallowRef<InstanceType<typeof ElTree>>();
const formRef = shallowRef<FormInstance>() const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>() const popupRef = shallowRef<InstanceType<typeof Popup>>();
const isExpand = ref(false) const isExpand = ref(false);
const checkStrictly = ref(true) const checkStrictly = ref(true);
const loading = ref(false) const loading = ref(false);
const menuArray = ref<any[]>([]) const menuArray = ref<any[]>([]);
const menuTree = ref<any[]>([]) const menuTree = ref<any[]>([]);
const formData = reactive({ const formData = reactive({
id: '', id: "",
name: '', name: "",
desc: '', desc: "",
sort: 0, sort: 0,
menu_id: [] as any[] menu_id: [] as any[],
}) });
const rules = { const rules = {
name: [ name: [
{ {
required: true, required: true,
message: '请输入名称', message: "请输入名称",
trigger: ['blur'] trigger: ["blur"],
} },
] ],
} };
const getOptions = () => { const getOptions = () => {
loading.value = true loading.value = true;
menuAll().then((res: any) => { menuAll().then((res: any) => {
menuTree.value = res menuTree.value = res;
menuArray.value = treeToArray(res) menuArray.value = treeToArray(res);
nextTick(() => { nextTick(() => {
setDeptAllCheckedKeys() setDeptAllCheckedKeys();
}) });
loading.value = false loading.value = false;
}) });
} };
// 获取所有选择的节点包括半选中节点 // 获取所有选择的节点包括半选中节点
const getDeptAllCheckedKeys = () => { const getDeptAllCheckedKeys = () => {
const checkedKeys = treeRef.value?.getCheckedKeys() const checkedKeys = treeRef.value?.getCheckedKeys();
const halfCheckedKeys = treeRef.value?.getHalfCheckedKeys()! const halfCheckedKeys = treeRef.value?.getHalfCheckedKeys()!;
checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys) checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys return checkedKeys;
} };
const setDeptAllCheckedKeys = () => { const setDeptAllCheckedKeys = () => {
formData.menu_id.forEach((v) => { formData.menu_id.forEach((v) => {
nextTick(() => { nextTick(() => {
treeRef.value?.setChecked(v, true, false) treeRef.value?.setChecked(v, true, false);
}) });
}) });
} };
const handleExpand = (check: CheckboxValueType) => { const handleExpand = (check: CheckboxValueType) => {
const treeList = menuTree.value const treeList = menuTree.value;
for (let i = 0; i < treeList.length; i++) { for (let i = 0; i < treeList.length; i++) {
//@ts-ignore //@ts-ignore
treeRef.value.store.nodesMap[treeList[i].id].expanded = check treeRef.value.store.nodesMap[treeList[i].id].expanded = check;
} }
} };
const handleSelectAll = (check: CheckboxValueType) => { const handleSelectAll = (check: CheckboxValueType) => {
if (check) { if (check) {
treeRef.value?.setCheckedKeys(menuArray.value.map((item) => item.id)) treeRef.value?.setCheckedKeys(menuArray.value.map((item) => item.id));
} else { } else {
treeRef.value?.setCheckedKeys([]) treeRef.value?.setCheckedKeys([]);
} }
} };
const handleSubmit = async () => { const handleSubmit = async () => {
await formRef.value?.validate() await formRef.value?.validate();
formData.menu_id = getDeptAllCheckedKeys()! formData.menu_id = getDeptAllCheckedKeys()!;
await roleEdit(formData) await roleEdit(formData);
popupRef.value?.close() popupRef.value?.close();
emit('success') emit("success");
} };
const handleClose = () => { const handleClose = () => {
emit('close') emit("close");
} };
const open = () => { const open = () => {
popupRef.value?.open() popupRef.value?.open();
} };
const setFormData = async (data: Record<any, any>) => { const setFormData = async (data: Record<any, any>) => {
for (const key in formData) { for (const key in formData) {
if (data[key] != null && data[key] != undefined) { if (data[key] != null && data[key] != undefined) {
//@ts-ignore //@ts-ignore
formData[key] = data[key] formData[key] = data[key];
}
} }
} }
};
getOptions() getOptions();
defineExpose({ defineExpose({
open, open,
setFormData setFormData,
}) });
</script> </script>