差旅报销审批

src/api/examineAndApprove/examineAndApprove.js

@@ -116,3 +116,21 @@ export function tripApplicationPassNotPass(query) {
         data:query
     })
 }
+
+//  4.差旅报销审批
+//差旅报销-通过
+export function travelOnBusinessPass(query) {
+    return request({
+        url: '/expenseApproval/travelOnBusinessApproval',
+        method: 'post',
+        data:query
+    })
+}
+//差旅报销-驳回
+export function travelOnBusinessNotPass(query) {
+    return request({
+        url: '/expenseApproval/travelOnBusinessApprovalReject',
+        method: 'post',
+        data:query
+    })
+}

src/views/costManage/examineAndApprove/components/tripApplicationApprove.vue

@@ -94,7 +94,6 @@
       <div class="topDiv">
         <span class="bold-text1" style="">出差申请审批</span>
       </div>
-      <!--    按钮-->
       <div>
         <el-button class="el-button-defalut" type="default" @click="oneClickNotPass">一键驳回</el-button>
         <el-button  class="el-button-primary" style="margin-left: 20px"  type="primary" @click="oneClickPass">一键通过</el-button>

src/views/costManage/examineAndApprove/components/tripReimburseApprove.vue

@@ -87,8 +87,8 @@
         <span class="bold-text1" style="">差旅报销审批</span>
       </div>
       <div>
-        <el-button class="el-button-defalut" type="default" @click="">一键驳回</el-button>
-        <el-button  class="el-button-primary" style="margin-left: 20px" type="primary" @click="">一键通过</el-button>
+        <el-button class="el-button-defalut" type="default" @click="oneClickNotPass">一键驳回</el-button>
+        <el-button  class="el-button-primary" style="margin-left: 20px"  type="primary" @click="oneClickPass">一键通过</el-button>
       </div>
     </div>
     <!--    步骤条-->
@@ -99,12 +99,12 @@
         <text>{{changProjectNumber}}</text>
       </div>
       <div >
-        <FlowChart  :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
+        <FlowChart  :dataList="list" :itemWidth="'130px'" :activeIndex="stepActive"/>
       </div>
     </div>
     <!-- 表格数据 -->
-    <el-table  v-loading="loading" :data="tripReimburseList" border style="width: 100%">
-      <el-table-column type="selection" width="40" align="right"/>
+    <el-table  @cell-mouse-enter="handleHover" @cell-mouse-leave="handleLeave" v-loading="loading" :data="tripReimburseList" border style="width: 100%"  @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="40" align="right" :selectable="rowSelectable"/>
       <el-table-column label="申请人" align="center" prop="updateBy" fixed  min-width="120"/>
       <el-table-column label="项目编号" align="center" prop="projectNumber" min-width="160"/>
       <el-table-column label="项目名称" align="center" prop="projectName" min-width="120" show-overflow-tooltip/>
@@ -138,8 +138,8 @@
       <!--   操作按钮-->
       <el-table-column label="操作" align="center" fixed="right"  min-width="120">
         <template #default="scope" >
-          <el-button link   type="primary" size="small" style="font-size: 16px">通过</el-button>
-          <el-button link @click="dialogFormVisible = true"  type="danger" size="small" style="font-size: 16px">驳回</el-button>
+          <el-button :disabled="scope.row.currentStatus !== 0" link @click="passProjectCost(scope.row)" type="primary" size="small" style="font-size: 15px">通过</el-button>
+          <el-button :disabled="scope.row.currentStatus !== 0" link  @click="reject(scope.row)"  type="danger" size="small" style="font-size: 15px">驳回</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -166,9 +166,9 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <div style="position: absolute;left: 60%;display: flex">
-        <el-button @click="dialogFormVisible = false"  class="btn-B">取消</el-button>
-        <el-button  @click="dialogFormVisible"  class="btn-A" type="primary">确定</el-button>
+      <div style="position: absolute;left: 35%;display: flex">
+        <el-button @click="cancelReject"  class="btn-B">取消</el-button>
+        <el-button  @click="sureReject"  class="btn-A" type="primary">确定</el-button>
       </div>
     </template>
   </el-dialog>
@@ -182,9 +182,15 @@ import {useRouter} from "vue-router";
 import {
   getApproveNodeList,
   getProjectManagerName,
-  getProjectName, getRoleId
+  getProjectName,
+  getRoleId,
+  travelOnBusinessNotPass,
+  travelOnBusinessPass,
+  tripApplicationApproval,
+  tripApplicationPassNotPass
 } from "../../../../api/examineAndApprove/examineAndApprove.js";
 import {listTripApplication, listTripReimburse} from "../../../../api/costManage/cost.js";
+import {ElMessage} from "element-plus";
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 const {cost_daily_status, project_status, project_type } = proxy.useDict('cost_daily_status','project_status', 'project_type');
@@ -219,7 +225,8 @@ const dialogFormVisible = ref(false)
 
 // 更多搜索框
 const isExpanded = ref(false);
-
+const changProjectNumber = ref('')
+const stepActive = ref(1)
 const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
@@ -253,7 +260,13 @@ const getAllProjectManagerName=()=> {
   });
 }
 getAllProjectManagerName()
-
+// 重置表单
+const reset = () => {
+  queryParams.projectName = null
+  queryParams.projectType = null
+  queryParams.status = null
+  getList()
+}
 
 //获取所有流程列表,根据审批id（差旅报销的流程配置id是24）
 const getNodeList = ()=>{
@@ -281,15 +294,202 @@ const getList=()=> {
     total.value = res.total;
     Object.assign(tripReimburseList, res.rows);
     loading.value = false;
-    // for(let i in tripReimburseList){
-    //   tripReimburseList[i].currentStatus = approvalStatusChange(tripReimburseList[i].status,tripReimburseList[i].currentAuditRoleId)
-    // }
+    for(let i in tripReimburseList){
+      tripReimburseList[i].currentStatus = approvalStatusChange(tripReimburseList[i].status,tripReimburseList[i].currentAuditRoleId)
+    }
     console.log("差旅报销审批-列表",tripReimburseList)
 
-    // getTopApproveInfo()
+    getTopApproveInfo()
   });
 }
 
+//表格多选
+const handleSelectionChange = (val) => {
+  passObjList.length = 0
+  for(let item of val){
+    let currentAuditRoleId = item.currentAuditRoleId
+    //获取currentAuditRoleId的下标
+    let index = allList.value.findIndex(item=>item.nodeId === currentAuditRoleId)
+
+    let obj = {
+      //差旅报销id
+      travelOnBusinessId:item.id,
+      //下一个节点nodeId
+      nextNodeId:null,
+      //是否终审
+      isEndApproval:false
+    }
+    //判断是不是最后一个下标
+    if((allList.value.length -1) === index){
+      //最后一个下标的话
+      obj.nextNodeId = allList.value[index].nodeId
+      obj.isEndApproval = true
+    }else{
+      //不是最后一个下标
+      obj.nextNodeId = allList.value[index + 1].nodeId
+      obj.isEndApproval = false
+    }
+    passObjList.push(obj)
+
+  }
+};
+//只有待审批的表格可选
+const rowSelectable = (row) => {
+  return row.currentStatus === 0
+};
+
+//获取当前审批状态 返回值0表示当前用户可以审核，大于0已经审核过了，小于0表示表示还没到当前用户
+const approvalStatusChange = (status,currentNodeId)=>{
+
+
+  //如果状态为未通过，那么这里返回-999
+  if(status === 1) return -999
+  if(status === 3) return 999
+  // 先根据每个节点的激活nodeid查找对应的角色id---也就是可以申请的角色
+  let activeRoleId = allList.value.find(item =>item.nodeId === currentNodeId).roleId
+
+
+  let lastCurrentRoleId  = currentUserRoleInfoList.value[currentUserRoleInfoList.value.length - 1].roleId
+
+  //激活id的下标减去当前登录用户最后一个角色id的在整体审批列表差
+  //0表示当前用户可以审核，大于0已经审核过了，小于0表示表示还没到当前用户
+  return allList.value.findIndex(item =>item.roleId === activeRoleId) - allList.value.findIndex(item =>item.roleId === lastCurrentRoleId)
+}
+
+
+//获取列表第一个顶部信息
+const getTopApproveInfo = ()=>{
+  let item2 = tripReimburseList[0]
+  changProjectNumber.value = item2.projectNumber
+  let i = allList.value.findIndex((item)=>item.nodeId === item2.currentAuditRoleId)
+  if(i === -1)  stepActive.value = 1
+  else stepActive.value = i+1
+}
+
+//表格的鼠标进入事件
+let timer = null;
+const handleHover = (row, column, cell, event) => {
+  //防抖
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(() => {
+    changProjectNumber.value = row.projectNumber
+    let i = allList.value.findIndex((item)=>item.nodeId === row.currentAuditRoleId)
+    console.log(i)
+    if(i === -1)  stepActive.value = 1
+    else stepActive.value = i+1
+
+  }, 300);
+}
+const handleLeave = () => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(() => {
+    getTopApproveInfo()
+  }, 300);
+}
+
+//一键通过
+const oneClickPass = ()=>{
+  if(!passObjList.length) return   ElMessage({
+    message: '请先选择数据项',
+    type: 'error'
+  })
+  travelOnBusinessPass(passObjList).then(res=>{
+    if(res.code === 200){
+      getList()
+    }
+  })
+}
+//通过
+const passProjectCost = (row)=>{
+  let currentAuditRoleId = row.currentAuditRoleId
+  //获取currentAuditRoleId的下标
+  let index = allList.value.findIndex(item=>item.nodeId === currentAuditRoleId)
+
+  let obj = {
+    // 差旅报销id
+    travelOnBusinessId:row.id,
+    //下一个节点nodeId
+    nextNodeId:null,
+    //是否终审
+    isEndApproval:false
+  }
+  //判断是不是最后一个下标
+  if((allList.value.length -1) === index){
+    //最后一个下标的话
+    obj.nextNodeId = allList.value[index].nodeId
+    obj.isEndApproval = true
+  }else{
+    //不是最后一个下标
+    obj.nextNodeId = allList.value[index + 1].nodeId
+    obj.isEndApproval = false
+  }
+  console.log("obj",obj)
+  travelOnBusinessPass([obj]).then(res=>{
+    console.log("响应",res)
+    if(res.code === 200){
+      getList()
+    }
+  })
+}
+
+//驳回
+const reject = (row)=>{
+  oneClickFlag = false
+  console.log(row)
+  dialogFormVisible.value = true
+  rejectObj.travelOnBusinessId = row.id
+}
+//确定驳回
+const sureReject = ()=>{
+
+  if(oneClickFlag){
+    //如果是一键驳回
+    let list = passObjList.map((item)=>{
+      return {
+        travelOnBusinessId:item.travelOnBusinessId,
+        groundsForRejection:rejectObj.groundsForRejection
+      }
+    })
+
+    travelOnBusinessNotPass(list).then(res=>{
+      dialogFormVisible.value = false
+      cancelReject()
+      getList()
+    })
+  }else {
+    //不是一键驳回
+    travelOnBusinessNotPass([rejectObj]).then(res=>{
+      dialogFormVisible.value = false
+      cancelReject()
+      getList()
+    })
+  }
+
+}
+//一键驳回
+const oneClickNotPass = ()=>{
+
+  if(!passObjList.length) return   ElMessage({
+    message: '请先选择数据项',
+    type: 'error'
+  })
+  oneClickFlag = true
+  dialogFormVisible.value = true
+
+}
+
+//取消对话框
+const cancelReject = ()=>{
+  dialogFormVisible.value = false
+  rejectObj = reactive({
+    id :null,
+    groundsForRejection:null
+  })
+}
 
 /** 搜索按钮操作 */
 function handleQuery() {