479 lines
13 KiB
Vue
479 lines
13 KiB
Vue
<template>
|
||
<j-modal
|
||
:title="title"
|
||
:width="width"
|
||
:visible="visible"
|
||
switchFullscreen
|
||
@cancel="handleCancel"
|
||
cancelText="关闭">
|
||
<a-spin :spinning="basicLoading">
|
||
<!-- 基本信息begin-->
|
||
<section class="base-info">
|
||
<h3 class="title">基本信息</h3>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12" class="detail-item">
|
||
<label>项目名称：</label>
|
||
<span><j-ellipsis :value="basicInfo.chargeProject" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<!-- 我的项目--款项用途-->
|
||
<a-col :span="12" v-if="basicInfo.projectType === 1" class="detail-item">
|
||
<label>款项用途：</label>
|
||
<span><j-ellipsis :value="basicInfo.chargeUse_dictText" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12" class="detail-item">
|
||
<label>项目负责人：</label>
|
||
<span><j-ellipsis :value="basicInfo.principalName" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12" class="detail-item">
|
||
<label>应付金额：</label>
|
||
<span><j-ellipsis :value="`${basicInfo.receivableAmount}元`" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12" class="detail-item">
|
||
<label>实付金额：</label>
|
||
<span><j-ellipsis :value="`${basicInfo.paidAmount}元`" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12" class="detail-item">
|
||
<label>打包：</label>
|
||
<span><j-ellipsis :value="basicInfo.pack_dictText" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12" class="detail-item">
|
||
<label>需要发票：</label>
|
||
<span><j-ellipsis :value="basicInfo.needInvoice_dictText" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12" class="detail-item">
|
||
<label>付款方式：</label>
|
||
<span><j-ellipsis :value="basicInfo.chargeWay_dictText" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<!-- 合同-->
|
||
<a-col :span="12" v-if="basicInfo.chargeWay === 2" class="detail-item">
|
||
<label>合同编号：</label>
|
||
<span><j-ellipsis :value="basicInfo.contractNum"
|
||
:length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<!-- 收费通知-->
|
||
<a-col :span="12" v-if="basicInfo.chargeWay === 3" class="detail-item">
|
||
<label>收费通知号：</label>
|
||
<span><j-ellipsis :value="basicInfo.chargeNoticeNo" :length="20"></j-ellipsis></span>
|
||
</a-col>
|
||
<a-col :span="12" v-if="basicInfo.chargeWay === 3" class="detail-item">
|
||
<label>收费通知：</label>
|
||
<span style="width: 100%;"><preview-file style="width: 80%"
|
||
:file-id="basicInfo.chargeNoticeId"></preview-file></span>
|
||
</a-col>
|
||
</a-row>
|
||
<!-- <a-row :gutter="24" v-if="basicInfo.files">-->
|
||
<!-- <a-col class="detail-item">-->
|
||
<!-- <label>项目资料：</label>-->
|
||
<!-- <span style="width: 100%;">-->
|
||
<!-- <preview-file style="width: 80%" :file-id="basicInfo.files"></preview-file>-->
|
||
<!-- </span>-->
|
||
<!-- </a-col>-->
|
||
<!-- </a-row>-->
|
||
</section>
|
||
<!-- 基本信息end-->
|
||
<!--到账信息begin-->
|
||
<section class="payment-info">
|
||
<div class="collapsible-title">
|
||
<h3 class="title">付款信息</h3>
|
||
<a-button type="link" @click="viewPaymentInfo">{{ showPaymentInfo ? '收起' : '查看' }}</a-button>
|
||
</div>
|
||
<div class="payment-info-box" v-show="showPaymentInfo">
|
||
<section class="payment-info-title">付款信息</section>
|
||
<template v-if="paymentInfoList && paymentInfoList.length > 0">
|
||
<div class="payment-info-content" v-for="item of paymentInfoList" :key="item.id">
|
||
{{ item.paymentDate }}付款{{ item.amountReceived }}元
|
||
</div>
|
||
</template>
|
||
<a-list v-else :data-source="[]"/>
|
||
</div>
|
||
</section>
|
||
<!--到账信息end-->
|
||
<!--开票邮寄信息begin-->
|
||
<section class="logistics-info">
|
||
<div class="collapsible-title">
|
||
<h3 class="title">开票邮寄信息</h3>
|
||
<a-button type="link" @click="viewMailInfo">{{ showMailInfo ? '收起' : '查看' }}</a-button>
|
||
</div>
|
||
<div class="wrap-table" v-show="showMailInfo">
|
||
<a-table
|
||
ref="table"
|
||
size="middle"
|
||
rowKey="id"
|
||
:pagination="false"
|
||
:columns="columns"
|
||
:dataSource="logisticsInfoList"
|
||
class="j-table-force-nowrap"
|
||
>
|
||
<span slot="action" slot-scope="record" class="action-span-cell">
|
||
<a @click="lookLogistics(record)" v-if="record.postStatus === 1">查看物流</a>
|
||
</span>
|
||
<!-- <p slot="expandedRowRender" slot-scope="record" style="margin: 0">-->
|
||
<!-- {{ record.sendDate }}-->
|
||
<!-- </p>-->
|
||
</a-table>
|
||
</div>
|
||
</section>
|
||
<!--开票邮寄信息end-->
|
||
|
||
<!-- 项目资料-->
|
||
<div class="meeting basic-box" v-if="basicInfo.files">
|
||
<h3 class="title">项目资料</h3>
|
||
<file-list ref="fileListTable" :data-source="fileList" :file-loading="fileLoading"></file-list>
|
||
</div>
|
||
|
||
|
||
<template slot="footer">
|
||
<a-button @click="handleCancel">关闭</a-button>
|
||
</template>
|
||
</a-spin>
|
||
</j-modal>
|
||
</template>
|
||
|
||
<script>
|
||
import { queryCommonProjectById } from '@api/incomePaymentsApi'
|
||
import JEllipsis from '@comp/jero/JEllipsis'
|
||
import PreviewFile from '@comp/jero/PreviewFile'
|
||
import FileList from '@comp/detailPage/FileList'
|
||
import { getFileInfo } from '@api/api'
|
||
// import {getAction} from "@api/manage";
|
||
const columns = [
|
||
{
|
||
title: '开票人',
|
||
align: 'center',
|
||
dataIndex: 'realName'
|
||
},
|
||
{
|
||
title: '日期',
|
||
align: 'center',
|
||
dataIndex: 'billDate'
|
||
},
|
||
{
|
||
title: '金额(元)',
|
||
align: 'center',
|
||
dataIndex: 'invoiceAmount'
|
||
},
|
||
{
|
||
title: '票号',
|
||
align: 'center',
|
||
dataIndex: 'billNo'
|
||
},
|
||
{
|
||
title: '项目',
|
||
align: 'center',
|
||
dataIndex: 'projectName'
|
||
},
|
||
{
|
||
title: '邮寄人',
|
||
align: 'center',
|
||
dataIndex: 'mailName'
|
||
},
|
||
{
|
||
title: '快递',
|
||
align: 'center',
|
||
dataIndex: 'sendMethod_dictText'
|
||
},
|
||
{
|
||
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: [],
|
||
// 显示付款信息
|
||
showPaymentInfo: false,
|
||
// 显示邮寄信息
|
||
showMailInfo: false,
|
||
// 项目资料列表
|
||
fileList: [],
|
||
basicLoading: false,
|
||
// 项目资料列表的加载状态
|
||
fileLoading: false
|
||
}
|
||
},
|
||
computed: {},
|
||
components: {
|
||
JEllipsis,
|
||
PreviewFile,
|
||
FileList
|
||
},
|
||
created() {
|
||
console.log('xiangmuxiangqing')
|
||
},
|
||
methods: {
|
||
open(record) {
|
||
this.visible = true
|
||
// 记录当前项目id
|
||
if (this.notId) {
|
||
this.currentProjectId = record.projectId
|
||
} else {
|
||
this.currentProjectId = record.id
|
||
}
|
||
// 通过id查询项目详情
|
||
this.basicLoading = true
|
||
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
|
||
// 拿项目资料信息
|
||
if (this.basicInfo.files) {
|
||
this.initFileList(this.basicInfo.files)
|
||
}
|
||
} else {
|
||
console.log('未查到相应的信息')
|
||
}
|
||
}).finally(() => {
|
||
this.basicLoading = false
|
||
})
|
||
},
|
||
handleCancel() {
|
||
// 清除信息
|
||
this.basicInfo = {}
|
||
this.enterpriseInfo = {}
|
||
this.contactsInfo = {}
|
||
this.paymentInfoList = []
|
||
this.logisticsInfoList = []
|
||
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(record) {
|
||
const com = Number(record.sendMethod) === 1 && 'ems' || 'shunfeng'
|
||
window.open(`https://www.kuaidi100.com/chaxun?com=${ com }&nu=${ record.postNo }`)
|
||
},
|
||
/*
|
||
* 去合同详情 传入合同id
|
||
* */
|
||
toContractDetail() {
|
||
if (this.basicInfo.contractId) {
|
||
this.$emit('openContractModule', this.basicInfo.contractId)
|
||
|
||
this.handleCancel()
|
||
} else {
|
||
this.$message.warn('该项目未与合同关联')
|
||
}
|
||
},
|
||
/*
|
||
* 每一个项目的来款方式不同
|
||
* */
|
||
createIncomeType(val) {
|
||
if (val === 1 || val === 2 || val === 4) {
|
||
return '来款方式'
|
||
} else {
|
||
return '缴费方式'
|
||
}
|
||
},
|
||
/**
|
||
* 控制付款信息显隐
|
||
*/
|
||
viewPaymentInfo() {
|
||
this.showPaymentInfo = !this.showPaymentInfo
|
||
},
|
||
/**
|
||
* 控制开票邮寄信息显隐
|
||
*/
|
||
viewMailInfo() {
|
||
this.showMailInfo = !this.showMailInfo
|
||
},
|
||
/*
|
||
* 通过文件id获取文件的相关信息
|
||
* */
|
||
getFileInfo(id) {
|
||
return new Promise(resolve => {
|
||
let result = {}
|
||
getFileInfo({ id: id }).then(res => {
|
||
if (res.success) {
|
||
result = res.result
|
||
}
|
||
}).finally(() => {
|
||
resolve(result)
|
||
})
|
||
})
|
||
},
|
||
/*
|
||
* 获取文件信息
|
||
* */
|
||
async initFileList(fileIds) {
|
||
this.fileLoading = true
|
||
if (fileIds) {
|
||
const fileList = []
|
||
let arr = fileIds.split(',')
|
||
for (let i = 0; i < arr.length; i++) {
|
||
let fileObj = {}
|
||
fileObj = await this.getFileInfo(arr[i])
|
||
fileList.push({ fileId: fileObj.id, fileName: fileObj.fileName, createTime: fileObj.createTime })
|
||
}
|
||
this.fileList = [...fileList]
|
||
} else {
|
||
this.fileList = []
|
||
}
|
||
this.fileLoading = false
|
||
console.log(this.fileList)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.ant-row {
|
||
margin: 0px;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
/*可收起的标题样式*/
|
||
.collapsible-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/*基本信息*/
|
||
.base-info {
|
||
.ant-col {
|
||
margin: 3px 0;
|
||
}
|
||
}
|
||
|
||
.detail-item {
|
||
max-width: 100%;
|
||
display: flex;
|
||
|
||
label {
|
||
flex-shrink: 0;
|
||
display: block;
|
||
}
|
||
|
||
span {
|
||
word-break: break-all;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
/* 到账信息 */
|
||
.payment-info {
|
||
margin-bottom: 14px;
|
||
|
||
&-box {
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
&-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>
|