perf: 完善系统管理-部门管理页面

src/views/system/dept/hook.tsx

@@ -1,22 +1,26 @@
 import dayjs from "dayjs";
+import editForm from "./form.vue";
 import { handleTree } from "@/utils/tree";
+import { usePublicHooks } from "../hooks";
+import { message } from "@/utils/message";
 import { getDeptList } from "@/api/system";
-import { reactive, ref, onMounted } from "vue";
+import { type FormItemProps } from "./types";
+import { addDialog } from "@/components/ReDialog";
+import { reactive, ref, onMounted, h } from "vue";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 
 export function useDept() {
   const form = reactive({
-    user: "",
-    status: ""
+    name: "",
+    status: null
   });
+
+  const formRef = ref();
   const dataList = ref([]);
   const loading = ref(true);
+  const { tagStyle } = usePublicHooks();
 
   const columns: TableColumnList = [
-    {
-      label: "序号",
-      type: "index",
-      minWidth: 70
-    },
     {
       label: "部门名称",
       prop: "name",
@@ -33,12 +37,8 @@ export function useDept() {
       prop: "status",
       minWidth: 100,
       cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.status === 1 ? "danger" : "success"}
-          effect="plain"
-        >
-          {row.status === 0 ? "关闭" : "开启"}
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
+          {row.status === 1 ? "启用" : "停用"}
         </el-tag>
       )
     },
@@ -52,7 +52,7 @@ export function useDept() {
     {
       label: "备注",
       prop: "remark",
-      minWidth: 200
+      minWidth: 320
     },
     {
       label: "操作",
@@ -62,14 +62,6 @@ export function useDept() {
     }
   ];
 
-  function handleUpdate(row) {
-    console.log(row);
-  }
-
-  function handleDelete(row) {
-    console.log(row);
-  }
-
   function handleSelectionChange(val) {
     console.log("handleSelectionChange", val);
   }
@@ -82,13 +74,86 @@ export function useDept() {
 
   async function onSearch() {
     loading.value = true;
-    const { data } = await getDeptList();
-    dataList.value = handleTree(data);
+    const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
+    let newData = data;
+    if (!isAllEmpty(form.name)) {
+      // 前端搜索部门名称
+      newData = newData.filter(item => item.name.includes(form.name));
+    }
+    if (!isAllEmpty(form.status)) {
+      // 前端搜索状态
+      newData = newData.filter(item => item.status === form.status);
+    }
+    dataList.value = handleTree(newData); // 处理成树结构
     setTimeout(() => {
       loading.value = false;
     }, 500);
   }
 
+  function formatHigherDeptOptions(treeList) {
+    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+    if (!treeList || !treeList.length) return;
+    const newTreeList = [];
+    for (let i = 0; i < treeList.length; i++) {
+      treeList[i].disabled = treeList[i].status === 0 ? true : false;
+      formatHigherDeptOptions(treeList[i].children);
+      newTreeList.push(treeList[i]);
+    }
+    return newTreeList;
+  }
+
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}部门`,
+      props: {
+        formInline: {
+          higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)),
+          parentId: row?.parentId ?? 0,
+          name: row?.name ?? "",
+          principal: row?.principal ?? "",
+          phone: row?.phone ?? "",
+          email: row?.email ?? "",
+          sort: row?.sort ?? 0,
+          status: row?.status ?? 1,
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "40%",
+      draggable: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了部门名称为${curData.name}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用编辑接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  function handleDelete(row) {
+    message(`您删除了部门名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
+  }
+
   onMounted(() => {
     onSearch();
   });
@@ -98,9 +163,13 @@ export function useDept() {
     loading,
     columns,
     dataList,
+    /** 搜索 */
     onSearch,
+    /** 重置 */
     resetForm,
-    handleUpdate,
+    /** 新增、编辑部门 */
+    openDialog,
+    /** 删除部门 */
     handleDelete,
     handleSelectionChange
   };