455 lines
15 KiB
Vue
455 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<page-header-title :is-level-one="false" :img-for-icon="IconImg" level-two-title="支出合同详情"></page-header-title>
|
||
<a-spin :spinning="loading">
|
||
<a-card :bordered="false">
|
||
<!-- 主体信息-->
|
||
<div>
|
||
<div class="part-title">
|
||
<div class="part-title-text">主体信息</div>
|
||
</div>
|
||
<div class="detail" v-if="mainInfoShowList.length > 0">
|
||
<div class="detail-item"
|
||
v-for="(item, index) in mainInfoShowList"
|
||
:key="index">
|
||
<a-row>
|
||
<a-col :sm="10" :xs="24" class="detail-item-title">{{ item.title }}：</a-col>
|
||
<a-col :sm="14" :xs="24" v-if="item.fieldName === 'rate'">{{ detailData[item.fieldName] }}%</a-col>
|
||
<a-col :sm="14" :xs="24" v-else>{{ item.format ? item.format(detailData[item.fieldName]) : detailData[item.fieldName] }}</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
<a-empty v-else></a-empty>
|
||
</div>
|
||
<a-divider></a-divider>
|
||
|
||
<!-- 日期节点-->
|
||
<div>
|
||
<div class="part-title">
|
||
<div class="part-title-text">日期节点</div>
|
||
</div>
|
||
<div class="detail" v-if="dateNodeShowList.length > 0">
|
||
<div class="detail-item" v-for="(item, index) in dateNodeShowList"
|
||
:key="index">
|
||
<a-row>
|
||
<a-col :sm="10" :xs="24" class="detail-item-title">{{ item.title }}：</a-col>
|
||
<a-col :sm="14" :xs="24">{{ detailData[item.fieldName] }}</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
<a-empty v-else></a-empty>
|
||
</div>
|
||
<a-divider></a-divider>
|
||
|
||
<!-- 账款信息-->
|
||
<div>
|
||
<div class="part-title">
|
||
<div class="part-title-text">账款信息</div>
|
||
</div>
|
||
<div class="detail" v-if="accountInfoShowList.length > 0">
|
||
<div class="detail-item" v-for="(item, index) in accountInfoShowList"
|
||
:key="index">
|
||
<a-row>
|
||
<a-col :sm="10" :xs="24" class="detail-item-title">{{ item.title }}：</a-col>
|
||
<a-col :sm="14" :xs="24">{{ item.format ? item.format(detailData[item.fieldName]) : detailData[item.fieldName] }}</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
<a-empty v-else></a-empty>
|
||
</div>
|
||
<a-divider></a-divider>
|
||
|
||
<!-- 其他信息-->
|
||
<div>
|
||
<div class="part-title">
|
||
<div class="part-title-text">其他信息</div>
|
||
</div>
|
||
<div class="detail" v-if="otherInfoShowList.length > 0">
|
||
<div class="detail-item all-line" v-for="(item, index) in otherInfoShowList"
|
||
:key="index">
|
||
<a-row>
|
||
<a-col :sm="4" :xs="24" class="detail-item-title">{{ item.title }}：</a-col>
|
||
<a-col :sm="20" :xs="24">{{ detailData[item.fieldName] }}</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
<a-empty v-else></a-empty>
|
||
</div>
|
||
<a-divider></a-divider>
|
||
|
||
<!-- 分期信息-->
|
||
<div>
|
||
<div class="part-title">
|
||
<div class="part-title-text">分期信息</div>
|
||
</div>
|
||
<a-row class="detail" v-for="(item, index) in detailData.listInstallment" :key="item.id">
|
||
<a-col :xxl="4" :xl="8" :sm="12" class="detail-item">
|
||
<a-row>
|
||
<a-col :sm="10" :xs="24" class="detail-item-title">{{ index + 1 }}阶段：</a-col>
|
||
<a-col :sm="14" :xs="24">{{ item.phaseName }}</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<a-col :xxl="4" :xl="8" :sm="12" class="detail-item">
|
||
<a-row>
|
||
<a-col :sm="10" :xs="24" class="detail-item-title">{{ index + 1 }}阶段应付：</a-col>
|
||
<a-col :sm="14" :xs="24">{{ formatMoney(item.accountsReceivableAmount) }}</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<a-col :xxl="4" :xl="8" :sm="12" class="detail-item">
|
||
<a-row>
|
||
<a-col :sm="10" :xs="24" class="detail-item-title">{{ index + 1 }}阶段应付时间：</a-col>
|
||
<a-col :sm="14" :xs="24">{{ item.accountsReceivableTime }}</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<a-col :xxl="4" :xl="8" :sm="12" class="detail-item">
|
||
<a-row>
|
||
<a-col :sm="10" :xs="24" class="detail-item-title">{{ index + 1 }}阶段实付：</a-col>
|
||
<a-col :sm="14" :xs="24">{{ formatMoney(item.paidAmount) }}</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<a-col :xxl="4" :xl="8" :sm="12" class="detail-item">
|
||
<a-row>
|
||
<a-col :sm="10" :xs="24" class="detail-item-title">{{ index + 1 }}阶段实付时间：</a-col>
|
||
<a-col :sm="14" :xs="24">{{ item.paidTime }}</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<a-divider></a-divider>
|
||
|
||
<!-- 存档信息-->
|
||
<div>
|
||
<div class="part-title">
|
||
<div class="part-title-text">存档信息</div>
|
||
</div>
|
||
<div class="aduit-text" v-if="detailData.listArchive && detailData.listArchive.length > 0">
|
||
<div v-for="(item, index) in detailData.listArchive"
|
||
:key="index">
|
||
<a-row>
|
||
<a-col :sm="6" :xs="24">{{ item.createBy }}</a-col>
|
||
<a-col :sm="6" :xs="24">{{ item.createTime }}</a-col>
|
||
<a-col :sm="6" :xs="24">{{ item.contractStatus_dictText }}</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
<a-empty v-else></a-empty>
|
||
</div>
|
||
<!-- <a-divider></a-divider>-->
|
||
|
||
<!-- 审核记录-->
|
||
<!-- <div>-->
|
||
<!-- <div class="part-title">-->
|
||
<!-- <div class="part-title-text">审核记录</div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="aduit-text" v-if="detailData.listAudit && detailData.listAudit.length > 0">-->
|
||
<!-- <div v-for="(item, index) in detailData.listAudit"-->
|
||
<!-- :key="index">-->
|
||
<!-- <a-row>-->
|
||
<!-- <a-col :sm="6" :xs="24">{{ item.createBy }}</a-col>-->
|
||
<!-- <a-col :sm="6" :xs="24">{{ item.createTime }}</a-col>-->
|
||
<!-- <!– 待存档文字替换–>-->
|
||
<!-- <a-col :sm="6" :xs="24">-->
|
||
<!-- {{ item.contractStatus_dictText === '待存档' ? '审核通过' : item.contractStatus_dictText }}-->
|
||
<!-- </a-col>-->
|
||
<!-- <a-col :sm="6" :xs="24">{{ item.explainRemarks }}</a-col>-->
|
||
<!-- </a-row>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <a-empty v-else></a-empty>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- 状态非已存档显示-->
|
||
<template v-if="detailData.status < 5">
|
||
<a-divider></a-divider>
|
||
<!-- 编辑、审核、存档-->
|
||
<div>
|
||
<div class="part-title">
|
||
<div class="part-title-text">操作</div>
|
||
</div>
|
||
<div class="operator-btn">
|
||
<a-button
|
||
type="primary"
|
||
@click="handleEdit(detailData.id)"
|
||
v-if="detailData.status === 3"
|
||
v-has="'revenueContract:edit'">
|
||
编辑
|
||
</a-button>
|
||
<!-- <a-button-->
|
||
<!-- type="primary"-->
|
||
<!-- @click="handleAudit(detailData.id)"-->
|
||
<!-- v-if="detailData.status === 2"-->
|
||
<!-- v-has="'expenditureContract:aduit'">-->
|
||
<!-- 审核-->
|
||
<!-- </a-button>-->
|
||
<a-button
|
||
type="primary"
|
||
@click="handleArchive(detailData.id)"
|
||
v-if="detailData.status === 3"
|
||
v-has="'expenditureContract:archive'">
|
||
存档
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
</a-card>
|
||
</a-spin>
|
||
|
||
<revenue-contract-aduit-module ref="aduitForm" @ok="operatorOk"></revenue-contract-aduit-module>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||
import IconImg from '@/assets/imgs/icon/icon_revenue_contract.png'
|
||
import { archiveExpenditureContract, getExpenditureContractById } from '../../../api/incomePaymentsApi'
|
||
import RevenueContractAduitModule from '../revenueContract/modules/RevenueContractAduitModule'
|
||
import { formatMoney } from '@/utils/formatMoney'
|
||
|
||
export default {
|
||
name: 'ExpenditureContractDetail',
|
||
components: { PageHeaderTitle, RevenueContractAduitModule },
|
||
data() {
|
||
return {
|
||
IconImg,
|
||
loading: false,
|
||
detailData: {},
|
||
// 主体信息
|
||
mainInfoList: [
|
||
{
|
||
fieldName: 'contractNum',
|
||
title: '合同编号'
|
||
}, {
|
||
fieldName: 'contractName',
|
||
title: '合同名称'
|
||
}, {
|
||
fieldName: 'signedCompanyTemporaryName',
|
||
title: '签订单位'
|
||
}, {
|
||
fieldName: 'signedContactsTemporaryName',
|
||
title: '签订联系人'
|
||
}, {
|
||
fieldName: 'phone',
|
||
title: '联系电话'
|
||
}, {
|
||
fieldName: 'address',
|
||
title: '邮寄地址'
|
||
}, {
|
||
fieldName: 'postCode',
|
||
title: '邮编'
|
||
}, {
|
||
fieldName: 'opening_dictText',
|
||
title: '是否开口'
|
||
}, {
|
||
fieldName: 'principalName',
|
||
title: '负责人'
|
||
}, {
|
||
fieldName: 'departmentName',
|
||
title: '部门名称'
|
||
}, {
|
||
fieldName: 'contractAmount',
|
||
title: '签订合同总金额',
|
||
format: formatMoney
|
||
}, {
|
||
fieldName: 'rate',
|
||
title: '税率'
|
||
}, {
|
||
fieldName: 'noTaxAmount',
|
||
title: '未税金额',
|
||
format: formatMoney
|
||
}
|
||
],
|
||
// 日期节点
|
||
dateNodeList: [
|
||
{
|
||
fieldName: 'contractDate',
|
||
title: '合同签订日期'
|
||
}, {
|
||
fieldName: 'terminationDate',
|
||
title: '合同终止日期'
|
||
}, {
|
||
fieldName: 'contractTimePoints',
|
||
title: '合同约定主要时点'
|
||
}
|
||
],
|
||
// 账款信息
|
||
accountInfoList: [
|
||
{
|
||
fieldName: 'accountsReceivableAmount',
|
||
title: '应付金额',
|
||
format: formatMoney
|
||
}, {
|
||
fieldName: 'amountReceived',
|
||
title: '已付金额',
|
||
format: formatMoney
|
||
}, {
|
||
fieldName: 'amountReceived',
|
||
title: '未付金额',
|
||
format: formatMoney
|
||
}, {
|
||
fieldName: 'accountStatus_dictText',
|
||
title: '赊账状态'
|
||
}
|
||
],
|
||
// 其他信息
|
||
otherInfoList: [
|
||
{
|
||
fieldName: 'contractPaymentTimes',
|
||
title: '合同约定付款次数'
|
||
}
|
||
// {
|
||
// fieldName: 'pack_dictText',
|
||
// title: '是否打包'
|
||
// }, {
|
||
// fieldName: 'packYear',
|
||
// title: '打包年份'
|
||
// }
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
// 主体信息，去掉没有数据的字段
|
||
mainInfoShowList() {
|
||
return this.mainInfoList.filter(item => this.detailData[item.fieldName] && this.detailData[item.fieldName] !== '') || []
|
||
},
|
||
// 日期节点
|
||
dateNodeShowList() {
|
||
return this.dateNodeList.filter(item => this.detailData[item.fieldName] && this.detailData[item.fieldName] !== '') || []
|
||
},
|
||
// 账款信息
|
||
accountInfoShowList() {
|
||
return this.accountInfoList.filter(item => this.detailData[item.fieldName] && this.detailData[item.fieldName] !== '') || []
|
||
},
|
||
// 其他信息
|
||
otherInfoShowList() {
|
||
return this.otherInfoList.filter(item => this.detailData[item.fieldName] && this.detailData[item.fieldName] !== '') || []
|
||
}
|
||
},
|
||
created() {
|
||
this.initDetailData()
|
||
},
|
||
methods: {
|
||
formatMoney,
|
||
initDetailData() {
|
||
if (!this.$route.query.revenueId) {
|
||
return
|
||
}
|
||
this.loading = true
|
||
let param = {
|
||
id: this.$route.query.revenueId
|
||
}
|
||
getExpenditureContractById(param).then(res => {
|
||
if (res.success) {
|
||
this.detailData = res.result
|
||
// this.detailData.pack = this.detailData.pack === 1 ? '是' : this.detailData.pack === 0 ? '否' : ''
|
||
} else {
|
||
//TODO 别的页面会调这边的接口，所以把异常给关了
|
||
// 添加异常判断，防止消息进入详情无法正常获取数据造成卡死及控制台报错
|
||
console.log(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
operatorOk() {
|
||
this.initDetailData()
|
||
},
|
||
/**
|
||
* 编辑
|
||
* @param id
|
||
* @param contractNum
|
||
*/
|
||
handleEdit(id) {
|
||
this.$router.push({
|
||
path: '/contractManagement/RevenueContractModule',
|
||
query: {
|
||
contractId: id
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 审核
|
||
* @param id
|
||
*/
|
||
handleAudit(id) {
|
||
this.$refs.aduitForm.contractType = 2
|
||
this.$refs.aduitForm.contractId = id
|
||
this.$refs.aduitForm.open()
|
||
},
|
||
/**
|
||
* 存档
|
||
* @param id
|
||
*/
|
||
handleArchive(id) {
|
||
let that = this
|
||
this.$confirm({
|
||
title: '存档',
|
||
content: '确认存档?',
|
||
onOk: function () {
|
||
that.loading = true
|
||
that.loading = false
|
||
let param = {
|
||
contractId: id,
|
||
contractStatus: 5
|
||
}
|
||
archiveExpenditureContract(param).then((res) => {
|
||
if (res.success) {
|
||
that.$message.success(res.message)
|
||
that.initDetailData()
|
||
} else {
|
||
that.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
that.loading = false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
.detail {
|
||
display: flex;
|
||
padding: 0 20px;
|
||
flex-wrap: wrap;
|
||
|
||
&-item {
|
||
width: 25%;
|
||
min-width: 280px;
|
||
padding-top: 10px;
|
||
color: #2F3133;
|
||
word-break: break-all;
|
||
|
||
&-title {
|
||
color: #999999;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.all-line {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.ant-divider-horizontal {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.operator-btn {
|
||
margin-top: 10px;
|
||
|
||
button {
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.aduit-text {
|
||
color: #2F3133;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
</style> |