新增费用管理日常报销详情页面，添加页面

src/api/costManage/cost.js

@@ -8,6 +8,7 @@ import request from '@/utils/request'
 //   })
 // }
 
+// 日常报销列表
 export const listCostManage = (query) => {
   return request({
     url: '/dailyReimbursement/dailyReimbursement/list',
@@ -15,3 +16,20 @@ export const listCostManage = (query) => {
     params: query
   })
 }
+
+// 日常报销详情
+export const detailCostManage = (Id) => {
+  return request({
+    url: '/dailyReimbursement/dailyReimbursement/' + Id,
+    method: 'get',
+  })
+}
+
+// 新增日常报销
+export const addDailyReimburse = (data) => {
+  return request({
+    url: '/dailyReimbursement/dailyReimbursement',
+    method: 'post',
+    data: data
+  })
+}

src/router/index.js

@@ -165,13 +165,27 @@ export const dynamicRoutes = [
     permissions: ['costManage:dailyReimburse:detail'],
     children: [
       {
-        path: 'detail',
+        path: 'detail/:Id(\\d+)',
         component: () => import('@/views/costManage/dailyReimburse/detail'),
         name: 'Detail',
         meta: { title: '日常报销详情', activeMenu: '/costManage/dailyReimburse' }
       }
     ]
   },
+  {
+    path: '/costManage/daily-Reimburse',
+    component: Layout,
+    hidden: true,
+    permissions: ['costManage:dailyReimburse:addDaily'],
+    children: [
+      {
+        path: 'addDaily',
+        component: () => import('@/views/costManage/dailyReimburse/addDaily'),
+        name: 'AddDaily',
+        meta: { title: '新增日常报销', activeMenu: '/costManage/dailyReimburse' }
+      }
+    ]
+  },
 ]
 
 const router = createRouter({

src/views/costManage/dailyReimburse/addDaily.vue

+<template>
+  <div class="app-container">
+    <div class="formSearch">
+      <el-button type="primary" style="margin-bottom: 20px" @click="back">返回</el-button>
+      <el-form
+          ref="formRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+          class="demo-ruleForm"
+          :size="formSize"
+          status-icon
+      >
+        <el-form-item label="项目编号" prop="projectNumber">
+          <el-input v-model="ruleForm.projectNumber" placeholder="请输入项目编号" clearable/>
+        </el-form-item>
+        <el-form-item label="项目名称" prop="projectName">
+          <el-select v-model="ruleForm.projectName" placeholder="请输入项目名称" clearable>
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目负责人" prop="userName">
+          <el-select-v2
+              clearable
+              v-model="ruleForm.userName"
+              placeholder="请选择项目负责人"
+              :options="options"
+          />
+        </el-form-item>
+        <el-form-item label="报销月份" prop="reimbursement" >
+          <el-date-picker
+              v-model="ruleForm.reimbursement"
+              type="month"
+              clearable
+              placeholder="选择月份"
+              style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item  v-for="(item,index) in ruleForm.childList" :key="index">
+          <el-form-item
+              label="费用发生日期"
+              prop="timeOfExpense"
+              :rules="[{
+                validator: customValidator1,
+                required: true,
+                trigger: 'blur',
+                index:index
+              }]">
+            <el-date-picker
+                value-format="YYYY-MM-DD"
+                v-model="item.timeOfExpense"
+                clearable
+                type="date"
+                placeholder="选择日期"
+                style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item
+              label="报销类型"
+              prop="reimbursementType"
+              :rules="[{
+                validator: customValidator2,
+                required: true,
+                trigger: 'blur',
+                index:index
+              }]">
+            <el-select v-model="item.reimbursementType" placeholder="请输入项目名称" class="form-data-select" clearable>
+              <el-option label="餐饮费" value="shanghai" />
+              <el-option label="通行费" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+              label="金额"
+              prop="money"
+              :rules="[{
+                validator: customValidator3,
+                required: true,
+                trigger: 'blur',
+                index:index
+              }]">
+            <el-input v-model="item.money" placeholder="请输入金额" clearable/>
+          </el-form-item>
+          <el-form-item
+              label="备注"
+              prop="remark"
+              v-show="item.money >= 25"
+              :rules="[{
+                validator: customValidator4,
+                required: true,
+                trigger: 'blur',
+                index:index
+              }]">
+            <el-input v-model="item.remark" placeholder="请说明原因" clearable/>
+          </el-form-item>
+          <el-button @click="deleteRow" class="margin-button" v-show="ruleForm.childList.length > 1">-</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="addRow" class="margin-button">+</el-button>
+        </el-form-item>
+        <el-form-item label="提交时间" prop="updateTime" required>
+          <el-date-picker
+              v-model="ruleForm.updateTime"
+              type="date"
+              placeholder="请选择日期"
+              style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="报销申请人" prop="createBy" >
+          <el-input v-model="ruleForm.createBy" placeholder="申请人" clearable/>
+        </el-form-item>
+        <el-form-item label="备注" prop="desc">
+          <el-input v-model="ruleForm.reason" clearable/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm()" class="el-button--primary">
+            提交
+          </el-button>
+          <el-button @click="resetForm()" class="el-button--defalut">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup name="AddDaily">
+import { reactive, ref } from 'vue'
+import { addDailyReimburse } from "../../../api/costManage/cost.js";
+import {useRoute, useRouter} from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+
+const formRef = ref(null);
+
+const formSize = ref('default')
+const ruleForm = ref({
+  projectName: null,
+  projectNumber: null,
+  reimbursement: null,
+  projectType: null,
+  userName: null,
+  createBy: null,
+  updateTime: null,
+  timeOfExpense:null,
+  childList:[{
+    money: null,
+    reimbursementType:null,
+    remark:null,
+    timeOfExpense:null,
+  }],
+})
+
+const rules = ref({
+  projectName: {
+    required: true,
+    message: '请输入项目名称',
+    trigger: 'change'
+  },
+  projectNumber: {
+    required: true,
+    message: '请输入项目编号',
+    trigger: 'blur',
+  },
+  reimbursement: {
+    type: 'date',
+    required: true,
+    message: '选择月份666',
+    trigger: 'blur',
+  },
+  projectType: '',
+  userName: {
+    required: true,
+    message: '请选择项目经理',
+    trigger: 'change',
+  },
+  createBy: {
+    required: true,
+    message: '申请人',
+    trigger: 'blur',
+  },
+  updateTime: {
+    type: 'date',
+    required: true,
+    message: '请选择提交时间',
+    trigger: 'blur',
+  }
+
+})
+
+const submitForm = async () => {
+  if (!formRef) return
+  await formRef.value.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+// 自定义规则验证-费用发生时间
+const customValidator1 = (rule, value, callback)=>{
+  if (!ruleForm.value.childList[rule.index].timeOfExpense || ruleForm.value.childList[0].timeOfExpense.trim() === '') {
+    callback(new Error('请输入费用发生日期')); // 如果为空，返回错误
+  } else {
+    callback(); // 验证通过
+  }
+}
+
+// 自定义规则验证-报销类型
+const customValidator2 = (rule, value, callback)=>{
+  if (!ruleForm.value.childList[rule.index].reimbursementType || ruleForm.value.childList[0].reimbursementType.trim() === '') {
+    callback(new Error('请选择报销类型')); // 如果为空，返回错误
+  } else {
+    callback(); // 验证通过
+  }
+}
+
+// 自定义规则验证-金额
+const customValidator3 = (rule, value, callback)=>{
+  if (!ruleForm.value.childList[rule.index].money || ruleForm.value.childList[0].money.trim() === '') {
+    callback(new Error('请输入报销金额')); // 如果为空，返回错误
+  } else {
+    callback(); // 验证通过
+  }
+}
+
+// 自定义规则验证-备注
+const customValidator4 = (rule, value, callback)=>{
+  if (!ruleForm.value.childList[rule.index].remark || ruleForm.value.childList[0].remark.trim() === '') {
+    callback(new Error('请输入备注')); // 如果为空，返回错误
+  } else {
+    callback(); // 验证通过
+  }
+}
+
+const resetForm = () => {
+  router.push('/costManage/dailyReimburse')
+}
+
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+  value: `${idx + 1}`,
+  label: `${idx + 1}`,
+}))
+
+function back(){
+  router.push('/costManage/dailyReimburse')
+}
+
+function addRow() {
+  const newList = {
+    money: null,
+    reimbursementType: null,
+    remark: null,
+    timeOfExpense: null,
+  };
+  ruleForm.value.childList.push(newList);
+}
+function deleteRow() {
+  if (ruleForm.value.childList.length !== 1) {
+    ruleForm.value.childList.splice(ruleForm.value.childList.length - 1, 1);
+  }
+}
+// getDetail()
+</script>
+
+<style scoped>
+.margin-button {
+  margin-left: 8px;
+}
+.form-data-select{
+  width: 140px;
+}
+</style>

src/views/costManage/dailyReimburse/detail.vue

 <template>
   <div class="app-container">
-    <el-button type="primary" style="margin-bottom: 20px">返回</el-button>
+    <div class="formSearch">
+      <el-button type="primary" style="margin-bottom: 20px" @click="back">返回</el-button>
       <el-form
           ref="ruleFormRef"
           :model="ruleForm"
-        :rules="rules"
+          :disabled="true"
           label-width="120px"
           class="demo-ruleForm"
           :size="formSize"
           status-icon
       >
-      <el-form-item label="项目编号" prop="name">
-        <el-input v-model="ruleForm.name" />
+        <el-form-item label="项目编号" prop="projectNumber">
+          <el-input v-model="ruleForm.projectNumber" />
         </el-form-item>
-      <el-form-item label="项目名称" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="请输入项目名称">
+        <el-form-item label="项目名称" prop="projectName">
+          <el-select v-model="ruleForm.projectName" placeholder="请输入项目名称">
             <el-option label="Zone one" value="shanghai" />
             <el-option label="Zone two" value="beijing" />
           </el-select>
         </el-form-item>
-      <el-form-item label="项目负责人" prop="count">
+        <el-form-item label="项目负责人" prop="userName">
           <el-select-v2
-            v-model="ruleForm.count"
+              v-model="ruleForm.userName"
               placeholder="请选择项目负责人"
               :options="options"
           />
         </el-form-item>
-      <el-form-item label="报销时间" required>
-        <el-col :span="11">
-          <el-form-item prop="date1">
+        <el-form-item label="报销月份" >
+          <el-form-item prop="reimbursement">
             <el-date-picker
-                v-model="ruleForm.date1"
+                v-model="ruleForm.reimbursement"
+                type="month"
+                placeholder="选择月份"
+                style="width: 100%"
+            />
+          </el-form-item>
+        </el-form-item>
+        <el-form-item label="费用发生日期" v-for="item in ruleForm.childList">
+          <el-form-item prop="item.timeOfExpense">
+            <el-date-picker
+                v-model="item.timeOfExpense"
                 type="date"
-                label="Pick a date"
-                placeholder="Pick a date"
+                placeholder="选择日期"
                 style="width: 100%"
             />
           </el-form-item>
-        </el-col>
-<!--        <el-col class="text-center" :span="2">-->
-<!--          <span class="text-gray-500">-</span>-->
-<!--        </el-col>-->
-<!--        <el-col :span="11">-->
-<!--          <el-form-item prop="date2">-->
-<!--            <el-time-picker-->
-<!--                v-model="ruleForm.date2"-->
-<!--                label="Pick a time"-->
-<!--                placeholder="Pick a time"-->
-<!--                style="width: 100%"-->
-<!--            />-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
+          <el-form-item label="报销类型" prop="item.reimbursementType" >
+            <el-select v-model="item.reimbursementType" placeholder="请输入项目名称" class="form-data-select">
+              <el-option label="餐饮费" value="shanghai" />
+              <el-option label="通行费" value="beijing" />
+            </el-select>
           </el-form-item>
-<!--      <el-form-item label="Instant delivery" prop="delivery">-->
-<!--        <el-switch v-model="ruleForm.delivery" />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="Activity type" prop="type">-->
-<!--        <el-checkbox-group v-model="ruleForm.type">-->
-<!--          <el-checkbox label="Online activities" name="type" />-->
-<!--          <el-checkbox label="Promotion activities" name="type" />-->
-<!--          <el-checkbox label="Offline activities" name="type" />-->
-<!--          <el-checkbox label="Simple brand exposure" name="type" />-->
-<!--        </el-checkbox-group>-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="Resources" prop="resource">-->
-<!--        <el-radio-group v-model="ruleForm.resource">-->
-<!--          <el-radio label="Sponsorship" />-->
-<!--          <el-radio label="Venue" />-->
-<!--        </el-radio-group>-->
-<!--      </el-form-item>-->
-      <el-form-item label="报销金额" prop="reimburse">
-        <el-input v-model="ruleForm.reimburse" />
+          <el-form-item label="报销金额" prop="item.money">
+            <el-input v-model="item.money" />
           </el-form-item>
-      <el-form-item label="报销申请人" prop="application">
-        <el-input v-model="ruleForm.application" />
+          <el-form-item label="备注" prop="item.remark" v-show="item.money >= 25">
+            <el-input v-model="item.remark"  />
           </el-form-item>
-      <el-form-item label="备注" prop="desc">
-        <el-input v-model="ruleForm.desc" type="textarea" />
+          <el-button @click="deleteRow" class="margin-button" v-show="ruleForm.childList.length > 1">-</el-button>
         </el-form-item>
         <el-form-item>
-        <el-button type="primary" @click="submitForm(ruleFormRef)">
-          Create
-        </el-button>
-        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+          <el-button @click="addRow" class="margin-button">+</el-button>
+        </el-form-item>
+        <el-form-item label="提交时间">
+          <el-date-picker
+              v-model="ruleForm.updateTime"
+              type="date"
+              placeholder="请选择日期"
+              style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="报销申请人" prop="createBy">
+          <el-input v-model="ruleForm.createBy" />
+        </el-form-item>
+        <el-form-item label="备注" prop="desc">
+          <el-input v-model="ruleForm.reason" />
         </el-form-item>
+<!--        <el-form-item>-->
+<!--          <el-button type="primary" @click="submitForm(ruleFormRef)">-->
+<!--            Create-->
+<!--          </el-button>-->
+<!--          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>-->
+<!--        </el-form-item>-->
       </el-form>
     </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script setup name="Detail">
 import { reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
+import { detailCostManage } from "../../../api/costManage/cost.js";
+import {useRoute, useRouter} from 'vue-router';
 
-interface RuleForm {
-  name: string
-  region: string
-  count: string
-  date1: string
-  date2: string
-  delivery: boolean
-  type: string[]
-  resource: string
-  application: string
-  reimburse: string
-  desc: string
-}
+const route = useRoute();
+const router = useRouter();
 
 const formSize = ref('default')
-const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive<RuleForm>({
-  name: 'Hello',
-  region: '',
-  count: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  type: [],
-  resource: '',
-  application:'蔡徐坤',
-  reimburse:'666',
-  desc: '',
+const ruleFormRef = ref()
+const ruleForm = ref({
+  id:null,
+  projectName: null,
+  projectNumber: null,
+  reimbursement: null,
+  projectType: null,
+  userName: null,
+  createBy: null,
+  updateTime: null,
+  childList:[{
+    money: null,
+    reimbursementType:null,
+    remark:null,
+    timeOfExpense:null,
+  }],
 })
 
-const rules = reactive<FormRules<RuleForm>>({
-  name: [
-    { required: true, message: 'Please input Activity name', trigger: 'blur' },
-    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
-  ],
-  region: [
-    {
-      required: true,
-      message: 'Please select Activity zone',
-      trigger: 'change',
-    },
-  ],
-  count: [
-    {
-      required: true,
-      message: 'Please select Activity count',
-      trigger: 'change',
-    },
-  ],
-  date1: [
-    {
-      type: 'date',
-      required: true,
-      message: 'Please pick a date',
-      trigger: 'change',
-    },
-  ],
-  date2: [
-    {
-      type: 'date',
-      required: true,
-      message: 'Please pick a time',
-      trigger: 'change',
-    },
-  ],
-  type: [
-    {
-      type: 'array',
-      required: true,
-      message: 'Please select at least one activity type',
-      trigger: 'change',
-    },
-  ],
-  resource: [
-    {
-      required: true,
-      message: 'Please select activity resource',
-      trigger: 'change',
-    },
-  ],
-  desc: [
-    { required: true, message: 'Please input activity form', trigger: 'blur' },
-  ],
-})
+// const rules = reactive({
+//   name: [
+//     { required: true, message: 'Please input Activity name', trigger: 'blur' },
+//     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+//   ],
+//   region: [
+//     {
+//       required: true,
+//       message: 'Please select Activity zone',
+//       trigger: 'change',
+//     },
+//   ],
+//   count: [
+//     {
+//       required: true,
+//       message: 'Please select Activity count',
+//       trigger: 'change',
+//     },
+//   ],
+//   date1: [
+//     {
+//       type: 'date',
+//       required: true,
+//       message: 'Please pick a month',
+//       trigger: 'change',
+//     },
+//   ],
+//   date2: [
+//     {
+//       type: 'date',
+//       required: true,
+//       message: 'Please pick a date',
+//       trigger: 'change',
+//     },
+//   ],
+//   type: [
+//     {
+//       type: 'array',
+//       required: true,
+//       message: 'Please select at least one activity type',
+//       trigger: 'change',
+//     },
+//   ],
+//   resource: [
+//     {
+//       required: true,
+//       message: 'Please select activity resource',
+//       trigger: 'change',
+//     },
+//   ],
+//   desc: [
+//     {
+//       required: false,
+//       message: 'Please input activity form',
+//       trigger: 'blur'
+//     },
+//   ],
+// })
 
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
+// const submitForm = async (formEl) => {
+//   if (!formEl) return
+//   await formEl.validate((valid, fields) => {
+//     if (valid) {
+//       console.log('submit!')
+//     } else {
+//       console.log('error submit!', fields)
+//     }
+//   })
+// }
 
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-}
+// const resetForm = (formEl) => {
+//   if (!formEl) return
+//   formEl.resetFields()
+// }
 
 const options = Array.from({ length: 10000 }).map((_, idx) => ({
   value: `${idx + 1}`,
   label: `${idx + 1}`,
 }))
+
+const Id = parseInt(route.params.Id)
+// console.log("路由",Id)
+// const detailForm = ref([])
+
+async function getDetail() {
+  const res = await detailCostManage(Id)
+  // console.log('res',res)
+  ruleForm.value = res.data
+  // console.log("坤坤",Id.value)
+  // console.log("test",ruleForm.value.childList)
+}
+
+function back(){
+  router.push('/costManage/dailyReimburse')
+}
+
+function addRow() {
+  const newList = {
+    money: 0,
+    reimbursementType:'',
+    remark:'',
+    timeOfExpense:'',
+  };
+  ruleForm.value.childList.push(newList);
+}
+function deleteRow() {
+  if (ruleForm.value.childList.length !== 1) {
+    ruleForm.value.childList.splice(ruleForm.value.childList.length - 1, 1);
+  }
+}
+getDetail()
 </script>
+
+<style scoped>
+.margin-button {
+  margin-left: 8px;
+}
+.form-data-select{
+  width: 140px;
+}
+</style>

src/views/costManage/dailyReimburse/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
+    <el-affix>
+      <div class="formSearch">
+        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" class="search-right">
           <el-form-item label="项目名称" prop="roleName">
             <el-input
                 v-model="queryParams.userName"
-            placeholder="请输入项目名称"
+                placeholder="请输入"
                 clearable
-            style="width: 220px"
                 @keyup.enter="handleQuery"
             />
           </el-form-item>
-      <el-form-item label="项目编号" prop="roleKey">
+          <el-form-item label="报销类型" prop="roleKey">
             <el-input
                 v-model="queryParams.projectName"
                 placeholder="请输入项目编号"
                 clearable
-            style="width: 220px"
                 @keyup.enter="handleQuery"
             />
           </el-form-item>
-      <el-form-item label="负责人" prop="status">
+          <el-form-item label="审批状态" prop="status">
             <el-select
                 v-model="queryParams.status"
                 placeholder="请选择"
@@ -34,21 +34,66 @@
               />
             </el-select>
           </el-form-item>
-      <el-form-item label="创建时间" style="width: 260px">
-        <el-date-picker
-            v-model="dateRange"
-            value-format="YYYY-MM-DD"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
+          <!--      <el-form-item label="创建时间" style="width: 260px">-->
+          <!--        <el-date-picker-->
+          <!--            v-model="dateRange"-->
+          <!--            value-format="YYYY-MM-DD"-->
+          <!--            type="daterange"-->
+          <!--            range-separator="-"-->
+          <!--            start-placeholder="开始日期"-->
+          <!--            end-placeholder="结束日期"-->
+          <!--        ></el-date-picker>-->
+          <!--      </el-form-item>-->
           <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button
+                type="primary"
+                @click="handleQuery"
+                class="el-button--primary"
+            >
+              <img src="@/assets/icons/common/search.png" class="img-icon"/>查询
+            </el-button>
+            <el-button
+                type="default"
+                @click="resetQuery"
+                class="el-button--defalut"
+            >
+              <img src="@/assets/icons/common/reset.png" class="img-icon"/>重置
+            </el-button>
+            <el-button
+                icon="ArrowDown"
+                @click="changeMore"
+                class="el-button--defalut"
+                v-show="buttonIcon"
+            >展开</el-button>
+            <el-button
+                icon="ArrowUp"
+                @click="changeMore"
+                class="el-button--defalut"
+                v-show="!buttonIcon"
+            >收起</el-button>
+          </el-form-item>
+        </el-form>
+        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
+          <el-form-item label="提交时间" prop="roleName" v-show="buttonMore">
+            <el-input
+                v-model="queryParams.userName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="项目负责人" prop="roleKey" v-show="buttonMore">
+            <el-input
+                v-model="queryParams.projectName"
+                placeholder="请输入"
+                clearable
+                @keyup.enter="handleQuery"
+            />
           </el-form-item>
         </el-form>
+      </div>
+    </el-affix>
+    <div class="contentTable">
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
@@ -56,116 +101,164 @@
               plain
               icon="Plus"
               @click="handleAdd"
-            v-hasPermi="['system:role:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="Edit"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['system:role:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="Delete"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['system:role:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="Download"
-            @click="handleExport"
-            v-hasPermi="['system:role:export']"
-        >导出</el-button>
+              class="el-button--primary-pain"
+          >添加</el-button>
         </el-col>
+        <!--      <el-col :span="1.5">-->
+        <!--        <el-button-->
+        <!--            type="success"-->
+        <!--            plain-->
+        <!--            icon="Edit"-->
+        <!--            :disabled="single"-->
+        <!--            @click="handleUpdate"-->
+        <!--            v-hasPermi="['system:role:edit']"-->
+        <!--        >修改</el-button>-->
+        <!--      </el-col>-->
+        <!--      <el-col :span="1.5">-->
+        <!--        <el-button-->
+        <!--            type="danger"-->
+        <!--            plain-->
+        <!--            icon="Delete"-->
+        <!--            :disabled="multiple"-->
+        <!--            @click="handleDelete"-->
+        <!--            v-hasPermi="['system:role:remove']"-->
+        <!--        >删除</el-button>-->
+        <!--      </el-col>-->
+        <!--      <el-col :span="1.5">-->
+        <!--        <el-button-->
+        <!--            type="warning"-->
+        <!--            plain-->
+        <!--            icon="Download"-->
+        <!--            @click="handleExport"-->
+        <!--            v-hasPermi="['system:role:export']"-->
+        <!--        >导出</el-button>-->
+        <!--      </el-col>-->
         <!-- 筛选按钮 -->
-      <el-dropdown @command="handleCommand" :hide-on-click="false">
-        <el-button type="primary">筛选列</el-button>
-        <template  #dropdown>
-          <el-dropdown-menu>
-            <!-- 全选复选框 -->
-            <el-dropdown-item command="select-all">
-              <el-checkbox v-model="isAllSelected" @change="selectAll">全选</el-checkbox>
-            </el-dropdown-item>
-            <!-- 动态列选择复选框 -->
-            <el-dropdown-item v-for="column in columns" :key="column.prop" :command="column.prop">
-              <el-checkbox v-model="column.visible" @change="handleCheckboxChange">{{ column.label }}</el-checkbox>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        <!--      <el-dropdown @command="handleCommand" :hide-on-click="false">-->
+        <!--        <el-button type="primary">筛选列</el-button>-->
+        <!--        <template  #dropdown>-->
+        <!--          <el-dropdown-menu>-->
+        <!--            &lt;!&ndash; 全选复选框 &ndash;&gt;-->
+        <!--            <el-dropdown-item command="select-all">-->
+        <!--              <el-checkbox v-model="isAllSelected" @change="selectAll">全选</el-checkbox>-->
+        <!--            </el-dropdown-item>-->
+        <!--            &lt;!&ndash; 动态列选择复选框 &ndash;&gt;-->
+        <!--            <el-dropdown-item v-for="column in columns" :key="column.prop" :command="column.prop">-->
+        <!--              <el-checkbox v-model="column.visible" @change="handleCheckboxChange">{{ column.label }}</el-checkbox>-->
+        <!--            </el-dropdown-item>-->
+        <!--          </el-dropdown-menu>-->
+        <!--        </template>-->
+        <!--      </el-dropdown>-->
+<!--        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>-->
       </el-row>
 
       <!-- 表格数据 -->
-    <el-table v-loading="loading" :data="costManageList" @selection-change="handleSelectionChange">
+      <el-card class="box-card" v-for="item in costManageList">
+        <template #header>
+          <div class="card-header">
+            <span>项目名称：{{item.projectName}}({{}} - {{}})</span>
+            <span>项目负责人：{{item.projectUserName}}</span>
+            <span>事业部负责人：{{item.departmentUserName}}</span>
+          </div>
+        </template>
+        <span>费用明细</span>
+        <div class="card-context">
+          <el-table v-loading="loading" :data="item.tableItemList" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" align="center" />
-      <el-table-column v-for="(column,index) in visibleColumns" :key="index" :prop="column.prop" :label="column.label" align="center" />
-<!--      <el-table-column label="状态" align="center" width="100">-->
-<!--        <template #default="scope">-->
-<!--          <el-switch-->
-<!--              v-model="scope.row.status"-->
-<!--              active-value="0"-->
-<!--              inactive-value="1"-->
-<!--              @change="handleStatusChange(scope.row)"-->
-<!--          ></el-switch>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="开始时间" align="center" prop="createTime">-->
-<!--        <template #default="scope">-->
-<!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
+            <el-table-column label="提交时间" align="center" prop="registrationTime">
               <template #default="scope">
-          <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+                <span>{{ parseTime(scope.row.registrationTime) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="餐饮费" prop="totalFoodCost" align="center" :show-overflow-tooltip="true" width="150" />
+            <el-table-column label="交通费" prop="totalTaxiCost" align="center" :show-overflow-tooltip="true" width="150" />
+            <el-table-column label="总额" prop="totalMoney" align="center" width="100" >
+              <template #default="scope">
+                {{scope.row.totalMoney || 0}}
+              </template>
+            </el-table-column>
+            <el-table-column label="审批状态" prop="status" align="center" width="100">
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-tooltip content="打印报销单" placement="top" v-if="scope.row.roleId !== 1">
+                  <el-button
+                      link
+                      type="primary"
+                      @click="handleDelete(scope.row)"
+                  >
+                    <img src="@/assets/icons/common/print.png" class="img-icon"/>
+                  </el-button>
                 </el-tooltip>
-          <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
+                <el-tooltip content="上传发票" placement="top" v-if="scope.row.roleId !== 1">
+                  <el-button
+                      link
+                      type="primary"
+                      @click="handleDataScope(scope.row)"
+                  >
+                    <img src="@/assets/icons/common/send.png" class="img-icon"/>
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
+                  <el-button
+                      link
+                      type="primary"
+                      @click="handleAuthUser(scope.row)"
+                  >
+                    <img src="@/assets/icons/common/edit.png" class="img-icon"/>
+                  </el-button>
                 </el-tooltip>
                 <el-tooltip content="详情" placement="top" v-if="scope.row.roleId !== 1">
-            <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+                  <el-button
+                      link
+                      type="primary"
+                      @click="handleDetail(scope.row)"
+                  >
+                    <img src="@/assets/icons/common/check.png" class="img-icon"/>
+                  </el-button>
                 </el-tooltip>
               </template>
             </el-table-column>
           </el-table>
-
           <pagination
-        v-show="total > 0"
+              v-show="item.tableItemList > 0"
               :total="total"
               v-model:page="queryParams.pageNum"
               v-model:limit="queryParams.pageSize"
               @pagination="getList"
           />
-
-    <!-- 添加或修改角色配置对话框 -->
-
-
-    <!-- 分配角色数据权限对话框 -->
+        </div>
+        <template #footer>
+          <div class="card-footer">
+            <div class="footer-step">
+              <el-steps :active="1" finish-status="success" simple>
+                <el-step title="Step 1" />
+                <el-step title="Step 2" />
+                <el-step title="Step 3" />
+              </el-steps>
+            </div>
+            <div>
+              <span>已通过金额：{{item.passNumber}}</span>
+              <span>未通过金额：{{item.notPassNumber}}</span>
+              <span>累计金额：{{item.totalMoney}}</span>
+            </div>
+          </div>
+        </template>
+      </el-card>
+    </div>
   </div>
 </template>
 
 <script setup name="DailyReimbursement">
 import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
 import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
-import {listCostManage} from '@/api/costManage/cost.js'
+import { listCostManage } from "../../../api/costManage/cost.js";
+import {useRouter} from "vue-router";
 
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
 
-// const roleList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
@@ -175,17 +268,17 @@ const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 // 表格列表
-const columns = ref([
-  {prop: 'id', label: '项目编号', visible: true},
-  {prop: 'userName', label: '项目名称', visible: true},
-  {prop: 'projectName', label: '项目负责人', visible: true},
-  {prop: 'projectNumber', label: '项目负责人', visible: true},
-  {prop: 'sum', label: '总金额', visible: true},
-  // {prop: 'zip', label: '项目状态', visible: true},
-  // {prop: 'gender', label: '项目描述', visible: true},
-  // {prop: 'age', label: '项目金额', visible: true},
-  // {prop: 'iphone', label: '电话', width: '180', visible: true}
-])
+// const columns = ref([
+//   {prop: 'id', label: '项目编号', visible: true},
+//   {prop: 'userName', label: '项目名称', visible: true},
+//   {prop: 'projectName', label: '项目负责人', visible: true},
+//   {prop: 'projectNumber', label: '项目负责人', visible: true},
+//   {prop: 'sum', label: '总金额', visible: true},
+//   // {prop: 'zip', label: '项目状态', visible: true},
+//   // {prop: 'gender', label: '项目描述', visible: true},
+//   // {prop: 'age', label: '项目金额', visible: true},
+//   // {prop: 'iphone', label: '电话', width: '180', visible: true}
+// ])
 const costManageList = ref([]);
 const dateRange = ref([]);
 const menuOptions = ref([]);
@@ -195,36 +288,49 @@ const deptExpand = ref(true);
 const deptNodeAll = ref(false);
 const menuRef = ref(null);
 
+// 更多搜索框
+const buttonMore = ref(false);
+const buttonIcon = ref(true);
 
-const data = reactive({
-  form: {},
-  queryParams: {
+const queryParams = ref({
   pageNum: 1,
-    pageSize: 10,
+  pageSize: 2,
   id:undefined,
   userName: undefined,
   projectName: undefined,
   projectNumber: undefined,
   sum: undefined,
-  },
-  rules: {
-    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
-    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
-    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
-  },
 });
 
-const { queryParams, form, rules } = toRefs(data);
-
 /** 查询角色列表 */
 async function getList() {
+  // console.log("坤坤",costManageList.value)
   loading.value = true;
-  const { rows, total: rowsTotal } = await listCostManage(queryParams.value)
-  costManageList.value = rows
+  const { data, total: rowsTotal } = await listCostManage(queryParams.value)
+  costManageList.value = data
+  // console.log("123",data)
+  for(let key in data){
+    // console.log(data)
+    data[key].tableItemList.sort((a, b) => {
+      if(a.status === 1 && b.status !== 1){
+        return -1;
+      }
+      if(b.status === 1 && a.status !== 1){
+        return 1;
+      }
+      return new Date(b.registrationTime) - new Date(a.registrationTime)
+    })
+  }
   total.value = rowsTotal
   loading.value = false
 }
 
+// 更多搜索框按钮
+function changeMore(){
+  buttonMore.value = !buttonMore.value;
+  buttonIcon.value = !buttonIcon.value;
+}
+
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
@@ -264,16 +370,6 @@ function handleSelectionChange(selection) {
 }
 
 /** 角色状态修改 */
-// function handleStatusChange(row) {
-//   let text = row.status === "0" ? "启用" : "停用";
-//   proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
-//     return changeRoleStatus(row.roleId, row.status);
-//   }).then(() => {
-//     proxy.$modal.msgSuccess(text + "成功");
-//   }).catch(function () {
-//     row.status = row.status === "0" ? "1" : "0";
-//   });
-// }
 
 /** 查询菜单树结构 */
 function getMenuTreeselect() {
@@ -308,10 +404,7 @@ function reset() {
 
 /** 添加角色 */
 function handleAdd() {
-  reset();
-  getMenuTreeselect();
-  open.value = true;
-  title.value = "添加角色";
+  router.push('/costManage/daily-Reimburse/addDaily')
 }
 
 /** 修改角色 */
@@ -347,44 +440,73 @@ function getRoleMenuTreeselect(roleId) {
 
 /** 分配数据权限操作 */
 function handleDetail(row) {
-  console.log(666)
-  router.push({
-    path: '/costManage/daily-Reimburse/detail',
-    // query: {
-    //   businessId: row.businessId,
-    //   view: true
-    // }
-  })
+  // console.log(666)
+  router.push('/costManage/daily-Reimburse/detail/' + row.id)
+  // console.log("111",row.id)
 }
 
-/** 自定义表格列 */
-// 是否全选
-const isAllSelected = ref(true);
-
-// 选择全选/全不选
-const selectAll = () => {
-  const allSelected = isAllSelected.value;
-  columns.value.forEach((column) => {
-    column.visible = allSelected;
-  });
-};
+// /** 自定义表格列 */
+// // 是否全选
+// const isAllSelected = ref(true);
+//
+// // 选择全选/全不选
+// const selectAll = () => {
+//   const allSelected = isAllSelected.value;
+//   columns.value.forEach((column) => {
+//     column.visible = allSelected;
+//   });
+// };
+//
+// // 处理列的复选框变更
+// const handleCheckboxChange = () => {
+//   // 检查是否所有列都被选中，如果是全选，设置 isAllSelected 为 true
+//   isAllSelected.value = columns.value.every((col) => col.visible);
+// };
+//
+// // 处理命令
+// const handleCommand = (command) => {
+//   if (command === 'select-all') {
+//     selectAll();
+//   }
+// };
+//
+// // 使用计算属性来过滤显示的列
+// const visibleColumns = computed(() => {
+//   return columns.value.filter(column => column.visible);
+// });
+getList();
+</script>
 
-// 处理列的复选框变更
-const handleCheckboxChange = () => {
-  // 检查是否所有列都被选中，如果是全选，设置 isAllSelected 为 true
-  isAllSelected.value = columns.value.every((col) => col.visible);
-};
+<style scoped>
+.search-right{
+  margin-top: 10px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 7px;
+}
 
-// 处理命令
-const handleCommand = (command) => {
-  if (command === 'select-all') {
-    selectAll();
-  }
-};
+.box-card {
+  width: 1570px;
+  margin-bottom: 14px;
+}
+.card-context{
+  margin-top: 16px;
+}
 
-// 使用计算属性来过滤显示的列
-const visibleColumns = computed(() => {
-  return columns.value.filter(column => column.visible);
-});
-getList();
-</script>
+.card-footer{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.footer-step{
+  width: 800px;
+}
+.img-icon{
+  margin-right: 8px;
+  width: 24px;
+  height: 24px;
+}
+</style>