feat: 部门管理

src/api/modules/system/index.ts

@@ -15,3 +15,11 @@ export const getDictAPI = () => {
     method: "get"
   });
 };
+
+// 获取部门数据
+export const getDivisionAPI = () => {
+  return axios({
+    url: "/mock/system/getDivision",
+    method: "get"
+  });
+};

src/mock/_data/system_data.ts

@@ -18,13 +18,13 @@ export const divisionData = [
       {
         id: "10001",
         parentId: "100",
-        name: "研发部门",
+        name: "华中总部",
         leader: "小唐",
         phone: "",
         email: "",
         sort: 1,
         status: 1,
-        description: "这里是研发部门",
+        description: "这里是华中总部",
         createBy: "admin",
         createTime: "2024-03-19 11:21:01",
         updateBy: "admin",

src/mock/system/system.ts

@@ -1,6 +1,6 @@
 import type { MockMethod } from "vite-plugin-mock";
 import { resultSuccess } from "../_utils";
-import { dictData } from "../_data/system_data";
+import { dictData, divisionData } from "../_data/system_data";
 
 // post请求body,get请求query
 export default [
@@ -11,5 +11,13 @@ export default [
     response: () => {
       return resultSuccess(dictData);
     }
+  },
+  {
+    url: "/mock/system/getDivision",
+    method: "get",
+    timeout: 300,
+    response: () => {
+      return resultSuccess(divisionData);
+    }
   }
 ] as MockMethod[];

src/views/system/dictionary/dictionary.vue

@@ -83,7 +83,7 @@
     <a-modal v-model:visible="open" @close="afterClose" @ok="handleOk" @cancel="afterClose">
       <template #title> {{ title }} </template>
       <div>
-        <a-form ref="formRef" :rules="rules" :model="addFrom">
+        <a-form ref="formRef" auto-label-width :rules="rules" :model="addFrom">
           <a-form-item field="name" label="字典名称" validate-trigger="blur">
             <a-input v-model="addFrom.name" placeholder="请输入字典名称" allow-clear />
           </a-form-item>
@@ -167,7 +167,7 @@
     <a-modal v-model:visible="detailCaseOpen" @close="afterCloseDetail" @ok="handleOkDetail" @cancel="afterCloseDetail">
       <template #title> {{ detailTitle }} </template>
       <div>
-        <a-form ref="detailFormRef" :rules="detaulRules" :model="deatilForm">
+        <a-form ref="detailFormRef" auto-label-width :rules="detaulRules" :model="deatilForm">
           <a-form-item field="name" label="字典名称" validate-trigger="blur">
             <a-input v-model="deatilForm.name" placeholder="请输入字典名称" allow-clear />
           </a-form-item>
@@ -188,6 +188,7 @@
 
 <script setup lang="ts">
 import { getDictAPI } from "@/api/modules/system/index";
+import { deepClone } from "@/utils";
 const openState = ref(dictFilter("status"));
 const form = ref({
   name: "",
@@ -243,6 +244,7 @@ const handleOk = async () => {
   if (state) return (open.value = true); // 校验不通过
   arcoMessage("success", "模拟提交成功");
 };
+// 关闭对话框动画结束后触发
 const afterClose = () => {
   formRef.value.resetFields();
   addFrom.value = {
@@ -254,7 +256,7 @@ const afterClose = () => {
 };
 const onUpdate = (record: any) => {
   title.value = "修改字典";
-  addFrom.value = JSON.parse(JSON.stringify(record));
+  addFrom.value = deepClone(record);
   open.value = true;
 };
 const onDelete = () => {
@@ -329,9 +331,10 @@ const handleOkDetail = async () => {
 };
 const onDetailUpdate = (record: any) => {
   detailTitle.value = "修改字典数据";
-  deatilForm.value = JSON.parse(JSON.stringify(record));
+  deatilForm.value = deepClone(record);
   detailCaseOpen.value = true;
 };
+// 关闭对话框动画结束后触发
 const afterCloseDetail = () => {
   detailFormRef.value.resetFields();
   deatilForm.value = {

src/views/system/division/division.vue

@@ -4,7 +4,7 @@
       <a-space wrap>
         <a-input v-model="form.name" placeholder="请输入部门名称" allow-clear />
         <a-select placeholder="部门状态" v-model="form.open" style="width: 120px" allow-clear>
-          <a-option v-for="item in openState" :key="item.value" :value="item.value">{{ item.label }}</a-option>
+          <a-option v-for="item in openState" :key="item.value" :value="item.value">{{ item.name }}</a-option>
         </a-select>
         <a-button type="primary" @click="search">
           <template #icon><icon-search /></template>
@@ -29,7 +29,7 @@
         </a-space>
       </a-row>
 
-      <a-table :data="tableData" default-expand-all-rows :bordered="{ cell: true }" row-key="id">
+      <a-table ref="tableRef" :data="tableData" default-expand-all-rows :bordered="{ cell: true }" row-key="id">
         <template #columns>
           <a-table-column title="部门名称">
             <template #cell="{ record }">
@@ -50,112 +50,208 @@
           <a-table-column title="操作" align="center" :fixed="'right'">
             <template #cell="{ record }">
               <a-space>
-                <a-button size="mini" type="primary" @click="onEdit(record)">
+                <a-button size="mini" type="primary" @click="onUpdate(record)">
                   <template #icon><icon-edit /></template>
                   <span>修改</span>
                 </a-button>
-                <a-button size="mini" type="primary" status="success">
+                <a-button size="mini" type="primary" status="success" @click="addDivision(record.id)">
                   <template #icon><icon-plus /></template>
                   <span>新增</span>
                 </a-button>
-                <a-button size="mini" type="primary" status="danger" v-if="record.id != '100'">
+                <a-popconfirm type="warning" content="确定删除该部门吗?" @ok="onDelete">
-                  <template #icon><icon-delete /></template>
+                  <a-button size="mini" type="primary" status="danger" v-if="record.id != '100'">
-                  <span>删除</span>
+                    <template #icon><icon-delete /></template>
-                </a-button>
+                    <span>删除</span>
+                  </a-button>
+                </a-popconfirm>
               </a-space>
             </template>
           </a-table-column>
         </template>
       </a-table>
     </div>
+
+    <a-modal v-model:visible="open" @close="afterClose" @ok="handleOk" @cancel="afterClose">
+      <template #title> {{ title }} </template>
+      <div>
+        <a-form ref="formRef" auto-label-width :rules="rules" :model="addFrom">
+          <a-form-item field="parentId" label="上级部门" validate-trigger="blur">
+            <a-tree-select
+              v-model="addFrom.parentId"
+              :data="tableData"
+              :field-names="{
+                key: 'id',
+                title: 'name',
+                children: 'children'
+              }"
+              placeholder="选择上级部门"
+            ></a-tree-select>
+          </a-form-item>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item field="name" label="部门名称" validate-trigger="blur">
+                <a-input v-model="addFrom.name" placeholder="请输入部门名称" allow-clear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item field="status" label="部门状态" validate-trigger="blur">
+                <a-switch type="round" :checked-value="1" :unchecked-value="0" v-model="addFrom.status">
+                  <template #checked> 启用 </template>
+                  <template #unchecked> 禁用 </template>
+                </a-switch>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item field="leader" label="负责人" validate-trigger="blur">
+                <a-input v-model="addFrom.leader" placeholder="请输入负责人" allow-clear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item field="phone" label="联系电话" validate-trigger="blur">
+                <a-input v-model="addFrom.phone" placeholder="请输入联系电话" allow-clear />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item field="email" label="邮箱" validate-trigger="blur">
+                <a-input v-model="addFrom.email" placeholder="请输入邮箱" allow-clear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item field="sort" label="显示排序" validate-trigger="blur">
+                <a-input-number
+                  v-model="addFrom.sort"
+                  placeholder="请输入排序值"
+                  :min="1"
+                  :max="999"
+                  :step="1"
+                  :precision="0"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-form-item field="description" label="描述" validate-trigger="blur">
+            <a-textarea v-model="addFrom.description" placeholder="请输入字典描述" allow-clear />
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { divisionData } from "@/views/system/data/index";
+import { getDivisionAPI } from "@/api/modules/system/index";
-const tableData = ref(divisionData);
+import { deepClone } from "@/utils";
-const onEdit = (row: Menu.MenuOptions) => {
+
-  console.log("修改", row);
+// 新增
+const open = ref(false);
+const rules = {
+  parentId: [
+    {
+      required: true,
+      message: "请选择上级部门"
+    }
+  ],
+  name: [
+    {
+      required: true,
+      message: "请输入部门名称"
+    }
+  ],
+  status: [
+    {
+      required: true,
+      message: "请选择部门状态"
+    }
+  ]
 };
-const openState = ref([
+const addFrom = ref<any>({
-  { value: 1, label: "是" },
+  parentId: null,
-  { value: 0, label: "否" }
-]);
-const form = ref({
   name: "",
-  code: "",
+  sort: 0,
-  open: null
+  leader: "",
+  phone: "",
+  email: "",
+  status: 1,
+  description: ""
 });
-const search = () => {
+const formType = ref(0); // 0新增 1修改 2新增下级
-  console.log("搜索");
+const title = ref("");
-};
+const formRef = ref();
-const reset = () => {
-  console.log("重置");
-};
 const onAdd = () => {
-  console.log("新增");
+  title.value = "添加部门";
+  formType.value = 0;
+  open.value = true;
 };
+const handleOk = async () => {
+  let state = await formRef.value.validate();
+  if (state) return (open.value = true); // 校验不通过
+  console.log("模拟提交", formType.value, addFrom.value);
+  arcoMessage("success", "模拟提交成功");
+};
+// 关闭对话框动画结束后触发
+const afterClose = () => {
+  formRef.value.resetFields();
+  addFrom.value = {
+    parentId: null,
+    name: "",
+    sort: 0,
+    leader: "",
+    phone: "",
+    email: "",
+    status: 1,
+    description: ""
+  };
+};
+const onUpdate = (row: any) => {
+  title.value = "修改部门";
+  formType.value = 1;
+  addFrom.value = deepClone(row);
+  row.parentId == 0 && (addFrom.value.parentId = null);
+  open.value = true;
+};
+const addDivision = (id: any) => {
+  title.value = "新增部门";
+  formType.value = 2;
+  addFrom.value.parentId = id == 0 ? null : id;
+  open.value = true;
+};
+// 删除部门
 const onDelete = () => {
   console.log("删除");
 };
-// const loading = ref(false);
+
-// const pagination = ref({
+const openState = ref(dictFilter("status"));
-//   pageSize: 10,
+const form = ref({
-//   showPageSize: true
+  name: "",
-// });
+  status: ""
-// const selectedKeys = ref([]);
+});
-// const dictList = ref([
+const search = () => {
-//   {
+  getDivision();
-//     id: "01",
+};
-//     name: "性别",
+const reset = () => {
-//     value: "gender",
+  form.value = {
-//     status: 1,
+    name: "",
-//     description: "这是一个性别字典",
+    status: ""
-//     createTime: "2024-07-01 10:00:00",
+  };
-//     list: [
+};
-//       { id: "012", name: "女", value: 0, status: 1 },
+const tableRef = ref();
-//       { id: "011", name: "男", value: 1, status: 1 },
+const tableData = ref();
-//       { id: "013", name: "未知", value: 2, status: 1 }
+const getDivision = async () => {
-//     ]
+  let res = await getDivisionAPI();
-//   },
+  tableData.value = res.data;
-//   {
+  setTimeout(() => {
-//     id: "02",
+    tableRef.value.expandAll();
-//     name: "状态",
+  }, 0);
-//     value: "status",
+};
-//     status: 1,
+
-//     description: "想要统一状态字段可以用这个",
+onMounted(() => {
-//     createTime: "2024-07-01 10:00:00",
+  getDivision();
-//     list: [
+});
-//       { id: "021", name: "禁用", value: 0, status: 1 },
-//       { id: "022", name: "启用", value: 1, status: 1 }
-//     ]
-//   },
-//   {
-//     id: "03",
-//     name: "岗位",
-//     value: "post",
-//     status: 1,
-//     description: "岗位字段",
-//     createTime: "2024-07-01 10:00:00",
-//     list: [
-//       { id: "031", name: "总经理", value: 1, status: 1 },
-//       { id: "032", name: "总监", value: 2, status: 1 },
-//       { id: "033", name: "人事主管", value: 3, status: 1 },
-//       { id: "034", name: "开发部主管", value: 4, status: 1 },
-//       { id: "035", name: "普通职员", value: 5, status: 1 },
-//       { id: "036", name: "其它", value: 999, status: 1 }
-//     ]
-//   }
-// ]);
-// const select = (list: []) => {
-//   selectedKeys.value = list;
-// };
-// const selectAll = (state: boolean) => {
-//   selectedKeys.value = state ? (dictList.value.map(el => el.id) as []) : [];
-// };
-// const onDictData = (e: any) => {
-//   console.log("字典数据", e);
-// };
 </script>
 
 <style lang="scss" scoped></style>