更新用户菜单
This commit is contained in:
weipengfei
parent
cc29519aa9
commit
6efd2eb4ec
@ -110,11 +110,15 @@ import {
|
||||
import { timeFormat } from "@/utils/util";
|
||||
import type { PropType } from "vue";
|
||||
import { MenuEnum } from "@/enums/appEnums";
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["success", "close"]);
|
||||
const formRef = shallowRef<FormInstance>();
|
||||
@ -127,7 +131,13 @@ const handleMenuIcon = (res: any) => {
|
||||
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(() => {
|
||||
|
||||
@ -49,16 +49,21 @@
|
||||
</template>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
<!-- <el-button
|
||||
v-perms="['user.user_menu/delete']"
|
||||
:disabled="!selectData.length"
|
||||
@click="handleDelete(selectData)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
<div class="mt-4">
|
||||
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table
|
||||
: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="权限类型: M=目录，C=菜单，A=按钮"
|
||||
@ -76,6 +81,7 @@
|
||||
label="路由地址"
|
||||
prop="paths"
|
||||
show-overflow-tooltip
|
||||
width="320px"
|
||||
/>
|
||||
<el-table-column
|
||||
label="路由参数"
|
||||
@ -132,6 +138,7 @@
|
||||
v-if="showEdit"
|
||||
ref="editRef"
|
||||
:dict-data="dictData"
|
||||
:menuList="pager.lists"
|
||||
@success="getLists"
|
||||
@close="showEdit = false"
|
||||
/>
|
||||
|
||||
@ -1,154 +1,154 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
title="分配权限"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:model="formData"
|
||||
label-width="60px"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-scrollbar class="h-[400px] sm:h-[600px]">
|
||||
<el-form-item label="权限" prop="menu_id">
|
||||
<div>
|
||||
<el-checkbox label="展开/折叠" @change="handleExpand" />
|
||||
<el-checkbox label="全选/不全选" @change="handleSelectAll" />
|
||||
<el-checkbox v-model="checkStrictly" label="父子联动" />
|
||||
<div>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="menuTree"
|
||||
:props="{
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}"
|
||||
:check-strictly="!checkStrictly"
|
||||
node-key="id"
|
||||
:default-expand-all="isExpand"
|
||||
show-checkbox
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
title="分配权限"
|
||||
:async="true"
|
||||
width="550px"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:model="formData"
|
||||
label-width="60px"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-scrollbar class="h-[400px] sm:h-[600px]">
|
||||
<el-form-item label="权限" prop="menu_id">
|
||||
<div>
|
||||
<el-checkbox label="展开/折叠" @change="handleExpand" />
|
||||
<el-checkbox label="全选/不全选" @change="handleSelectAll" />
|
||||
<el-checkbox v-model="checkStrictly" label="父子联动" />
|
||||
<div>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="menuTree"
|
||||
:props="{
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
}"
|
||||
:check-strictly="!checkStrictly"
|
||||
node-key="id"
|
||||
:default-expand-all="isExpand"
|
||||
show-checkbox
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { CheckboxValueType, ElTree, FormInstance } from 'element-plus'
|
||||
import { roleEdit } from '@/api/perms/role'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { treeToArray } from '@/utils/util'
|
||||
import { menuAll } from '@/api/perms/menu'
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const treeRef = shallowRef<InstanceType<typeof ElTree>>()
|
||||
const formRef = shallowRef<FormInstance>()
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const isExpand = ref(false)
|
||||
const checkStrictly = ref(true)
|
||||
const loading = ref(false)
|
||||
const menuArray = ref<any[]>([])
|
||||
const menuTree = ref<any[]>([])
|
||||
import type { CheckboxValueType, ElTree, FormInstance } from "element-plus";
|
||||
import { roleEdit } from "@/api/perms/role";
|
||||
import Popup from "@/components/popup/index.vue";
|
||||
import { treeToArray } from "@/utils/util";
|
||||
import { menuAll } from "@/api/perms/menu";
|
||||
const emit = defineEmits(["success", "close"]);
|
||||
const treeRef = shallowRef<InstanceType<typeof ElTree>>();
|
||||
const formRef = shallowRef<FormInstance>();
|
||||
const popupRef = shallowRef<InstanceType<typeof Popup>>();
|
||||
const isExpand = ref(false);
|
||||
const checkStrictly = ref(true);
|
||||
const loading = ref(false);
|
||||
const menuArray = ref<any[]>([]);
|
||||
const menuTree = ref<any[]>([]);
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
sort: 0,
|
||||
menu_id: [] as any[]
|
||||
})
|
||||
id: "",
|
||||
name: "",
|
||||
desc: "",
|
||||
sort: 0,
|
||||
menu_id: [] as any[],
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: ['blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入名称",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const getOptions = () => {
|
||||
loading.value = true
|
||||
menuAll().then((res: any) => {
|
||||
menuTree.value = res
|
||||
menuArray.value = treeToArray(res)
|
||||
nextTick(() => {
|
||||
setDeptAllCheckedKeys()
|
||||
})
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
loading.value = true;
|
||||
menuAll().then((res: any) => {
|
||||
menuTree.value = res;
|
||||
menuArray.value = treeToArray(res);
|
||||
nextTick(() => {
|
||||
setDeptAllCheckedKeys();
|
||||
});
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 获取所有选择的节点包括半选中节点
|
||||
const getDeptAllCheckedKeys = () => {
|
||||
const checkedKeys = treeRef.value?.getCheckedKeys()
|
||||
const halfCheckedKeys = treeRef.value?.getHalfCheckedKeys()!
|
||||
checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys)
|
||||
return checkedKeys
|
||||
}
|
||||
const checkedKeys = treeRef.value?.getCheckedKeys();
|
||||
const halfCheckedKeys = treeRef.value?.getHalfCheckedKeys()!;
|
||||
checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
|
||||
return checkedKeys;
|
||||
};
|
||||
|
||||
const setDeptAllCheckedKeys = () => {
|
||||
formData.menu_id.forEach((v) => {
|
||||
nextTick(() => {
|
||||
treeRef.value?.setChecked(v, true, false)
|
||||
})
|
||||
})
|
||||
}
|
||||
formData.menu_id.forEach((v) => {
|
||||
nextTick(() => {
|
||||
treeRef.value?.setChecked(v, true, false);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleExpand = (check: CheckboxValueType) => {
|
||||
const treeList = menuTree.value
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
//@ts-ignore
|
||||
treeRef.value.store.nodesMap[treeList[i].id].expanded = check
|
||||
}
|
||||
}
|
||||
const treeList = menuTree.value;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
//@ts-ignore
|
||||
treeRef.value.store.nodesMap[treeList[i].id].expanded = check;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAll = (check: CheckboxValueType) => {
|
||||
if (check) {
|
||||
treeRef.value?.setCheckedKeys(menuArray.value.map((item) => item.id))
|
||||
} else {
|
||||
treeRef.value?.setCheckedKeys([])
|
||||
}
|
||||
}
|
||||
if (check) {
|
||||
treeRef.value?.setCheckedKeys(menuArray.value.map((item) => item.id));
|
||||
} else {
|
||||
treeRef.value?.setCheckedKeys([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
formData.menu_id = getDeptAllCheckedKeys()!
|
||||
await roleEdit(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
await formRef.value?.validate();
|
||||
formData.menu_id = getDeptAllCheckedKeys()!;
|
||||
await roleEdit(formData);
|
||||
popupRef.value?.close();
|
||||
emit("success");
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
popupRef.value?.open()
|
||||
}
|
||||
popupRef.value?.open();
|
||||
};
|
||||
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key]
|
||||
}
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
getOptions()
|
||||
getOptions();
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData
|
||||
})
|
||||
open,
|
||||
setFormData,
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user