代码调试

src/components/UploadFileFormData/index.vue

@@ -0,0 +1,247 @@
+<template>
+    <div>
+        <el-upload
+            action="#"
+            :limit="limit"
+            :auto-upload="false"
+            :multiple="multiple"
+            :show-file-list="true"
+            :on-error="handleError"
+            :on-exceed="handleExceed"
+            :file-list="fileListInner"
+            :on-remove="handleRemove"
+            :on-change="handleChange"
+            :before-upload="handleBeforeUpload"
+        >
+            <el-button type="text" icon="el-icon-upload"> 点击上传 </el-button>
+            <div slot="tip" class="el-upload__tip">
+                {{ uploadTip }}
+            </div>
+        </el-upload>
+    </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+export default {
+    props: {
+        // 文件列表
+        fileList: {
+            type: Array,
+            default: () => [],
+        },
+        // 上传地址
+        uploadFileUrl: {
+            type: String,
+            default: '',
+        },
+        // 文件类型
+        fileType: {
+            type: Array,
+            default: ['png', 'jpg', 'jpeg'],
+        },
+        // 文件大小
+        fileSize: {
+            type: Number,
+            default: 10,
+        },
+        // 限制数量
+        limit: {
+            type: Number,
+            default: 1,
+        },
+        // 是否多选
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否为查看详情
+        isDetail: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否上传的数量已经满足
+        isUploaded: {
+            type: Boolean,
+            default: false,
+        },
+        uploadTip: {
+            type: String,
+            default: '请上传文件',
+        },
+    },
+    data() {
+        return {
+            // addOrEditForm: {
+            //     fileList: [],
+            // },
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
+            },
+            dialogInnerVisible: false,
+            previewUrl: '',
+            deleteFileList: [],
+        }
+    },
+    methods: {
+        // 删除
+        async handleRemove(file, fileList) {
+            // if (file.response && file.response.data.length > 0) {
+            //     this.$emit('deleteFile', {
+            //         filePath: file.response.data[0].filePath,
+            //         isNew: true,
+            //     })
+            // } else {
+            //     if (file.isNew) {
+            //         this.$emit('deleteFile', {
+            //             filePath: file.filePath,
+            //             isNew: true,
+            //         })
+            //     } else {
+            //         this.$emit('deleteFile', {
+            //             filePath: file.filePath,
+            //             isNew: false,
+            //         })
+            //     }
+            // }
+            this.$emit('update:fileList', fileList)
+        },
+
+        // 预览
+        handlePreview(file) {
+            this.dialogInnerVisible = true
+            this.previewUrl = file.url
+        },
+
+        // 上传成功
+        handleSuccess(response, file, fileList) {
+            this.$emit('update:fileList', [])
+            if (response.code === 200) {
+                this.$emit('update:fileList', fileList)
+                this.$emit('uploadSuccess')
+            } else {
+                this.$modal.msgError('上传失败')
+            }
+            this.$modal.closeLoading()
+        },
+
+        // 上传失败
+        handleError() {
+            this.$modal.msgError('上传失败')
+            this.$modal.closeLoading()
+        },
+
+        // 上传前
+        handleBeforeUpload(file) {
+            // 根据file的name的后缀判断是否符合要求
+            console.log(file, 'file')
+            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            if (!isFormat) {
+                this.$modal.msgError(
+                    `文件格式不正确, 请上传${this.fileType.join(
+                        '、',
+                    )}格式的文件!`,
+                )
+                return false
+            }
+            // 判断文件大小
+            const isLt = file.size / 1024 / 1024 < this.fileSize
+            if (!isLt) {
+                this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
+                return false
+            }
+
+            this.$modal.loading('图片正在上传，请稍候...')
+            // 替换文件路径中的#号
+            const newFileName = file.name.replace(/#/g, '@')
+            const newFile = new File([file], newFileName, { type: file.type })
+
+            // 修改原始文件的name属性
+            Object.defineProperty(file, 'name', {
+                value: newFileName,
+            })
+
+            return true
+        },
+
+        // 超出限制
+        handleExceed(files, fileList) {
+            this.$modal.msgError(`上传的文件数量不能超过 ${this.limit} 个`)
+        },
+
+        // 文件发生变化
+        handleChange(file, fileList) {
+            console.log(file, fileList, 'file, fileList')
+
+            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            if (!isFormat) {
+                this.$modal.msgError(
+                    `文件格式不正确, 请上传${this.fileType.join(
+                        '、',
+                    )}格式的文件!`,
+                )
+
+                this.$emit(
+                    'update:fileList',
+                    fileList.filter((item) => item.uid !== file.uid),
+                )
+                return false
+            }
+            // 判断文件大小
+            const isLt = file.size / 1024 / 1024 < this.fileSize
+            if (!isLt) {
+                this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
+                this.$emit(
+                    'update:fileList',
+                    fileList.filter((item) => item.uid !== file.uid),
+                )
+                return false
+            }
+
+            // // 替换文件路径中的#号
+            // const newFileName = file.name.replace(/#/g, '@')
+            // const newFile = new File([file], newFileName, { type: file.type })
+
+            // // 修改原始文件的name属性
+            // Object.defineProperty(file, 'name', {
+            //     value: newFileName,
+            // })
+
+            this.$emit('update:fileList', fileList)
+        },
+    },
+
+    computed: {
+        fileListInner: {
+            get() {
+                return this.fileList
+            },
+            set(newValue) {
+                this.$emit('update:fileList', newValue)
+            },
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-upload--picture-card {
+    position: relative;
+    margin-right: 10px;
+
+    .upload-img-box {
+        position: absolute;
+        bottom: -15%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+}
+::v-deep .upload-img .el-upload--picture-card {
+    display: none;
+}
+</style>

src/views/construction-person/entry-and-exit-manage/person-entry/add-or-edit-form.vue

@@ -151,7 +151,7 @@
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                    <el-form-item label="人脸照片" prop="businessAddress">
+                    <el-form-item label="人脸照片" prop="faceImg">
                         <UploadImgFormData
                             :limit="1"
                             :file-size="10"
@@ -310,20 +310,14 @@
                                 v-for="item in contractImageList"
                                 :key="item.title"
                             >
-                                <UploadImg
+                                <UploadImgFormData
-                                    :limit="30"
+                                    :limit="1"
                                     :file-size="10"
                                     :multiple="true"
                                     :is-detail="formType === 2"
                                     :file-type="['jpg', 'png', 'jpeg']"
-                                    :upload-file-url="uploadFileUrl"
+                                    :file-list.sync="item.fileList"
-                                    :file-list.sync="
+                                    :is-uploaded="item.fileList.length >= 1"
-                                        addOrEditForm.businessLicense
-                                    "
-                                    :is-uploaded="
-                                        addOrEditForm.businessLicense.length >=
-                                        2
-                                    "
                                 />
 
                                 <span> {{ item.title }} </span>
@@ -407,12 +401,22 @@
 
             <el-row>
                 <el-col :span="24">
-                    <el-form-item label="附件" prop="phone">
+                    <el-form-item label="附件">
-                        <!-- <el-input
+                        <UploadFileFormData
-                            clearable
+                            :limit="3"
-                            placeholder="请输入附件"
+                            :file-size="20"
-                            v-model="contractInfoForm.phone"
+                            :multiple="true"
-                        /> -->
+                            uploadTip="身份证、银行卡扫描件，承诺书、劳动合同或用工协议扫描件"
+                            :file-list.sync="contractImageList[5].fileList"
+                            :file-type="[
+                                'jpg',
+                                'png',
+                                'jpeg',
+                                'pdf',
+                                'doc',
+                                'docx',
+                            ]"
+                        />
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -437,27 +441,21 @@
             </TitleTip>
             <el-row>
                 <el-col :span="24">
-                    <el-form-item label="工资卡见证照片" prop="businessLicense">
+                    <el-form-item label="工资卡见证照片">
                         <div style="display: flex; gap: 10px">
                             <div
                                 class="contract-img-box"
                                 v-for="item in bankImageList"
                                 :key="item.title"
                             >
-                                <UploadImg
+                                <UploadImgFormData
-                                    :limit="30"
+                                    :limit="1"
-                                    :file-size="10"
+                                    :file-size="20"
                                     :multiple="true"
                                     :is-detail="formType === 2"
+                                    :file-list.sync="item.fileList"
                                     :file-type="['jpg', 'png', 'jpeg']"
-                                    :upload-file-url="uploadFileUrl"
+                                    :is-uploaded="item.fileList.length >= 1"
-                                    :file-list.sync="
-                                        addOrEditForm.businessLicense
-                                    "
-                                    :is-uploaded="
-                                        addOrEditForm.businessLicense.length >=
-                                        2
-                                    "
                                 />
 
                                 <span> {{ item.title }} </span>
@@ -489,11 +487,21 @@
             </el-row>
             <el-row>
                 <el-col :span="12">
-                    <el-form-item label="附件" prop="phone">
+                    <el-form-item label="附件">
-                        <el-input
+                        <UploadFileFormData
-                            clearable
+                            :limit="3"
-                            placeholder="请输入附件"
+                            :file-size="20"
-                            v-model="salaryCardInfoForm.phone"
+                            :multiple="true"
+                            uploadTip="身份证、银行卡扫描件，承诺书、劳动合同或用工协议扫描件"
+                            :file-list.sync="bankImageList[4].fileList"
+                            :file-type="[
+                                'jpg',
+                                'png',
+                                'jpeg',
+                                'pdf',
+                                'doc',
+                                'docx',
+                            ]"
                         />
                     </el-form-item>
                 </el-col>
@@ -512,8 +520,8 @@
 </template>
 
 <script>
-import UploadImg from '@/components/UploadImg'
 import UploadImgFormData from '@/components/UploadImgFormData'
+import UploadFileFormData from '@/components/UploadFileFormData'
 import {
     addEntryPersonAPI,
     editEntryPersonAPI,
@@ -536,8 +544,8 @@ export default {
         },
     },
     components: {
-        UploadImg,
         UploadImgFormData,
+        UploadFileFormData,
     },
     data() {
         return {
@@ -588,65 +596,75 @@ export default {
                 bankBranchName: '', // 银行支行名称
             },
 
-            addOrEditForm: {
-                name: '', // 姓名
-                idNumber: '', // 身份证号
-                sex: '', // 性别
-                birthday: '', // 出生日期
-                nation: '', // 民族
-                issuingAuthority: '', // 签发机关
-                startTime: '', // 生效日期
-                endTime: '', // 失效日期
-                address: '', // 身份证住址
-                subName: '', // 分包商名称
-                legalRepresentative: '', // 法定代表人
-                phone: '', // 联系电话
-                businessAddress: '', // 营业住址
-
-                businessLicense: [], // 营业执照
-                electronicStamp: [], // 电子公章
-                idCard: [], // 身份证正反面
-                electronicSignature: [], // 电子签名/法人印章
-            },
             contractImageList: [
                 {
                     title: '人员手持合同照',
-                    imgList: [],
+                    type: 1,
+                    name: 'contract',
+                    fileList: [],
                 },
                 {
                     title: '工作内容页',
-                    imgList: [],
+                    type: 2,
+                    name: 'contract',
+                    fileList: [],
                 },
                 {
                     title: '薪酬约定页',
-                    imgList: [],
+                    type: 3,
+                    name: 'contract',
+                    fileList: [],
                 },
                 {
                     title: '本人签名页',
-                    imgList: [],
+                    type: 4,
+                    name: 'contract',
+                    fileList: [],
                 },
                 {
                     title: '其他照片',
-                    imgList: [],
+                    type: 5,
+                    name: 'contract',
+                    fileList: [],
+                },
+                {
+                    title: '附件',
+                    type: 6,
+                    name: 'contract',
+                    fileList: [],
                 },
             ],
 
             bankImageList: [
                 {
                     title: '手持银行卡、承诺书',
-                    imgList: [],
+                    type: 1,
+                    name: 'bank',
+                    fileList: [],
                 },
                 {
                     title: '银行卡照片',
-                    imgList: [],
+                    type: 2,
+                    name: 'bank',
+                    fileList: [],
                 },
                 {
                     title: '个人工资卡承诺书',
-                    imgList: [],
+                    type: 3,
+                    name: 'bank',
+                    fileList: [],
                 },
                 {
                     title: '其它照片',
-                    imgList: [],
+                    type: 4,
+                    name: 'bank',
+                    fileList: [],
+                },
+                {
+                    title: '附件',
+                    type: 5,
+                    name: 'bank',
+                    fileList: [],
                 },
             ],
 
@@ -724,6 +742,13 @@ export default {
                         trigger: 'blur',
                     },
                 ],
+                faceImg: [
+                    {
+                        required: true,
+                        message: '请上传人脸照片',
+                        trigger: 'change',
+                    },
+                ],
             },
 
             // 关键信息校验
@@ -817,6 +842,48 @@ export default {
         }
     },
     methods: {
+        // 检查表单状态
+        checkFormStatus(fieldsList, imageFList) {
+            // 检查图片是否有上传（排除附件）
+            const imageFieldsToCheck = imageFList.slice(0, -1) // 排除最后一个附件
+
+            // 检查字段是否全部为空或全部有值
+            let emptyFieldCount = 0
+            let filledFieldCount = 0
+
+            // 检查普通字段
+            fieldsList.forEach((field) => {
+                if (!this.contractInfoForm[field]) {
+                    emptyFieldCount++
+                } else {
+                    filledFieldCount++
+                }
+            })
+
+            // 检查图片字段
+            imageFieldsToCheck.forEach((item) => {
+                if (item.fileList.length === 0) {
+                    emptyFieldCount++
+                } else {
+                    filledFieldCount++
+                }
+            })
+
+            // 返回状态
+            if (
+                emptyFieldCount ===
+                fieldsList.length + imageFieldsToCheck.length
+            ) {
+                return 'all_empty' // 全部为空
+            } else if (
+                filledFieldCount ===
+                fieldsList.length + imageFieldsToCheck.length
+            ) {
+                return 'all_filled' // 全部有值
+            } else {
+                return 'partial' // 部分有值
+            }
+        },
         // 确定按钮
         onHandleConfirmAddOrEditFun() {
             console.log(this.idCardInfoForm.faceImg, 'idCardInfoForm.faceImg')
@@ -832,27 +899,24 @@ export default {
                     // 2. 身份证表单验证通过后，验证关键信息表单
                     this.$refs.keyInfoFormRef.validate(async (valid2) => {
                         if (valid2) {
-                            // 1. 判断除了合同期限类型和工资核定方式之外的字段是否有值
+                            const fieldsToCheck_1 = [
-                            // 2. 如果全部无值则不校验，如果有值，则需要全部字段皆有值
+                                'contractCode', // 合同编号
-                            // if (
+                                'contractStartDate', // 合同签订日期
-                            //     Object.values(this.contractInfoForm).every(
+                                'contractStopDate', // 合同终止日期
-                            //         (item) => !item,
+                                'wageCriterion', // 工资核定标准
-                            //     )
+                            ]
-                            // ) {
+                            const fieldsToCheck_2 = [
-                            //     resolve()
+                                'bankCardCode', // 银行卡号
-                            // } else {
+                                'bankName', // 银行名称
-                            //     reject(new Error('合同信息表单验证失败'))
+                                'bankBranchName', // 银行支行名称
-                            // }
+                            ]
-
+                            const status_1 = this.checkFormStatus(
-                            // resolve()
+                                fieldsToCheck_1,
-
+                                this.contractImageList,
-                            console.log(
-                                this.idCardInfoForm,
-                                'idCardInfoForm 身份证信息',
                             )
-                            console.log(
+                            const status_2 = this.checkFormStatus(
-                                this.keyInfoForm,
+                                fieldsToCheck_2,
-                                'keyInfoForm 关键信息',
+                                this.bankImageList,
                             )
                             console.log(
                                 this.contractInfoForm,
@@ -871,6 +935,30 @@ export default {
                                 // bmWorkerWageCard: this.salaryCardInfoForm,
                             }
 
+                            if (status_1 === 'all_filled') {
+                                params.bmWorkerContract = this.contractInfoForm
+                            }
+
+                            if (status_1 === 'partial') {
+                                this.$modal.msgError(
+                                    '请完善合同见证中的必填信息（除附件外）后再提交',
+                                )
+
+                                return reject(new Error('合同信息未完善'))
+                            }
+                            if (status_2 === 'all_filled') {
+                                params.bmWorkerWageCard =
+                                    this.salaryCardInfoForm
+                            }
+
+                            if (status_2 === 'partial') {
+                                this.$modal.msgError(
+                                    '请完善工资卡见证中的必填信息（除附件外）后再提交',
+                                )
+
+                                return reject(new Error('工资卡信息未完善'))
+                            }
+
                             const { faceImg } = this.idCardInfoForm
                             console.log(params, 'params 组装参数')
 

src/views/construction-person/entry-and-exit-manage/person-entry/index.vue

@@ -55,6 +55,7 @@
                     size="mini"
                     type="danger"
                     icon="el-icon-delete"
+                    v-if="data.einStatus === 2"
                     @click="onHandleDeletePersonEntry(data)"
                 >
                     删除
@@ -157,10 +158,10 @@ export default {
 
         // 删除
         onHandleDeletePersonEntry(data) {
-            if (data.einStatus === 1) {
+            // if (data.einStatus === 1) {
-                this.$modal.msgError('该人员在场，不能删除')
+            //     this.$modal.msgError('该人员在场，不能删除')
-                return
+            //     return
-            }
+            // }
             this.$confirm('确定删除该人员吗？', '温馨提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',