From f3eec288404d3870cf3111825809e33bfcfb4980 Mon Sep 17 00:00:00 2001
From: suyanyan <1321717064@qq.com>
Date: Tue, 16 Jul 2024 17:50:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E7=AE=A1=E7=90=86=E7=8F=AD?=
 =?UTF-8?q?=E7=BA=A7=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/interface/sys/usermanage/personnel.ts |  23 ++-
 .../src/api/modules/usermanage/classManage.ts |  14 +-
 .../src/api/modules/usermanage/personnel.ts   |  30 ++-
 .../src/components/TreeFilter/index.vue       |   9 +-
 SafeCampus.WEB/src/styles/element.scss        |  10 +-
 .../personnel/components/form/form_basic.vue  |  89 ++++++++
 .../personnel/components/form/index.vue       | 119 +++++++++++
 .../personnel/components/formClass/index.vue  | 108 ++++++++++
 .../src/views/userManage/personnel/index.vue  | 194 +++++++++++++++---
 9 files changed, 534 insertions(+), 62 deletions(-)
 create mode 100644 SafeCampus.WEB/src/views/userManage/personnel/components/form/form_basic.vue
 create mode 100644 SafeCampus.WEB/src/views/userManage/personnel/components/form/index.vue
 create mode 100644 SafeCampus.WEB/src/views/userManage/personnel/components/formClass/index.vue

diff --git a/SafeCampus.WEB/src/api/interface/sys/usermanage/personnel.ts b/SafeCampus.WEB/src/api/interface/sys/usermanage/personnel.ts
index 80ad31b..628085c 100644
--- a/SafeCampus.WEB/src/api/interface/sys/usermanage/personnel.ts
+++ b/SafeCampus.WEB/src/api/interface/sys/usermanage/personnel.ts
@@ -12,7 +12,7 @@
  * 6.任何基于本软件而产生的一切法律纠纷和责任，均于我司无关
  */
 
-import { ReqId, ReqPage } from "@/api";
+import { ReqPage } from "@/api";
 /**
  * @Description: 人员管理接口
  * @Author: syy
@@ -20,15 +20,24 @@ import { ReqId, ReqPage } from "@/api";
  */
 
 export namespace SysUserPersonnel {
-  /** 头像信息 */
+  export interface Page extends ReqPage {}
+
+  /** 底库信息 */
+  export interface ClassPage {
+    id?: string | undefined;
+    name?: string | undefined;
+  }
+  /** 人脸信息 */
   export interface SysUserAvatar {
-    /** 头像 */
-    avatar?: string;
+    /** 人脸 */
+    personId?: string | undefined;
+    faceId: string;
+    faceUrl: string;
+    tag: string;
   }
 
   /** 用户信息 */
   export interface SysUserPerInfo {
-    id: number | string;
     /** 人员id */
     personId?: string;
     /** 姓名 */
@@ -42,6 +51,8 @@ export namespace SysUserPersonnel {
     /** 扩展字段 */
     extData?: string;
     /** 人脸 */
-    // faces: Array<>;
+    faces: Array<SysUserAvatar>;
+    /** 分组 */
+    personSets: Array<ClassPage>;
   }
 }
diff --git a/SafeCampus.WEB/src/api/modules/usermanage/classManage.ts b/SafeCampus.WEB/src/api/modules/usermanage/classManage.ts
index 00011d7..7c233af 100644
--- a/SafeCampus.WEB/src/api/modules/usermanage/classManage.ts
+++ b/SafeCampus.WEB/src/api/modules/usermanage/classManage.ts
@@ -13,7 +13,7 @@
  * @see https://gitee.com/dotnetmoyu/SimpleAdmin
  */
 import { moduleRequest } from "@/api/request";
-import { ResPage, ZJRQ, ReqId } from "@/api/interface";
+import { ReqId, SysUserPersonnel } from "@/api/interface";
 const http = moduleRequest("/business/dfieldApi/");
 
 /**
@@ -23,20 +23,20 @@ const http = moduleRequest("/business/dfieldApi/");
  */
 const userManageClassManageApi = {
   /** 查询底库列表 */
-  page(params: ZJRQ.Page) {
+  page(params: SysUserPersonnel.ClassPage) {
     return http.get("queryAll", params);
   },
   /** 删除底库 */
   delete(params: ReqId) {
-    return http.post("deleteDfieldD", params);
+    return http.delete("deleteDfieldD", params);
   },
   /** 创建底库 */
-  add(params: ZJRQ.WarnInfo) {
+  add(params: SysUserPersonnel.ClassPage) {
     return http.post("createDfieldA", params);
   },
   /** 更新底库 */
-  edit(params: ZJRQ.WarnInfo) {
-    return http.post("updateDfieldU", params);
+  update(params: SysUserPersonnel.ClassPage) {
+    return http.put("updateDfieldU", params);
   }
 };
 
@@ -49,4 +49,4 @@ const userClassButtonCode = {
   delete: "userManageClassManageDelete"
 };
 
-export { userManageClassManageApi,userClassButtonCode };
+export { userManageClassManageApi, userClassButtonCode };
diff --git a/SafeCampus.WEB/src/api/modules/usermanage/personnel.ts b/SafeCampus.WEB/src/api/modules/usermanage/personnel.ts
index 29f0c5d..39f7455 100644
--- a/SafeCampus.WEB/src/api/modules/usermanage/personnel.ts
+++ b/SafeCampus.WEB/src/api/modules/usermanage/personnel.ts
@@ -13,7 +13,7 @@
  * @see https://gitee.com/dotnetmoyu/SimpleAdmin
  */
 import { moduleRequest } from "@/api/request";
-import { ResPage, ZJRQ, ReqId } from "@/api/interface";
+import { ResPage, ReqPersonId, SysUserPersonnel } from "@/api/interface";
 const http = moduleRequest("/business/personApi/");
 
 /**
@@ -23,24 +23,40 @@ const http = moduleRequest("/business/personApi/");
  */
 const userManagePersonnelApi = {
   /** 获取单页分页 */
-  page(params: ZJRQ.Page) {
+  page(params: SysUserPersonnel.Page) {
     return http.post("pageQuery", params);
   },
   /** 获取单页详情 */
-  detail(params: ReqId) {
+  detail(params: ReqPersonId) {
     return http.get("getPersionById", params);
   },
   /** 删除机构 */
-  delete(params: ReqId) {
+  delete(params: ReqPersonId) {
     return http.post("deletePersonD", params);
   },
   /** 新增机构 */
-  add(params: ZJRQ.WarnInfo) {
+  add(params: SysUserPersonnel.SysUserPerInfo) {
     return http.post("createPersonA", params);
   },
   /** 修改机构 */
-  edit(params: ZJRQ.WarnInfo) {
-    return http.post("updatePersionU", params);
+  update(params: SysUserPersonnel.SysUserPerInfo) {
+    return http.put("updatePersionU", params);
+  },
+  /** 添加人脸 */
+  addFace(params: SysUserPersonnel.SysUserAvatar) {
+    return http.post("addFaceA", params);
+  },
+  /** 删除人脸 */
+  deleteFace(params: SysUserPersonnel.SysUserAvatar) {
+    return http.delete("deleteFaceD", params);
+  },
+  /**底库绑定 */
+  personBindDfie(params: SysUserPersonnel.ClassPage) {
+    return http.post("personBindDfie", params);
+  },
+  /**底库解绑*/
+  personUnBindDfie(params: SysUserPersonnel.ClassPage) {
+    return http.post("personUnBindDfie", params);
   }
 };
 
diff --git a/SafeCampus.WEB/src/components/TreeFilter/index.vue b/SafeCampus.WEB/src/components/TreeFilter/index.vue
index b7e15a7..15d5df7 100644
--- a/SafeCampus.WEB/src/components/TreeFilter/index.vue
+++ b/SafeCampus.WEB/src/components/TreeFilter/index.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="card filter">
+  <div class="card filter" :style="{ width: width }">
     <h4 v-if="title" class="title sle">
       {{ title }}
     </h4>
+    <slot name="header"></slot>
     <el-input v-model="filterText" placeholder="输入关键字进行过滤" clearable />
+
     <el-scrollbar :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
       <el-tree
         ref="treeRef"
@@ -24,8 +26,8 @@
         @check="handleCheckChange"
       >
         <template #default="scope">
-          <span class="el-tree-node__label">
-            <slot :row="scope">
+          <span class="el-tree-node__label" style="width: 100%">
+            <slot :row="scope" name="label">
               {{ scope.node.label }}
             </slot>
           </span>
@@ -53,6 +55,7 @@ interface TreeFilterProps {
   checkStrictly?: boolean; // 是否开启子节点和父节点不关联 ==> 非必传，默认为 false
   topName?: string; // 顶级分类名称 ==> 非必传，默认为 “全部”
   showAll?: boolean; // 是否显示全部选项 ==> 非必传，默认为 true
+  width: string;
 }
 const props = withDefaults(defineProps<TreeFilterProps>(), {
   id: "id",
diff --git a/SafeCampus.WEB/src/styles/element.scss b/SafeCampus.WEB/src/styles/element.scss
index 3e5c6d7..d345310 100644
--- a/SafeCampus.WEB/src/styles/element.scss
+++ b/SafeCampus.WEB/src/styles/element.scss
@@ -249,10 +249,9 @@
 
 /* el-dialog */
 .el-dialog {
-  padding: 0!important;
+  padding: 0 !important;
   .el-dialog__header {
     padding: 16px;
-    
     margin: 0;
     border-bottom: 1px solid var(--el-border-color-lighter);
     .el-dialog__title {
@@ -263,13 +262,12 @@
     }
   }
   .el-dialog__body {
-    padding: 30px;
-    
+    padding: 20px;
   }
   .el-dialog__footer {
-    padding: 15px 16px;
     box-sizing: border-box;
-    border-top: 1px solid var(--el-border-color-lighter)
+    padding: 15px 16px;
+    border-top: 1px solid var(--el-border-color-lighter);
   }
 }
 
diff --git a/SafeCampus.WEB/src/views/userManage/personnel/components/form/form_basic.vue b/SafeCampus.WEB/src/views/userManage/personnel/components/form/form_basic.vue
new file mode 100644
index 0000000..c85f356
--- /dev/null
+++ b/SafeCampus.WEB/src/views/userManage/personnel/components/form/form_basic.vue
@@ -0,0 +1,89 @@
+<!-- 
+ * @Description: 人员表单
+ * @Author: syy 
+ * @Date: 2023-12-15 15:45:50
+-->
+<template>
+  <div>
+    <div>
+      <el-row :gutter="16">
+        <el-col :span="24">
+          <s-form-item label="人员姓名" prop="name">
+            <s-input v-model="userInfo.name"></s-input>
+          </s-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <s-form-item label="性别" prop="gender">
+            <s-radio-group v-model="userInfo.gender" :options="genderOptions" />
+          </s-form-item>
+        </el-col>
+        <el-col :span="12">
+          <s-form-item label="年龄" prop="age">
+            <s-input v-model="userInfo.age"></s-input>
+          </s-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <s-form-item label="手机号" prop="phone">
+            <s-input v-model="userInfo.phone"></s-input>
+          </s-form-item>
+        </el-col>
+        <el-col :span="12">
+          <s-form-item label="扩展字段" prop="extData">
+            <s-input v-model="userInfo.extData"></s-input>
+          </s-form-item>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SysUserPersonnel } from "@/api";
+import { useDictStore } from "@/stores/modules";
+
+const dictStore = useDictStore(); //字典仓库
+// props
+interface FormProps {
+  modelValue: Partial<SysUserPersonnel.SysUserPerInfo>;
+}
+const emit = defineEmits(["update:modelValue"]); //定义emit
+const props = defineProps<FormProps>(); //定义props
+// 人员信息
+const userInfo = computed({
+  get: () => props.modelValue,
+  set: val => emit("update:modelValue", val)
+});
+
+// 通用状态选项
+const genderOptions = ref([
+  {
+    label: "未知",
+    value: "0"
+  },
+  {
+    label: "男",
+    value: "1"
+  },
+  {
+    label: "女",
+    value: "2"
+  }
+]);
+onMounted(() => {
+  // 初始化
+  userInfo.value.gender = userInfo.value.gender ? userInfo.value.gender : genderOptions.value[0].value;
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-input__wrapper) {
+  width: 100% !important;
+}
+:deep(.el-date-editor.el-input) {
+  width: 92% !important;
+}
+</style>
diff --git a/SafeCampus.WEB/src/views/userManage/personnel/components/form/index.vue b/SafeCampus.WEB/src/views/userManage/personnel/components/form/index.vue
new file mode 100644
index 0000000..2c3643e
--- /dev/null
+++ b/SafeCampus.WEB/src/views/userManage/personnel/components/form/index.vue
@@ -0,0 +1,119 @@
+<!-- 
+ * @Description: 表单
+ * @Author: syy 
+ * @Date: 2023-12-15 15:45:59
+-->
+<template>
+  <div>
+    <form-container v-model="visible" :title="`${sysUserProps.opt}人员`" form-size="800px" @close="onClose">
+      <el-form
+        ref="sysUserFormRef"
+        :rules="rules"
+        :disabled="sysUserProps.disabled"
+        :model="sysUserProps.record"
+        :hide-required-asterisk="sysUserProps.disabled"
+        label-width="auto"
+        label-suffix=" :"
+      >
+        <el-tabs v-model="activeName">
+          <Basic v-model="sysUserProps.record"></Basic>
+        </el-tabs>
+      </el-form>
+      <template #footer>
+        <el-button @click="onClose"> 取消 </el-button>
+        <el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
+      </template>
+    </form-container>
+  </div>
+</template>
+
+<script setup lang="ts" name="SysUserPersonnelForm">
+import { SysUserPersonnel, userManagePersonnelApi } from "@/api";
+import { FormOptEnum, SysDictEnum } from "@/enums";
+import { required } from "@/utils/formRules";
+import { FormInstance } from "element-plus";
+import { useDictStore } from "@/stores/modules";
+import Basic from "./form_basic.vue";
+
+const visible = ref(false); //是否显示表单
+const activeName = ref("basic");
+// 表单参数
+const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.SysUserPerInfo>>({
+  opt: FormOptEnum.ADD,
+  record: {},
+  disabled: false
+});
+
+// 表单验证规则
+const rules = reactive({
+  // personId: [required("请输入人员ID")],
+  name: [required("请输入姓名")],
+  gender: [required("请选择性别")],
+  // age: [required("请输入年龄")]
+  phone: [required("请输入手机号")]
+  // extData: [required("请输入扩展数据")]
+});
+
+/**
+ * 打开表单
+ * @param props 表单参数
+ */
+function onOpen(props: FormProps.Base<SysUserPersonnel.SysUserPerInfo>) {
+  Object.assign(sysUserProps, props); //合并参数
+  if (props.opt == FormOptEnum.ADD) {
+    //如果是新增,设置默认值
+    // sysUserProps.record.sortCode = 99;
+  }
+  visible.value = true; //显示表单
+  if (props.record.personId) {
+    //如果传了id，就去请求api获取record
+    userManagePersonnelApi.detail({ personId: props.record.personId }).then(res => {
+      sysUserProps.record = res.data;
+    });
+  }
+}
+
+// 提交数据（新增/编辑）
+const sysUserFormRef = ref<FormInstance>();
+/** 提交表单 */
+async function handleSubmit() {
+  sysUserFormRef.value?.validate(async valid => {
+    if (!valid) return; //表单验证失败
+    //提交表单
+    console.log(sysUserProps);
+    debugger;
+    if (sysUserProps.record.personId) {
+      await userManagePersonnelApi
+        .update(sysUserProps.record)
+        .then(() => {
+          sysUserProps.successful!(); //调用父组件的successful方法
+        })
+        .finally(() => {
+          onClose();
+        });
+    } else {
+      await userManagePersonnelApi
+        .add(sysUserProps.record)
+        .then(() => {
+          sysUserProps.successful!(); //调用父组件的successful方法
+        })
+        .finally(() => {
+          onClose();
+        });
+    }
+  });
+}
+
+/** 关闭表单*/
+function onClose() {
+  visible.value = false;
+  activeName.value = "basic";
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  onOpen
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/SafeCampus.WEB/src/views/userManage/personnel/components/formClass/index.vue b/SafeCampus.WEB/src/views/userManage/personnel/components/formClass/index.vue
new file mode 100644
index 0000000..59517ab
--- /dev/null
+++ b/SafeCampus.WEB/src/views/userManage/personnel/components/formClass/index.vue
@@ -0,0 +1,108 @@
+<!-- 
+ * @Description: 表单
+ * @Author: syy 
+ * @Date: 2023-12-15 15:45:59
+-->
+<template>
+  <div>
+    <form-container v-model="visibleClass" :title="`${sysUserProps.opt}班级`" form-size="400px" @close="onClose">
+      <el-form
+        ref="sysUserFormRef"
+        :rules="rules"
+        :disabled="sysUserProps.disabled"
+        :model="sysUserProps.record"
+        :hide-required-asterisk="sysUserProps.disabled"
+        label-width="auto"
+        label-suffix=" :"
+      >
+        <div style="margin-top: 30px">
+          <el-row :gutter="16">
+            <el-col :span="22">
+              <s-form-item label="班级名称" prop="personSetName">
+                <s-input v-model="sysUserProps.record.personSetName"></s-input>
+              </s-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+      <template #footer>
+        <el-button @click="onClose"> 取消 </el-button>
+        <el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
+      </template>
+    </form-container>
+  </div>
+</template>
+
+<script setup lang="ts" name="SysUserPerformClass">
+import { ref } from "vue";
+import { SysUserPersonnel, userManageClassManageApi } from "@/api";
+import { FormOptEnum } from "@/enums";
+import { required } from "@/utils/formRules";
+import { FormInstance } from "element-plus";
+
+const visibleClass = ref(false); //是否显示表单
+
+// 表单参数
+const sysUserProps = reactive<FormProps.Base<SysUserPersonnel.ClassPage>>({
+  opt: FormOptEnum.ADD,
+  record: {},
+  disabled: false
+});
+// 表单验证规则
+const rules = reactive({
+  personSetName: [required("请输入班级名称")]
+});
+
+/**
+ * 打开表单
+ * @param props 表单参数
+ */
+function onOpen(props: FormProps.Base<SysUserPersonnel.ClassPage>) {
+  Object.assign(sysUserProps, props); //合并参数
+  visibleClass.value = true; //显示表单
+  sysUserProps.record = props.record;
+}
+
+// 提交数据（新增/编辑）
+const sysUserFormRef = ref<FormInstance>();
+/** 提交表单 */
+async function handleSubmit() {
+  sysUserFormRef.value?.validate(async valid => {
+    if (!valid) return; //表单验证失败
+    sysUserProps.record.name = sysUserProps.record.personSetName;
+    //提交表单
+    if (sysUserProps.record.personSetId) {
+      sysUserProps.record.id = sysUserProps.record.personSetId;
+      await userManageClassManageApi
+        .update(sysUserProps.record)
+        .then(() => {
+          sysUserProps.successful!(); //调用父组件的successful方法
+        })
+        .finally(() => {
+          onClose();
+        });
+    } else {
+      await userManageClassManageApi
+        .add(sysUserProps.record)
+        .then(() => {
+          sysUserProps.successful!(); //调用父组件的successful方法
+        })
+        .finally(() => {
+          onClose();
+        });
+    }
+  });
+}
+
+/** 关闭表单*/
+function onClose() {
+  visibleClass.value = false;
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  onOpen
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/SafeCampus.WEB/src/views/userManage/personnel/index.vue b/SafeCampus.WEB/src/views/userManage/personnel/index.vue
index e300ebd..ad6ba4d 100644
--- a/SafeCampus.WEB/src/views/userManage/personnel/index.vue
+++ b/SafeCampus.WEB/src/views/userManage/personnel/index.vue
@@ -4,35 +4,78 @@
  * @Date: 2024-7-15
 -->
 <template>
-  <div class="table-box">
-    <ProTable ref="proTable" title="人员管理" :columns="columns" :request-api="userManagePersonnelApi.page">
-      <!-- 表格 header 按钮 -->
-      <template #tableHeader="scope">
-        <s-button v-auth="userPerButtonCode.add" suffix="人员" />
-        <s-button
-          v-auth="userPerButtonCode.delete"
-          type="danger"
-          :opt="FormOptEnum.DELETE"
-          plain
-          suffix="人员"
-          :disabled="!scope.isSelected"
-          @click="onDelete(scope.selectedListIds, '删除所选人员')"
-        />
+  <div class="main-box">
+    <TreeFilter
+      ref="treeFilter"
+      label="personSetName"
+      id="personSetId"
+      width="300px"
+      :show-all="false"
+      :request-api="userManageClassManageApi.page"
+      @change="changeTreeFilter"
+    >
+      <template v-slot:header>
+        <s-button suffix="班级" @click="addClass(FormOptEnum.ADD)" style="margin-bottom: 15px" />
       </template>
-      <!-- 表格操作栏 -->
-      <template #operation="scope">
-        <el-space>
-          <s-button v-auth="userPerButtonCode.edit" link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" />
+      <template v-slot:label="{ row }">
+        <span class="custom-tree-node">
+          <span>{{ row.node.label }}</span>
+          <span>
+            <a @click="addClass(FormOptEnum.EDIT, row.node.data)">
+              <el-icon><Edit /></el-icon>
+            </a>
+            <a style="margin-left: 8px" @click="addDelete(row.node.data.personSetId, '删除班级')">
+              <el-icon><Delete /></el-icon>
+            </a>
+            <a style="margin-left: 8px">
+              <el-icon><Setting /></el-icon>
+            </a>
+          </span>
+        </span>
+      </template>
+    </TreeFilter>
+    <div class="table-box">
+      <ProTable ref="proTable" title="人员管理" :columns="columns" :request-api="userManagePersonnelApi.page">
+        <!-- 表格 header 按钮 -->
+        <template #tableHeader="scope">
+          <s-button v-auth="userPerButtonCode.add" suffix="人员" @click="onOpen(FormOptEnum.ADD)" />
           <s-button
             v-auth="userPerButtonCode.delete"
-            link
+            type="danger"
             :opt="FormOptEnum.DELETE"
-            @click="onDelete([scope.row.id], `删除【${scope.row.account}】人员`)"
+            plain
+            suffix="人员"
+            :disabled="!scope.isSelected"
+            @click="onDelete(scope.selectedListIds, '删除所选人员')"
           />
-        </el-space>
-      </template>
-    </ProTable>
-
+        </template>
+        <!-- 表格操作栏 -->
+        <template #operation="scope">
+          <el-space>
+            <s-button v-auth="userPerButtonCode.edit" link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" />
+            <s-button
+              v-auth="userPerButtonCode.delete"
+              link
+              :opt="FormOptEnum.DELETE"
+              @click="onDelete([scope.row.id], `删除【${scope.row.account}】人员`)"
+            />
+            <el-dropdown @command="handleCommand">
+              <el-link type="primary" :underline="false" :icon="ArrowDown"> 更多 </el-link>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item :command="command(scope.row, cmdEnum.DeleteFace)">{{ cmdEnum.DeleteFace }}</el-dropdown-item>
+                  <el-dropdown-item :command="command(scope.row, cmdEnum.UnderpantsUnBinding)">{{ cmdEnum.UnderpantsUnBinding }}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-space>
+        </template>
+      </ProTable>
+    </div>
+    <!-- 人员新增/编辑表单 -->
+    <Form ref="formRef" />
+    <!-- 班级新增/编辑表单 -->
+    <FormClass ref="formRefC" />
     <!-- 预览头像 -->
     <el-dialog v-model="visible" title="查看头像" width="830px" :before-close="handleClose">
       <div>
@@ -47,14 +90,19 @@
   </div>
 </template>
 <script setup lang="tsx" name="SysUserPersonnel">
-import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel } from "@/api";
+import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel,userManageClassManageApi } from "@/api";
 import { useHandleData } from "@/hooks/useHandleData";
 import { FormOptEnum } from "@/enums";
+import Form from "./components/form/index.vue";
+import FormClass from "./components/formClass/index.vue";
+import { ArrowDown } from "@element-plus/icons-vue";
 import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
+import TreeFilter from "@/components/TreeFilter/index.vue";
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const faceUrl = ref('');
-const visible = ref(false); //是否显示表单
+const visible = ref(false); //是否显示人员表单
 const proTable = ref<ProTableInstance>();
+const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null);
 // 表格配置项
 const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [
   {
@@ -62,7 +110,7 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [
     label: "头像",
     render: scope => {
       return (
-        <img src={scope.row.faces[0].faceUrl} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px' alt=''/>
+        <img src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px' alt=''/>
       );
     }
   },
@@ -79,10 +127,10 @@ const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [
     label: "年龄"
   },
   {
-    prop: "personSetName",
-    label: "所属分组",
+    prop: "name",
+    label: "所属班级",
     render: scope => {
-      return scope.row.personSets[0].personSetName
+        return scope.row.personSets.length > 0 ? scope.row.personSets[0].name : ''
     }
   },
   { prop: "operation", label: "操作", width: 250, fixed: "right" }
@@ -96,32 +144,112 @@ const handleClose = () => {
   visible.value = false;
 };
 
+
+// 人员表单引用
+const formRef = ref<InstanceType<typeof Form> | null>(null);
+  // 班级表单引用
+const formRefC = ref<InstanceType<typeof FormClass> | null>(null);
 /**
  * 打开表单
  * @param opt  操作类型
  * @param record  记录
  */
- function onOpen(opt: FormOptEnum, record: {} | SysUser.SysUserInfo = {}) {
+function onOpen(opt: FormOptEnum, record: {} | SysUserPersonnel.SysUserPerInfo = {}) {
   formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
 }
 
+/**
+ * 打开班级表单
+ * @param opt  操作类型
+ * @param record  记录
+ */
 
+ function addClass(opt: FormOptEnum, record: {} | SysUserPersonnel.ClassPage = {}) {
+  formRefC.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
+}
+/**
+ * 班级删除
+ * @param ids  id数组
+ */
+ async function addDelete(id: string[],msg: string) {
+  // 二次确认 => 请求api => 刷新表格
+  await useHandleData(userManageClassManageApi.delete, { id }, msg);
+  RefreshTable(); //刷新表格
+}
 
 /**
- * 删除
+ * 人员删除
  * @param ids  id数组
  */
  async function onDelete(ids: string[], msg: string) {
   // 二次确认 => 请求api => 刷新表格
   await useHandleData(userManagePersonnelApi.delete, { ids }, msg);
-  proTable.value?.refresh(); //刷新表格
+  RefreshTable(); //刷新表格
+}
+
+// 刷新表格
+const RefreshTable = () => {
+  proTable.value?.refresh();
+  treeFilter.value?.refresh(); //刷新树形筛选器
 }
 
 
+/** 更多下拉菜单命令枚举 */
+enum cmdEnum {
+  DeleteFace = "删除人脸",
+  UnderpantsUnBinding = "底库解绑"
+}
+/** 下拉菜单参数接口 */
+interface Command {
+  row: SysUserPersonnel.SysUserPerInfo;
+  command: cmdEnum;
+}
+
+/**配置command的参数 */
+function command(row: SysUserPersonnel.SysUserPerInfo, command: cmdEnum): Command {
+  return {
+    row: row,
+    command: command
+  };
+}
+/**
+ * 更多下拉菜单点击事件
+ * @param command
+ */
+ function handleCommand(command: Command) {
+  switch (command.command) {
+    case cmdEnum.DeleteFace:
+      break
+    case cmdEnum.UnderpantsUnBinding:
+      break;
+  }
+}
+
+/** 部门切换 */
+function changeTreeFilter(val: number | string) {
+  console.log(proTable.value,".........",val);
+  
+  proTable.value!.pageable.pageNum = 1;
+  // if (val != "") {
+  //   // 如果传入的val不为空，则将val赋值给initParam.parentId
+  //   initParam.orgId = val;
+  // } else {
+  //   // 否则将initParam.parentId赋值为0
+  //   initParam.orgId = 0;
+  // }
+}
 </script>
 <style scoped lang="scss">
 .table-box {
   width: 100%;
   height: 100%;
 }
+.custom-tree-node {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 8px;
+  font-size: 14px;
+}
 </style>