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

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>