383 lines
10 KiB
Vue
383 lines
10 KiB
Vue
<template>
|
||
<j-modal
|
||
:title="title"
|
||
:width="width"
|
||
:visible="visible"
|
||
:confirmLoading="confirmLoading"
|
||
switchFullscreen
|
||
@ok="handleOk"
|
||
@cancel="handleCancel"
|
||
cancelText="关闭">
|
||
<a-spin :spinning="confirmLoading">
|
||
<a-row :gutter="24" class="flex-col">
|
||
<a-col :span="24">
|
||
<label>会议名称：</label>
|
||
<span>{{ meetingName || model.meetingName }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<section class="base-info">
|
||
<h3 class="title">报名信息</h3>
|
||
<a-row :gutter="24" class="flex-col">
|
||
<a-col :span="24">
|
||
<label>参会单位：</label>
|
||
<span><j-ellipsis :value="model.companyName" :length="40"></j-ellipsis></span>
|
||
</a-col>
|
||
|
||
</a-row>
|
||
<a-row :gutter="24" class="flex-col">
|
||
<a-col :span="12">
|
||
<label>参会人：</label>
|
||
<span><j-ellipsis :value="model.companyContactName" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<label>身份：</label>
|
||
<span><j-ellipsis :value="model.identity_dictText" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24" class="flex-col">
|
||
<a-col :span="12">
|
||
<label>手机号：</label>
|
||
<span><j-ellipsis :value="model.phone" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<label>付款方式：</label>
|
||
<span><j-ellipsis :value="model.payMode_dictText " :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24" class="flex-col">
|
||
<a-col :span="12">
|
||
<label>需要发票：</label>
|
||
<span><j-ellipsis :value="model.needInvoice_dictText" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12" v-if="model.needInvoice !== 0">
|
||
<label>发票邮寄地址：</label>
|
||
<span><j-ellipsis :value="model.postContactAddress" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
</a-row>
|
||
<!-- 打包 或者不需要发票 不显示 邮寄信息 -->
|
||
<a-row :gutter="24" v-if="model.needInvoice !== 0" class="flex-col">
|
||
<a-col :span="12">
|
||
<label>邮编：</label>
|
||
<span><j-ellipsis :value="model.postCode" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
</a-row>
|
||
</section>
|
||
<section class="base-info">
|
||
<h3 class="title">付款凭证</h3>
|
||
<!--上传了付款凭证才显示 -->
|
||
<a-row :gutter="24" v-if="model.paymentRecord" class="flex-col">
|
||
<a-col :span="12">
|
||
<label>审核凭证</label>
|
||
<span>{{ model.checkResult_dictText }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24" v-if="model.paymentRecord" class="info-textarea flex-col">
|
||
<!-- 驳回才显示驳回原因-->
|
||
<a-col :span="24" v-if="model.checkResult === 2 ">
|
||
<label>驳回原因：</label>
|
||
<span>{{ model.checkRemark }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-form :form="form">
|
||
<!-- 审核通过后 或者 报名状态为凭证审核中的 禁止上传 -->
|
||
<a-row :gutter="24" style="transform: translateX(-12px)">
|
||
<a-col :xl="12" :sm="24">
|
||
<a-form-item label="付款凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<j-image-upload v-decorator="['paymentRecord',validatorRules.paymentRecord]" :disabled="checkBool"
|
||
:return-id="true"></j-image-upload>
|
||
</a-form-item>
|
||
</a-col>
|
||
<!-- 缴费方式线上缴费的需要订单后四位-->
|
||
<a-col :xl="12" :sm="24" v-if="payModeOnlineBool">
|
||
<a-form-item label="缴费订单后四位" :labelCol="labelColTemp" :wrapperCol="wrapperColTemp">
|
||
<a-input placeholder="请输入缴费订单后四位" :maxLength="4" v-decorator="['orderCode',validatorRules.orderCode]"
|
||
:disabled="checkBool"
|
||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9A-Za-z]/g,'')}"></a-input>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
</a-form>
|
||
</section>
|
||
</a-spin>
|
||
|
||
<template slot="footer">
|
||
<a-button @click="handleCancel">关闭</a-button>
|
||
<!-- 审核通过不显示确认按钮 -->
|
||
<a-button v-if="!checkBool" @click="handleOk" type="primary" :disabled="confirmLoading">确定</a-button>
|
||
</template>
|
||
</j-modal>
|
||
</template>
|
||
|
||
<script>
|
||
import {httpAction} from '@api/manage'
|
||
import JImageUpload from '@comp/jero/JImageUpload'
|
||
import {getSingUpUserInfo} from '@api/incomePaymentsApi'
|
||
|
||
export default {
|
||
name: 'UploadMeetingCertificateModal',
|
||
data() {
|
||
return {
|
||
title: '上传凭证',
|
||
width: 800,
|
||
visible: false,
|
||
confirmLoading: false,
|
||
form: this.$form.createForm(this),
|
||
model: {},
|
||
labelCol: {
|
||
xs: {span: 24},
|
||
sm: {span: 5}
|
||
},
|
||
wrapperCol: {
|
||
xs: {span: 24},
|
||
sm: {span: 19}
|
||
},
|
||
labelColTemp: {
|
||
xs: {span: 24},
|
||
sm: {span: 9}
|
||
},
|
||
wrapperColTemp: {
|
||
xs: {span: 24},
|
||
sm: {span: 15}
|
||
},
|
||
validatorRules: {
|
||
paymentRecord: {
|
||
rules: [{required: false, message: '请上传汇款凭证'}],
|
||
validateTrigger: 'change'
|
||
},
|
||
orderCode: {
|
||
rules: [{required: true, validator: this.validateOrderCode}],
|
||
validateTrigger: 'blur'
|
||
},
|
||
},
|
||
url: {
|
||
edit: '/meeting/payMeetingSituation/editTerminal'
|
||
},
|
||
// 会议名称
|
||
meetingName: '',
|
||
// 是否是线上缴费方式
|
||
payModeOnlineBool: false,
|
||
// 审核是否通过
|
||
checkBool: false,
|
||
// 参会人id
|
||
singUpPerosnId: ''
|
||
}
|
||
},
|
||
components: {
|
||
JImageUpload
|
||
},
|
||
computed: {
|
||
// eslint-disable-next-line
|
||
genderTest() {
|
||
if (this.$store.getters.userInfo.gender === 1) {
|
||
return '男'
|
||
} else if (this.$store.getters.userInfo.gender === 2) {
|
||
return '女'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
open(param) {
|
||
// 判断是否是 消息进来的
|
||
this.singUpPerosnId = param.situationId ? param.situationId : param.id
|
||
this.form.resetFields()
|
||
this.visible = true
|
||
this.meetingName = param.meetingName
|
||
if (param.id) {
|
||
// 获取参会人信息
|
||
this.querySingUpUserInfo(this.singUpPerosnId).then(res => {
|
||
this.model = {}
|
||
this.model = res
|
||
// 是否是线上缴费
|
||
this.payModeOnlineBool = this.model.payMode === 2 || false
|
||
// 如果缴费方式为汇款的并且上传了缴费凭证 回显缴费凭证
|
||
if (this.model.paymentRecord && this.model.payMode === 1) {
|
||
this.form.setFieldsValue({'paymentRecord': this.model.paymentRecord})
|
||
}
|
||
// 如果缴费方式为线上缴费并且上传了缴费凭证和订单后四位 需要回显
|
||
if (this.model.paymentRecord && this.model.payMode === 2) {
|
||
this.$nextTick(() => {
|
||
this.form.setFieldsValue({'paymentRecord': this.model.paymentRecord, 'orderCode': this.model.orderCode})
|
||
})
|
||
}
|
||
// 审核通过以后不可在上传 凭证审核中 只能查看
|
||
if (this.model.checkResult === 1 || param.signUpStatus === 2) {
|
||
this.checkBool = true
|
||
} else {
|
||
this.checkBool = false
|
||
}
|
||
|
||
})
|
||
}
|
||
},
|
||
close() {
|
||
this.visible = false
|
||
},
|
||
handleOk() {
|
||
const that = this
|
||
this.form.validateFields((err, values) => {
|
||
if (!err) {
|
||
that.confirmLoading = true
|
||
let method = 'post'
|
||
let url = this.url.edit
|
||
const formData = Object.assign({}, values)
|
||
formData.id = this.singUpPerosnId
|
||
httpAction(url, formData, method).then(res => {
|
||
if (res.success) {
|
||
that.$message.success(res.message)
|
||
that.$emit('ok')
|
||
that.handleCancel()
|
||
that.confirmLoading = false
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
}).finally(() => {
|
||
that.confirmLoading = false
|
||
})
|
||
} else {
|
||
this.confirmLoading = false
|
||
}
|
||
|
||
})
|
||
},
|
||
handleCancel() {
|
||
this.close()
|
||
},
|
||
/*
|
||
* 获取参会人信息
|
||
* */
|
||
querySingUpUserInfo(id) {
|
||
return new Promise(resolve => {
|
||
let result = {}
|
||
getSingUpUserInfo({id}).then(res => {
|
||
if (res.success) {
|
||
result = res.result
|
||
}
|
||
}).finally(() => {
|
||
resolve(result)
|
||
})
|
||
})
|
||
},
|
||
/*
|
||
* 校验后四位
|
||
* */
|
||
validateOrderCode(rule, value, callback) {
|
||
if (value === undefined || value === '' || value === null) {
|
||
callback('请输入缴费订单后四位')
|
||
}
|
||
if (value && value.length === 4) {
|
||
callback()
|
||
} else {
|
||
callback('请输入四位缴费订单后四位')
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
|
||
.info {
|
||
.ant-col {
|
||
span {
|
||
display: inline-block;
|
||
word-break: keep-all;
|
||
white-space: nowrap;
|
||
max-width: calc(100% - 100px);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
//会议内容、备注的样式
|
||
.info-textarea {
|
||
display: flex;
|
||
|
||
label {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.flex-col {
|
||
.ant-col {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.ant-row {
|
||
margin: 12px;
|
||
}
|
||
|
||
h3 {
|
||
position: relative;
|
||
}
|
||
|
||
label {
|
||
color: #666;
|
||
}
|
||
|
||
.contract-num {
|
||
color: #42b983;
|
||
cursor: pointer;
|
||
}
|
||
|
||
h3.title::before {
|
||
position: absolute;
|
||
top: 4px;
|
||
left: -10px;
|
||
content: "";
|
||
height: 20px;
|
||
width: 3px;
|
||
background: #069f99;
|
||
}
|
||
|
||
/* 到账信息 */
|
||
.payment-info {
|
||
margin-bottom: 14px;
|
||
|
||
&-title {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
letter-spacing: 1px;
|
||
color: #fff;
|
||
background: #a2e6e4;
|
||
}
|
||
|
||
&-content {
|
||
color: #424242;
|
||
//background: #efefef;
|
||
padding: 5px;
|
||
padding-left: 10px;
|
||
border: 1px solid #ccc;
|
||
border-top: none;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
/* 开票邮寄信息 */
|
||
.wrap-table {
|
||
border: 1px solid #ccc;
|
||
border-bottom: none;
|
||
}
|
||
|
||
/deep/ .ant-table-thead {
|
||
tr > th {
|
||
color: #fff;
|
||
background: #a2e6e4;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
/deep/ .ant-table-tbody {
|
||
tr > td {
|
||
border: none;
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
}
|
||
</style>
|