新增人员管理相关页面

SafeCampus.WEB/src/api/interface/sys/index.ts

@@ -20,3 +20,4 @@ export * from "./audit";
 export * from "./organization";
 export * from "./auth";
 export * from "./warn";
+export * from "./usermanage";

SafeCampus.WEB/src/api/interface/sys/usermanage/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @description
+ * @license Apache License Version 2.0
+ * @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛
+ * @remarks
+ * SimpleAdmin 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款:
+ * 1.请不要删除和修改根目录下的LICENSE文件。
+ * 2.请不要删除和修改SimpleAdmin源码头部的版权声明。
+ * 3.分发源码时候，请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin
+ * 4.基于本软件的作品，只能使用 SimpleAdmin 作为后台服务，除外情况不可商用且不允许二次分发或开源。
+ * 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为不要删除和修改作者声明。
+ * 6.任何基于本软件而产生的一切法律纠纷和责任，均于我司无关
+ * @see https://gitee.com/dotnetmoyu/SimpleAdmin
+ */
+export * from "./personnel";

SafeCampus.WEB/src/api/interface/sys/usermanage/personnel.ts

@@ -0,0 +1,47 @@
+/**
+ * @description 用户管理接口
+ * @license Apache License Version 2.0
+ * @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛
+ * @remarks
+ * SimpleAdmin 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款:
+ * 1.请不要删除和修改根目录下的LICENSE文件。
+ * 2.请不要删除和修改SimpleAdmin源码头部的版权声明。
+ * 3.分发源码时候，请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin
+ * 4.基于本软件的作品，只能使用 SimpleAdmin 作为后台服务，除外情况不可商用且不允许二次分发或开源。
+ * 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为不要删除和修改作者声明。
+ * 6.任何基于本软件而产生的一切法律纠纷和责任，均于我司无关
+ */
+
+import { ReqId, ReqPage } from "@/api";
+/**
+ * @Description: 人员管理接口
+ * @Author: syy
+ * @Date: 2023-12-15 15:34:54
+ */
+
+export namespace SysUserPersonnel {
+  /** 头像信息 */
+  export interface SysUserAvatar {
+    /** 头像 */
+    avatar?: string;
+  }
+
+  /** 用户信息 */
+  export interface SysUserPerInfo {
+    id: number | string;
+    /** 人员id */
+    personId?: string;
+    /** 姓名 */
+    name?: string;
+    /** 年龄 */
+    age?: number | string;
+    /** 性别 */
+    gender?: string;
+    /** 手机 */
+    phone?: string;
+    /** 扩展字段 */
+    extData?: string;
+    /** 人脸 */
+    // faces: Array<>;
+  }
+}

SafeCampus.WEB/src/api/modules/index.ts

@@ -19,4 +19,4 @@ export * from "./warn";
 export * from "./monitor";
 export * from "./sysconfig";
 export * from "./statistion";
-
+export * from "./usermanage";

SafeCampus.WEB/src/api/modules/usermanage/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @description
+ * @license Apache License Version 2.0
+ * @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛
+ * @remarks
+ * SimpleAdmin 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款:
+ * 1.请不要删除和修改根目录下的LICENSE文件。
+ * 2.请不要删除和修改SimpleAdmin源码头部的版权声明。
+ * 3.分发源码时候，请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin
+ * 4.基于本软件的作品，只能使用 SimpleAdmin 作为后台服务，除外情况不可商用且不允许二次分发或开源。
+ * 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为不要删除和修改作者声明。
+ * 6.任何基于本软件而产生的一切法律纠纷和责任，均于我司无关
+ * @see https://gitee.com/dotnetmoyu/SimpleAdmin
+ */
+export * from "./personnel";

SafeCampus.WEB/src/api/modules/usermanage/personnel.ts

@@ -0,0 +1,56 @@
+/**
+ * @description  单页管理接口
+ * @license Apache License Version 2.0
+ * @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛
+ * @remarks
+ * SimpleAdmin 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款:
+ * 1.请不要删除和修改根目录下的LICENSE文件。
+ * 2.请不要删除和修改SimpleAdmin源码头部的版权声明。
+ * 3.分发源码时候，请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin
+ * 4.基于本软件的作品，只能使用 SimpleAdmin 作为后台服务，除外情况不可商用且不允许二次分发或开源。
+ * 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为不要删除和修改作者声明。
+ * 6.任何基于本软件而产生的一切法律纠纷和责任，均于我司无关
+ * @see https://gitee.com/dotnetmoyu/SimpleAdmin
+ */
+import { moduleRequest } from "@/api/request";
+import { ResPage, ZJRQ, ReqId } from "@/api/interface";
+const http = moduleRequest("/business/personApi/");
+
+/**
+ * @Description: 单页管理
+ * @Author: SYY
+ * @Date: 2023-12-15 15:34:54
+ */
+const userManagePersonnelApi = {
+  /** 获取单页分页 */
+  page(params: ZJRQ.Page) {
+    return http.post("pageQuery", params);
+  },
+  /** 获取单页详情 */
+  detail(params: ReqId) {
+    return http.get("getPersionById", params);
+  },
+  /** 删除机构 */
+  delete(params: ReqId) {
+    return http.post("deletePersonD", params);
+  },
+  /** 新增机构 */
+  add(params: ZJRQ.WarnInfo) {
+    return http.post("createPersonA", params);
+  },
+  /** 修改机构 */
+  edit(params: ZJRQ.WarnInfo) {
+    return http.post("updatePersionU", params);
+  }
+};
+
+const userPerButtonCode = {
+  /** 新增人员 */
+  add: "userManagePersonnelAdd",
+  /** 删除人员 */
+  edit: "userManagePersonnelEdit",
+  /** 删除人员 */
+  delete: "userManagePersonnelDelete"
+};
+
+export { userManagePersonnelApi, userPerButtonCode };

SafeCampus.WEB/src/views/userManage/personnel/index.vue

@@ -0,0 +1,127 @@
+<!-- 
+ * @Description: 人员管理
+ * @Author: syy 
+ * @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, '删除所选人员')"
+        />
+      </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-space>
+      </template>
+    </ProTable>
+
+    <!-- 预览头像 -->
+    <el-dialog v-model="visible" title="查看头像" width="830px" :before-close="handleClose">
+      <div>
+        <img class="detailpic" :src="faceUrl" alt="" />
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="visible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="tsx" name="SysUserPersonnel">
+import { userManagePersonnelApi,userPerButtonCode,SysUserPersonnel } from "@/api";
+import { useHandleData } from "@/hooks/useHandleData";
+import { FormOptEnum } from "@/enums";
+import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const faceUrl = ref('');
+const visible = ref(false); //是否显示表单
+const proTable = ref<ProTableInstance>();
+// 表格配置项
+const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [
+  {
+    prop: "faceUrl",
+    label: "头像",
+    render: scope => {
+      return (
+        <img src={scope.row.faces[0].faceUrl} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px' alt=''/>
+      );
+    }
+  },
+  {
+    prop: "name",
+    label: "姓名"
+  },
+  {
+    prop: "personId",
+    label: "人员ID"
+  },
+  {
+    prop: "age",
+    label: "年龄"
+  },
+  {
+    prop: "personSetName",
+    label: "所属分组",
+    render: scope => {
+      return scope.row.personSets[0].personSetName
+    }
+  },
+  { prop: "operation", label: "操作", width: 250, fixed: "right" }
+];
+const viewHeadImage = (scope: any) => {
+  faceUrl.value = scope.row.faces[0].faceUrl;
+  visible.value = true
+  console.log(faceUrl);
+};
+const handleClose = () => {
+  visible.value = false;
+};
+
+/**
+ * 打开表单
+ * @param opt  操作类型
+ * @param record  记录
+ */
+ function onOpen(opt: FormOptEnum, record: {} | SysUser.SysUserInfo = {}) {
+  formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
+}
+
+
+
+/**
+ * 删除
+ * @param ids  id数组
+ */
+ async function onDelete(ids: string[], msg: string) {
+  // 二次确认 => 请求api => 刷新表格
+  await useHandleData(userManagePersonnelApi.delete, { ids }, msg);
+  proTable.value?.refresh(); //刷新表格
+}
+
+
+</script>
+<style scoped lang="scss">
+.table-box {
+  width: 100%;
+  height: 100%;
+}
+</style>