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

1312 lines
44 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">
<template>
<a-divider orientation="left">收款账户信息</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>
<a-form :form="form" style="margin-left: 10px" :selfUpdate="true">
<a-divider orientation="left">
缴费信息
<span
v-if="isMember === 'member'"
class="charge-notice"
@click="downChargeNotice(newestNoticeInfo.chargeNoticeFileId)">{{
newestNoticeInfo.chargeNoticeName
}}</span>
</a-divider>
<a-row>
<a-col :span="12">
<a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :disabled=true v-model="memberInfo.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="memberInfo.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="memberInfo.mobile" placeholder="请输入手机号" :maxLength="11"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="会员性质" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>{{ memberNature }}</span>
</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>
<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">
<a-input-number
:disabled="checkFlag||detailFlag"
v-decorator="['paymentAmount',validatorRules.paymentAmount]"
:trigger-change="true"
placeholder="请输入缴费金额"
style="width: 100%"
/>
</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="handleChangePaymentTime"
type="list"
v-decorator="['paymentTime',{ rules: validatorRules.paymentTime.rules, initialValue: paymentTime}]"
:trigger-change="true"
dictCode="payment_time"
placeholder="请选择缴费时长"
:get-popup-container="(node) => node.parentNode || document.body"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="会员类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<span>{{ memberTypeName }}</span>
</a-form-item>
</a-col>
</a-row>
<!--缴费方式为电汇或者现金 -->
<a-row v-if="currentSelectPaymentMethod === PaymentMethodEnums.wireTransfer.index || currentSelectPaymentMethod === PaymentMethodEnums.cash.index">
<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-row>
<!-- 缴费方式为电汇 -->
<div v-if="currentSelectPaymentMethod === PaymentMethodEnums.wireTransfer.index">
<a-row v-show="!addFlag">
<a-col :span="12">
<a-form-item label="缴费单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:disabled=true
v-decorator="['billNumber',{ initialValue:billNumber}]"
placeholder="请输入缴费单号"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
</a-row>
<!--看代码是证书的代码-->
<!--<a-row v-show="!addFlag">-->
<!-- <a-col :span="12">-->
<!-- <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-input :disabled="true" v-model="startTime"></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="endTime"></a-input>-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!--</a-row>-->
</div>
<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 style="color: #bfbfbf">一个缴费单可在多个缴费处上传</span>
</a-col>
</a-row>
<!-- 邮寄信息 begin-->
<a-divider orientation="left">邮寄信息</a-divider>
<a-row>
<a-col :span="12">
<a-form-item label="邮寄单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
<company-select
placeholder="请选择邮寄单位"
:disabled="checkFlag || detailFlag"
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
:disabled="checkFlag || detailFlag"
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-->
<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', validatorRules.invoiceRequirements]"
:trigger-change="true"
dictCode="invoice_requirements"
placeholder="请选择发票" />
</a-form-item>
<span v-if="currentSelectInvoiceType === InvoiceRequirementsEnums.noNeed.index" class="other-notice">本选项不提供任何形式的发票凭证</span>
</a-col>
</a-row>
<template v-if="currentSelectInvoiceType">
<a-row>
<a-col :span="12">
<a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
:disabled="checkFlag||detailFlag"
v-decorator="['headerName',{ ...validatorRules.headerName, initialValue: memberInfo.headerName}]"
: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',{ ...validatorRules.taxNumber, initialValue: memberInfo.taxNumber}]"
placeholder="请输入社会统一代码/税号"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
</a-row>
<template v-if="currentSelectInvoiceType === InvoiceRequirementsEnums.special.index">
<!-- 2021-09-23变更 增加 单位地址 电话号码 开户银行 银行账户 增值税发票的时候存在-->
<a-row >
<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',{ ...validatorRules.invoiceAddress, initialValue: memberInfo.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', { ...validatorRules.invoicePhone, initialValue: memberInfo.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>
<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',{ ...validatorRules.depositBank, initialValue: memberInfo.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',{ ...validatorRules.bankAccount, initialValue: memberInfo.bankAccount }]"
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="checkFlag||detailFlag"
@change="event => event.target.value = event.target.value.trim()"
v-decorator="['linkBankNumber',{ ...validatorRules.linkBankNumber, initialValue: memberInfo.linkBankNumber }]"
placeholder="请输入开户银行"
:maxLength="50"></a-input>
</a-form-item>
</a-col>
</a-row>
</template>
</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 {
getMemberInfoById,
getCheckInfo,
getByMemberTime,
downNewestNotice,
judgeMemberNotApprove
} from '@/api/standardsAssociationApi'
// import JUpload from '@/components/standardsAssociation/JUpload'
import PreViewImgModal from './PreViewImgModal'
import { commonMemberCost, vipMemberCost,upgradeVip,queryContactInfoByMemberId,queryContactList,queryPostInfoById } from '@api/incomePaymentsApi'
import CompanySelect from '@comp/customSelect/CompanySelect'
import {InvoiceRequirementsEnums, PaymentMethodEnums} from '../../../../enums/memberEnums'
export default {
name: 'PaymentInfoModal',
components: {
JDate,
JImageUpload,
JDictSelectTag,
PreViewImgModal,
CompanySelect
},
data() {
return {
PaymentMethodEnums,
InvoiceRequirementsEnums,
// 会员用户id
userId: this.$store.getters.userInfo.memberId,
isMember: true,
form: this.$form.createForm(this, { force: true }),
title: '操作',
width: 1000,
visible: false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
xxl: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 },
xxl: { span: 15 }
},
confirmLoading: false,
validatorRules: {
company: {
rules: [{ required: true, message: '请选择单位' }],
validateTrigger: ['blur', 'change']
},
paymentMethod: {
rules: [{
required: true, message: '请选择缴费方式'
}],
validateTrigger: ['blur', 'change']
},
invoiceRequirements: {
rules: [{
required: true, message: '请选择发票'
}],
validateTrigger: ['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'
},
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: true, message: '请选择缴费时长' }],
validateTrigger: 'change'
},
submissionTime: {
rules: [{ required: true, message: '请选择缴费日期' }],
validateTrigger: 'change'
},
paymentRecord: { 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'
},
// 缴费时长 5年vip会员 为true 1年普通会员为 false
vipFlag: false,
validateCompanyNameFlag: false, // 校验填写的发票名称与单位名称是否一致
// 已选择缴费时长的值
selectPaymentTimeValue: 1,
// 是否是添加功能
addFlag: false,
// 是否是审核功能
checkFlag: false,
// 是否是查看功能
detailFlag: false,
// 当前选择是否需要发票的值,用于dom的判断 0-无 1-普通发票 2-增值税发票
currentSelectInvoiceType: 0,
// form 表单中 当前选择 缴费方式的值 1-电汇 2-打包会员 3现金
currentSelectPaymentMethod: 1,
startTime: '',
endTime: '',
// 邮寄联系人下拉框数据
contactsList:[],
// 审核结果 0:驳回 1:通过 2其他
checkResult: 2,
memberId: '',
// 会员的基本信息,存储联系人 邮寄信息
memberInfo: {
companyName: '', // 公司名称
liaisonMan: '', // 联系人
mobile: '', // 手机
address: '', // 地址
postcode: '', // 邮编
headerName: '', // 发票抬头 对应字段 invoiceInfo
taxNumber: '', // 社会统一代码/税号 对应字段 taxNo
invoiceAddress: '', // 单位地址
invoicePhone: '', // 电话号码
depositBank: '', // 开户银行
bankAccount: '', // 银行账户
linkBankNumber: '' // 联行号
},
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'
}
],
// 缴费时长初始化
paymentTime: 1,
// 缴费单号
billNumber: '',
// 提交
submitFlag: false,
// 最新的缴费通知单信息
newestNoticeInfo: {},
// 会员性质--中文 只用于回显
memberNature: ''
}
},
computed: {
// 页面上显示的会员类型
memberTypeName() {
let result = ''
if(this.memberType === 1) {
result = '副理事单位'
} else {
if(this.selectPaymentTimeValue == '2' || this.selectPaymentTimeValue == '3') {
result = 'VIP会员'
} else {
result = '普通会员'
}
}
return result
}
},
created() {
},
methods: {
/* 添加*/
add() {
this.addFlag = true
this.memberId = this.userId
this.edit({})
},
/* 核对凭证*/
handleCheck(record) {
this.checkFlag = true
this.show(record)
},
/* 查看*/
detail(record) {
this.detailFlag = true
this.show(record)
},
/**
* 校验发票抬头是否与公司名称一致
* */
validateCompanyName() {
this.validateCompanyNameFlag = this.form.getFieldValue('headerName') === this.memberInfo.companyName
},
async show(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
// 会员id 只是用于请求信息
this.memberId = this.model.memberId
// 获取会员信息
await this.loadMember()
// 查找审核信息
this.getCheckInfo(record.id)
// 回显邮寄信息
const incomeCompanyInfo = await this.getIncomeCompanyInfo(this.memberId)
this.setPostContactInfo(incomeCompanyInfo)
var type = this.model.paymentTime
// 缴费时长选择
this.handleChangePaymentTime(type)
this.visible = true
// 发票选择
// 当前显示的发票类别
this.currentSelectInvoiceType = Number(this.model.invoiceRequirements)
// 审核信息--目前并没有发现这个字段的实际作用
this.checkResult = this.model.checkResult
// 缴费时长
this.selectPaymentTimeValue = record.paymentTime + ''
// 判断是否是垫付的状态
this.validateCompanyNameFlag = this.model.headerName === this.memberInfo.companyName
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'paymentMethod', 'submissionTime', 'paymentAmount', 'paymentTime', 'paymentRecord', 'billNumber', 'remark', 'invoiceRequirements', 'headerName', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'linkBankNumber'))
})
},
async edit(record) {
this.form.resetFields()
// 当年是否有缴费通知单
this.getNewestNotice()
this.model = Object.assign({}, record)
if (!this.addFlag) {
this.memberId = this.model.memberId
} else {
this.memberId = this.userId
}
// 获取会员信息
await this.loadMember()
// 获取审核信息
this.getCheckInfo(record.id)
// 回显邮寄信息
const incomeCompanyInfo = await this.getIncomeCompanyInfo(this.memberId)
this.setPostContactInfo(incomeCompanyInfo)
// 获取会员 类型 1年 五年的
// let type = this.model.paymentTime
// 新增 设置 初始缴费金额
if(!this.model.id){
// 判断是否是 副理事单位
this.$nextTick( () => {
this.form.setFieldsValue({paymentAmount: commonMemberCost(this.memberType)})
})
}
// this.startTime = this.model.effectiveDate ? this.model.effectiveDate : ''
// this.endTime = this.model.invalidationDate ? this.model.invalidationDate : ''
// 当前显示的发票类别
this.currentSelectInvoiceType = Number(this.model.invoiceRequirements) || 2
// 缴费时长
this.selectPaymentTimeValue = record.paymentTime + ''
this.visible = true
// 判断是否是垫付的状态
this.validateCompanyNameFlag = this.model.headerName === this.memberInfo.companyName
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'paymentMethod', 'submissionTime', 'paymentAmount', 'paymentTime', 'paymentRecord', 'billNumber', 'remark', 'invoiceRequirements', 'headerName', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'linkBankNumber'))
})
},
// 下拉框的搜索
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
/**
* 回显邮寄信息 如果列表没有 默认为该企业的邮寄信息
* */
async setPostContactInfo(incomeCompanyInfo) {
let companyContact
if (this.model.postCompanyId) {
// 用列表的回显
companyContact = {
id: this.model.postCompanyId,
companyName: this.model.postCompanyName
}
} else {
companyContact = {
id: incomeCompanyInfo.id,
companyName: incomeCompanyInfo.companyName
}
}
// 回显邮寄单位
this.form.setFieldsValue({
'companyContact': companyContact
})
// 查询邮寄单位下的联系人列表
this.contactsList = await this.getContactList({ companyId: companyContact.id })
// 回显 邮寄联系人
if (this.model.postCompanyId) {
this.$nextTick(() => {
this.form.setFieldsValue({
'postContactId': this.model.postContactId,
'postContactPhone': this.model.postContactPhone,
'contactPostCode': this.model.contactPostCode,
'postContactAddress': this.model.postContactAddress
})
})
} else {
// 获取当前企业的默认邮寄联系人
const initPersonInfo = await this.getContactList({ memberId: this.memberId })
this.form.setFieldsValue({
'postContactId': initPersonInfo[0].id
})
// 回显邮寄联系人信息
this.selectContact(initPersonInfo[0].id)
}
},
/**
* 通过会员id查询对应的来款企业的信息
* */
getIncomeCompanyInfo(memberId) {
return new Promise(resolve => {
queryContactInfoByMemberId({ memberId }).then(res => {
if (res.success) {
resolve(res.result.records[0])
}
})
})
},
/**
* 选择邮寄单位
* */
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)
}
})
})
},
/**
* 选择邮寄联系人
* */
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
})
})
}
})
},
close() {
this.$emit('close')
this.visible = false
this.addFlag = false
this.vipFlag = false
this.checkFlag = false
this.checkResult = 2
this.dataSource = []
this.checkInfo = []
this.detailFlag = false
this.headerName = ''
this.taxNumber = ''
this.paymentTime = 1
this.billNumber = ''
this.startTime = ''
this.endTime = ''
this.submitFlag = false
this.selectPaymentTimeValue = 1
},
handleOk() {
const that = this
// 触发表单验证
that.form.validateFields({ force: true }, async (err, values) => {
if (!err) {
// 校验缴费凭证 - 电汇和现金的时候必填
if(this.currentSelectPaymentMethod !== PaymentMethodEnums.pack.index && !values.paymentRecord) {
this.$message.warning('请上传缴费凭证/付款说明')
return
}
// 判断会员是否有未审核的缴费
let 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.add
method = 'post'
} else {
if (this.checkFlag) {
httpurl += this.url.check
} 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)
if (this.vipFlag) {
formData.paymentType = 1
} else {
formData.paymentType = 0
}
// 客户要去掉网员服务费字段,但是后端没有去掉校验,所以前端写死
formData.serviceCharge = 0
that.confirmLoading = false
// return
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) {
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.add
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
this.model.paymentStatus = 0
this.model.address = this.address
this.model.postcode = this.postcode
this.model.headerName = this.headerName
this.model.taxNumber = this.taxNumber
this.model.companyName = this.companyName
const formData = Object.assign(this.model, values)
// 客户要去掉网员服务费字段,但是后端没有去掉校验,所以前端写死
formData.serviceCharge = 0
if (this.vipFlag) {
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()
},
// 根据会员id获取会员信息
loadMember() {
return new Promise(resolve => {
getMemberInfoById({ id: this.memberId }).then((res) => {
if (res.success) {
let memberInfo = res.result
this.memberInfo = {...memberInfo}
this.memberInfo.headerName = memberInfo.invoiceInfo
this.memberInfo.taxNumber = memberInfo.taxNo
// 会员类型
this.memberType = memberInfo.memberNature
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)
}
})
})
},
/* 缴费时长选择*/
handleChangePaymentTime(value) {
this.selectPaymentTimeValue = value
const { form } = this
switch (Number(value)) {
// 1年
case 1: this.vipFlag = false
form.setFieldsValue({ 'paymentAmount': commonMemberCost(this.memberType) })
break
// 5年
case 2:
this.vipFlag = true
form.setFieldsValue({ 'paymentAmount': vipMemberCost(this.memberType) })
break
// 升级专用
case 3:
this.vipFlag = true
form.setFieldsValue({ 'paymentAmount': upgradeVip(this.memberType) })
break
}
},
/* 审核选择*/
onCheckChange(e) {
this.checkResult = e.target.value
},
/* 查找审核信息*/
getCheckInfo(recordId) {
this.checkInfo = []
getCheckInfo({ id: recordId, paymentType: 0 }).then((res) => {
if (res.success) {
this.checkInfo = res.result
}
})
},
/* 根据缴费时长,获取缴费金额*/
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.currentSelectPaymentMethod === PaymentMethodEnums.pack.index) {
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 {
callback()
}
},
/**
* 判断会员是否有未审核的缴费
* */
judgeMemberNotApproveFunc(id) {
return new Promise(resolve => {
const param = {
memberId: id
}
judgeMemberNotApprove(param).then(res => {
resolve(res.message)
})
})
},
/* 选择发票*/
invoiceRequirementsChange(value) {
this.currentSelectInvoiceType = Number(value)
},
/* 缴费方式*/
changePaymentMethod(value) {
this.currentSelectPaymentMethod = Number(value)
if(this.model.billNumber){
this.$nextTick( () => {
this.form.setFieldsValue({
'billNumber':this.model.billNumber
})
})
}
},
/*
* 下载收费通知单
* */
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, '_self')
},
/*
* 查找最新的缴费通知单
* */
getNewestNotice() {
this.newestNoticeInfo = {}
downNewestNotice().then(res => {
if (res.success) {
this.newestNoticeInfo = Object.assign({}, res.result)
}
})
},
/*
* 验证发票信息-电话号码 的正确性
* */
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(new Error('请输入电话号码'))
}
if (value && !reg.test(value)) {
callback(new Error('请输入正确格式的电话号码'))
} else {
callback()
}
},
}
}
</script>
<style scoped lang="less">
.charge-notice {
position: absolute;
right: 20px;
top: -20px;
color: #219AFF;
cursor: pointer;
font-size: 14px;
}
.remark {
//margin-left: -100px;
}
.remark span {
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/ .certificate-img .ant-form-item {
margin-bottom: 0px;
}
// 证书的相关信息
.certificate-box .ant-checkbox-group {
width: 100%;
}
.certificate-item {
position: relative;
}
.check-row {
position: absolute;
top: 8px;
}
// 上传额外附件的缴费凭证
.paymentRecord-notice {
color: #f5222d;
position: absolute;
bottom: 25px;
left: 15%
}
// 发票选择无 增加样式
.other-notice{
color: #f5222d;
position: absolute;
bottom: 4px;
left: 32%
}
</style>