费用审批搭建

src/api/projectCostReimbursement/projectCostReimbursement.js

 import request from '@/utils/request'
 
-// 查询项目费用申请列表
+// 查询项目费用报销列表
 export function getReimbursementList(query) {
     return request({
         url: '/fyglprojectCostReimbursement/getList',

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

+<template>
+  <div class="app-container">
+    日常报销审批
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+
+
+<style scoped lang="scss">
+
+</style>

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

+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

+<template>
+  <div class="app-container">
+
+    <!-- 标题 -->
+      <div class="topDiv">
+        <span class="bold-text1" style="">项目费用申请</span>
+      </div>
+
+
+
+
+
+  </div>
+</template>
+
+<script setup>
+
+
+</script>
+
+
+<style scoped lang="scss">
+.topDiv{
+  margin-bottom: 30px;
+  padding-left: 8px ;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bold-text1 {
+  border-bottom: 4px solid #0062FF;
+  padding-bottom: 22px;
+  height: 15px;
+  font-family: PingFangSC-Medium;
+  font-weight: 900;
+  font-size: 18px;
+  color: #0D162A;
+  letter-spacing: 0;
+  line-height: 15px;
+}
+</style>

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

+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/costManage/examineAndApprove/index.vue

 <template>
-  <el-tabs type="border-card" v-model="activeName">
-    <el-tab-pane label="日常报销" name="first"></el-tab-pane>
-    <el-tab-pane label="出差申请" name="second"></el-tab-pane>
-    <el-tab-pane label="差旅报销" name="third"></el-tab-pane>
-    <el-tab-pane label="项目费用申请" name="fourth"></el-tab-pane>
-    <el-tab-pane label="项目费用报销" name="fifth"></el-tab-pane>
-  </el-tabs>
+  <div class="app-container">
+    <div class="topDiv">
+      <span class="bold-text1" style="">费用审批</span>
+    </div>
+
+    <el-tabs type="border-card" v-model="activeName">
+      <el-tab-pane label="日常报销" name="first">
+        <daily-reimburse-approve/>
+      </el-tab-pane>
+      <el-tab-pane label="出差申请" name="second"></el-tab-pane>
+      <el-tab-pane label="差旅报销" name="third"></el-tab-pane>
+      <el-tab-pane label="项目费用申请" name="fourth">
+        <project-cost-request-approve/>
+      </el-tab-pane>
+      <el-tab-pane label="项目费用报销" name="fifth"></el-tab-pane>
+    </el-tabs>
+  </div>
+
 </template>
 
 <script setup>
+import ProjectCostRequestApprove from "./components/projectCostRequestApprove.vue";
+import DailyReimburseApprove from "./components/dailyReimburseApprove.vue";
+const activeName = ref('first')
+
+
+
+
 
 </script>
 
 
+
 <style scoped lang="scss">
 
+.topDiv{
+  margin-bottom: 30px;
+  padding-left: 8px ;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bold-text1 {
+  border-bottom: 4px solid #0062FF;
+  padding-bottom: 22px;
+  height: 15px;
+  font-family: PingFangSC-Medium;
+  font-weight: 900;
+  font-size: 18px;
+  color: #0D162A;
+  letter-spacing: 0;
+  line-height: 15px;
+}
 </style>

src/views/costManage/projectCostReimbursement/add.vue

@@ -15,12 +15,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="项目名称" prop="projectId">
-                <el-select @change="getProjectDetail" v-model="costReimbursementDetail.projectId" placeholder="请选择项目名称" clearable disabled>
-                  <el-option
-                      v-for="item in projectList.value"
-                      :key="item.projectName"
-                      :label="item.projectName"
-                      :value="item.projectId"/>
+                <el-select  v-model="costReimbursementDetail.projectName" placeholder="请选择项目名称" clearable disabled>
                 </el-select>
               </el-form-item>
             </el-col>
@@ -110,6 +105,7 @@ import {
   updateReimbursement
 } from "../../../api/projectCostReimbursement/projectCostReimbursement.js";
 
+
 const route = useRoute();
 const formRef = ref()
 const projectTypeOptions = reactive([])
@@ -135,16 +131,11 @@ const FormRules = reactive(
     }
 )
 
-//获取所有项目
-const projectList = reactive([]);
-const getProject=()=> {
-  getProjectList().then(response => {
-    console.log("项目列表",response.data)
-    projectList.value = response.data
-  })
+// 重置表单
+const resetForm = () => {
+      costReimbursementDetail.actualAmount = ''
+      costReimbursementDetail.description = ''
 }
-getProject()
-
 //获取编辑详情
 let type = route.query.type
 let id = parseInt(route.query.id)
@@ -155,12 +146,12 @@ if (type === "新增"){
   getCostRequestDetail(id).then(res=>{
     console.log("项目详情",res)
     Object.assign(costReimbursementDetail, res.data);
-    getProjectDetail()
   })
 }else if(type === "编辑"){
   //编辑页面
   console.log("type",type)
   console.log("路由",id)
+  // 等后端把  少的两个字段返给我   直接调报销详情的接口
   getReimbursementDetail(id).then(res=>{
     console.log("报销详情",res)
     Object.assign(costReimbursementDetail, res.data);
@@ -180,7 +171,8 @@ const handleSubmit = ()=>{
         description:costReimbursementDetail.description
       }
       if (type === "新增") {
-        // 发   新增   报销请求
+
+        // 发   新增报销  请求
         addReimbursement(obj).then(response => {
           if (response.code === 200) {
             proxy.$modal.msgSuccess("新增成功");
@@ -190,31 +182,24 @@ const handleSubmit = ()=>{
             proxy.$modal.msgError(response.msg)
           }
         });
+
       } else if (type === "编辑") {
-        // 发   修改   报销请求
+        console.log("修改后数据",obj)
+        // 发   修改报销  请求
         updateReimbursement(obj).then(response => {
           if (response.code === 200) {
             proxy.$modal.msgSuccess("编辑成功");
-            proxy.$router.push({path: '/costManage/projectCostReimbursement/index'})
+            proxy.$router.push({path: '/costManage/projectCostReimbursement'})
           } else {
             proxy.$modal.msgError(response.msg)
           }
         });
+
       }
     }
   });
 }
 
-// 重置表单
-const resetForm = () => {
-  costReimbursementDetail.projectName = '',
-      costReimbursementDetail.projectType = '',
-      costReimbursementDetail.projectId = '',
-      costReimbursementDetail.costType = '',
-      costReimbursementDetail.timeOfExpense = '',
-      costReimbursementDetail.sumMoney = '',
-      costReimbursementDetail.remark = ''
-}
 //  取消按钮
 const router = useRouter()
 const goBackIndex = () => {

src/views/costManage/projectCostReimbursement/detail.vue

@@ -10,12 +10,13 @@
       </div>
 
       <!--    步骤条-->
-      <div class="shadow_box_bottom_step">
+      <div v-if="reimbursementDetail" class="shadow_box_bottom_step">
         <text   class="text1">审批流程</text>
-        <FlowChart  :dataList="list" :widthDontai="'70%'" :activeIndex="reimbursementDetail.reimbursmentApproveStatus === 3 ? 5 :1"/>
+        <FlowChart  :dataList="list" :widthDontai="'70%'" :activeIndex="reimbursementDetail.reimbursmentApproveStatus === 3 ? 5 :3"/>
       </div>
 
-      <div  class="detail">
+      <!--    详情-->
+    <div  class="detail" v-if="reimbursementDetail" >
     <el-row>
       <el-col :span="2"> <span>流水号：</span></el-col>
       <el-col :span="22"><div>{{reimbursementDetail.serialNumber}}</div></el-col>
@@ -91,12 +92,13 @@ const { project_status, project_cost_type,project_cost_request_status,project_ty
 const list = ['个人','PM','事业部负责人','财务','领导']
 
 //获取详情
-const reimbursementDetail = ref([])
+const reimbursementDetail = reactive({})
 let id = proxy.$route.query.id;
 const getDetail=()=> {
   getReimbursementDetail(id).then(response => {
     console.log("res",response.data)
-    reimbursementDetail.value = response.data
+    Object.assign(reimbursementDetail,response.data);
+    // reimbursementDetail.value = response.data
   });
 }
 getDetail()
@@ -138,7 +140,7 @@ onMounted(()=>{
   });
 })
 
-//返回
+//  返回
 const goBackReimburseIndex = () => {
   router.push({ path: '/costManage/projectCostReimbursement' })
 }
@@ -160,10 +162,6 @@ const goBackReimburseIndex = () => {
     color: #4A4E54;;
   }
 }
-
-
-
-
 .top {
   display: flex;
   flex-direction: column;

src/views/costManage/projectCostReimbursement/index.vue

@@ -22,7 +22,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="审批状态">
-          <el-select style="width: 220px" v-model="queryParams.approveStatus" placeholder="请选择审批状态" clearable>
+          <el-select style="width: 220px" v-model="queryParams.reimbursmentApproveStatus" placeholder="请选择审批状态" clearable>
             <el-option
                 v-for="dict in project_cost_request_status"
                 :key="dict.value"
@@ -169,7 +169,8 @@ const queryParams = reactive({
   projectName:null,
   projectNumber:null,
   userName:null,
-  projectType:null
+  projectType:null,
+  reimbursmentApproveStatus:null
 })
 // 定义是否展开的状态
 const isExpanded = ref(false);
@@ -211,10 +212,12 @@ const handleHover = (row) => {
   changProjectNumber.value = row.projectNumber
   // console.log("当前行的项目编号",row.projectNumber)
   const Status = row.reimbursmentApproveStatus;
-  if (Status === 1 || Status === 2) {
+  if (Status === 1 ) {
     stepActive.value = 1;
   } else if (Status === 3) {
     stepActive.value = 5;
+  }else if(Status === 2){
+    stepActive.value = 3;
   }
 }
 const handleLeave = () => {
@@ -235,9 +238,8 @@ getAllProjectName()
 // 重置表单
 const reset = () => {
   queryParams.projectName = null
-  queryParams.projectNumber = null
-  queryParams.userName = null
   queryParams.projectType = null
+  queryParams.reimbursmentApproveStatus = null
   getList()
 }
 
@@ -275,7 +277,7 @@ const handleView=({id})=> {
 //编辑
 const handleUpdate=({id})=>{
   console.log("编辑"+id)
-  proxy.$router.push({ path: '/costManage/projectCostReimbursement/add',query: { id: 2,type:"编辑" } });
+  proxy.$router.push({ path: '/costManage/projectCostReimbursement/add',query: { id: id,type:"编辑" } });
 }
 
 //跳转至打印页

src/views/costManage/projectCostReimbursement/waitReimbursement.vue

@@ -268,7 +268,7 @@ const handleToAdd=({id})=> {
 
 .pagination-box {
   padding-right: 43%;
-  margin-top: 400px;
+  margin-top: 220px;
 }
 
 </style>

src/views/costManage/projectCostRequest/detail.vue

@@ -14,12 +14,7 @@
           <FlowChart  :dataList="list" :widthDontai="'70%'" :activeIndex="costRequestDetailList.value.approveStatus === 3 ? 5 :1"/>
         </div>
 
-
       <div v-if="costRequestDetailList.value"  class="detail">
-<!--        <el-row>-->
-<!--          <el-col :span="2"> <span>流水号：</span></el-col>-->
-<!--          <el-col :span="22"><div>{{costRequestDetailList.value.waterNumber}}</div></el-col>-->
-<!--        </el-row>-->
         <el-row>
           <el-col :span="2"> <span>项目名称：</span></el-col>
           <el-col :span="22"><div>{{costRequestDetailList.value.projectName}}</div></el-col>
@@ -44,22 +39,10 @@
           <el-col :span="2"> <span>费用类型：</span></el-col>
           <el-col :span="22"><div>{{changeProjectCostType(costRequestDetailList.value.costType)}}</div></el-col>
         </el-row>
-<!--        <el-row>-->
-<!--          <el-col :span="2"> <span>物品描述：</span></el-col>-->
-<!--          <el-col :span="22"><div>{{costRequestDetailList.value.description}}</div></el-col>-->
-<!--        </el-row>-->
         <el-row>
           <el-col :span="2"> <span>费用发生时间：</span></el-col>
           <el-col :span="22"><div>{{costRequestDetailList.value.timeOfExpense}}</div></el-col>
         </el-row>
-<!--        <el-row>-->
-<!--          <el-col :span="2"> <span>单价：</span></el-col>-->
-<!--          <el-col :span="22"><div>{{costRequestDetailList.value.unitPrice}}</div></el-col>-->
-<!--        </el-row>-->
-<!--        <el-row>-->
-<!--          <el-col :span="2"> <span>数量：</span></el-col>-->
-<!--          <el-col :span="22"><div>{{costRequestDetailList.value.amount}}</div></el-col>-->
-<!--        </el-row>-->
         <el-row>
           <el-col :span="2"> <span>预计金额（元）：</span></el-col>
           <el-col :span="22"><div>{{costRequestDetailList.value.sumMoney}}</div></el-col>
@@ -96,31 +79,14 @@ import { onMounted } from 'vue';
 import { getDicts } from "@/api/system/dict/data";
 import FlowChart from '@/components/FlowChart/index.vue'
 import { reactive, ref} from 'vue'
-import { useRouter } from 'vue-router'
-import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
+const router = useRouter()
+import {getCostRequestDetail} from "../../../api/projectCostRequest/projectCostRequest.js";
+import {useRouter} from "vue-router";
 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 list = ['个人','PM','事业部负责人','财务','领导']
 
-// const costRequestDetailList = reactive({
-//   waterNumber:null,
-//   costType:null,
-//   projectName:null,
-//   description:null,
-//   projectNumber:null,
-//   createTime:null,
-//   projectType:null,
-//   unitPrice:null,
-//   amount:null,
-//   userName:null,
-//   sumMoney:null,
-//   projectStatus:null,
-//   remark:null,
-//   approveStatus:null
-//   timeOfExpense:null
-// });
-
 const costRequestDetailList = reactive({})
 let projectId = proxy.$route.query.id;
 const getDetail=()=> {
@@ -175,12 +141,11 @@ onMounted(()=>{
 
 
 //  取消按钮
-const router = useRouter()
 const goBackIndex = () => {
   router.push({ path: '/costManage/projectCostRequest/index' })
 }
 
-//去报销按钮
+//  申请报销按钮
 const goToAddReimburse = () => {
   console.log(projectId)
   router.push({ path: '/costManage/projectCostReimbursement/add',query: { id: projectId,type:"新增" }})

src/views/costManage/projectCostRequest/index.vue

@@ -81,7 +81,7 @@
     <div class="contentTable" >
       <el-table v-loading="loading" :data="projectCostRequestList" border>
         <el-table-column type="selection" align="center"></el-table-column>
-        <el-table-column  prop="createTime" label="申请时间" align="center">
+        <el-table-column  prop="createTime" label="申请时间" align="center" width="190px">
           <template #default="{row}">
             <span  @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.createTime}}</span>
           </template>
@@ -106,6 +106,11 @@
             <dict-tag :options="project_cost_type" :value="scope.row.costType" @mouseenter="handleHover(scope.row)" @mouseleave="handleLeave"/>
           </template>
         </el-table-column>
+        <el-table-column prop="timeOfExpense" label="费用发生时间" align="center">
+          <template #default="{row}">
+            <span @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.timeOfExpense}}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="sumMoney" label="预计金额（元）" align="center">
           <template #default="{row}">
             <div @mouseenter="handleHover(row)" @mouseleave="handleLeave">{{row.sumMoney}}</div>
@@ -139,7 +144,6 @@
         </el-table-column>
       </el-table>
 
-
       <!--    分页-->
       <div class="pagination-box">
         <pagination
@@ -152,9 +156,6 @@
       </div>
     </div>
 
-
-
-
   </div >
 </template>
 
@@ -284,14 +285,8 @@ const handleDelete=(row)=> {
     }).catch(() => {
       proxy.$modal.msgError("删除失败");
     });
-
-
 }
 
-//  导出列表
-
-
-
 </script>