抽离证书弹窗组件
This commit is contained in:
dongwei
@@ -162,6 +162,43 @@
|
||||
</div>
|
||||
|
||||
<vinCertificate-modal ref="modalForm" @ok="modalFormOk"></vinCertificate-modal>
|
||||
|
||||
<!-- 查看证书-->
|
||||
<CheckCertificateModel ref="checkModalForm"></CheckCertificateModel>
|
||||
|
||||
<!-- 绑定会员 窗口-->
|
||||
<bind-member-model ref="bindMemberModelForm" @ok="modalFormOk"></bind-member-model>
|
||||
|
||||
<!-- 续费 窗口-->
|
||||
<renew-charge-model ref="renewChargeModelForm" @ok="modalFormOk"></renew-charge-model>
|
||||
|
||||
<!-- 换证 窗口-->
|
||||
<replace-ment-model ref="replaceMentModelForm" @ok="modalFormOk" @affirm="handleAffirm"></replace-ment-model>
|
||||
|
||||
<!-- 换证确认 窗口-->
|
||||
<replace-ment-affirm-model ref="replaceMentAffirmModelForm"></replace-ment-affirm-model>
|
||||
|
||||
<!-- 新建VIN证书申请 免费额度内 窗口-->
|
||||
<free-certificate-model ref="addFreeModalForm" @ok="modalFormOk"></free-certificate-model>
|
||||
|
||||
<!-- 新建VIN证书申请 付费额度内 窗口-->
|
||||
<charge-certificate-model ref="addChargeModalForm" @ok="modalFormOk"></charge-certificate-model>
|
||||
|
||||
<!-- 免费证书申请编辑 窗口-->
|
||||
<free-certificate-edit-model ref="freeCertificateEditModel" @ok="modalFormOk"></free-certificate-edit-model>
|
||||
|
||||
<!-- 免费证书申请换证 窗口-->
|
||||
<free-certificate-replace-edit-model
|
||||
ref="FreeCertificateReplaceEditModel"
|
||||
@ok="modalFormOk"
|
||||
@affirm="handleAffirm">
|
||||
</free-certificate-replace-edit-model>
|
||||
|
||||
<!-- 收费证书申请编辑 窗口-->
|
||||
<charge-certificate-edit-model ref="ChargeCertificateEditModel" @ok="modalFormOk"></charge-certificate-edit-model>
|
||||
|
||||
<!-- 证书续费编辑 窗口-->
|
||||
<renew-charge-edit-model ref="RenewChargeEditModel" @ok="modalFormOk"></renew-charge-edit-model>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -179,7 +216,17 @@ import JDictSelectTag from '../../components/standardsAssociation/JDictSelectTag
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { downloadFile, getAction, getFileAccessHttpUrl } from '@/api/memberManage'
|
||||
import { CertificateModalityEnums, CertificateStatusEnums, ChargeTypeEnums } from '../../enums/memberEnums'
|
||||
|
||||
import CheckCertificateModel from '@views/standardsAssociation/model/CheckCertificateModel'
|
||||
import BindMemberModel from '@views/standardsAssociation/model/BindMemberModel'
|
||||
import RenewChargeModel from '@views/standardsAssociation/model/RenewChargeModel'
|
||||
import ReplaceMentModel from '@views/standardsAssociation/model/ReplaceMentModel'
|
||||
import ReplaceMentAffirmModel from '@views/standardsAssociation/model/ReplaceMentAffirmModel'
|
||||
import FreeCertificateModel from '@views/standardsAssociation/model/FreeCertificateModel'
|
||||
import ChargeCertificateModel from '@views/standardsAssociation/model/ChargeCertificateModel'
|
||||
import FreeCertificateEditModel from '@views/standardsAssociation/model/FreeCertificateEditModel'
|
||||
import ChargeCertificateEditModel from '@views/standardsAssociation/model/ChargeCertificateEditModel'
|
||||
import RenewChargeEditModel from '@views/standardsAssociation/model/RenewChargeEditModel'
|
||||
import FreeCertificateReplaceEditModel from '@views/standardsAssociation/model/FreeCertificateReplaceEditModel'
|
||||
export default {
|
||||
name: 'CertificateManagement',
|
||||
mixins: [JeroListMixin, mixinDevice, RangeDateMixin, StandardListMixin],
|
||||
@@ -187,7 +234,18 @@ export default {
|
||||
JMultiSelectTag,
|
||||
JDate,
|
||||
VinCertificateModal,
|
||||
JDictSelectTag
|
||||
JDictSelectTag,
|
||||
CheckCertificateModel,
|
||||
BindMemberModel,
|
||||
RenewChargeModel,
|
||||
ReplaceMentModel,
|
||||
ReplaceMentAffirmModel,
|
||||
FreeCertificateModel,
|
||||
ChargeCertificateModel,
|
||||
FreeCertificateEditModel,
|
||||
ChargeCertificateEditModel,
|
||||
RenewChargeEditModel,
|
||||
FreeCertificateReplaceEditModel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -341,6 +399,11 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 显示换证确认 窗口
|
||||
handleAffirm() {
|
||||
this.$refs.replaceMentAffirmModelForm.title = '提交成功'
|
||||
this.$refs.replaceMentAffirmModelForm.show()
|
||||
},
|
||||
initDictConfig() {
|
||||
},
|
||||
// 授权
|
||||
@@ -369,19 +432,26 @@ export default {
|
||||
// 可申请的免费证书的个数
|
||||
let freeCount
|
||||
getAction('/vinCertificate/vinCertificate/getFreeCount').then(res => {
|
||||
console.log(res)
|
||||
if (res.success) {
|
||||
freeCount = res.result
|
||||
that.$refs.modalForm.title = '新增申请'
|
||||
that.$refs.modalForm.disableSubmit = false
|
||||
that.$refs.modalForm.freeCount = freeCount
|
||||
// that.$refs.modalForm.title = '新增申请'
|
||||
// that.$refs.modalForm.disableSubmit = false
|
||||
// that.$refs.modalForm.freeCount = freeCount
|
||||
// freeCount 为0 打开收费证书申请窗口
|
||||
if (freeCount === 0) {
|
||||
that.$refs.modalForm.pageType = 6
|
||||
// 弹出新增收费窗口操作
|
||||
that.$refs.addChargeModalForm.title = '新增申请'
|
||||
that.$refs.addChargeModalForm.add()
|
||||
} else {
|
||||
that.$refs.modalForm.pageType = 5
|
||||
// 弹出新增免费窗口操作
|
||||
// that.$refs.modalForm.pageType = 5
|
||||
that.$refs.addFreeModalForm.add()
|
||||
that.$refs.addFreeModalForm.title = '新增申请'
|
||||
that.$refs.addFreeModalForm.freeCount = freeCount
|
||||
}
|
||||
// 弹窗口操作
|
||||
that.$refs.modalForm.add()
|
||||
// // 弹窗口操作
|
||||
// that.$refs.modalForm.add()
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
@@ -389,43 +459,55 @@ export default {
|
||||
},
|
||||
// 查看证书
|
||||
handleDetail: function(record) {
|
||||
this.$refs.modalForm.title = '查看证书'
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
this.$refs.modalForm.pageType = 1
|
||||
this.$refs.modalForm.remainingTime = this.remainingTimeCount(record.certificateValidDate)
|
||||
this.$refs.modalForm.edit(record)
|
||||
this.$refs.checkModalForm.remainingTime = this.remainingTimeCount(record.certificateValidDate)
|
||||
this.$refs.checkModalForm.check(record)
|
||||
|
||||
// this.$refs.modalForm.title = '查看证书'
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// this.$refs.modalForm.pageType = 1
|
||||
// this.$refs.modalForm.remainingTime = this.remainingTimeCount(record.certificateValidDate)
|
||||
// this.$refs.modalForm.edit(record)
|
||||
},
|
||||
|
||||
// 绑定会员
|
||||
bindMember: function(record) {
|
||||
this.$refs.modalForm.title = '绑定会员'
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
// 绑定会员时使用4号窗口
|
||||
this.$refs.modalForm.pageType = 4
|
||||
// 证书id
|
||||
this.$refs.modalForm.vinId = record.id
|
||||
this.$refs.modalForm.edit(record)
|
||||
this.$refs.bindMemberModelForm.vinId = record.id
|
||||
this.$refs.bindMemberModelForm.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '绑定会员'
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// // 绑定会员时使用4号窗口
|
||||
// this.$refs.modalForm.pageType = 4
|
||||
// // 证书id
|
||||
// this.$refs.modalForm.vinId = record.id
|
||||
// this.$refs.modalForm.edit(record)
|
||||
},
|
||||
// 续费
|
||||
renewCharge: function(record) {
|
||||
// if(!(record.chargeType != 1 && record.certificateModality == 3 && record.certificateStatus == 5)){
|
||||
// return;
|
||||
// }
|
||||
this.$refs.modalForm.title = '续费'
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
// 换证显示 1是世界证书
|
||||
this.$refs.modalForm.isChangeCer = record.certificateType
|
||||
// 证书续费时使用7号窗口
|
||||
this.$refs.modalForm.pageType = 7
|
||||
this.$refs.modalForm.edit2(record)
|
||||
this.$refs.renewChargeModelForm.isChangeCer = record.certificateType
|
||||
this.$refs.renewChargeModelForm.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '续费'
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// // 换证显示 1是世界证书
|
||||
// this.$refs.modalForm.isChangeCer = record.certificateType
|
||||
// // 证书续费时使用7号窗口
|
||||
// this.$refs.modalForm.pageType = 7
|
||||
// this.$refs.modalForm.edit2(record)
|
||||
},
|
||||
// 换证
|
||||
replacement: function(record) {
|
||||
this.$refs.modalForm.title = '换证'
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
// 换证的时候使用8号窗口
|
||||
this.$refs.modalForm.pageType = 8
|
||||
this.$refs.modalForm.edit3(record)
|
||||
this.$refs.replaceMentModelForm.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '换证'
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// // 换证的时候使用8号窗口
|
||||
// this.$refs.modalForm.pageType = 8
|
||||
// this.$refs.modalForm.edit3(record)
|
||||
},
|
||||
// 编辑: 包括免费证书，收费证书，续费，换证
|
||||
handleEditRenew: function(record) {
|
||||
@@ -435,8 +517,8 @@ export default {
|
||||
// 证书是否免费 1-免费 2-付费
|
||||
record.chargeType = Number(record.chargeType)
|
||||
// 分为续证驳回和 非免费证书申请驳回 chargeType 1是免费证书 2是收费证书
|
||||
this.$refs.modalForm.title = ''
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
// this.$refs.modalForm.title = ''
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// certificateStatus --证书状态-待支付
|
||||
if (record.certificateStatus === CertificateStatusEnums.toPay.index) {
|
||||
// 免费证书
|
||||
@@ -447,55 +529,71 @@ export default {
|
||||
let freeCount
|
||||
getAction('/vinCertificate/vinCertificate/getFreeCount').then((res) => {
|
||||
freeCount = res.result
|
||||
this.$refs.modalForm.freeCountVin = freeCount + 1
|
||||
this.$refs.modalForm.title = '新增申请'
|
||||
this.$refs.modalForm.disableSubmit = false
|
||||
this.$refs.modalForm.pageType = 10
|
||||
this.$refs.modalForm.edit5(record)
|
||||
this.$refs.freeCertificateEditModel.freeCountVin = freeCount + 1
|
||||
this.$refs.freeCertificateEditModel.edit(record)
|
||||
|
||||
// this.$refs.modalForm.freeCountVin = freeCount + 1
|
||||
// this.$refs.modalForm.title = '新增申请'
|
||||
// this.$refs.modalForm.disableSubmit = false
|
||||
// this.$refs.modalForm.pageType = 10
|
||||
// this.$refs.modalForm.edit5(record)
|
||||
})
|
||||
return
|
||||
} else if (record.certificateModality === 1) {
|
||||
// 免费证书换证编辑
|
||||
this.$refs.modalForm.title = '换证'
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
// 换证的时候使用13号窗口
|
||||
this.$refs.modalForm.pageType = 13
|
||||
this.$refs.modalForm.edit8(record)
|
||||
this.$refs.FreeCertificateReplaceEditModel.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '换证'
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// // 换证的时候使用13号窗口
|
||||
// this.$refs.modalForm.pageType = 13
|
||||
// this.$refs.modalForm.edit8(record)
|
||||
}
|
||||
} else if (record.chargeType === 2 && record.certificateModality === 4) {
|
||||
// 收费证书编辑
|
||||
this.$refs.modalForm.title = '新增申请'
|
||||
this.$refs.modalForm.disableSubmit = false
|
||||
this.$refs.modalForm.pageType = 11
|
||||
this.$refs.modalForm.edit6(record)
|
||||
this.$refs.ChargeCertificateEditModel.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '新增申请'
|
||||
// this.$refs.modalForm.disableSubmit = false
|
||||
// this.$refs.modalForm.pageType = 11
|
||||
// this.$refs.modalForm.edit6(record)
|
||||
} else if (record.chargeType === 2 && record.certificateModality === 2) {
|
||||
// 续费编辑
|
||||
this.$refs.modalForm.title = '续费'
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
// 证书续费编辑时使用12号窗口
|
||||
this.$refs.modalForm.pageType = 12
|
||||
this.$refs.modalForm.edit7(record)
|
||||
this.$refs.RenewChargeEditModel.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '续费'
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// // 证书续费编辑时使用12号窗口
|
||||
// this.$refs.modalForm.pageType = 12
|
||||
// this.$refs.modalForm.edit7(record)
|
||||
} else if (record.chargeType === 2 && record.certificateModality === 1) {
|
||||
// 换证编辑
|
||||
this.$refs.modalForm.title = '换证'
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
// 换证的时候使用13号窗口
|
||||
this.$refs.modalForm.pageType = 13
|
||||
this.$refs.modalForm.edit8(record)
|
||||
// // 换证编辑
|
||||
this.$refs.FreeCertificateReplaceEditModel.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '换证'
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// // 换证的时候使用13号窗口
|
||||
// this.$refs.modalForm.pageType = 13
|
||||
// this.$refs.modalForm.edit8(record)
|
||||
}
|
||||
} else {
|
||||
// 新增证书缴费编辑窗口
|
||||
if (record.chargeType === 2 && record.certificateModality === 4 && record.certificateStatus === 6) {
|
||||
this.$refs.modalForm.title = '新增申请'
|
||||
this.$refs.modalForm.disableSubmit = false
|
||||
this.$refs.modalForm.pageType = 11
|
||||
this.$refs.modalForm.edit6(record)
|
||||
this.$refs.ChargeCertificateEditModel.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '新增申请'
|
||||
// this.$refs.modalForm.disableSubmit = false
|
||||
// this.$refs.modalForm.pageType = 11
|
||||
// this.$refs.modalForm.edit6(record)
|
||||
} else if (record.chargeType === 2 && record.certificateModality === 2 && record.certificateStatus === 6) {
|
||||
this.$refs.modalForm.title = '续费'
|
||||
this.$refs.modalForm.disableSubmit = true
|
||||
// 证书续费编辑时使用12号窗口
|
||||
this.$refs.modalForm.pageType = 12
|
||||
this.$refs.modalForm.edit7(record)
|
||||
// 续费编辑
|
||||
this.$refs.RenewChargeEditModel.edit(record)
|
||||
|
||||
// this.$refs.modalForm.title = '续费'
|
||||
// this.$refs.modalForm.disableSubmit = true
|
||||
// // 证书续费编辑时使用12号窗口
|
||||
// this.$refs.modalForm.pageType = 12
|
||||
// this.$refs.modalForm.edit7(record)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -3423,7 +3423,7 @@ export default {
|
||||
// 默认选择增值税发票
|
||||
let defaultInvoiceRequirements = 2
|
||||
this.model = Object.assign({}, this.currentMemberInfo, {invoiceRequirements: defaultInvoiceRequirements})
|
||||
// console.log(this.model, '**********')
|
||||
console.log(this.model, '**********')
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'address', 'postcode', 'companyName', 'liaisonMan', 'mobile', 'invoiceRequirements'))
|
||||
|
||||
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-row>
|
||||
<a-col :span="16">
|
||||
<a-form-item label="解绑证书" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-select
|
||||
placeholder="请选择解绑证书"
|
||||
:triggerChange="true"
|
||||
v-decorator="['unBindId',validatorRules.unBindId]"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in bindVinList"
|
||||
:title="item.certificate+'('+item.certificate_code+')'"
|
||||
:key="item.id"
|
||||
:value="item.id">
|
||||
{{ item.certificate }}({{ item.certificate_code }})
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="container">
|
||||
<label v-if="model.certificateType==1">
|
||||
确定绑定该世界制造厂识别代号（WMI）证书到用户会员吗？绑定后，原绑定证书将解绑。
|
||||
</label>
|
||||
<label v-if="model.certificateType==2">
|
||||
确定绑定该企业名称代号证书到用户会员吗？绑定后，原绑定证书将解绑。
|
||||
</label>
|
||||
<input type="hidden" v-text="vinId"/>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
<a-button @click="bind" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/memberManage'
|
||||
import { getCertificateByMemberId } from '@/api/standardsAssociationApi'
|
||||
export default {
|
||||
// 绑定会员 窗口
|
||||
name: 'BindMemberModel',
|
||||
data() {
|
||||
return {
|
||||
title: '绑定会员',
|
||||
// 绑定会员的证书id
|
||||
vinId: '',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
pageType: 4,
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
model: {},
|
||||
// 会员绑定证书数组
|
||||
bindVinList: [],
|
||||
validatorRules: {
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
edit(val) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, val)
|
||||
// 获取绑定证书数据
|
||||
this.getCertificateBindList()
|
||||
this.visible = true
|
||||
},
|
||||
/*
|
||||
* 绑定会员提交
|
||||
* */
|
||||
bind: function() {
|
||||
const that = this
|
||||
that.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
// const params = 'vinId=' + this.model.id + '&unBindId=' + values.unBindId
|
||||
const params = `vinId=${this.model.id}&unBindId=${values.unBindId}`
|
||||
that.confirmLoading = true
|
||||
getAction('/vinCertificate/vinCertificate/bind?' + params).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
this.visible = false
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 查询会员绑定证书的下拉数据
|
||||
* */
|
||||
getCertificateBindList() {
|
||||
const that = this
|
||||
getCertificateByMemberId({ id: this.model.memberId }).then(res => {
|
||||
if (res.success) {
|
||||
that.bindVinList = res.result
|
||||
} else {
|
||||
console.log(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,895 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
当前用户已使用免费制作证书权益。可付费制作其他证书。
|
||||
<a-divider orientation="left">
|
||||
申请信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
dict="certificate_type"
|
||||
v-decorator="['certificateType',validatorRules.certificateType]"
|
||||
@change="selectcertificateType"
|
||||
placeholder="请选择证书类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
placeholder="请输入证书代码"
|
||||
:maxLength="50"
|
||||
@blur="changeCode"
|
||||
v-decorator="['code',validatorRules.clientCode]"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['address',validatorRules.address]"
|
||||
placeholder=""></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['postcode',validatorRules.postcode]"
|
||||
placeholder=""></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12" v-if="selectType == 1 ">
|
||||
<a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
v-decorator="['noticeOfFiling']"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择备案通知书"
|
||||
dictCode="notice_of_filing"/>
|
||||
</a-form-item>
|
||||
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12" v-if="model.code">
|
||||
<a-form-item label="证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-decorator="['certificateImg',validatorRules.certificateImg]">
|
||||
</j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row v-if="model.code">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD"
|
||||
placeholder="请选择生效日期"
|
||||
v-decorator="['effectDate',validatorRules.effectDate]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
<span class="apply-notice">生效日期与上一周期证书的失效日期保持一致，失效日期顺延五年</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="失效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD"
|
||||
placeholder="请选择失效日期"
|
||||
v-decorator="['invalidDate',validatorRules.invalidDate]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider orientation="left">
|
||||
缴费信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
disabled
|
||||
:maxLength="50"
|
||||
v-decorator="['companyName']"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
disabled
|
||||
:maxLength="50"
|
||||
v-decorator="['liaisonMan']"
|
||||
placeholder="请输入联系人"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input disabled :maxLength="50" v-decorator="['mobile']" placeholder="请输入手机号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-decorator="['paymentMethod',validatorRules.paymentMethod]"
|
||||
@change="changePaymentMethod"
|
||||
:trigger-change="true"
|
||||
dictCode="payment_method"
|
||||
placeholder="请选择缴费方式"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 打包会员-->
|
||||
<div v-if="isWireTransfer === '2'">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:maxLength="50"
|
||||
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
|
||||
placeholder="请输入缴费金额"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="打包协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-upload
|
||||
file-type="pdf"
|
||||
file-type-error-message="请上传pdf文件"
|
||||
:multiple="false"
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-decorator="['paymentRecord',validatorRules.paymentRecordOne]"
|
||||
:trigger-change="true"></j-upload>
|
||||
<span style="color: #bfbfbf">请上传pdf文件</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<!--电汇-->
|
||||
<div v-if="isWireTransfer === '1'">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:maxLength="50"
|
||||
v-model="memberInfoPayment.paymentAmount"
|
||||
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
|
||||
placeholder="请输入缴费金额"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择缴费时间"
|
||||
v-decorator="['submissionTime',validatorRules.submissionTime]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12" v-if="isWireTransfer === '1' || memberInfoPayment.paymentMethod !== 3 ">
|
||||
<a-form-item label="缴费凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
isMultiple
|
||||
:number="2"
|
||||
bizPath="payment"
|
||||
v-decorator="['paymentRecord',validatorRules.paymentRecord]"
|
||||
v-model="memberInfoPayment.paymentRecord"></j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-model="memberInfoPayment.invoiceRequirements"
|
||||
v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
|
||||
@change="invoiceRequirementsChange"
|
||||
:trigger-change="true"
|
||||
dictCode="invoice_requirements"
|
||||
placeholder="请选择发票"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<template v-if="invoiceRequirementsFlag">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
|
||||
placeholder="请输入付款单位发票抬头"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
|
||||
placeholder="请输入社会统一代码/税号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 2021-09-23变更 增加 单位地址 电话号码 开户银行 银行账户 增值税发票的时候存在-->
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
|
||||
placeholder="请输入单位地址"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
|
||||
:trigger-change="true"
|
||||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
|
||||
placeholder="请输入电话号码"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
|
||||
placeholder="请输入开户银行"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="(e) => {e.target.value = e.target.value.trim()}"
|
||||
v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
|
||||
placeholder="请输入银行账户"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</div>
|
||||
<!--现金-->
|
||||
<div v-if="isWireTransfer === '3' ">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:maxLength="50"
|
||||
v-model="memberInfoPayment.paymentAmount"
|
||||
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
|
||||
placeholder="请输入缴费金额"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择缴费时间"
|
||||
v-decorator="['submissionTime',validatorRules.submissionTime]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-model="memberInfoPayment.invoiceRequirements"
|
||||
v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
|
||||
@change="invoiceRequirementsChange"
|
||||
:trigger-change="true"
|
||||
dictCode="invoice_requirements"
|
||||
placeholder="请选择发票"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<template v-if="invoiceRequirementsFlag">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
|
||||
placeholder="请输入付款单位发票抬头"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
|
||||
placeholder="请输入社会统一代码/税号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 2021-09-23变更 增加 单位地址 电话号码 开户银行 银行账户 增值税发票的时候存在-->
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
|
||||
placeholder="请输入单位地址"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
|
||||
:trigger-change="true"
|
||||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
|
||||
placeholder="请输入电话号码"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
|
||||
placeholder="请输入开户银行"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="(e) => {e.target.value = e.target.value.trim()}"
|
||||
v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
|
||||
placeholder="请输入银行账户"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button @click="saveChargeCertificate" type="primary">暂存</a-button>
|
||||
<a-button @click="handleRealSaveChargeCertificate" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JDate from '@comp/tools/JDate'
|
||||
import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
|
||||
import JImageUpload from '@comp/standardsAssociation/JImageUpload'
|
||||
import JUpload from '@comp/standardsAssociation/JUpload'
|
||||
import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
|
||||
import { getAction, httpAction } from '@api/memberManage'
|
||||
import pick from 'lodash.pick'
|
||||
export default {
|
||||
// 收费证书新增申申请驳回后编辑
|
||||
name: 'ChargeCertificateEditModel',
|
||||
components: {
|
||||
JDate,
|
||||
JSearchSelectTag,
|
||||
JImageUpload,
|
||||
JUpload,
|
||||
JDictSelectTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loginUserId: this.$store.getters.userInfo.memberId,
|
||||
title: '新增申请',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
pageType: 11,
|
||||
invoiceRequirementsFlag: false,
|
||||
// 当前选择是否需要发票的值，用于dom的判断 0-无 1-普通发票 2-增值税发票
|
||||
currentSelectInvoiceType: 0,
|
||||
form: this.$form.createForm(this),
|
||||
// 是否是电汇
|
||||
isWireTransfer: '1',
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
// 当前登录用户的会员信息
|
||||
currentMemberInfo: {},
|
||||
// 会员缴费信息
|
||||
memberInfoPayment: {},
|
||||
// 记录续费证书选择
|
||||
selectType: 1,
|
||||
model: {},
|
||||
validatorRules: {
|
||||
defaultRules: {
|
||||
rules: [{ required: true, message: '请选择' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
},
|
||||
companyName: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入单位全称!' },
|
||||
{ min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
mobile: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入手机!' },
|
||||
{ min: 1, max: 50, message: '手机号码不超过50个字符' },
|
||||
{ pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入证书代码!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
certificateImg: {
|
||||
rules: [
|
||||
{ required: true, message: '请上传证书文件!' }
|
||||
],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
clientCode: {
|
||||
rules: [
|
||||
{ min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
effectDate: {
|
||||
rules: [{
|
||||
required: true, message: '请选择生效日期'
|
||||
}]
|
||||
},
|
||||
invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
|
||||
certificateType: {
|
||||
rules: [{
|
||||
required: true, message: '请输入证书类型!'
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入通讯地址!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
postcode: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入邮编!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符' },
|
||||
{ pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
paymentMethod: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费方式!'
|
||||
}]
|
||||
},
|
||||
paymentAmount: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入缴费金额!'
|
||||
},
|
||||
{
|
||||
pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
|
||||
message: '请输入合法的金额数字，最多2位小数,11位正数',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
submissionTime: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费日期!'
|
||||
}]
|
||||
},
|
||||
paymentRecord: {
|
||||
rules: [{
|
||||
required: true, message: '请上传缴费凭证!'
|
||||
}]
|
||||
},
|
||||
paymentRecordOne: { rules: [{ required: true, message: '请上传打包协议' }] },
|
||||
liaisonMan: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入联系人!' },
|
||||
{ min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
invoiceRequirements: {
|
||||
rules: [{
|
||||
required: true, message: '请选择是否需要发票!'
|
||||
}]
|
||||
},
|
||||
headerName: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入付款单位发票抬头!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
taxNumber: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入社会统一代码/税号!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
|
||||
{
|
||||
// pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
|
||||
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
|
||||
// message: '15位、17位、18位、20位数字和大写英文字母',
|
||||
message: '请输入15位、18位的社会统一代码/税号',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
|
||||
invoicePhone: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{
|
||||
pattern: /^((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}$/,
|
||||
message: '请输入正确格式的电话号码',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
|
||||
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
|
||||
reasonsRenewal: {
|
||||
rules: [{
|
||||
required: true, message: '请至少选择一个换证原因!'
|
||||
}]
|
||||
},
|
||||
sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
|
||||
postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
edit(record) {
|
||||
// 获取证书类型
|
||||
this.selectType = record.certificateType
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'paymentRecord', 'id', 'certificateImg', 'address', 'postcode', 'mobile', 'liaisonMan', 'companyName', 'certificateType', 'effectDate', 'invalidDate', 'reasonsRenewal', 'noticeOfFiling', 'code',))
|
||||
})
|
||||
// 查询证书最新的缴费信息
|
||||
// 获取驳回的缴费信息
|
||||
this.memberInfoPayment = {}
|
||||
// 查询对应证书的缴费信息
|
||||
// const params = 'certificateId=' + record.id
|
||||
const params = `certificateId=${record.id}`
|
||||
getAction('/certificatePaymentInfo/getLastCertificatePayment?' + params).then((res) => {
|
||||
if (res.success) {
|
||||
this.memberInfoPayment = res.result
|
||||
this.isWireTransfer = this.memberInfoPayment.paymentMethod + ''
|
||||
// 对发票的显示 进行操作
|
||||
this.invoiceRequirementsChange(res.result.invoiceRequirements)
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.memberInfoPayment, 'submissionTime', 'paymentAmount', 'certificateType', 'headerName', 'invoiceRequirements', 'paymentMethod', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'paymentRecord', 'id', 'address', 'postcode', 'mobile', 'liaisonMan', 'companyName', 'effectDate', 'invalidDate', 'reasonsRenewal', 'code'))
|
||||
})
|
||||
} else {
|
||||
console.log(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
saveChargeCertificate: function() {
|
||||
this.handleSaveChargeCertificateOk()
|
||||
},
|
||||
// 添加 未保存收费证书信息
|
||||
handleSaveChargeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/addChargeCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.model, values)
|
||||
formData.certificateStatus = 0
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
// 添加缴费信息
|
||||
const chargeUrl = '/certificatePaymentInfo/addVinChargeInfo'
|
||||
const chargeMethod = 'post'
|
||||
const chargeFormData = Object.assign(this.memberInfoPayment, values)
|
||||
// 新增
|
||||
chargeFormData.paymentType = 0
|
||||
// 证书ID
|
||||
chargeFormData.certificateId = res.result.id
|
||||
// 缴费时长默认为 5年
|
||||
chargeFormData.paymentTime = 5
|
||||
// 4 是代表申请证书
|
||||
chargeFormData.certificateModality = 4
|
||||
// 缴费状态为 未提交状态
|
||||
chargeFormData.paymentStatus = 0
|
||||
// const certificateId = chargeFormData.certificateId
|
||||
httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
that.loadData()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 编辑后保存的 save处理
|
||||
handleRealSaveChargeCertificate() {
|
||||
this.realHandleSaveChargeCertificateOk()
|
||||
},
|
||||
|
||||
// 编辑后保存的 save处理
|
||||
realHandleSaveChargeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/addChargeCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 防止越权的注入
|
||||
formData.memberId = this.loginUserId
|
||||
// 设置提交状态为 已提交
|
||||
formData.certificateStatus = 2
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
// 添加缴费信息
|
||||
const chargeUrl = '/certificatePaymentInfo/addVinChargeInfo'
|
||||
const chargeMethod = 'post'
|
||||
const chargeFormData = Object.assign(this.memberInfoPayment, values)
|
||||
// 新增
|
||||
chargeFormData.paymentType = 0
|
||||
// 证书ID
|
||||
chargeFormData.certificateId = res.result.id
|
||||
// 缴费时长默认为 5年
|
||||
chargeFormData.paymentTime = 5
|
||||
// 4 是代表申请证书
|
||||
chargeFormData.certificateModality = 4
|
||||
// 设置缴费状态为已缴费
|
||||
chargeFormData.paymentStatus = 1
|
||||
// const certificateId = chargeFormData.certificateId
|
||||
httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
// 如果添加缴费信息没有成功，则删除已经添加的证书
|
||||
that.$message.warning(res.message)
|
||||
that.loadData()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/* 缴费方式*/
|
||||
changePaymentMethod(value) {
|
||||
// 1 是电汇 2 打包 3 是现金
|
||||
this.isWireTransfer = value
|
||||
this.form.resetFields(['paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
|
||||
if (value !== '1') {
|
||||
this.paymentMethodFlag = true
|
||||
} else {
|
||||
this.paymentMethodFlag = false
|
||||
}
|
||||
},
|
||||
// 校验是否选择 要发票
|
||||
invoiceRequirementsChange(value) {
|
||||
this.currentSelectInvoiceType = Number(value)
|
||||
if (this.currentSelectInvoiceType !== 0) {
|
||||
this.invoiceRequirementsFlag = true
|
||||
} else {
|
||||
this.invoiceRequirementsFlag = false
|
||||
}
|
||||
},
|
||||
/*
|
||||
* 续费选择换证
|
||||
* */
|
||||
selectcertificateType(val) {
|
||||
this.selectType = val
|
||||
// 记录原始的证书形式
|
||||
const originType = this.model.certificateType
|
||||
// 记录原始的证书代码
|
||||
this.form.resetFields('reasonsRenewal')
|
||||
const originCode = this.model.code
|
||||
if (val !== originType.toString()) {
|
||||
this.selectTypeDisabled = false
|
||||
this.freeCertificate.code = ''
|
||||
} else {
|
||||
this.selectTypeDisabled = true
|
||||
this.freeCertificate.code = originCode
|
||||
}
|
||||
},
|
||||
changeCode() {
|
||||
this.model.code = this.form.getFieldValue('code')
|
||||
console.log(this.model.code)
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
},
|
||||
checkInvalidDate(rule, value, callback) {
|
||||
if (value === undefined || value === '' || value == null) {
|
||||
callback(new Error('请选择失效日期'))
|
||||
}
|
||||
console.log(value + ' :' + this.checkEffectDate)
|
||||
var ck = this.checkEffectDate
|
||||
if (!(ck === null || ck === undefined || ck === '')) {
|
||||
if (value < this.checkEffectDate) {
|
||||
callback(new Error('失效日期不能早于生效日期'))
|
||||
}
|
||||
}
|
||||
callback()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,897 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<!-- 当前用户已使用免费制作证书权益。可付费制作其他证书。-->
|
||||
<span class="apply-notice">*申请提示* 尊敬的会员您好！您已完成2张证书的办理业务，第3张证书起，将执行付费办理，费用标准：5000元/张。请在本页提交“新增申请”后，前往“证书缴费”办理相关费用。</span>
|
||||
<a-divider orientation="left">
|
||||
申请信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
dict="certificate_type"
|
||||
:triggerChange="true"
|
||||
@change="vinOrWmi"
|
||||
v-decorator="['certificateType',validatorRules.certificateType]"
|
||||
placeholder="请选择证书类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
placeholder="请输入证书代码"
|
||||
v-decorator="['code',validatorRules.clientCode]"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['address',validatorRules.address]"
|
||||
placeholder=""></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['postcode',validatorRules.postcode]"
|
||||
placeholder=""></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12" v-if="selectType == '1' ">
|
||||
<a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
v-decorator="['noticeOfFiling']"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择备案通知书"
|
||||
dictCode="notice_of_filing"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 输入证书代码显示上传 并为必填 -->
|
||||
<a-col :span="12" v-if="freeCertificate.code">
|
||||
<a-form-item label="证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
isMultiple
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-decorator="['certificateImg',validatorRules.certificateImg]">
|
||||
</j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="freeCertificate.code">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD"
|
||||
placeholder="请选择生效日期"
|
||||
v-decorator="['effectDate',validatorRules.effectDate]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
<span class="apply-notice">生效日期与上一周期证书的失效日期保持一致，失效日期顺延五年</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="失效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD"
|
||||
placeholder="请选择失效日期"
|
||||
v-decorator="['invalidDate',validatorRules.invalidDate]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider orientation="left">
|
||||
缴费信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
disabled
|
||||
:maxLength="50"
|
||||
v-decorator="['companyName']">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
disabled
|
||||
:maxLength="50"
|
||||
v-decorator="['liaisonMan']"
|
||||
placeholder="请输入联系人">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input disabled :maxLength="50" v-decorator="['mobile']" placeholder="请输入手机号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-decorator="['paymentMethod',validatorRules.paymentMethod]"
|
||||
@change="changePaymentMethod"
|
||||
:trigger-change="true"
|
||||
dictCode="payment_method"
|
||||
placeholder="请选择缴费方式"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div style="height:150px" v-if="isWireTransfer === '2' ">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:maxLength="50"
|
||||
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
|
||||
placeholder="请输入缴费金额"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="打包协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-upload
|
||||
file-type="pdf"
|
||||
file-type-error-message="请上传pdf文件"
|
||||
:multiple="false"
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-decorator="['paymentRecord',validatorRules.paymentRecord1]"
|
||||
:trigger-change="true"></j-upload>
|
||||
<span style="color: #bfbfbf">请上传pdf文件</span>
|
||||
</a-form-item>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div v-if="isWireTransfer === '1' ">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:maxLength="50"
|
||||
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
|
||||
placeholder="请输入缴费金额"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择缴费时间"
|
||||
v-decorator="['submissionTime',validatorRules.submissionTime]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
isMultiple
|
||||
:number="2"
|
||||
bizPath="payment"
|
||||
v-decorator="['paymentRecord',validatorRules.paymentRecord]"
|
||||
></j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
|
||||
@change="invoiceRequirementsChange"
|
||||
:trigger-change="true"
|
||||
dictCode="invoice_requirements"
|
||||
placeholder="请选择发票"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!--发票信息的显示-->
|
||||
<template v-if="invoiceRequirementsFlag">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
|
||||
placeholder="请输入付款单位发票抬头"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
|
||||
placeholder="请输入社会统一代码/税号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 2021-09-23变更 增加 单位地址 电话号码 开户银行 银行账户 增值税发票的时候存在-->
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
|
||||
placeholder="请输入单位地址"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
|
||||
:trigger-change="true"
|
||||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
|
||||
placeholder="请输入电话号码"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
|
||||
placeholder="请输入开户银行"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="(e) => {e.target.value = e.target.value.trim()}"
|
||||
v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
|
||||
placeholder="请输入银行账户"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<div v-if="isWireTransfer === '3' ">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:maxLength="50"
|
||||
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
|
||||
placeholder="请输入缴费金额"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择缴费时间"
|
||||
v-decorator="['submissionTime',validatorRules.submissionTime]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
|
||||
@change="invoiceRequirementsChange"
|
||||
:trigger-change="true"
|
||||
dictCode="invoice_requirements"
|
||||
placeholder="请选择发票"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<template v-if="invoiceRequirementsFlag">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
|
||||
placeholder="请输入付款单位发票抬头"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
|
||||
placeholder="请输入社会统一代码/税号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 2021-09-23变更 增加 单位地址 电话号码 开户银行 银行账户 增值税发票的时候存在-->
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
|
||||
placeholder="请输入单位地址"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
|
||||
:trigger-change="true"
|
||||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
|
||||
placeholder="请输入电话号码"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
|
||||
placeholder="请输入开户银行"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="(e) => {e.target.value = e.target.value.trim()}"
|
||||
v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
|
||||
placeholder="请输入银行账户"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button @click="preSaveChargeCertificate" type="primary">暂存</a-button>
|
||||
<a-button @click="addChargeCertificate" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deleteAction, getAction, httpAction } from '@api/memberManage'
|
||||
import JImageUpload from '@comp/standardsAssociation/JImageUpload'
|
||||
import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
|
||||
import JDate from '@comp/tools/JDate'
|
||||
import JUpload from '@comp/standardsAssociation/JUpload'
|
||||
import pick from 'lodash.pick'
|
||||
import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
|
||||
export default {
|
||||
// 新建VIN证书申请 收费 窗口
|
||||
name: 'ChargeCertificateModel',
|
||||
components: {
|
||||
JImageUpload,
|
||||
JSearchSelectTag,
|
||||
JDate,
|
||||
JUpload,
|
||||
JDictSelectTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loginUserId: this.$store.getters.userInfo.memberId,
|
||||
model: {},
|
||||
checkEffectDate: '',
|
||||
confirmLoading: false,
|
||||
visible: false,
|
||||
title: '',
|
||||
pageType: 6,
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
// 当前选择是否需要发票的值，用于dom的判断 0-无 1-普通发票 2-增值税发票
|
||||
currentSelectInvoiceType: 0,
|
||||
validatorRules: {
|
||||
defaultRules: {
|
||||
rules: [{ required: true, message: '请选择' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
},
|
||||
companyName: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入单位全称!' },
|
||||
{ min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
mobile: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入手机!' },
|
||||
{ min: 1, max: 50, message: '手机号码不超过50个字符' },
|
||||
{ pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入证书代码!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
certificateImg: {
|
||||
rules: [
|
||||
{ required: true, message: '请上传证书文件!' }
|
||||
],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
clientCode: {
|
||||
rules: [
|
||||
{ min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
auditOpinion: {
|
||||
rules: [
|
||||
{ min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
effectDate: {
|
||||
rules: [{
|
||||
required: true, message: '请选择生效日期'
|
||||
}]
|
||||
},
|
||||
invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
|
||||
certificateType: {
|
||||
rules: [{
|
||||
required: true, message: '请输入证书类型!'
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入通讯地址!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
postcode: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入邮编!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符' }
|
||||
// { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
paymentMethod: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费方式!'
|
||||
}]
|
||||
},
|
||||
paymentAmount: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入缴费金额!'
|
||||
},
|
||||
{
|
||||
pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
|
||||
message: '请输入合法的金额数字，最多2位小数,11位正数',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
submissionTime: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费日期!'
|
||||
}]
|
||||
},
|
||||
paymentRecord: {
|
||||
rules: [{
|
||||
required: true, message: '请上传缴费凭证!'
|
||||
}]
|
||||
},
|
||||
paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
|
||||
liaisonMan: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入联系人!' },
|
||||
{ min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
invoiceRequirements: {
|
||||
rules: [{
|
||||
required: true, message: '请选择是否需要发票!'
|
||||
}]
|
||||
},
|
||||
headerName: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入付款单位发票抬头!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
taxNumber: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入社会统一代码/税号!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
|
||||
{
|
||||
// pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
|
||||
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
|
||||
// message: '15位、17位、18位、20位数字和大写英文字母',
|
||||
message: '请输入15位、18位的社会统一代码/税号',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
|
||||
invoicePhone: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{
|
||||
pattern: /^((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}$/,
|
||||
message: '请输入正确格式的电话号码',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
|
||||
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
|
||||
reasonsRenewal: {
|
||||
rules: [{
|
||||
required: true, message: '请至少选择一个换证原因!'
|
||||
}]
|
||||
},
|
||||
sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
|
||||
postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 免费证书对象
|
||||
freeCertificate: {},
|
||||
invoiceRequirementsFlag: false,
|
||||
// 当前登录用户的会员信息
|
||||
currentMemberInfo: {},
|
||||
// 会员缴费信息
|
||||
memberInfoPayment: {},
|
||||
// 是否是电汇
|
||||
isWireTransfer: '1',
|
||||
// 记录续费证书选择
|
||||
selectType: 1,
|
||||
// 缴费方式标志
|
||||
paymentMethodFlag: false // 发票选择
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
// 数据准备
|
||||
this.currentMemberInfo = {}
|
||||
getAction('/memberInfo/memberInfo/getCurrentMemberInfo').then((res) => {
|
||||
if (res.success) {
|
||||
this.currentMemberInfo = res.result || {}
|
||||
this.addEdit({})
|
||||
}
|
||||
})
|
||||
},
|
||||
addEdit() {
|
||||
this.form.resetFields()
|
||||
this.freeCertificate = {}
|
||||
// 缴费信息置空
|
||||
this.memberInfoPayment = {}
|
||||
this.model = Object.assign({}, this.currentMemberInfo)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'address', 'postcode', 'companyName', 'liaisonMan', 'mobile'))
|
||||
})
|
||||
},
|
||||
// 添加收费证书
|
||||
addChargeCertificate: function() {
|
||||
this.handleChargeCertificateOk()
|
||||
},
|
||||
// 添加收费证书信息
|
||||
handleChargeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/addChargeCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.freeCertificate, values)
|
||||
// 防止越权的注入
|
||||
formData.memberId = this.loginUserId
|
||||
// 设置提交状态为 已提交
|
||||
formData.certificateStatus = 2
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
// 添加缴费信息
|
||||
const chargeUrl = '/certificatePaymentInfo/addVinChargeInfo'
|
||||
const chargeMethod = 'post'
|
||||
const chargeFormData = Object.assign(this.memberInfoPayment, values)
|
||||
// 新增
|
||||
chargeFormData.paymentType = 0
|
||||
// 证书ID
|
||||
chargeFormData.certificateId = res.result.id
|
||||
// 4 是代表申请证书
|
||||
chargeFormData.certificateModality = 4
|
||||
// 缴费时长默认为 5年
|
||||
chargeFormData.paymentTime = 5
|
||||
const certificateId = chargeFormData.certificateId
|
||||
httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
// 如果添加缴费信息没有成功，则删除已经添加的证书
|
||||
console.log(' VIN证书开始删除')
|
||||
deleteAction('/vinCertificate/vinCertificate/delete', { id: certificateId }).then((res) => {
|
||||
if (res.success) {
|
||||
console.log('删除证书成功！')
|
||||
} else {
|
||||
console.log('删除证书失败！')
|
||||
}
|
||||
})
|
||||
that.$message.warning(res.message)
|
||||
that.loadData()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 添加收费证书预处理
|
||||
preSaveChargeCertificate() {
|
||||
this.preHandleChargeCertificateOk()
|
||||
},
|
||||
// 添加收费证书信息预处理
|
||||
preHandleChargeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/addChargeCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.freeCertificate, values)
|
||||
// 防止越权的注入
|
||||
formData.memberId = this.loginUserId
|
||||
// 设置提交状态为 未提交
|
||||
formData.certificateStatus = 0
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
// 添加缴费信息
|
||||
const chargeUrl = '/certificatePaymentInfo/addVinChargeInfo'
|
||||
const chargeMethod = 'post'
|
||||
const chargeFormData = Object.assign(this.memberInfoPayment, values)
|
||||
// 新增
|
||||
chargeFormData.paymentType = 0
|
||||
|
||||
// 缴费状态为 未提交状态
|
||||
chargeFormData.paymentStatus = 0
|
||||
// 4 是代表申请证书
|
||||
chargeFormData.certificateModality = 4
|
||||
// 证书ID
|
||||
chargeFormData.certificateId = res.result.id
|
||||
// 缴费时长默认为 5年
|
||||
chargeFormData.paymentTime = 5
|
||||
const certificateId = chargeFormData.certificateId
|
||||
httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success('添加成功')
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
// 如果添加缴费信息没有成功，则删除已经添加的证书
|
||||
console.log(' VIN证书开始删除')
|
||||
deleteAction('/vinCertificate/vinCertificate/delete', { id: certificateId }).then((res) => {
|
||||
if (res.success) {
|
||||
console.log('删除证书成功！')
|
||||
} else {
|
||||
console.log('删除证书失败！')
|
||||
}
|
||||
})
|
||||
that.$message.warning(res.message)
|
||||
that.loadData()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 校验是否选择 要发票
|
||||
invoiceRequirementsChange(value) {
|
||||
this.currentSelectInvoiceType = Number(value)
|
||||
if (this.currentSelectInvoiceType !== 0) {
|
||||
this.invoiceRequirementsFlag = true
|
||||
} else {
|
||||
this.invoiceRequirementsFlag = false
|
||||
}
|
||||
},
|
||||
checkInvalidDate(rule, value, callback) {
|
||||
if (value === undefined || value === '' || value == null) {
|
||||
callback(new Error('请选择失效日期'))
|
||||
}
|
||||
console.log(value + ' :' + this.checkEffectDate)
|
||||
var ck = this.checkEffectDate
|
||||
if (!(ck === null || ck === undefined || ck === '')) {
|
||||
if (value < this.checkEffectDate) {
|
||||
callback(new Error('失效日期不能早于生效日期'))
|
||||
}
|
||||
}
|
||||
callback()
|
||||
},
|
||||
/* 缴费方式*/
|
||||
changePaymentMethod(value) {
|
||||
// 1 是电汇 2 打包 3 是现金
|
||||
this.isWireTransfer = value
|
||||
this.form.resetFields(['paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
|
||||
if (value !== '1') {
|
||||
this.paymentMethodFlag = true
|
||||
} else {
|
||||
this.paymentMethodFlag = false
|
||||
}
|
||||
},
|
||||
/*
|
||||
* 证书下拉框改变
|
||||
* */
|
||||
vinOrWmi(val) {
|
||||
this.selectType = Number(val)
|
||||
this.form.resetFields('reasonsRenewal')
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-row>
|
||||
<!--会员不显示单位全称-->
|
||||
<a-col :span="7 " v-if="isMember !== 'member'">
|
||||
<!--证书表头信息 开始-->
|
||||
<a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" disabled v-decorator="['companyName']"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="7">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
disabled
|
||||
dict="certificate_type"
|
||||
v-decorator="['certificateType']"
|
||||
placeholder="请选择证书类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" disabled v-decorator="['code']" placeholder="请输入证书代码"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="7">
|
||||
<a-form-item label="证书状态" :labelCol="labelCol" :wrapperCol="wrapperCol" style="color:green">
|
||||
<span v-if="model.certificateStatus==0" class="certificate status-0">待支付</span>
|
||||
<span v-if="model.certificateStatus==1" class="certificate status-1">已绑定</span>
|
||||
<span v-if="model.certificateStatus==2" class="certificate status-1">已支付</span>
|
||||
<span v-if="model.certificateStatus==3" class="certificate status-1">支付已审核</span>
|
||||
<span v-if="model.certificateStatus==4" class="certificate status-1">正常使用</span>
|
||||
<span v-if="model.certificateStatus==5" class="certificate status-2">已失效</span>
|
||||
<span v-if="model.certificateStatus==6" class="certificate status-2">已驳回</span>
|
||||
<span v-if="model.certificateStatus==7" class="certificate status-2">绑定已失效</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="7">
|
||||
<a-form-item label="证书周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
disabled
|
||||
v-decorator="['certificateValidDate', {'initialValue': model.certificationDate}]"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="10">
|
||||
<a-form-item label="预计到期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<label v-text="remainingTime" style="color:red;"></label>
|
||||
天后
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row v-if="model.code">
|
||||
<a-col :span="7">
|
||||
<a-form-item label=" 证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
disabled
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-decorator="['certificateImg']">
|
||||
</j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="row clearfix">
|
||||
<div class="col-md-5 column">
|
||||
<p></p>
|
||||
<b><p>证书历史信息</p></b>
|
||||
<p>--------------------------------------------------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="table-page-search-wrapper">
|
||||
<div class="row clearfix">
|
||||
<div class="col-md-11 column">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="vinCertificateHistoryDataSource"
|
||||
:pagination="ipagination"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap">
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel" type="primary">返回</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { USER_INFO } from '@/store/mutation-types'
|
||||
import pick from 'lodash.pick'
|
||||
import Vue from 'vue'
|
||||
import { getAction } from '@api/memberManage'
|
||||
import JImageUpload from '@comp/standardsAssociation/JImageUpload'
|
||||
import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
|
||||
export default {
|
||||
// 查看证书
|
||||
name: 'CheckCertificateModel',
|
||||
components: {
|
||||
JImageUpload,
|
||||
JSearchSelectTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
pageType: 1,
|
||||
form: this.$form.createForm(this),
|
||||
// 角色码
|
||||
isMember: Vue.ls.get(USER_INFO).roleCode,
|
||||
title: '查看证书',
|
||||
disableSubmit: true,
|
||||
model: {},
|
||||
// 证书有效期天数
|
||||
remainingTime: 0,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
// 证书历史信息表头
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function(t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '证书形式',
|
||||
align: 'center',
|
||||
dataIndex: 'certificateModality_dictText'
|
||||
},
|
||||
{
|
||||
title: '生效日期',
|
||||
align: 'center',
|
||||
dataIndex: 'effectDate',
|
||||
customRender: function(text) {
|
||||
if (text == null) {
|
||||
return '------------'
|
||||
} else {
|
||||
return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '失效日期',
|
||||
align: 'center',
|
||||
dataIndex: 'invalidDate',
|
||||
customRender: function(text) {
|
||||
if (text == null) {
|
||||
return '------------'
|
||||
} else {
|
||||
return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '快递公司',
|
||||
align: 'center',
|
||||
dataIndex: 'sendMethod',
|
||||
customRender: function(text) {
|
||||
if (text === 1) {
|
||||
return 'EMS'
|
||||
} else if (text === 2) {
|
||||
return '顺丰'
|
||||
}
|
||||
}
|
||||
}],
|
||||
// VIN证书历史数据源
|
||||
vinCertificateHistoryDataSource: [],
|
||||
// 页面分页信息
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
check(val) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, val)
|
||||
this.paymentSearchQuery()
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'certificateImg', 'certificateValidDate', 'companyName', 'certificationDate', 'certificateType', 'certificateStatus', 'code',))
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
},
|
||||
// 获取证书历史数据源
|
||||
paymentSearchQuery() {
|
||||
const params = `certificateId=${this.model.id}&pageNo=${this.ipagination.current}&pageSize=${this.ipagination.pageSize}`
|
||||
// const params = 'certificateId=' + this.vinCertificate.id + '&pageNo=' + this.ipagination.current + '&pageSize=' + this.ipagination.pageSize
|
||||
getAction('/vinCertificateHistory/vinCertificateHistory/list?' + params).then((res) => {
|
||||
this.vinCertificateHistoryDataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
})
|
||||
},
|
||||
// 页面分页改变重新请求
|
||||
handleTableChange(pagination) {
|
||||
this.ipagination = pagination
|
||||
this.paymentSearchQuery()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
当前用户可享{{ freeCountVin }}次免费制作证书的机会
|
||||
<a-divider orientation="left">
|
||||
申请信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
dict="certificate_type"
|
||||
@change="vinOrWmi"
|
||||
:triggerChange="true"
|
||||
v-decorator="['certificateType',validatorRules.certificateType]"
|
||||
placeholder="请选择证书类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
placeholder="请输入证书代码"
|
||||
v-decorator="['code',validatorRules.clientCode]"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="selectType == '1' ">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
v-decorator="['noticeOfFiling']"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择备案通知书"
|
||||
dictCode="notice_of_filing"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['address',validatorRules.address]"
|
||||
placeholder="">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['postcode',validatorRules.postcode]"
|
||||
placeholder="">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button @click="saveFreeCertificate" type="primary">暂存</a-button>
|
||||
<a-button @click="handleRealSaveFreeCertificateOk" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
|
||||
import { httpAction } from '@api/memberManage'
|
||||
import pick from 'lodash.pick'
|
||||
export default {
|
||||
// 免费证书申请编辑 窗口
|
||||
name: 'FreeCertificateEditModel',
|
||||
components: {
|
||||
JSearchSelectTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loginUserId: this.$store.getters.userInfo.memberId,
|
||||
title: '新增申请',
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
confirmLoading: false,
|
||||
pageType: 10,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
validatorRules: {
|
||||
defaultRules: {
|
||||
rules: [{ required: true, message: '请选择' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入证书代码!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
certificateImg: {
|
||||
rules: [
|
||||
{ required: true, message: '请上传证书文件!' }
|
||||
],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
clientCode: {
|
||||
rules: [
|
||||
{ min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
effectDate: {
|
||||
rules: [{
|
||||
required: true, message: '请选择生效日期'
|
||||
}]
|
||||
},
|
||||
certificateType: {
|
||||
rules: [{
|
||||
required: true, message: '请输入证书类型!'
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入通讯地址!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
postcode: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入邮编!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符' },
|
||||
{ pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
paymentMethod: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费方式!'
|
||||
}]
|
||||
},
|
||||
paymentAmount: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入缴费金额!'
|
||||
},
|
||||
{
|
||||
pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
|
||||
message: '请输入合法的金额数字，最多2位小数,11位正数',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
submissionTime: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费日期!'
|
||||
}]
|
||||
},
|
||||
invoiceRequirements: {
|
||||
rules: [{
|
||||
required: true, message: '请选择是否需要发票!'
|
||||
}]
|
||||
},
|
||||
headerName: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入付款单位发票抬头!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
taxNumber: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入社会统一代码/税号!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
|
||||
{
|
||||
// pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
|
||||
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
|
||||
// message: '15位、17位、18位、20位数字和大写英文字母',
|
||||
message: '请输入15位、18位的社会统一代码/税号',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
|
||||
invoicePhone: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{
|
||||
pattern: /^((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}$/,
|
||||
message: '请输入正确格式的电话号码',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
|
||||
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
|
||||
reasonsRenewal: {
|
||||
rules: [{
|
||||
required: true, message: '请至少选择一个换证原因!'
|
||||
}]
|
||||
},
|
||||
sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
|
||||
postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 当前登录用户的会员信息
|
||||
currentMemberInfo: {},
|
||||
// 免费证书对象
|
||||
freeCertificate: {},
|
||||
// 记录续费证书选择
|
||||
selectType: 1,
|
||||
freeCountVin: 0,
|
||||
model: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 免费证书的编辑窗口
|
||||
edit(record) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
this.selectType = record.certificateType
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'noticeOfFiling', 'id', 'address', 'postcode', 'certificateType', 'code'))
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 证书下拉框改变
|
||||
* */
|
||||
vinOrWmi(val) {
|
||||
this.selectType = Number(val)
|
||||
},
|
||||
// 未提交 免费证书
|
||||
saveFreeCertificate() {
|
||||
this.handleSaveFreeCertificateOk(0)
|
||||
},
|
||||
// 编辑后保存
|
||||
handleRealSaveFreeCertificateOk() {
|
||||
this.handleSaveFreeCertificateOk(null)
|
||||
},
|
||||
// 未提交 免费证书
|
||||
handleSaveFreeCertificateOk: function(certificateStatus) {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/addFreeCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 添加证书状态为未提交
|
||||
formData.certificateStatus = certificateStatus
|
||||
formData.createTime = null
|
||||
formData.memberId = this.loginUserId
|
||||
console.log('表单提交数据', formData)
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
if (certificateStatus === 0) {
|
||||
that.$message.success(res.message)
|
||||
} else {
|
||||
that.$message.success(res.message)
|
||||
}
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
</style>
|
||||
|
||||
FreeCertificateEditModel
|
||||
@@ -0,0 +1,474 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
当前用户可享{{ freeCount }}次免费制作证书的机会
|
||||
<a-divider orientation="left">
|
||||
申请信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
dict="certificate_type"
|
||||
@change="vinOrWmi"
|
||||
:triggerChange="true"
|
||||
v-decorator="['certificateType',validatorRules.certificateType]"
|
||||
placeholder="请选择证书类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
placeholder="请输入证书代码"
|
||||
v-decorator="['code',validatorRules.clientCode]"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="selectType == '1' ">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
v-decorator="['noticeOfFiling']"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择备案通知书"
|
||||
dictCode="notice_of_filing"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['address',validatorRules.address]"
|
||||
placeholder="">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['postcode',validatorRules.postcode]"
|
||||
placeholder="">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button @click="preSaveFreeCertificate" type="primary">暂存</a-button>
|
||||
<a-button @click="addFreeCertificate" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSearchSelectTag from '@/components/standardsAssociation/JSearchSelectTag'
|
||||
import { getAction, httpAction } from '@api/memberManage'
|
||||
import pick from 'lodash.pick'
|
||||
import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
|
||||
export default {
|
||||
// 新建VIN证书申请 免费额度内 窗口
|
||||
name: 'FreeCertificateModel',
|
||||
components: {
|
||||
JSearchSelectTag,
|
||||
JDictSelectTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loginUserId: this.$store.getters.userInfo.memberId,
|
||||
title: '',
|
||||
visible: false,
|
||||
form: this.$form.createForm(this),
|
||||
confirmLoading: false,
|
||||
pageType: 5,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
validatorRules: {
|
||||
defaultRules: {
|
||||
rules: [{ required: true, message: '请选择' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
},
|
||||
companyName: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入单位全称!' },
|
||||
{ min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
mobile: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入手机!' },
|
||||
{ min: 1, max: 50, message: '手机号码不超过50个字符' },
|
||||
{ pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入证书代码!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
certificateImg: {
|
||||
rules: [
|
||||
{ required: true, message: '请上传证书文件!' }
|
||||
],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
clientCode: {
|
||||
rules: [
|
||||
{ min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
auditOpinion: {
|
||||
rules: [
|
||||
{ min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
effectDate: {
|
||||
rules: [{
|
||||
required: true, message: '请选择生效日期'
|
||||
}]
|
||||
},
|
||||
invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
|
||||
certificateType: {
|
||||
rules: [{
|
||||
required: true, message: '请输入证书类型!'
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入通讯地址!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
postcode: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入邮编!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符' },
|
||||
{ pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
paymentMethod: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费方式!'
|
||||
}]
|
||||
},
|
||||
paymentAmount: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入缴费金额!'
|
||||
},
|
||||
{
|
||||
pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
|
||||
message: '请输入合法的金额数字，最多2位小数,11位正数',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
submissionTime: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费日期!'
|
||||
}]
|
||||
},
|
||||
paymentRecord: {
|
||||
rules: [{
|
||||
required: true, message: '请上传缴费凭证!'
|
||||
}]
|
||||
},
|
||||
paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
|
||||
liaisonMan: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入联系人!' },
|
||||
{ min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
invoiceRequirements: {
|
||||
rules: [{
|
||||
required: true, message: '请选择是否需要发票!'
|
||||
}]
|
||||
},
|
||||
headerName: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入付款单位发票抬头!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
taxNumber: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入社会统一代码/税号!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
|
||||
{
|
||||
// pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
|
||||
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
|
||||
// message: '15位、17位、18位、20位数字和大写英文字母',
|
||||
message: '请输入15位、18位的社会统一代码/税号',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
|
||||
invoicePhone: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{
|
||||
pattern: /^((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}$/,
|
||||
message: '请输入正确格式的电话号码',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
|
||||
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
|
||||
reasonsRenewal: {
|
||||
rules: [{
|
||||
required: true, message: '请至少选择一个换证原因!'
|
||||
}]
|
||||
},
|
||||
sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
|
||||
postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 当前登录用户的会员信息
|
||||
currentMemberInfo: {},
|
||||
// 免费证书对象
|
||||
freeCertificate: {},
|
||||
// 记录续费证书选择
|
||||
selectType: 1,
|
||||
freeCount: 0,
|
||||
model: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 新增证书
|
||||
add() {
|
||||
// 数据准备
|
||||
this.currentMemberInfo = {}
|
||||
getAction('/memberInfo/memberInfo/getCurrentMemberInfo').then((res) => {
|
||||
if (res.success) {
|
||||
this.currentMemberInfo = res.result || {}
|
||||
this.addEdit({})
|
||||
}
|
||||
})
|
||||
},
|
||||
addEdit() {
|
||||
this.form.resetFields()
|
||||
this.freeCertificate = {}
|
||||
// 默认选择增值税发票
|
||||
let defaultInvoiceRequirements = 2
|
||||
this.model = Object.assign({}, this.currentMemberInfo,{invoiceRequirements: defaultInvoiceRequirements})
|
||||
console.log(this.model)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'address', 'postcode', 'companyName', 'liaisonMan', 'mobile','invoiceRequirements'))
|
||||
})
|
||||
},
|
||||
// 添加免费证书
|
||||
addFreeCertificate() {
|
||||
this.handleFreeCertificateOk()
|
||||
},
|
||||
handleFreeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/addFreeCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.freeCertificate, values)
|
||||
formData.memberId = this.loginUserId
|
||||
console.log('表单提交数据', formData)
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
preSaveFreeCertificate() {
|
||||
this.preHandleSaveFreeCertificateOk()
|
||||
},
|
||||
// 未提交 免费证书
|
||||
preHandleSaveFreeCertificateOk: function(certificateStatus) {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/addFreeCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 添加证书状态为未提交
|
||||
formData.certificateStatus = certificateStatus
|
||||
formData.createTime = null
|
||||
formData.id = null
|
||||
formData.updateTime = null
|
||||
formData.memberId = this.loginUserId
|
||||
formData.certificateStatus = 0
|
||||
console.log('表单提交数据', formData)
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success('添加成功')
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
},
|
||||
/*
|
||||
* 证书下拉框改变
|
||||
* */
|
||||
vinOrWmi(val) {
|
||||
console.log(val)
|
||||
this.selectType = Number(val)
|
||||
this.form.resetFields('reasonsRenewal')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,507 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
@change="vinOrWmi"
|
||||
dict="certificate_type"
|
||||
v-decorator="['certificateType',validatorRules.certificateType]"
|
||||
placeholder="请选择证书类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['code',validatorRules.clientCode]"
|
||||
placeholder="请输入证书代码"></a-input>
|
||||
</a-form-item>
|
||||
<span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" v-decorator="['address',validatorRules.address]" placeholder="请输入通讯地址"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['postcode',validatorRules.postcode]"
|
||||
placeholder="请输入邮编"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD"
|
||||
placeholder="请选择生效日期"
|
||||
v-decorator="['effectDate',validatorRules.effectDate]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="失效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD"
|
||||
placeholder="请选择失效日期"
|
||||
v-decorator="['invalidDate',validatorRules.invalidDate]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12" v-if="selectType == '1'">
|
||||
<a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
v-decorator="['noticeOfFiling']"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择备案通知书"
|
||||
dictCode="notice_of_filing"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="换证原因"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
v-if="selectType == 1 ">
|
||||
<j-multi-select-tag
|
||||
v-decorator="['reasonsRenewal',validatorRules.reasonsRenewal]"
|
||||
placeholder="请选择换证原因"
|
||||
dict-code="certificate_type_wmi">
|
||||
</j-multi-select-tag>
|
||||
{{ checkboxValue }}
|
||||
</a-form-item>
|
||||
<a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="selectType == 2 ">
|
||||
<j-multi-select-tag
|
||||
placeholder="请选择换证原因"
|
||||
v-decorator="['reasonsRenewal',validatorRules.reasonsRenewal]"
|
||||
dict-code="certificate_type_ec"
|
||||
>
|
||||
</j-multi-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="model.code">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-decorator="['certificateImg',validatorRules.certificateImg]">
|
||||
</j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="备注" :labelCol="labelColOne" :wrapperCol="wrapperColOne">
|
||||
<a-textarea :maxLength="500" :rows="5" v-decorator="['auditOpinion',validatorRules.auditOpinion]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button @click="saveReplacementCertificate" type="primary">暂存</a-button>
|
||||
<a-button @click="realSaveReplacementCertificate" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JDate from '@comp/tools/JDate'
|
||||
import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
|
||||
import JImageUpload from '@comp/standardsAssociation/JImageUpload'
|
||||
import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
|
||||
import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
|
||||
import { httpAction } from '@api/memberManage'
|
||||
import pick from 'lodash.pick'
|
||||
export default {
|
||||
// 换证 编辑窗口
|
||||
name: 'FreeCertificateReplaceEditModel',
|
||||
components: {
|
||||
JDate,
|
||||
JSearchSelectTag,
|
||||
JImageUpload,
|
||||
JDictSelectTag,
|
||||
JMultiSelectTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '换证',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
pageType: 13,
|
||||
checkboxValue: '',
|
||||
model:{},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
labelColOne: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 3 }
|
||||
},
|
||||
wrapperColOne: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 20 }
|
||||
},
|
||||
// 记录续费证书选择
|
||||
selectType: 1,
|
||||
validatorRules: {
|
||||
defaultRules: {
|
||||
rules: [{ required: true, message: '请选择' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入证书代码!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
certificateImg: {
|
||||
rules: [
|
||||
{ required: true, message: '请上传证书文件!' }
|
||||
],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
clientCode: {
|
||||
rules: [
|
||||
{ min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
auditOpinion: {
|
||||
rules: [
|
||||
{ min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
effectDate: {
|
||||
rules: [{
|
||||
required: true, message: '请选择生效日期'
|
||||
}]
|
||||
},
|
||||
invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
|
||||
certificateType: {
|
||||
rules: [{
|
||||
required: true, message: '请输入证书类型!'
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入通讯地址!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
postcode: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入邮编!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符' }
|
||||
// { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
paymentMethod: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费方式!'
|
||||
}]
|
||||
},
|
||||
paymentAmount: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入缴费金额!'
|
||||
},
|
||||
{
|
||||
pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
|
||||
message: '请输入合法的金额数字，最多2位小数,11位正数',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
submissionTime: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费日期!'
|
||||
}]
|
||||
},
|
||||
invoiceRequirements: {
|
||||
rules: [{
|
||||
required: true, message: '请选择是否需要发票!'
|
||||
}]
|
||||
},
|
||||
headerName: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入付款单位发票抬头!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
taxNumber: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入社会统一代码/税号!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
|
||||
{
|
||||
// pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
|
||||
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
|
||||
// message: '15位、17位、18位、20位数字和大写英文字母',
|
||||
message: '请输入15位、18位的社会统一代码/税号',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
|
||||
invoicePhone: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{
|
||||
pattern: /^((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}$/,
|
||||
message: '请输入正确格式的电话号码',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
|
||||
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
|
||||
reasonsRenewal: {
|
||||
rules: [{
|
||||
required: true, message: '请至少选择一个换证原因!'
|
||||
}]
|
||||
},
|
||||
sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
|
||||
postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
edit(record) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
this.newCertificate = Object.assign({}, record)
|
||||
this.selectType = this.model.certificateType
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'noticeOfFiling', 'certificateImg', 'id', 'auditOpinion', 'address', 'postcode', 'certificateType', 'effectDate', 'invalidDate', 'reasonsRenewal', 'code'))
|
||||
})
|
||||
},
|
||||
saveReplacementCertificate() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/replacementCertificate'
|
||||
const method = 'post'
|
||||
// this.newCertificate
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 处理状态为 未提交
|
||||
formData.certificateStatus = 0
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
realSaveReplacementCertificate() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/replacementCertificate'
|
||||
const method = 'post'
|
||||
// this.newCertificate
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 处理状态为已处理
|
||||
formData.certificateStatus = 3
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
// 确认弹窗 显示
|
||||
that.$emit('affirm')
|
||||
// that.title = '提交成功'
|
||||
// that.disableSubmit = true
|
||||
// that.pageType = 14
|
||||
// that.edit(that.record)
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
},
|
||||
/*
|
||||
* 证书下拉框改变
|
||||
* */
|
||||
vinOrWmi(val) {
|
||||
this.selectType = Number(val)
|
||||
this.form.resetFields('reasonsRenewal')
|
||||
},
|
||||
checkInvalidDate(rule, value, callback) {
|
||||
if (value === undefined || value === '' || value == null) {
|
||||
callback(new Error('请选择失效日期'))
|
||||
}
|
||||
console.log(value + ' :' + this.checkEffectDate)
|
||||
var ck = this.checkEffectDate
|
||||
if (!(ck === null || ck === undefined || ck === '')) {
|
||||
if (value < this.checkEffectDate) {
|
||||
callback(new Error('失效日期不能早于生效日期'))
|
||||
}
|
||||
}
|
||||
callback()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,699 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-divider orientation="left">
|
||||
申请信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
disabled
|
||||
dict="certificate_type"
|
||||
v-model="model.certificateType"
|
||||
placeholder="请选择证书类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" disabled v-model="model.code" placeholder="请输入证书代码"></a-input>
|
||||
</a-form-item>
|
||||
<span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
disabled
|
||||
v-model="model.address"
|
||||
placeholder=""></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
disabled
|
||||
v-model="model.postcode"
|
||||
placeholder=""></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider orientation="left">
|
||||
缴费信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" disabled v-model="model.companyName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" disabled v-model="model.liaisonMan" placeholder="请输入联系人"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" disabled v-model="model.mobile" placeholder="请输入手机号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-model="memberInfoPayment.paymentMethod"
|
||||
v-decorator="['paymentMethod',validatorRules.paymentMethod]"
|
||||
@change="changePaymentMethod"
|
||||
:trigger-change="true"
|
||||
dictCode="payment_method"
|
||||
placeholder="请选择缴费方式"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:maxLength="50"
|
||||
v-model="memberInfoPayment.paymentAmount"
|
||||
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
|
||||
placeholder="请输入缴费金额"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择缴费时间"
|
||||
v-model="memberInfoPayment.submissionTime"
|
||||
v-decorator="['submissionTime',validatorRules.submissionTime]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div v-if="paymentMethodFlag">
|
||||
<a-row>
|
||||
<a-col :span="12" v-if="isWireTransfer == 2">
|
||||
<a-form-item label="打包协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-upload
|
||||
file-type="pdf"
|
||||
file-type-error-message="请上传pdf文件"
|
||||
:multiple="false"
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-model="memberInfoPayment.paymentRecord"
|
||||
v-decorator="['paymentRecord',validatorRules.paymentRecord1]"
|
||||
:trigger-change="true"></j-upload>
|
||||
<span style="color: #bfbfbf">请上传pdf文件</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<div v-if="paymentMethodFlag == false">
|
||||
<a-row>
|
||||
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
isMultiple
|
||||
:number="2"
|
||||
bizPath="payment"
|
||||
v-decorator="['paymentRecord',validatorRules.paymentRecord]"
|
||||
v-model="memberInfoPayment.paymentRecord"></j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-model="memberInfoPayment.invoiceRequirements"
|
||||
v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
|
||||
@change="invoiceRequirementsChange"
|
||||
:trigger-change="true"
|
||||
dictCode="invoice_requirements"
|
||||
placeholder="请选择发票"/>
|
||||
</a-form-item>
|
||||
<span v-if="!invoiceRequirementsFlag" class="apply-code-notice">本选项不提供任何形式的发票凭证</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<template v-if="invoiceRequirementsFlag">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
|
||||
placeholder="请输入付款单位发票抬头"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
|
||||
placeholder="请输入社会统一代码/税号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 2021-09-23变更 增加 单位地址 电话号码 开户银行 银行账户 增值税发票的时候存在-->
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
|
||||
placeholder="请输入单位地址"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
|
||||
:trigger-change="true"
|
||||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
|
||||
placeholder="请输入电话号码"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
|
||||
placeholder="请输入开户银行"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="(e) => {e.target.value = e.target.value.trim()}"
|
||||
v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
|
||||
placeholder="请输入银行账户"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 缴费备注-->
|
||||
<a-row>
|
||||
<a-col :span="24" class="remark">
|
||||
<a-form-item label="备注" :labelCol="labelColText" :wrapperCol="wrapperCol">
|
||||
<a-textarea rows="5" v-decorator="['paymentMark' ]" placeholder="请输入备注" :maxLength="500"></a-textarea>
|
||||
</a-form-item>
|
||||
<span style="color: #bfbfbf">一个缴费单可在多个缴费处上传</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<!-- 企业证书换证原因-->
|
||||
<a-col :span="12" v-if="selectType == '2' ">
|
||||
<!-- :options="dictOptionsForCorporation"-->
|
||||
<a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-multi-select-tag
|
||||
placeholder="请选择换证原因"
|
||||
v-decorator="['reasonsRenewal']"
|
||||
dict-code="certificate_type_ec"
|
||||
|
||||
>
|
||||
</j-multi-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 世界制造厂证书换证原因-->
|
||||
<a-col :span="12" v-if="selectType == 1 ">
|
||||
<!-- :options="dictOptionsForCorporation"-->
|
||||
<a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-multi-select-tag
|
||||
placeholder="请选择换证原因"
|
||||
v-decorator="['reasonsRenewal']"
|
||||
dict-code="certificate_type_wmi"
|
||||
>
|
||||
</j-multi-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 换证备注-->
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="备注" :labelCol="labelColText" :wrapperCol="wrapperCol">
|
||||
<a-textarea
|
||||
rows="5"
|
||||
v-decorator="['replacementRemark']"
|
||||
placeholder="请输入备注"
|
||||
:maxLength="500"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-col :span="2"></a-col>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button @click="saveRenewChargeCertificate" type="primary">暂存</a-button>
|
||||
<a-button @click="realSaveRenewChargeCertificate" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
|
||||
import JImageUpload from '@comp/standardsAssociation/JImageUpload'
|
||||
import JUpload from '@comp/standardsAssociation/JUpload'
|
||||
import JDate from '@comp/tools/JDate'
|
||||
import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
|
||||
import { getAction, httpAction } from '@api/memberManage'
|
||||
import pick from 'lodash.pick'
|
||||
export default {
|
||||
// 证书续费编辑 窗口
|
||||
name: 'RenewChargeEditModel',
|
||||
components: {
|
||||
JMultiSelectTag,
|
||||
JImageUpload,
|
||||
JUpload,
|
||||
JDate,
|
||||
JSearchSelectTag
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '续费',
|
||||
loginUserId: this.$store.getters.userInfo.memberId,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
pageType: 12,
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
labelColText: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 3 }
|
||||
},
|
||||
// 会员缴费信息
|
||||
memberInfoPayment: {},
|
||||
// 当前登录用户的会员信息
|
||||
currentMemberInfo: {},
|
||||
model: {},
|
||||
// 记录续费证书选择
|
||||
selectType: 1,
|
||||
invoiceRequirementsFlag: false,
|
||||
// 当前选择是否需要发票的值，用于dom的判断 0-无 1-普通发票 2-增值税发票
|
||||
currentSelectInvoiceType: 0,
|
||||
validatorRules: {
|
||||
defaultRules: {
|
||||
rules: [{ required: true, message: '请选择' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
},
|
||||
companyName: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入单位全称!' },
|
||||
{ min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
mobile: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入手机!' },
|
||||
{ min: 1, max: 50, message: '手机号码不超过50个字符' },
|
||||
{ pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入证书代码!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
certificateImg: {
|
||||
rules: [
|
||||
{ required: true, message: '请上传证书文件!' }
|
||||
],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
clientCode: {
|
||||
rules: [
|
||||
{ min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
effectDate: {
|
||||
rules: [{
|
||||
required: true, message: '请选择生效日期'
|
||||
}]
|
||||
},
|
||||
certificateType: {
|
||||
rules: [{
|
||||
required: true, message: '请输入证书类型!'
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入通讯地址!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
postcode: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入邮编!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符' }
|
||||
// { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
paymentMethod: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费方式!'
|
||||
}]
|
||||
},
|
||||
paymentAmount: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入缴费金额!'
|
||||
},
|
||||
{
|
||||
pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
|
||||
message: '请输入合法的金额数字，最多2位小数,11位正数',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
submissionTime: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费日期!'
|
||||
}]
|
||||
},
|
||||
paymentRecord: {
|
||||
rules: [{
|
||||
required: true, message: '请上传缴费凭证!'
|
||||
}]
|
||||
},
|
||||
paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
|
||||
liaisonMan: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入联系人!' },
|
||||
{ min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
invoiceRequirements: {
|
||||
rules: [{
|
||||
required: true, message: '请选择是否需要发票!'
|
||||
}]
|
||||
},
|
||||
headerName: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入付款单位发票抬头!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
taxNumber: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入社会统一代码/税号!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
|
||||
{
|
||||
// pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
|
||||
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
|
||||
// message: '15位、17位、18位、20位数字和大写英文字母',
|
||||
message: '请输入15位、18位的社会统一代码/税号',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
|
||||
invoicePhone: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{
|
||||
pattern: /^((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}$/,
|
||||
message: '请输入正确格式的电话号码',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
|
||||
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
|
||||
reasonsRenewal: {
|
||||
rules: [{
|
||||
required: true, message: '请至少选择一个换证原因!'
|
||||
}]
|
||||
},
|
||||
sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
|
||||
postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 缴费方式标志
|
||||
paymentMethodFlag: false, // 发票选择
|
||||
// 免费证书对象
|
||||
freeCertificate: {},
|
||||
// 续费会员信pageType息
|
||||
renewMemberInfo: {},
|
||||
// 是否是电汇
|
||||
isWireTransfer: '1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 续费编辑方法
|
||||
edit(record) {
|
||||
// 获取证书类型
|
||||
this.selectType = record.certificateType
|
||||
// 数据准备
|
||||
this.currentMemberInfo = {}
|
||||
getAction('/memberInfo/memberInfo/getCurrentMemberInfo').then((res) => {
|
||||
if (res.success) {
|
||||
this.currentMemberInfo = res.result || {}
|
||||
}
|
||||
})
|
||||
// 在核对证书的时候，需要设置生效日期的初始值
|
||||
this.checkEffectDate = record.effectDate
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
// this.freeCertificate = Object.assign({}, record)
|
||||
// this.renewMemberInfo = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'paymentRecord', 'paymentMark', 'id', 'address', 'postcode', 'mobile', 'liaisonMan', 'companyName', 'certificateType', 'effectDate', 'reasonsRenewal', 'certificateStatus', 'code'))
|
||||
})
|
||||
|
||||
// 查询证书最新的缴费信息
|
||||
// 获取驳回的缴费信息
|
||||
this.memberInfoPayment = {}
|
||||
// 查询对应证书的缴费信息
|
||||
const params = 'certificateId=' + record.id
|
||||
getAction('/certificatePaymentInfo/getLastCertificatePayment?' + params).then((res) => {
|
||||
if (res.success) {
|
||||
this.memberInfoPayment = res.result
|
||||
// 获取缴费方式
|
||||
this.isWireTransfer = res.result.paymentMethod + ''
|
||||
if (this.memberInfoPayment.paymentMethod === 1) {
|
||||
this.paymentMethodFlag = false
|
||||
} else {
|
||||
this.paymentMethodFlag = true
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.memberInfoPayment, 'submissionTime', 'paymentMark', 'replacementRemark', 'paymentAmount', 'certificateType', 'headerName', 'invoiceRequirements', 'paymentMethod', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'paymentRecord', 'id', 'address', 'postcode', 'mobile', 'liaisonMan', 'companyName', 'effectDate', 'reasonsRenewal', 'certificateStatus', 'code'))
|
||||
})
|
||||
} else {
|
||||
console.log(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
saveRenewChargeCertificate() {
|
||||
this.editHandleRenewChargeCertificateOk()
|
||||
},
|
||||
// 添加 证书续费信息
|
||||
editHandleRenewChargeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/certificatePaymentInfo/addVinChargeInfo'
|
||||
const method = 'post'
|
||||
let formData = Object.assign(this.memberInfoPayment, values)
|
||||
|
||||
// 证书续费信息添加
|
||||
formData.companyName = this.model.companyName
|
||||
// 续费
|
||||
formData.paymentType = 1
|
||||
// 证书ID
|
||||
formData.certificateId = this.model.id
|
||||
// 缴费时长 默认为 5年
|
||||
formData.paymentTime = 5
|
||||
|
||||
// 添加权限控制
|
||||
formData.memberId = this.loginUserId
|
||||
// 设置证书状态为 未提交
|
||||
formData.certificateStatus = 0
|
||||
|
||||
formData = Object.assign(formData, pick(this.model, 'address', 'postcode', 'companyName'))
|
||||
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
// 修改证书的状态，和证书的类型
|
||||
const chargeUrl = '/vinCertificate/vinCertificate/renewChargeCertificate'
|
||||
const chargeMethod = 'post'
|
||||
const chargeFormData = Object.assign(this.model, values)
|
||||
chargeFormData.certificateStatus = 0
|
||||
|
||||
httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
realSaveRenewChargeCertificate() {
|
||||
this.realSaveHandleRenewChargeCertificateOk()
|
||||
},
|
||||
|
||||
// 添加 证书续费信息
|
||||
realSaveHandleRenewChargeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/certificatePaymentInfo/addVinChargeInfo'
|
||||
const method = 'post'
|
||||
let formData = Object.assign(this.memberInfoPayment, values)
|
||||
|
||||
// 证书续费信息添加
|
||||
formData.companyName = this.model.companyName
|
||||
// 续费
|
||||
formData.paymentType = 1
|
||||
// 证书ID
|
||||
formData.certificateId = this.model.id
|
||||
// 缴费时长 默认为 5年
|
||||
formData.paymentTime = 5
|
||||
|
||||
// 缴费状态为 未提交状态
|
||||
formData.paymentStatus = 1
|
||||
|
||||
// 添加权限控制
|
||||
formData.memberId = this.loginUserId
|
||||
|
||||
formData = Object.assign(formData, pick(this.model, 'address', 'postcode', 'companyName'))
|
||||
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
// 修改证书的状态，和证书的类型
|
||||
const chargeUrl = '/vinCertificate/vinCertificate/renewChargeCertificate'
|
||||
const chargeMethod = 'post'
|
||||
const chargeFormData = Object.assign(this.model, values)
|
||||
|
||||
// 设置证书的状态为已提交
|
||||
chargeFormData.certificateStatus = 2
|
||||
|
||||
httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/* 缴费方式*/
|
||||
changePaymentMethod(value) {
|
||||
// 1 是电汇 2 打包 3 是现金
|
||||
this.isWireTransfer = value
|
||||
this.form.resetFields(['paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
|
||||
if (value !== '1') {
|
||||
this.paymentMethodFlag = true
|
||||
} else {
|
||||
this.paymentMethodFlag = false
|
||||
}
|
||||
},
|
||||
// 校验是否选择 要发票
|
||||
invoiceRequirementsChange(value) {
|
||||
this.currentSelectInvoiceType = Number(value)
|
||||
if (this.currentSelectInvoiceType !== 0) {
|
||||
this.invoiceRequirementsFlag = true
|
||||
} else {
|
||||
this.invoiceRequirementsFlag = false
|
||||
}
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,792 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-divider orientation="left">
|
||||
申请信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
dict="certificate_type"
|
||||
v-model="freeCertificate.certificateType"
|
||||
placeholder="请选择证书类型"
|
||||
@change="selectcertificateType"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
:disabled="selectTypeDisabled"
|
||||
v-model="freeCertificate.code"
|
||||
placeholder="请输入证书代码"></a-input>
|
||||
</a-form-item>
|
||||
<span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
:disabled="selectTypeDisabled"
|
||||
v-model="renewMemberInfo.address"
|
||||
placeholder=""></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
:disabled="selectTypeDisabled"
|
||||
v-model="renewMemberInfo.postcode"
|
||||
placeholder=""></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider orientation="left">
|
||||
缴费信息
|
||||
</a-divider>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" disabled v-model="renewMemberInfo.companyName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
:disabled="selectTypeDisabled"
|
||||
v-model="renewMemberInfo.liaisonMan"
|
||||
placeholder="请输入联系人"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
:disabled="selectTypeDisabled"
|
||||
v-model="renewMemberInfo.mobile"
|
||||
placeholder="请输入手机号"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-decorator="['paymentMethod',validatorRules.paymentMethod]"
|
||||
@change="changePaymentMethod"
|
||||
:trigger-change="true"
|
||||
dictCode="payment_method"
|
||||
placeholder="请选择缴费方式"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input-number
|
||||
:maxLength="50"
|
||||
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
|
||||
placeholder="请输入缴费金额"
|
||||
style="width:100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
date-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择缴费时间"
|
||||
v-decorator="['submissionTime',validatorRules.submissionTime]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 打包会员显示-->
|
||||
<div v-if="isWireTransfer ==='2' ">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="打包协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-upload
|
||||
file-type="pdf"
|
||||
file-type-error-message="请上传pdf文件"
|
||||
:multiple="false"
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-decorator="['paymentRecord',validatorRules.paymentRecord1]"
|
||||
:trigger-change="true"></j-upload>
|
||||
<span style="color: #bfbfbf">请上传pdf文件</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<a-row v-if="isWireTransfer != '2'">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
type="list"
|
||||
v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
|
||||
@change="invoiceRequirementsChange"
|
||||
:trigger-change="true"
|
||||
dictCode="invoice_requirements"
|
||||
placeholder="请选择发票"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!--只有电汇才会上传缴费凭证-->
|
||||
<a-row v-if="isWireTransfer ==='1' ">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="缴费凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
isMultiple
|
||||
:number="2"
|
||||
bizPath="payment"
|
||||
v-decorator="['paymentRecord',validatorRules.paymentRecord]"
|
||||
></j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
<!-- 是否需要发票-->
|
||||
<template v-if="invoiceRequirementsFlag">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
|
||||
placeholder="请输入付款单位发票抬头"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
|
||||
placeholder="请输入社会统一代码/税号"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 2021-09-23变更 增加 单位地址 电话号码 开户银行 银行账户 增值税发票的时候存在-->
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
|
||||
placeholder="请输入单位地址"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
|
||||
:trigger-change="true"
|
||||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
|
||||
placeholder="请输入电话号码"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="currentSelectInvoiceType === 2">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
|
||||
placeholder="请输入开户银行"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
@change="(e) => {e.target.value = e.target.value.trim()}"
|
||||
v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
|
||||
placeholder="请输入银行账户"
|
||||
:maxLength="50"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<!-- 缴费备注-->
|
||||
<a-row>
|
||||
<a-col :span="24" class="remark">
|
||||
<a-form-item label="备注" :labelCol="labelColText" :wrapperCol="wrapperCol">
|
||||
<a-textarea rows="5" v-decorator="['paymentMark' ]" placeholder="请输入备注" :maxLength="500"></a-textarea>
|
||||
</a-form-item>
|
||||
<span style="color: #bfbfbf">一个缴费单可在多个缴费处上传</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<!-- 企业证书换证原因-->
|
||||
<a-col :span="12" v-if="selectType == '2' ">
|
||||
<!-- :options="dictOptionsForCorporation"-->
|
||||
<a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-multi-select-tag
|
||||
placeholder="请选择换证原因"
|
||||
v-decorator="['reasonsRenewal']"
|
||||
dict-code="certificate_type_ec"
|
||||
|
||||
>
|
||||
</j-multi-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- 世界制造厂证书换证原因-->
|
||||
<a-col :span="12" v-if="selectType == 1 ">
|
||||
<!-- :options="dictOptionsForCorporation"-->
|
||||
<a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-multi-select-tag
|
||||
placeholder="请选择换证原因"
|
||||
v-decorator="['reasonsRenewal']"
|
||||
dict-code="certificate_type_wmi"
|
||||
>
|
||||
</j-multi-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 换证备注-->
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="备注" :labelCol="labelColText" :wrapperCol="wrapperCol">
|
||||
<a-textarea
|
||||
rows="5"
|
||||
v-decorator="['replacementRemark']"
|
||||
placeholder="请输入备注"
|
||||
:maxLength="500"></a-textarea>
|
||||
</a-form-item>
|
||||
<a-col :span="2"></a-col>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button @click="preSaveRenewChargeCertificate" type="primary">暂存</a-button>
|
||||
<a-button @click="renewChargeCertificate" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
|
||||
import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
|
||||
import JImageUpload from '@comp/standardsAssociation/JImageUpload'
|
||||
import JUpload from '@comp/standardsAssociation/JUpload'
|
||||
import JDate from '@comp/tools/JDate'
|
||||
import { getAction, httpAction } from '@api/memberManage'
|
||||
import pick from 'lodash.pick'
|
||||
export default {
|
||||
// 证书续费 窗口
|
||||
name: 'RenewChargeModel',
|
||||
components: {
|
||||
JSearchSelectTag,
|
||||
JMultiSelectTag,
|
||||
JImageUpload,
|
||||
JUpload,
|
||||
JDate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否是电汇
|
||||
isWireTransfer: '1',
|
||||
loginUserId: this.$store.getters.userInfo.memberId,
|
||||
title: '续费',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
pageType: 7,
|
||||
// 记录续费证书选择
|
||||
selectType: 1,
|
||||
currentSelectInvoiceType: 0,
|
||||
invoiceRequirementsFlag: false,
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
labelColText: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 3 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
model: {},
|
||||
// 免费证书对象
|
||||
freeCertificate: {},
|
||||
validatorRules: {
|
||||
defaultRules: {
|
||||
rules: [{ required: true, message: '请选择' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
},
|
||||
companyName: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入单位全称!' },
|
||||
{ min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
mobile: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入手机!' },
|
||||
{ min: 1, max: 50, message: '手机号码不超过50个字符' },
|
||||
{ pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入证书代码!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
certificateImg: {
|
||||
rules: [
|
||||
{ required: true, message: '请上传证书文件!' }
|
||||
],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
clientCode: {
|
||||
rules: [
|
||||
{ min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
auditOpinion: {
|
||||
rules: [
|
||||
{ min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
effectDate: {
|
||||
rules: [{
|
||||
required: true, message: '请选择生效日期'
|
||||
}]
|
||||
},
|
||||
invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
|
||||
certificateType: {
|
||||
rules: [{
|
||||
required: true, message: '请输入证书类型!'
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入通讯地址!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
postcode: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入邮编!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符' },
|
||||
// { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
paymentMethod: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费方式!'
|
||||
}]
|
||||
},
|
||||
paymentAmount: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入缴费金额!'
|
||||
},
|
||||
{
|
||||
pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
|
||||
message: '请输入合法的金额数字，最多2位小数,11位正数',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
submissionTime: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费日期!'
|
||||
}]
|
||||
},
|
||||
paymentRecord: {
|
||||
rules: [{
|
||||
required: true, message: '请上传缴费凭证!'
|
||||
}]
|
||||
},
|
||||
paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
|
||||
liaisonMan: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入联系人!' },
|
||||
{ min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
invoiceRequirements: {
|
||||
rules: [{
|
||||
required: true, message: '请选择是否需要发票!'
|
||||
}]
|
||||
},
|
||||
headerName: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入付款单位发票抬头!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
taxNumber: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入社会统一代码/税号!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
|
||||
{
|
||||
// pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
|
||||
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
|
||||
// message: '15位、17位、18位、20位数字和大写英文字母',
|
||||
message: '请输入15位、18位的社会统一代码/税号',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
|
||||
invoicePhone: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{
|
||||
pattern: /^((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}$/,
|
||||
message: '请输入正确格式的电话号码',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
|
||||
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
|
||||
reasonsRenewal: {
|
||||
rules: [{
|
||||
required: true, message: '请至少选择一个换证原因!'
|
||||
}]
|
||||
},
|
||||
sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
|
||||
postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 当前登录用户的会员信息
|
||||
currentMemberInfo: {},
|
||||
// 会员缴费信息
|
||||
memberInfoPayment: {},
|
||||
// 续费换证选择证书的flagcheckInvalidDatecheckInvalidDate
|
||||
selectTypeDisabled: true,
|
||||
// 续费会员信pageType息
|
||||
renewMemberInfo: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 证书续费的编辑窗口
|
||||
edit(record) {
|
||||
// 是否要发票设置为false;
|
||||
this.invoiceRequirementsFlag = false
|
||||
// 打包会员设置为false
|
||||
this.paymentMethodFlag = false
|
||||
// 获取证书类型
|
||||
this.selectType = record.certificateType
|
||||
// 数据准备
|
||||
this.currentMemberInfo = {}
|
||||
getAction('/memberInfo/memberInfo/getCurrentMemberInfo').then((res) => {
|
||||
if (res.success) {
|
||||
this.currentMemberInfo = res.result || {}
|
||||
}
|
||||
})
|
||||
this.form.resetFields()
|
||||
this.freeCertificate = Object.assign({}, record)
|
||||
this.renewMemberInfo = Object.assign({}, record)
|
||||
this.model = {}
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
// 是否要发票设置为false;
|
||||
this.invoiceRequirementsFlag = false
|
||||
// 在核对证书的时候，需要设置生效日期的初始值
|
||||
this.checkEffectDate = record.effectDate
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'paymentRecord', 'id', 'auditOpinion', 'address', 'postcode', 'mobile', 'liaisonMan', 'certificateValidDate', 'companyName', 'certificationDate', 'certificateType', 'applyDate', 'effectDate', 'invalidDate', 'certificateStatus', 'memberId', 'code', 'chargeType'))
|
||||
})
|
||||
},
|
||||
// 校验是否选择 要发票
|
||||
invoiceRequirementsChange(value) {
|
||||
this.currentSelectInvoiceType = Number(value)
|
||||
if (this.currentSelectInvoiceType !== 0) {
|
||||
this.invoiceRequirementsFlag = true
|
||||
} else {
|
||||
this.invoiceRequirementsFlag = false
|
||||
}
|
||||
},
|
||||
/* 缴费方式*/
|
||||
changePaymentMethod(value) {
|
||||
// 1 是电汇 2 打包 3 是现金
|
||||
this.isWireTransfer = value
|
||||
this.form.resetFields(['paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
|
||||
if (value !== '1') {
|
||||
this.paymentMethodFlag = true
|
||||
} else {
|
||||
this.paymentMethodFlag = false
|
||||
}
|
||||
},
|
||||
/*
|
||||
* 续费选择换证
|
||||
* */
|
||||
selectcertificateType(val) {
|
||||
this.selectType = val
|
||||
// 记录原始的证书形式
|
||||
const originType = this.model.certificateType
|
||||
// 记录原始的证书代码
|
||||
this.form.resetFields('reasonsRenewal')
|
||||
const originCode = this.model.code
|
||||
if (val !== originType.toString()) {
|
||||
this.selectTypeDisabled = false
|
||||
this.freeCertificate.code = ''
|
||||
} else {
|
||||
this.selectTypeDisabled = true
|
||||
this.freeCertificate.code = originCode
|
||||
}
|
||||
},
|
||||
// 证书续费
|
||||
renewChargeCertificate() {
|
||||
this.handleRenewChargeCertificateOk()
|
||||
},
|
||||
// 添加 证书续费信息
|
||||
handleRenewChargeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/certificatePaymentInfo/addVinChargeInfo'
|
||||
const method = 'post'
|
||||
let formData = Object.assign(this.memberInfoPayment, values)
|
||||
|
||||
// 证书续费信息添加
|
||||
formData.companyName = this.renewMemberInfo.companyName
|
||||
// 续费
|
||||
formData.paymentType = 1
|
||||
// 证书ID
|
||||
formData.certificateId = this.model.id
|
||||
// 缴费时长 默认为 5年
|
||||
formData.paymentTime = 5
|
||||
|
||||
// 添加权限控制
|
||||
formData.memberId = this.loginUserId
|
||||
formData = Object.assign(formData, pick(this.renewMemberInfo, 'address', 'postcode', 'companyName'))
|
||||
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
// 修改证书的状态，和证书的类型
|
||||
const chargeUrl = '/vinCertificate/vinCertificate/renewChargeCertificate'
|
||||
const chargeMethod = 'post'
|
||||
const chargeFormData = Object.assign(this.freeCertificate, values)
|
||||
// 设置证书状态为 已提交
|
||||
chargeFormData.certificateStatus = 2
|
||||
httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 预处理续费信息
|
||||
preSaveRenewChargeCertificate() {
|
||||
this.preHandleRenewChargeCertificateOk()
|
||||
},
|
||||
// 添加 证书续费信息
|
||||
preHandleRenewChargeCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/certificatePaymentInfo/addVinChargeInfo'
|
||||
const method = 'post'
|
||||
let formData = Object.assign(this.memberInfoPayment, values)
|
||||
|
||||
// 证书续费信息添加
|
||||
formData.companyName = this.renewMemberInfo.companyName
|
||||
// 续费
|
||||
formData.paymentType = 1
|
||||
// 证书ID
|
||||
formData.certificateId = this.model.id
|
||||
// 缴费时长 默认为 5年
|
||||
formData.paymentTime = 5
|
||||
|
||||
// 添加权限控制
|
||||
formData.memberId = this.loginUserId
|
||||
|
||||
// 缴费状态为 未提交状态
|
||||
formData.paymentStatus = 0
|
||||
|
||||
formData = Object.assign(formData, pick(this.renewMemberInfo, 'address', 'postcode', 'companyName'))
|
||||
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
// 修改证书的状态，和证书的类型
|
||||
const chargeUrl = '/vinCertificate/vinCertificate/renewChargeCertificate'
|
||||
const chargeMethod = 'post'
|
||||
const chargeFormData = Object.assign(this.freeCertificate, values)
|
||||
chargeFormData.certificateStatus = 0
|
||||
|
||||
httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.close()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form>
|
||||
<div class="container">
|
||||
您的证书申请已收到！请确认您的换证纸质材料已经<br/>
|
||||
邮寄签收并符合换证要求后，自会员资格生效日起，<br/>
|
||||
10个工作日内，您将收到换发的纸质证书。
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel" type="primary" style="text-align: center">确定</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 绑定会员 窗口
|
||||
name: 'BindMemberAffirmModel',
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
visible: false,
|
||||
confirmLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.visible = true
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-search-select-tag
|
||||
dict="certificate_type"
|
||||
:trigger-change="true"
|
||||
@change="vinOrWmi"
|
||||
v-decorator="['certificateType',validatorRules.certificateType]"
|
||||
placeholder="请选择证书类型"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
placeholder="请输入证书代码"
|
||||
v-decorator="['code',validatorRules.clientCode, {initialValue: model.code}]">
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :maxLength="50" v-decorator="['address',validatorRules.address]" placeholder="请输入通讯地址"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input
|
||||
:maxLength="50"
|
||||
v-decorator="['postcode',validatorRules.postcode]"
|
||||
placeholder="请输入邮编"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
disabled
|
||||
date-format="YYYY-MM-DD"
|
||||
placeholder="请选择生效日期"
|
||||
v-decorator="['effectDate',validatorRules.effectDate]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="失效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date
|
||||
disabled
|
||||
date-format="YYYY-MM-DD"
|
||||
placeholder="请选择失效日期"
|
||||
v-decorator="['invalidDate',validatorRules.invalidDate]"
|
||||
:trigger-change="true"
|
||||
style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="12" v-if="selectType == '1'">
|
||||
<a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag
|
||||
v-decorator="['noticeOfFiling']"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择备案通知书"
|
||||
dictCode="notice_of_filing"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="换证原因"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
v-if="selectType == '1' ">
|
||||
<j-multi-select-tag
|
||||
v-decorator="['reasonsRenewal',validatorRules.reasonsRenewal]"
|
||||
dict-code="certificate_type_wmi"
|
||||
placeholder="请选择换证原因"
|
||||
>
|
||||
</j-multi-select-tag>
|
||||
</a-form-item>
|
||||
<a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="selectType == '2'">
|
||||
<j-multi-select-tag
|
||||
v-decorator="['reasonsRenewal',validatorRules.reasonsRenewal]"
|
||||
dict-code="certificate_type_ec"
|
||||
placeholder="请选择换证原因"
|
||||
>
|
||||
</j-multi-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="model.code">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload
|
||||
isLessThan5M
|
||||
:number="1"
|
||||
bizPath="payment"
|
||||
v-decorator="['certificateImg',validatorRules.certificateImg]">
|
||||
</j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="备注" :labelCol="labelColOne" :wrapperCol="wrapperColOne">
|
||||
<a-textarea :maxLength="500" :rows="5" v-decorator="['auditOpinion',validatorRules.auditOpinion]"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
<a-button @click="preReplacementCertificate" type="primary">暂存</a-button>
|
||||
<a-button @click="replacementCertificate" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
|
||||
import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
|
||||
import JImageUpload from '@comp/standardsAssociation/JImageUpload'
|
||||
import JDate from '@comp/tools/JDate'
|
||||
import { httpAction } from '@api/memberManage'
|
||||
import pick from 'lodash.pick'
|
||||
import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
|
||||
export default {
|
||||
// 换证 窗口
|
||||
name: 'ReplaceMentModel',
|
||||
components: {
|
||||
JSearchSelectTag,
|
||||
JMultiSelectTag,
|
||||
JImageUpload,
|
||||
JDate,
|
||||
JDictSelectTag,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '换证',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
pageType: 8,
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
model: {},
|
||||
validatorRules: {
|
||||
defaultRules: {
|
||||
rules: [{ required: true, message: '请选择' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
},
|
||||
code: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入证书代码!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
certificateImg: {
|
||||
rules: [
|
||||
{ required: true, message: '请上传证书文件!' }
|
||||
],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
clientCode: {
|
||||
rules: [
|
||||
{ min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
auditOpinion: {
|
||||
rules: [
|
||||
{ min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
effectDate: {
|
||||
rules: [{
|
||||
required: true, message: '请选择生效日期'
|
||||
}]
|
||||
},
|
||||
invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
|
||||
certificateType: {
|
||||
rules: [{
|
||||
required: true, message: '请输入证书类型!'
|
||||
}]
|
||||
},
|
||||
address: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入通讯地址!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
postcode: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入邮编!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符' }
|
||||
// { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
|
||||
]
|
||||
},
|
||||
paymentMethod: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费方式!'
|
||||
}]
|
||||
},
|
||||
paymentAmount: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入缴费金额!'
|
||||
},
|
||||
{
|
||||
pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
|
||||
message: '请输入合法的金额数字，最多2位小数,11位正数',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
submissionTime: {
|
||||
rules: [{
|
||||
required: true, message: '请输入缴费日期!'
|
||||
}]
|
||||
},
|
||||
paymentRecord: {
|
||||
rules: [{
|
||||
required: true, message: '请上传缴费凭证!'
|
||||
}]
|
||||
},
|
||||
paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
|
||||
invoiceRequirements: {
|
||||
rules: [{
|
||||
required: true, message: '请选择是否需要发票!'
|
||||
}]
|
||||
},
|
||||
headerName: {
|
||||
rules: [
|
||||
{
|
||||
required: true, message: '请输入付款单位发票抬头!'
|
||||
},
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
taxNumber: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入社会统一代码/税号!' },
|
||||
{ min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
|
||||
{
|
||||
// pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
|
||||
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
|
||||
// message: '15位、17位、18位、20位数字和大写英文字母',
|
||||
message: '请输入15位、18位的社会统一代码/税号',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
|
||||
invoicePhone: {
|
||||
rules: [
|
||||
{ required: true, message: '请输入电话号码' },
|
||||
{
|
||||
pattern: /^((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}$/,
|
||||
message: '请输入正确格式的电话号码',
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
|
||||
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
|
||||
reasonsRenewal: {
|
||||
rules: [{
|
||||
required: true, message: '请至少选择一个换证原因!'
|
||||
}]
|
||||
},
|
||||
sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
|
||||
postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
|
||||
},
|
||||
// 记录续费证书选择
|
||||
selectType: 1,
|
||||
labelColOne: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 3 }
|
||||
},
|
||||
wrapperColOne: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 20 }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 换证的编辑窗口
|
||||
edit(record) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
this.selectType = this.model.certificateType
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'certificateImg', 'id', 'auditOpinion', 'address', 'postcode', 'certificateType', 'effectDate', 'invalidDate', 'code'))
|
||||
})
|
||||
},
|
||||
// 换证申请
|
||||
replacementCertificate: function() {
|
||||
this.handleReplacementCertificateOk()
|
||||
},
|
||||
// 添加 换证申请
|
||||
handleReplacementCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/replacementCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 处理状态为已处理
|
||||
formData.certificateStatus = 3
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
that.$emit('affirm')
|
||||
// that.title = '提交成功'
|
||||
// that.disableSubmit = true
|
||||
// that.pageType = 14
|
||||
// that.edit(that.record)
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 换证申请预处理
|
||||
preReplacementCertificate() {
|
||||
this.preHandleReplacementCertificateOk()
|
||||
},
|
||||
// 添加 换证申请
|
||||
preHandleReplacementCertificateOk: function() {
|
||||
const that = this
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true
|
||||
const httpurl = '/vinCertificate/vinCertificate/replacementCertificate'
|
||||
const method = 'post'
|
||||
const formData = Object.assign(this.model, values)
|
||||
// 处理状态为已处理
|
||||
formData.certificateStatus = 0
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
that.visible = false
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 证书下拉框改变
|
||||
* */
|
||||
vinOrWmi(val) {
|
||||
this.selectType = Number(val)
|
||||
this.form.resetFields('reasonsRenewal')
|
||||
},
|
||||
checkInvalidDate(rule, value, callback) {
|
||||
if (value === undefined || value === '' || value == null) {
|
||||
callback(new Error('请选择失效日期'))
|
||||
}
|
||||
console.log(value + ' :' + this.checkEffectDate)
|
||||
var ck = this.checkEffectDate
|
||||
if (!(ck === null || ck === undefined || ck === '')) {
|
||||
if (value < this.checkEffectDate) {
|
||||
callback(new Error('失效日期不能早于生效日期'))
|
||||
}
|
||||
}
|
||||
callback()
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user