我的消息开发
This commit is contained in:
fengachen
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<!--会议信息begin-->
|
||||
<section class="base-info">
|
||||
<h3 class="title">会议信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>会议名称：</label>
|
||||
<span><j-ellipsis :value="model.meetingName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>会议类型：</label>
|
||||
<span><j-ellipsis :value="generateMeetingType(model.meetingType)" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>召开时间：</label>
|
||||
<span>{{model.startTime + '~' + model.endTime}}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>年份：</label>
|
||||
<span><j-ellipsis :value="model.particularYear" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>召开地点：</label>
|
||||
<span><j-ellipsis :value="model.venue + '/' + model.address"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>负责人：</label>
|
||||
<span><j-ellipsis :value="model.directorName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>报名截止时间：</label>
|
||||
<span><j-ellipsis :value="model.registerDeadline" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>会议通知：</label>
|
||||
<span><preview-file :file-id="model.meetingFiles"></preview-file></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="24">
|
||||
<label>会议内容：</label>
|
||||
<span><j-ellipsis :value="model.meetingContent" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</section>
|
||||
<!--会议信息end-->
|
||||
<!--报名信息begin-->
|
||||
<section class="base-info">
|
||||
<h3 class="title">报名信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>参会单位：</label>
|
||||
<span><j-ellipsis :value="model.principalName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>参会人：</label>
|
||||
<span><j-ellipsis :value="model.principalName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>身份：</label>
|
||||
<span><j-ellipsis :value="model.receivableAmount" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>性别：</label>
|
||||
<span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>手机号：</label>
|
||||
<span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>付款方式：</label>
|
||||
<span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>需要发票：</label>
|
||||
<span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>发票邮寄地址：</label>
|
||||
<span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>邮编：</label>
|
||||
<span><j-ellipsis :value="model.remarks" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</section>
|
||||
<!--报名信息end-->
|
||||
<!--会议资料begin-->
|
||||
<section class="base-info">
|
||||
<h3 class="title">会议资料</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>参会单位：</label>
|
||||
<span><j-ellipsis :value="model.principalName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</section>
|
||||
<!--会议资料end-->
|
||||
<!--开票邮寄信息begin-->
|
||||
<section class="base-info">
|
||||
<h3 class="title">开票邮寄信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>参会单位：</label>
|
||||
<span><j-ellipsis :value="model.principalName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</section>
|
||||
<!--开票邮寄信息end-->
|
||||
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PreviewFile from '@comp/jero/PreviewFile'
|
||||
import JEllipsis from '@comp/jero/JEllipsis'
|
||||
import {getMeetInfoById} from '@api/incomePaymentsApi'
|
||||
// import {getSingUpUserInfo} from '@api/incomePaymentsApi'
|
||||
|
||||
export default {
|
||||
name: 'MeetingDetailModal',
|
||||
components:{
|
||||
PreviewFile,
|
||||
JEllipsis
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '会议详情',
|
||||
width: 800,
|
||||
visible: false,
|
||||
model: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(param) {
|
||||
this.visible = true
|
||||
if(param){
|
||||
this.queryMeetingInfoById(param.id).then(res => {
|
||||
// 会议详情
|
||||
this.model = Object.assign({},res)
|
||||
console.log(this.model,'this.model')
|
||||
})
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
},
|
||||
/*
|
||||
* 通过会议id获取会议性情
|
||||
* */
|
||||
queryMeetingInfoById(id){
|
||||
return new Promise(resolve => {
|
||||
let result = {}
|
||||
getMeetInfoById({id}).then(res => {
|
||||
if(res.success){
|
||||
result = res.result
|
||||
}
|
||||
}).finally( () => {
|
||||
resolve(result)
|
||||
})
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 会议类型 1 工作组会议 2 标协会议 3国际研讨会 4 其他会议
|
||||
* */
|
||||
generateMeetingType(val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
return '工作组会议'
|
||||
case '2':
|
||||
return '标协会议'
|
||||
case '3':
|
||||
return '国际研讨会'
|
||||
case '4':
|
||||
return '其他会议'
|
||||
default:
|
||||
return '其他会议'
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.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: 2px;
|
||||
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>
|
||||
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<!-- 基本信息begin-->
|
||||
<section class="base-info">
|
||||
<h3 class="title">基本信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>项目负责人：</label>
|
||||
<span><j-ellipsis :value="basicInfo.principalName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>应收金额：</label>
|
||||
<span><j-ellipsis :value="basicInfo.receivableAmount" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>备注：</label>
|
||||
<span><j-ellipsis :value="basicInfo.remarks" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 来款方式为合同的显示-->
|
||||
<a-row :gutter="24" v-if="!!basicInfo.contractNum">
|
||||
<a-col :span="12">
|
||||
<label>{{createIncomeType(basicInfo.projectType)}}：</label>
|
||||
<span>{{ basicInfo.chargeWay_dictText }}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>合同编号：</label>
|
||||
<span class="contract-num" @click="toContractDetail">{{ basicInfo.contractNum }}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</section>
|
||||
<!-- 基本信息end-->
|
||||
<!-- 企业信息begin-->
|
||||
<section class="enterprise-info">
|
||||
<h3 class="title">企业信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>来款企业：</label>
|
||||
<span><j-ellipsis :value="basicInfo.companyName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>企业联系人：</label>
|
||||
<span>{{ basicInfo.name }}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>企业联系人性别：</label>
|
||||
<span>{{ basicInfo.gender_dictText }}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>企业联系人职务：</label>
|
||||
<span>{{ basicInfo.post }}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>企业联系人电话：</label>
|
||||
<span>{{ basicInfo.phone }}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>企业联系人邮箱：</label>
|
||||
<span>{{ basicInfo.email }}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>企业联系人邮编：</label>
|
||||
<span>{{ basicInfo.postalCodeContacts }}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>企业联系人地址：</label>
|
||||
<span><j-ellipsis :value="basicInfo.contactAddress" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>是否需要发票：</label>
|
||||
<span>{{ basicInfo.needInvoice_dictText }}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>是否打包：</label>
|
||||
<span>{{ basicInfo.pack_dictText }}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>企业邮编：</label>
|
||||
<span>{{ basicInfo.postalCodeCompany }}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>企业地址：</label>
|
||||
<span><j-ellipsis :value="basicInfo.companyAddress" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</section>
|
||||
<!--企业信息end-->
|
||||
<!--到账信息begin-->
|
||||
<section class="payment-info">
|
||||
<h3 class="title">到账信息</h3>
|
||||
<section class="payment-info-title">到账信息</section>
|
||||
<div class="payment-info-content" v-for="item of paymentInfoList" :key="item.id">
|
||||
{{ item.paymentDate }}到账{{ item.amountReceived }}元
|
||||
</div>
|
||||
</section>
|
||||
<!--到账信息end-->
|
||||
<!--开票邮寄信息begin-->
|
||||
<section class="logistics-info">
|
||||
<h3 class="title">开票邮寄信息</h3>
|
||||
<div class="wrap-table">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:columns="columns"
|
||||
:dataSource="logisticsInfoList"
|
||||
class="j-table-force-nowrap"
|
||||
>
|
||||
<span slot="action" class="action-span-cell">
|
||||
<a @click="lookLogistics()">查看物流</a>
|
||||
</span>
|
||||
<!-- <p slot="expandedRowRender" slot-scope="record" style="margin: 0">-->
|
||||
<!-- {{ record.sendDate }}-->
|
||||
<!-- </p>-->
|
||||
</a-table>
|
||||
</div>
|
||||
</section>
|
||||
<!--开票邮寄信息end-->
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {queryCommonProjectById} from '@api/incomePaymentsApi'
|
||||
import JEllipsis from '@comp/jero/JEllipsis'
|
||||
// import {getAction} from "@api/manage";
|
||||
const paymentInfoList = [
|
||||
{
|
||||
id: 1001,
|
||||
year: '2021',
|
||||
money: '200'
|
||||
},
|
||||
{
|
||||
id: 1002,
|
||||
year: '2021',
|
||||
money: '200'
|
||||
},
|
||||
{
|
||||
id: 1003,
|
||||
year: '2021',
|
||||
money: '200'
|
||||
},
|
||||
]
|
||||
const logisticsInfoList = [
|
||||
{
|
||||
id: '01',
|
||||
person: '张三',
|
||||
time: '2021年10月21',
|
||||
money: '200',
|
||||
piaoNo: '123456',
|
||||
projects: ['项目一', '项目二', '项目三'],
|
||||
postPerson: '李四',
|
||||
postTime: '2021年10月21',
|
||||
emsOrSF: 'EMS',
|
||||
postNo: '123456'
|
||||
}
|
||||
]
|
||||
const columns = [
|
||||
{
|
||||
title: '开票人',
|
||||
align: 'center',
|
||||
dataIndex: 'createBy',
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
align: 'center',
|
||||
dataIndex: 'billDate',
|
||||
},
|
||||
{
|
||||
title: '金额(元)',
|
||||
align: 'center',
|
||||
dataIndex: 'invoiceAmount',
|
||||
},
|
||||
{
|
||||
title: '票号',
|
||||
align: 'center',
|
||||
dataIndex: 'billNo',
|
||||
},
|
||||
{
|
||||
title: '项目',
|
||||
align: 'center',
|
||||
dataIndex: 'chargeCompanyName',
|
||||
},
|
||||
{
|
||||
title: '邮寄人',
|
||||
align: 'center',
|
||||
dataIndex: 'liaisonMan',
|
||||
},
|
||||
{
|
||||
title: '快递',
|
||||
align: 'center',
|
||||
dataIndex: 'sendMethod',
|
||||
},
|
||||
{
|
||||
title: '快递单号',
|
||||
align: 'center',
|
||||
dataIndex: 'postNo',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
dataIndex: '',
|
||||
scopedSlots: {customRender: 'action'}
|
||||
},
|
||||
]
|
||||
export default {
|
||||
name: 'ProjectDetailModal',
|
||||
props: {
|
||||
// 字段名称是否非id，适用于票据邮寄等页面id不是项目id的情况
|
||||
notId: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '项目详情模态框',
|
||||
width: 800,
|
||||
visible: false,
|
||||
title: '项目信息',
|
||||
// 当前项目id
|
||||
currentProjectId: '',
|
||||
// 基本信息
|
||||
basicInfo: {},
|
||||
// 企业信息
|
||||
enterpriseInfo: {},
|
||||
// 联系人信息
|
||||
contactsInfo: {},
|
||||
columns,
|
||||
// 到账信息
|
||||
paymentInfoList,
|
||||
// 开票邮寄信息
|
||||
logisticsInfoList,
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
components: {
|
||||
JEllipsis
|
||||
},
|
||||
methods: {
|
||||
open(record) {
|
||||
this.visible = true
|
||||
// 记录当前项目id
|
||||
if (this.notId) {
|
||||
this.currentProjectId = record.projectId
|
||||
} else {
|
||||
this.currentProjectId = record.id
|
||||
}
|
||||
// 通过id查询项目详情
|
||||
queryCommonProjectById({id: this.currentProjectId}).then(res => {
|
||||
if (res.success) {
|
||||
console.log(res.result, 'res.result')
|
||||
// 项目信息
|
||||
this.basicInfo = res.result
|
||||
// 到账信息
|
||||
this.paymentInfoList = res.result.paymentRecord
|
||||
// 开票邮寄信息
|
||||
this.logisticsInfoList = res.result.mailBill
|
||||
} else {
|
||||
console.log('未查到相应的信息')
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
},
|
||||
/*
|
||||
* 生成每一个开票信息
|
||||
* */
|
||||
createItemInfo(item) {
|
||||
let porjectItem = ''
|
||||
if (item.projects.length > 0) {
|
||||
item.projects.forEach((val, index) => {
|
||||
if (index === item.projects.length - 1) {
|
||||
porjectItem += val
|
||||
} else {
|
||||
porjectItem += val + '、'
|
||||
}
|
||||
})
|
||||
}
|
||||
return `${item.person}于${item.time}开票，金额为:${item.money}元,票号:${item.piaoNo},项目:${porjectItem}`
|
||||
},
|
||||
/*
|
||||
* 查看物流
|
||||
* */
|
||||
lookLogistics() {
|
||||
window.open('https://www.ems.com.cn/', '_blank')
|
||||
},
|
||||
/*
|
||||
* 去合同详情 传入合同id
|
||||
* */
|
||||
toContractDetail() {
|
||||
if(this.basicInfo.contractId){
|
||||
this.$router.push({
|
||||
path: '/contractManagement/RevenueContractDetail', query: {
|
||||
revenueId: this.basicInfo.contractId
|
||||
}
|
||||
})
|
||||
}else {
|
||||
this.$message.warn('该项目未与合同关联')
|
||||
}
|
||||
},
|
||||
/*
|
||||
* 每一个项目的来款方式不同
|
||||
* */
|
||||
createIncomeType(val) {
|
||||
if (val === 1 || val === 2 || val === 4) {
|
||||
return '来款方式'
|
||||
}else {
|
||||
return '缴费方式'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.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: 2px;
|
||||
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>
|
||||
@@ -0,0 +1,259 @@
|
||||
<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">
|
||||
<a-col :span="12">
|
||||
<label>会议名称：</label>
|
||||
<span>{{model.meetingName}}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<section class="base-info">
|
||||
<h3 class="title">报名信息</h3>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>参会单位：</label>
|
||||
<span><j-ellipsis :value="model.companyName" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<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">
|
||||
<a-col :span="12">
|
||||
<label>性别：</label>
|
||||
<span><j-ellipsis :value="model.sex" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>手机号：</label>
|
||||
<span><j-ellipsis :value="model.phone" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>付款方式：</label>
|
||||
<span><j-ellipsis :value="model.payMode_dictText " :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>需要发票：</label>
|
||||
<span><j-ellipsis :value="model.needInvoice_dictText" :length="20"></j-ellipsis></span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>发票邮寄地址：</label>
|
||||
<span><j-ellipsis :value="model.postContactAddress" :length="20"></j-ellipsis></span>
|
||||
</a-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-form :form="form">
|
||||
<a-row :gutter="24">
|
||||
<a-col :xl="12" :sm="24">
|
||||
<a-form-item label="付款凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-image-upload v-decorator="['paymentRecord',validatorRules.paymentRecord]" :return-id="true"></j-image-upload>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
</section>
|
||||
|
||||
|
||||
</a-spin>
|
||||
</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: 6}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 18}
|
||||
},
|
||||
validatorRules: {
|
||||
paymentRecord: {
|
||||
rules: [{required: false, message: '请上传汇款凭证'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
},
|
||||
url: {
|
||||
edit:'/meeting/payMeetingSituation/edit'
|
||||
}
|
||||
}
|
||||
},
|
||||
components:{
|
||||
JImageUpload
|
||||
},
|
||||
methods:{
|
||||
open(param){
|
||||
this.visible = true
|
||||
if(param.id){
|
||||
this.querySingUpUserInfo(param.id).then(res => {
|
||||
this.model = res
|
||||
})
|
||||
}
|
||||
},
|
||||
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)
|
||||
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)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.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: 2px;
|
||||
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>
|
||||
Reference in New Issue
Block a user