项目费用申请列表详情

src/api/projectCostRequest/projectCostRequest.js

@@ -8,3 +8,12 @@ export function getCostRequestList(query) {
         params:query
     })
 }
+
+// 查询项目费用申请详情
+export function getCostRequestDetail(id) {
+    return request({
+        url: '/projectCostRequest/' + id,
+        method: 'get'
+    })
+}
+

src/views/costManage/projectCostRequest/detail.vue

@@ -10,13 +10,12 @@
 
       <!--  表单-->
       <div class="addform">
-        <el-form  :model="form" label-width="auto">
-
+        <el-form :disabled="type ==='详情'" :model="costRequestDetailList" label-width="auto">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="流水号">
               <el-input
-                  v-model="form.liushuihao"
+                  v-model="costRequestDetailList.waterNumber"
                   disabled
                   placeholder="自动生成流水号"/>
             </el-form-item>
@@ -24,13 +23,14 @@
             <el-col :span="12">
               <el-form-item label="费用类型">
                 <el-select
-                    v-model="form.feiyongleixing"
-                    placeholder="请选择项目费用类型"
-                    clearable
-                >
-                  <el-option label="办公用品" value="shanghai" />
-                  <el-option label="云服务购买" value="beijing" />
-                  <el-option label="域名/服务器托管费" value="beijing" />
+                    v-model="costRequestDetailList.costType"
+                    disabled>
+                  <el-option
+                      v-for="dict in project_cost_type"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                  />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -40,7 +40,7 @@
             <el-col :span="12">
               <el-form-item label="项目名称">
                 <el-select
-                    v-model="form.xiangmumingcheng"
+                    v-model="costRequestDetailList.projectName"
                     placeholder="请选择项目名称" clearable>
                   <el-option label="项目一" value="shanghai" />
                   <el-option label="项目二" value="beijing" />
@@ -49,7 +49,7 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="物品描述">
-                <el-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" />
+                <el-input v-model="costRequestDetailList.description" placeholder="请输入物品名称" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -58,13 +58,13 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="项目编号">
-                <el-input v-model="form.xiangmubianhao" disabled/>
+                <el-input v-model="costRequestDetailList.projectNumber" disabled/>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="费用发生时间">
                 <el-date-picker style="width: 500px;height: 40px"
-                    v-model="form.date"
+                    v-model="costRequestDetailList.createTime"
                     type="date"
                     placeholder="请选择费用发生时间"
                     clearable/>
@@ -76,7 +76,16 @@
 
             <el-col :span="12">
               <el-form-item label="项目类型">
-                <el-input v-model="form.xiangmuleixing" disabled />
+                <el-select
+                    v-model="costRequestDetailList.projectType"
+                    disabled>
+                  <el-option
+                      v-for="dict in project_type"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                  />
+                </el-select>
               </el-form-item>
             </el-col>
 
@@ -84,12 +93,12 @@
               <el-row >
               <el-col :span="7">
                 <el-form-item label="单价">
-                  <el-input class="danjia_shuliang" v-model="form.danjia" placeholder="请输入物品单价" />
+                  <el-input class="danjia_shuliang" v-model="costRequestDetailList.unitPrice" placeholder="请输入物品单价" />
                 </el-form-item>
               </el-col>
               <el-col :span="5">
                 <el-form-item label="数量">
-                  <el-input class="danjia_shuliang" v-model="form.num" placeholder="请输入物品数量" />
+                  <el-input class="danjia_shuliang" v-model="costRequestDetailList.amount" placeholder="请输入物品数量" />
                 </el-form-item>
               </el-col>
               </el-row>
@@ -99,12 +108,12 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="事业部负责人">
-                <el-input v-model="form.fuzeren" disabled />
+                <el-input v-model="costRequestDetailList.userName" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="申请金额（元）">
-                <el-input v-model="form.jine" placeholder="请输入申请金额" />
+                <el-input v-model="costRequestDetailList.sumMoney" placeholder="请输入申请金额" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -112,13 +121,24 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="项目状态">
-                <el-input v-model="form.xiangmustatus" disabled />
+                <el-select
+                    v-model="costRequestDetailList.projectStatus"
+                    disabled
+                >
+                  <el-option
+                      v-for="dict in project_status"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                  />
+                </el-select>
+
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="备注">
                 <el-input
-                    v-model="form.beizhu"
+                    v-model="costRequestDetailList.remark"
                     :autosize="{ minRows: 4 }"
                     type="textarea"
                     placeholder="请输入备注"
@@ -130,7 +150,7 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="登记人">
-                <el-input v-model="form.dengjiren" placeholder="张三" disabled />
+                <el-input v-model="costRequestDetailList.dengjiren" placeholder="张三" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -138,26 +158,13 @@
             </el-col>
           </el-row>
 
-
-
-
-
-
-
-
-
-
-
-
-
-
         </el-form>
       </div>
 
       <!--  取消、提交按钮-->
       <div class="button">
         <div><el-button @click="goBackIndex" class="button_size">取消</el-button></div>
-        <div><el-button class="button_size" type="primary">提交</el-button></div>
+        <div><el-button v-if="type !=='详情'" class="button_size" type="primary">提交</el-button></div>
       </div>
     </div>
 
@@ -168,26 +175,30 @@
 <script setup>
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
+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');
+
+//根据项目id获取表单详情数据
+const costRequestDetailList = ref([]);
+const getDetail=()=> {
+  let projectId = proxy.$route.query.id;
+  getCostRequestDetail(projectId).then(response => {
+    console.log(response.data)
+    costRequestDetailList.value = response.data
+  });
+}
 
+//根据跳转页面是否传参判断进详情页or新增页
+let type = proxy.$route.query.type
+if(type === "详情"){
+  //进详情页面
+  getDetail()
+}else{
+  //进新增页面
+}
 
-// 表单
-const form = reactive({
-    xiangmumingcheng: '',
-    xiangmubianhao: '',
-    xiangmuleixing: '',
-    fuzeren: '',
-    xiangmustatus: '',
-    dengjiren: '',
-    feiyongleixing: '',
-    date: '',
-    wupinmiaoshu: '',
-    danjia: '',
-    num: '',
-    jine: '',
-    beizhu: '',
-    liushuihao: '',
-    fujian: ''
-})
+//  取消按钮
 const router = useRouter()
 const goBackIndex = () => {
   router.push({ path: '/costManage/projectCostRequest/index' })

src/views/costManage/projectCostRequest/index.vue

 <template>
   <div class="app-container" >
-    <div class="shadow_box_top">
-      <el-form class="shadow_box_top_form" ref="formRef" :inline="true" :model="formInline">
+      <el-form class="formSearch" ref="formRef" :inline="true" :model="formInline">
         <el-form-item label="项目名称">
-
           <el-input
               v-model="queryParams.projectName"
               placeholder="请选择项目名称"
-              clearable
-          />
-
-
+              clearable/>
         </el-form-item>
-
         <el-form-item label="项目编号">
           <el-input
               v-model="queryParams.projectNumber"
               placeholder="请输入项目编号"
-              clearable
-          />
+              clearable/>
         </el-form-item>
-
         <el-form-item label="项目负责人">
           <el-input
               v-model="queryParams.userName"
               placeholder="请输入项目负责人"
-              clearable
-          />
+              clearable/>
         </el-form-item>
-
         <el-form-item label="项目类型">
           <el-select v-model="queryParams.projectType" placeholder="请选择项目类型" clearable>
             <el-option
                 v-for="dict in project_type"
                 :key="dict.value"
                 :label="dict.label"
-                :value="dict.value"
-            />
+                :value="dict.value"/>
           </el-select>
-
         </el-form-item>
-      </el-form>
-      <div>
+        <el-form-item>
           <el-button type="primary" class="el-button-primary" icon="Search" @click="onSearch">搜索</el-button>
           <el-button type="default" class="el-button-defalut" icon="Refresh" @click="reset">重置</el-button>
-      </div>
-    </div>
+        </el-form-item>
+        </el-form>
+
 
-    <div  class="shadow_box_bottom">
       <!--    导航、按钮-->
       <div class="shadow_box_bottom_add">
         <div class="left">
@@ -69,7 +56,7 @@
         <text class="text1">审批流程</text>
         <div class="text2">
           <text>项目编号</text>
-          <text>XS647375</text>
+          <text>{{}}</text>
         </div>
         <div class="step">
           <el-steps :active="2" align-center>
@@ -85,19 +72,12 @@
       </div>
 
       <!--      列表-->
-      <div class="shadow_box_bottom_table">
+      <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="projectNumber" label="项目编号" align="center">
-            <template #default="scope">
-              <span
-                style="
-                  color: royalblue;
-                  text-decoration: underline;
-                  cursor: pointer;
-                "
-                >{{ scope.row.projectNumber }}</span
-              >
+            <template #default="{row}">
+              <span @click="handleView(row)" style="color:royalblue;text-decoration:underline;cursor:pointer;">{{row.projectNumber}}</span>
             </template>
           </el-table-column>
           <el-table-column
@@ -156,15 +136,17 @@
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center">
-            <template #default="{ row }">
-              <el-icon class="list_icon"><Edit /></el-icon>
-              <el-icon class="list_icon"><View /></el-icon>
+            <template #default="scope">
+              <el-button link type="primary" icon="View" @click="handleView(scope.row)" ></el-button>
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> </el-button>
             </template>
           </el-table-column>
         </el-table>
 
-
       </div>
+
+      <div class="shadow_box_bottom_page">
         <pagination
             v-show="total>0"
             :total="total"
@@ -172,8 +154,9 @@
             v-model:limit="queryParams.pageSize"
             @pagination="getList"
         />
-    </div >
       </div>
+
+    </div >
 </template>
 
 
@@ -183,7 +166,7 @@
 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(0);
 const queryParams = reactive({
   pageNum:1,
   pageSize:10,
@@ -192,27 +175,24 @@ const queryParams = reactive({
   userName:null,
   projectType:null
 })
-const total = ref(0);
+
 //     列表
 const projectCostRequestList = ref([]);
 const getList=()=> {
-
   getCostRequestList(queryParams).then(response => {
-    console.log("数组",response)
+    console.log("列表",response.rows)
     total.value = response.total
     projectCostRequestList.value = response.rows
   });
 }
 getList()
 
-
 // 重置表单
 const reset = () => {
   queryParams.projectName = null
   queryParams.projectNumber = null
   queryParams.userName = null
   queryParams.projectType = null
-
   getList()
 }
 // 提交搜索表单
@@ -224,14 +204,24 @@ const onSearch = () => {
 
 //新增按钮
 import { useRouter } from 'vue-router'
-import {getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
+import {getCostRequestDetail, getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
 const router = useRouter()
 const goToAddPage = () => {
-  router.push({ path: '/costManage/projectCostRequest/add' })
+  router.push({ path: '/costManage/projectCostRequest/add' ,query:{type:"新增"}})
 }
 
 
+//查看详情
+const handleView=({id})=> {
+  console.log("详情"+id)
+  proxy.$router.push({ path: '/costManage/projectCostRequest/add', query: { id: id,type:"详情" } });
+    // router.push({ path: '/costManage/projectCostRequest/add', query: { id: id } })
+}
 
+//编辑
+const handleUpdate=({id})=>{
+  console.log("编辑"+id)
+}
 
 
 
@@ -243,44 +233,9 @@ const goToAddPage = () => {
 
 
 <style scoped lang="scss">
-.shadow_box_top {
-  margin-left: 1%;
-  width: 98%;
 
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  box-shadow: 0 0 3px rgba(211, 211, 211, 0.2),
-  0 0 7px rgba(211, 211, 211, 0.2),
-  0 0 7px rgba(211, 211, 211, 0.2);
-  .shadow_box_top_form {
-    margin-top: 20px;
-    padding: 10px 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .el-form-item {
-    width: 270px;
-  }
-  .img-icon {
-    margin-right: 8px;
-    width: 24px;
-    height: 24px;
-  }
-}
-
-.shadow_box_bottom {
-  margin-top: 20px;
-  margin-left: 1%;
-  width: 98%;
-  height: calc(100vh - 250px);
-  box-shadow: 0 0 3px rgba(211, 211, 211, 0.2),
-  0 0 7px rgba(211, 211, 211, 0.2),
-  0 0 7px rgba(211, 211, 211, 0.2);
-
-  //导航 、 按钮
-  .shadow_box_bottom_add {
+//导航 、 按钮
+.shadow_box_bottom_add {
   display: flex;
   width: 98%;
   justify-content: space-between;
@@ -307,10 +262,11 @@ const goToAddPage = () => {
   }
   .right {
   }
-  }
+}
+
 
-  //步骤条
-  .shadow_box_bottom_step {
+//步骤条
+.shadow_box_bottom_step {
   display: flex;
   margin: 10px 13px;
   padding: 20px 0px;
@@ -331,15 +287,16 @@ const goToAddPage = () => {
   .step {
     width: 80%;
   }
-  }
 }
 
-//列表
-.shadow_box_bottom_table {
-  .list_icon {
+
+
+.list_icon {
   color: #477bf5;
   margin: 8px;
   font-size: 20px;
-  }
 }
+
+
+
 </style>