refactor: system pages (#399)

* refactor: system pages * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update
2025-11-09 13:53:38 +08:00 · 2022-12-16 14:34:10 +08:00
parent 66fdfebb5e
commit 923f09db5b
25 changed files with 521 additions and 444 deletions
--- a/src/views/system/dept/hook.tsx
+++ b/src/views/system/dept/hook.tsx
@@ -0,0 +1,114 @@
+import dayjs from "dayjs";
+import { handleTree } from "@/utils/tree";
+import { getDeptList } from "@/api/system";
+import { reactive, ref, onMounted } from "vue";
+
+export function useDept() {
+  const form = reactive({
+    user: "",
+    status: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      minWidth: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+    {
+      label: "部门名称",
+      prop: "name",
+      width: 180,
+      align: "left"
+    },
+    {
+      label: "排序",
+      prop: "sort",
+      minWidth: 70
+    },
+    {
+      label: "状态",
+      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>
+      )
+    },
+    {
+      label: "创建时间",
+      minWidth: 200,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 200
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 160,
+      slot: "operation"
+    }
+  ];
+
+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  function handleDelete(row) {
+    console.log(row);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  function resetForm(formEl) {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getDeptList();
+    dataList.value = handleTree(data);
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    onSearch,
+    resetForm,
+    handleUpdate,
+    handleDelete,
+    handleSelectionChange
+  };
+}