代码调试
This commit is contained in:
BianLzhaoMin
parent
64f549744f
commit
46165424bd
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
:limit="30"
|
||||
<UploadImgFormData
|
||||
:limit="1"
|
||||
:file-size="10"
|
||||
:multiple="true"
|
||||
:is-detail="formType === 2"
|
||||
:file-type="['jpg', 'png', 'jpeg']"
|
||||
:upload-file-url="uploadFileUrl"
|
||||
:file-list.sync="
|
||||
addOrEditForm.businessLicense
|
||||
"
|
||||
:is-uploaded="
|
||||
addOrEditForm.businessLicense.length >=
|
||||
2
|
||||
"
|
||||
:file-list.sync="item.fileList"
|
||||
:is-uploaded="item.fileList.length >= 1"
|
||||
/>
|
||||
|
||||
<span> {{ item.title }} </span>
|
||||
|
|
@ -407,12 +401,22 @@
|
|||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="附件" prop="phone">
|
||||
<!-- <el-input
|
||||
clearable
|
||||
placeholder="请输入附件"
|
||||
v-model="contractInfoForm.phone"
|
||||
/> -->
|
||||
<el-form-item label="附件">
|
||||
<UploadFileFormData
|
||||
:limit="3"
|
||||
:file-size="20"
|
||||
: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
|
||||
:limit="30"
|
||||
:file-size="10"
|
||||
<UploadImgFormData
|
||||
:limit="1"
|
||||
:file-size="20"
|
||||
:multiple="true"
|
||||
:is-detail="formType === 2"
|
||||
:file-list.sync="item.fileList"
|
||||
:file-type="['jpg', 'png', 'jpeg']"
|
||||
:upload-file-url="uploadFileUrl"
|
||||
:file-list.sync="
|
||||
addOrEditForm.businessLicense
|
||||
"
|
||||
:is-uploaded="
|
||||
addOrEditForm.businessLicense.length >=
|
||||
2
|
||||
"
|
||||
:is-uploaded="item.fileList.length >= 1"
|
||||
/>
|
||||
|
||||
<span> {{ item.title }} </span>
|
||||
|
|
@ -489,11 +487,21 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="附件" prop="phone">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入附件"
|
||||
v-model="salaryCardInfoForm.phone"
|
||||
<el-form-item label="附件">
|
||||
<UploadFileFormData
|
||||
:limit="3"
|
||||
:file-size="20"
|
||||
: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. 判断除了合同期限类型和工资核定方式之外的字段是否有值
|
||||
// 2. 如果全部无值则不校验，如果有值，则需要全部字段皆有值
|
||||
// if (
|
||||
// Object.values(this.contractInfoForm).every(
|
||||
// (item) => !item,
|
||||
// )
|
||||
// ) {
|
||||
// resolve()
|
||||
// } else {
|
||||
// reject(new Error('合同信息表单验证失败'))
|
||||
// }
|
||||
|
||||
// resolve()
|
||||
|
||||
console.log(
|
||||
this.idCardInfoForm,
|
||||
'idCardInfoForm 身份证信息',
|
||||
const fieldsToCheck_1 = [
|
||||
'contractCode', // 合同编号
|
||||
'contractStartDate', // 合同签订日期
|
||||
'contractStopDate', // 合同终止日期
|
||||
'wageCriterion', // 工资核定标准
|
||||
]
|
||||
const fieldsToCheck_2 = [
|
||||
'bankCardCode', // 银行卡号
|
||||
'bankName', // 银行名称
|
||||
'bankBranchName', // 银行支行名称
|
||||
]
|
||||
const status_1 = this.checkFormStatus(
|
||||
fieldsToCheck_1,
|
||||
this.contractImageList,
|
||||
)
|
||||
console.log(
|
||||
this.keyInfoForm,
|
||||
'keyInfoForm 关键信息',
|
||||
const status_2 = this.checkFormStatus(
|
||||
fieldsToCheck_2,
|
||||
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 组装参数')
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
this.$modal.msgError('该人员在场，不能删除')
|
||||
return
|
||||
}
|
||||
// if (data.einStatus === 1) {
|
||||
// this.$modal.msgError('该人员在场，不能删除')
|
||||
// return
|
||||
// }
|
||||
this.$confirm('确定删除该人员吗？', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
|
|
|||
Loading…
Reference in New Issue