Files
income_payments_enterprise_…/src/views/standardsAssociation/PaymentInfo/modules/CombinationPaymentModal.vue
T

1570 lines
55 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<!--收款账户信息 begin-->
<template>
<a-divider orientation="left">收款账户信息 <span
class="charge-notice"
@click="downChargeNotice(newestNoticeInfo.chargeNoticeFileId)">{{
newestNoticeInfo.chargeNoticeName
}}</span></a-divider>
<a-row class="show-row">
<a-col :span="12">
<a-form-item label="账户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>中国汽车技术研究中心有限公司</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>9112000040136004XA</span>
</a-form-item>
</a-col>
</a-row>
<a-row class="show-row">
<a-col :span="12">
<a-form-item label="地址电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>天津市东丽区先锋东路68号 02284370000</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="开户行及账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>中国银行天津天山路支行 272660071602</span>
</a-form-item>
</a-col>
</a-row>
<a-row class="show-row">
<a-col :span="12">
<a-form-item label="联行号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>104110042021</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="银行代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>104110042005</span>
</a-form-item>
</a-col>
</a-row>
</template>
<!-- 收款账户信息 end-->
<a-form :form="form" style="margin-left: 10px">
<!--缴费 方式 费用类型begin -->
<a-divider orientation="left">
缴费信息
</a-divider>
<a-row>
<a-col :span="12">
<a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :disabled=true v-model="companyName" placeholder="请输入单位名称" :maxLength="50"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :disabled=true v-model="liaisonMan" placeholder="请输入联系人" :maxLength="50"></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=true v-model="mobile" placeholder="请输入手机" :maxLength="11"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date
:disabled="checkFlag||detailFlag"
date-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择缴费日期"
v-decorator="['submissionTime',{...validatorRules.submissionTime, initialValue: model.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"
:disabled="checkFlag||detailFlag"
v-decorator="['paymentMethod',validatorRules.paymentMethod]"
:trigger-change="true"
dictCode="payment_method"
placeholder="请选择缴费方式"
@change="changePaymentMethod"/>
</a-form-item>
</a-col>
<!--缴费方式为电汇或者现金 -->
<template v-if="paymentMethodFormValue && !paymentMethodFlag">
<a-col :span="24">
<a-form-item label="缴费凭证/付款说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-image-upload
isLessThan5M
isMultiple
:number="2"
:disabled="checkFlag||detailFlag"
bizPath="payment"
v-decorator="['paymentRecord', validatorRules.paymentRecord]">
</j-image-upload>
</a-form-item>
<span v-if="!validateCompanyNameFlag " class="paymentRecord-notice">需上传"垫付款说明盖章"文件</span>
</a-col>
<a-col :span="12">
<a-form-item label="凭证金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
v-decorator="['proofPaymentAmount',validatorRules.proofPaymentAmount]"
@change="event => event.target.value = event.target.value.trim()"
@blur="changeAllAmount"
placeholder="请输入凭证金额"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
</template>
<!-- 缴费方式为协议会员-->
<template v-if="paymentMethodFormValue && paymentMethodFlag">
<!--<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"-->
<!-- :disabled="checkFlag||detailFlag"-->
<!-- bizPath="payment"-->
<!-- :return-id="true"-->
<!-- v-decorator="['paymentRecord',{ rules: validatorRules.paymentRecord1.rules, initialValue:paymentRecord}]"-->
<!-- :trigger-change="true">-->
<!-- </j-upload>-->
<!-- <span v-show="!checkFlag && !detailFlag" style="color: #bfbfbf">请上传pdf文件</span>-->
<!-- </a-form-item>-->
<!--</a-col>-->
<a-col :span="12">
<a-form-item label="凭证金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
v-decorator="['proofPaymentAmount',validatorRules.proofPaymentAmount]"
@change="event => event.target.value = event.target.value.trim()"
@blur="changeAllAmount"
placeholder="请输入凭证金额"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
</template>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="会员性质" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>{{ memberNature }}</span>
</a-form-item>
</a-col>
</a-row>
<template>
<a-row>
<a-col :span="24">
<a-form-item label="缴费总金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
{{ allAmount }}
(请填写分类金额)<label class="color-red">请至少填写会员缴费金额与证书缴费金额中的一种</label>
</a-form-item>
</a-col>
<!-- <a-col :span="12">-->
<!-- <a-form-item label="会员类型" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <template v-if="memberType === 1 ">-->
<!-- 副理事长单位-->
<!-- </template>-->
<!-- <template v-else>-->
<!-- <span v-if="initVal == '2' ">VIP会员</span>-->
<!-- <span v-else>普通会员</span>-->
<!-- </template>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="会员缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:disabled="checkFlag||detailFlag"
v-decorator="['memberPaymentAmount',validatorRules.memberPaymentAmount]"
:trigger-change="true"
@blur="calculateAllAmount"
@change="event => event.target.value = event.target.value.trim()"
placeholder="请输入会员缴费金额"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="缴费时长" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
:disabled="checkFlag||detailFlag"
@change="changgeType"
type="list"
ref="paymentTimeJdict"
v-decorator="['paymentTime',{ rules: validatorRules.paymentTime.rules, initialValue:paymentTime}]"
:trigger-change="true"
dictCode="payment_time"
placeholder="请选择缴费时长"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="证书缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:disabled="checkFlag||detailFlag"
v-decorator="['certificatePaymentAmount',validatorRules.certificatePaymentAmount]"
@blur="calculateAllAmount"
@change="event => event.target.value = event.target.value.trim()"
placeholder="请输入证书缴费金额"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="其他缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:disabled="checkFlag||detailFlag"
v-decorator="['otherPaymentAmount',validatorRules.certificatePaymentAmount]"
@change="event => event.target.value = event.target.value.trim()"
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="labelCol" :wrapperCol="wrapperCol">
<a-textarea
style="width: 100%"
rows="5"
v-decorator="['remark']"
placeholder="请输入备注"
:maxLength="500"
:disabled="checkFlag||detailFlag"></a-textarea>
</a-form-item>
<span class="remark-notice" style="color: #bfbfbf">一个缴费单可在多个缴费处上传</span>
</a-col>
</a-row>
<!--缴费 方式 费用类型end -->
<!-- 邮寄信息 begin-->
<a-divider orientation="left">邮寄信息</a-divider>
<a-row>
<a-col :span="12">
<a-form-item label="邮寄单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
<company-select
placeholder="请选择邮寄单位"
v-decorator="['companyContact',validatorRules.company]"
@change="companyContactChange"></company-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="邮寄联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select
placeholder="请选择邮寄联系人"
show-search
allowClear
v-decorator="['postContactId']"
option-filter-prop="children"
:filter-option="filterOption"
@change="selectContact"
>
<a-select-option v-for="item in contactsList" :key="item.id" :value="item.id">{{
item.name
}}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入手机号"
:maxLength='11'
disabled
v-decorator="[ 'postContactPhone']"></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
placeholder="请输入邮寄地址"
:maxLength='50'
disabled
v-decorator="[ 'postContactAddress']"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入邮编"
disabled
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9]/g,'')}"
:maxLength="6"
v-decorator="[ 'contactPostCode']"></a-input>
</a-form-item>
</a-col>
</a-row>
<!-- 邮寄信息 end-->
<!-- 申请证书信息begin -->
<!-- 填写了证书缴费金额才显示-->
<template v-if="certificatePaymentAmountFormValue">
<a-divider orientation="left">证书申请信息</a-divider>
<a-row>
<a-col :span="12">
<a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
@change="changeCertificateType"
dictCode="certificate_type"
: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>
<a-col :span="12">
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:maxLength="50"
placeholder="请输入通讯地址"
v-decorator="['address',validatorRules.address]"
></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:maxLength="50"
placeholder="请输入邮编"
v-decorator="['postcode',validatorRules.postcode]"
></a-input>
</a-form-item>
</a-col>
</a-row>
</template>
<!-- 申请证书信息end -->
<!--发票信息 begin-->
<a-divider orientation="left">发票信息</a-divider>
<a-row>
<a-col :span="12">
<a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
:disabled="checkFlag||detailFlag"
@change="invoiceRequirementsChange"
type="list"
v-decorator="['invoiceRequirements',{ rules: validatorRules.invoiceRequirements.rules, initialValue:2,validateTrigger: 'change'},]"
:trigger-change="true"
dictCode="invoice_requirements"
placeholder="请选择发票"/>
<span v-if="currentSelectInvoiceType === 0 " class="other-notice">本选项不提供任何形式的发票凭证</span>
</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
:disabled="checkFlag||detailFlag"
v-decorator="['headerName',{ rules: validatorRules.headerName.rules, initialValue:headerName,validateTrigger: 'blur',},]"
:trigger-change="true"
@change="event => event.target.value = event.target.value.trim()"
@blur="validateCompanyName"
placeholder="请输入付款单位发票抬头"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:disabled="checkFlag||detailFlag"
@change="event => event.target.value = event.target.value.trim()"
v-decorator="['taxNumber',{ rules: validatorRules.taxNumber.rules, validateTrigger: 'blur',initialValue:taxNumber},]"
placeholder="请输入社会统一代码/税号"
:maxLength="50"></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
:disabled="checkFlag||detailFlag"
@change="event => event.target.value = event.target.value.trim()"
v-decorator="['invoiceAddress',{ rules: validatorRules.invoiceAddress.rules, validateTrigger: 'blur', initialValue:invoiceInfoObj.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
:disabled="checkFlag||detailFlag"
v-decorator="['invoicePhone',{ rules: validatorRules.invoicePhone.rules, initialValue: invoiceInfoObj.invoicePhone,validateTrigger: 'blur'}]"
: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
:disabled="checkFlag||detailFlag"
@change="event => event.target.value = event.target.value.trim()"
v-decorator="['depositBank',{ rules: validatorRules.depositBank.rules, validateTrigger: 'blur',initialValue:invoiceInfoObj.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
:disabled="checkFlag||detailFlag"
@change="(e) => {e.target.value = e.target.value.trim()}"
v-decorator="['bankAccount',{ rules: validatorRules.bankAccount.rules, validateTrigger: 'blur',initialValue:invoiceInfoObj.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
:disabled="checkFlag||detailFlag"
@change="(e) => {e.target.value = e.target.value.trim()}"
v-decorator="['linkBankNumber',{ rules: validatorRules.linkBankNumber.rules, validateTrigger: 'blur',initialValue:invoiceInfoObj.linkBankNumber}]"
placeholder="请输入联行号"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
</a-row>
</template>
<!--发票信息 end-->
<!-- 审核 -->
<div v-if="checkFlag" style="position: relative;left: 0px">
<a-divider orientation="left">审核结果</a-divider>
<a-row>
<a-col :span="12">
<a-form-item label="核对结果" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-decorator="['checkResult',validatorRules.checkResult]" @change="onCheckChange">
<a-radio :value="1">通过</a-radio>
<a-radio :value="0">不通过</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-item class="fixed-width-item" label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea
rows="5"
v-decorator="['checkMark',validatorRules.checkMark]"
placeholder="请输入备注"
:maxLength="500"></a-textarea>
</a-form-item>
</a-col>
</a-row>
</div>
<!-- 审核历史 -->
<div v-show="detailFlag">
<a-divider orientation="left">审核信息</a-divider>
<a-table :pagination=false bordered :data-source="checkInfo" :columns="checkColumns">
</a-table>
</div>
</a-form>
</a-spin>
<template slot="footer">
<a-button @click="handleCancel">关闭</a-button>
<a-button
v-show="checkFlag!=true"
v-if="detailFlag!=true"
@click.native="handleTemp"
:disabled="confirmLoading"
type="primary">暂存
</a-button>
<a-button @click="handleOk" type="primary" :disabled="confirmLoading" v-show="!detailFlag">提交</a-button>
</template>
<pre-view-img-modal ref="previewModal"></pre-view-img-modal>
</j-modal>
</template>
<script>
import { httpAction, getFileAccessHttpUrl } from '@/api/memberManage'
import pick from 'lodash.pick'
import JDate from '@/components/tools/JDate'
import JImageUpload from '@/components/standardsAssociation/JImageUpload'
import JDictSelectTag from '@/components/standardsAssociation/JDictSelectTag'
import CompanySelect from '@comp/customSelect/CompanySelect'
import {
getMemberInfoById,
getByMemberTime,
downNewestNotice,
judgeMemberNotApprove, ajaxGetDictItems
} from '@/api/standardsAssociationApi'
import JUpload from '@/components/standardsAssociation/JUpload'
import PreViewImgModal from './PreViewImgModal'
import { commonMemberCost, vipMemberCost,upgradeVip,queryContactList,queryPostInfoById,queryContactInfoByMemberId } from '@api/incomePaymentsApi'
export default {
name: 'PaymentInfoModal',
components: {
JDate,
JImageUpload,
JUpload,
JDictSelectTag,
PreViewImgModal,
CompanySelect
},
data() {
return {
userId: this.$store.getters.userInfo.memberId,
isMember: true,
form: this.$form.createForm(this),
title: '操作',
width: 1000,
visible: false,
model: {},
contactsList:[],// 邮寄联系人下拉框
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
xxl: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 },
xxl: { span: 15 }
},
confirmLoading: false,
// 会员性质
memberType: '',
validatorRules: {
company: {
rules: [{ required: true, message: '请选择单位' }],
validateTrigger: ['blur', 'change'],
initialValue: {}
},
paymentMethod: {
rules: [{
required: true, message: '请选择缴费方式'
}],
validateTrigger: ['blur', 'change']
},
certificateType: {
rules: [{
required: true, message: '请输入证书类型!'
}]
},
invoiceRequirements: {
rules: [{
required: true, message: '请选择发票'
}]
},
paymentType: {
rules: [{
required: true, message: '请选择会员类型'
}],
validateTrigger: ['blur', 'change']
},
billNumber: {
rules: [{
required: true, message: '请输入缴费单号'
}],
validateTrigger: 'blur'
},
serviceCharge: {
rules: [
{
required: true, message: '请输入缴费金额'
},
{
pattern: /^0(\.[0-9]{1,2})*$|^[1-9]\d{0,7}(\.\d{1,2})*$/,
message: '请输入合法的金额数字,最多2位小数,8位正数'
}
],
validateTrigger: 'blur'
},
memberPaymentAmount: {
rules: [
{
required: false, message: '请输入会员缴费金额'
},
{
pattern: /^0(\.[0-9]{1,2})*$|^[1-9]\d{0,7}(\.\d{1,2})*$/,
message: '请输入合法的金额数字,最多2位小数,8位正数'
}
],
validateTrigger: 'blur'
},
proofPaymentAmount: {
rules: [
{
required: true, message: '请输入凭证金额'
},
{
pattern: /^0(\.[0-9]{1,2})*$|^[1-9]\d{0,7}(\.\d{1,2})*$/,
message: '请输入合法的金额数字,最多2位小数,8位正数'
}
],
validateTrigger: 'blur'
},
certificatePaymentAmount: {
rules: [
{
required: false, message: '请输入证书缴费金额'
},
{
pattern: /^0(\.[0-9]{1,2})*$|^[1-9]\d{0,7}(\.\d{1,2})*$/,
message: '请输入合法的金额数字,最多2位小数,8位正数'
}
],
validateTrigger: 'blur'
},
paymentAmount: {
rules: [
{ required: true, validator: this.getByMemberTime },
{
pattern: /^0(\.[0-9]{1,2})*$|^[1-9]\d{0,7}(\.\d{1,2})*$/,
message: '请输入合法的金额数字,最多2位小数,11位正数'
}
], validateTrigger: 'blur'
},
paymentTime: {
rules: [{ required: false, message: '请选择缴费时长' }],
validateTrigger: ['blur', 'change']
},
submissionTime: {
rules: [{ required: true, message: '请选择缴费日期' }],
validateTrigger: ['blur', 'change']
},
effectDate: {
rules: [{ required: false, message: '请选择生效日期' }],
validateTrigger: ['blur', 'change']
},
invalidDate: {
rules: [{ required: false, message: '请选择失效日期' }],
validateTrigger: ['blur', 'change']
},
paymentRecord: { rules: [{ required: false, message: '请上传缴费凭证/付款说明' }] },
paymentRecord1: { rules: [{ required: false, message: '请上传打包协议' }] },
headerName: {
rules: [
{ required: true, message: '请输入付款单位发票抬头', validateTrigger: 'blur' },
{ min: 1, max: 50, message: '长度不超过50个字符' }
],
validateTrigger: 'blur'
},
taxNumber: {
rules: [
{ required: true, message: '请输入社会统一代码/税号', validateTrigger: 'blur' },
{
pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
message: '请输入15位、18位的社会统一代码/税号'
}
],
validateTrigger: 'blur'
},
address: {
rules: [
{ required: true, message: '请输入通讯地址' },
{ min: 1, max: 50, message: '长度不超过50个字符' }
],
validateTrigger: 'blur'
},
postcode: {
rules: [
{ required: true, message: '请输入邮编' },
{ pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'onBlur' }
],
validateTrigger: 'blur'
},
checkResult: {
rules: [
{ required: true, message: '请选择审核结果' }
],
validateTrigger: ['blur', 'change']
},
checkMark: {
rules: [
{ min: 0, max: 500, message: '长度不超过500个字符', validateTrigger: 'onBlur' }
],
validateTrigger: 'blur'
},
invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
invoicePhone: { rules: [{ required: true, validator: this.handleInvoicePhoneCheck }], validateTrigger: 'blur' },
depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
linkBankNumber: { rules: [{ required: true, message: '请输入联行号' }], validateTrigger: 'blur' },
},
url: {
add: '/paymentInfo/add', // 新增接口
edit: '/paymentInfo/edit', // 编辑接口
check: '/paymentInfo/check', // 核对证书的接口
adminEdit: '/paymentInfo/adminEdit', // 管理员编辑 用这个接口
combinationUrl: '/paymentInfo/addCombination' // 组合缴费
},
// 缴费时长 5年vip会员 为true 1年普通会员为 false
typeFlag: false,
certificateType: undefined, // 证书类型
// 缴费时长
payVal: '',
initVal: 1,
// 是否是添加功能
addFlag: false,
// 是否是审核功能
checkFlag: false,
// 是否是查看功能
detailFlag: false,
// 发票选择
invoiceRequirementsFlag: false,
validateCompanyNameFlag: false, // 校验填写的发票名称与单位名称是否一致
// 当前选择是否需要发票的值,用于dom的判断 0-无 1-普通发票 2-增值税发票
currentSelectInvoiceType: 0,
// 缴费方式 false 电汇 /现金 true 会员打包
paymentMethodFlag: false,
paymentMethodFormValue: '', // 缴费方式是否有值
certificatePaymentAmountFormValue: undefined, // 证书缴费金额 用于判断是否显示证书申请信息
// 审核结果 0:驳回 1:通过 2其他
checkResult: 2,
memberId: '',
// 公司名称
companyName: '',
// 联系人
liaisonMan: '',
// 会员性质 副理事长 理事长
memberNature: '',
// 手机
mobile: '',
// 地址
address: '',
// 邮编
postcode: '',
// 抬头
headerName: '',
// 税号
taxNumber: '',
// 2021-09-23 发票信息的 新增字段,为了方便管理,写在同一个对象中
invoiceInfoObj: {
invoiceAddress: '', // 单位地址
invoicePhone: '', // 电话号码
depositBank: '', // 开户银行
bankAccount: '', // 银行账户
invoiceInfoObj: '' // 联行号
},
certificate: [], // 证书信息
checkInfo: [], // 审核信息
// 审核列表
checkColumns: [
{
title: '序号',
dataIndex: 'index',
width: '10%',
align: 'center'
},
{
title: '审批人',
dataIndex: 'checkMember',
width: '15%',
align: 'center'
},
{
title: '审批时间',
dataIndex: 'checkTime',
width: '20%',
align: 'center'
},
{
title: '结果',
dataIndex: 'checkResult',
width: '15%',
align: 'center'
},
{
title: '备注',
dataIndex: 'checkMark',
width: '40%',
align: 'center'
}
],
// 缴费方式初始化
paymentType: 0,
// 缴费时长初始化
paymentTime: 1,
// 缴费记录
paymentRecord: '',
// 缴费单号
billNumber: '',
// 最新的缴费通知单信息
newestNoticeInfo: {},
allAmount: 0 // 缴费总金额
}
},
created() {
},
watch: {
memberType(val) {
console.log('memberType', val)
return val
}
},
methods: {
/**
* 计算其他缴费总金额
* */
calculateAllAmount() {
this.$nextTick(() => {
const memberAmount = this.form.getFieldValue('memberPaymentAmount') ? Number(this.form.getFieldValue('memberPaymentAmount')) : 0
const certificateAmount = this.form.getFieldValue('certificatePaymentAmount') ? Number(this.form.getFieldValue('certificatePaymentAmount')) : 0
this.certificatePaymentAmountFormValue = certificateAmount
this.form.validateFields(['memberPaymentAmount', 'certificatePaymentAmount'], (err) => {
if (!err) {
const otherPaymentAmount = this.allAmount - (memberAmount + certificateAmount)
this.form.setFieldsValue({ otherPaymentAmount })
}
})
})
},
// 下拉框的搜索
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
/**
* 选择公司 回显默认邮寄联系人
* */
async companyChange() {
// 获取对应的来款企业中的信息
const incomeCompanyInfo = await this.getIncomeCompanyInfo(this.memberId)
// 查询企业下联系人列表
this.contactsList = await this.getContactList({ companyId: incomeCompanyInfo.id })
// 获取当前企业的默认邮寄联系人
const initPersonInfo = await this.getContactList({ memberId: this.memberId })
//回显邮寄联系人
this.form.setFieldsValue({
'postContactId': initPersonInfo[0].id,
companyContact:{id:incomeCompanyInfo.id,companyName:incomeCompanyInfo.companyName}
})
// 回显邮寄联系人信息
this.selectContact(initPersonInfo[0].id)
},
/**
* 选择邮寄单位
* */
async companyContactChange(val) {
// 清空 邮寄信息
this.form.resetFields(['postContactId', 'postContactPhone', 'contactPostCode', 'postContactAddress'])
this.contactsList = []
this.contactsList = await this.getContactList({ companyId: val.id })
},
/**
* 查询公司联系人列表
* @param param 传入memberid 查询的事默认值 传入companyId 查询所有的联系人
* */
getContactList(param) {
return new Promise(resolve => {
queryContactList(param).then(res => {
if (res.success) {
resolve(res.result)
}
})
})
},
/**
* 通过会员id查询相关信息
* */
getIncomeCompanyInfo(memberId) {
return new Promise(resolve => {
queryContactInfoByMemberId({ memberId }).then(res => {
if (res.success) {
resolve(res.result.records[0])
}
})
})
},
/**
* 选择邮寄联系人
* */
selectContact(val) {
if (!val) {
// 清除邮寄联系人信息
this.form.resetFields(['postContactPhone', 'contactPostCode', 'postContactAddress'])
}
queryPostInfoById({ id: val }).then(res => {
if (res.success) {
const contactInfo = res.result
// 回显邮寄联系人的信息
this.$nextTick(() => {
this.form.setFieldsValue({
'postContactPhone': contactInfo.phone,
'contactPostCode': contactInfo.postalCode,
'postContactAddress': contactInfo.contactAddress
})
})
}
})
},
/**
* 校验总金额 是否与 凭证金额 一致
* */
validateAllMoney() {
const memberAmount = this.form.getFieldValue('memberPaymentAmount') ? Number(this.form.getFieldValue('memberPaymentAmount')) : 0
const certificateAmount = this.form.getFieldValue('certificatePaymentAmount') ? Number(this.form.getFieldValue('certificatePaymentAmount')) : 0
const otherPaymentAmount = this.form.getFieldValue('otherPaymentAmount') ? Number(this.form.getFieldValue('otherPaymentAmount')) : 0
return Number(this.allAmount) === (memberAmount + certificateAmount + otherPaymentAmount)
},
/**
* 校验 会员缴费与 证书缴费 必须填写一个 并且不能为0
* @return {boolean} true 说明都没有填写 说明填写了
* */
validatePayment() {
const memberAmount = this.form.getFieldValue('memberPaymentAmount') ? Number(this.form.getFieldValue('memberPaymentAmount')) : 0
const certificateAmount = this.form.getFieldValue('certificatePaymentAmount') ? Number(this.form.getFieldValue('certificatePaymentAmount')) : 0
if((memberAmount == false && !memberAmount) && (certificateAmount == false && !certificateAmount)) {
return true
}else {
return false
}
},
changeAllAmount(e) {
this.allAmount = e.target.value
this.calculateAllAmount()
},
/**
* 改变证书类型 世界制造厂证书
* */
changeCertificateType(val) {
this.certificateType = val
},
/**
* 校验发票抬头是否与公司名称一致
* */
validateCompanyName() {
this.validateCompanyNameFlag = this.form.getFieldValue('headerName') === this.companyName
},
validatePaymentMethod(rule, value, callback) {
if (!value) {
callback(new Error('请上传缴费凭证/付款说明'))
} else {
const flag = this.form.getFieldValue('headerName') === this.companyName
if (flag) {
callback()
} else {
callback(new Error('请上传\'垫付款说明(盖章)\'文件'))
}
}
},
/* 添加*/
add() {
this.addFlag = true
this.memberId = this.userId
this.edit({})
},
async edit(record) {
this.form.resetFields()
// 当年是否有缴费通知单
this.getNewestNotice()
this.model = Object.assign({}, record)
if (!this.addFlag) {
this.memberId = record.memberId
this.paymentMethodFormValue = this.model.paymentMethod
// this.form.setFieldsValue({ 'paymentAmount': record.paymentAmount, paymentTime: record.paymentTime })
} else {
this.memberId = this.userId
}
// 回显默认邮寄联系人
this.companyChange()
// 获取会员单位信息
await this.loadMember()
// 发票选择
if (Number(this.model.invoiceRequirements) === 0) {
this.invoiceRequirementsFlag = false
} else {
this.invoiceRequirementsFlag = true
}
// 当前显示的发票类别
this.currentSelectInvoiceType = Number(this.model.invoiceRequirements) || 2
// 缴费方式
if (Number(this.model.paymentMethod) === 2) {
this.paymentMethodFlag = true
} else {
this.paymentMethodFlag = false
}
// vip会员缴费时长 没有升级专用
if (this.model.vipOrCommon === 2) {
this.$nextTick(() => {
ajaxGetDictItems('payment_time', null).then((res) => {
if (res.success) {
const dictOptions = res.result
const index = dictOptions.findIndex(item => item.value === '3')
dictOptions.splice(index, 1)
this.$refs.paymentTimeJdict.setCurrentDictOptions(dictOptions)
}
})
})
}
this.visible = true
// 缴费单号
this.$nextTick(() => {
this.validateCompanyName()
})
},
close() {
this.$emit('close')
this.visible = false
this.addFlag = false
this.typeFlag = false
this.checkFlag = false
this.checkResult = 2
this.checkInfo = []
this.detailFlag = false
this.certificateType = undefined
this.invoiceRequirementsFlag = false
this.paymentMethodFlag = false
this.headerName = ''
this.taxNumber = ''
this.paymentType = 0
this.paymentTime = 1
this.paymentRecord = ''
this.confirmLoading = false
this.model = {}
this.paymentMethodFormValue = ''
this.allAmount = 0
},
handleOk() {
const that = this
// 触发表单验证
that.form.validateFields(async(err, values) => {
if (!err) {
// 校验缴费凭证 或打包协议必填
// if(this.paymentMethodFlag && !values.paymentRecord){
// // 选择了打包协议
// this.$message.warning('请上传打包协议')
// return
// }
if(!this.paymentMethodFlag && !values.paymentRecord) {
this.$message.warning('请上传缴费凭证/付款说明')
return
}
// 校验会员缴费与证书缴费 至少填写一种
if(this.validatePayment()){
this.$message.warning('请至少填写会员缴费金额与证书缴费金额中的一种')
return
}
// 校验合计金额 与凭证金额是否一致
if (!this.validateAllMoney()) {
this.$message.warning('合计金额与凭证金额不一致')
return
}
const flag = await this.judgeMemberNotApproveFunc(this.memberId)
if (flag === 'true') {
that.$confirm({
title: '确认提交',
content: '当前已有待审核缴费订单,为避免重复提交,请确认是否再次提交缴费订单?',
onOk: function() {
that.handleSubmit(values)
},
onCancel: function() {
that.handleCancel()
return
}
})
} else {
this.handleSubmit(values)
}
}
})
},
handleSubmit(values) {
const that = this
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.combinationUrl
method = 'post'
} else {
if (this.checkFlag) {
httpurl += this.url.check
method = 'put'
} else {
httpurl += this.url.edit
method = 'put'
}
}
if (Number(this.checkResult) === 0) {
this.checkResult = 2
this.model.paymentStatus = 2
} else if (Number(this.checkResult) === 1) {
this.checkResult = 2
this.model.paymentStatus = 3
} else {
this.model.paymentStatus = 1
}
const formData = Object.assign(this.model, values)
// 客户要去掉网员服务费字段,但是后端没有去掉校验,所以前端写死
formData.serviceCharge = 0
if (this.typeFlag) {
formData.paymentType = 1
} else {
formData.paymentType = 0
}
formData.postCompanyId = values.companyContact.id
httpAction(httpurl, formData, method).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
})
},
handleTemp() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
// 校验会员缴费与证书缴费 至少填写一种
if(this.validatePayment()){
this.$message.warning('请至少填写会员缴费金额与证书缴费金额中的一种')
return
}
// 校验合计金额 与凭证金额是否一致
if (!this.validateAllMoney()) {
this.$message.warning('合计金额与凭证金额不一致')
return
}
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.combinationUrl
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
this.model.paymentStatus = 0
const formData = Object.assign(this.model, values)
// 客户要去掉网员服务费字段,但是后端没有去掉校验,所以前端写死
formData.serviceCharge = 0
if (this.typeFlag) {
formData.paymentType = 1
} else {
formData.paymentType = 0
}
console.log('表单提交数据', formData)
httpAction(httpurl, formData, method).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.close()
},
popupCallback(row) {
this.form.setFieldsValue(pick(row, 'billNumber', 'companyName', 'paymentType', 'validPeriod', 'paymentTime', 'submissionTime', 'checkTime', 'paymentStatus', 'paymentMethod', 'paymentRecord', 'invoiceRequirements', 'headerName', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'checkResult', 'checkMark', 'checkMember', 'checkMemberId', 'memberId', 'certificate', 'address', 'postcode'))
},
// 根据会员id获取会员信息
loadMember() {
return new Promise(resolve => {
getMemberInfoById({ id: this.memberId }).then((res) => {
if (res.success) {
var memberInfo = res.result
this.companyName = memberInfo.companyName
this.liaisonMan = memberInfo.liaisonMan
this.mobile = memberInfo.mobile
this.address = memberInfo.address
this.postcode = memberInfo.postcode
this.taxNumber = memberInfo.taxNo
this.invoiceInfoObj.invoiceAddress = memberInfo.invoiceAddress
this.invoiceInfoObj.invoicePhone = memberInfo.invoicePhone
this.invoiceInfoObj.depositBank = memberInfo.depositBank
this.invoiceInfoObj.bankAccount = memberInfo.bankAccount
this.invoiceInfoObj.linkBankNumber = memberInfo.linkBankNumber
this.headerName = memberInfo.invoiceInfo
this.memberType = memberInfo.memberNature
this.model.vipOrCommon = memberInfo.memberType
switch (memberInfo.memberNature) {
case 1:
this.memberNature = '副理事单位'
break
case 2:
this.memberNature = '理事单位'
break
case 3:
this.memberNature = '会员单位'
break
default:
break
}
resolve(res.result)
} else {
console.log(res.message)
}
})
})
},
/* 缴费时长选择*/
changgeType(value) {
this.initVal = value
const { form } = this
switch (Number(value)) {
case 2: // 5年
this.typeFlag = true
// 如果是副理事会长单位 vip是 5年 25000 1年是 5000
// 'paymentType': 1, 'paymentAmount': vipMemberCost(this.memberType),
form.setFieldsValue({
'memberPaymentAmount': vipMemberCost(this.memberType)
})
break
case 1:
this.typeFlag = false
// 'paymentType': 0,
// 'paymentAmount': commonMemberCost(this.memberType),
form.setFieldsValue({
'memberPaymentAmount': commonMemberCost(this.memberType)
})
break
case 3:
// 'paymentAmount': upgradeVip(this.memberType),
this.typeFlag = true
form.setFieldsValue({
'memberPaymentAmount': upgradeVip(this.memberType)
})
break
}
this.calculateAllAmount()
},
/* 根据缴费时长,获取缴费金额*/
getByMemberTime(rule, value, callback) {
const paymentAmount = this.form.getFieldValue('paymentAmount')
const type = this.form.getFieldValue('paymentTime')
this.form.resetFields(['paymentAmount', 'paymentTime'])
this.form.setFieldsValue({ 'paymentAmount': paymentAmount, 'paymentTime': type })
// 打包不验证金额
if (!this.paymentMethodFlag) {
if (type === undefined) {
callback('请选择缴费时长')
}
/* 校验时间和金额*/
getByMemberTime({ memberTime: type }).then((res) => {
if (res.success) {
const thresholdSettings = res.result || []
if (thresholdSettings.length === 0) {
callback()
}
for (var thresholdSetting of thresholdSettings) {
if (paymentAmount) {
if (Number(paymentAmount) < Number(thresholdSetting.memberMoney)) {
callback(`缴费金额必须多于${thresholdSetting.memberMoney}`)
} else {
callback()
}
} else {
callback('请先输入金额')
}
}
}
}).catch(() => {
callback()
})
} else {
if (this.typeFlag) {
// 5年 VIP会员
this.paymentType = 1
} else {
// 1年 设置普通会员
this.paymentType = 0
}
callback()
}
},
/* 选择发票*/
invoiceRequirementsChange(value) {
console.log(value, '选择发票')
this.currentSelectInvoiceType = Number(value)
// 0 代表发票选择无
if (this.currentSelectInvoiceType === 0) {
this.invoiceRequirementsFlag = false
} else {
this.invoiceRequirementsFlag = true
}
},
/* 缴费方式*/
changePaymentMethod(value) {
console.log(value, '缴费方式')
// 'paymentType'-会员类型 paymentAmount-缴费金额,paymentTime-缴费时长 'invoiceRequirements'-发票
// this.form.resetFields(['billNumber', 'paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
// this.changgeType(this.paymentTime)
this.paymentMethodFormValue = value
if ((+value) === 2) {
this.paymentMethodFlag = true
} else {
this.paymentMethodFlag = false
}
},
/*
* 下载收费通知单
* */
downChargeNotice(text) {
if (!text) {
this.$message.warning('未知的文件')
return
}
if (text.indexOf(',') > 0) {
text = text.substring(0, text.indexOf(','))
}
const url = getFileAccessHttpUrl(text)
window.open(url, )
},
/*
* 查找最新的缴费通知单
* */
getNewestNotice() {
this.newestNoticeInfo = {}
downNewestNotice().then(res => {
if (res.success) {
this.newestNoticeInfo = Object.assign({}, res.result)
}
})
},
/**
* 判断会员是否有未审核的缴费
* */
judgeMemberNotApproveFunc(id) {
return new Promise(resolve => {
const param = {
memberId: id
}
judgeMemberNotApprove(param).then(res => {
resolve(res.message)
})
})
},
/*
* 验证发票信息-电话号码 的正确性
* */
handleInvoicePhoneCheck(rule, value, callback) {
const reg = /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/
if (!value) {
callback('请输入电话号码')
}
if (value && !reg.test(value)) {
callback(new Error('请输入正确格式的电话号码'))
} else {
callback()
}
}
}
}
</script>
<style scoped lang="less">
/deep/ .certificate-img .ant-form-item {
margin-bottom: 0px;
}
.apply-code-notice {
color: #f5222d;
position: absolute;
bottom: 4px;
left: 25%
}
.charge-notice {
position: absolute;
right: 20px;
top: -20px;
color: #219AFF;
cursor: pointer;
font-size: 14px;
}
.remark {
//margin-left: -100px;
}
.remark .remark-notice {
display: inline-block;
font-size: 14px;
margin-left: 145px;
transform: translateY(-20px);
}
.table {
width: 100%;
height: 180px;
text-align: center;
margin-bottom: 10px;
border-color: #ccc;
border-collapse: collapse;
}
.transalte-y-10 {
transform: translateY(10px);
}
.vin {
width: 160px;
height: 90px;
cursor: pointer;
}
// 2021-09-23 新增固定宽度
/deep/ .ant-form-item-label {
width: 145px !important;
}
// 会员缴费表格的样式修改,防止缴费年限下拉框被遮挡
.payment-table {
z-index: 10;
}
// 收款账户信息样式的修改
.show-row .ant-form-item {
margin-bottom: 0;
}
// 表格日期样式的问题
/deep/ .ant-calendar-body .ant-calendar-tbody tr > td {
padding-top: 0;
padding-bottom: 0;
}
// 失效日期
.date-zindex-invali {
position: relative;
z-index: 9996;
}
.date-zindex-invali-bottom {
position: relative;
z-index: 9995;
}
// 生效日期
.date-zindex-effect {
position: relative;
z-index: 9997;
}
.date-zindex-effect-bottom {
position: relative;
z-index: 9996;
}
/deep/ .vin-table .ant-calendar {
position: fixed;
z-index: 9999;
}
///deep/ .vin-table .ant-table-tbody .ant-table-row td {
// position: relative;
// z-index: 9999;
//}
///deep/ .ant-table-bordered .ant-table-tbody > tr > td {
// position: relative!important;
// z-index: 9999!important;
//}
// 上传额外附件的缴费凭证
.paymentRecord-notice {
color: #f5222d;
position: absolute;
bottom: 25px;
left: 15%
}
// 发票选择无 增加样式
.other-notice {
color: #f5222d;
position: absolute;
bottom: -45px;
left: 0
}
.color-red {
display: inline-block;
margin-left: 8px;
color: #f5222d;
}
</style>