费用审批

src/api/examineAndApprove/examineAndApprove.js

+import request from "../../utils/request.js";
+// 1.项目费用申请审批
+
+//获取所有项目名称（查询下拉框）
+export function getProjectName() {
+    return request({
+        url: '/projectCostRequest/projectAllList',
+        method: 'get'
+    })
+}
+
+
+// 2.项目费用报销审批
+
+
+
+

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

@@ -37,11 +37,27 @@
     </div  >
 
   <div class="contentTable">
-    <!--    按钮-->
-      <div style="margin-bottom: 30px">
+    <!--    标题、按钮-->
+    <div class="shadow_box_bottom_add">
+      <div class="topDiv">
+        <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>
       </div>
+    </div>
+    <!--    步骤条-->
+    <div class="shadow_box_bottom_step">
+      <text class="text1">审批流程</text>
+      <div class="text2">
+        <text>项目编号</text>
+        <text>{{changProjectNumber}}</text>
+      </div>
+      <div >
+        <FlowChart  :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
+      </div>
+    </div>
     <!-- 列表 -->
       <el-table :data="ReimbursementRequestList" border>
         <el-table-column type="selection" align="center"></el-table-column>
@@ -83,6 +99,7 @@
 
 <script setup>
 import {reactive, ref} from "vue";
+import FlowChart from '@/components/FlowChart/index.vue'
 const ReimbursementRequestList = ref([
   {
     shenqingren:'张三',
@@ -95,7 +112,8 @@ const ReimbursementRequestList = ref([
     approvalStatus:'进行中'
   }
 ]);
-
+const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
+const allList = ref([]) // 流程图内容,值和角色id
 const total = ref(0);
 const queryParams = reactive({
   pageNum:1,
@@ -110,5 +128,55 @@ const queryParams = reactive({
 
 
 <style scoped lang="scss">
+//步骤条
+.shadow_box_bottom_step {
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding: 20px 0px;
+  width: 100%;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: #F9F9FA;
+  .text1 {
+    font-size: 18px;
+    font-weight: 550;
+  }
+  .text2 {
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+    align-items: center;
+  }
+  .step {
+    width: 80%;
+  }
+}
+
+//导航 、 按钮
+.shadow_box_bottom_add {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding:10px 0;
+  margin-bottom: 20px;
+  .topDiv{
+    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/projectCostRequestApprove.vue

@@ -20,6 +20,7 @@
                 :value="dict.value"/>
           </el-select>
         </el-form-item>
+<!--        审批页的审批状态：待审批，已通过，未通过-->
         <el-form-item label="审批状态">
           <el-select  style="width: 220px" v-model="queryParams.approveStatus" placeholder="请选择审批状态" clearable>
             <el-option
@@ -37,20 +38,36 @@
     </div  >
 
   <div class="contentTable">
-    <!--    按钮-->
-      <div style="margin-bottom: 30px">
+    <!--    标题、按钮-->
+    <div class="shadow_box_bottom_add">
+      <div class="topDiv">
+        <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>
       </div>
+    </div>
+    <!--    步骤条-->
+    <div class="shadow_box_bottom_step">
+      <text class="text1">审批流程</text>
+      <div class="text2">
+        <text>项目编号</text>
+        <text>{{changProjectNumber}}</text>
+      </div>
+      <div >
+        <FlowChart  :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
+      </div>
+    </div>
     <!-- 列表 -->
       <el-table  :data="projectCostRequestList" border>
         <el-table-column type="selection" align="center"></el-table-column>
-        <el-table-column  prop="shenqingren" label="申请人" align="center"></el-table-column>
+        <el-table-column  prop="createBy" label="申请人" align="center"></el-table-column>
         <el-table-column  prop="createTime" label="申请时间" align="center" min-width="100px"> </el-table-column>
         <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
         <el-table-column prop="projectType" label="项目类型" align="center"></el-table-column>
-<!--        <el-table-column prop="userName" label="事业部负责人" align="center"></el-table-column>-->
-        <el-table-column prop="expenseType" label="费用类型" align="center" ></el-table-column>
+        <el-table-column prop="userName" label="事业部负责人" align="center"></el-table-column>
+        <el-table-column prop="costType" label="费用类型" align="center" ></el-table-column>
         <el-table-column prop="timeOfExpense" label="费用发生时间" align="center"></el-table-column>
         <el-table-column prop="sumMoney" label="预计金额（元）" align="center"></el-table-column>
         <el-table-column prop="approvalStatus" label="审批状态" align="center"></el-table-column>
@@ -86,34 +103,109 @@
 
 <script setup>
 import {reactive, ref} from "vue";
+const router = useRouter()
+import { useRouter } from 'vue-router'
+const { proxy } = getCurrentInstance();
+import FlowChart from '@/components/FlowChart/index.vue'
+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');
+import {getProjectName} from "../../../../api/examineAndApprove/examineAndApprove.js";
+import {getCostRequestList} from "../../../../api/projectCostRequest/projectCostRequest.js";
+const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
+const allList = ref([]) // 流程图内容,值和角色id
 
-const projectCostRequestList = ref([
-  {
-    shenqingren:'张三',
-    createTime:'2025-03-18 10:10:34',
-    projectName:'餐饮项目',
-    projectType:'RL-人力',
-    userName:'ry',
-    expenseType:'办公费-宽带费',
-    timeOfExpense:'2025-02-01',
-    sumMoney:'200',
-    approvalStatus:'进行中'
-  }
-]);
 
 const total = ref(0);
 const queryParams = reactive({
   pageNum:1,
   pageSize:10,
   projectName:null,
-  projectNumber:null,
-  userName:null,
+  projectType:null,
   approveStatus:null
 })
 
+
+//  表单  获取所有项目名称
+const projectNameList = ref([]);
+const getAllProjectName=()=> {
+  getProjectName(queryParams).then(response => {
+    console.log("项目名称",response.data)
+    projectNameList.value = response.data;
+  });
+}
+getAllProjectName()
+//  重置表单
+const reset = () => {
+  queryParams.projectName = null
+  queryParams.projectType = null
+  queryParams.approveStatus = null
+  getList()
+}
+
+
+//  列表
+const projectCostRequestList = ref([]);
+const getList=()=> {
+  getCostRequestList(queryParams).then(response => {
+    total.value = response.total
+    console.log("列表",response)
+    projectCostRequestList.value = response.rows;
+  });
+}
+getList()
+
+
 </script>
 
 
 <style scoped lang="scss">
+//步骤条
+.shadow_box_bottom_step {
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding: 20px 0px;
+  width: 100%;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: #F9F9FA;
+  .text1 {
+    font-size: 18px;
+    font-weight: 550;
+  }
+  .text2 {
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+    align-items: center;
+  }
+  .step {
+    width: 80%;
+  }
+}
 
+//导航 、 按钮
+.shadow_box_bottom_add {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding:10px 0;
+  margin-bottom: 20px;
+  .topDiv{
+    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

@@ -93,10 +93,28 @@
     </div>
 
   <div class="contentTable">
-    <!--    按钮-->
-    <div style="margin-bottom: 30px">
-    <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>
+    <!--    标题、按钮-->
+    <div class="shadow_box_bottom_add">
+      <div class="topDiv">
+        <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>
+      </div>
+    </div>
+
+    <!--    步骤条-->
+    <div class="shadow_box_bottom_step">
+      <text class="text1">审批流程</text>
+      <div class="text2">
+        <text>项目编号</text>
+        <text>{{}}</text>
+      </div>
+      <div >
+        <FlowChart  :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
+      </div>
     </div>
     <!-- 表格数据 -->
     <el-table  :data="projectList" border style="width: 100%">
@@ -113,7 +131,7 @@
       <el-table-column label="审批状态" align="center" prop="projectStatus" ></el-table-column>
       <el-table-column prop="detail" label="详情" align="center" width="100px">
         <el-tooltip content="详情" placement="top">
-          <el-button link type="text"  @click="handleView(scope.row)">
+          <el-button link type="text"  @click="handleView()">
             <img src="@/assets/icons/common/check.png" height="32" width="32"/>
           </el-button>
         </el-tooltip>
@@ -126,29 +144,29 @@
         </template>
       </el-table-column>
     </el-table>
-    <div style="padding-right: 35%;">
-      <pagination
-          v-show="total > 0"
-          :total="total"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
-          @pagination="getList"
-      />
-    </div>
+<!--    <div style="padding-right: 35%;">-->
+<!--      <pagination-->
+<!--          v-show="total > 0"-->
+<!--          :total="total"-->
+<!--          v-model:page="queryParams.pageNum"-->
+<!--          v-model:limit="queryParams.pageSize"-->
+<!--          @pagination="getList"-->
+<!--      />-->
+<!--    </div>-->
   </div>
 
 
 <!--  驳回弹出框-->
-    <el-dialog  top="200px" style="width: 745px;height: 300px"  v-model="dialogFormVisible" title="驳回" >
+    <el-dialog  style="width: 745px;height: 300px"  v-model="dialogFormVisible" title="驳回" >
       <template #header>
-        <div style="margin-bottom:30px;color: #0D162AFF;font-family: PingFangSC-Regular;font-weight: 600;font-size: 16px;">驳回<el-divider /></div>
+        <div class="text_weight">驳回<el-divider /></div>
       </template>
-      <div style="padding:5px" >
-        <div style="font-family: PingFangSC-Regular;font-weight: 550;font-size: 16px;color: #0D162A">驳回原因</div>
-        <div style="width: 680px;margin-top:10px"> <el-input  :rows="3" type="textarea" v-model="form.name" placeholder="请输入驳回原因" /></div>
+      <div style="padding: 5px;display: flex;flex-direction:column;">
+        <div class="text">驳回原因</div>
+        <div style="width: 95%;margin-top:10px"> <el-input  :rows="3" type="textarea" v-model="form.name" placeholder="请输入驳回原因" /></div>
       </div>
       <template #footer>
-        <div style="position: absolute;left: 60%;display: flex">
+        <div style="position: absolute;left: 35%;display: flex">
           <el-button @click="dialogFormVisible = false"  class="btn-B">取消</el-button>
           <el-button  @click="dialogFormVisible"  class="btn-A" type="primary">确定</el-button>
         </div>
@@ -161,13 +179,15 @@
 
 <script setup  lang="ts">
 import {ArrowDown} from "@element-plus/icons-vue";
+import FlowChart from '@/components/FlowChart/index.vue'
 import {ElMessageBox} from "element-plus";
 import {useRouter} from "vue-router";
-
+import {ref,getCurrentInstance,reactive,toRefs} from "vue"
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 const { project_status, project_type } = proxy.useDict('project_status', 'project_type');
-
+const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
+const allList = ref([]) // 流程图内容,值和角色id
 
 const dialogFormVisible = ref(false)
 const projectList = ref([
@@ -213,6 +233,7 @@ const toggleSearch = () => {
   isExpanded.value = !isExpanded.value;
 }
 
+
 /** 搜索按钮操作 */
 function handleQuery() {
 
@@ -222,16 +243,74 @@ function handleQuery() {
 function resetQuery() {
 
 }
+/** 查看详情按钮操作 */
+function handleView(){
 
-
+}
 
 </script>
 
 
 <style scoped lang="scss">
 
-.el-dialog:not(.is-fullscreen){
-  margin-top: 10vh !important;
+//步骤条
+.shadow_box_bottom_step {
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding: 20px 0px;
+  width: 100%;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: #F9F9FA;
+  .text1 {
+    font-size: 18px;
+    font-weight: 550;
+  }
+  .text2 {
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+    align-items: center;
+  }
+  .step {
+    width: 80%;
+  }
+}
 
+//导航 、 按钮
+.shadow_box_bottom_add {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding:10px 0;
+  .topDiv{
+    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", sans-serif;
+    font-weight: 900;
+    font-size: 18px;
+    color: #0D162A;
+    letter-spacing: 0;
+    line-height: 15px;
+  }
+}
+.text_weight{
+  font-family: "PingFangSC-Medium", sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+}
+.bohui{
+  font-family: "PingFangSC-Medium", sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: #0D162A;
 }
 </style>

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

@@ -86,11 +86,27 @@
     </div>
 
   <div class="contentTable">
-    <!--    按钮-->
-      <div style="margin-bottom: 30px;">
+    <!--    标题、按钮-->
+    <div class="shadow_box_bottom_add">
+      <div class="topDiv">
+        <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>
       </div>
+    </div>
+    <!--    步骤条-->
+    <div class="shadow_box_bottom_step">
+      <text class="text1">审批流程</text>
+      <div class="text2">
+        <text>项目编号</text>
+        <text>{{changProjectNumber}}</text>
+      </div>
+      <div >
+        <FlowChart  :dataList="list" :itemWidth="'130px'" :activeIndex="2"/>
+      </div>
+    </div>
     <!-- 表格数据 -->
     <el-table v-loading="loading" :data="projectList" border style="width: 100%">
       <el-table-column type="selection" width="40" align="right"/>
@@ -160,8 +176,9 @@
 <script setup>
 import {reactive, ref} from "vue";
 import {ArrowDown} from "@element-plus/icons-vue";
-
-
+import FlowChart from '@/components/FlowChart/index.vue'
+const list = ref(['个人','项目经理','事业部负责人','财务','总经理']) // 流程图内容,只有值
+const allList = ref([]) // 流程图内容,值和角色id
 const dialogFormVisible = ref(false)
 const projectList = ref([
   {
@@ -218,5 +235,54 @@ function resetQuery() {
 
 
 <style scoped lang="scss">
+//步骤条
+.shadow_box_bottom_step {
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding: 20px 0px;
+  width: 100%;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: #F9F9FA;
+  .text1 {
+    font-size: 18px;
+    font-weight: 550;
+  }
+  .text2 {
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+    align-items: center;
+  }
+  .step {
+    width: 80%;
+  }
+}
 
+//导航 、 按钮
+.shadow_box_bottom_add {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding:10px 0;
+  margin-bottom: 10px;
+  .topDiv{
+    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/index.vue

@@ -53,7 +53,7 @@ import ProjectCostReimbursementApprove from "./components/projectCostReimburseme
 const activeName = ref('first');
 
 const handleClick = (tab) =>{
-  console.log('点击的标签:', toRaw(tab));
+  // console.log('点击的标签:', toRaw(tab));
   // 更新当前激活的标签名
   activeName.value = tab.name;
 }
@@ -74,12 +74,14 @@ const handleClick = (tab) =>{
 .tabs_span_color{
   font-size: 16px;
   color: #5B5B5B;
-  font-family: "Microsoft YaHei", sans-serif;
+  font-weight: 500;
+  font-family: "PingFangSC-Medium", sans-serif;
 }
 .tabs_span_colorChange{
   font-size: 16px;
   color: #0062FF;
-  font-family: "Microsoft YaHei", sans-serif;
+  font-weight: 500;
+  font-family: "PingFangSC-Medium", sans-serif;
 }
 
 </style>

src/views/costManage/projectCostRequest/index.vue

@@ -2,8 +2,8 @@
   <div class="app-container"  >
       <!--    搜索表单-->
     <div class="formSearch" >
-      <el-form ref="formRef" :inline="true" :model="formInline" >
-        <el-form-item style="margin-right: 60px"  label="项目名称">
+      <el-form ref="formRef" :inline="true" :model="formInline" label-width="120px">
+        <el-form-item label="项目名称">
           <el-select style="width: 220px" v-model="queryParams.projectName" placeholder="请选择项目名称" clearable>
             <el-option
                 v-for="item in projectNameList"
@@ -12,7 +12,7 @@
                 :value="item"/>
           </el-select>
         </el-form-item>
-        <el-form-item style="margin-right: 60px" label="项目类型">
+        <el-form-item  label="项目类型">
           <el-select style="width: 220px" v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
             <el-option
                 v-for="dict in project_type"
@@ -31,7 +31,7 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-        <div style="margin-left: 250px">
+        <div style="padding-left: 5.4%">
           <el-button type="default" class="el-button-defalut" icon="Refresh" @click="reset">重置</el-button>
           <el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button>
         </div>
@@ -102,7 +102,7 @@
               <span>{{row.userName}}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="expenseType" label="费用类型" align="center" width="200px">
+          <el-table-column prop="costType" label="费用类型" align="center" width="200px">
             <template #default="scope">
               <dict-tag :options="project_cost_type" :value="scope.row.costType"/>
             </template>
@@ -185,8 +185,7 @@ const queryParams = reactive({
   pageNum:1,
   pageSize:10,
   projectName:null,
-  projectNumber:null,
-  userName:null,
+  projectType:null,
   approveStatus:null
 })
 let ids = ref([])
@@ -271,9 +270,8 @@ getAllProjectName()
 //  重置表单
 const reset = () => {
   queryParams.projectName = null
-  queryParams.projectNumber = null
-  queryParams.userName = null
-  queryParams.approvalStatus = null
+  queryParams.projectType = null
+  queryParams.approveStatus = null
   getList()
 }
 //  提交搜索表单