From 40fee153f5c427c23b7191e8116c342b51ac6009 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 27 一月 2026 17:10:41 +0800
Subject: [PATCH] 业务管理：问题修复
---
src/views/business/unpass/components/OAProcess.vue | 420 +++++++++++++++++++++++++++++------------------------------
1 files changed, 205 insertions(+), 215 deletions(-)
diff --git a/src/views/business/unpass/components/OAProcess.vue b/src/views/business/unpass/components/OAProcess.vue
index 5b0b616..eba813d 100644
--- a/src/views/business/unpass/components/OAProcess.vue
+++ b/src/views/business/unpass/components/OAProcess.vue
@@ -1,107 +1,47 @@
<template>
<div>
- <el-dialog :close-on-press-escape="false" :visible.sync="isShow" title="涓嶅悎鏍煎鐞�"
- width="1040px"
- @close="$emit('closeOAProcess')">
-
- <table :border='true' class="table">
- <tr>
- <th class="th-title">1妫�楠屽憳</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{oneOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{oneInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{oneName}}<span v-if="oneName">锛�</span>{{oneTime}}</th>
- </tr>
- <tr>
- <th class="th-title">2妫�娴嬩富绠＄‘璁�</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{twoOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{twoInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{twoName}}<span v-if="twoName">锛�</span>{{twoTime}}</th>
- </tr>
- <tr>
- <th class="th-title">3鐗╂祦閮ㄧ‘璁�</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{threeOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{threeInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{threeName}}<span v-if="threeName">锛�</span>{{threeTime}}</th>
- </tr>
- <tr>
- <th class="th-title">4浜у搧宸ョ▼甯堝鐞嗘剰瑙�</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{fourOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{fourInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{fourName}}<span v-if="fourName">锛�</span>{{fourTime}}</th>
- </tr>
- <tr>
- <th class="th-title">5.鎬诲伐鎴栬�呭壇缁忕悊鐨勫鐞嗘剰瑙�</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{fiveOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{fiveInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{fiveName}}<span v-if="fiveName">锛�</span>{{fiveTime}}</th>
- </tr>
- <tr>
- <th class="th-title">6璐ㄩ噺閮�</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{sixOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{sixInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{sixName}}<span v-if="sixName">锛�</span>{{sixTime}}</th>
- </tr>
- <tr>
- <th class="th-title">7璐ㄩ噺閮ㄧ粡鐞�</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{sevenOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{sevenInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{sevenName}}<span v-if="sevenName">锛�</span>{{sevenTime}}</th>
- </tr>
- <tr>
- <th class="th-title">8鏍哥畻鍛�</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{eightOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{eightInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{eightName}}<span v-if="eightName">锛�</span>{{eightTime}}</th>
- </tr>
- <tr>
- <th class="th-title">9鐗╂祦閮ㄧ储璧旂粨鏋�</th>
- <th class="th-titleSec">澶勭悊缁撴灉</th>
- <th class="th-info1">{{nineOperation}}</th>
- <th class="th-titleSec">澶勭悊鎰忚</th>
- <th class="th-info" colspan="3">{{nineInfo}}</th>
- <th style="display:none;"></th>
- <th style="display:none;"></th>
- <th >{{nineName}}<span v-if="nineName">锛�</span>{{nineTime}}</th>
- </tr>
- </table>
+ <el-dialog
+ :close-on-press-escape="false"
+ :visible.sync="isShow"
+ title="涓嶅悎鏍煎鐞哋A娴佺▼"
+ width="900px"
+ top="10vh"
+ @close="$emit('closeOAProcess')"
+ >
+ <el-timeline style="height: 80vh; overflow-y: scroll">
+ <el-timeline-item
+ placement="top"
+ v-for="node in nodes"
+ :key="node.id"
+ :timestamp="node.name"
+ :icon="node.hasData ? 'el-icon-check' : 'el-icon-time'"
+ :color="node.hasData ? '#0bbd87' : ''"
+ >
+ <el-card>
+ <h3 class="node-title">{{ node.operation }}</h3>
+ <div class="node-details">
+ <div class="detail-item">
+ <span class="label">澶勭悊浜猴細</span>
+ <span class="value">{{ node.operator || "-" }}</span>
+ </div>
+ <div class="detail-item">
+ <span class="label">澶勭悊鏃堕棿锛�</span>
+ <span class="value">{{ node.time || "-" }}</span>
+ </div>
+ <div class="detail-item">
+ <span class="label">{{node.name && node.name==='1妫�楠屽憳'?'涓嶅悎鏍兼弿杩帮細':'澶勭悊鎰忚锛�'}}</span>
+ <span class="value">{{ node.info || "-" }}</span>
+ </div>
+ </div>
+ </el-card>
+ </el-timeline-item>
+ </el-timeline>
</el-dialog>
</div>
</template>
<script>
-import {getOaFlow} from "../../../../api/business/unqualifiedHandler";
+import { getOaFlow } from "../../../../api/business/unqualifiedHandler";
export default {
name: "OAProcess",
@@ -110,143 +50,193 @@
props: {
OAProcess: {
type: Boolean,
- default: () => false
+ default: () => false,
},
},
data() {
// 杩欓噷瀛樻斁鏁版嵁
return {
isShow: this.OAProcess,
- oneInfo: '',
- twoInfo: '',
- threeInfo: '',
- fourInfo: '',
- fiveInfo: '',
- sixInfo: '',
- sevenInfo: '',
- eightInfo: '',
- nineInfo: '',
- oneTime: '',
- twoTime: '',
- threeTime: '',
- fourTime: '',
- fiveTime: '',
- sixTime: '',
- sevenTime: '',
- eightTime: '',
- nineTime: '',
- oneName: '',
- twoName: '',
- threeName: '',
- fourName: '',
- fiveName: '',
- sixName: '',
- sevenName: '',
- eightName: '',
- nineName: '',
- oneOperation: '',
- twoOperation: '',
- threeOperation: '',
- fourOperation: '',
- fiveOperation: '',
- sixOperation: '',
- sevenOperation: '',
- eightOperation: '',
- nineOperation: '',
- }
+ nodes: [
+ {
+ id: 1,
+ name: "1妫�楠屽憳",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ {
+ id: 2,
+ name: "2妫�娴嬩富绠＄‘璁�",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ {
+ id: 3,
+ name: "3鐗╂祦閮ㄧ‘璁�",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ {
+ id: 4,
+ name: "4浜у搧宸ョ▼甯堝鐞嗘剰瑙�",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ {
+ id: 5,
+ name: "5.鎬诲伐鎴栬�呭壇缁忕悊鐨勫鐞嗘剰瑙�",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ {
+ id: 6,
+ name: "6璐ㄩ噺閮�",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ {
+ id: 7,
+ name: "7璐ㄩ噺閮ㄧ粡鐞�",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ {
+ id: 8,
+ name: "8鏍哥畻鍛�",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ {
+ id: 9,
+ name: "9鐗╂祦閮ㄧ储璧旂粨鏋�",
+ info: "",
+ time: "",
+ operator: "",
+ operation: "",
+ hasData: false,
+ },
+ ],
+ };
},
// 鏂规硶闆嗗悎
methods: {
- getInfo (id) {
+ getInfo(id,unqualifiedDesc) {
getOaFlow({
- id: id
- }).then(res => {
- if (res.code === 200) {
- const data = res.data
- if (data.length > 0) {
- data.forEach(item => {
- if (item.nodeName === '1妫�楠屽憳') {
- this.oneInfo = item.approvalOpinion
- this.oneTime = item.approvalDate
- this.oneName = item.approver
- this.oneOperation = item.operation
- } else if (item.nodeName === '2妫�娴嬩富绠＄‘璁�') {
- this.twoInfo = item.approvalOpinion
- this.twoTime = item.approvalDate
- this.twoName = item.approver
- this.twoOperation = item.operation
- } else if (item.nodeName === '3鐗╂祦閮ㄧ‘璁�') {
- this.threeInfo = item.approvalOpinion
- this.threeTime = item.approvalDate
- this.threeName = item.approver
- this.threeOperation = item.operation
- } else if (item.nodeName === '4浜у搧宸ョ▼甯堝鐞嗘剰瑙�') {
- this.fourInfo = item.approvalOpinion
- this.fourTime = item.approvalDate
- this.fourName = item.approver
- this.fourOperation = item.operation
- } else if (item.nodeName === '5.鎬诲伐鎴栬�呭壇缁忕悊鐨勫鐞嗘剰瑙�') {
- this.fiveInfo = item.approvalOpinion
- this.fiveTime = item.approvalDate
- this.fiveName = item.approver
- this.fiveOperation = item.operation
- } else if (item.nodeName === '6璐ㄩ噺閮�') {
- this.sixInfo = item.approvalOpinion
- this.sixTime = item.approvalDate
- this.sixName = item.approver
- this.sixOperation = item.operation
- } else if (item.nodeName === '7璐ㄩ噺閮ㄧ粡鐞�') {
- this.sevenInfo = item.approvalOpinion
- this.sevenTime = item.approvalDate
- this.sevenName = item.approver
- this.sevenOperation = item.operation
- } else if (item.nodeName === '8鏍哥畻鍛�') {
- this.eightInfo = item.approvalOpinion
- this.eightTime = item.approvalDate
- this.eightName = item.approver
- this.eightOperation = item.operation
- } else if (item.nodeName === '9鐗╂祦閮ㄧ储璧旂粨鏋�') {
- this.nineInfo = item.approvalOpinion
- this.nineTime = item.approvalDate
- this.nineName = item.approver
- this.nineOperation = item.operation
- }
- })
- }
- }
- }).catch(err => {
- this.submitDeclareLoading = false
- console.log(err)
+ id: id,
})
- }
+ .then((res) => {
+ if (res.code === 200) {
+ const data = res.data;
+ if (data.length > 0) {
+ data.forEach((item) => {
+ const node = this.nodes.find((n) => n.name === item.nodeName);
+ if (node) {
+ node.time = item.approvalDate + " " + item.approvalTime;
+ if(item.nodeName && item.nodeName==="1妫�楠屽憳"){
+ node.info=unqualifiedDesc;
+ }else{
+ node.info = item.approvalOpinion;
+ }
+ node.operator = item.approver;
+ node.operation = item.operation;
+ node.hasData = true;
+ }
+ });
+ }
+ }
+ })
+ .catch((err) => {
+ this.submitDeclareLoading = false;
+ console.log(err);
+ });
+ },
},
-}
+};
</script>
<style scoped>
-.table {
- width: 100%;
- height: 500px;
+.timeline-item-content {
+ padding: 15px;
+ border: 1px solid #e4e7ed;
+ border-radius: 4px;
+ margin-bottom: 10px;
+ transition: all 0.3s ease;
}
-.th-title {
- width: 160px;
- text-align: left;
- background-color: #e0eaf5;
+
+.node-title {
font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ color: #333;
}
-.th-titleSec {
- width: 70px;
- background-color: #e0eaf5;
- font-size: 16px;
+
+.node-details {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px;
}
-.th-info {
- width: 210px;
- text-align: left;
- font-size: 16px;
+
+.detail-item {
+ display: flex;
+ align-items: center;
+ min-width: 350px;
}
-.th-info1 {
- width: 100px;
- text-align: center;
- font-size: 16px;
+
+.label {
+ font-weight: 500;
+ color: #606266;
+ margin-right: 8px;
+ min-width: 90px;
+}
+
+.value {
+ color: #303133;
+}
+
+/* 宸插畬鎴愯妭鐐规牱寮� */
+.node-completed {
+ color: #67c23a;
+}
+
+.node-completed .timeline-item-content {
+ border-color: #c6e2b8;
+ background-color: #f0f9eb;
+}
+
+.node-completed .node-title {
+ color: #67c23a;
+}
+
+/* 鏃堕棿绾垮浘鏍囨牱寮� */
+.el-timeline-item__node {
+ background-color: #909399;
+}
+
+.node-completed .el-timeline-item__node {
+ background-color: #67c23a;
}
</style>
--
Gitblit v1.9.3