From 5284fae91c1836dbf014606ef4408c6317d74613 Mon Sep 17 00:00:00 2001 From: fengchenchen Date: Wed, 30 Mar 2022 20:24:45 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90bug=E3=80=91=20=E4=BC=9A=E5=91=98?= =?UTF-8?q?=E7=BC=B4=E8=B4=B9-=E7=BB=91=E5=AE=9A=E8=AF=81=E4=B9=A6?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E6=A0=B7=E5=BC=8F=E7=9A=84=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tools/JDate.vue | 2 +- .../PaymentInfo/modules/PaymentInfoModal.vue | 809 ++++++++++++------ 2 files changed, 549 insertions(+), 262 deletions(-) diff --git a/src/components/tools/JDate.vue b/src/components/tools/JDate.vue index 2de8619..b3c578c 100644 --- a/src/components/tools/JDate.vue +++ b/src/components/tools/JDate.vue @@ -96,6 +96,6 @@ export default { diff --git a/src/views/standardsAssociation/PaymentInfo/modules/PaymentInfoModal.vue b/src/views/standardsAssociation/PaymentInfo/modules/PaymentInfoModal.vue index 56da93f..f783bce 100644 --- a/src/views/standardsAssociation/PaymentInfo/modules/PaymentInfoModal.vue +++ b/src/views/standardsAssociation/PaymentInfo/modules/PaymentInfoModal.vue @@ -48,7 +48,7 @@ - + 缴费信息（缴费时长5年可绑定两张证书） - + @@ -370,105 +370,229 @@
绑定证书 - +
- - - - - - - - - - - - - - + +
+ + +
@@ -587,10 +711,9 @@ import { } from '@/api/standardsAssociationApi' import JUpload from '@/components/standardsAssociation/JUpload' import PreViewImgModal from './PreViewImgModal' -import {commonMemberCost,vipMemberCost} from '@api/incomePaymentsApi' +import { commonMemberCost, vipMemberCost } from '@api/incomePaymentsApi' // import { USER_INFO } from '@/store/mutation-types' // import Vue from 'vue' - export default { name: 'PaymentInfoModal', components: { @@ -605,7 +728,7 @@ export default { // 会员用户id userId: this.$store.getters.userInfo.memberId, isMember: true, - form: this.$form.createForm(this), + form: this.$form.createForm(this, { force: true }), title: '操作', width: 1000, visible: false, @@ -628,10 +751,10 @@ export default { }], validateTrigger: ['blur', 'change'] }, - invoiceRequirements:{ + invoiceRequirements: { rules: [{ required: true, message: '请选择发票' - }], + }] }, paymentType: { rules: [{ @@ -657,12 +780,7 @@ export default { ], validateTrigger: 'blur' }, - effectDate: { - rules: [{ - required: false, message: '请选择生效日期' - }] - }, - invalidDate: { rules: [{ required: false, validator: this.checkInvalidDate }] }, + paymentAmount: { rules: [ { required: true, validator: this.getByMemberTime }, @@ -671,7 +789,7 @@ export default { message: '请输入合法的金额数字，最多2位小数,11位正数' } ], validateTrigger: 'blur', - initialValue:commonMemberCost + initialValue: commonMemberCost }, paymentTime: { @@ -694,10 +812,6 @@ export default { taxNumber: { rules: [ { required: true, message: '请输入社会统一代码/税号', validateTrigger: 'blur' }, - // { - // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/, - // message: '15位、17位、18位、20位数字和大写英文字母' - // }, { pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/, message: '请输入15位、18位的社会统一代码/税号' @@ -732,12 +846,13 @@ export default { ], validateTrigger: 'blur' }, - certificatecode: { - rules: [ - { pattern: /^((?![\u4E00-\u9FA5]).)*$/, message: '不能输入汉字' } - ], - validateTrigger: 'blur' + // 证书部分 + effectDate: { + rules: [{ + required: true, validator: this.checkEffectDate + }] }, + invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] }, invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' }, invoicePhone: { rules: [{ required: true, validator: this.handleInvoicePhoneCheck }], validateTrigger: 'blur' }, depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' }, @@ -976,7 +1091,7 @@ export default { // this.cellFlag= true; this.show(record) }, - show(record) { + async show(record) { this.form.resetFields() this.model = Object.assign({}, record) this.memberId = this.model.memberId @@ -996,7 +1111,10 @@ export default { this.certificatesFlag = false } // 证书信息 - this.getCertificate(this.memberId) + // 查找证书信息 + await this.getCertificate(this.memberId) + // 证书部分选择的数据 + this.model.certificateArr = this.certificate this.model.certificate = this.certificate this.startTime = this.model.effectiveDate ? this.model.effectiveDate : '' this.endTime = this.model.invalidationDate ? this.model.invalidationDate : '' @@ -1020,10 +1138,10 @@ export default { this.checkResult = this.model.checkResult this.isCash = this.model.paymentMethod + '' this.$nextTick(() => { - this.form.setFieldsValue(pick(this.model, 'billNumber', 'companyName', 'paymentType', 'validPeriod', 'paymentTime', 'paymentAmount', 'certificatesNum', 'submissionTime', 'checkTime', 'paymentStatus', 'paymentMethod', 'paymentRecord', 'invoiceRequirements', 'headerName', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'checkMember', 'checkMemberId', 'memberId', 'certificate', 'address', 'postcode', 'serviceCharge', 'remark')) + this.form.setFieldsValue(pick(this.model, 'certificateArr', 'billNumber', 'companyName', 'paymentType', 'validPeriod', 'paymentTime', 'paymentAmount', 'certificatesNum', 'submissionTime', 'checkTime', 'paymentStatus', 'paymentMethod', 'paymentRecord', 'invoiceRequirements', 'headerName', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'checkMember', 'checkMemberId', 'memberId', 'certificate', 'address', 'postcode', 'serviceCharge', 'remark')) }) }, - edit(record) { + async edit(record) { this.form.resetFields() // 当年是否有缴费通知单 this.getNewestNotice() @@ -1050,7 +1168,9 @@ export default { this.certificatesFlag = false } // 查找证书信息 - this.getCertificate(this.memberId) + await this.getCertificate(this.memberId) + // 选择证书 数据 + this.model.certificateArr = this.certificate this.startTime = this.model.effectiveDate ? this.model.effectiveDate : '' this.endTime = this.model.invalidationDate ? this.model.invalidationDate : '' @@ -1071,9 +1191,9 @@ export default { this.paymentRecord = this.model.paymentRecord } // 缴费单号 - this.billNumber = this.model.billNumber + // this.billNumber = this.model.billNumber this.$nextTick(() => { - this.form.setFieldsValue(pick(this.model, 'billNumber', 'companyName', 'paymentType', 'validPeriod', 'paymentTime', 'paymentAmount', 'certificatesNum', 'submissionTime', 'checkTime', 'paymentStatus', 'paymentMethod', 'paymentRecord', 'invoiceRequirements', 'headerName', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'checkResult', 'checkMark', 'checkMember', 'checkMemberId', 'memberId', 'certificate', 'address', 'postcode', 'serviceCharge', 'remark')) + this.form.setFieldsValue(pick(this.model, 'certificateArr', 'billNumber', 'companyName', 'paymentType', 'validPeriod', 'paymentTime', 'paymentAmount', 'certificatesNum', 'submissionTime', 'checkTime', 'paymentStatus', 'paymentMethod', 'paymentRecord', 'invoiceRequirements', 'headerName', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'checkResult', 'checkMark', 'checkMember', 'checkMemberId', 'memberId', 'address', 'postcode', 'serviceCharge', 'remark')) }) }, close() { @@ -1107,7 +1227,7 @@ export default { console.log(1111) const that = this // 触发表单验证 - that.form.validateFields((err, values) => { + that.form.validateFields({ force: true }, (err, values) => { if (!err) { that.confirmLoading = true let httpurl = '' @@ -1135,32 +1255,21 @@ export default { this.model.certificate = [] // 这个判断是防止没有勾选而提交证书的 if (this.selectedRowKeys.length > 0) { - for (var i = 0; i < this.selectedRowKeys.length; i++) { - if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling) { - if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling === '是') { - this.dataSource[this.selectedRowKeys[i]].noticeOfFiling = 1 - } else if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling === '否') { - this.dataSource[this.selectedRowKeys[i]].noticeOfFiling = 0 - } + for (let i = 0; i < this.selectedRowKeys.length; i++) { + let opeIndex = Number(this.selectedRowKeys[i]) + let ele = values.certificateArr[opeIndex] + // 操作是否需要备案通知书 + if (ele.noticeOfFiling) { + ele.noticeOfFiling = ele.noticeOfFiling === '是' && 1 || 0 } - this.model.certificate.push(this.dataSource[this.selectedRowKeys[i]]) + // 证书类型 + ele.certificate = this.dataSource[opeIndex].certificate + ele.id = this.dataSource[opeIndex].id || '' + // 证书附件certificateImg 生效时间effectDate 失效时间invalidDate -- 字段本身存在 + this.model.certificate.push(ele) } } - // 将证书附件 生效时间 失效时间 绑定在对应的证书上 - if (this.model.certificate.length > 0) { - this.model.certificate.forEach((item, index) => { - if (index === 0) { - item.certificateImg = values.certificateImg1 - item.effectDate = values.effectDate1 - item.invalidDate = values.invalidDate1 - } - if (index === 1) { - item.certificateImg = values.certificateImg2 - item.effectDate = values.effectDate2 - item.invalidDate = values.invalidDate2 - } - }) - } + this.model.certificatesNum = this.selectedRowKeys.length const formData = Object.assign(this.model, values) if (this.typeFlag) { @@ -1170,6 +1279,8 @@ export default { } // 客户要去掉网员服务费字段，但是后端没有去掉校验，所以前端写死 formData.serviceCharge = 0 + that.confirmLoading = false + // return httpAction(httpurl, formData, method).then((res) => { if (res.success) { that.$message.success(res.message) @@ -1208,32 +1319,45 @@ export default { this.model.certificate = [] // 这个判断是防止没有勾选而提交证书的 if (this.selectedRowKeys.length > 0) { - for (var i = 0; i < this.selectedRowKeys.length; i++) { - if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling) { - if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling === '是') { - this.dataSource[this.selectedRowKeys[i]].noticeOfFiling = 1 - } else if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling === '否') { - this.dataSource[this.selectedRowKeys[i]].noticeOfFiling = 0 - } + for (let i = 0; i < this.selectedRowKeys.length; i++) { + let opeIndex = Number(this.selectedRowKeys[i]) + let ele = values.certificateArr[opeIndex] + // 操作是否需要备案通知书 + if (ele.noticeOfFiling) { + ele.noticeOfFiling = ele.noticeOfFiling === '是' && 1 || 0 } - this.model.certificate.push(this.dataSource[this.selectedRowKeys[i]]) + // 证书类型 + ele.certificate = this.dataSource[opeIndex].certificate + ele.id = this.dataSource[opeIndex].id || '' + // 证书附件certificateImg 生效时间effectDate 失效时间invalidDate -- 字段本身存在 + this.model.certificate.push(ele) } + // for (var i = 0; i < this.selectedRowKeys.length; i++) { + // if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling) { + // if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling === '是') { + // this.dataSource[this.selectedRowKeys[i]].noticeOfFiling = 1 + // } else if (this.dataSource[this.selectedRowKeys[i]].noticeOfFiling === '否') { + // this.dataSource[this.selectedRowKeys[i]].noticeOfFiling = 0 + // } + // } + // this.model.certificate.push(this.dataSource[this.selectedRowKeys[i]]) + // } } // 将证书附件 生效时间 失效时间 绑定在对应的证书上 - if (this.model.certificate.length > 0) { - this.model.certificate.forEach((item, index) => { - if (index === 0) { - item.certificateImg = values.certificateImg1 - item.effectDate = values.effectDate1 - item.invalidDate = values.invalidDate1 - } - if (index === 1) { - item.certificateImg = values.certificateImg2 - item.effectDate = values.effectDate2 - item.invalidDate = values.invalidDate2 - } - }) - } + // if (this.model.certificate.length > 0) { + // this.model.certificate.forEach((item, index) => { + // if (index === 0) { + // item.certificateImg = values.certificateImg1 + // item.effectDate = values.effectDate1 + // item.invalidDate = values.invalidDate1 + // } + // if (index === 1) { + // item.certificateImg = values.certificateImg2 + // item.effectDate = values.effectDate2 + // item.invalidDate = values.invalidDate2 + // } + // }) + // } this.model.certificatesNum = this.selectedRowKeys.length const formData = Object.assign(this.model, values) // 客户要去掉网员服务费字段，但是后端没有去掉校验，所以前端写死 @@ -1264,6 +1388,9 @@ export default { popupCallback(row) { this.form.setFieldsValue(pick(row, 'billNumber', 'companyName', 'paymentType', 'validPeriod', 'paymentTime', 'paymentAmount', 'certificatesNum', 'submissionTime', 'checkTime', 'paymentStatus', 'paymentMethod', 'paymentRecord', 'invoiceRequirements', 'headerName', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'checkResult', 'checkMark', 'checkMember', 'checkMemberId', 'memberId', 'certificate', 'address', 'postcode')) }, + certificateCheckChange() { + this.$forceUpdate() + }, // 根据会员id获取会员信息 loadMember() { getMemberInfoById({ id: this.memberId }).then((res) => { @@ -1309,14 +1436,18 @@ export default { if (Number(value) === 2) { // 5年 this.typeFlag = true - form.setFieldsValue({ 'paymentType': 1,'paymentAmount':vipMemberCost }) + form.setFieldsValue({ 'paymentType': 1, 'paymentAmount': vipMemberCost }) + this.$nextTick(() => { + form.setFieldsValue({ 'certificateArr': this.model.certificateArr }) + }) } else { this.typeFlag = false - form.setFieldsValue({ 'paymentType': 0 ,'paymentAmount':commonMemberCost}) + form.setFieldsValue({ 'paymentType': 0, 'paymentAmount': commonMemberCost }) } if (this.addFlag) { this.model.address = this.address this.model.postcode = this.postcode + } else { this.address = this.model.address this.postcode = this.model.postcode @@ -1368,57 +1499,39 @@ export default { }, /* 查找证书信息*/ getCertificate() { - const that = this - this.dataSource = [] - getCertificateByMemberId({ id: that.memberId }).then((res) => { - var source = [ - { - id: '', - key: 0, - index: '1', - certificate: '世界制造厂识别代号(WMI)证书', - certificate_code: '', - text: '1d81baf9b47a59afd9cee4df3731574i' - }, - { - id: '', - key: 1, - index: '2', - certificate: '企业名称代号证书', - certificate_code: '', - text: '1d81baf9b47a59afd9cee4df37315775' - } - ] - if (res.success) { - this.cellFlag = [] - this.dataSource = [] - if (this.addFlag || that.memberType === 1) { - if (res.result.length !== 0) { - this.dataSource = res.result - this.certificatesNum = res.result.length - } else { - this.dataSource = source - this.certificatesNum = 0 + return new Promise(resolve => { + const that = this + this.dataSource = [] + getCertificateByMemberId({ id: that.memberId }).then((res) => { + var source = [ + { + id: '', + key: 0, + index: '1', + certificate: '世界制造厂识别代号(WMI)证书', + certificate_code: '', + text: '1d81baf9b47a59afd9cee4df3731574i' + }, + { + id: '', + key: 1, + index: '2', + certificate: '企业名称代号证书', + certificate_code: '', + text: '1d81baf9b47a59afd9cee4df37315775' } - this.dataSource.forEach((value, index) => { - if (value.noticeOfFiling === 1) { - value.noticeOfFiling = '是' - } else if (value.noticeOfFiling === 0) { - value.noticeOfFiling = '否' - } - if (value.certificate_code) { - this.cellFlag.push(true) + ] + if (res.success) { + this.cellFlag = [] + this.dataSource = [] + if (this.addFlag || that.memberType === 1) { + if (res.result.length !== 0) { + this.dataSource = res.result + this.certificatesNum = res.result.length } else { - this.cellFlag.push(false) + this.dataSource = source + this.certificatesNum = 0 } - if (value.id) { - this.selectedRowKeys.push(value.key) - } - }) - } else { - this.dataSource = res.result - this.certificatesNum = res.result.length - if (this.certificatesNum > 0) { this.dataSource.forEach((value, index) => { if (value.noticeOfFiling === 1) { value.noticeOfFiling = '是' @@ -1433,30 +1546,61 @@ export default { if (value.id) { this.selectedRowKeys.push(value.key) } - // 回显 证书附件 生效日期 失效日期 - if (index === 0) { - this.$nextTick(() => { - this.form.setFieldsValue({ 'certificateImg1': value.certificateImg, 'effectDate1': value.effectDate, 'invalidDate1': value.invalidDate }) - }) - } - if (index === 1) { - this.$nextTick(() => { - this.form.setFieldsValue({ 'certificateImg2': value.certificateImg, 'effectDate2': value.effectDate, 'invalidDate2': value.invalidDate }) - }) - } }) } else { - this.dataSource = source + this.dataSource = res.result + this.certificatesNum = res.result.length + if (this.certificatesNum > 0) { + this.dataSource.forEach((value, index) => { + if (value.noticeOfFiling === 1) { + value.noticeOfFiling = '是' + } else if (value.noticeOfFiling === 0) { + value.noticeOfFiling = '否' + } + if (value.certificate_code) { + this.cellFlag.push(true) + } else { + this.cellFlag.push(false) + } + if (value.id) { + this.selectedRowKeys.push(value.key) + } + // 回显 证书附件 生效日期 失效日期 + if (index === 0) { + this.$nextTick(() => { + this.form.setFieldsValue({ + 'certificateImg1': value.certificateImg, + 'effectDate1': value.effectDate, + 'invalidDate1': value.invalidDate + }) + }) + } + if (index === 1) { + this.$nextTick(() => { + this.form.setFieldsValue({ + 'certificateImg2': value.certificateImg, + 'effectDate2': value.effectDate, + 'invalidDate2': value.invalidDate + }) + }) + } + }) + } else { + this.dataSource = source + } } + this.certificate = this.dataSource + } else { + this.cellFlag = [false, false] + this.dataSource = source + this.certificatesNum = 0 + this.certificate = this.dataSource } - this.certificate = this.dataSource - } else { - this.cellFlag = [false, false] - this.dataSource = source - this.certificatesNum = 0 - this.certificate = this.dataSource - } + }).finally(() => { + resolve() + }) }) + }, /* 查找审核信息*/ @@ -1570,13 +1714,139 @@ export default { handleInvoicePhoneCheck(rule, value, callback) { const reg = /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/ if (!value) { - callback('请输入电话号码') + callback(new Error('请输入电话号码')) } if (value && !reg.test(value)) { callback(new Error('请输入正确格式的电话号码')) } else { callback() } + }, + // 校验 证书识别代码 + checkCertificateCode(rule, value, callback) { + if (this.selectedRowKeys.length === 0) { + callback() + return + } + let index = rule.field.includes('1') && 1 || 0 + if (rule.field) { + let ele = this.dataSource[index].certificate_code + if (ele) { + if (!value) { + callback(new Error('请输入证书识别代码')) + return + } + let pattern = /^((?![\u4E00-\u9FA5]).)*$/ + if (!pattern.test(value)) { + callback(new Error('不能输入汉字')) + return + } + callback() + return + } else { + callback() + return + } + } + + }, + // 校验 生效日期 + checkEffectDate(rule, value, callback) { + if (this.selectedRowKeys.length === 0) { + callback() + return + } + let index = rule.field.includes('1') && 1 || 0 + if (rule.field) { + let ele = this.dataSource[index].certificate_code + if (ele) { + if (!value) { + callback(new Error('请选择生效日期')) + return + } + callback() + return + } else { + callback() + return + } + } + }, + //校验 失效日期 + checkInvalidDate(rule, value, callback) { + if (this.selectedRowKeys.length === 0) { + callback() + return + } + let index = rule.field.includes('1') && 1 || 0 + if (rule.field) { + let ele = this.dataSource[index].certificate_code + if (ele) { + if (!value) { + callback(new Error('请选择失效日期')) + return + } + let ck = this.form.getFieldValue('certificateArr[' + index + '].effectDate') + if (ck) { + if (value < ck) { + callback(new Error('失效日期不能早于生效日期')) + return + } + callback() + return + } + callback() + return + } else { + callback() + return + } + } + }, + + // 校验证书附件 + checkCertificateImg(rule, value, callback) { + if (this.selectedRowKeys.length === 0) { + callback() + return + } + let index = rule.field.includes('1') && 1 || 0 + if (rule.field) { + let ele = this.dataSource[index].certificate_code + if (ele) { + if (!value) { + callback(new Error('请上传证书附件')) + return + } + callback() + return + } else { + callback() + return + } + } + }, + // 校验 备案通知书 + checkNoticeOfFiling(rule, value, callback) { + if (this.selectedRowKeys.length === 0) { + callback() + return + } + let index = rule.field.includes('1') && 1 || 0 + if (rule.field) { + let eleIndex = this.selectedRowKeys.findIndex(tt => (tt + '') === (index + '')) + if (eleIndex > -1) { + if (!value) { + callback(new Error('请选择备案通知书')) + return + } + callback() + return + } else { + callback() + return + } + } } } } @@ -1625,15 +1895,32 @@ export default { /deep/ .ant-form-item-label { width: 145px !important; } + // 会员缴费表格的样式修改，防止缴费年限下拉框被遮挡 -.payment-table{ +.payment-table { z-index: 10; } + // 收款账户信息样式的修改 -.show-row .ant-form-item{ +.show-row .ant-form-item { margin-bottom: 0; } + /deep/ .certificate-img .ant-form-item { margin-bottom: 0px; } + +// 证书的相关信息 +.certificate-box .ant-checkbox-group { + width: 100%; +} + +.certificate-item { + position: relative; +} + +.check-row { + position: absolute; + top: 8px; +}