452 lines
14 KiB
Vue
452 lines
14 KiB
Vue
<template>
|
||
<div class="main-box">
|
||
<page-header-title :is-level-one="false" level-two-title="申请开票"></page-header-title>
|
||
<a-card :bordered="false">
|
||
<div class="table-page-search-wrapper">
|
||
<a-row :gutter="24">
|
||
<a-col :xl="12" :lg="8" :md="8" :sm="24">
|
||
<a-tooltip placement="topLeft">
|
||
<template slot="title">{{ $route.query.projectName }}</template>
|
||
<div class="project-title">
|
||
{{ $route.query.projectName }}
|
||
</div>
|
||
</a-tooltip>
|
||
</a-col>
|
||
<a-col :xl="6" :lg="8" :md="8" :sm="24">
|
||
<span>应付金额：{{ receivableAmount }}元</span>
|
||
</a-col>
|
||
<a-col :xl="6" :lg="8" :md="8" :sm="24">
|
||
<span>已付金额：{{ paidAmount || '0' }}元</span>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<!--查询区域end-->
|
||
|
||
<!-- 表格区域-->
|
||
<div class="table-box">
|
||
<a-table
|
||
ref="table"
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:pagination="false"
|
||
:loading="loading"
|
||
@change="handleTableChange"
|
||
class="j-table-force-nowrap">
|
||
|
||
<!-- 项目名称-->
|
||
<template slot="projectName" slot-scope="text, record">
|
||
<j-ellipsis :value="text" :length="20" class="project-name" @click="openDetail(record)"></j-ellipsis>
|
||
</template>
|
||
|
||
<template slot="text" slot-scope="text, record">
|
||
<j-ellipsis :value="text" :length="20"></j-ellipsis>
|
||
</template>
|
||
|
||
<template slot="money" slot-scope="text, record">
|
||
<j-ellipsis :value="`${text}元`" :length="20"></j-ellipsis>
|
||
</template>
|
||
|
||
<!-- 阶段-->
|
||
<template slot="stage" slot-scope="text, record">
|
||
<j-ellipsis
|
||
:value="record.paymentStatus === 'completed' ? `${ convertToChinaNum(text) }阶段` : ''"
|
||
:length="20">
|
||
</j-ellipsis>
|
||
</template>
|
||
|
||
<!-- 缴费凭证-->
|
||
<template slot="proof" slot-scope="text, record">
|
||
<div class="proof-img-box" v-if="text && text !== ''">
|
||
<img :src="proofSrc(text)" @click="previewProofImg(text)">
|
||
</div>
|
||
<span v-else>{{ text }}</span>
|
||
</template>
|
||
|
||
<!-- 操作-->
|
||
<span slot="action" class="action-span-cell" slot-scope="text,record">
|
||
<a @click="viewProof(record)"
|
||
v-if="record.paymentStatus === 'toBeReviewed' || record.paymentStatus === 'completed'">查看</a>
|
||
<a @click="editProof(record)" v-if="record.paymentStatus === 'rejected'">编辑</a>
|
||
<a @click="handleDelete(record)" v-if="record.paymentStatus === 'rejected'">删除</a>
|
||
</span>
|
||
</a-table>
|
||
</div>
|
||
<!-- 表格区域end-->
|
||
<!-- 添加阶段按钮-->
|
||
<a-button type="primary" icon="plus" class="add-stage-btn" @click="addStage"
|
||
:disabled="editDisabled || Number(receivableAmount) === 0">添加阶段
|
||
</a-button>
|
||
|
||
<!-- 审核记录-->
|
||
<div class="audit-info">
|
||
<div class="audit-info-title">审核记录</div>
|
||
<a-spin :spinning="proofLoading">
|
||
<template v-if="auditInfo && auditInfo.length > 0">
|
||
<div class="audit-info-item-box" v-for="(item, index) in auditInfo" :key="index">
|
||
<a-row :gutter="15">
|
||
<a-col :span="8">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">申请人：</span>
|
||
<span class="audit-info-item-content">{{ item.applicantName }}</span>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">申请时间：</span>
|
||
<span class="audit-info-item-content">{{ item.createTime }}</span>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">缴费金额：</span>
|
||
<span class="audit-info-item-content">{{ item.amountReceived }}元</span>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="15">
|
||
<a-col :span="8">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">缴费日期：</span>
|
||
<span class="audit-info-item-content">{{ item.paymentDate }}</span>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">缴费凭证：</span>
|
||
<img class="audit-info-img" :src="proofSrc(item.proof)" @click="previewProofImg(item.proof)"
|
||
v-if="item.proof && item.proof !== ''">
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">审核结果：</span>
|
||
<span class="audit-info-item-content">{{ item.paymentStatus_dictText }}</span>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="15">
|
||
<a-col :span="8">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">审核人：</span>
|
||
<span class="audit-info-item-content">{{ item.reviewerName }}</span>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">审核时间：</span>
|
||
<span class="audit-info-item-content">{{ item.reviewTime }}</span>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="8" v-if="item.paymentStatus !== 'completed'">
|
||
<div class="audit-info-item">
|
||
<span class="audit-info-item-title">说明：</span>
|
||
<span class="audit-info-item-content">{{ item.reviewInstructions }}</span>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-divider></a-divider>
|
||
</div>
|
||
</template>
|
||
<a-list :data-source="[]" v-else></a-list>
|
||
</a-spin>
|
||
</div>
|
||
</a-card>
|
||
|
||
<!-- 添加阶段-->
|
||
<payment-voucher-modal ref="stageModal" @ok="modalFormOk"></payment-voucher-modal>
|
||
|
||
<!-- 预览缴费凭证-->
|
||
<preview-img-modal ref="previewImg"></preview-img-modal>
|
||
|
||
<!-- 查看缴费凭证信息-->
|
||
<proof-info-modal ref="proofInfo" :project-name="$route.query.projectName"></proof-info-modal>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||
import PaymentVoucherModal from '@views/MessagePage/modules/PaymentVoucherModal'
|
||
import { getAction, postAction } from '@api/manage'
|
||
import PreviewImgModal from '@views/MessagePage/modules/PreviewImgModal'
|
||
import ProofInfoModal from '@views/MessagePage/modules/ProofInfoModal'
|
||
import { getAuditProofRecords } from '@api/incomePaymentsApi'
|
||
import { convertToChinaNum } from '@/utils/util'
|
||
import PageHeaderTitle from '@/components/layouts/PageHeaderTitle'
|
||
|
||
const columns = [
|
||
{
|
||
title: '阶段',
|
||
dataIndex: 'stage',
|
||
key: 'rowIndex',
|
||
width: 120,
|
||
align: 'center',
|
||
scopedSlots: { customRender: 'stage' }
|
||
}, {
|
||
title: '缴费金额',
|
||
dataIndex: 'amountReceived',
|
||
align: 'center',
|
||
scopedSlots: { customRender: 'money' }
|
||
}, {
|
||
title: '缴费凭证',
|
||
dataIndex: 'proof',
|
||
align: 'center',
|
||
width: 200,
|
||
scopedSlots: { customRender: 'proof' }
|
||
}, {
|
||
title: '申请人',
|
||
dataIndex: 'applicantName',
|
||
align: 'center',
|
||
scopedSlots: { customRender: 'text' }
|
||
}, {
|
||
title: '申请日期',
|
||
dataIndex: 'createTime',
|
||
align: 'center',
|
||
scopedSlots: { customRender: 'text' }
|
||
}, {
|
||
title: '状态',
|
||
dataIndex: 'paymentStatus_dictText',
|
||
align: 'center',
|
||
scopedSlots: { customRender: 'text' }
|
||
}, {
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
align: 'center',
|
||
width: 160,
|
||
scopedSlots: { customRender: 'action' }
|
||
}
|
||
]
|
||
|
||
export default {
|
||
name: 'PaymentVoucher',
|
||
components: { PaymentVoucherModal, PreviewImgModal, ProofInfoModal, PageHeaderTitle },
|
||
mixins: [JeroListMixin],
|
||
data() {
|
||
return {
|
||
columns,
|
||
// 审核信息
|
||
auditInfo: [],
|
||
// 应付金额
|
||
receivableAmount: 0,
|
||
// 实付金额
|
||
paidAmount: 0,
|
||
url: {
|
||
list: '/paymentCheck/payPaymentCheck/amountReceivedList',
|
||
delete: '/paymentCheck/payPaymentCheck/delete'
|
||
},
|
||
// 审核记录加载
|
||
proofLoading: false,
|
||
// 是否可以添加阶段
|
||
editDisabled: false
|
||
}
|
||
},
|
||
created() {
|
||
this.getAuditProofList()
|
||
},
|
||
methods: {
|
||
convertToChinaNum,
|
||
/**
|
||
* 获取阶段信息
|
||
* @param arg
|
||
*/
|
||
loadData(arg) {
|
||
if (!this.url.list) {
|
||
this.$message.error('请设置url.list属性!')
|
||
return
|
||
}
|
||
//加载数据 若传入参数1则加载第一页的内容
|
||
if (arg === 1) {
|
||
this.ipagination.current = 1
|
||
}
|
||
let params = this.getQueryParams()//查询条件
|
||
params.id = this.$route.query.projectId
|
||
params.projectType = this.$route.query.projectType
|
||
this.loading = true
|
||
getAction(this.url.list, params).then((res) => {
|
||
if (res.success) {
|
||
//update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||
this.dataSource = res.result.list
|
||
this.receivableAmount = res.result.receivableAmount
|
||
this.paidAmount = res.result.paidAmount
|
||
if (res.result.total) {
|
||
this.ipagination.total = res.result.total
|
||
//清空列表选中
|
||
this.onClearSelected()
|
||
} else {
|
||
this.ipagination.total = 0
|
||
}
|
||
//update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||
this.editDisabled = this.dataSource.some(tt => {
|
||
return tt.paymentStatus !== 'completed'
|
||
})
|
||
}
|
||
if (res.code === 510) {
|
||
this.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
handleDelete(record) {
|
||
if (!this.url.delete) {
|
||
this.$message.error('请设置url.delete属性!')
|
||
return
|
||
}
|
||
var that = this
|
||
this.$confirm({
|
||
title: '确认删除',
|
||
content: '确定要删除此条数据吗?',
|
||
onOk: function () {
|
||
postAction(that.url.delete, { id: record.id, paymentStatus: record.paymentStatus }).then((res) => {
|
||
if (res.success) {
|
||
that.$message.success(res.message)
|
||
// 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
|
||
if (that.ipagination.current > 1 && ((that.ipagination.current - 1) * that.ipagination.pageSize) + 1 === that.ipagination.total) {
|
||
that.ipagination.current -= 1
|
||
}
|
||
that.loadData()
|
||
} else {
|
||
that.$message.warning(res.message)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 添加阶段
|
||
*/
|
||
addStage() {
|
||
this.$refs.stageModal.projectId = this.$route.query.projectId
|
||
this.$refs.stageModal.projectType = this.$route.query.projectType
|
||
this.$refs.stageModal.visible = true
|
||
},
|
||
/**
|
||
* 缴费凭证 src
|
||
*/
|
||
proofSrc(imgId) {
|
||
return `${ window._CONFIG['domianURL'] }/sys/common/download/${ imgId }`
|
||
},
|
||
/**
|
||
* 预览缴费凭证
|
||
* @param imgId
|
||
*/
|
||
previewProofImg(imgId) {
|
||
this.$refs.previewImg.title = '缴费凭证图片'
|
||
this.$refs.previewImg.imgId = imgId
|
||
this.$refs.previewImg.visible = true
|
||
console.log()
|
||
},
|
||
/**
|
||
* 查看
|
||
* @param record
|
||
*/
|
||
viewProof(record) {
|
||
this.$refs.proofInfo.title = '凭证信息'
|
||
this.$refs.proofInfo.open(record)
|
||
},
|
||
/**
|
||
* 编辑
|
||
* @param record
|
||
*/
|
||
editProof(record) {
|
||
this.$refs.stageModal.projectId = this.$route.query.projectId
|
||
this.$refs.stageModal.projectType = this.$route.query.projectType
|
||
this.$refs.stageModal.title = '编辑阶段'
|
||
this.$refs.stageModal.edit(record)
|
||
},
|
||
/**
|
||
* 获取审核凭证信息
|
||
*/
|
||
getAuditProofList() {
|
||
this.proofLoading = true
|
||
let param = {
|
||
id: this.$route.query.projectId
|
||
}
|
||
getAuditProofRecords(param).then(res => {
|
||
if (res.success) {
|
||
this.auditInfo = res.result || []
|
||
}
|
||
}).finally(() => {
|
||
this.proofLoading = false
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
.project-title {
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.table-box {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.add-stage-btn {
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.audit-info {
|
||
|
||
&-title {
|
||
padding: 20px 0;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
&-item-box {
|
||
padding-bottom: 10px;
|
||
|
||
.ant-col {
|
||
padding-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
&-item {
|
||
display: flex;
|
||
|
||
&-title {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&-content {
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
&-img {
|
||
max-width: calc(100% - 6rem);
|
||
max-height: 150px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.ant-list {
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.proof-img-box {
|
||
width: 100%;
|
||
max-height: 120px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
img {
|
||
cursor: pointer;
|
||
max-width: 100%;
|
||
max-height: 120px;
|
||
}
|
||
}
|
||
</style> |