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

refactor: 菜单管理新增重构

Browse Source
This commit is contained in:
sheng
2023-07-28 17:09:41 +08:00
parent c26abef364
commit 0f86f5c6fc
6 changed files with 397 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/views/system/dept/api.ts
View File

@@ -1,5 +1,5 @@
import { request } from '/@/utils/service'; import { request } from '/@/utils/service';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq, PageQuery } from '@fast-crud/fast-crud'; import { UserPageQuery, AddReq, EditReq, InfoReq, PageQuery } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/dept/'; export const apiPrefix = '/api/system/dept/';

59
web/src/views/system/dept/components/DeptFormCom.vue
View File

@@ -1,9 +1,5 @@
<template> <template>
<el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="100px" label-position="right" <el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="100px" label-position="right" class="dept-form-com">
class="dept-form-com">
<el-form-item label="部门ID" prop="id">
<el-input v-model="deptFormData.id" disabled />
</el-form-item>
<el-form-item label="父级部门" prop="parent"> <el-form-item label="父级部门" prop="parent">
<el-select v-model="deptFormData.parent" style="width: 100%"> <el-select v-model="deptFormData.parent" style="width: 100%">
<el-option v-for="item in deptAllList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in deptAllList" :key="item.id" :label="item.name" :value="item.id" />
@@ -18,21 +14,14 @@
<el-form-item label="负责人" prop="owner"> <el-form-item label="负责人" prop="owner">
<el-input v-model="deptFormData.owner" /> <el-input v-model="deptFormData.owner" />
</el-form-item> </el-form-item>
<el-form-item label="联系电话" prop="phone"> <el-form-item label="备注" prop="remark">
<el-input v-model="deptFormData.phone" /> <el-input v-model="deptFormData.remark" maxlength="200" show-word-limit type="textarea" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="deptFormData.email" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="deptFormData.sort" controls-position="right" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleUpdateMenu" type="primary" :disabled="deptBtnLoading"> <el-button @click="handleUpdateMenu" type="primary" :disabled="deptBtnLoading">
{{ deptFormData.id ? '保存' : '新增' }} {{ deptFormData.id ? '保存' : '新增' }}
</el-button> </el-button>
<el-button @click="handleClose">取消 <el-button @click="handleClose">取消 </el-button>
</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
@@ -56,29 +45,26 @@ const rules = reactive<FormRules>({
const props = withDefaults(defineProps<IProps>(), { const props = withDefaults(defineProps<IProps>(), {
initFormData: () => null, initFormData: () => null,
}) });
const emit = defineEmits(['drawerClose']) const emit = defineEmits(['drawerClose']);
let deptAllList = ref<DeptListType[]>([]); let deptAllList = ref<DeptListType[]>([]);
let deptFormData = reactive<DeptFormDataType>({ let deptFormData = reactive<DeptFormDataType>({
id: '',
key: '', key: '',
parent: '', parent: '',
name: '', name: '',
owner: '', owner: '',
phone: '', remark: '',
email: '',
sort: 0,
is_catalog: true, is_catalog: true,
}) });
let deptBtnLoading = ref(false) let deptBtnLoading = ref(false);
const getData = async () => { const getData = async () => {
const res = await getAllDeptList(); const res = await getAllDeptList();
if (res?.code === 2000) { if (res?.code === 2000) {
deptAllList.value = res.data deptAllList.value = res.data;
} }
} };
const setDeptFormData = () => { const setDeptFormData = () => {
if (props.initFormData?.id) { if (props.initFormData?.id) {
@@ -87,42 +73,39 @@ const setDeptFormData = () => {
deptFormData.parent = props.initFormData.parent || ''; deptFormData.parent = props.initFormData.parent || '';
deptFormData.name = props.initFormData.name || ''; deptFormData.name = props.initFormData.name || '';
deptFormData.owner = props.initFormData.owner || ''; deptFormData.owner = props.initFormData.owner || '';
deptFormData.phone = props.initFormData.phone || '';
deptFormData.email = props.initFormData.email || '';
deptFormData.sort = props.initFormData.sort || 0;
} }
} };
const handleUpdateMenu = () => { const handleUpdateMenu = () => {
formRef.value?.validate(async (valid) => { formRef.value?.validate(async (valid) => {
if (!valid) return if (!valid) return;
try { try {
let res; let res;
deptBtnLoading.value = true deptBtnLoading.value = true;
if (deptFormData.id) { if (deptFormData.id) {
res = await UpdateObj(deptFormData); res = await UpdateObj(deptFormData);
} else { } else {
res = await AddObj(deptFormData) res = await AddObj(deptFormData);
} }
if (res?.code === 2000) { if (res?.code === 2000) {
successNotification(res.msg as string); successNotification(res.msg as string);
handleClose('submit'); handleClose('submit');
} }
} finally { } finally {
deptBtnLoading.value = false deptBtnLoading.value = false;
} }
}) });
}; };
const handleClose = (type: string = '') => { const handleClose = (type: string = '') => {
emit('drawerClose', type) emit('drawerClose', type);
formRef.value?.resetFields(); formRef.value?.resetFields();
}; };
onMounted(async () => { onMounted(async () => {
await getData() await getData();
setDeptFormData() setDeptFormData();
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

58
web/src/views/system/dept/components/TreeCom.vue
View File

@@ -6,23 +6,31 @@
<HomeFilled /> <HomeFilled />
</el-icon> </el-icon>
<span class="tc-head-txt">部门架构</span> <span class="tc-head-txt">部门架构</span>
<el-icon size="16" color="#606266" @click="() => showTotalNum = !showTotalNum" class="tc-head-icon"> <el-icon size="16" color="#606266" @click="() => (showTotalNum = !showTotalNum)" class="tc-head-icon">
<View v-show="!showTotalNum" /> <View v-show="!showTotalNum" />
<Hide v-show="showTotalNum" /> <Hide v-show="showTotalNum" />
</el-icon> </el-icon>
</div> </div>
<el-tree ref="treeRef" :data="treeData" :props="treeProps" :filter-node-method="handleFilterTreeNode" <el-tree
:load="handleLoadNode" lazy :indent="38" @node-click="handleNodeClick" highlight-current default-expand-all> ref="treeRef"
:data="treeData"
:props="treeProps"
:filter-node-method="handleFilterTreeNode"
:load="handleLoadNode"
lazy
:indent="38"
@node-click="handleNodeClick"
highlight-current
default-expand-all
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<element-tree-line :node="node" :showLabelLine="false" :indent="32"> <element-tree-line :node="node" :showLabelLine="false" :indent="32">
<span v-if="data.status" class="text-center font-black font-normal"> <span v-if="data.status" class="text-center font-black font-normal">
<SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }} <SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
<span v-show="showTotalNum">（10人）</span> <span v-show="showTotalNum">（10人）</span>
</span> </span>
<span v-else class="text-center font-black font-normal text-red-700"> <span v-else class="text-center font-black font-normal text-red-700"> <SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }} </span>
<SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
</span>
</element-tree-line> </element-tree-line>
</template> </template>
</el-tree> </el-tree>
@@ -64,7 +72,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, toRaw, h } from 'vue'; import { ref, watch, toRaw, h } from 'vue';
import { ElTree } from 'element-plus'; import { ElTree } from 'element-plus';
import { getElementLabelLine } from "element-tree-line"; import { getElementLabelLine } from 'element-tree-line';
import { Search } from '@element-plus/icons-vue'; import { Search } from '@element-plus/icons-vue';
import { lazyLoadDept } from '../api'; import { lazyLoadDept } from '../api';
import { warningNotification } from '../../../../utils/message'; import { warningNotification } from '../../../../utils/message';
@@ -84,12 +92,12 @@ const treeProps = {
withDefaults(defineProps<IProps>(), { withDefaults(defineProps<IProps>(), {
treeData: () => [], treeData: () => [],
}) });
const emit = defineEmits(['treeClick', 'deleteDept', 'updateDept']) const emit = defineEmits(['treeClick', 'deleteDept', 'updateDept']);
let filterVal = ref(''); let filterVal = ref('');
let showTotalNum = ref(false) let showTotalNum = ref(false);
let treeSelectDept = ref<TreeItemType>({}) let treeSelectDept = ref<TreeItemType>({});
const treeRef = ref<InstanceType<typeof ElTree>>(); const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterVal, (val) => { watch(filterVal, (val) => {
@@ -119,8 +127,8 @@ const handleLoadNode = (node: Node, resolve: Function) => {
* 部门的点击事件 * 部门的点击事件
*/ */
const handleNodeClick = (data: TreeItemType) => { const handleNodeClick = (data: TreeItemType) => {
treeSelectDept.value = data treeSelectDept.value = data;
emit('treeClick', data.id) emit('treeClick', data.id);
}; };
/** /**
@@ -129,10 +137,10 @@ const handleNodeClick = (data: TreeItemType) => {
const handleUpdateMenu = (type: string) => { const handleUpdateMenu = (type: string) => {
if (type === 'update') { if (type === 'update') {
if (!treeSelectDept.value.id) { if (!treeSelectDept.value.id) {
warningNotification('请选择菜单！') warningNotification('请选择菜单！');
return return;
} }
emit('updateDept', type, treeSelectDept.value) emit('updateDept', type, treeSelectDept.value);
} else { } else {
emit('updateDept', type); emit('updateDept', type);
} }
@@ -143,18 +151,18 @@ const handleUpdateMenu = (type: string) => {
*/ */
const handleDeleteDept = () => { const handleDeleteDept = () => {
if (!treeSelectDept.value.id) { if (!treeSelectDept.value.id) {
warningNotification('请选择菜单！') warningNotification('请选择菜单！');
return return;
} }
emit('deleteDept', treeSelectDept.value.id, () => { emit('deleteDept', treeSelectDept.value.id, () => {
treeSelectDept.value = {} treeSelectDept.value = {};
}) });
}; };
/** /**
* 部门上下移动操作 * 部门上下移动操作
*/ */
const handleSort = (type: string) => { } const handleSort = (type: string) => {};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -216,7 +224,7 @@ const handleSort = (type: string) => { }
font-size: 16px; font-size: 16px;
} }
.el-tree-node__content>.el-tree-node__expand-icon { .el-tree-node__content > .el-tree-node__expand-icon {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
margin-right: 5px; margin-right: 5px;
@@ -229,11 +237,11 @@ const handleSort = (type: string) => { }
} }
.el-tree .el-tree-node__expand-icon.is-leaf { .el-tree .el-tree-node__expand-icon.is-leaf {
margin-left: 0 margin-left: 0;
} }
.el-tree .el-tree-node__expand-icon:before { .el-tree .el-tree-node__expand-icon:before {
background: url("../../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%; background: url('../../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
content: ''; content: '';
display: block; display: block;
width: 24px; width: 24px;
@@ -241,7 +249,7 @@ const handleSort = (type: string) => { }
} }
.el-tree .el-tree-node__expand-icon.expanded:before { .el-tree .el-tree-node__expand-icon.expanded:before {
background: url("../../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%; background: url('../../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
content: ''; content: '';
display: block; display: block;
width: 24px; width: 24px;

6
web/src/views/system/dept/types.ts
View File

@@ -40,14 +40,12 @@ export interface TreeItemType {
} }
export interface DeptFormDataType { export interface DeptFormDataType {
id: string | number; id?: string | number;
key: string; key: string;
parent: string | number; parent: string | number;
name: string; name: string;
owner: string; owner: string;
phone: string; remark: string;
email: string;
sort: number;
is_catalog?: boolean; is_catalog?: boolean;
} }

12
web/src/views/system/menu/components/menuButton/crud.tsx
View File

@@ -1,12 +1,4 @@
import { import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps, UserPageQuery } from '@fast-crud/fast-crud';
AddReq,
DelReq,
EditReq,
dict,
CreateCrudOptionsRet,
CreateCrudOptionsProps,
UserPageQuery,
} from '@fast-crud/fast-crud';
import * as api from './api'; import * as api from './api';
import { request } from '/@/utils/service'; import { request } from '/@/utils/service';
@@ -185,7 +177,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
}, },
}), }),
column: { column: {
minWidth: 200, minWidth: 250,
sortable: true, sortable: true,
}, },
form: { form: {

215
web/src/views/system/menu/index.vue
View File

@@ -10,16 +10,28 @@
<Menu /> <Menu />
</el-icon> </el-icon>
菜单列表 菜单列表
<el-tooltip effect="dark" placement="right" <el-tooltip
content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"> effect="dark"
placement="right"
content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"
>
<el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip"> <el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
<QuestionFilled /> <QuestionFilled />
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
</div> </div>
<el-tree ref="treeRef" :data="data" :props="defaultTreeProps" :filter-node-method="filterNode" <el-tree
:load="loadNode" @node-drop="nodeDrop" lazy :indent="45" @node-click="handleNodeClick" highlight-current ref="treeRef"
default-expand-all> :data="data"
:props="defaultTreeProps"
:filter-node-method="filterNode"
:load="loadNode"
@node-drop="nodeDrop"
lazy
:indent="45"
@node-click="handleNodeClick"
highlight-current
>
<template #default="{ node, data }"> <template #default="{ node, data }">
<element-tree-line :node="node" :showLabelLine="false" :indent="32"> <element-tree-line :node="node" :showLabelLine="false" :indent="32">
<span v-if="data.status" class="text-center font-black font-normal"> <span v-if="data.status" class="text-center font-black font-normal">
@@ -75,8 +87,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" <el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" :before-close="handleDrawerClose">
:before-close="handleDrawerClose">
<div class="menu-box menu-drawer-box"> <div class="menu-box menu-drawer-box">
<div class="mcb-alert"> <div class="mcb-alert">
1.红色菜单代表状态禁用;<br /> 1.红色菜单代表状态禁用;<br />
@@ -85,48 +96,76 @@
4.支持拖拽菜单; 4.支持拖拽菜单;
</div> </div>
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right"> <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
<el-form-item label="菜单ID" prop="id"> <el-form-item label="菜单名称" prop="name">
<el-input v-model="form.id" disabled /> <el-input v-model="formData.name" />
</el-form-item> </el-form-item>
<el-form-item label="父级ID" prop="parent"> <el-form-item label="父级菜单" prop="parent">
<el-input v-model="form.parent" /> <el-input v-model="formData.parent" />
</el-form-item>
<el-form-item required label="菜单名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="组件地址" prop="component">
<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
:trigger-on-focus="false" clearable :debounce="100" placeholder="输入组件地址" />
</el-form-item>
<el-form-item required label="Url" prop="web_path">
<el-input v-model="form.web_path" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" />
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="侧边可见">
<el-radio-group v-model="form.visible">
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="缓存">
<el-radio-group v-model="form.cache">
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">禁用</el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="图标" prop="icon"> <el-form-item label="图标" prop="icon">
<IconSelector clearable v-model="form.icon" /> <IconSelector clearable v-model="formData.icon" />
</el-form-item> </el-form-item>
</el-form>
<el-row>
<el-col :span="12">
<el-form-item label="状态">
<el-switch v-model="formData.show_status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="formData.show_status" label="侧边显示">
<el-switch v-model="formData.slider_show" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="菜单状态">
<el-radio-group v-model="formData.menu_status">
<el-radio-button label="1" class="aaa">常规</el-radio-button>
<el-radio-button label="2">目录</el-radio-button>
<el-radio-button label="3">外链接</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" maxlength="200" show-word-limit type="textarea" />
</el-form-item>
<el-divider></el-divider> <el-divider></el-divider>
<div style="min-height: 184px">
<el-form-item v-if="formData.menu_status === '3'" required label="Url" prop="web_path">
<el-input v-model="formData.web_path" />
</el-form-item>
<el-form-item v-if="formData.menu_status === '1'" label="路由地址" prop="route_path">
<el-input v-model="formData.route_path" />
</el-form-item>
<el-form-item v-if="formData.menu_status === '1'" label="组件名称" prop="route_name">
<el-input v-model="formData.route_name" />
</el-form-item>
<el-form-item v-if="formData.menu_status === '1'" label="组件地址" prop="component">
<el-autocomplete
class="w-full"
v-model="formData.component"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
clearable
:debounce="100"
placeholder="输入组件地址"
/>
</el-form-item>
<el-form-item v-if="formData.menu_status === '1'" label="缓存">
<el-switch v-model="formData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
</el-form-item>
</div>
<el-divider></el-divider>
</el-form>
<div class="menus-btns"> <div class="menus-btns">
<el-button @click="saveMenu()" type="primary">保存</el-button> <el-button @click="saveMenu()" type="primary">保存</el-button>
<!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button> <!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
@@ -143,7 +182,7 @@
import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h } from 'vue'; import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h } from 'vue';
import XEUtils from 'xe-utils'; import XEUtils from 'xe-utils';
import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus'; import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
import { getElementLabelLine } from "element-tree-line"; import { getElementLabelLine } from 'element-tree-line';
import * as api from './api'; import * as api from './api';
import { Search } from '@element-plus/icons-vue'; import { Search } from '@element-plus/icons-vue';
import { errorMessage, successMessage, warningMessage } from '../../../utils/message'; import { errorMessage, successMessage, warningMessage } from '../../../utils/message';
@@ -158,8 +197,23 @@ const ElementTreeLine = getElementLabelLine(h);
const filterText = ref(''); const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>(); const treeRef = ref<InstanceType<typeof ElTree>>();
let drawerVisible = ref(false) let drawerVisible = ref(false);
let treeSelectNode = ref<Node | null>(null) let treeSelectNode = ref<Node | null>(null);
let formData = reactive({
name: '',
parent: '',
icon: '',
show_status: true,
slider_show: true,
menu_status: '1',
remark: '',
component: '',
web_path: '',
route_path: '',
route_name: '',
cache: true,
});
watch(filterText, (val) => { watch(filterText, (val) => {
treeRef.value!.filter(val); treeRef.value!.filter(val);
@@ -231,9 +285,12 @@ let form: FormTypes<any> = reactive({
visible: true, visible: true,
cache: true, cache: true,
}); });
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
// @ts-ignore // @ts-ignore
web_path: [{ validator: validateWebPath, trigger: 'blur' }], web_path: [{ validator: validateWebPath, trigger: 'blur' }],
name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
parent: [{ required: true, message: '父级菜单必选', trigger: ['blur', 'change'] }],
}); });
const formRef = ref<InstanceType<typeof ElForm>>(); const formRef = ref<InstanceType<typeof ElForm>>();
@@ -284,7 +341,7 @@ const saveMenu = () => {
api.UpdateObj(form).then((res: APIResponseData) => { api.UpdateObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
handleDrawerClose() handleDrawerClose();
}); });
} else { } else {
// 新增菜单 // 新增菜单
@@ -292,7 +349,7 @@ const saveMenu = () => {
api.AddObj(form).then((res: APIResponseData) => { api.AddObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
handleDrawerClose() handleDrawerClose();
}); });
} }
} else { } else {
@@ -304,7 +361,7 @@ const saveMenu = () => {
const newMenu = () => { const newMenu = () => {
formRef.value?.resetFields(); formRef.value?.resetFields();
isAddNewMenu.value = true; isAddNewMenu.value = true;
handleDrawerClose() handleDrawerClose();
}; };
const addChildMenu = () => { const addChildMenu = () => {
@@ -330,42 +387,38 @@ const handleNodeClick = (record: any, node: Node) => {
*/ */
const handleUpdateMenu = (type: string) => { const handleUpdateMenu = (type: string) => {
if (type === 'create') { if (type === 'create') {
drawerVisible.value = true drawerVisible.value = true;
return return;
} }
if (!form.id) { if (!form.id) {
warningMessage('请选择菜单！') warningMessage('请选择菜单！');
return return;
} }
drawerVisible.value = true drawerVisible.value = true;
} };
const handleDrawerClose = () => { const handleDrawerClose = () => {
drawerVisible.value = false drawerVisible.value = false;
} };
/** /**
* 删除菜单 * 删除菜单
*/ */
const handleDeleteMenu = () => { const handleDeleteMenu = () => {
if (!form.id) { if (!form.id) {
warningMessage('请选择菜单！') warningMessage('请选择菜单！');
return return;
} }
ElMessageBox.confirm( ElMessageBox.confirm('您确认删除该菜单项吗?', '温馨提示', {
'您确认删除该菜单项吗?',
'温馨提示',
{
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
} }).then(() => {
).then(() => {
api.DelObj(form).then((res: APIResponseData) => { api.DelObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
handleDrawerClose(); handleDrawerClose();
}); });
}) });
}; };
/** /**
@@ -373,23 +426,23 @@ const handleDeleteMenu = () => {
*/ */
const handleSort = (type: string) => { const handleSort = (type: string) => {
if (!form.id && treeSelectNode.value) { if (!form.id && treeSelectNode.value) {
warningMessage('请选择菜单！') warningMessage('请选择菜单！');
return return;
} }
const parentList = treeSelectNode.value?.parent.childNodes || []; const parentList = treeSelectNode.value?.parent.childNodes || [];
const index = parentList.findIndex(i => i.data.id === form.id) const index = parentList.findIndex((i) => i.data.id === form.id);
const record = parentList.find(i => i.data.id === form.id) const record = parentList.find((i) => i.data.id === form.id);
if (type === 'up') { if (type === 'up') {
if (index === 0) return if (index === 0) return;
parentList.splice(index - 1, 0, record as any) parentList.splice(index - 1, 0, record as any);
parentList.splice(index + 1, 1) parentList.splice(index + 1, 1);
} }
if (type === 'down') { if (type === 'down') {
parentList.splice(index + 2, 0, record as any) parentList.splice(index + 2, 0, record as any);
parentList.splice(index, 1) parentList.splice(index, 1);
} }
} };
// 页面打开后获取列表数据 // 页面打开后获取列表数据
onMounted(() => { onMounted(() => {
@@ -510,7 +563,7 @@ onMounted(() => {
font-size: 16px; font-size: 16px;
} }
.el-tree-node__content>.el-tree-node__expand-icon { .el-tree-node__content > .el-tree-node__expand-icon {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
margin-right: 5px; margin-right: 5px;
@@ -523,11 +576,11 @@ onMounted(() => {
} }
.el-tree .el-tree-node__expand-icon.is-leaf { .el-tree .el-tree-node__expand-icon.is-leaf {
margin-left: 0 margin-left: 0;
} }
.el-tree .el-tree-node__expand-icon:before { .el-tree .el-tree-node__expand-icon:before {
background: url("../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%; background: url('../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
content: ''; content: '';
display: block; display: block;
width: 24px; width: 24px;
@@ -535,7 +588,7 @@ onMounted(() => {
} }
.el-tree .el-tree-node__expand-icon.expanded:before { .el-tree .el-tree-node__expand-icon.expanded:before {
background: url("../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%; background: url('../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
content: ''; content: '';
display: block; display: block;
width: 24px; width: 24px;