From 2bad36c982cdaea597372e3fbbbfa9996c34b543 Mon Sep 17 00:00:00 2001
From: sheng <15292050171@163.com>
Date: Thu, 27 Jul 2023 18:31:28 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=83=A8=E9=97=A8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/.env                                      |   2 +-
 web/src/App.vue                               |  51 +-
 web/src/views/system/dept/api.ts              |  22 +-
 .../views/system/dept/components/FormCom.vue  |  88 ++++
 .../views/system/dept/components/TreeCom.vue  | 251 +++++++++
 web/src/views/system/dept/index.vue           | 475 ++++++++----------
 web/src/views/system/dept/types.ts            |  52 ++
 web/src/views/system/menu/index.vue           |  17 +-
 web/src/views/system/user/index.vue           |  24 +-
 9 files changed, 651 insertions(+), 331 deletions(-)
 create mode 100644 web/src/views/system/dept/components/FormCom.vue
 create mode 100644 web/src/views/system/dept/components/TreeCom.vue
 create mode 100644 web/src/views/system/dept/types.ts

diff --git a/web/.env b/web/.env
index 6bc4ce9..1ba2849 100644
--- a/web/.env
+++ b/web/.env
@@ -1,5 +1,5 @@
 # port 端口号
-VITE_PORT = 8080
+VITE_PORT = 8085
 
 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN = false
diff --git a/web/src/App.vue b/web/src/App.vue
index 43ac106..83d312a 100644
--- a/web/src/App.vue
+++ b/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" />
@@ -9,7 +10,7 @@
 </template>
 
 <script setup lang="ts" name="app">
-import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch,onBeforeUnmount } from 'vue';
+import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch, onBeforeUnmount } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
@@ -34,7 +35,7 @@ const stores = useTagsViewRoutes();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 import websocket from "/@/utils/websocket";
-import {ElNotification} from "element-plus";
+import { ElNotification } from "element-plus";
 // 获取版本号
 const getVersion = computed(() => {
 	let isVersion = false;
@@ -58,12 +59,12 @@ onBeforeMount(() => {
 	setIntroduction.cssCdn();
 	// 设置批量第三方 js
 	setIntroduction.jsCdn();
-  //websockt 模块
-  try {
-    websocket.init(wsReceive)
-  }catch (e) {
-    console.log("websocket错误")
-  }
+	//websockt 模块
+	try {
+		websocket.init(wsReceive)
+	} catch (e) {
+		console.log("websocket错误")
+	}
 
 });
 // 页面加载时
@@ -86,7 +87,7 @@ onMounted(() => {
 });
 // 页面销毁时，关闭监听布局配置/i18n监听
 onUnmounted(() => {
-	mittBus.off('openSetingsDrawer', () => {});
+	mittBus.off('openSetingsDrawer', () => { });
 });
 // 监听路由的变化，设置网站标题
 watch(
@@ -100,26 +101,26 @@ watch(
 );
 
 // websocket相关代码
-import {messageCenterStore} from "/@/stores/messageCenter";
+import { messageCenterStore } from "/@/stores/messageCenter";
 const wsReceive = (message: any) => {
-  const data = JSON.parse(message.data)
-  const { unread } = data
-  const messageCenter = messageCenterStore()
-  messageCenter.setUnread(unread);
-  if (data.contentType === 'SYSTEM') {
-    ElNotification({
-      title: '系统消息',
-      message: data.content,
-      type: 'success',
-      position: 'bottom-right',
-      duration: 5000
-    })
-  }
+	const data = JSON.parse(message.data)
+	const { unread } = data
+	const messageCenter = messageCenterStore()
+	messageCenter.setUnread(unread);
+	if (data.contentType === 'SYSTEM') {
+		ElNotification({
+			title: '系统消息',
+			message: data.content,
+			type: 'success',
+			position: 'bottom-right',
+			duration: 5000
+		})
+	}
 
 }
 onBeforeUnmount(() => {
-  // 关闭连接
-  websocket.close()
+	// 关闭连接
+	websocket.close()
 })
 
 </script>
diff --git a/web/src/views/system/dept/api.ts b/web/src/views/system/dept/api.ts
index 29254ea..3ea5a6e 100644
--- a/web/src/views/system/dept/api.ts
+++ b/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 + '/',
-		method: 'delete',
-		data: obj,
+		url: apiPrefix + id + '/',
+		method: 'delete'
 	});
 }
 
@@ -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,
+	});
+}
diff --git a/web/src/views/system/dept/components/FormCom.vue b/web/src/views/system/dept/components/FormCom.vue
new file mode 100644
index 0000000..3f805db
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/views/system/dept/components/TreeCom.vue b/web/src/views/system/dept/components/TreeCom.vue
new file mode 100644
index 0000000..95049b4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/views/system/dept/index.vue b/web/src/views/system/dept/index.vue
index 4b99b95..5bdb014 100644
--- a/web/src/views/system/dept/index.vue
+++ b/web/src/views/system/dept/index.vue
@@ -1,308 +1,231 @@
 <template>
-    <fs-page>
-        <splitpanes>
-            <pane max-size="20">
-                <el-card :body-style="{ height: '100%' }">
-                    <p class="font-mono font-black text-center text-xl pb-5">部门列表</p>
-                    <el-input v-model="filterText" :placeholder="placeholder"/>
-                    <el-tree
-                        ref="treeRef"
-                        class="font-mono font-bold leading-6 text-7xl"
-                        :data="data"
-                        :props="treeProps"
-                        :filter-node-method="filterNode"
-                        :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-form-item>
-                            </el-col>
-                            <el-col :span="10">
-                                <el-form-item label="父级部门ID" prop="parent">
-                                    <el-input v-model="form.parent"/>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="10">
-                                <el-form-item required label="部门名称" prop="name">
-                                    <el-input v-model="form.name"/>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="10">
-                                <el-form-item required label="部门标识" prop="key">
-                                    <el-input v-model="form.key"/>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="10">
-                                <el-form-item label="负责人" prop="owner">
-                                    <el-input v-model="form.owner"/>
-                                </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>
+	<fs-page>
+		<el-row class="dept-el-row">
+			<el-col :span="6">
+				<div class="dept-box dept-left">
+					<TreeCom :treeData="treeData" @setFormInitData="setFormInitData" @updateDept="handleUpdateMenu"
+						@deleteDept="handleDeleteMenu" />
+				</div>
+			</el-col>
 
-                            <el-col class="center">
-                                <el-divider>
-                                    <el-button @click="saveMenu()" type="primary" round>保存</el-button>
-                                    <el-button @click="newMenu()" type="success" round :disabled="!form.id">新建
-                                    </el-button>
-                                    <el-button @click="addChildMenu()" type="info" round :disabled="!form.id">添加子级
-                                    </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>
-            </pane>
-        </splitpanes>
-    </fs-page>
+			<el-col :span="18">
+				<div class="dept-box dept-form">
+					<el-form ref="formRef" :rules="rules" :model="deptFormData" 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="deptFormData.id" disabled />
+								</el-form-item>
+							</el-col>
+							<el-col :span="10">
+								<el-form-item label="父级部门ID" prop="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="deptFormData.name" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="10">
+								<el-form-item required label="部门标识" prop="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="deptFormData.owner" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="10">
+								<el-form-item label="联系电话" prop="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="deptFormData.email" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="10">
+								<el-form-item label="排序" prop="sort">
+									<el-input-number v-model="deptFormData.sort" controls-position="right" />
+								</el-form-item>
+							</el-col>
+
+							<el-col class="center">
+								<el-divider>
+									<el-button @click="handleUpdateMenu('update')" type="primary" round
+										:disabled="!deptFormData.id || deptBtnLoading">保存</el-button>
+									<el-button @click="handleUpdateMenu('create')" type="primary" round :disabled="deptBtnLoading">新建
+									</el-button>
+									<el-button @click="handleDeleteMenu" type="primary" round>删除部门
+									</el-button>
+								</el-divider>
+							</el-col>
+						</el-row>
+					</el-form>
+				</div>
+			</el-col>
+		</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 '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 { ref, onMounted, reactive } from 'vue';
 import XEUtils from 'xe-utils';
-import {errorMessage, successMessage} from '../../../utils/message';
-
-interface Tree {
-    id: number;
-    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: '',
-    parent: '',
-    name: '',
-    owner: '',
-    phone: '',
-    email: '',
-    sort: '',
-});
+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';
 
+let treeData = ref([]);
+let deptFormData = reactive<DeptFormDataType>({
+	id: '',
+	key: '',
+	parent: '',
+	name: '',
+	owner: '',
+	phone: '',
+	email: '',
+	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'}],
+	name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
+	key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
 });
 
-const getData = () => {
-    api.GetList({}).then((ret: APIResponseData) => {
-        const responseData = ret.data;
-        const result = XEUtils.toArrayTree(responseData, {
-            parentKey: 'parent',
-            children: 'children',
-            strict: true,
-        });
-        data.value = result;
-    });
+const getData = async () => {
+	let res: APIResponseData = await GetList({});
+
+	if (res?.code === 2000 && Array.isArray(res.data)) {
+		const result = XEUtils.toArrayTree(res.data, {
+			parentKey: 'parent',
+			children: 'children',
+			strict: true,
+		});
+
+		treeData.value = result;
+	}
 };
 
-const saveMenu = () => {
-    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 setFormInitData = (data: DeptFormDataType) => {
+	deptFormData.id = data.id;
+	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 newMenu = () => {
-    formRef.value?.resetFields();
-    isAddNewMenu.value = true;
+const handleDeleteMenu = (id: string, callback: Function) => {
+	ElMessageBox.confirm(
+		'您确认删除该部门吗?',
+		'温馨提示',
+		{
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'warning',
+		}
+	).then(async () => {
+		const res: APIResponseData = await DelObj(id)
+		callback()
+		if (res?.code === 2000) {
+			successMessage(res.msg as string);
+			getData();
+		}
+	})
 };
 
-const addChildMenu = () => {
-    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(() => {
-        api.DelObj(form).then((res: APIResponseData) => {
-            successMessage(res.msg as string);
-            getData();
-        });
-    })
+const handleUpdateMenu = (type: string, record?: TreeItemType) => {
+	if (type === 'update' && record) {
+		drawerFormData.value = record
+	}
+	drawerVisible.value = true
+	//form.component == '' ? (form.is_catalog = true) : (form.is_catalog = 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 = {}
+}
 
-const handleNodeClick = (data: any, node: any, prop: any) => {
-    Object.keys(toRaw(data)).forEach((key: string) => {
-        form[key] = data[key];
-    });
-    delete form.component_name;
-    form.id = data.id;
-    isAddNewMenu.value = false;
-};
-
-// 页面打开后获取列表数据
 onMounted(() => {
-    getData();
+	getData();
 });
 </script>
 
 <style lang="scss" scoped>
-.el-row {
-    height: 100%;
+.dept-el-row {
+	height: 100%;
+	overflow: hidden;
 
-    .el-col {
-        height: 100%;
-    }
+	.el-col {
+		height: 100%;
+		padding: 10px 0;
+		box-sizing: border-box;
+	}
 }
 
-.el-card {
-    height: 100%;
+.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;
+	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/web/src/views/system/dept/types.ts b/web/src/views/system/dept/types.ts
new file mode 100644
index 0000000..a1ef5c6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/web/src/views/system/menu/index.vue b/web/src/views/system/menu/index.vue
index 8e3c783..8fd3e37 100644
--- a/web/src/views/system/menu/index.vue
+++ b/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"
-							:filter-node-method="filterNode" :load="loadNode" @node-drop="nodeDrop" lazy :indent="45"
-							@node-click="handleNodeClick" highlight-current default-expand-all>
+						<el-tree ref="treeRef" :data="data" :props="defaultTreeProps" :filter-node-method="filterNode"
+							:load="loadNode" @node-drop="nodeDrop" lazy :indent="45" @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">
@@ -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 type Node from 'element-plus/es/components/tree/src/model/node'
+import { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types';
+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;
 
diff --git a/web/src/views/system/user/index.vue b/web/src/views/system/user/index.vue
index e147dfd..a7c3835 100644
--- a/web/src/views/system/user/index.vue
+++ b/web/src/views/system/user/index.vue
@@ -12,16 +12,8 @@
 						</el-tooltip>
 					</p>
 					<el-input v-model="filterText" :placeholder="placeholder" />
-					<el-tree
-						ref="treeRef"
-						class="font-mono font-bold leading-6 text-7xl"
-						:data="data"
-						:props="treeProps"
-						:filter-node-method="filterNode"
-						icon="ArrowRightBold"
-						:indent="12"
-						@node-click="onTreeNodeClick"
-					>
+					<el-tree ref="treeRef" 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>
@@ -31,10 +23,10 @@
 			<el-col xs="24" :sm="16" :md="18" :lg="20" :xl="20" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
 					<fs-crud ref="crudRef" v-bind="crudBinding">
-            <template #actionbar-right>
-              <importExcel  api="api/system/user/" >导入 </importExcel>
-            </template>
-          </fs-crud>
+						<template #actionbar-right>
+							<importExcel api="api/system/user/">导入 </importExcel>
+						</template>
+					</fs-crud>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -98,6 +90,7 @@ const getData = () => {
 			children: 'children',
 			strict: true,
 		});
+
 		data.value = result;
 	});
 };
@@ -142,7 +135,8 @@ onMounted(() => {
 .el-card {
 	height: 100%;
 }
+
 .font-normal {
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 }
 </style>