项目费用申报销-审核

src/api/projectCostRequest/projectCostRequest.js

@@ -72,3 +72,5 @@ export function getAllapproveList(id) {
         method: 'get'
     })
 }
+
+

src/views/costManage/projectCostReimbursement/index.vue

@@ -74,46 +74,49 @@
         <text>项目编号</text>
         <text>{{changProjectNumber}}</text>
       </div>
-      <FlowChart  :dataList="list" :widthDontai="'70%'" :activeIndex="stepActive"/>
+      <div>
+        <FlowChart  :dataList="list" :itemWidth="'130px'" :activeIndex="stepActive"/>
+
+      </div>
     </div>
 
     <!--      列表-->
     <div class="contentTable">
-      <el-table v-loading="loading" :data="ReimbursementRequestList" border>
+      <el-table v-loading="loading" :data="ReimbursementRequestList" border @cell-mouse-enter="handleHover" @cell-mouse-leave="handleLeave">
         <el-table-column type="selection" align="center"></el-table-column>
         <el-table-column width="180px" prop="updateTime" label="申请时间" align="center">
           <template #default="scope">
-            <span  @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">{{scope.row.updateTime}}</span>
+            <span >{{scope.row.updateTime}}</span>
           </template>
         </el-table-column>
         <el-table-column prop="projectName" label="项目名称" align="center">
           <template #default="scope">
-            <span @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">{{scope.row.projectName}}</span>
+            <span >{{scope.row.projectName}}</span>
           </template>
         </el-table-column>
         <el-table-column prop="projectType" label="项目类型" align="center">
           <template #default="scope">
-            <dict-tag :options="project_type" :value="scope.row.projectType" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave"/>
+            <dict-tag :options="project_type" :value="scope.row.projectType" />
           </template>
         </el-table-column>
         <el-table-column  prop="timeOfExpense" label="费用发生时间" align="center">
           <template #default="scope">
-            <span  @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">{{scope.row.timeOfExpense}}</span>
+            <span  >{{scope.row.timeOfExpense}}</span>
           </template>
         </el-table-column>
         <el-table-column prop="costType" label="费用类型" align="center">
           <template #default="scope">
-            <dict-tag :options="project_cost_type" :value="scope.row.costType" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave"/>
+            <dict-tag :options="project_cost_type" :value="scope.row.costType" />
           </template>
         </el-table-column>
         <el-table-column prop="actualAmount" label="实际金额（元）" align="center">
           <template #default="scope">
-            <span  @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">{{scope.row.actualAmount}}</span>
+            <span  >{{scope.row.actualAmount}}</span>
           </template>
         </el-table-column>
         <el-table-column  prop="reimbursmentApproveStatus" label="报销审批状态" align="center">
           <template #default="scope">
-            <dict-tag :options="project_cost_request_status" :value="scope.row.reimbursmentApproveStatus" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave"/>
+            <dict-tag :options="project_cost_request_status" :value="scope.row.reimbursmentApproveStatus" />
           </template>
         </el-table-column>
 
@@ -121,22 +124,22 @@
         <el-table-column label="操作" align="center" width="230px">
           <template #default="scope" >
             <el-tooltip content="编辑" placement="top" >
-              <el-button :disabled="scope.row.reimbursmentApproveStatus === 3" link type="text" @click="handleUpdate(scope.row)" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
+              <el-button :disabled="scope.row.reimbursmentApproveStatus === 3" link type="text" @click="handleUpdate(scope.row)" >
                 <img src="@/assets/icons/common/edit.png" height="32" width="32"/>
               </el-button>
             </el-tooltip>
             <el-tooltip content="详情" placement="top">
-              <el-button link type="text"  @click="handleView(scope.row)" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
+              <el-button link type="text"  @click="handleView(scope.row)" >
                 <img src="@/assets/icons/common/check.png" height="32" width="32"/>
               </el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="text"  @click="handleDelete(scope.row)" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
+              <el-button link type="text"  @click="handleDelete(scope.row)" >
                 <img src="@/assets/icons/common/delete.png" height="32" width="32"/>
               </el-button>
             </el-tooltip>
             <el-tooltip content="打印报销单" placement="top">
-              <el-button :disabled="scope.row.reimbursmentApproveStatus!== 3" link type="text"  @click="handlePrint()" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave">
+              <el-button :disabled="scope.row.reimbursmentApproveStatus!== 3" link type="text"  @click="handlePrint()" >
                 <img src="@/assets/icons/common/print.png" height="32" width="32"/>
               </el-button>
             </el-tooltip>
@@ -158,11 +161,26 @@
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
+import {
+  delCostRequest,
+  getCostRequestDetail,
+  getCostRequestList,
+  getProjectName,
+  getAllapproveList
+} from "../../../api/projectCostRequest/projectCostRequest.js";
+import {ArrowDown} from "@element-plus/icons-vue";
+import {
+  delReimbursement,
+  getReimbursementList
+} from "../../../api/projectCostReimbursement/projectCostReimbursement.js";
 import FlowChart from '@/components/FlowChart/index.vue'
 import { reactive, ref } from 'vue'
 const { proxy } = getCurrentInstance();
 const { project_status, project_cost_type,project_cost_request_status,project_type} = proxy.useDict('project_status', 'project_cost_type','project_cost_request_status','project_type');
 const total = ref(2);
+const ReimbursementRequestList = ref([]);
+
 const queryParams = reactive({
   pageNum:1,
   pageSize:10,
@@ -180,10 +198,19 @@ const toggleSearch = () => {
 }
 
 // 流程图内容
-const list = ['个人','PM','事业部负责人','财务','领导']
+const list = ref([]) // 流程图内容,只有值
+const allList = ref([]) // 流程图内容,值和角色id
+//获取列表第一个顶部信息
+const getTopApproveInfo = ()=>{
+  let item2 = ReimbursementRequestList.value[0]
+  console.log("first",item2)
+  changProjectNumber.value = item2.projectNumber
+  let i = allList.value.findIndex((item)=>item.nodeId === item2.currentAuditNodeId)
 
+  if(i === -1)  stepActive.value = 1
+  else stepActive.value = i+1
+}
   // 列表
-const ReimbursementRequestList = ref([]);
 // 获取报销列表数据
 const getList=()=> {
   getReimbursementList(queryParams).then(response => {
@@ -200,29 +227,53 @@ const getList=()=> {
       }
     });
     ReimbursementRequestList.value = sortedRows;
+    getTopApproveInfo()
   });
 }
 getList()
-
+//获取所有审批流程
+const getAllshenpiList = ()=>{
+  getAllapproveList(15).then(response => {
+    list.value = response.data.nodeList.map((item)=>{
+      return  item.roleName
+    })
+    allList.value = response.data.nodeList
+    console.log("所有节点",allList.value)
+  })
+}
+getAllshenpiList()
 //鼠标悬停更改步骤条
 const hoverColumnData = ref('');
 const stepActive = ref(1);
 const changProjectNumber = ref('')
-const handleHover = (row) => {
+let timer = null;
+
+const handleHover = (row, column, cell, event) => {
   changProjectNumber.value = row.projectNumber
   // console.log("当前行的项目编号",row.projectNumber)
-  const Status = row.reimbursmentApproveStatus;
-  if (Status === 1 ) {
-    stepActive.value = 1;
-  } else if (Status === 3) {
-    stepActive.value = 5;
-  }else if(Status === 2){
-    stepActive.value = 3;
+  //防抖
+
+  if (timer) {
+    clearTimeout(timer);
   }
+  timer = setTimeout(() => {
+    changProjectNumber.value = row.projectNumber
+    let i = allList.value.findIndex((item)=>item.nodeId === row.currentAuditNodeId)
+    if(i === -1)  stepActive.value = 1
+    else stepActive.value = i+1
+
+
+  }, 300);
 }
 const handleLeave = () => {
-  stepActive.value = 1;
-  hoverColumnData.value = '';
+
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(() => {
+    getTopApproveInfo()
+
+  }, 300);
 }
 //表单——获取所有项目名称
 const projectNameList = ref([]);
@@ -250,18 +301,7 @@ const onSearch = () => {
 }
 
 //新增按钮
-import { useRouter } from 'vue-router'
-import {
-  delCostRequest,
-  getCostRequestDetail,
-  getCostRequestList,
-  getProjectName
-} from "../../../api/projectCostRequest/projectCostRequest.js";
-import {ArrowDown} from "@element-plus/icons-vue";
-import {
-  delReimbursement,
-  getReimbursementList
-} from "../../../api/projectCostReimbursement/projectCostReimbursement.js";
+
 const router = useRouter()
 const goToApplyPage = () => {
   router.push({ path: '/costManage/projectCostReimbursement/waitReimbursement' ,query:{type:"新增"}})

src/views/costManage/projectCostRequest/index.vue

@@ -196,7 +196,8 @@ const getTopApproveInfo = ()=>{
   console.log("first",item2)
   changProjectNumber.value = item2.projectNumber
   let i = allList.value.findIndex((item)=>item.nodeId === item2.currentAuditRoleId)
-  stepActive.value = i+1
+  if(i === -1)  stepActive.value = 1
+  else stepActive.value = i+1
 }
 
 //  列表
@@ -276,7 +277,8 @@ const handleHover = (row, column, cell, event) => {
     changProjectNumber.value = row.projectNumber
     console.log("劲来了",row)
     let i = allList.value.findIndex((item)=>item.nodeId === row.currentAuditRoleId)
-    stepActive.value = i+1
+    if(i === -1)  stepActive.value = 1
+    else stepActive.value = i+1
 
 
   }, 300);