936 lines
36 KiB
Vue
936 lines
36 KiB
Vue
<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="请输入证书代码"
|
||
@blur="changeCode($event)"
|
||
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="vinInfoVisible">
|
||
<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="vinInfoVisible">
|
||
<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>
|
||
<span v-if="!invoiceRequirementsFlag" class="other-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>
|
||
<a-row v-if="currentSelectInvoiceType === 2">
|
||
<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="['linkBankNumber',{ ...validatorRules.linkBankNumber, initialValue:currentMemberInfo.linkBankNumber}]"
|
||
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>
|
||
<a-row v-if="currentSelectInvoiceType === 2">
|
||
<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="['linkBankNumber',{ ...validatorRules.linkBankNumber, initialValue:currentMemberInfo.linkBankNumber}]"
|
||
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,
|
||
vinInfoVisible:false, // 证书其他信息是否显示
|
||
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' },
|
||
linkBankNumber: { 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: {
|
||
changeCode(e){
|
||
const val = e.target.value
|
||
this.vinInfoVisible = !!val
|
||
},
|
||
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
|
||
this.vinInfoVisible = false
|
||
}
|
||
},
|
||
computed: {
|
||
width() {
|
||
if (this.pageType === 14) {
|
||
return 400
|
||
}
|
||
if (this.pageType !== 4) {
|
||
return 1350
|
||
} else {
|
||
return 650
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.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%
|
||
}
|
||
|
||
.other-notice {
|
||
color: #f5222d;
|
||
position: absolute;
|
||
bottom: 4px;
|
||
left: 25%
|
||
}
|
||
</style>
|