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:
H0nGzA1
2023-05-17 21:25:59 +08:00
parent 3cccfaa7f4
commit 17b67e43c9
2 changed files with 470 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

411
web/src/views/system/dept/index.vue
View File

@@ -1,104 +1,127 @@
<template> <template>
<fs-page> <fs-page>
<el-row class="mx-2"> <splitpanes>
<el-col :span="4" class="p-1"> <pane max-size="20">
<el-card :body-style="{ height: '100%' }"> <el-card :body-style="{ height: '100%' }">
<p class="font-mono font-black text-center text-xl pb-5">部门列表</p> <p class="font-mono font-black text-center text-xl pb-5">部门列表</p>
<el-input v-model="filterText" :placeholder="placeholder" /> <el-input v-model="filterText" :placeholder="placeholder"/>
<el-tree <el-tree
ref="treeRef" ref="treeRef"
class="font-mono font-bold leading-6 text-7xl" class="font-mono font-bold leading-6 text-7xl"
:data="data" :data="data"
:props="treeProps" :props="treeProps"
:filter-node-method="filterNode" :filter-node-method="filterNode"
:load="loadNode" :load="loadNode"
@node-drop="nodeDrop" @node-drop="nodeDrop"
lazy lazy
icon="ArrowRightBold" icon="ArrowRightBold"
:indent="12" :indent="12"
draggable draggable
@node-click="handleNodeClick" @node-click="handleNodeClick"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<span v-if="data.status" class="text-center font-black text-xl"><SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}</span> <span v-if="data.status" class="text-center font-black text-xl"><SvgIcon
<span v-else class="text-center font-black text-xl text-red-700"><SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}</span> :name="node.data.icon"/>&nbsp;{{ node.label }}</span>
</template> <span v-else class="text-center font-black text-xl text-red-700"><SvgIcon
</el-tree> :name="node.data.icon"/>&nbsp;{{ node.label }}</span>
</el-card> </template>
</el-col> </el-tree>
<el-col :span="20" class="p-1"> </el-card>
<el-card :body-style="{ height: '100%' }"> </pane>
<el-form ref="formRef" :rules="rules" :model="form" label-width="120px" label-position="right"> <pane>
<el-divider> <el-card :body-style="{ height: '100%' }">
<strong>部门配置</strong> <el-form ref="formRef" :rules="rules" :model="form" label-width="120px" label-position="right">
</el-divider> <el-divider>
<el-row> <strong>部门配置</strong>
<el-col :span="10"> </el-divider>
<el-form-item label="部门ID" prop="id"> <el-input v-model="form.id" disabled /> </el-form-item> <el-row>
</el-col> <el-col :span="10">
<el-col :span="10"> <el-form-item label="部门ID" prop="id">
<el-form-item label="父级部门ID" prop="parent"> <el-input v-model="form.parent" /> </el-form-item> <el-input v-model="form.id" disabled/>
</el-col> </el-form-item>
<el-col :span="10"> </el-col>
<el-form-item required label="部门名称" prop="name"> <el-input v-model="form.name" /> </el-form-item> <el-col :span="10">
</el-col> <el-form-item label="父级部门ID" prop="parent">
<el-col :span="10"> <el-input v-model="form.parent"/>
<el-form-item required label="部门标识" prop="key"> <el-input v-model="form.key" /> </el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="负责人" prop="owner"> <el-input v-model="form.owner" /> </el-form-item> <el-form-item required label="部门名称" prop="name">
</el-col> <el-input v-model="form.name"/>
<el-col :span="10"> </el-form-item>
<el-form-item label="联系电话" prop="phone"> <el-input v-model="form.phone" /> </el-form-item> </el-col>
</el-col> <el-col :span="10">
<el-col :span="10"> <el-form-item required label="部门标识" prop="key">
<el-form-item label="邮箱" prop="email"> <el-input v-model="form.email" /> </el-form-item> <el-input v-model="form.key"/>
</el-col> </el-form-item>
<el-col :span="10"> </el-col>
<el-form-item label="排序" prop="sort"> <el-col :span="10">
<el-input-number v-model="form.sort" controls-position="right" /> <el-form-item label="负责人" prop="owner">
</el-form-item> <el-input v-model="form.owner"/>
</el-col> </el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone"/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email"/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right"/>
</el-form-item>
</el-col>
<el-col class="center"> <el-col class="center">
<el-divider> <el-divider>
<el-button @click="saveMenu()" type="primary" round>保存</el-button> <el-button @click="saveMenu()" type="primary" round>保存</el-button>
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button> <el-button @click="newMenu()" type="success" round :disabled="!form.id">新建
<el-button @click="addChildMenu()" type="info" round :disabled="!form.id">添加子级</el-button> </el-button>
<el-button @click="addSameLevelMenu()" type="warning" round :disabled="!form.id">添加同级</el-button> <el-button @click="addChildMenu()" type="info" round :disabled="!form.id">添加子级
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除部门</el-button> </el-button>
</el-divider> <el-button @click="addSameLevelMenu()" type="warning" round :disabled="!form.id">
</el-col> 添加同级
</el-row> </el-button>
</el-form> <el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除部门
</el-card> </el-button>
</el-col> </el-divider>
</el-row> </el-col>
</fs-page> </el-row>
</el-form>
</el-card>
</pane>
</splitpanes>
</fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {Splitpanes, Pane} from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import * as api from './api'; import * as api from './api';
import {ElForm, ElMessageBox, ElTree, FormRules} from 'element-plus'; import {ElForm, ElMessageBox, ElTree, FormRules} from 'element-plus';
import { ref, onMounted, reactive, toRaw, watch } from 'vue'; import {ref, onMounted, reactive, toRaw, watch} from 'vue';
import XEUtils from 'xe-utils'; import XEUtils from 'xe-utils';
import { errorMessage, successMessage } from '../../../utils/message'; import {errorMessage, successMessage} from '../../../utils/message';
interface Tree { interface Tree {
id: number; id: number;
name: string; name: string;
status: boolean; status: boolean;
children?: Tree[]; children?: Tree[];
} }
interface APIResponseData { interface APIResponseData {
code?: number; code?: number;
data: []; data: [];
msg?: string; msg?: string;
} }
interface Form<T> { interface Form<T> {
[key: string]: T; [key: string]: T;
} }
const placeholder = ref('请输入部门名称'); const placeholder = ref('请输入部门名称');
@@ -106,55 +129,55 @@ const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>(); const treeRef = ref<InstanceType<typeof ElTree>>();
const treeProps = { const treeProps = {
children: 'children', children: 'children',
label: 'name', label: 'name',
// isLeaf: (data: Tree[], node: Node) => { // isLeaf: (data: Tree[], node: Node) => {
// // @ts-ignore // // @ts-ignore
// if (node.data.is_catalog) { // if (node.data.is_catalog) {
// return false; // return false;
// } else { // } else {
// return true; // return true;
// } // }
// }, // },
}; };
const validateWebPath = (rule: string, value: string, callback: Function) => { const validateWebPath = (rule: string, value: string, callback: Function) => {
let pattern = /^\/.*?/; let pattern = /^\/.*?/;
if (!pattern.test(value)) { if (!pattern.test(value)) {
callback(new Error('请输入正确的地址')); callback(new Error('请输入正确的地址'));
} else { } else {
callback(); callback();
} }
}; };
watch(filterText, (val) => { watch(filterText, (val) => {
treeRef.value!.filter(val); treeRef.value!.filter(val);
}); });
const filterNode = (value: string, data: Tree) => { const filterNode = (value: string, data: Tree) => {
if (!value) return true; if (!value) return true;
return toRaw(data).name.indexOf(value) !== -1; return toRaw(data).name.indexOf(value) !== -1;
}; };
// 懒加载 // 懒加载
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => { const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
// @ts-ignore // @ts-ignore
if (node.level !== 0) { if (node.level !== 0) {
// @ts-ignore // @ts-ignore
api.lazyLoadDept({ parent: node.data.id }).then((res: APIResponseData) => { api.lazyLoadDept({parent: node.data.id}).then((res: APIResponseData) => {
resolve(res.data); resolve(res.data);
}); });
} }
}; };
const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => { const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
// @ts-ignore // @ts-ignore
if (!dropNode.isLeaf) { if (!dropNode.isLeaf) {
// @ts-ignore // @ts-ignore
api.dragMenu({ menu_id: draggingNode.data.id, parent_id: dropNode.data.id }).then((res: APIResponseData) => { api.dragMenu({menu_id: draggingNode.data.id, parent_id: dropNode.data.id}).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
}); });
} }
}; };
let data = ref([]); let data = ref([]);
@@ -162,121 +185,121 @@ let data = ref([]);
let isAddNewMenu = ref(false); // 判断当前是新增部门，还是更新保存当前部门 let isAddNewMenu = ref(false); // 判断当前是新增部门，还是更新保存当前部门
let form: Form<any> = reactive({ let form: Form<any> = reactive({
id: '', id: '',
parent: '', parent: '',
name: '', name: '',
owner: '', owner: '',
phone: '', phone: '',
email: '', email: '',
sort: '', sort: '',
}); });
const formRef = ref<InstanceType<typeof ElForm>>(); const formRef = ref<InstanceType<typeof ElForm>>();
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
// @ts-ignore // @ts-ignore
name: [{ required: true, message: '部门名称必填', trigger: 'blur' }], name: [{required: true, message: '部门名称必填', trigger: 'blur'}],
key: [{ required: true, message: '部门标识必填', trigger: 'blur' }], key: [{required: true, message: '部门标识必填', trigger: 'blur'}],
}); });
const getData = () => { const getData = () => {
api.GetList({}).then((ret: APIResponseData) => { api.GetList({}).then((ret: APIResponseData) => {
const responseData = ret.data; const responseData = ret.data;
const result = XEUtils.toArrayTree(responseData, { const result = XEUtils.toArrayTree(responseData, {
parentKey: 'parent', parentKey: 'parent',
children: 'children', children: 'children',
strict: true, strict: true,
}); });
data.value = result; data.value = result;
}); });
}; };
const saveMenu = () => { const saveMenu = () => {
formRef.value?.validate((valid, fields) => { formRef.value?.validate((valid, fields) => {
if (valid) { if (valid) {
if (!isAddNewMenu.value) { if (!isAddNewMenu.value) {
// 保存部门 // 保存部门
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false); form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
api.UpdateObj(form).then((res: APIResponseData) => { api.UpdateObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
}); });
} else { } else {
// 新增部门 // 新增部门
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false); form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
api.AddObj(form).then((res: APIResponseData) => { api.AddObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
}); });
} }
} else { } else {
errorMessage('请填写检查表单'); errorMessage('请填写检查表单');
} }
}); });
}; };
const newMenu = () => { const newMenu = () => {
formRef.value?.resetFields(); formRef.value?.resetFields();
isAddNewMenu.value = true; isAddNewMenu.value = true;
}; };
const addChildMenu = () => { const addChildMenu = () => {
let parentId = form.id; let parentId = form.id;
formRef.value?.resetFields(); formRef.value?.resetFields();
form.parent = parentId; form.parent = parentId;
isAddNewMenu.value = true; isAddNewMenu.value = true;
}; };
const addSameLevelMenu = () => { const addSameLevelMenu = () => {
let parentId = form.parent; let parentId = form.parent;
formRef.value?.resetFields(); formRef.value?.resetFields();
form.parent = parentId; form.parent = parentId;
isAddNewMenu.value = true; isAddNewMenu.value = true;
}; };
const deleteMenu = () => { const deleteMenu = () => {
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();
}); });
}) })
}; };
const handleNodeClick = (data: any, node: any, prop: any) => { const handleNodeClick = (data: any, node: any, prop: any) => {
Object.keys(toRaw(data)).forEach((key: string) => { Object.keys(toRaw(data)).forEach((key: string) => {
form[key] = data[key]; form[key] = data[key];
}); });
delete form.component_name; delete form.component_name;
form.id = data.id; form.id = data.id;
isAddNewMenu.value = false; isAddNewMenu.value = false;
}; };
// 页面打开后获取列表数据 // 页面打开后获取列表数据
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-row { .el-row {
height: 100%; height: 100%;
.el-col { .el-col {
height: 100%; height: 100%;
} }
} }
.el-card { .el-card {
height: 100%; height: 100%;
} }
</style> </style>

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

@@ -1,117 +1,131 @@
<template> <template>
<fs-page> <fs-page>
<el-row class="mx-2"> <splitpanes>
<el-col :span="4" class="p-1"> <pane max-size="20" min-size="16" >
<el-card :body-style="{ height: '100%' }"> <el-card :body-style="{ height: '100%' }">
<p class="font-mono font-black text-center text-xl pb-5"> <p class="font-mono font-black text-center text-xl pb-5">
菜单列表 菜单列表
<el-tooltip effect="dark" :content="content" placement="right"> <el-tooltip effect="dark" :content="content" placement="right">
<el-icon> <el-icon>
<QuestionFilled /> <QuestionFilled/>
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
</p> </p>
<el-input v-model="filterText" :placeholder="placeholder" /> <el-input v-model="filterText" :placeholder="placeholder"/>
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps" <el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data"
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop" :props="treeProps"
@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable :filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag"
@node-click="handleNodeClick"> :allow-drop="allowDrop"
<template #default="{ node, data }"> @node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable
@node-click="handleNodeClick">
<template #default="{ node, data }">
<span v-if="data.status" class="text-center font-black text-xl"> <span v-if="data.status" class="text-center font-black text-xl">
<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }} <SvgIcon :name="node.data.icon"/>&nbsp;{{ node.label }}
</span> </span>
<span v-else class="text-center font-black text-xl text-red-700"> <span v-else class="text-center font-black text-xl text-red-700">
<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }} <SvgIcon :name="node.data.icon"/>&nbsp;{{ node.label }}
</span> </span>
</template> </template>
</el-tree> </el-tree>
</el-card> </el-card>
</el-col> </pane>
<el-col :span="6" class="p-1"> <pane min-size="30" >
<el-card :body-style="{ height: '100%' }"> <el-card :body-style="{ height: '100%' }">
<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"
<el-alert :title="content" type="success" effect="dark" :closable="false" center /> label-position="right">
<el-divider> <el-alert :title="content" type="success" effect="dark" :closable="false" center/>
<strong>菜单配置</strong> <el-divider>
</el-divider> <strong>菜单配置</strong>
<el-form-item label="菜单ID" prop="id"> <el-input v-model="form.id" disabled /> </el-divider>
</el-form-item> <el-form-item label="菜单ID" prop="id">
<el-form-item label="父级ID" prop="parent"> <el-input v-model="form.parent" /> </el-form-item> <el-input v-model="form.id" disabled/>
<el-form-item required label="菜单名称" prop="name"> <el-input v-model="form.name" /> </el-form-item>
</el-form-item> <el-form-item label="父级ID" prop="parent">
<el-form-item label="组件地址" prop="component"> <el-input v-model="form.parent"/>
<el-autocomplete class="w-full" v-model="form.component" </el-form-item>
:fetch-suggestions="querySearch" :trigger-on-focus="false" clearable debounce="100" <el-form-item required label="菜单名称" prop="name">
placeholder="输入组件地址" /> <el-input v-model="form.name"/>
</el-form-item> </el-form-item>
<el-form-item required label="Url" prop="web_path"> <el-input v-model="form.web_path" /> <el-form-item label="组件地址" prop="component">
</el-form-item> <el-autocomplete class="w-full" v-model="form.component"
<el-form-item label="排序" prop="sort"> :fetch-suggestions="querySearch" :trigger-on-focus="false"
<el-input-number v-model="form.sort" controls-position="right" /> clearable
</el-form-item> debounce="100"
<el-form-item label="状态"> placeholder="输入组件地址"/>
<el-radio-group v-model="form.status"> </el-form-item>
<el-radio :label="true">启用</el-radio> <el-form-item required label="Url" prop="web_path">
<el-radio :label="false">禁用</el-radio> <el-input v-model="form.web_path"/>
</el-radio-group> </el-form-item>
</el-form-item> <el-form-item label="排序" prop="sort">
<el-form-item label="侧边可见"> <el-input-number v-model="form.sort" controls-position="right"/>
<el-radio-group v-model="form.visible"> </el-form-item>
<el-radio :label="true">启用</el-radio> <el-form-item label="状态">
<el-radio :label="false">禁用</el-radio> <el-radio-group v-model="form.status">
</el-radio-group> <el-radio :label="true">启用</el-radio>
</el-form-item> <el-radio :label="false">禁用</el-radio>
<el-form-item label="图标" prop="icon"> </el-radio-group>
<IconSelector clearable v-model="form.icon" /> </el-form-item>
</el-form-item> <el-form-item label="侧边可见">
</el-form> <el-radio-group v-model="form.visible">
<el-divider></el-divider> <el-radio :label="true">启用</el-radio>
<div> <el-radio :label="false">禁用</el-radio>
<el-button @click="saveMenu()" type="primary" round>保存</el-button> </el-radio-group>
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button> </el-form-item>
<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级</el-button> <el-form-item label="图标" prop="icon">
<!-- <el-button @click="addSameLevelMenu()" type="warning" round>添加同级</el-button>--> <IconSelector clearable v-model="form.icon"/>
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单</el-button> </el-form-item>
</div> </el-form>
</el-card> <el-divider></el-divider>
</el-col> <div>
<el-col :span="14" class="p-1"> <el-button @click="saveMenu()" type="primary" round>保存</el-button>
<el-card :body-style="{ height: '100%' }" > <el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
<menuButton :select-menu="form" /> <el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
</el-card> </el-button>
</el-col> <!-- <el-button @click="addSameLevelMenu()" type="warning" round>添加同级</el-button>-->
</el-row> <el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
</fs-page> </el-button>
</div>
</el-card>
</pane>
<pane min-size="30">
<el-card :body-style="{ height: '100%' }">
<menuButton :select-menu="form"/>
</el-card>
</pane>
</splitpanes>
</fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {Splitpanes, Pane} from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import * as api from './api'; import * as api from './api';
import * as menuButoonApi from './components/menuButton/api'; import * as menuButoonApi from './components/menuButton/api';
import { ElForm, ElTree, FormRules,ElMessageBox } from 'element-plus'; import {ElForm, ElTree, FormRules, ElMessageBox} from 'element-plus';
import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef } from 'vue'; import {ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef} from 'vue';
import XEUtils from 'xe-utils'; import XEUtils from 'xe-utils';
import { errorMessage, successMessage } from '../../../utils/message'; import {errorMessage, successMessage} from '../../../utils/message';
interface Tree { interface Tree {
id: number; id: number;
name: string; name: string;
status: boolean; status: boolean;
children?: Tree[]; children?: Tree[];
} }
interface APIResponseData { interface APIResponseData {
code?: number; code?: number;
data: []; data: [];
msg?: string; msg?: string;
} }
interface Form<T> { interface Form<T> {
[key: string]: T; [key: string]: T;
} }
interface ComponentFileItem { interface ComponentFileItem {
value: string; value: string;
label: string; label: string;
} }
// 引入组件 // 引入组件
@@ -123,74 +137,74 @@ const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>(); const treeRef = ref<InstanceType<typeof ElTree>>();
const treeProps = { const treeProps = {
children: 'children', children: 'children',
label: 'name', label: 'name',
icon: 'icon', icon: 'icon',
isLeaf: (data: Tree[], node: Node) => { isLeaf: (data: Tree[], node: Node) => {
// @ts-ignore // @ts-ignore
if (node.data.is_catalog) { if (node.data.is_catalog) {
return false; return false;
} else { } else {
return true; return true;
} }
}, },
}; };
const validateWebPath = (rule: string, value: string, callback: Function) => { const validateWebPath = (rule: string, value: string, callback: Function) => {
let pattern = /^\/.*?/; let pattern = /^\/.*?/;
if (!pattern.test(value)) { if (!pattern.test(value)) {
callback(new Error('请输入正确的地址')); callback(new Error('请输入正确的地址'));
} else { } else {
callback(); callback();
} }
}; };
watch(filterText, (val) => { watch(filterText, (val) => {
treeRef.value!.filter(val); treeRef.value!.filter(val);
}); });
const filterNode = (value: string, data: Tree) => { const filterNode = (value: string, data: Tree) => {
if (!value) return true; if (!value) return true;
return toRaw(data).name.indexOf(value) !== -1; return toRaw(data).name.indexOf(value) !== -1;
}; };
// 懒加载 // 懒加载
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => { const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
// @ts-ignore // @ts-ignore
if (node.level !== 0) { if (node.level !== 0) {
// @ts-ignore // @ts-ignore
api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => { api.lazyLoadMenu({parent: node.data.id}).then((res: APIResponseData) => {
resolve(res.data); resolve(res.data);
}); });
} }
}; };
// 判断是否可以拖动 // 判断是否可以拖动
const allowDrag = (node: Node) => { const allowDrag = (node: Node) => {
// @ts-ignore // @ts-ignore
if (node.data.is_catalog) { if (node.data.is_catalog) {
return false; return false;
} else { } else {
return true; return true;
} }
}; };
// 判断是否可以被放置 // 判断是否可以被放置
const allowDrop = (draggingNode: Node, dropNode: Node, type: string) => { const allowDrop = (draggingNode: Node, dropNode: Node, type: string) => {
// @ts-ignore // @ts-ignore
if (!dropNode.isLeaf) { if (!dropNode.isLeaf) {
return true; return true;
} }
}; };
const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => { const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
// @ts-ignore // @ts-ignore
if (!dropNode.isLeaf) { if (!dropNode.isLeaf) {
// @ts-ignore // @ts-ignore
api.dragMenu({ menu_id: draggingNode.data.id, parent_id: dropNode.data.id }).then((res: APIResponseData) => { api.dragMenu({menu_id: draggingNode.data.id, parent_id: dropNode.data.id}).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
}); });
} }
}; };
let data = ref([]); let data = ref([]);
@@ -207,17 +221,17 @@ const content = `
`; `;
let form: Form<any> = reactive({ let form: Form<any> = reactive({
id: '', id: '',
parent: '', parent: '',
name: '', name: '',
component: '', component: '',
web_path: '', web_path: '',
sort: '', sort: '',
status: '', status: '',
is_catalog: false, is_catalog: false,
permission: '', permission: '',
icon: '', icon: '',
visible: '' visible: ''
}); });
let menuPermissonList = ref([]); let menuPermissonList = ref([]);
@@ -225,149 +239,149 @@ let menuPermissonList = ref([]);
const formRef = ref<InstanceType<typeof ElForm>>(); const formRef = ref<InstanceType<typeof ElForm>>();
const querySearch = (queryString: string, cb: any) => { const querySearch = (queryString: string, cb: any) => {
const files: any = import.meta.glob('@views/**/*.vue'); const files: any = import.meta.glob('@views/**/*.vue');
let fileLists: Array<any> = []; let fileLists: Array<any> = [];
Object.keys(files).forEach((queryString: string) => { Object.keys(files).forEach((queryString: string) => {
fileLists.push({ fileLists.push({
label: queryString.replace(/(\.\/|\.vue)/g, ''), label: queryString.replace(/(\.\/|\.vue)/g, ''),
value: queryString.replace(/(\.\/|\.vue)/g, ''), value: queryString.replace(/(\.\/|\.vue)/g, ''),
}); });
}); });
const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists; const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
// 统一去掉/src/views/前缀 // 统一去掉/src/views/前缀
results.forEach((val) => { results.forEach((val) => {
val.label = val.label.replace('/src/views/', ''); val.label = val.label.replace('/src/views/', '');
val.value = val.value.replace('/src/views/', ''); val.value = val.value.replace('/src/views/', '');
}); });
cb(results); cb(results);
}; };
const createFilter = (queryString: string) => { const createFilter = (queryString: string) => {
return (file: ComponentFileItem) => { return (file: ComponentFileItem) => {
return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1; return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
}; };
}; };
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
// @ts-ignore // @ts-ignore
web_path: [{ validator: validateWebPath, trigger: 'blur' }], web_path: [{validator: validateWebPath, trigger: 'blur'}],
}); });
const getData = () => { const getData = () => {
api.GetList({}).then((ret: APIResponseData) => { api.GetList({}).then((ret: APIResponseData) => {
const responseData = ret.data; const responseData = ret.data;
const result = XEUtils.toArrayTree(responseData, { const result = XEUtils.toArrayTree(responseData, {
parentKey: 'parent', parentKey: 'parent',
children: 'children', children: 'children',
strict: true, strict: true,
}); });
data.value = result; data.value = result;
}); });
}; };
const getPermissions = (menu: object) => { const getPermissions = (menu: object) => {
menuButoonApi.GetList(menu).then((res: APIResponseData) => { menuButoonApi.GetList(menu).then((res: APIResponseData) => {
menuPermissonList.value = res.data; menuPermissonList.value = res.data;
}); });
}; };
const saveMenu = () => { const saveMenu = () => {
formRef.value?.validate((valid, fields) => { formRef.value?.validate((valid, fields) => {
if (valid) { if (valid) {
if (!isAddNewMenu.value) { if (!isAddNewMenu.value) {
// 保存菜单 // 保存菜单
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false); form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
api.UpdateObj(form).then((res: APIResponseData) => { api.UpdateObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
}); });
} else { } else {
// 新增菜单 // 新增菜单
form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false); form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
api.AddObj(form).then((res: APIResponseData) => { api.AddObj(form).then((res: APIResponseData) => {
successMessage(res.msg as string); successMessage(res.msg as string);
getData(); getData();
}); });
} }
} else { } else {
errorMessage('请填写检查表单'); errorMessage('请填写检查表单');
} }
}); });
}; };
const newMenu = () => { const newMenu = () => {
formRef.value?.resetFields(); formRef.value?.resetFields();
isAddNewMenu.value = true; isAddNewMenu.value = true;
}; };
const addChildMenu = () => { const addChildMenu = () => {
let parentId = form.id; let parentId = form.id;
formRef.value?.resetFields(); formRef.value?.resetFields();
form.parent = parentId; form.parent = parentId;
isAddNewMenu.value = true; isAddNewMenu.value = true;
}; };
const addSameLevelMenu = () => { const addSameLevelMenu = () => {
let parentId = form.parent; let parentId = form.parent;
formRef.value?.resetFields(); formRef.value?.resetFields();
form.parent = parentId; form.parent = parentId;
isAddNewMenu.value = true; isAddNewMenu.value = true;
}; };
const deleteMenu = () => { const deleteMenu = () => {
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();
}); });
}) })
}; };
const handleNodeClick = (data: any, node: any, prop: any) => { const handleNodeClick = (data: any, node: any, prop: any) => {
Object.keys(toRaw(data)).forEach((key: string) => { Object.keys(toRaw(data)).forEach((key: string) => {
form[key] = data[key]; form[key] = data[key];
}); });
delete form.component_name; delete form.component_name;
form.id = data.id; form.id = data.id;
isAddNewMenu.value = false; isAddNewMenu.value = false;
// 点击tree node时，加载对应的权限菜单 // 点击tree node时，加载对应的权限菜单
// getPermissions({ menu: form.id }); // getPermissions({ menu: form.id });
}; };
const addPermission = () => { const addPermission = () => {
!form.is_catalog ? (permissionDrawerVisible.value = true) : errorMessage('目录没有菜单权限'); !form.is_catalog ? (permissionDrawerVisible.value = true) : errorMessage('目录没有菜单权限');
}; };
const drawerClose = () => { const drawerClose = () => {
permissionDrawerVisible.value = false; permissionDrawerVisible.value = false;
}; };
// 页面打开后获取列表数据 // 页面打开后获取列表数据
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-row { .el-row {
height: 100%; height: 100%;
.el-col { .el-col {
height: 100%; height: 100%;
} }
} }
.el-card { .el-card {
height: 100%; height: 100%;
} }
</style> </style>