add:安全人员菜单

src/api/aqrf/safePersonnel.js

+import request from '@/utils/request'
+
+export function getSafePeopleInfo(params = {}) {
+  return request({
+    url: '/tab/safePeopleInfo',
+    method: 'get',
+    params
+  })
+}
+
+export default { getSafePeopleInfo }

src/router/routers.js

-import Vue from "vue";
-import Router from "vue-router";
-//import Layout from "../layout/index";
-import HomeLayout from "../layout/home";
+import Vue from 'vue'
+import Router from 'vue-router'
+// import Layout from "../layout/index";
+import HomeLayout from '../layout/home'
 
-Vue.use(Router);
+Vue.use(Router)
 
 export const constantRouterMap = [
   {
-        path: "/plus/login",
-        meta: { title: "登录login", noCache: true },
+    path: '/plus/login',
+    meta: { title: '登录login', noCache: true },
     component: (resolve) => {
-			require(["@/views/system/user/login"], resolve)
+      require(['@/views/system/user/login'], resolve)
     },
     hidden: true
   },
   {
-        path: "/404",
-		redirect: "/dashboard",
-        component: resolve => require(["@/views/features/404"], resolve),
+    path: '/404',
+    redirect: '/dashboard',
+    component: resolve => require(['@/views/features/404'], resolve),
     hidden: true
   },
   {
-        path: "/401",
-        component: resolve => require(["@/views/features/401"], resolve),
+    path: '/401',
+    component: resolve => require(['@/views/features/401'], resolve),
     hidden: true
   },
   {
-		path: "/redirect",
-		//component: Layout,
+    path: '/redirect',
+    // component: Layout,
     component: HomeLayout,
     hidden: true,
     children: [
       {
-				path: "/redirect/:path*",
-				component: resolve => require(["@/views/features/redirect"], resolve)
+        path: '/redirect/:path*',
+        component: resolve => require(['@/views/features/redirect'], resolve)
       }
     ]
   },
   {
-        path: "/",
+    path: '/',
     component: HomeLayout,
-        redirect: "/dashboard",
+    redirect: '/dashboard',
     children: [
       {
         path: 'dashboard',
@@ -49,45 +49,57 @@ export const constantRouterMap = [
         meta: { title: '主页面', icon: 'index', affix: true, noCache: true }
       }
     ]
-
   },
   {
-		path: "/user",
-		//component: Layout,
+    path: '/user',
+    // component: Layout,
     component: HomeLayout,
     hidden: true,
-		redirect: "noredirect",
+    redirect: 'noredirect',
     children: [
       {
-				path: "center",
-				component: resolve => require(["@/views/system/user/center"], resolve),
-				name: "个人中心",
-				meta: { title: "个人中心" }
+        path: 'center',
+        component: resolve => require(['@/views/system/user/center'], resolve),
+        name: '个人中心',
+        meta: { title: '个人中心' }
       }
     ]
   },
   {
-        path: "/edge/Screen",
-        meta: { title: "数据大屏", noCache: true },
+    path: '/aqrf/add-personnel',
+    component: HomeLayout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: resolve => require(['@/views/aqrf/addPersonnel'], resolve),
+        name: 'AddPersonnel',
+        meta: { title: '新增安全人员' }
+      }
+    ]
+  },
+  {
+    path: '/edge/Screen',
+    meta: { title: '数据大屏', noCache: true },
     component: (resolve) => {
-            return require(["@/views/Screen/index"], resolve)
+      return require(['@/views/Screen/index'], resolve)
     },
     hidden: true
   },
   {
-        path: "/edge/ScreenFX",
-        meta: { title: "风险数据大屏", noCache: true },
+    path: '/edge/ScreenFX',
+    meta: { title: '风险数据大屏', noCache: true },
     component: (resolve) => {
-            return require(["@/views/Screen/fx"], resolve)
+      return require(['@/views/Screen/fx'], resolve)
     },
     hidden: true
-    },
-];
+  }
+]
 
 export default new Router({
   // mode: 'hash',
-    mode:"history",
-	//base: '/mobile/',
+  mode: 'history',
+  // base: '/mobile/',
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRouterMap
-});
+})

src/views/aqrf/addPersonnel.vue

+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>新增安全人员信息</span>
+      </div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="姓名" prop="name">
+              <el-input v-model="form.name" placeholder="请输入姓名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入联系电话" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="身份证" prop="idCard">
+              <el-input v-model="form.idCard" placeholder="请输入身份证" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="性别" prop="sex">
+              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
+                <el-option label="男" value="male" />
+                <el-option label="女" value="female" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="部门" prop="deptId">
+              <treeselect
+                v-model="form.deptId"
+                :options="depts"
+                :load-options="loadDepts"
+                :normalizer="normalizer"
+                style="width: 100%"
+                placeholder="选择部门"
+                value-consists-of="LEAF_PRIORITY"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="职务" prop="job">
+              <el-input v-model="form.job" placeholder="请输入职务" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="工种" prop="workType">
+              <el-input v-model="form.workType" placeholder="请输入工种" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="职称" prop="title">
+              <el-input v-model="form.title" placeholder="请输入职称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="学历" prop="education">
+              <el-select v-model="form.education" placeholder="请选择学历" style="width: 100%">
+                <el-option label="小学" value="primary" />
+                <el-option label="初中" value="junior" />
+                <el-option label="高中" value="senior" />
+                <el-option label="大专" value="college" />
+                <el-option label="本科" value="bachelor" />
+                <el-option label="硕士" value="master" />
+                <el-option label="博士" value="doctor" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="专业" prop="major">
+              <el-input v-model="form.major" placeholder="请输入专业" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="紧急联系人" prop="emergencyContact">
+              <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="紧急联系电话" prop="emergencyPhone">
+              <el-input v-model="form.emergencyPhone" placeholder="请输入紧急联系电话" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="入职时间" prop="entryDate">
+              <el-date-picker
+                v-model="form.entryDate"
+                type="date"
+                placeholder="请选择日期"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="常住地址" prop="address">
+              <el-input v-model="form.address" placeholder="请输入常住地址" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="上传安全证书">
+          <el-upload
+            action="#"
+            list-type="picture-card"
+            :auto-upload="false"
+          >
+            <i slot="default" class="el-icon-plus" />
+          </el-upload>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSubmit">确认</el-button>
+          <el-button @click="handleCancel">关闭</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { getDepts } from '@/api/system/dept'
+
+export default {
+  name: 'AddPersonnel',
+  components: { Treeselect },
+  data() {
+    return {
+      form: {
+        name: null,
+        phone: null,
+        idCard: null,
+        sex: null,
+        deptId: null,
+        job: null,
+        workType: null,
+        title: null,
+        education: null,
+        major: null,
+        emergencyContact: null,
+        emergencyPhone: null,
+        entryDate: null,
+        address: null
+      },
+      depts: [], // 部门数据
+      rules: {
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
+        idCard: [{ required: true, message: '请输入身份证', trigger: 'blur' }],
+        deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
+        job: [{ required: true, message: '请输入职务', trigger: 'blur' }],
+        education: [{ required: true, message: '请选择学历', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    this.getDepts()
+  },
+  methods: {
+    // 数据格式化，将后端数据转换为 treeselect 需要的格式
+    normalizer(node) {
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      }
+    },
+    // 获取部门数据
+    getDepts() {
+      getDepts({ enabled: true }).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    // 动态加载子部门
+    loadDepts({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+          parentNode.children = res.content.map(function(obj) {
+            if (obj.hasChildren) {
+              obj.children = null
+            }
+            return obj
+          })
+          callback()
+        })
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // 在这里处理表单提交逻辑
+          console.log('Form submitted:', this.form)
+          this.$message.success('提交成功')
+        } else {
+          this.$message.error('请填写所有必填项')
+          return false
+        }
+      })
+    },
+    handleCancel() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: '';
+}
+.clearfix:after {
+  clear: both;
+}
+</style>

src/views/aqrf/safePersonnel.vue

+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>安全人员管理</span>
+      </div>
+      <!-- 搜索 -->
+      <div class="head-container">
+        <el-form :inline="true" :model="query" class="demo-form-inline">
+          <el-form-item label="请输入人员名称">
+            <el-input v-model="query.name" placeholder="请输入人员名称" />
+          </el-form-item>
+          <el-form-item label="入职时间">
+            <el-date-picker
+              v-model="query.dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">查询</el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="handleAdd">新增安全人员</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格 -->
+      <el-table :data="tableData" :loading="loading" style="width: 100%">
+        <el-table-column type="index" label="序号" width="60" />
+        <el-table-column prop="name" label="姓名" />
+        <el-table-column prop="sex" label="性别" />
+        <el-table-column prop="phone" label="联系方式" />
+        <el-table-column prop="deptId" label="部门" />
+        <el-table-column prop="job" label="职务" />
+        <el-table-column prop="workType" label="工种" />
+        <el-table-column prop="entryDate" label="入职时间" />
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
+            <el-button type="text" style="color: red" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        :current-page="pagination.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total"
+        style="margin-top: 20px; text-align: right"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getSafePeopleInfo } from '@/api/aqrf/safePersonnel'
+
+export default {
+  name: 'SafePersonnel',
+  data() {
+    return {
+      query: {
+        name: '',
+        dateRange: []
+      },
+      tableData: [],
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      loading: false
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.currentPage - 1, // 接口页码从0开始
+          size: this.pagination.pageSize,
+          name: this.query.name || '',
+          startDate: this.query.dateRange && this.query.dateRange[0] ? this.formatDate(this.query.dateRange[0]) : '',
+          endDate: this.query.dateRange && this.query.dateRange[1] ? this.formatDate(this.query.dateRange[1]) : ''
+        }
+
+        const response = await getSafePeopleInfo(params)
+
+        if (response && response.data) {
+          this.tableData = response.body.list || []
+          this.pagination.total = response.body.total || 0
+        } else {
+          this.tableData = []
+          this.pagination.total = 0
+        }
+      } catch (error) {
+        console.error('获取安全人员信息失败:', error)
+        this.$message.error('获取安全人员信息失败')
+        this.tableData = []
+        this.pagination.total = 0
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 格式化日期为 YYYY-MM-DD 格式
+    formatDate(date) {
+      if (!date) return ''
+      const d = new Date(date)
+      const year = d.getFullYear()
+      const month = String(d.getMonth() + 1).padStart(2, '0')
+      const day = String(d.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+    handleQuery() {
+      this.pagination.currentPage = 1
+      this.fetchData()
+    },
+    handleReset() {
+      this.query = {
+        name: '',
+        dateRange: []
+      }
+      this.handleQuery()
+    },
+    handleAdd() {
+      this.$router.push('/aqrf/add-personnel')
+    },
+    handleEdit(row) {
+      console.log('Edit:', row)
+    },
+    handleDelete(row) {
+      this.$confirm('此操作将永久删除该条目, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          console.log('Delete:', row)
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    handleSizeChange(val) {
+      this.pagination.pageSize = val
+      this.fetchData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.head-container {
+  margin-bottom: 20px;
+}
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: '';
+}
+.clearfix:after {
+  clear: both;
+}
+</style>