fix:付款单、收票单、收款单、开票单详情展示流转意见信息
parent
61143a39f7
commit
5ac798c295
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue