From b4a58f3e083b9c80781979a9d6b7411f22c65091 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 18 Apr 2025 17:15:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E5=87=BA=E5=85=A5=E5=9C=BA?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.js                             |  14 +
 .../components/AddEditPersonnel.vue           | 613 ++++++++++------
 .../components/add-edit-form.vue              | 187 ++---
 src/views/personnel-manage/index.vue          | 203 +++---
 .../personnelEntryAndExit.vue                 | 675 +++++++++---------
 5 files changed, 965 insertions(+), 727 deletions(-)

diff --git a/src/api/common.js b/src/api/common.js
index 267c3de7..2ae951d8 100644
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -24,3 +24,17 @@ export const getBelongToBdAPI = () => {
         method: 'post',
     })
 }
+// 获取班组
+export const getGroupListAPI = () => {
+    return request({
+        url: '/smart-site/ttSysTeam/querySelected',
+        method: 'post',
+    })
+}
+// 获取单位
+export const getCompanyListAPI = () => {
+    return request({
+        url: '/smart-site/unit/querySelected',
+        method: 'post',
+    })
+}
diff --git a/src/views/personnel-manage/components/AddEditPersonnel.vue b/src/views/personnel-manage/components/AddEditPersonnel.vue
index 34f08af6..2e7a9f74 100644
--- a/src/views/personnel-manage/components/AddEditPersonnel.vue
+++ b/src/views/personnel-manage/components/AddEditPersonnel.vue
@@ -1,242 +1,413 @@
 <template>
-  <!-- 新增修改弹框 -->
-  <div>
-    <el-row :gutter="50">
-      <el-col :span="12">
+    <!-- 新增修改弹框 -->
+    <div>
         <el-form label-width="auto" :model="addOrEditForm" :rules="formRules" ref="addOrEditFormRef">
-          <el-form-item label="姓名：" prop="userName">
-            <el-input
-              v-model="addOrEditForm.userName"
-              clearable
-              placeholder="请输入姓名"
-              maxlength="30"
-              style="width: 100%"
-            />
-          </el-form-item>
-          <el-form-item label="身份证号：" prop="idCar">
-            <el-input
-              v-model="addOrEditForm.idCar"
-              clearable
-              placeholder="请输入身份证号"
-              maxlength="18"
-              style="width: 100%"
-            />
-          </el-form-item>
-          <el-form-item label="入场工程：" prop="unitId">
-            <el-select v-model="addOrEditForm.unitId" placeholder="请选择入场工程" style="width: 100%">
-              <el-option v-for="item in unitList" :key="item.id" :label="item.unitName" :value="item.id" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="联系方式：" prop="userPhone">
-            <el-input
-              v-model="addOrEditForm.userPhone"
-              placeholder="请输入联系方式"
-              clearable
-              maxlength="11"
-              style="width: 100%"
-            />
-          </el-form-item>
-          <el-form-item label="工种/岗位：" prop="workType">
-            <el-input
-              v-model="addOrEditForm.workType"
-              placeholder="请输入工种/岗位"
-              clearable
-              maxlength="30"
-              style="width: 100%"
-            />
-          </el-form-item>
-          <el-form-item label="民族：" prop="nationality">
-            <el-input
-              v-model="addOrEditForm.nationality"
-              placeholder="请输入民族"
-              clearable
-              maxlength="30"
-              style="width: 100%"
-            />
-          </el-form-item>
-          <el-form-item label="是否关键人员：" prop="keyPersonnel">
-            <el-radio-group v-model="addOrEditForm.keyPersonnel">
-              <el-radio-button label="1">是</el-radio-button>
-              <el-radio-button label="0">否</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col :span="12" class="dialog-header-btn">
-        <el-upload
-          :headers="headers"
-          :action="uploadFileUrl"
-          accept="image/*"
-          :limit="1"
-          :file-list="facePhotoList"
-          list-type="picture-card"
-          :on-preview="handlePictureCardPreview"
-          :on-exceed="handleExceed"
-          :on-success="handleSuccess"
-        >
-          <div slot="tip" class="el-upload__tip" style="color: #c0c4cc; font-size: 15px">上传人脸照片</div>
-          <i class="el-icon-plus"></i>
-        </el-upload>
-      </el-col>
-    </el-row>
+            <el-form-item label="姓名：" prop="userName">
+                <el-input
+                    v-model="addOrEditForm.userName"
+                    clearable
+                    placeholder="请输入姓名"
+                    maxlength="30"
+                    style="width: 100%"
+                />
+            </el-form-item>
+            <el-form-item label="联系方式：" prop="userPhone">
+                <el-input
+                    v-model="addOrEditForm.userPhone"
+                    placeholder="请输入联系方式"
+                    clearable
+                    maxlength="11"
+                    style="width: 100%"
+                />
+            </el-form-item>
+            <el-form-item label="身份证号：" prop="idCar">
+                <el-input
+                    v-model="addOrEditForm.idCar"
+                    clearable
+                    placeholder="请输入身份证号"
+                    maxlength="18"
+                    style="width: 100%"
+                />
+            </el-form-item>
+            <el-form-item label="单位：" prop="unitId">
+                <el-select placeholder="请选择单位" style="width: 100%" v-model="addOrEditForm.unitId">
+                    <el-option v-for="item in companyList" :key="item.id" :label="item.unitName" :value="item.id" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="班组：" prop="teamId">
+                <el-select placeholder="请选择班组" style="width: 100%" v-model="addOrEditForm.teamId">
+                    <el-option v-for="item in groupList" :key="item.id" :label="item.teamName" :value="item.id" />
+                </el-select>
+            </el-form-item>
 
-    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
-      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
-    </el-dialog>
-  </div>
+            <el-form-item label="工种：" prop="workType">
+                <el-select placeholder="请选择工种" style="width: 100%" v-model="addOrEditForm.workType">
+                    <el-option
+                        :label="item.label"
+                        :value="item.value"
+                        :key="item.value"
+                        v-for="item in dict.type.work_type"
+                    />
+                </el-select>
+            </el-form-item>
+            <!-- <el-form-item label="人员状态：" prop="status">
+                <el-select placeholder="请选择人员状态" style="width: 100%" v-model="addOrEditForm.status">
+                    <el-option label="在场" value="0" />
+                    <el-option label="休息" value="1" />
+                    <el-option label="离场" value="2" />
+                </el-select>
+            </el-form-item> -->
+            <el-form-item label="性别：" prop="sex">
+                <el-select placeholder="请选择性别" style="width: 100%" v-model="addOrEditForm.sex">
+                    <el-option label="男" value="1" />
+                    <el-option label="女" value="2" />
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="年龄：" prop="age">
+                <el-input clearable placeholder="请输入年龄" style="width: 100%" v-model="addOrEditForm.age" />
+            </el-form-item>
+            <el-form-item label="人脸照片：" prop="carImage">
+                <!-- <el-upload
+                    :headers="headers"
+                    :action="uploadFileUrl"
+                    accept="image/*"
+                    :limit="1"
+                    :file-list="addOrEditForm.fileList"
+                    list-type="picture-card"
+                    :on-preview="handlePictureCardPreview"
+                    :on-exceed="handleExceed"
+                    :on-success="handleSuccess"
+                >
+                    <div slot="tip" class="el-upload__tip" style="color: #c0c4cc; font-size: 15px">上传人脸照片</div>
+                    <i class="el-icon-plus"></i>
+                </el-upload> -->
+                <el-upload
+                    :limit="1"
+                    :action="uploadFileUrl"
+                    list-type="picture-card"
+                    :file-list="addOrEditForm.fileList"
+                    :headers="headers"
+                    :on-remove="handleRemove"
+                    :on-preview="handlePreview"
+                    :on-success="handleSuccess"
+                    :before-upload="handleBeforeUpload"
+                    :show-file-list="true"
+                    :on-exceed="handleExceed"
+                >
+                    <i class="el-icon-plus"></i>
+                </el-upload>
+                <div>
+                    1、上传图片文件格式支持PNG、JPG、JPEG； <br />
+                    2、图片大小不超过10MB； <br />
+                </div>
+            </el-form-item>
+
+            <el-form-item label="岗位：" prop="postUnit">
+                <el-select placeholder="请选择岗位" style="width: 100%" v-model="addOrEditForm.postUnit">
+                    <el-option
+                        :label="item.label"
+                        :value="item.value"
+                        :key="item.value"
+                        v-for="item in dict.type.post_type"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="入场工程：" prop="proId">
+                <el-select v-model="addOrEditForm.proId" placeholder="请选择入场工程" style="width: 100%">
+                    <el-option v-for="item in unitList" :key="item.id" :label="item.unitName" :value="item.id" />
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="民族：" prop="nationality">
+                <el-input
+                    v-model="addOrEditForm.nationality"
+                    placeholder="请输入民族"
+                    clearable
+                    maxlength="30"
+                    style="width: 100%"
+                />
+            </el-form-item>
+            <el-form-item label="地址：" prop="address">
+                <el-input
+                    v-model="addOrEditForm.address"
+                    placeholder="请输入地址"
+                    clearable
+                    maxlength="30"
+                    style="width: 100%"
+                />
+            </el-form-item>
+            <!-- <el-form-item label="是否关键人员：" prop="keyPersonnel">
+                        <el-radio-group v-model="addOrEditForm.keyPersonnel">
+                            <el-radio-button label="1">是</el-radio-button>
+                            <el-radio-button label="0">否</el-radio-button>
+                        </el-radio-group>
+                    </el-form-item> -->
+        </el-form>
+
+        <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
+            <img :src="previewUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+        </el-dialog>
+    </div>
 </template>
 
 <script>
 import { getToken } from '@/utils/auth'
+import { getGroupListAPI, getCompanyListAPI } from '@/api/common.js'
 import {
-  addTtSysUser,
-  updateTtSysUserApi,
-  queryUnitListAllApi,
-  getTtSysUserByIdApi,
+    addTtSysUser,
+    updateTtSysUserApi,
+    queryUnitListAllApi,
+    getTtSysUserByIdApi,
 } from '@/api/personnel-manage/index.js'
 
 export default {
-  props: {
-    rowData: {
-      type: Object,
-      default: () => {},
+    dicts: ['post_type', 'work_type'],
+    props: {
+        rowData: {
+            type: Object,
+            default: () => {},
+        },
     },
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      dialogImageUrl: '',
-      uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
-      headers: {
-        Authorization: 'Bearer ' + getToken(),
-      },
-      row: {},
-      // 新增或修改接口
-      addOrEditForm: {
-        userName: '', // 姓名
-        idCar: '', // 身份证号
-        unitId: '', // 入场工程
-        userPhone: '', // 联系方式
-        workType: '', // 工种/岗位
-        nationality: '', // 民族
-        keyPersonnel: '0', // 是否关键人员
-        photos: '', // 人脸照片
-      },
-      facePhotoList: [], // 人脸照片列表
-      // 工程-下拉
-      unitList: [],
-      // 表单校验规则
-      formRules: {
-        userName: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
-        idCar: [
-          { required: true, message: '请输入身份证号', trigger: 'blur' },
-          {
-            pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
-            message: '请输入正确的身份证号',
-            trigger: 'blur',
-          },
-        ],
-        unitId: [{ required: true, message: '请选择入场工程', trigger: 'change' }],
-        userPhone: [
-          { required: true, message: '请输入联系方式', trigger: 'blur' },
-          {
-            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
-            message: '请输入正确的手机号',
-            trigger: 'blur',
-          },
-        ],
-        workType: [{ required: true, message: '请输入工种/岗位', trigger: 'blur' }],
-        keyPersonnel: [{ required: true, message: '请选择是否关键人员', trigger: 'change' }],
-      },
-    }
-  },
-  created() {
-    this.row = this.rowData
-    this.getProjectListAll()
-    if (!this.row.isAdd) {
-      this.getDetail()
-    }
-  },
-  methods: {
-    // 获取工程下拉
-    async getProjectListAll() {
-      try {
-        const res = await queryUnitListAllApi()
-        console.log('🚀 ~ getProjectListAll ~ res:', res)
-        if (res.code === 200) {
-          this.unitList = res.data
-        }
-      } catch (error) {
-        console.error('🚀 ~ getProjectListAll ~ error:', error)
-      }
-    },
-    // 编辑-详情
-    async getDetail() {
-      try {
-        const res = await getTtSysUserByIdApi({ id: this.row.id })
-        console.log('🚀 ~ getDetail ~ res:', res)
-        const location = window.location.origin
-        if (res.code === 200) {
-          this.addOrEditForm = res.data
-          this.facePhotoList = [
-            {
-              name: res.data.photos,
-              url: location + '/statics' + res.data.photos,
+    data() {
+        return {
+            dialogVisible: false,
+            dialogImageUrl: '',
+            uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
             },
-          ]
+            fileType: ['png', 'jpg', 'jpeg'],
+            previewUrl: '',
+            row: {},
+            // 新增或修改接口
+            addOrEditForm: {
+                userName: '', // 姓名
+                userPhone: '', // 联系方式
+                idCar: '', // 身份证号
+                teamId: '', // 班组
+                unitId: '', // 单位
+                workType: '', // 工种
+                sex: '', // 性别
+                nationality: '', // 民族
+                age: '', // 年龄
+                postUnit: '', //岗位
+                proId: '', // 入场工程
+                carImage: '', // 人脸照片
+                fileList: [],
+                address: '',
+                status: '', // 人员状态/
+            },
+            facePhotoList: [], // 人脸照片列表
+            // 工程-下拉
+            unitList: [],
+            // 表单校验规则
+            formRules: {
+                userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+                idCar: [
+                    { required: true, message: '请输入身份证号', trigger: 'blur' },
+                    {
+                        pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
+                        message: '请输入正确的身份证号',
+                        trigger: 'blur',
+                    },
+                ],
+                unitId: [{ required: true, message: '请选择单位', trigger: 'change' }],
+                teamId: [{ required: true, message: '请选择班组', trigger: 'change' }],
+                status: [{ required: true, message: '请选择人员状态', trigger: 'change' }],
+                sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
+                // nationality: [{ required: true, message: '请输入民族', trigger: 'blur' }],
+                age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
+                userPhone: [
+                    { required: true, message: '请输入联系方式', trigger: 'blur' },
+                    {
+                        pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+                        message: '请输入正确的手机号',
+                        trigger: 'blur',
+                    },
+                ],
+                workType: [{ required: true, message: '请选择工种', trigger: 'change' }],
+                keyPersonnel: [{ required: true, message: '请选择是否关键人员', trigger: 'change' }],
+                carImage: [{ required: true, message: '请上传人脸图片', trigger: 'change' }],
+            },
+
+            // 班组
+            groupList: [],
+            // 单位
+            companyList: [],
         }
-      } catch (error) {
-        console.error('🚀 ~ getDetail ~ error:', error)
-      }
     },
-    handleEdit(row) {
-      console.log('🚀 ~ handleEdit ~ :', row)
+    created() {
+        this.row = this.rowData
+        this.getProjectListAll()
+        if (!this.row.isAdd) {
+            this.getDetail()
+        }
+
+        this.getGroupAndCompanyListData()
     },
-    handleExceed(file) {
-      // 超过数量
-      this.$message.error('只能上传一张图片')
-    },
-    handleRemove(file, fileList) {
-      console.log(file, fileList)
-      this.addOrEditForm.photos = ''
-      this.facePhotoList = []
-    },
-    handlePictureCardPreview(file) {
-      console.log('🚀 ~ handlePictureCardPreview ~ file:', file)
-      // 预览
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    handleBeforeUpload(file) {},
-    handleSuccess(res, file, fileList) {
-      this.facePhotoList = fileList
-      if (res.code === 200) {
-        this.addOrEditForm.photos = res.data.name
-      }
-    },
-    // 表单提交
-    onSubmitForm() {
-      this.$refs.addOrEditFormRef.validate(async (valid) => {
-        if (valid) {
-          try {
-            console.log('🚀 ~ onSubmitForm ~ params:', this.addOrEditForm)
-            if (this.row.isAdd) {
-              addTtSysUser(this.addOrEditForm).then((res) => {
-                this.$emit('closeDialog')
-              })
-            } else {
-              this.addOrEditForm.status = 0
-              updateTtSysUserApi(this.addOrEditForm).then((res) => {
-                this.$emit('closeDialog')
-              })
+    methods: {
+        // 获取工程下拉
+        async getProjectListAll() {
+            try {
+                const res = await queryUnitListAllApi()
+                console.log('🚀 ~ getProjectListAll ~ res:', res)
+                if (res.code === 200) {
+                    this.unitList = res.data
+                    this.companyList = res.data
+                }
+            } catch (error) {
+                console.error('🚀 ~ getProjectListAll ~ error:', error)
             }
-          } catch (error) {
-            console.error('🚀 ~ onSubmitForm ~ error:', error)
-          }
-        }
-      })
+        },
+        // 编辑-详情
+        async getDetail() {
+            try {
+                const res = await getTtSysUserByIdApi({ id: this.row.id })
+                console.log('🚀 ~ getDetail ~ res:', res)
+                const location = window.location.origin
+                if (res.code === 200) {
+                    this.addOrEditForm = res.data
+                    this.addOrEditForm.fileList = [
+                        {
+                            name: res.data.photos,
+                            url: location + '/statics' + res.data.carImage,
+                        },
+                    ]
+                }
+            } catch (error) {
+                console.error('🚀 ~ getDetail ~ error:', error)
+            }
+        },
+        handleEdit(row) {
+            console.log('🚀 ~ handleEdit ~ :', row)
+        },
+        handleExceed(file) {
+            // 超过数量
+            this.$modal.msgError(`上传的人脸图片数量不能超过 1 个`)
+        },
+        handleRemove(file, fileList) {
+            this.addOrEditForm.fileList = this.addOrEditForm.fileList.filter((item) => item.uid !== file.uid)
+            this.addOrEditForm.carImage = ''
+        },
+        // handlePictureCardPreview(file) {
+        //     console.log('🚀 ~ handlePictureCardPreview ~ file:', file)
+        //     // 预览
+        //     this.dialogImageUrl = file.url
+        //     this.dialogVisible = true
+        // },
+        handleBeforeUpload(file) {
+            const isSvg = this.fileType.some((e) => file.type.includes(e))
+            if (!isSvg) {
+                this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('、')}格式的文件!`)
+                return false
+            }
+            const isLt = file.size / 1024 / 1024 < 10
+            if (!isLt) {
+                this.$modal.msgError(`背景图片大小不能超过 10 MB`)
+
+                return false
+            }
+
+            this.$modal.loading('图片正在上传，请稍候...')
+        },
+        handleSuccess(res, file, fileList) {
+            if (res.code === 200) {
+                this.addOrEditForm.carImage = res.data.name
+            } else {
+                this.addOrEditForm.fileList = []
+                this.addOrEditForm.carImage = ''
+            }
+            this.$modal.closeLoading()
+        },
+        // 预览
+        handlePreview(file) {
+            this.dialogInnerVisible = true
+            this.previewUrl = file.url
+        },
+        // 表单提交
+        onSubmitForm() {
+            this.$refs.addOrEditFormRef.validate(async (valid) => {
+                if (valid) {
+                    console.log(' this.addOrEditForm', this.addOrEditForm)
+
+                    const {
+                        userName, // 姓名
+                        userPhone, // 联系方式
+                        idCar, // 身份证号
+                        teamId, // 班组
+                        unitId, // 单位
+                        workType, // 工种
+                        sex, // 性别
+                        nationality, // 民族
+                        age, // 年龄
+                        postUnit, //岗位
+                        proId, // 入场工程
+                        carImage, // 人脸照片
+                        address,
+                        status,
+                        id,
+                    } = this.addOrEditForm
+
+                    const params = {
+                        userName, // 姓名
+                        userPhone, // 联系方式
+                        idCar, // 身份证号
+                        teamId, // 班组
+                        unitId, // 单位
+                        workType, // 工种
+                        sex, // 性别
+                        nationality, // 民族
+                        age, // 年龄
+                        postUnit, //岗位
+                        proId, // 入场工程
+                        carImage, // 人脸照片
+                        address,
+                        status,
+                    }
+
+                    // const formData = new FormData()
+                    // for(const key in params) {
+                    //     formData.append(key,params[key])
+                    // }
+                    try {
+                        console.log('🚀 ~ onSubmitForm ~ params:', this.addOrEditForm)
+                        if (this.row.isAdd) {
+                            addTtSysUser(params).then((res) => {
+                                console.log(res, '新增结果')
+
+                                if (res.code === 200) {
+                                    this.$modal.msgSuccess('新增成功')
+                                }
+                                this.$emit('closeDialog')
+                            })
+                        } else {
+                            params.id = id
+                            params.status = status
+                            updateTtSysUserApi(params).then((res) => {
+                                console.log(res, '修改结果')
+                                this.$emit('closeDialog')
+                                if (res.code === 200) {
+                                    this.$modal.msgSuccess('修改成功')
+                                }
+                            })
+                        }
+                    } catch (error) {
+                        console.error('🚀 ~ onSubmitForm ~ error:', error)
+                    }
+                }
+            })
+        },
+
+        // 获取班组和单位
+        async getGroupAndCompanyListData() {
+            const { data: res } = await getGroupListAPI()
+            this.groupList = res
+            // const result = await getCompanyListAPI()
+            // console.log('result', result)
+            // this.companyList = result
+        },
     },
-  },
 }
 </script>
 
diff --git a/src/views/personnel-manage/components/add-edit-form.vue b/src/views/personnel-manage/components/add-edit-form.vue
index fe9dd86d..d115edaf 100644
--- a/src/views/personnel-manage/components/add-edit-form.vue
+++ b/src/views/personnel-manage/components/add-edit-form.vue
@@ -1,38 +1,43 @@
 <template>
-  <!-- 新增修改弹框 -->
-  <div>
-    <el-form label-width="auto" :model="addOrEditForm" :rules="formRules" ref="addOrEditFormRef">
-      <el-form-item label="班组名称：" prop="teamName">
-        <el-input v-model="addOrEditForm.teamName" clearable placeholder="请输入班组名称" style="width: 100%" />
-      </el-form-item>
-      <el-form-item label="班组类型：" prop="teamType">
-        <el-select v-model="addOrEditForm.teamType" placeholder="请选择班组类型" style="width: 100%">
-          <el-option
-            v-for="item in teamTypeList"
-            :key="item.dictValue"
-            :label="item.dictLabel"
-            :value="item.dictValue"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="班组长：" prop="teamForeman">
-        <el-select v-model="addOrEditForm.teamForeman" placeholder="请选择班组长" style="width: 100%">
-          <el-option v-for="item in teamForemanList" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="备注：" prop="remark">
-        <el-input
-          type="textarea"
-          v-model="addOrEditForm.remark"
-          maxlength="300"
-          show-word-limit
-          :autosize="{ minRows: 5 }"
-          placeholder="请输入备注"
-          style="width: 100%"
-        />
-      </el-form-item>
-    </el-form>
-  </div>
+    <!-- 新增修改弹框 -->
+    <div>
+        <el-form label-width="auto" :model="addOrEditForm" :rules="formRules" ref="addOrEditFormRef">
+            <el-form-item label="班组名称：" prop="teamName">
+                <el-input v-model="addOrEditForm.teamName" clearable placeholder="请输入班组名称" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="班组类型：" prop="teamType">
+                <el-select v-model="addOrEditForm.teamType" placeholder="请选择班组类型" style="width: 100%">
+                    <el-option
+                        v-for="item in teamTypeList"
+                        :key="item.dictValue"
+                        :label="item.dictLabel"
+                        :value="item.dictValue"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="班组长：" prop="teamForeman">
+                <el-select v-model="addOrEditForm.teamForeman" placeholder="请选择班组长" style="width: 100%">
+                    <el-option
+                        v-for="item in teamForemanList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="备注：" prop="remark">
+                <el-input
+                    type="textarea"
+                    v-model="addOrEditForm.remark"
+                    maxlength="300"
+                    show-word-limit
+                    :autosize="{ minRows: 5 }"
+                    placeholder="请输入备注"
+                    style="width: 100%"
+                />
+            </el-form-item>
+        </el-form>
+    </div>
 </template>
 
 <script>
@@ -40,66 +45,66 @@ import { listData } from '@/api/system/dict/data.js'
 import { getTtSysUserList } from '@/api/personnel-manage/index.js'
 
 export default {
-  props: {
-    onSubmitDialog: {
-      type: Function,
-      default: () => {},
+    props: {
+        onSubmitDialog: {
+            type: Function,
+            default: () => {},
+        },
     },
-  },
-  data() {
-    return {
-      // 新增或修改接口
-      addOrEditForm: {
-        teamName: '', // 班组名称
-        teamType: '', // 班组类型
-        teamForeman: '', // 班组长
-        remark: '', // 备注
-      },
-      // 班组类型-下拉
-      teamTypeList: [],
-      // 班组长-下拉
-      teamForemanList: [],
-      // 表单校验规则
-      formRules: {
-        teamName: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
-      },
-    }
-  },
-  created() {
-    console.log('🚀 ~ created ~ this.addOrEdit:')
-    this.getTeamType()
-    this.getTeamForeman()
-  },
-  methods: {
-    // 获取班组
-    async getTeamType() {
-      const res = await listData({ dictType: 'team_type' })
-      console.log('🚀 ~ getTeamType ~ res:', res)
-      this.teamTypeList = res.rows
-      console.log('🚀 ~ getTeamType ~ this.teamTypeList:', this.teamTypeList)
-    },
-    // 获取班组长
-    async getTeamForeman() {
-      const res = await getTtSysUserList()
-      console.log('🚀 ~ getTeamForeman ~ res:', res)
-      this.teamForemanList = res.data
-      console.log('🚀 ~ getTeamForeman ~ this.teamForemanList:', this.teamForemanList)
-    },
-    // 表单提交
-    onSubmitForm() {
-      this.$refs.addOrEditFormRef.validate(async (valid) => {
-        if (valid) {
-          try {
-            // const res = await addAPI(this.addOrEditForm)
-
-            this.$emit('closeDialog')
-          } catch (error) {
-            console.error('🚀 ~ onSubmitForm ~ error:', error)
-          }
+    data() {
+        return {
+            // 新增或修改接口
+            addOrEditForm: {
+                teamName: '', // 班组名称
+                teamType: '', // 班组类型
+                teamForeman: '', // 班组长
+                remark: '', // 备注
+            },
+            // 班组类型-下拉
+            teamTypeList: [],
+            // 班组长-下拉
+            teamForemanList: [],
+            // 表单校验规则
+            formRules: {
+                teamName: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
+            },
         }
-      })
     },
-  },
+    created() {
+        console.log('🚀 ~ created ~ this.addOrEdit:')
+        this.getTeamType()
+        this.getTeamForeman()
+    },
+    methods: {
+        // 获取班组
+        async getTeamType() {
+            const res = await listData({ dictType: 'team_type' })
+            console.log('🚀 ~ getTeamType ~ res:', res)
+            this.teamTypeList = res.rows
+            console.log('🚀 ~ getTeamType ~ this.teamTypeList:', this.teamTypeList)
+        },
+        // 获取班组长
+        async getTeamForeman() {
+            const res = await getTtSysUserList()
+            console.log('🚀 ~ getTeamForeman ~ res:', res)
+            this.teamForemanList = res.data
+            console.log('🚀 ~ getTeamForeman ~ this.teamForemanList:', this.teamForemanList)
+        },
+        // 表单提交
+        onSubmitForm() {
+            this.$refs.addOrEditFormRef.validate(async (valid) => {
+                if (valid) {
+                    try {
+                        // const res = await addAPI(this.addOrEditForm)
+
+                        this.$emit('closeDialog')
+                    } catch (error) {
+                        console.error('🚀 ~ onSubmitForm ~ error:', error)
+                    }
+                }
+            })
+        },
+    },
 }
 </script>
 
diff --git a/src/views/personnel-manage/index.vue b/src/views/personnel-manage/index.vue
index 7dd41150..d0fc9833 100644
--- a/src/views/personnel-manage/index.vue
+++ b/src/views/personnel-manage/index.vue
@@ -1,25 +1,29 @@
 <template>
-  <!-- 项目管理 -->
-  <div class="app-container">
-    <TableModel ref="tableModel" :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI">
-      <template slot="btn">
-        <el-button size="mini" type="" icon="el-icon-download" @click="handleExport()">导出</el-button>
-        <el-button size="mini" plain type="primary" icon="el-icon-plus" @click="handleAddData()">新增</el-button>
-      </template>
-      <template slot="handle" slot-scope="{ data }">
-        <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEditData(data)">修改</el-button>
-        <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data.id)">移除</el-button>
-      </template>
-    </TableModel>
+    <!-- 项目管理 -->
+    <div class="app-container">
+        <TableModel ref="tableModel" :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI">
+            <template slot="btn">
+                <el-button size="mini" type="" icon="el-icon-download" @click="handleExport()">导出</el-button>
+                <el-button size="mini" plain type="primary" icon="el-icon-plus" @click="handleAddData()"
+                    >新增</el-button
+                >
+            </template>
+            <template slot="handle" slot-scope="{ data }">
+                <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEditData(data)">修改</el-button>
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data.id)"
+                    >移除</el-button
+                >
+            </template>
+        </TableModel>
 
-    <el-dialog :title="dialogConfig.outerTitle" :visible.sync="dialogConfig.outerVisible" width="40%">
-      <AddEditForm v-if="dialogConfig.outerVisible" ref="addEditForm" @closeDialog="closeDialog" />
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogConfig.outerVisible = false">取 消</el-button>
-        <el-button type="primary" @click="onSubmitDialog">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
+        <el-dialog :title="dialogConfig.outerTitle" :visible.sync="dialogConfig.outerVisible" width="40%">
+            <AddEditForm v-if="dialogConfig.outerVisible" ref="addEditForm" @closeDialog="closeDialog" />
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogConfig.outerVisible = false">取 消</el-button>
+                <el-button type="primary" @click="onSubmitDialog">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
@@ -29,79 +33,98 @@ import AddEditForm from './components/add-edit-form'
 import { formLabel, columnsList } from './config'
 import { getProjectListAPI } from '@/api/personnel-manage/index.js'
 export default {
-  components: {
-    TableModel,
-    DialogModel,
-    AddEditForm,
-  },
-  data() {
-    return {
-      formLabel, // 表单配置
-      columnsList, // 表格配置
-      dialogConfig: {
-        outerTitle: '新建项目',
-        outerVisible: false,
-      }, // 弹框配置
-      getProjectListAPI, // 表格数据请求接口
-      rowData: {},
-    }
-  },
-  methods: {
-    handleExport() {
-      console.log('导出')
-      this.$message({
-        type: 'warning',
-        message: '导出功能开发中，敬请期待！',
-      })
-      return
-      try {
-        let fileName = `人员出入场_${new Date().getTime()}.xLsx`
-        let url = ''
-        const params = { ...this.queryParams }
-        console.log('🚀 ~ 导出 ~ params:', params)
-        this.download(url, params, fileName)
-      } catch (error) {
-        console.log('导出数据失败', error)
-      }
+    components: {
+        TableModel,
+        DialogModel,
+        AddEditForm,
     },
-    handleAddData() {
-      console.log('新增')
-      this.rowData = { isAdd: true }
-      this.dialogConfig.outerTitle = '新增班组'
-      this.dialogConfig.outerVisible = true
+    data() {
+        return {
+            formLabel, // 表单配置
+            columnsList, // 表格配置
+            dialogConfig: {
+                outerTitle: '新建项目',
+                outerVisible: false,
+            }, // 弹框配置
+            getProjectListAPI, // 表格数据请求接口
+            rowData: {},
+        }
     },
-    handleEditData() {
-      this.rowData = { isAdd: false, ...data }
-      this.dialogConfig.outerTitle = '编辑班组'
-      this.dialogConfig.outerVisible = true
+    methods: {
+        handleExport() {
+            console.log('导出')
+            this.$message({
+                type: 'warning',
+                message: '导出功能开发中，敬请期待！',
+            })
+            return
+            try {
+                let fileName = `人员出入场_${new Date().getTime()}.xLsx`
+                let url = ''
+                const params = { ...this.queryParams }
+                console.log('🚀 ~ 导出 ~ params:', params)
+                this.download(url, params, fileName)
+            } catch (error) {
+                console.log('导出数据失败', error)
+            }
+        },
+        handleAddData() {
+            console.log('新增')
+            this.rowData = { isAdd: true }
+            this.dialogConfig.outerTitle = '新增班组'
+            this.dialogConfig.outerVisible = true
+        },
+        handleEditData() {
+            this.rowData = { isAdd: false, ...data }
+            this.dialogConfig.outerTitle = '编辑班组'
+            this.dialogConfig.outerVisible = true
+        },
+        handleDeleteData(id) {
+            console.log('🚀 ~ handleDeleteData ~ id:', id)
+            this.$confirm('是否删除该数据?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }).then(async () => {
+                // const params = {  }
+                // const res = await
+                this.$refs.tableModel.getTableList()
+                this.$message({
+                    type: 'success',
+                    message: '删除成功!',
+                })
+            })
+        },
+        /** 关闭外侧弹框 */
+        closeDialog() {
+            this.dialogConfig.outerVisible = false
+            this.$refs.tableModel.getTableList()
+        },
+        // 表单提交-弹框
+        onSubmitDialog() {
+            this.$refs.addEditForm.onSubmitForm()
+        },
     },
-    handleDeleteData(id) {
-      console.log('🚀 ~ handleDeleteData ~ id:', id)
-      this.$confirm('是否删除该数据?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }).then(async () => {
-        // const params = {  }
-        // const res = await
-        this.$refs.tableModel.getTableList()
-        this.$message({
-          type: 'success',
-          message: '删除成功!',
-        })
-      })
-    },
-    /** 关闭外侧弹框 */
-    closeDialog() {
-      this.dialogConfig.outerVisible = false
-      this.$refs.tableModel.getTableList()
-    },
-    // 表单提交-弹框
-    onSubmitDialog() {
-      this.$refs.addEditForm.onSubmitForm()
-    },
-  },
 }
 </script>
 
-<style></style>
+<style scoped lang="scss">
+::v-deep .el-dialog {
+    display: flex !important;
+    flex-direction: column !important;
+    margin: 0 !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    max-height: 100vh !important;
+    min-height: 100vh;
+    .el-dialog__body {
+        flex: 1;
+        overflow-y: scroll !important;
+    }
+    .dialog-content {
+        padding: 20px;
+    }
+}
+</style>
diff --git a/src/views/personnel-manage/personnelEntryAndExit.vue b/src/views/personnel-manage/personnelEntryAndExit.vue
index 5f97b4fd..b68ad4dc 100644
--- a/src/views/personnel-manage/personnelEntryAndExit.vue
+++ b/src/views/personnel-manage/personnelEntryAndExit.vue
@@ -1,342 +1,367 @@
 <template>
-  <!-- 基础页面 -->
-  <div class="app-container">
-    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
-      <el-form-item prop="keyWord">
-        <el-input
-          class="w240"
-          v-model="queryParams.keyWord"
-          placeholder="请输入关键字"
-          clearable
-          @keyup.enter.native="handleQuery"
+    <!-- 基础页面 -->
+    <div class="app-container">
+        <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
+            <el-form-item prop="keyWord">
+                <el-input
+                    class="w240"
+                    v-model="queryParams.keyWord"
+                    placeholder="请输入关键字"
+                    clearable
+                    @keyup.enter.native="handleQuery"
+                />
+            </el-form-item>
+            <!-- <el-form-item prop="status">
+                <el-select class="w240" v-model="queryParams.status" placeholder="请选择状态" clearable>
+                    <el-option v-for="item in statusOpts" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item> -->
+
+            <!-- 表单按钮 -->
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+                <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    v-hasPermi="['tt:sysUser:export']"
+                    type=""
+                    plain
+                    icon="el-icon-download"
+                    size="mini"
+                    @click="handleExport"
+                    >导出</el-button
+                >
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table :data="tableList" fit highlight-current-row style="width: 100%" border>
+            <el-table-column
+                type="index"
+                width="55"
+                label="序号"
+                align="center"
+                :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
+            />
+            <el-table-column
+                v-for="(column, index) in tableColumns"
+                show-overflow-tooltip
+                :key="index"
+                :label="column.label"
+                :prop="column.prop"
+                align="center"
+            >
+                <!-- 插槽 -->
+                <template v-slot="{ row }" v-if="column.prop == 'status'">
+                    <el-tag v-if="row.status == 0" size="mini" type="success">在场</el-tag>
+                    <el-tag v-else-if="row.status == 1" size="mini" type="warning">休息</el-tag>
+                    <el-tag v-else-if="row.status == 2" size="mini" type="danger">离场</el-tag>
+                </template>
+                <template v-slot="{ row }" v-else-if="column.prop == 'keyPersonnel'">
+                    <span v-if="row.keyPersonnel == 1">是</span>
+                    <span v-else-if="row.keyPersonnel == 0">否</span>
+                </template>
+                <template v-slot="{ row }" v-else-if="column.prop == 'photos'">
+                    <el-image
+                        v-if="row.photos"
+                        style="width: 30px; height: 30px; border-radius: 5px"
+                        :src="row.photos"
+                        fit="cover"
+                        :preview-src-list="[row.photos]"
+                    ></el-image>
+                    <span v-else>未上传</span>
+                </template>
+            </el-table-column>
+            <!-- 操作 -->
+            <el-table-column label="操作" align="center" width="280">
+                <template slot-scope="{ row }">
+                    <el-button type="primary" size="mini" icon="el-icon-right" @click="handleDetails(row)"
+                        >出入场记录</el-button
+                    >
+                    <el-dropdown size="mini">
+                        <el-button size="mini" type="" icon="el-icon-arrow-down">更多</el-button>
+                        <el-dropdown-menu slot="dropdown" style="width: 90px; text-align: center">
+                            <el-dropdown-item
+                                ><span @click="handleEdit(row)" style="color: #409eff"
+                                    ><i class="el-icon-edit"></i>修改</span
+                                ></el-dropdown-item
+                            >
+                            <el-dropdown-item v-show="row.status == 0"
+                                ><span @click="handleStatus(row, 1)" style="color: #e6a23c"
+                                    ><i class="el-icon-s-tools"></i>休息</span
+                                ></el-dropdown-item
+                            >
+                            <el-dropdown-item v-show="row.status == 1"
+                                ><span @click="handleStatus(row, 0)" style="color: #e6a23c"
+                                    ><i class="el-icon-s-tools"></i>结束休息</span
+                                ></el-dropdown-item
+                            >
+                            <el-dropdown-item v-show="row.status == 2"
+                                ><span @click="handleEdit(row)" style="color: #67c23a"
+                                    ><i class="el-icon-s-tools"></i>入场</span
+                                ></el-dropdown-item
+                            >
+                            <el-dropdown-item v-show="row.status != 2"
+                                ><span @click="handleStatus(row, 2)" style="color: #f56c6c"
+                                    ><i class="el-icon-s-tools"></i>出场</span
+                                ></el-dropdown-item
+                            >
+                            <el-dropdown-item
+                                ><span @click="handleDelete(row)" style="color: #f56c6c"
+                                    ><i class="el-icon-delete"></i>删除</span
+                                ></el-dropdown-item
+                            >
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
         />
-      </el-form-item>
-      <el-form-item prop="status">
-        <el-select class="w240" v-model="queryParams.status" placeholder="请选择状态" clearable>
-          <el-option v-for="item in statusOpts" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
 
-      <!-- 表单按钮 -->
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
-        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          v-hasPermi="['tt:sysUser:export']"
-          type=""
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          >导出</el-button
-        >
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table :data="tableList" fit highlight-current-row style="width: 100%" border>
-      <el-table-column
-        type="index"
-        width="55"
-        label="序号"
-        align="center"
-        :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
-      />
-      <el-table-column
-        v-for="(column, index) in tableColumns"
-        show-overflow-tooltip
-        :key="index"
-        :label="column.label"
-        :prop="column.prop"
-        align="center"
-      >
-        <!-- 插槽 -->
-        <template v-slot="{ row }" v-if="column.prop == 'status'">
-          <el-tag v-if="row.status == 0" size="mini" type="success">在场</el-tag>
-          <el-tag v-else-if="row.status == 1" size="mini" type="warning">休息</el-tag>
-          <el-tag v-else-if="row.status == 2" size="mini" type="danger">离场</el-tag>
-        </template>
-        <template v-slot="{ row }" v-else-if="column.prop == 'keyPersonnel'">
-          <span v-if="row.keyPersonnel == 1">是</span>
-          <span v-else-if="row.keyPersonnel == 0">否</span>
-        </template>
-        <template v-slot="{ row }" v-else-if="column.prop == 'photos'">
-          <el-image
-            v-if="row.photos"
-            style="width: 30px; height: 30px; border-radius: 5px"
-            :src="row.photos"
-            fit="cover"
-            :preview-src-list="[row.photos]"
-          ></el-image>
-          <span v-else>未上传</span>
-        </template>
-      </el-table-column>
-      <!-- 操作 -->
-      <el-table-column label="操作" align="center" width="280">
-        <template slot-scope="{ row }">
-          <el-button type="primary" size="mini" icon="el-icon-right" @click="handleDetails(row)">出入场记录</el-button>
-          <el-dropdown size="mini">
-            <el-button size="mini" type="" icon="el-icon-arrow-down">更多</el-button>
-            <el-dropdown-menu slot="dropdown" style="width: 90px; text-align: center">
-              <el-dropdown-item
-                ><span @click="handleEdit(row)" style="color: #409eff"
-                  ><i class="el-icon-edit"></i>修改</span
-                ></el-dropdown-item
-              >
-              <el-dropdown-item v-show="row.status == 0"
-                ><span @click="handleStatus(row, 1)" style="color: #e6a23c"
-                  ><i class="el-icon-s-tools"></i>休息</span
-                ></el-dropdown-item
-              >
-              <el-dropdown-item v-show="row.status == 1"
-                ><span @click="handleStatus(row, 0)" style="color: #e6a23c"
-                  ><i class="el-icon-s-tools"></i>结束休息</span
-                ></el-dropdown-item
-              >
-              <el-dropdown-item v-show="row.status == 2"
-                ><span @click="handleEdit(row)" style="color: #67c23a"
-                  ><i class="el-icon-s-tools"></i>入场</span
-                ></el-dropdown-item
-              >
-              <el-dropdown-item v-show="row.status != 2"
-                ><span @click="handleStatus(row, 2)" style="color: #f56c6c"
-                  ><i class="el-icon-s-tools"></i>出场</span
-                ></el-dropdown-item
-              >
-              <el-dropdown-item
-                ><span @click="handleDelete(row)" style="color: #f56c6c"
-                  ><i class="el-icon-delete"></i>删除</span
-                ></el-dropdown-item
-              >
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 弹框 -->
-    <el-dialog title="人员信息" :visible.sync="dialogVisible" width="50%">
-      <AddEditPersonnel
-        v-if="dialogVisible"
-        ref="dialogForm"
-        @closeDialog="closeDialog"
-        :rowData="rowData"
-      ></AddEditPersonnel>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
-      </span>
-    </el-dialog>
-    <el-dialog title="出入场记录" :visible.sync="dialogDetails" width="50%">
-      <OutInDetails v-if="dialogDetails" ref="dialogDetails" :rowData="rowData"></OutInDetails>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogDetails = false">关 闭</el-button>
-      </span>
-    </el-dialog>
-  </div>
+        <!-- 弹框 -->
+        <el-dialog title="人员信息" :visible.sync="dialogVisible" width="70%">
+            <AddEditPersonnel
+                v-if="dialogVisible"
+                ref="dialogForm"
+                @closeDialog="closeDialog"
+                :rowData="rowData"
+            ></AddEditPersonnel>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="dialogConfirm">确 定</el-button>
+            </span>
+        </el-dialog>
+        <el-dialog title="出入场记录" :visible.sync="dialogDetails" width="50%">
+            <OutInDetails v-if="dialogDetails" ref="dialogDetails" :rowData="rowData"></OutInDetails>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogDetails = false">关 闭</el-button> 
+            </span>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
-import { getTtSysUserListApi, updateTtSysUserStatusApi, deleteTtSysUserApi } from '@/api/personnel-manage/index.js'
-import AddEditPersonnel from './components/AddEditPersonnel'
+import { getToken } from '@/utils/auth'
 import OutInDetails from './components/OutInDetails'
+import AddEditPersonnel from './components/AddEditPersonnel'
+import { getTtSysUserListApi, updateTtSysUserStatusApi, deleteTtSysUserApi } from '@/api/personnel-manage/index.js'
 
 export default {
-  components: {
-    AddEditPersonnel,
-    OutInDetails,
-  },
-  data() {
-    return {
-      showSearch: true,
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        keyWord: '', // 关键字
-        work: '', // 工种
-        status: '', // 工程状态
-      },
-      total: 0, // 总条数
-      statusOpts: [
-        { label: '在场', value: 0 },
-        { label: '休息', value: 1 },
-        { label: '离场', value: 2 },
-      ], // 工程状态
-      // 表头
-      tableColumns: [
-        { label: '姓名', prop: 'userName' },
-        { label: '身份证号', prop: 'idCar' },
-        { label: '联系方式', prop: 'userPhone' },
-        { label: '民族', prop: 'nationality' },
-        { label: '工种/岗位', prop: 'workType' },
-        { label: '所在工程', prop: 'unitName' },
-        { label: '是否关键人员', prop: 'keyPersonnel' },
-        { label: '人员状态', prop: 'status' },
-        { label: '人脸照片', prop: 'photos' },
-      ],
-      // 表格数据
-      tableList: [],
-      dialogVisible: false,
-      dialogDetails: false,
-      rowData: {},
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    // 查询
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
+    components: {
+        AddEditPersonnel,
+        OutInDetails,
     },
-    // 重置
-    handleReset() {
-      this.queryParams.pageNum = 1
-      this.queryParams.pageSize = 10
-      this.$refs.queryForm.resetFields()
-      this.getList()
-    },
-    // 获取列表
-    async getList() {
-      console.log('列表-查询', this.queryParams)
-      const loading = this.$loading({ text: '加载中...' })
-      const location = window.location.origin
-      // 获取当前访问地址
-      try {
-        const params = { ...this.queryParams }
-        const res = await getTtSysUserListApi(params)
-        console.log('🚀 ~ 获取列表 ~ res:', res)
-        this.tableList = res.rows
-        this.total = res.total
-        if (this.tableList.length > 0) {
-          this.tableList.forEach((item) => {
-            item.photos = location + '/statics' + item.photos
-          })
+    data() {
+        return {
+            showSearch: true,
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                keyWord: '', // 关键字
+                // work: '', // 工种
+                // status: '', // 工程状态
+            },
+            total: 0, // 总条数
+            statusOpts: [
+                { label: '在场', value: 0 },
+                { label: '休息', value: 1 },
+                { label: '离场', value: 2 },
+            ], // 工程状态
+            // 表头
+            tableColumns: [
+                { label: '姓名', prop: 'userName' },
+                { label: '身份证号', prop: 'idCar' },
+                { label: '联系方式', prop: 'userPhone' },
+                { label: '民族', prop: 'nationality' },
+                { label: '岗位', prop: 'postUnit' },
+                { label: '工种', prop: 'workTypeName' },
+                { label: '单位', prop: 'unitName' },
+                // { label: '是否关键人员', prop: 'keyPersonnel' },
+                // { label: '人员状态', prop: 'status' },
+                { label: '人脸照片', prop: 'photos' },
+            ],
+            // 表格数据
+            tableList: [],
+            dialogVisible: false,
+            dialogDetails: false,
+            rowData: {},
         }
-        loading.close()
-      } catch (error) {
-        console.log('🚀 ~ 获取列表 ~ error:', error)
-        this.tableList = []
-        this.total = 0
-        loading.close()
-      }
     },
-    handleAdd() {
-      console.log('新增')
-      this.rowData = { isAdd: true }
-      this.dialogVisible = true
+    created() {
+        this.getList()
     },
-    // 出入场记录
-    handleDetails(row) {
-      console.log('出入场记录', row)
-      this.rowData = { ...row }
-      this.dialogDetails = true
+    methods: {
+        // 查询
+        handleQuery() {
+            this.queryParams.pageNum = 1
+            this.getList()
+        },
+        // 重置
+        handleReset() {
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.$refs.queryForm.resetFields()
+            this.getList()
+        },
+        // 获取列表
+        async getList() {
+            console.log('列表-查询', this.queryParams)
+            // const loading = this.$loading({ text: '加载中...' })
+            const location = window.location.origin
+            // 获取当前访问地址
+            try {
+                const params = { ...this.queryParams }
+                const res = await getTtSysUserListApi(params)
+                console.log('🚀 ~ 获取列表 ~ res:', res)
+                this.tableList = res.rows
+                this.total = res.total
+                if (this.tableList.length > 0) {
+                    this.tableList.forEach((item) => {
+                        item.photos = `http://192.168.0.60:38080/file/statics${item.carImage}?fileToken=${getToken()}`
+                    })
+                }
+                console.log(this.tableList, ' this.tableList')
+                // loading.close()
+            } catch (error) {
+                console.log('🚀 ~ 获取列表 ~ error:', error)
+                this.tableList = []
+                this.total = 0
+                // loading.close()
+            }
+        },
+        handleAdd() {
+            console.log('新增')
+            this.rowData = { isAdd: true }
+            this.dialogVisible = true
+        },
+        // 出入场记录
+        handleDetails(row) {
+            console.log('出入场记录', row)
+            this.rowData = { ...row }
+            this.dialogDetails = true
+        },
+        // 编辑
+        handleEdit(row) {
+            console.log('编辑', row)
+            this.rowData = { isAdd: false, ...row }
+            this.dialogVisible = true
+            this.$nextTick(() => {
+                this.$refs.dialogForm.handleEdit(row)
+            })
+        },
+        // 变更状态
+        handleStatus(row, type) {
+            console.log('休息', row)
+            let msg = ''
+            if (type == 0) {
+                msg =
+                    '<span style="font-weight: bold">是否确定设置结束休息?</span><br /><span>设置人员状态: 结束休息? 状态改为在场状态</span>'
+            } else if (type == 1) {
+                msg =
+                    '<span style="font-weight: bold">是否确定设置休息?</span><br /><span>设置人员状态: 开始休息? 状态改为休息状态</span>'
+            } else if (type == 2) {
+                msg =
+                    '<span style="font-weight: bold">是否确定出场?</span><br /><span>出场自动解绑工程, 请确认操作</span>'
+            }
+            this.$confirm('', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                message: msg,
+                dangerouslyUseHTMLString: true,
+                type: 'warning',
+            }).then(async () => {
+                const params = { id: row.id, status: type }
+                try {
+                    const res = await updateTtSysUserStatusApi(params)
+                    this.$message({
+                        type: 'success',
+                        message: '操作成功!',
+                    })
+                    this.getList()
+                } catch (error) {
+                    console.log('🚀 ~ handleStatus ~ error:', error)
+                }
+            })
+        },
+        // 删除
+        handleDelete(row) {
+            console.log('删除', row)
+            this.$confirm('是否确定删除?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }).then(async () => {
+                const params = { id: row.id }
+                try {
+                    const res = await deleteTtSysUserApi(params)
+                    this.$message({
+                        type: 'success',
+                        message: '删除成功!',
+                    })
+                    this.getList()
+                } catch (error) {
+                    console.log('🚀 ~ handleDelete ~ error:', error)
+                }
+            })
+        },
+        // 导出数据
+        handleExport() {
+            try {
+                let fileName = `人员出入场_${new Date().getTime()}.xLsx`
+                let url = 'smart-site/ttSysUser/ttSysUserExport'
+                const params = this.queryParams.status ? { status: this.queryParams.status } : {}
+                // console.log('🚀 ~ 导出 ~ params:', params)
+                this.download(url, params, fileName)
+            } catch (error) {
+                console.log('导出数据失败', error)
+            }
+        },
+        // 弹框确认
+        dialogConfirm() {
+            console.log('dialogConfirm')
+            this.$refs.dialogForm.onSubmitForm()
+        },
+        // 关闭弹框
+        closeDialog() {
+            this.dialogVisible = false
+            this.getList()
+        },
     },
-    // 编辑
-    handleEdit(row) {
-      console.log('编辑', row)
-      this.rowData = { isAdd: false, ...row }
-      this.dialogVisible = true
-      this.$nextTick(() => {
-        this.$refs.dialogForm.handleEdit(row)
-      })
-    },
-    // 变更状态
-    handleStatus(row, type) {
-      console.log('休息', row)
-      let msg = ''
-      if (type == 0) {
-        msg =
-          '<span style="font-weight: bold">是否确定设置结束休息?</span><br /><span>设置人员状态: 结束休息? 状态改为在场状态</span>'
-      } else if (type == 1) {
-        msg =
-          '<span style="font-weight: bold">是否确定设置休息?</span><br /><span>设置人员状态: 开始休息? 状态改为休息状态</span>'
-      } else if (type == 2) {
-        msg = '<span style="font-weight: bold">是否确定出场?</span><br /><span>出场自动解绑工程, 请确认操作</span>'
-      }
-      this.$confirm('', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        message: msg,
-        dangerouslyUseHTMLString: true,
-        type: 'warning',
-      }).then(async () => {
-        const params = { id: row.id, status: type }
-        try {
-          const res = await updateTtSysUserStatusApi(params)
-          this.$message({
-            type: 'success',
-            message: '操作成功!',
-          })
-          this.getList()
-        } catch (error) {
-          console.log('🚀 ~ handleStatus ~ error:', error)
-        }
-      })
-    },
-    // 删除
-    handleDelete(row) {
-      console.log('删除', row)
-      this.$confirm('是否确定删除?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }).then(async () => {
-        const params = { id: row.id }
-        try {
-          const res = await deleteTtSysUserApi(params)
-          this.$message({
-            type: 'success',
-            message: '删除成功!',
-          })
-          this.getList()
-        } catch (error) {
-          console.log('🚀 ~ handleDelete ~ error:', error)
-        }
-      })
-    },
-    // 导出数据
-    handleExport() {
-      try {
-        let fileName = `人员出入场_${new Date().getTime()}.xLsx`
-        let url = 'smart-site/ttSysUser/ttSysUserExport'
-        const params = this.queryParams.status ? { status: this.queryParams.status } : {}
-        // console.log('🚀 ~ 导出 ~ params:', params)
-        this.download(url, params, fileName)
-      } catch (error) {
-        console.log('导出数据失败', error)
-      }
-    },
-    // 弹框确认
-    dialogConfirm() {
-      console.log('dialogConfirm')
-      this.$refs.dialogForm.onSubmitForm()
-    },
-    // 关闭弹框
-    closeDialog() {
-      this.dialogVisible = false
-      this.getList()
-    },
-  },
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped lang="scss">
+::v-deep .el-dialog {
+    display: flex !important;
+    flex-direction: column !important;
+    margin: 0 !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    max-height: 100vh !important;
+    min-height: 100vh;
+    .el-dialog__body {
+        flex: 1;
+        overflow-y: scroll !important;
+    }
+    .dialog-content {
+        padding: 20px;
+    }
+}
+</style>