417 lines
9.9 KiB
Vue
417 lines
9.9 KiB
Vue
<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>
|