[update] 全局样式去掉最小宽度，防止出现双滚动条的情况；合同修改
This commit is contained in:
zhaoxiao
@@ -6,109 +6,126 @@
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<!-- 基本信息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 class="contract-num" @click="toContractDetail"><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">
|
||||
<h3 class="title">付款信息</h3>
|
||||
<div class="payment-info-box">
|
||||
<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">
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<!-- <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>
|
||||
</section>
|
||||
<!--开票邮寄信息end-->
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
|
||||
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">关闭</a-button>
|
||||
</template>
|
||||
</a-spin>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
@@ -116,6 +133,8 @@
|
||||
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 = [
|
||||
{
|
||||
@@ -191,15 +210,25 @@ export default {
|
||||
contactsInfo: {},
|
||||
columns,
|
||||
// 到账信息
|
||||
paymentInfoList:[],
|
||||
paymentInfoList: [],
|
||||
// 开票邮寄信息
|
||||
logisticsInfoList:[],
|
||||
logisticsInfoList: [],
|
||||
// 显示付款信息
|
||||
showPaymentInfo: false,
|
||||
// 显示邮寄信息
|
||||
showMailInfo: false,
|
||||
// 项目资料列表
|
||||
fileList: [],
|
||||
basicLoading: false,
|
||||
// 项目资料列表的加载状态
|
||||
fileLoading: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
components: {
|
||||
JEllipsis,
|
||||
PreviewFile
|
||||
PreviewFile,
|
||||
FileList
|
||||
},
|
||||
created() {
|
||||
console.log('xiangmuxiangqing')
|
||||
@@ -214,6 +243,7 @@ export default {
|
||||
this.currentProjectId = record.id
|
||||
}
|
||||
// 通过id查询项目详情
|
||||
this.basicLoading = true
|
||||
queryCommonProjectById({ id: this.currentProjectId }).then(res => {
|
||||
if (res.success) {
|
||||
console.log(res.result, 'res.result')
|
||||
@@ -223,9 +253,15 @@ export default {
|
||||
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() {
|
||||
@@ -281,6 +317,53 @@ export default {
|
||||
} 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -314,6 +397,12 @@ h3.title::before {
|
||||
background: #069f99;
|
||||
}
|
||||
|
||||
/*可收起的标题样式*/
|
||||
.collapsible-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/*基本信息*/
|
||||
.base-info {
|
||||
.ant-col {
|
||||
|
||||
Reference in New Issue
Block a user