fix:付款单、收票单、收款单、开票单详情展示流转意见信息

dev_1.0.2
UNISINSIGHT\rdpnr_jiangpeng 2026-03-25 19:25:06 +08:00
parent 61143a39f7
commit 5ac798c295
5 changed files with 289 additions and 4 deletions

View File

@ -0,0 +1,39 @@
<template>
<div class="process-container">
<el-timeline>
<el-timeline-item v-for="log in logs" :key="log.id" :timestamp="log.approveTime" placement="top">
<el-card>
<h4>{{ log.approveOpinion }}</h4>
<p><b>操作人:</b> {{ log.approveUserName }} ({{ log.roleName }})</p>
<p><b>接收人:</b> {{ log.nextAllApproveUserName }}</p>
<p><b>审批状态:</b> <el-tag size="small">{{ getStatusText(log.approveStatus) }}</el-tag></p>
</el-card>
</el-timeline-item>
</el-timeline>
<div v-if="!logs || logs.length === 0"></div>
</div>
</template>
<script>
export default {
name: "FlowOpinionTimeline",
props: {
logs: {
type: Array,
default: () => [],
},
},
methods: {
getStatusText(status) {
const textMap = { '1': '提交审批', '2': '驳回', '3': '批准' };
return textMap[String(status)] || '提交审批';
},
},
};
</script>
<style scoped>
.process-container {
padding: 10px;
}
</style>

View File

@ -134,6 +134,10 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="section">
<el-divider content-position="left">流转意见</el-divider>
<flow-opinion-timeline :logs="approveLogs" />
</div>
</div> </div>
<edit-form :visible.sync="receivableVisible" :data="selectedReceivableRow" :z-index="2000" @close="receivableVisible = false" /> <edit-form :visible.sync="receivableVisible" :data="selectedReceivableRow" :z-index="2000" @close="receivableVisible = false" />
</el-drawer> </el-drawer>
@ -141,10 +145,12 @@
<script> <script>
import EditForm from "@/views/finance/receivable/components/EditForm.vue"; import EditForm from "@/views/finance/receivable/components/EditForm.vue";
import FlowOpinionTimeline from "@/views/finance/components/FlowOpinionTimeline.vue";
import { listCompletedFlows } from "@/api/flow";
export default { export default {
name: "DetailDrawer", name: "DetailDrawer",
components: {EditForm}, components: {EditForm, FlowOpinionTimeline},
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
@ -160,8 +166,36 @@ export default {
return { return {
receivableVisible: false, receivableVisible: false,
selectedReceivableRow: {}, selectedReceivableRow: {},
approveLogs: [],
approveLogsTimer: null,
approveLogsLoading: false,
}; };
}, },
beforeDestroy() {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
this.approveLogsTimer = null;
}
},
watch: {
visible(newVal) {
if (newVal) {
this.scheduleLoadApproveHistory();
} else {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
this.approveLogsTimer = null;
}
this.approveLogs = [];
}
},
detail: {
handler() {
this.scheduleLoadApproveHistory();
},
deep: true
}
},
methods: { methods: {
handleClose() { handleClose() {
this.$emit("update:visible", false); this.$emit("update:visible", false);
@ -171,6 +205,36 @@ export default {
this.selectedReceivableRow = row; this.selectedReceivableRow = row;
this.receivableVisible = true; this.receivableVisible = true;
}, },
scheduleLoadApproveHistory() {
if (!this.visible) {
return;
}
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
}
this.approveLogsTimer = setTimeout(() => {
this.loadApproveHistory();
}, 800);
},
loadApproveHistory() {
const businessKey = this.detail && this.detail.invoiceBillCode;
if (!businessKey) {
this.approveLogs = [];
return;
}
if (this.approveLogsLoading) {
return;
}
this.approveLogsLoading = true;
listCompletedFlows({ businessKey }).then(response => {
this.approveLogs = response.data || [];
}).catch(() => {
this.approveLogs = [];
this.$modal.msgError("获取流转历史失败!");
}).finally(() => {
this.approveLogsLoading = false;
});
},
}, },
}; };
</script> </script>

View File

@ -136,6 +136,11 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="section">
<el-divider content-position="left">流转意见</el-divider>
<flow-opinion-timeline :logs="approveLogs" />
</div>
</div> </div>
<edit-form :visible.sync="payableVisible" :data="selectedPayableRow" :z-index="2000" @close="payableVisible = false" /> <edit-form :visible.sync="payableVisible" :data="selectedPayableRow" :z-index="2000" @close="payableVisible = false" />
</el-drawer> </el-drawer>
@ -144,10 +149,12 @@
<script> <script>
import FileUpload from "@/components/FileUpload"; import FileUpload from "@/components/FileUpload";
import EditForm from "@/views/finance/payable/components/EditForm.vue"; import EditForm from "@/views/finance/payable/components/EditForm.vue";
import FlowOpinionTimeline from "@/views/finance/components/FlowOpinionTimeline.vue";
import { listCompletedFlows } from "@/api/flow";
export default { export default {
name: "DetailDrawer", name: "DetailDrawer",
components: {FileUpload, EditForm}, components: {FileUpload, EditForm, FlowOpinionTimeline},
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
@ -164,19 +171,36 @@ export default {
fileId: null, fileId: null,
payableVisible: false, payableVisible: false,
selectedPayableRow: {}, selectedPayableRow: {},
approveLogs: [],
approveLogsTimer: null,
approveLogsLoading: false,
}; };
}, },
beforeDestroy() {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
this.approveLogsTimer = null;
}
},
watch: { watch: {
visible(newVal) { visible(newVal) {
if (newVal) { if (newVal) {
this.fileList = []; this.fileList = [];
this.fileId = null; this.fileId = null;
this.scheduleLoadApproveHistory();
} else {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
this.approveLogsTimer = null;
}
this.approveLogs = [];
} }
}, },
detail: { detail: {
handler() { handler() {
this.fileList = []; this.fileList = [];
this.fileId = null; this.fileId = null;
this.scheduleLoadApproveHistory();
}, },
deep: true deep: true
} }
@ -219,6 +243,33 @@ export default {
this.selectedPayableRow = row; this.selectedPayableRow = row;
this.payableVisible = true; this.payableVisible = true;
}, },
scheduleLoadApproveHistory() {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
}
this.approveLogsTimer = setTimeout(() => {
this.loadApproveHistory();
}, 800);
},
loadApproveHistory() {
const businessKey = this.detail && this.detail.paymentBillCode;
if (!businessKey) {
this.approveLogs = [];
return;
}
if (this.approveLogsLoading) {
return;
}
this.approveLogsLoading = true;
listCompletedFlows({ businessKey }).then(response => {
this.approveLogs = response.data || [];
}).catch(() => {
this.approveLogs = [];
this.$modal.msgError("获取流转历史失败!");
}).finally(() => {
this.approveLogsLoading = false;
});
},
}, },
}; };
</script> </script>

View File

@ -90,6 +90,11 @@
<el-table-column property="paymentRate" label="本次收票比例(%)"></el-table-column> <el-table-column property="paymentRate" label="本次收票比例(%)"></el-table-column>
</el-table> </el-table>
</div> </div>
<div class="section">
<el-divider content-position="left">流转意见</el-divider>
<flow-opinion-timeline :logs="approveLogs" />
</div>
</div> </div>
<edit-form :visible.sync="payableVisible" :data="selectedPayableRow" :z-index="2000" @close="payableVisible = false" /> <edit-form :visible.sync="payableVisible" :data="selectedPayableRow" :z-index="2000" @close="payableVisible = false" />
</el-drawer> </el-drawer>
@ -97,10 +102,12 @@
<script> <script>
import EditForm from "@/views/finance/payable/components/EditForm.vue"; import EditForm from "@/views/finance/payable/components/EditForm.vue";
import FlowOpinionTimeline from "@/views/finance/components/FlowOpinionTimeline.vue";
import { listCompletedFlows } from "@/api/flow";
export default { export default {
name: "DetailDrawer", name: "DetailDrawer",
components: {EditForm}, components: {EditForm, FlowOpinionTimeline},
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
@ -115,8 +122,36 @@ export default {
return { return {
payableVisible: false, payableVisible: false,
selectedPayableRow: {}, selectedPayableRow: {},
approveLogs: [],
approveLogsTimer: null,
approveLogsLoading: false,
}; };
}, },
beforeDestroy() {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
this.approveLogsTimer = null;
}
},
watch: {
visible(newVal) {
if (newVal) {
this.scheduleLoadApproveHistory();
} else {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
this.approveLogsTimer = null;
}
this.approveLogs = [];
}
},
detail: {
handler() {
this.scheduleLoadApproveHistory();
},
deep: true
}
},
dicts:['receipt_bill_type','approve_status','receipt_status'], dicts:['receipt_bill_type','approve_status','receipt_status'],
methods: { methods: {
handleClose() { handleClose() {
@ -127,6 +162,36 @@ export default {
this.selectedPayableRow = row; this.selectedPayableRow = row;
this.payableVisible = true; this.payableVisible = true;
}, },
scheduleLoadApproveHistory() {
if (!this.visible) {
return;
}
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
}
this.approveLogsTimer = setTimeout(() => {
this.loadApproveHistory();
}, 800);
},
loadApproveHistory() {
const businessKey = this.detail && this.detail.ticketBillCode;
if (!businessKey) {
this.approveLogs = [];
return;
}
if (this.approveLogsLoading) {
return;
}
this.approveLogsLoading = true;
listCompletedFlows({ businessKey }).then(response => {
this.approveLogs = response.data || [];
}).catch(() => {
this.approveLogs = [];
this.$modal.msgError("获取流转历史失败!");
}).finally(() => {
this.approveLogsLoading = false;
});
},
}, },
}; };
</script> </script>
@ -160,4 +225,5 @@ export default {
.section { .section {
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>

View File

@ -127,6 +127,10 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="section">
<el-divider content-position="left">流转意见</el-divider>
<flow-opinion-timeline :logs="approveLogs" />
</div>
<GlobalFilePreview ref="filePreview" /> <GlobalFilePreview ref="filePreview" />
</div> </div>
@ -137,12 +141,15 @@
<script> <script>
import GlobalFilePreview from '@/components/GlobalFilePreview'; import GlobalFilePreview from '@/components/GlobalFilePreview';
import EditForm from "@/views/finance/receivable/components/EditForm.vue"; import EditForm from "@/views/finance/receivable/components/EditForm.vue";
import FlowOpinionTimeline from "@/views/finance/components/FlowOpinionTimeline.vue";
import { listCompletedFlows } from "@/api/flow";
export default { export default {
name: "DetailDrawer", name: "DetailDrawer",
components: { components: {
GlobalFilePreview, GlobalFilePreview,
EditForm EditForm,
FlowOpinionTimeline
}, },
props: { props: {
visible: { visible: {
@ -158,8 +165,36 @@ export default {
return { return {
receivableVisible: false, receivableVisible: false,
selectedReceivableRow: {}, selectedReceivableRow: {},
approveLogs: [],
approveLogsTimer: null,
approveLogsLoading: false,
}; };
}, },
beforeDestroy() {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
this.approveLogsTimer = null;
}
},
watch: {
visible(newVal) {
if (newVal) {
this.scheduleLoadApproveHistory();
} else {
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
this.approveLogsTimer = null;
}
this.approveLogs = [];
}
},
detail: {
handler() {
this.scheduleLoadApproveHistory();
},
deep: true
}
},
dicts:['receipt_bill_type','approve_status','receipt_bill_status','payment_method'], dicts:['receipt_bill_type','approve_status','receipt_bill_status','payment_method'],
methods: { methods: {
handleClose() { handleClose() {
@ -176,6 +211,36 @@ export default {
this.selectedReceivableRow = row; this.selectedReceivableRow = row;
this.receivableVisible = true; this.receivableVisible = true;
}, },
scheduleLoadApproveHistory() {
if (!this.visible) {
return;
}
if (this.approveLogsTimer) {
clearTimeout(this.approveLogsTimer);
}
this.approveLogsTimer = setTimeout(() => {
this.loadApproveHistory();
}, 800);
},
loadApproveHistory() {
const businessKey = this.detail && this.detail.receiptBillCode;
if (!businessKey) {
this.approveLogs = [];
return;
}
if (this.approveLogsLoading) {
return;
}
this.approveLogsLoading = true;
listCompletedFlows({ businessKey }).then(response => {
this.approveLogs = response.data || [];
}).catch(() => {
this.approveLogs = [];
this.$modal.msgError("获取流转历史失败!");
}).finally(() => {
this.approveLogsLoading = false;
});
},
}, },
}; };
</script> </script>