Merge remote-tracking branch 'origin/master'

src/api/projectCostRequest/projectCostRequest.js

+import request from '@/utils/request'
+
+// 查询项目费用申请列表
+export function getCostRequestList() {
+    return request({
+        url: '/projectCostRequest/list',
+        method: 'get',
+    })
+}

src/views/costManage/projectCostReimbursement/index.vue

 <script setup>
-
+import { getDicts } from "@/api/system/dict/data";
+getDicts("project_cost_type").then(response => {
+  console.log(response)
+});
 </script>
 
 <template>

src/views/costManage/projectCostRequest/detail.vue

 <template>
   <div class="app-container">
-    <!--    面包屑导航-->
+
+    <div class="inner">
+      <!--    导航-->
       <div class="top">
         <div class="top_text">新增项目费用申请</div>
         <div class="top_line"></div>
@@ -8,118 +10,165 @@
 
       <!--  表单-->
       <div class="addform">
-      <el-form :inline="true" :model="form" label-width="auto">
-        <el-form-item label="项目名称">
-          <el-select
-            v-model="form.xiangmumingcheng"
-            placeholder="请选择项目名称"
-          >
-            <el-option label="项目一" value="shanghai" />
-            <el-option label="项目二" value="beijing" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="项目编号">
-          <el-input v-model="form.xiangmubianhao" disabled />
-        </el-form-item>
-
-        <el-form-item label="项目类型">
-          <el-input v-model="form.xiangmuleixing" disabled />
-        </el-form-item>
-
-        <el-form-item label="事业部负责人">
-          <el-input v-model="form.fuzeren" disabled />
-        </el-form-item>
-
-        <el-form-item label="项目状态">
-          <el-input v-model="form.xiangmustatus" disabled />
-        </el-form-item>
+        <el-form  :model="form" label-width="auto">
 
-        <el-form-item label="登记人">
-          <el-input v-model="form.dengjiren" placeholder="张三" disabled />
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="流水号">
+              <el-input
+                  v-model="form.liushuihao"
+                  disabled
+                  placeholder="自动生成流水号"/>
             </el-form-item>
-
+            </el-col>
+            <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" />
                 </el-select>
               </el-form-item>
+            </el-col>
+          </el-row>
 
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="项目名称">
+                <el-select
+                    v-model="form.xiangmumingcheng"
+                    placeholder="请选择项目名称" clearable>
+                  <el-option label="项目一" value="shanghai" />
+                  <el-option label="项目二" value="beijing" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="物品描述">
+                <el-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="项目编号">
+                <el-input v-model="form.xiangmubianhao" disabled/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
               <el-form-item label="费用发生时间">
-          <el-date-picker
+                <el-date-picker style="width: 500px;height: 40px"
                     v-model="form.date"
                     type="date"
                     placeholder="请选择费用发生时间"
-            clearable
-          />
+                    clearable/>
               </el-form-item>
+            </el-col>
+          </el-row>
 
-        <el-form-item label="物品描述">
-          <el-input v-model="form.wupinmiaoshu" placeholder="请输入物品名称" />
+          <el-row :gutter="20">
+
+            <el-col :span="12">
+              <el-form-item label="项目类型">
+                <el-input v-model="form.xiangmuleixing" disabled />
               </el-form-item>
+            </el-col>
 
+            <el-col :span="12">
+              <el-row >
+              <el-col :span="7">
                 <el-form-item label="单价">
-          <el-input v-model="form.danjia" placeholder="请输入物品单价" />
+                  <el-input class="danjia_shuliang" v-model="form.danjia" placeholder="请输入物品单价" />
                 </el-form-item>
-
+              </el-col>
+              <el-col :span="5">
                 <el-form-item label="数量">
-          <el-input v-model="form.num" placeholder="请输入物品数量" />
+                  <el-input class="danjia_shuliang" v-model="form.num" placeholder="请输入物品数量" />
                 </el-form-item>
+              </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
 
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="事业部负责人">
+                <el-input v-model="form.fuzeren" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
               <el-form-item label="申请金额（元）">
                 <el-input v-model="form.jine" placeholder="请输入申请金额" />
               </el-form-item>
+            </el-col>
+          </el-row>
 
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="项目状态">
+                <el-input v-model="form.xiangmustatus" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
               <el-form-item label="备注">
                 <el-input
                     v-model="form.beizhu"
-            :autosize="{ minRows: 1 }"
+                    :autosize="{ minRows: 4 }"
                     type="textarea"
                     placeholder="请输入备注"
                 />
               </el-form-item>
+            </el-col>
+          </el-row>
 
-        <el-form-item label="流水号">
-          <el-input
-            v-model="form.liushuihao"
-            disabled
-            placeholder="自动生成流水号"
-          />
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="登记人">
+                <el-input v-model="form.dengjiren" placeholder="张三" disabled />
               </el-form-item>
+            </el-col>
+            <el-col :span="12">
+
+            </el-col>
+          </el-row>
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-        <!--        <el-form-item label="上传附件">-->
-        <!--          <el-upload-->
-        <!--            v-model:file-list="form.fujian"-->
-        <!--            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
-        <!--            multiple-->
-        <!--            :on-preview="handlePreview"-->
-        <!--            :on-remove="handleRemove"-->
-        <!--            :before-remove="beforeRemove"-->
-        <!--            :limit="3"-->
-        <!--            :on-exceed="handleExceed"-->
-        <!--          >-->
-        <!--            <el-icon class="folderAdd"><FolderAdd /></el-icon>-->
-        <!--            <text>点击上传附件</text>-->
-        <!--          </el-upload>-->
-        <!--        </el-form-item>-->
         </el-form>
       </div>
 
       <!--  取消、提交按钮-->
       <div class="button">
-      <div><el-button class="button_size">取消</el-button></div>
+        <div><el-button @click="goBackIndex" class="button_size">取消</el-button></div>
         <div><el-button class="button_size" type="primary">提交</el-button></div>
       </div>
     </div>
+
+
+  </div>
 </template>
 
 <script setup>
 import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
 
 // 表单
 const form = reactive({
@@ -139,15 +188,27 @@ const form = reactive({
     liushuihao: '',
     fujian: ''
 })
+const router = useRouter()
+const goBackIndex = () => {
+  router.push({ path: '/costManage/projectCostRequest/index' })
+}
+
 </script>
 
 <style scoped lang="scss">
+.inner{
+  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);
+  background-color: white;
+  height: calc(100vh - 130px);
+}
+
 .top {
   display: flex;
   flex-direction: column;
   width: 150px;
   margin-left: 40px;
-  margin-top: 20px;
 
   .top_text {
     cursor: default;
@@ -157,23 +218,25 @@ const form = reactive({
     font-family: 'Microsoft YaHei', sans-serif;
   }
   .top_line {
-    border: solid 2px #0062ff;
+    border: solid 1px #0062ff;
     margin-top: 5px;
     height: 4px;
+    background-color: #0062ff;
   }
 }
 
 .addform {
   margin-left: 50px;
   margin-top: 30px;
-  display: flex;
-  align-content: center;
 
   .el-form-item {
-    margin-right: 400px;
-    width: 400px;
+    width: 500px;
     height: 40px;
+    .danjia_shuliang{
+      width: 150px;
     }
+  }
+
 }
 
 .folderAdd {

src/views/costManage/projectCostRequest/index.vue

 <template>
-  <div class="app-container">
+  <div class="app-container" >
     <div class="shadow_box_top">
-      <el-form :inline="true" :model="formInline">
+      <el-form class="shadow_box_top_form" :inline="true" :model="formInline">
         <el-form-item label="项目名称">
           <el-select
               v-model="formInline.mingcheng"
@@ -39,22 +39,11 @@
             <el-option label="项目类型二" value="beijing" />
           </el-select>
         </el-form-item>
-
-        <el-form-item>
-          <el-button @click="reset"
-            ><img
-              src="@/assets/icons/common/reset.png"
-              class="img-icon"
-            />重置</el-button
-          >
-          <el-button type="primary" @click="onSearch"
-            ><img
-              src="@/assets/icons/common/search.png"
-              class="img-icon"
-            />查询</el-button
-          >
-        </el-form-item>
       </el-form>
+      <div>
+        <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>
 
     <div  class="shadow_box_bottom">
@@ -65,52 +54,12 @@
           <div class="left_line"></div>
         </div>
         <div class="right">
-          <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-              <el-button type="primary" plain size="mini" @click="goToAddPage">
-                <template #icon>
-                  <Plus />
-                </template>
-                新增费用申请
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                type="success"
-                plain
-                size="mini"
-                :disabled="single"
-                @click="handleUpdate"
-              >
-                <template #icon>
-                  <Edit />
-                </template>
-                修改
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
           <el-button
-                type="danger"
+              type="primary"
               plain
-                size="mini"
-                :disabled="multiple"
-                @click="handleDelete"
-              >
-                <template #icon>
-                  <el-icon><Delete /></el-icon>
-                </template>
-                删除
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button type="warning" plain size="mini" @click="handleExport">
-                <template #icon>
-                  <el-icon><Share /></el-icon>
-                </template>
-                导出
-              </el-button>
-            </el-col>
-          </el-row>
+              icon="Plus"
+              @click="goToAddPage"
+          >费用申请</el-button>
         </div>
       </div>
 
@@ -136,9 +85,9 @@
 
       <!--      列表-->
       <div class="shadow_box_bottom_table">
-        <el-table :data="tableData" border>
+        <el-table v-loading="loading" :data="projectCostRequestList" border>
           <el-table-column type="selection" align="center"></el-table-column>
-          <el-table-column prop="projectNo" label="项目编号" align="center">
+          <el-table-column prop="projectNumber" label="项目编号" align="center">
             <template #default="scope">
               <span
                 style="
@@ -146,7 +95,7 @@
                   text-decoration: underline;
                   cursor: pointer;
                 "
-                >{{ scope.row.projectNo }}</span
+                >{{ scope.row.projectNumber }}</span
               >
             </template>
           </el-table-column>
@@ -158,27 +107,28 @@
           <el-table-column
             prop="projectType"
             label="项目类型"
-            align="center"
-          ></el-table-column>
+            align="center">
+            <template #default="{ row }">
+            <dict-tag :options="project_type" :value="row.projectType"/>
+          </template>
+          </el-table-column>
           <el-table-column
-            prop="departmentLeader"
+            prop="userName"
             label="事业部负责人"
             align="center"
           ></el-table-column>
           <el-table-column prop="projectStatus" label="项目状态" align="center">
             <template #default="{ row }">
-              <el-tag :type="getTagType(row.projectStatus)">{{
-                row.projectStatus
-              }}</el-tag>
+              <dict-tag :options="project_status" :value="row.projectStatus"/>
             </template>
           </el-table-column>
           <el-table-column
-            prop="serialNo"
+            prop="waterNumber"
             label="流水号"
             align="center"
           ></el-table-column>
           <el-table-column
-            prop="expenseTime"
+            prop="timeOfExpense"
             label="费用发生时间"
             align="center"
           ></el-table-column>
@@ -186,21 +136,22 @@
             prop="expenseType"
             label="费用类型"
             align="center"
-          ></el-table-column>
+          >
+            <template #default="scope">
+              <dict-tag :options="project_cost_type" :value="scope.row.costType"/>
+            </template>
+          </el-table-column>
           <el-table-column
-            prop="amount"
+            prop="sumMoney"
             label="金额（元）"
             align="center"
           ></el-table-column>
           <el-table-column
             prop="approvalStatus"
             label="审批状态"
-            align="center"
-          >
-            <template #default="{ row }">
-              <el-tag :type="getApprovalTagType(row.approvalStatus)">{{
-                row.approvalStatus
-              }}</el-tag>
+            align="center">
+            <template #default="scope">
+              <dict-tag :options="project_cost_request_status" :value="scope.row.approveStatus"/>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center">
@@ -211,11 +162,31 @@
           </el-table-column>
         </el-table>
       </div>
-    </div>
+
+    </div >
   </div>
 </template>
+
+
+
+
 <script setup>
 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 projectCostRequestList = ref([]);
+const getList=()=> {
+  getCostRequestList().then(response => {
+    console.log("数组",response.data)
+    projectCostRequestList.value = response.data
+  });
+}
+getList()
+
 
 // 顶部搜索表单数据
 const formInline = reactive({
@@ -238,91 +209,49 @@ const onSearch = () => {
   console.log(formInline.value)
 }
 
-const tableData = reactive([
-  {
-    projectNo: 'XS647375',
-    projectName: '生活费项目',
-    projectType: 'A型',
-    departmentLeader: '张三',
-    projectStatus: '待审批',
-    serialNo: 'ls565646265',
-    expenseTime: '2025/01/02',
-    expenseType: '笔记本',
-    amount: 300,
-    approvalStatus: '待审批'
-  },
-  {
-    projectNo: 'XS647375',
-    projectName: '生活费项目',
-    projectType: 'A型',
-    departmentLeader: '张三',
-    projectStatus: '待审批',
-    serialNo: 'XS656465',
-    expenseTime: '2025/01/02',
-    expenseType: 'U盘',
-    amount: 200,
-    approvalStatus: '已通过'
-  },
-  {
-    projectNo: '1345abc',
-    projectName: 'XXX项目',
-    projectType: 'B型',
-    departmentLeader: '李四',
-    projectStatus: '待审批',
-    serialNo: 'ls565646265',
-    expenseTime: '2025/01/02',
-    expenseType: '办公用品',
-    amount: 200,
-    approvalStatus: '进行中'
-  },
-  {
-    projectNo: '1345abc',
-    projectName: 'XXX项目',
-    projectType: 'B型',
-    departmentLeader: '李四',
-    projectStatus: '待审批',
-    serialNo: 'XS656465',
-    expenseTime: '2025/01/02',
-    expenseType: '办公用品',
-    amount: 200,
-    approvalStatus: '已通过'
-  }
-])
-
 // 根据项目状态返回标签类型
 const getTagType = status => {
   if (status === '待审批') return 'warning'
   return 'default'
 }
 
-// 根据审批状态返回标签类型
-const getApprovalTagType = status => {
-  if (status === '已通过') return 'success'
-  if (status === '进行中') return 'primary'
-  if (status === '待审批') return 'warning'
-  return 'default'
-}
-
 //新增按钮
 import { useRouter } from 'vue-router'
+import {getCostRequestList} from "../../../api/projectCostRequest/projectCostRequest.js";
 const router = useRouter()
 const goToAddPage = () => {
-  console.log(123)
   router.push({ path: '/costManage/projectCostRequest/add' })
 }
+
+
+
+
+
+
 </script>
 
+
+
+
+
+
 <style scoped lang="scss">
 .shadow_box_top {
-  margin-top: 20px;
   margin-left: 1%;
   width: 98%;
-  box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.2);
-  .el-form {
-    padding: 10px;
+
   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;
@@ -338,8 +267,10 @@ const goToAddPage = () => {
   margin-top: 20px;
   margin-left: 1%;
   width: 98%;
-  height: 50%;
-  box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.2);
+  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 {
@@ -347,7 +278,7 @@ const goToAddPage = () => {
     width: 98%;
     justify-content: space-between;
     align-items: center;
-    margin-top: 20px;
+    padding:10px;
     .left {
       display: flex;
       flex-direction: column;
@@ -361,9 +292,10 @@ const goToAddPage = () => {
         font-family: 'Microsoft YaHei', sans-serif;
       }
       .left_line {
-        border: solid 2px #0062ff;
+        border: solid 1px #0062ff;
         margin-top: 5px;
         height: 4px;
+        background-color: #0062ff;
       }
     }
     .right {
@@ -373,12 +305,12 @@ const goToAddPage = () => {
   //步骤条
   .shadow_box_bottom_step {
     display: flex;
-    margin: 20px 0px;
+    margin: 10px 13px;
     padding: 20px 0px;
     width: 98%;
     justify-content: space-evenly;
     align-items: center;
-    background-color: #f9f9fa;
+    background-color: #f3f3f3;
     .text1 {
       font-size: 18px;
       font-weight: 550;