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

2025-11-03 13:44:47 +08:00 · 2023-05-11 15:11:58 +08:00
parent 47f951312e
commit a71bf0befb
13 changed files with 576 additions and 179 deletions
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -191,6 +191,7 @@ function onCloseCallBackClick() {
  });
 }

+// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取
 function onNestingClick() {
  addDialog({
    title: "嵌套的弹框",
@@ -323,6 +324,44 @@ function onFormFourClick() {
    }
  });
 }
+
+function onBeforeCancelClick() {
+  addDialog({
+    title: "点击底部取消按钮的回调",
+    contentRenderer: () => (
+      <p>弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）</p>
+    ),
+    beforeCancel: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onBeforeSureClick() {
+  addDialog({
+    title: "点击底部确定按钮的回调",
+    contentRenderer: () => (
+      <p>
+        弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
+      </p>
+    ),
+    beforeSure: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
 </script>

 <template>
@@ -338,7 +377,13 @@ function onFormFourClick() {
          >
            Dialog
          </el-link>
-          ，采用函数式调用弹框组件
+          ，采用函数式调用弹框组件（更多操作实例请参考
+          <span
+            class="cursor-pointer text-primary"
+            @click="$router.push({ name: 'Dept' })"
+            >系统管理页面</span
+          >
+          ）
        </span>
      </div>
    </template>
@@ -380,5 +425,14 @@ function onFormFourClick() {
        结合Form表单（第四种方式）
      </el-button>
    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onBeforeCancelClick">
+        点击底部取消按钮的回调（会暂停弹框的关闭）
+      </el-button>
+      <el-button @click="onBeforeSureClick">
+        点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
+      </el-button>
+    </el-space>
  </el-card>
 </template>
--- a/src/views/system/dept/form.vue
+++ b/src/views/system/dept/form.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./rule";
+import ReCol from "@/components/ReCol";
+import { usePublicHooks } from "../hooks";
+
+/** TODO
+ * 针对类型的props/emit声明，vue3.3.0版本以下不支持复杂的类型和从其他文件进行类型导入，等后续vue正式发布3.3.0版本再优化
+ * https://cn.vuejs.org/api/sfc-script-setup.html#typescript-only-features
+ */
+interface FormProps {
+  formInline: {
+    higherDeptOptions: Record<string, unknown>[];
+    parentId: number;
+    name: string;
+    principal: string;
+    phone: string | number;
+    email: string;
+    sort: number;
+    status: number;
+    remark: string;
+  };
+}
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    higherDeptOptions: [],
+    parentId: 0,
+    name: "",
+    principal: "",
+    phone: "",
+    email: "",
+    sort: 0,
+    status: 1,
+    remark: ""
+  })
+});
+
+const ruleFormRef = ref();
+const { switchStyle } = usePublicHooks();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-row :gutter="30">
+      <re-col>
+        <el-form-item label="上级部门">
+          <el-cascader
+            class="w-full"
+            v-model="newFormInline.parentId"
+            :options="newFormInline.higherDeptOptions"
+            :props="{
+              value: 'id',
+              label: 'name',
+              emitPath: false,
+              checkStrictly: true
+            }"
+            clearable
+            filterable
+            placeholder="请选择上级部门"
+          >
+            <template #default="{ node, data }">
+              <span>{{ data.name }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门名称" prop="name">
+          <el-input
+            v-model="newFormInline.name"
+            clearable
+            placeholder="请输入部门名称"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门负责人">
+          <el-input
+            v-model="newFormInline.principal"
+            clearable
+            placeholder="请输入部门负责人"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="手机号" prop="phone">
+          <el-input
+            v-model="newFormInline.phone"
+            clearable
+            placeholder="请输入手机号"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="邮箱" prop="email">
+          <el-input
+            v-model="newFormInline.email"
+            clearable
+            placeholder="请输入邮箱"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="排序">
+          <el-input-number
+            v-model="newFormInline.sort"
+            :min="0"
+            :max="9999"
+            controls-position="right"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门状态">
+          <el-switch
+            v-model="newFormInline.status"
+            inline-prompt
+            :active-value="1"
+            :inactive-value="0"
+            active-text="启用"
+            inactive-text="停用"
+            :style="switchStyle"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col>
+        <el-form-item label="备注">
+          <el-input
+            v-model="newFormInline.remark"
+            placeholder="请输入备注信息"
+            type="textarea"
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>
--- a/src/views/system/dept/hook.tsx
+++ b/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
  };
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -23,7 +23,7 @@ const {
  dataList,
  onSearch,
  resetForm,
-  handleUpdate,
+  openDialog,
  handleDelete,
  handleSelectionChange
 } = useDept();
@@ -37,9 +37,9 @@ const {
      :model="form"
      class="bg-bg_color w-[99/100] pl-8 pt-4"
    >
-      <el-form-item label="部门名称：" prop="user">
+      <el-form-item label="部门名称：" prop="name">
        <el-input
-          v-model="form.user"
+          v-model="form.name"
          placeholder="请输入部门名称"
          clearable
          class="!w-[200px]"
@@ -52,8 +52,8 @@ const {
          clearable
          class="!w-[180px]"
        >
-          <el-option label="开启" value="1" />
-          <el-option label="关闭" value="0" />
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
@@ -72,13 +72,17 @@ const {
    </el-form>

    <PureTableBar
-      title="部门列表"
+      title="部门列表（仅演示，操作后不生效）"
      :columns="columns"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
    >
      <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon(AddFill)">
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
          新增部门
        </el-button>
      </template>
@@ -107,12 +111,15 @@ const {
              link
              type="primary"
              :size="size"
-              @click="handleUpdate(row)"
              :icon="useRenderIcon(EditPen)"
+              @click="openDialog('编辑', row)"
            >
-              修改
+              编辑
            </el-button>
-            <el-popconfirm title="是否确认删除?">
+            <el-popconfirm
+              :title="`是否确认删除部门名称为${row.name}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
              <template #reference>
                <el-button
                  class="reset-margin"
@@ -120,7 +127,6 @@ const {
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(Delete)"
-                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
--- a/src/views/system/dept/rule.ts
+++ b/src/views/system/dept/rule.ts
@@ -0,0 +1,37 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+import { isPhone, isEmail } from "@pureadmin/utils";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号码格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+      // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
+    }
+  ],
+  email: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isEmail(value)) {
+          callback(new Error("请输入正确的邮箱格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
--- a/src/views/system/dept/types.ts
+++ b/src/views/system/dept/types.ts
@@ -0,0 +1,16 @@
+interface FormItemProps {
+  higherDeptOptions: Record<string, unknown>[];
+  parentId: number;
+  name: string;
+  principal: string;
+  phone: string | number;
+  email: string;
+  sort: number;
+  status: number;
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };
--- a/src/views/system/hooks.ts
+++ b/src/views/system/hooks.ts
@@ -0,0 +1,39 @@
+// 抽离可公用的工具函数等用于系统管理页面逻辑
+import { computed } from "vue";
+import { useDark } from "@pureadmin/utils";
+
+export function usePublicHooks() {
+  const { isDark } = useDark();
+
+  const switchStyle = computed(() => {
+    return {
+      "--el-switch-on-color": "#6abe39",
+      "--el-switch-off-color": "#e84749"
+    };
+  });
+
+  const tagStyle = computed(() => {
+    return (status: number) => {
+      return status === 1
+        ? {
+            "--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
+            "--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
+            "--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
+          }
+        : {
+            "--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
+            "--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
+            "--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
+          };
+    };
+  });
+
+  return {
+    /** 当前网页是否为`dark`模式 */
+    isDark,
+    /** 表现更鲜明的`el-switch`组件  */
+    switchStyle,
+    /** 表现更鲜明的`el-tag`组件  */
+    tagStyle
+  };
+}