feat：部门管理重构

web/.env

@@ -1,5 +1,5 @@
 # port 端口号
-VITE_PORT = 8080
+VITE_PORT = 8085
 
 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN = false

web/src/App.vue

@@ -1,5 +1,6 @@
 <template>
 	<el-config-provider :size="getGlobalComponentSize" :locale="getGlobalI18n">
+		<!-- v-show="themeConfig.lockScreenTime > 1" -->
 		<router-view v-show="themeConfig.lockScreenTime > 1" />
 		<LockScreen v-if="themeConfig.isLockScreen" />
 		<Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />

web/src/views/system/dept/api.ts

@@ -1,7 +1,8 @@
 import { request } from '/@/utils/service';
-import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq, PageQuery } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/dept/';
+
 export function GetList(query: UserPageQuery) {
 	return request({
 		url: apiPrefix,
@@ -9,6 +10,7 @@ export function GetList(query: UserPageQuery) {
 		params: query,
 	});
 }
+
 export function GetObj(id: InfoReq) {
 	return request({
 		url: apiPrefix + id,
@@ -32,11 +34,10 @@ export function UpdateObj(obj: EditReq) {
 	});
 }
 
-export function DelObj(obj: DelReq) {
+export function DelObj(id: string) {
 	return request({
-		url: apiPrefix + obj.id + '/',
+		url: apiPrefix + id + '/',
-		method: 'delete',
+		method: 'delete'
-		data: obj,
 	});
 }
 
@@ -47,3 +48,14 @@ export function lazyLoadDept(query: UserPageQuery) {
 		params: query,
 	});
 }
+
+/**
+ * 用户相关接口
+ */
+export function getUserDeptList(query: PageQuery) {
+	return request({
+		url: "/api/system/dept/dept_lazy_tree/",
+		method: 'get',
+		params: query,
+	});
+}

web/src/views/system/dept/components/FormCom.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="100px" label-position="right"
+    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="父级部门ID" prop="parent">
+      <el-input v-model="deptFormData.parent" />
+    </el-form-item>
+    <el-form-item required label="部门名称" prop="name">
+      <el-input v-model="deptFormData.name" />
+    </el-form-item>
+    <el-form-item required label="部门标识" prop="key">
+      <el-input v-model="deptFormData.key" />
+    </el-form-item>
+    <el-form-item label="负责人" prop="owner">
+      <el-input v-model="deptFormData.owner" />
+    </el-form-item>
+    <el-form-item label="联系电话" prop="phone">
+      <el-input v-model="deptFormData.phone" />
+    </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-button @click="handleUpdateMenu('update')" type="primary" :disabled="deptBtnLoading">保存</el-button>
+      <el-button @click="handleClose">取消
+      </el-button>
+    </el-form-item>
+
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from 'vue';
+import { ElForm, FormRules } from 'element-plus';
+import { DeptFormDataType, TreeItemType } from '../types';
+
+interface IProps {
+  initFormData: TreeItemType | null;
+}
+
+const formRef = ref<InstanceType<typeof ElForm>>();
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
+  key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
+});
+
+const props = withDefaults(defineProps<IProps>(), {
+  initFormData: () => null,
+})
+const emit = defineEmits(['drawerClose'])
+
+let deptFormData = reactive<DeptFormDataType>({
+  id: '',
+  key: '',
+  parent: '',
+  name: '',
+  owner: '',
+  phone: '',
+  email: '',
+  sort: 0,
+  is_catalog: true,
+})
+let deptBtnLoading = ref(false)
+
+const handleUpdateMenu = (type: string) => { };
+
+const handleClose = () => {
+  emit('drawerClose')
+  formRef.value?.resetFields();
+};
+
+onMounted(() => {
+  console.log(props.initFormData?.id, '----');
+})
+</script>
+
+<style lang="scss" scoped>
+.dept-form-com {
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+</style>

web/src/views/system/dept/components/TreeCom.vue

@@ -0,0 +1,251 @@
+<template>
+  <el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入部门名称" />
+  <div class="tree-com">
+    <div class="tc-head">
+      <el-icon size="16" color="#606266" class="tc-head-icon">
+        <HomeFilled />
+      </el-icon>
+      <span class="tc-head-txt">部门架构</span>
+      <el-icon size="16" color="#606266" @click="() => showTotalNum = !showTotalNum" class="tc-head-icon">
+        <View v-show="!showTotalNum" />
+        <Hide v-show="showTotalNum" />
+      </el-icon>
+    </div>
+
+    <el-tree 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 }">
+        <element-tree-line :node="node" :showLabelLine="false" :indent="32">
+          <span v-if="data.status" class="text-center font-black font-normal">
+            <SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
+            <span v-show="showTotalNum">（10人）</span>
+          </span>
+          <span v-else class="text-center font-black font-normal text-red-700">
+            <SvgIcon name="iconfont icon-shouye" />&nbsp;{{ node.label }}
+          </span>
+        </element-tree-line>
+      </template>
+    </el-tree>
+
+    <div class="tree-tags">
+      <el-tooltip effect="dark" content="新增">
+        <el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
+          <Plus />
+        </el-icon>
+      </el-tooltip>
+
+      <el-tooltip effect="dark" content="编辑">
+        <el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
+          <Edit />
+        </el-icon>
+      </el-tooltip>
+
+      <el-tooltip effect="dark" content="上移">
+        <el-icon size="16" @click="handleSort('up')" class="mlt-icon">
+          <Top />
+        </el-icon>
+      </el-tooltip>
+
+      <el-tooltip effect="dark" content="下移">
+        <el-icon size="16" @click="handleSort('down')" class="mlt-icon">
+          <Bottom />
+        </el-icon>
+      </el-tooltip>
+
+      <el-tooltip effect="dark" content="删除">
+        <el-icon size="16" @click="handleDeleteDept" class="mlt-icon">
+          <Delete />
+        </el-icon>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, toRaw, h } from 'vue';
+import { ElTree } from 'element-plus';
+import { getElementLabelLine } from "element-tree-line";
+import { Search } from '@element-plus/icons-vue';
+import { lazyLoadDept } from '../api';
+import { warningMessage } from '../../../../utils/message';
+import { TreeItemType, APIResponseData } from '../types';
+import type Node from 'element-plus/es/components/tree/src/model/node';
+
+interface IProps {
+  treeData: TreeItemType[];
+}
+
+const ElementTreeLine = getElementLabelLine(h);
+
+const treeProps = {
+  children: 'children',
+  label: 'name',
+};
+
+withDefaults(defineProps<IProps>(), {
+  treeData: () => [],
+})
+const emit = defineEmits(['setFormInitData', 'deleteDept', 'updateDept'])
+
+let filterVal = ref('');
+let showTotalNum = ref(false)
+let treeSelectDept = ref<TreeItemType>({})
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+watch(filterVal, (val) => {
+  treeRef.value!.filter(val);
+});
+
+const handleFilterTreeNode = (value: string, data: TreeItemType) => {
+  if (!value) return true;
+  return toRaw(data).name?.indexOf(value) !== -1;
+};
+
+const handleLoadNode = (node: Node, resolve: Function) => {
+  if (node.level !== 0) {
+    lazyLoadDept({ parent: node.data.id }).then((res: APIResponseData) => {
+      resolve(res.data);
+    });
+  }
+};
+
+const handleNodeClick = (data: TreeItemType) => {
+  treeSelectDept.value = data
+  emit('setFormInitData', data)
+};
+
+/**
+ * 新增 or 编辑 操作
+ */
+const handleUpdateMenu = (type: string) => {
+  if (type === 'update') {
+    if (!treeSelectDept.value.id) {
+      warningMessage('请选择菜单！')
+      return
+    }
+    emit('updateDept', type, treeSelectDept.value)
+  } else {
+    emit('updateDept', type);
+  }
+};
+
+/**
+ * 删除部门
+ */
+const handleDeleteDept = () => {
+  if (!treeSelectDept.value.id) {
+    warningMessage('请选择菜单！')
+    return
+  }
+  emit('deleteDept', treeSelectDept.value.id, () => {
+    treeSelectDept.value = {}
+  })
+};
+
+/**
+ * 部门上下移动操作
+ */
+const handleSort = (type: string) => { }
+</script>
+
+<style lang="scss" scoped>
+.tc-head {
+  display: flex;
+  align-items: center;
+  margin-left: -8px;
+  color: #606266;
+  font-weight: 600;
+
+  .tc-head-txt {
+    margin: 0 8px;
+  }
+
+  .tc-head-icon {
+    position: relative;
+    top: -1px;
+    cursor: pointer;
+  }
+}
+
+.tree-tags {
+  height: 40px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  box-sizing: border-box;
+
+  .mlt-icon {
+    cursor: pointer;
+    color: var(--el-color-primary);
+  }
+}
+</style>
+
+<style lang="scss">
+.tree-com {
+  height: calc(100% - 60px);
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  .el-tree-node__content {
+    height: 32px !important;
+  }
+
+  .el-tree .el-tree-node__expand-icon svg {
+    display: none !important;
+    height: 0;
+    width: 0;
+  }
+
+  .el-tree-node__expand-icon {
+    font-size: 16px;
+  }
+
+  .el-tree-node__content>.el-tree-node__expand-icon {
+    padding: 0;
+    box-sizing: border-box;
+    margin-right: 5px;
+    margin-left: 18px;
+  }
+
+  .el-tree .el-tree-node__expand-icon.expanded {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  .el-tree .el-tree-node__expand-icon.is-leaf {
+    margin-left: 0
+  }
+
+  .el-tree .el-tree-node__expand-icon:before {
+    background: url("../../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%;
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  .el-tree .el-tree-node__expand-icon.expanded:before {
+    background: url("../../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%;
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  .el-tree .is-leaf.el-tree-node__expand-icon::before {
+    display: block;
+    background: none !important;
+    content: '';
+    width: 18px;
+    height: 18px;
+    border: none;
+  }
+}
+</style>

web/src/views/system/dept/index.vue

@@ -1,307 +1,230 @@
 <template>
 	<fs-page>
-        <splitpanes>
+		<el-row class="dept-el-row">
-            <pane max-size="20">
+			<el-col :span="6">
-                <el-card :body-style="{ height: '100%' }">
+				<div class="dept-box dept-left">
-                    <p class="font-mono font-black text-center text-xl pb-5">部门列表</p>
+					<TreeCom :treeData="treeData" @setFormInitData="setFormInitData" @updateDept="handleUpdateMenu"
-                    <el-input v-model="filterText" :placeholder="placeholder"/>
+						@deleteDept="handleDeleteMenu" />
-                    <el-tree
+				</div>
-                        ref="treeRef"
+			</el-col>
-                        class="font-mono font-bold leading-6 text-7xl"
+
-                        :data="data"
+			<el-col :span="18">
-                        :props="treeProps"
+				<div class="dept-box dept-form">
-                        :filter-node-method="filterNode"
+					<el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="120px" label-position="right">
-                        :load="loadNode"
-                        @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 font-normal"><SvgIcon
-                                :name="node.data.icon"/>&nbsp;{{ node.label }}</span>
-                            <span v-else class="text-center font-black font-normal text-red-700"><SvgIcon
-                                :name="node.data.icon"/>&nbsp;{{ node.label }}</span>
-                        </template>
-                    </el-tree>
-                </el-card>
-            </pane>
-            <pane>
-                <el-card :body-style="{ height: '100%' }">
-                    <el-form ref="formRef" :rules="rules" :model="form" label-width="120px" label-position="right">
 						<el-divider>
 							<strong>部门配置</strong>
 						</el-divider>
 						<el-row>
 							<el-col :span="10">
 								<el-form-item label="部门ID" prop="id">
-                                    <el-input v-model="form.id" disabled/>
+									<el-input v-model="deptFormData.id" disabled />
 								</el-form-item>
 							</el-col>
 							<el-col :span="10">
 								<el-form-item label="父级部门ID" prop="parent">
-                                    <el-input v-model="form.parent"/>
+									<el-input v-model="deptFormData.parent" />
 								</el-form-item>
 							</el-col>
 							<el-col :span="10">
 								<el-form-item required label="部门名称" prop="name">
-                                    <el-input v-model="form.name"/>
+									<el-input v-model="deptFormData.name" />
 								</el-form-item>
 							</el-col>
 							<el-col :span="10">
 								<el-form-item required label="部门标识" prop="key">
-                                    <el-input v-model="form.key"/>
+									<el-input v-model="deptFormData.key" />
 								</el-form-item>
 							</el-col>
 							<el-col :span="10">
 								<el-form-item label="负责人" prop="owner">
-                                    <el-input v-model="form.owner"/>
+									<el-input v-model="deptFormData.owner" />
 								</el-form-item>
 							</el-col>
 							<el-col :span="10">
 								<el-form-item label="联系电话" prop="phone">
-                                    <el-input v-model="form.phone"/>
+									<el-input v-model="deptFormData.phone" />
 								</el-form-item>
 							</el-col>
 							<el-col :span="10">
 								<el-form-item label="邮箱" prop="email">
-                                    <el-input v-model="form.email"/>
+									<el-input v-model="deptFormData.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-input-number v-model="deptFormData.sort" controls-position="right" />
 								</el-form-item>
 							</el-col>
 
 							<el-col class="center">
 								<el-divider>
-                                    <el-button @click="saveMenu()" type="primary" round>保存</el-button>
+									<el-button @click="handleUpdateMenu('update')" type="primary" round
-                                    <el-button @click="newMenu()" type="success" round :disabled="!form.id">新建
+										:disabled="!deptFormData.id || deptBtnLoading">保存</el-button>
+									<el-button @click="handleUpdateMenu('create')" type="primary" round :disabled="deptBtnLoading">新建
 									</el-button>
-                                    <el-button @click="addChildMenu()" type="info" round :disabled="!form.id">添加子级
+									<el-button @click="handleDeleteMenu" type="primary" round>删除部门
-                                    </el-button>
-                                    <el-button @click="addSameLevelMenu()" type="warning" round :disabled="!form.id">
-                                        添加同级
-                                    </el-button>
-                                    <el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除部门
 									</el-button>
 								</el-divider>
 							</el-col>
 						</el-row>
 					</el-form>
-                </el-card>
+				</div>
-            </pane>
+			</el-col>
-        </splitpanes>
+		</el-row>
+
+		<el-drawer v-model="drawerVisible" title="部门配置" direction="rtl" size="500px" :close-on-click-modal="false"
+			:before-close="handleDrawerClose">
+			<FormCom v-if="drawerVisible" :initFormData="drawerFormData" @drawerClose="handleDrawerClose" />
+		</el-drawer>
 	</fs-page>
 </template>
 
 <script lang="ts" setup name="dept">
-import {Splitpanes, Pane} from 'splitpanes';
+import { ref, onMounted, reactive } from 'vue';
-import 'splitpanes/dist/splitpanes.css';
-import * as api from './api';
-import {ElForm, ElMessageBox, ElTree, FormRules} from 'element-plus';
-import {ref, onMounted, reactive, toRaw, watch} from 'vue';
 import XEUtils from 'xe-utils';
-import {errorMessage, successMessage} from '../../../utils/message';
+import { ElForm, ElMessageBox, FormRules } from 'element-plus';
+import TreeCom from './components/TreeCom.vue'
+import FormCom from './components/FormCom.vue'
+import { GetList, AddObj, UpdateObj, DelObj } from './api';
+import { successMessage } from '../../../utils/message';
+import { APIResponseData, DeptFormDataType, TreeItemType } from './types';
 
-interface Tree {
+let treeData = ref([]);
-    id: number;
+let deptFormData = reactive<DeptFormDataType>({
-    name: string;
-    status: boolean;
-    children?: Tree[];
-}
-
-interface APIResponseData {
-    code?: number;
-    data: [];
-    msg?: string;
-}
-
-interface Form<T> {
-    [key: string]: T;
-}
-
-const placeholder = ref('请输入部门名称');
-const filterText = ref('');
-const treeRef = ref<InstanceType<typeof ElTree>>();
-
-const treeProps = {
-    children: 'children',
-    label: 'name',
-    // isLeaf: (data: Tree[], node: Node) => {
-    // 	// @ts-ignore
-    // 	if (node.data.is_catalog) {
-    // 		return false;
-    // 	} else {
-    // 		return true;
-    // 	}
-    // },
-};
-
-const validateWebPath = (rule: string, value: string, callback: Function) => {
-    let pattern = /^\/.*?/;
-    if (!pattern.test(value)) {
-        callback(new Error('请输入正确的地址'));
-    } else {
-        callback();
-    }
-};
-
-watch(filterText, (val) => {
-    treeRef.value!.filter(val);
-});
-
-const filterNode = (value: string, data: Tree) => {
-    if (!value) return true;
-    return toRaw(data).name.indexOf(value) !== -1;
-};
-
-// 懒加载
-const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
-    // @ts-ignore
-    if (node.level !== 0) {
-        // @ts-ignore
-        api.lazyLoadDept({parent: node.data.id}).then((res: APIResponseData) => {
-            resolve(res.data);
-        });
-    }
-};
-
-const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
-    // @ts-ignore
-    if (!dropNode.isLeaf) {
-        // @ts-ignore
-        api.dragMenu({menu_id: draggingNode.data.id, parent_id: dropNode.data.id}).then((res: APIResponseData) => {
-            successMessage(res.msg as string);
-        });
-    }
-};
-
-let data = ref([]);
-
-let isAddNewMenu = ref(false); // 判断当前是新增部门，还是更新保存当前部门
-
-let form: Form<any> = reactive({
 	id: '',
+	key: '',
 	parent: '',
 	name: '',
 	owner: '',
 	phone: '',
 	email: '',
-    sort: '',
+	sort: 0,
-});
+	is_catalog: true,
-
+})
+let deptBtnLoading = ref(false)
+let drawerVisible = ref(false)
+let drawerFormData = ref<Partial<TreeItemType>>({})
 const formRef = ref<InstanceType<typeof ElForm>>();
 
 const rules = reactive<FormRules>({
-    // @ts-ignore
 	name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
 	key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
 });
 
-const getData = () => {
+const getData = async () => {
-    api.GetList({}).then((ret: APIResponseData) => {
+	let res: APIResponseData = await GetList({});
-        const responseData = ret.data;
+
-        const result = XEUtils.toArrayTree(responseData, {
+	if (res?.code === 2000 && Array.isArray(res.data)) {
+		const result = XEUtils.toArrayTree(res.data, {
 			parentKey: 'parent',
 			children: 'children',
 			strict: true,
 		});
-        data.value = result;
-    });
-};
 
-const saveMenu = () => {
+		treeData.value = result;
-    formRef.value?.validate((valid, fields) => {
-        if (valid) {
-            if (!isAddNewMenu.value) {
-                // 保存部门
-                form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
-                api.UpdateObj(form).then((res: APIResponseData) => {
-                    successMessage(res.msg as string);
-                    getData();
-                });
-            } else {
-                // 新增部门
-                form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
-                api.AddObj(form).then((res: APIResponseData) => {
-                    successMessage(res.msg as string);
-                    getData();
-                });
 	}
-        } else {
-            errorMessage('请填写检查表单');
-        }
-    });
 };
 
-const newMenu = () => {
+const setFormInitData = (data: DeptFormDataType) => {
-    formRef.value?.resetFields();
+	deptFormData.id = data.id;
-    isAddNewMenu.value = true;
+	deptFormData.key = data.key;
+	deptFormData.name = data.name;
+	deptFormData.parent = data.parent;
+	deptFormData.owner = data.owner;
+	deptFormData.phone = data.phone;
+	deptFormData.email = data.email;
+	deptFormData.sort = data.sort;
 };
 
-const addChildMenu = () => {
+const handleDeleteMenu = (id: string, callback: Function) => {
-    let parentId = form.id;
-    formRef.value?.resetFields();
-    form.parent = parentId;
-    isAddNewMenu.value = true;
-};
-
-const addSameLevelMenu = () => {
-    let parentId = form.parent;
-    formRef.value?.resetFields();
-    form.parent = parentId;
-    isAddNewMenu.value = true;
-};
-
-const deleteMenu = () => {
 	ElMessageBox.confirm(
-        '您确认删除该菜单项吗?',
+		'您确认删除该部门吗?',
 		'温馨提示',
 		{
 			confirmButtonText: '确认',
 			cancelButtonText: '取消',
 			type: 'warning',
 		}
-    ).then(() => {
+	).then(async () => {
-        api.DelObj(form).then((res: APIResponseData) => {
+		const res: APIResponseData = await DelObj(id)
+		callback()
+		if (res?.code === 2000) {
 			successMessage(res.msg as string);
 			getData();
-        });
+		}
 	})
-
 };
 
-const handleNodeClick = (data: any, node: any, prop: any) => {
+const handleUpdateMenu = (type: string, record?: TreeItemType) => {
-    Object.keys(toRaw(data)).forEach((key: string) => {
+	if (type === 'update' && record) {
-        form[key] = data[key];
+		drawerFormData.value = record
-    });
+	}
-    delete form.component_name;
+	drawerVisible.value = true
-    form.id = data.id;
+	//form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
-    isAddNewMenu.value = false;
+	/* formRef.value?.validate(async (valid) => {
-};
+		if (!valid) return
+		try {
+			let res;
+			deptBtnLoading.value = true
+			if (type === 'update') {
+				res = await UpdateObj(deptFormData);
+			} else if (type === 'create') {
+				res = await AddObj(deptFormData)
+			}
+			if (res?.code === 2000) {
+				successMessage(res.msg as string);
+				getData();
+			}
+		} finally {
+			type === 'create' && formRef.value?.resetFields();
+			deptBtnLoading.value = false
+		}
+	}); */
+
+};
+const handleDrawerClose = () => {
+	drawerVisible.value = false
+	drawerFormData.value = {}
+}
 
-// 页面打开后获取列表数据
 onMounted(() => {
 	getData();
 });
 </script>
 
 <style lang="scss" scoped>
-.el-row {
+.dept-el-row {
 	height: 100%;
+	overflow: hidden;
 
 	.el-col {
 		height: 100%;
+		padding: 10px 0;
+		box-sizing: border-box;
 	}
 }
 
-.el-card {
+.dept-box {
 	height: 100%;
+	padding: 10px;
+	background-color: #fff;
+	box-sizing: border-box;
 }
+
+.dept-left {
+	position: relative;
+	border-radius: 0 8px 8px 0;
+
+	.dl-nav {
+		margin-bottom: 10px;
+	}
+}
+
+.dept-form {
+	border-radius: 8px 0 0 8px;
+	margin-left: 10px;
+}
+
 .font-normal {
 	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 }

web/src/views/system/dept/types.ts

@@ -0,0 +1,52 @@
+export interface TreeType {
+  id: number;
+  name: string;
+  status: boolean;
+  children?: TreeType[];
+}
+
+export interface APIResponseData {
+  code?: number;
+  data: [];
+  msg?: string;
+}
+
+export interface FormType<T> {
+  [key: string]: T;
+}
+
+export interface TreeItemType {
+  id?: number;
+  modifier_name?: string;
+  creator_name?: string;
+  create_datetime?: string;
+  update_datetime?: string;
+  parent_name?: string;
+  status_label?: string;
+  has_children?: number;
+  hasChild?: false,
+  description?: string;
+  modifier?: string;
+  dept_belong_id?: string;
+  name?: string;
+  key?: string;
+  sort?: number;
+  owner?: string;
+  phone?: string;
+  email?: string;
+  status?: boolean;
+  creator?: number;
+  parent?: number;
+}
+
+export interface DeptFormDataType {
+  id: string;
+  key: string;
+  parent: string;
+  name: string;
+  owner: string;
+  phone: string;
+  email: string;
+  sort: number;
+  is_catalog?: boolean;
+}

web/src/views/system/menu/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<fs-page>
-		<el-row class="s-el-row">
+		<el-row class="menu-el-row">
 			<el-col :span="6">
 				<div class="menu-box menu-left-box">
 					<el-input v-model="filterText" :prefix-icon="Search" placeholder="请输入菜单名称" />
@@ -17,9 +17,9 @@
 								</el-icon>
 							</el-tooltip>
 						</div>
-						<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="defaultTreeProps"
+						<el-tree ref="treeRef" :data="data" :props="defaultTreeProps" :filter-node-method="filterNode"
-							:filter-node-method="filterNode" :load="loadNode" @node-drop="nodeDrop" lazy :indent="45"
+							:load="loadNode" @node-drop="nodeDrop" lazy :indent="45" @node-click="handleNodeClick" highlight-current
-							@node-click="handleNodeClick" highlight-current default-expand-all>
+							default-expand-all>
 							<template #default="{ node, data }">
 								<element-tree-line :node="node" :showLabelLine="false" :indent="32">
 									<span v-if="data.status" class="text-center font-black font-normal">
@@ -30,7 +30,6 @@
 										<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
 									</span>
 								</element-tree-line>
-								<!--  -->
 							</template>
 						</el-tree>
 					</div>
@@ -146,10 +145,10 @@ import XEUtils from 'xe-utils';
 import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
 import { getElementLabelLine } from "element-tree-line";
 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 { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types'
+import { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types';
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import type Node from 'element-plus/es/components/tree/src/model/node';
 
 const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
 const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
@@ -399,7 +398,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.s-el-row {
+.menu-el-row {
 	height: 100%;
 	overflow: hidden;
 

web/src/views/system/user/index.vue

@@ -12,16 +12,8 @@
 						</el-tooltip>
 					</p>
 					<el-input v-model="filterText" :placeholder="placeholder" />
-					<el-tree
+					<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
-						ref="treeRef"
+						:filter-node-method="filterNode" icon="ArrowRightBold" :indent="12" @node-click="onTreeNodeClick">
-						class="font-mono font-bold leading-6 text-7xl"
-						:data="data"
-						:props="treeProps"
-						:filter-node-method="filterNode"
-						icon="ArrowRightBold"
-						:indent="12"
-						@node-click="onTreeNodeClick"
-					>
 						<template #default="{ node, data }">
 							<span class="text-center font-black font-normal">{{ node.label }}</span>
 						</template>
@@ -98,6 +90,7 @@ const getData = () => {
 			children: 'children',
 			strict: true,
 		});
+
 		data.value = result;
 	});
 };
@@ -142,6 +135,7 @@ onMounted(() => {
 .el-card {
 	height: 100%;
 }
+
 .font-normal {
 	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 }