收入分析

web/src/api/cost.js

@@ -136,3 +136,38 @@ export const delProjectCostType = (data) => {
   })
 }
 
+// 查询公司费用类型
+export const firmCostType = () => {
+  return service({
+    url: '/finance/queryExpensesGenre',
+    method: 'get'
+  })
+}
+
+// 新增公司费用类型
+export const postFirmCostType = (data) => {
+  return service({
+    url: '/finance/createExpensesGenre',
+    method: 'post',
+    data
+  })
+}
+
+// 更新公司费用类型
+export const putFirmCostType = (data) => {
+  return service({
+    url: '/finance/updateExpensesGenre',
+    method: 'put',
+    data
+  })
+}
+
+// 删除公司费用类型
+export const delFirmCostType = (data) => {
+  return service({
+    url: '/finance/updateExpensesGenre',
+    method: 'delete',
+    data
+  })
+}
+

web/src/pinia/cost/cost.js

@@ -7,14 +7,19 @@ export const payData = defineStore('expenses', () => {
   const getCostList = (data) => {
     queryProjectCost(data).then(res => {
       if (res.code === 0) {
+        console.log('查看费用列表', res)
         projectCostList.length = 0
         const list = res.data.list === null ? [] : res.data.list
-        console.log('查询费用列表', list)
         projectCostList.push(...list)
+        costListTotal.value = res.data.total
       }
     })
   }
   const changeCostList = (list) => {
+    costListTotal.value = list.length
+    if (list.length > 8) {
+      list = list.slice(0, 8)
+    }
     projectCostList.length = 0
     projectCostList.push(...list)
   }

web/src/view/finance/costManage/components/detailList.vue

@@ -771,7 +771,6 @@ const changeCostList = () => {
 }
 
 const changeCostPage = (val) => {
-  console.log(val)
   condition.pageInfo.page = val
   consultCostList()
 }

web/src/view/finance/financeAnalysis/components/projectPay.vue

@@ -225,6 +225,23 @@
         </el-table>
       </el-col>
     </el-row>
+    <el-row
+      v-show="costListTotal > 6"
+    >
+      <el-col
+        :span="23"
+        class="flex justify-end"
+      >
+        <el-pagination
+          v-model:current-page="condition.pageInfo.page"
+          v-model:page-size="condition.pageInfo.pageSize"
+          background
+          layout="prev, pager, next"
+          :total="costData.costListTotal"
+          @change="changeCostPage"
+        />
+      </el-col>
+    </el-row>
     <el-drawer
       v-model="drawerShow"
       :title="drawerTitle"
@@ -401,6 +418,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getAllUsers } from '@/api/user'
 import { getAllProject } from '@/api/project'
 import { codeOperate } from '@/pinia/code/code'
+import { createFeeGenre, updateFeeGenre } from '@/api/finance'
 
 defineOptions({
   name: 'ProjectPay'
@@ -472,6 +490,38 @@ const queryProjectCostType = () => {
     }
   })
 }
+const editCostType = () => {
+  if (changeTypeValue.value === '') {
+    ElMessage.error('请输入费用类型')
+    return
+  }
+  if (changeTypeSelect.value === '') {
+    const createCost = {
+      name: changeTypeValue.value
+    }
+    createFeeGenre(createCost).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('新增类型成功')
+        queryProjectCostType()
+        changeTypeValue.value = ''
+        changeTypeSelect.value = ''
+      }
+    })
+  } else {
+    const updateCost = {
+      id: changeTypeSelect.value,
+      name: changeTypeValue.value
+    }
+    updateFeeGenre(updateCost).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('修改类型成功')
+        queryProjectCostType()
+        changeTypeSelect.value = ''
+        changeTypeValue.value = ''
+      }
+    })
+  }
+}
 // 部门
 const departmentList = reactive([])
 const queryDepartmentList = () => {
@@ -532,7 +582,7 @@ const costData = payData()
 const condition = reactive({
   pageInfo: {
     page: 1,
-    pageSize: 10
+    pageSize: 8
   },
   reimburser: 0,
   projectCode: '',
@@ -609,7 +659,7 @@ const payListReset = () => {
   const initialCondition = {
     pageInfo: {
       page: 1,
-      pageSize: 10
+      pageSize: 8
     },
     reimburser: 0,
     projectCode: '',
@@ -694,6 +744,13 @@ const costDelete = (val) => {
       })
     })
 }
+
+// 页码
+const costListTotal = ref(8)
+const changeCostPage = (val) => {
+  condition.pageInfo.page = val
+  consultPayList()
+}
 </script>
 
 <style scoped>

web/src/view/finance/financeAnalysis/financeAnalysis.vue

@@ -98,7 +98,7 @@
     </el-row>
     <el-row
       class="mt-5"
-      style="height: 680px"
+      style="height: 750px"
     >
       <el-col
         :span="24"
@@ -370,7 +370,6 @@ const getMainMessage = (code) => {
       })
       paymentOut.value.outsideChangePage()
       hourOut.value.outsideChangePage()
-      console.log('项目费用列表为', summaryData.projectFee)
       pay.changeCostList(summaryData.projectFee)
       pay.changeCostTotal(summaryData.projectFeeTotal)
     }

web/src/view/finance/firmPay/components/detailList.vue

@@ -0,0 +1,741 @@
+<template>
+  <div style="width: 97%">
+    <el-row>
+      <el-col
+        :span="24"
+      >
+        <el-form
+          :inline="true"
+          style="margin: 15px 0 0 10px;height: 40px"
+        >
+          <el-form-item label="时间类型:">
+            <el-select
+              v-model="timeTypeValue"
+              placeholder="请选择日期选择器"
+              @change="changeTimeType"
+            >
+              <el-option
+                v-for="item in timeTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="timeTypeValue === 'date'"
+            label="日期:"
+          >
+            <el-date-picker
+              v-model="condition.dayTime"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              clearable
+              @clear="condition.dayTime = ''"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="timeTypeValue === 'month'"
+            label="月份:"
+          >
+            <el-date-picker
+              v-model="condition.monthTime"
+              type="month"
+              placeholder="请选择月份"
+              format="YYYY-MM"
+              value-format="YYYY-MM"
+              clearable
+              @clear="condition.monthTime = ''"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="timeTypeValue === 'year'"
+            label="年份:"
+          >
+            <el-date-picker
+              v-model="condition.yearTime"
+              type="year"
+              placeholder="请选择年份"
+              format="YYYY"
+              value-format="YYYY"
+              clearable
+              @clear="condition.yearTime = ''"
+            />
+          </el-form-item>
+          <el-form-item label="类型:">
+            <el-select
+              v-model="genreSelect"
+              placeholder="请选择类型"
+              clearable
+              @clear="clearGenre"
+            >
+              <el-option
+                v-for="item in costTypeList"
+                :key="item.ID"
+                :label="item.name"
+                :value="item.ID"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="人员:">
+            <el-select
+              v-model="peopleSelect"
+              placeholder="请选择人员名称"
+              clearable
+              filterable
+              @clear="clearPeopleSelect"
+            >
+              <el-option
+                v-for="item in userList"
+                :key="item.ID"
+                :label="item.nickName"
+                :value="item.ID"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-dropdown
+              split-button
+              type="primary"
+            >
+              操作
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>
+                    <el-button
+                      type="primary"
+                      :icon="Search"
+                      @click="consultCostList"
+                    >查询</el-button>
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-button
+                      type="primary"
+                      :icon="Refresh"
+                      @click="costListReset"
+                    >重置</el-button>
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-button
+                      type="primary"
+                      :icon="Plus"
+                      @click="addDetailRecord"
+                    >添加</el-button>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              @click="costTypePopup = true"
+            >费用类型</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 15px;">
+      <el-table
+        :data="costList"
+        stripe
+        border
+      >
+        <el-table-column
+          label="人员名称"
+          align="center"
+          prop="user.nickName"
+          width="180"
+        />
+        <el-table-column
+          label="费用类型"
+          align="center"
+          prop="expensesGenre.name"
+          width="180"
+        />
+        <el-table-column
+          label="时间"
+          align="center"
+          prop="feeTime"
+          width="180"
+        />
+        <el-table-column
+          label="部门"
+          align="center"
+          prop="department.name"
+          width="180"
+        />
+        <el-table-column
+          label="支入金额(元)"
+          align="center"
+          prop="depositAmount"
+          width="180"
+        />
+        <el-table-column
+          label="支出金额(元)"
+          align="center"
+          prop="expenditureAmount"
+          width="180"
+        />
+        <el-table-column
+          label="当前余额(元)"
+          align="center"
+          prop="thenBalance"
+          width="180"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+        >
+          <template #default="scope">
+            <el-popover
+              placement="top"
+              :width="300"
+              trigger="click"
+              :content="scope.row.expenseDetail"
+            >
+              <template #reference>
+                <el-button
+                  text
+                  type="primary"
+                  :icon="Notebook"
+                >
+                  明细
+                </el-button>
+              </template>
+            </el-popover>
+            <el-button
+              text
+              type="primary"
+              size="small"
+              :icon="Edit"
+              @click="costEdit(scope.row)"
+            >编辑</el-button>
+            <el-button
+              text
+              type="primary"
+              size="small"
+              :icon="Delete"
+              @click="costDelete(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row
+      v-show="costListTotal > 10"
+      justify="end"
+    >
+      <el-pagination
+        v-model:current-page="condition.pageInfo.page"
+        background
+        layout="prev, pager, next"
+        :total="costListTotal"
+        @change="changeCostPage"
+      />
+    </el-row>
+    <el-drawer
+      v-model="editDrawerShow"
+      :title="drawerTitle"
+      width="40%"
+    >
+      <el-form
+        label-width="90"
+        label-position="left"
+        size="large"
+      >
+        <el-form-item label="人员：">
+          <el-select
+            v-model="editData.reimburser"
+            placeholder="请选择人员名称"
+            @change="changePeople"
+          >
+            <el-option
+              v-for="item in userList"
+              :key="item.ID"
+              :label="item.nickName"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部门：">
+          <el-select
+            v-model="editData.departmentId"
+            disabled
+            placeholder="请选择费用类型"
+          >
+            <el-option
+              v-for="item in departmentList"
+              :key="item.ID"
+              :label="item.name"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支入金额：">
+          <el-input-number
+            v-model="editData.depositAmount"
+          />
+        </el-form-item>
+        <el-form-item label="支出金额：">
+          <el-input-number
+            v-model="editData.expenditureAmount"
+          />
+        </el-form-item>
+        <el-form-item label="时间：">
+          <el-date-picker
+            v-model="editData.feeTime"
+            type="date"
+            placeholder="请选择日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="费用类型：">
+          <el-select
+            v-model="editData.genre"
+            placeholder="请选择费用类型"
+          >
+            <el-option
+              v-for="item in costTypeList"
+              :key="item.ID"
+              :label="item.name"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注：">
+          <el-input
+            v-model="editData.remarks"
+            placeholder="请填写费用备注"
+          />
+        </el-form-item>
+        <el-form-item label="费用明细：">
+          <el-input
+            v-model="editData.expenseDetail"
+            type="textarea"
+            :rows="8"
+            :maxlength="400"
+            show-word-limit
+            placeholder="请填写费用明细"
+          />
+        </el-form-item>
+        <el-form-item label="余额：">
+          <el-input-number
+            v-model="editData.thenBalance"
+          />
+        </el-form-item>
+      </el-form>
+      <el-row
+        style="margin-top: 50px"
+        justify="end"
+      >
+        <el-button
+          type="primary"
+          size="large"
+          @click="changeCostList"
+        >确认</el-button>
+      </el-row>
+    </el-drawer>
+    <el-dialog
+      v-model="costTypePopup"
+      title="费用类型"
+      width="40%"
+    >
+      <el-form>
+        <el-form-item
+          label="编辑类型："
+          size="large"
+        >
+          <el-input
+            v-model="changeCostValue"
+            style="width: 550px"
+            placeholder="请输入费用类型"
+          >
+            <template #prepend>
+              <el-select
+                v-model="costTypeSelect"
+                placeholder="请选择类型"
+                clearable
+                style="width: 140px"
+                @clear="clearCostType"
+              >
+                <el-option
+                  v-for="item in costTypeList"
+                  :key="item.ID"
+                  :label="item.name"
+                  :value="item.ID"
+                />
+              </el-select>
+            </template>
+            <template #append>
+              <el-button @click="deleteCostType">删除</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            type="primary"
+            @click="editCostType"
+          >
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { Search, Plus, Delete, Refresh, Edit, Notebook } from '@element-plus/icons-vue'
+import { ref, reactive, onMounted } from 'vue'
+import { getAllUsers } from '@/api/user'
+import { createFeeGenre, deleteFeeGenre, queryExpensesGenre, updateFeeGenre } from '@/api/finance'
+import { queryCostList, updateCost } from '@/api/cost'
+import { getDepByStart } from '@/api/department'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { deleteCost, createCost } from '@/api/cost'
+defineOptions({
+  name: 'DetailList'
+})
+const timeTypeList = reactive([
+  { label: '按日期查询', value: 'date' },
+  { label: '按月份查询', value: 'month' },
+  { label: '按年份查询', value: 'year' }
+])
+// 列表
+const userList = reactive([])
+const costTypeList = reactive([])
+const costList = reactive([])
+const costListTotal = ref(0)
+const departmentList = reactive([])
+// 查询数据
+const timeTypeValue = ref('date')
+const condition = reactive({
+  pageInfo: {
+    page: 1,
+    pageSize: 10
+  },
+  reimburser: 0,
+  genre: 0,
+  dayTime: '',
+  monthTime: '',
+  yearTime: ''
+})
+const peopleSelect = ref('')
+const genreSelect = ref('')
+// 编辑数据
+const editDrawerShow = ref(false)
+const editData = reactive({
+  id: 0,
+  reimburser: 0,
+  departmentId: 0,
+  expenditureAmount: 0,
+  depositAmount: 0,
+  feeTime: '',
+  genre: 0,
+  projectId: 0,
+  expenseDetail: '',
+  remarks: '',
+  thenBalance: 0
+})
+
+// 抽屉类型、标题
+const drawerType = ref('')
+const drawerTitle = ref('')
+
+// 费用类型修改
+const costTypePopup = ref(false)
+const changeCostValue = ref('')
+const costTypeSelect = ref('')
+const deleteCostType = () => {
+  if (costTypeSelect.value === '') {
+    ElMessage.error('请选择需要删除的费用类型')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定进行删除该费用类型吗?',
+    '删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const deleteId = {
+        id: costTypeSelect.value
+      }
+      deleteFeeGenre(deleteId).then(res => {
+        if (res.code === 0) {
+          ElMessage.success('删除成功')
+          getCostTypeList()
+          changeCostValue.value = ''
+          costTypeSelect.value = ''
+        }
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除',
+      })
+    })
+}
+const editCostType = () => {
+  if (changeCostValue.value === '') {
+    ElMessage.error('请输入费用类型')
+    return
+  }
+  if (costTypeSelect.value === '') {
+    const createCost = {
+      name: changeCostValue.value
+    }
+    createFeeGenre(createCost).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('新增类型成功')
+        getCostTypeList()
+        changeCostValue.value = ''
+        costTypeSelect.value = ''
+      }
+    })
+  } else {
+    const updateCost = {
+      id: costTypeSelect.value,
+      name: changeCostValue.value
+    }
+    updateFeeGenre(updateCost).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('修改类型成功')
+        getCostTypeList()
+        changeCostValue.value = ''
+        costTypeSelect.value = ''
+      }
+    })
+  }
+}
+const clearCostType = () => {
+  costTypeSelect.value = ''
+}
+// 方法
+onMounted(() => {
+  getUserList()
+  getCostTypeList()
+  queryDepartmentList()
+  getCostList(0, 0, 0)
+})
+const costListReset = () => {
+  const initial = {
+    pageInfo: {
+      page: 1,
+      pageSize: 10
+    },
+    reimburser: 0,
+    projectId: 0,
+    genre: 0,
+    dayTime: '',
+    monthTime: '',
+    yearTime: ''
+  }
+  genreSelect.value = ''
+  peopleSelect.value = ''
+  Object.assign(condition, initial)
+  consultCostList()
+}
+const getUserList = () => {
+  getAllUsers().then(res => {
+    if (res.code === 0) {
+      userList.length = 0
+      userList.push(...res.data)
+      console.log('用户列表', res.data)
+    }
+  })
+}
+
+const getCostTypeList = () => {
+  queryExpensesGenre().then(res => {
+    if (res.code === 0) {
+      costTypeList.length = 0
+      costTypeList.push(...res.data)
+    }
+  })
+}
+
+const queryDepartmentList = () => {
+  getDepByStart().then(res => {
+    if (res.code === 0) {
+      departmentList.length = 0
+      departmentList.push(...res.data)
+    }
+  })
+}
+
+const consultCostList = () => {
+  let nameId
+  let typeId
+  let itemId
+  peopleSelect.value === '' ? nameId = 0 : nameId = peopleSelect.value
+  genreSelect.value === '' ? typeId = 0 : typeId = genreSelect.value
+  getCostList(nameId, typeId, itemId)
+}
+const getCostList = (nameId, typeID, itemId) => {
+  condition.reimburser = nameId
+  condition.genre = typeID
+  condition.projectId = itemId
+  queryCostList(condition).then(res => {
+    if (res.code === 0) {
+      costList.length = 0
+      if (res.data.list !== null) {
+        costList.push(...res.data.list)
+      }
+      costListTotal.value = res.data.total
+    }
+  })
+}
+const costEdit = (row) => {
+  console.log(row)
+  editDrawerShow.value = true
+  drawerType.value = 'edit'
+  drawerTitle.value = '编辑公司费用'
+  editData.id = row.ID
+  editData.reimburser = row.reimburser
+  editData.departmentId = row.departmentId
+  editData.expenditureAmount = row.expenditureAmount
+  editData.depositAmount = row.depositAmount
+  editData.feeTime = row.feeTime
+  editData.genre = row.genre
+  editData.expenseDetail = row.expenseDetail
+  editData.remarks = row.remarks
+  editData.thenBalance = row.thenBalance
+}
+const costDelete = (row) => {
+  ElMessageBox.confirm(
+    '确定要删除此费用记录吗?',
+    '删除记录',
+    {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const data = {
+        id: row.ID
+      }
+      deleteCost(data).then(res => {
+        if (res.code === 0) {
+          ElMessage.success('删除成功')
+          consultCostList()
+        }
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除',
+      })
+    })
+}
+const addDetailRecord = () => {
+  const initialData = {
+    id: 0,
+    reimburser: userList[0].ID,
+    departmentId: userList[0].departmentId,
+    expenditureAmount: 0,
+    depositAmount: 0,
+    feeTime: '',
+    genre: costTypeList[0].ID,
+    projectId: 0,
+    expenseDetail: '',
+    remarks: '',
+    thenBalance: 0
+  }
+  Object.assign(editData, initialData)
+  editDrawerShow.value = true
+  drawerType.value = 'add'
+  drawerTitle.value = '新增公司费用'
+}
+
+const clearPeopleSelect = () => {
+  peopleSelect.value = ''
+  condition.reimburser = 0
+}
+
+const clearGenre = () => {
+  genreSelect.value = ''
+  condition.genre = 0
+}
+
+const changeTimeType = (value) => {
+  if (value === 'year') {
+    condition.monthTime = ''
+    condition.dayTime = ''
+  } else if (value === 'month') {
+    condition.yearTime = ''
+    condition.dayTime = ''
+  } else {
+    condition.yearTime = ''
+    condition.monthTime = ''
+  }
+}
+
+const changeCostList = () => {
+  for (const item in editData) {
+    if (item === 'thenBalance') {
+      continue
+    }
+    if (editData[item] === '' || editData[item] === null) {
+      ElMessage({
+        message: '请将除余额以外的信息填写完整',
+        type: 'error',
+        showClose: true,
+        duration: 2000
+      })
+      return
+    }
+  }
+  editData.thenBalance = parseFloat(editData.thenBalance)
+  editData.expenditureAmount = parseFloat(editData.expenditureAmount)
+  editData.depositAmount = parseFloat(editData.depositAmount)
+  if (drawerType.value === 'add') {
+    createCost(editData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('新增成功')
+        editDrawerShow.value = false
+        consultCostList()
+      }
+    })
+  } else {
+    updateCost(editData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('修改成功')
+        editDrawerShow.value = false
+        consultCostList()
+      }
+    })
+  }
+}
+
+const changeCostPage = (val) => {
+  console.log(val)
+  condition.pageInfo.page = val
+  consultCostList()
+}
+
+const changePeople = (val) => {
+  console.log(val)
+  userList.forEach(item => {
+    if (item.ID === val) {
+      editData.departmentId = item.departmentId
+    }
+  })
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/view/finance/firmPay/components/peopleList.vue

@@ -0,0 +1,406 @@
+<template>
+  <div style="width: 97%">
+    <el-row>
+      <el-col
+        :span="24"
+      >
+        <el-form
+          :inline="true"
+          style="margin: 15px 0 0 10px;height: 40px"
+        >
+          <el-form-item label="时间类型:">
+            <el-select
+              v-model="timeTypeValue"
+              placeholder="请选择日期选择器"
+              @change="changeTimeType"
+            >
+              <el-option
+                v-for="item in timeTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="timeTypeValue === 'date'"
+            label="日期:"
+          >
+            <el-date-picker
+              v-model="condition.dayTime"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              clearable
+              @clear="condition.dayTime = ''"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="timeTypeValue === 'month'"
+            label="月份:"
+          >
+            <el-date-picker
+              v-model="condition.monthTime"
+              type="month"
+              placeholder="请选择月份"
+              format="YYYY-MM"
+              value-format="YYYY-MM"
+              clearable
+              @clear="condition.monthTime = ''"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="timeTypeValue === 'year'"
+            label="年份:"
+          >
+            <el-date-picker
+              v-model="condition.yearTime"
+              type="year"
+              placeholder="请选择年份"
+              format="YYYY"
+              value-format="YYYY"
+              clearable
+              @clear="condition.yearTime = ''"
+            />
+          </el-form-item>
+          <el-form-item label="类型:">
+            <el-select
+              v-model="genreSelect"
+              placeholder="请选择类型"
+              clearable
+              @clear="clearGenre"
+            >
+              <el-option
+                v-for="item in costTypeList"
+                :key="item.ID"
+                :label="item.name"
+                :value="item.ID"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="人员:">
+            <el-select
+              v-model="peopleSelect"
+              placeholder="请选择人员名称"
+              clearable
+              filterable
+              @clear="clearPeopleSelect"
+            >
+              <el-option
+                v-for="item in userList"
+                :key="item.ID"
+                :label="item.nickName"
+                :value="item.ID"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              :icon="Search"
+              @click="consultCostList"
+            >查询</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              :icon="Refresh"
+              @click="conditionReset"
+            >重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 15px;">
+      <el-table
+        :data="costList"
+        stripe
+        border
+      >
+        <el-table-column
+          label="人员名称"
+          align="center"
+          prop="user.nickName"
+        />
+        <el-table-column
+          label="部门"
+          align="center"
+          prop="department.name"
+        />
+        <el-table-column
+          label="总支入金额(元)"
+          align="center"
+          prop="DepositAmountSum"
+        />
+        <el-table-column
+          label="总支出金额(元)"
+          align="center"
+          prop="ExpenditureAmountSum"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+        >
+          <template #default="scope">
+            <el-button
+              text
+              type="primary"
+              :icon="Notebook"
+              @click="openDetail(scope.row.expenses)"
+            >
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row
+      v-show="costListTotal > 10"
+      justify="end"
+    >
+      <el-pagination
+        v-model:current-page="condition.pageInfo.page"
+        background
+        layout="prev, pager, next"
+        :total="costListTotal"
+        @change="changeCostPage"
+      />
+    </el-row>
+    <el-drawer
+      v-model="detailDrawerShow"
+      title="费用详情"
+      size="65%"
+    >
+      <el-row />
+      <el-table
+        :data="detailList"
+        height="495px"
+      >
+        <el-table-column
+          label="费用类型"
+          align="center"
+          prop="expensesGenre.name"
+          width="180"
+        />
+        <el-table-column
+          label="时间"
+          align="center"
+          prop="feeTime"
+          width="180"
+        />
+        <el-table-column
+          label="支入金额(元)"
+          align="center"
+          prop="depositAmount"
+          width="180"
+        />
+        <el-table-column
+          label="支出金额(元)"
+          align="center"
+          prop="expenditureAmount"
+          width="180"
+        />
+        <el-table-column
+          label="当前余额(元)"
+          align="center"
+          prop="thenBalance"
+          width="180"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+        >
+          <template #default="scope">
+            <el-button
+              text
+              type="primary"
+              :icon="Notebook"
+              @click="fill(scope.row)"
+            >
+              备注和详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row style="margin-top: 60px">
+        <el-col :span="10">
+          <el-form-item label="费用备注：">
+            <el-input
+              v-model="costNotes"
+              placeholder="费用备注"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col
+          :span="12"
+          :offset="1"
+        >
+          <el-form-item label="费用详情：">
+            <el-input
+              v-model="costDetail"
+              placeholder="费用详情"
+              type="textarea"
+              :rows="5"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+import { peopleCost } from '@/api/cost'
+import { reactive, ref, onMounted } from 'vue'
+import { getAllUsers } from '@/api/user'
+import { queryExpensesGenre } from '@/api/finance'
+import { getAllProject } from '@/api/project'
+import { Search, Refresh, Notebook } from '@element-plus/icons-vue'
+
+defineOptions({
+  name: 'PeopleList'
+})
+// 数据
+const costList = reactive([])
+const costListTotal = ref(0)
+const userList = reactive([])
+const costTypeList = reactive([])
+const timeTypeList = reactive([
+  { label: '按日期查询', value: 'date' },
+  { label: '按月份查询', value: 'month' },
+  { label: '按年份查询', value: 'year' }
+])
+const timeTypeValue = ref('date')
+const condition = reactive({
+  pageInfo: {
+    page: 1,
+    pageSize: 10
+  },
+  reimburser: 0,
+  projectId: 0,
+  genre: 0,
+  dayTime: '',
+  monthTime: '',
+  yearTime: ''
+})
+const genreSelect = ref('')
+const peopleSelect = ref('')
+const detailDrawerShow = ref(false)
+const detailList = reactive([])
+const costNotes = ref('')
+const costDetail = ref('')
+// 方法
+onMounted(() => {
+  getCostList(0, 0, 0)
+  getUserList()
+  getCostTypeList()
+})
+// 查询条件转换
+const consultCostList = () => {
+  let nameId
+  let typeId
+  let itemId
+  peopleSelect.value === '' ? nameId = 0 : nameId = peopleSelect.value
+  genreSelect.value === '' ? typeId = 0 : typeId = genreSelect.value
+  getCostList(nameId, typeId, itemId)
+}
+// 获取费用列表
+const getCostList = (nameId, typeID, itemId) => {
+  condition.reimburser = nameId
+  condition.genre = typeID
+  condition.projectId = itemId
+  peopleCost(condition).then(res => {
+    if (res.code === 0) {
+      costList.length = 0
+      if (res.data.list !== null) {
+        costList.push(...res.data.list)
+      }
+      costListTotal.value = res.data.total
+    }
+  })
+}
+// 条件重置
+const conditionReset = () => {
+  const initial = {
+    pageInfo: {
+      page: 1,
+      pageSize: 10
+    },
+    reimburser: 0,
+    projectId: 0,
+    genre: 0,
+    dayTime: '',
+    monthTime: '',
+    yearTime: ''
+  }
+  genreSelect.value = ''
+  peopleSelect.value = ''
+  Object.assign(condition, initial)
+  consultCostList()
+}
+// 获取用户列表
+const getUserList = () => {
+  getAllUsers().then(res => {
+    if (res.code === 0) {
+      userList.length = 0
+      userList.push(...res.data)
+    }
+  })
+}
+// 获取费用类型列表
+const getCostTypeList = () => {
+  queryExpensesGenre().then(res => {
+    if (res.code === 0) {
+      costTypeList.length = 0
+      costTypeList.push(...res.data)
+    }
+  })
+}
+
+const changeTimeType = (value) => {
+  if (value === 'year') {
+    condition.monthTime = ''
+    condition.dayTime = ''
+  } else if (value === 'month') {
+    condition.yearTime = ''
+    condition.dayTime = ''
+  } else {
+    condition.yearTime = ''
+    condition.monthTime = ''
+  }
+}
+
+
+const clearGenre = () => {
+  genreSelect.value = ''
+  condition.genre = 0
+}
+
+const clearPeopleSelect = () => {
+  peopleSelect.value = ''
+  condition.reimburser = 0
+}
+
+const openDetail = (scope) => {
+  detailDrawerShow.value = true
+  detailList.length = 0
+  detailList.push(...scope)
+}
+
+const changeCostPage = (val) => {
+  condition.pageInfo.page = val
+  consultCostList()
+}
+
+const fill = (row) => {
+  costNotes.value = row.remarks
+  costDetail.value = row.expenseDetail
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/view/finance/firmPay/firmPay.vue

@@ -1,700 +1,41 @@
 <template>
-  <div>
-    <el-row>
-      <el-col
-        :span="24"
-      >
-        <el-form
-          :inline="true"
-          style="margin: 5px 0 15px 0;height: 40px"
-        >
-          <el-form-item label="时间类型:">
-            <el-select
-              v-model="timeTypeValue"
-              placeholder="请选择日期选择器"
-              @change="changeTimeType"
-            >
-              <el-option
-                v-for="item in timeTypeList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            v-if="timeTypeValue === 'date'"
-            label="日期:"
-          >
-            <el-date-picker
-              v-model="condition.dayTime"
-              type="date"
-              placeholder="请选择日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              clearable
-              @clear="condition.dayTime = ''"
-            />
-          </el-form-item>
-          <el-form-item
-            v-if="timeTypeValue === 'month'"
-            label="月份:"
-          >
-            <el-date-picker
-              v-model="condition.monthTime"
-              type="month"
-              placeholder="请选择月份"
-              format="YYYY-MM"
-              value-format="YYYY-MM"
-              clearable
-              @clear="condition.monthTime = ''"
-            />
-          </el-form-item>
-          <el-form-item
-            v-if="timeTypeValue === 'year'"
-            label="年份:"
-          >
-            <el-date-picker
-              v-model="condition.yearTime"
-              type="year"
-              placeholder="请选择年份"
-              format="YYYY"
-              value-format="YYYY"
-              clearable
-              @clear="condition.yearTime = ''"
-            />
-          </el-form-item>
-          <el-form-item label="类型:">
-            <el-select
-              v-model="costTypeSelect"
-              placeholder="请选择费用类型"
-              clearable
-              @clear="clearCostType"
-            >
-              <el-option
-                v-for="item in costTypeList"
-                :key="item.ID"
-                :label="item.name"
-                :value="item.ID"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="人员:">
-            <el-select
-              v-model="peopleSelect"
-              placeholder="请选择人员名称"
-              clearable
-              @clear="clearPeopleSelect"
-            >
-              <el-option
-                v-for="item in userList"
-                :key="item.ID"
-                :label="item.nickName"
-                :value="item.ID"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-dropdown
-              split-button
-              type="primary"
-            >
-              操作
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item>
-                    <el-button
-                      type="primary"
-                      icon="Search"
-                      @click="consultPayList"
-                    >查询</el-button>
-                  </el-dropdown-item>
-                  <el-dropdown-item>
-                    <el-button
-                      type="primary"
-                      icon="Refresh"
-                      @click="payListReset"
-                    >重置</el-button>
-                  </el-dropdown-item>
-                  <el-dropdown-item>
-                    <el-button
-                      type="primary"
-                      icon="Plus"
-                      @click="addDetailRecord"
-                    >添加</el-button>
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              @click="costTypePopup = true"
-            >费用类型</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="23">
-        <el-table
-          :data="costData.projectCostList"
-          stripe
-          border
-        >
-          <el-table-column
-            label="人员名称"
-            align="center"
-            prop="user.nickName"
-            width="180"
-          />
-          <el-table-column
-            label="费用类型"
-            align="center"
-            prop="projectFeeGenre.name"
-            width="180"
-          />
-          <el-table-column
-            label="时间"
-            align="center"
-            prop="feeTime"
-            width="180"
-          />
-          <el-table-column
-            label="部门"
-            align="center"
-            prop="department.name"
-            width="180"
-          />
-          <el-table-column
-            label="支入金额(元)"
-            align="center"
-            prop="depositAmount"
-            width="180"
-          />
-          <el-table-column
-            label="支出金额(元)"
-            align="center"
-            prop="expenditureAmount"
-            width="180"
-          />
-          <el-table-column
-            label="当前余额(元)"
-            align="center"
-            prop="thenBalance"
-            width="180"
-          />
-          <el-table-column
-            label="操作"
-            align="center"
-          >
-            <template #default="scope">
-              <el-popover
-                placement="top"
-                :width="300"
-                trigger="click"
-                :content="scope.row.expenseDetail"
-              >
-                <template #reference>
-                  <el-button
-                    text
-                    type="primary"
-                    icon="Notebook"
-                  >
-                    明细
-                  </el-button>
-                </template>
-              </el-popover>
-              <el-button
-                text
-                type="primary"
-                size="small"
-                icon="Edit"
-                @click="costEdit(scope.row)"
-              >编辑</el-button>
-              <el-button
-                text
-                type="primary"
-                size="small"
-                icon="Delete"
-                @click="costDelete(scope.row)"
-              >删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-col>
-    </el-row>
-    <el-drawer
-      v-model="drawerShow"
-      :title="drawerTitle"
-      width="40%"
+  <div class="totalBox">
+    <el-tabs
+      v-model="activeName"
+      class="demo-tabs"
+      @tab-click="handleClick"
     >
-      <el-form
-        label-width="90"
-        label-position="left"
-        size="large"
+      <el-tab-pane
+        label="详情费用列表"
+        name="detail"
       >
-        <el-form-item label="人员：">
-          <el-select
-            v-model="drawerData.reimburser"
-            placeholder="请选择人员名称"
-            @change="changePeople"
-          >
-            <el-option
-              v-for="item in userList"
-              :key="item.ID"
-              :label="item.nickName"
-              :value="item.ID"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="部门：">
-          <el-select
-            v-model="drawerData.departmentId"
-            disabled
-            placeholder="请选择部门"
-          >
-            <el-option
-              v-for="item in departmentList"
-              :key="item.ID"
-              :label="item.name"
-              :value="item.ID"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="支入金额：">
-          <el-input-number
-            v-model="drawerData.depositAmount"
-          />
-        </el-form-item>
-        <el-form-item label="支出金额：">
-          <el-input-number
-            v-model="drawerData.expenditureAmount"
-          />
-        </el-form-item>
-        <el-form-item label="时间：">
-          <el-date-picker
-            v-model="drawerData.feeTime"
-            type="date"
-            placeholder="请选择日期"
-            format="YYYY-MM-DD"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-        <el-form-item label="费用类型：">
-          <el-select
-            v-model="drawerData.genre"
-            placeholder="请选择费用类型"
-          >
-            <el-option
-              v-for="item in costTypeList"
-              :key="item.ID"
-              :label="item.name"
-              :value="item.ID"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="项目：">
-          <el-select
-            v-model="drawerData.projectCode"
-            placeholder="请选择项目"
-          >
-            <el-option
-              v-for="item in projectList"
-              :key="item.code"
-              :label="item.name"
-              :value="item.code"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="备注：">
-          <el-input
-            v-model="drawerData.remarks"
-            placeholder="请填写费用备注"
-          />
-        </el-form-item>
-        <el-form-item label="费用明细：">
-          <el-input
-            v-model="drawerData.expenseDetail"
-            type="textarea"
-            :rows="8"
-            :maxlength="400"
-            show-word-limit
-            placeholder="请填写费用明细"
-          />
-        </el-form-item>
-        <el-form-item label="余额：">
-          <el-input-number
-            v-model="drawerData.thenBalance"
-          />
-        </el-form-item>
-      </el-form>
-      <el-row
-        style="margin-top: 50px"
-        justify="end"
+        <DetailList />
+      </el-tab-pane>
+      <el-tab-pane
+        label="人员费用列表"
+        name="people"
       >
-        <el-button
-          type="primary"
-          size="large"
-          @click="changeCostList"
-        >确认</el-button>
-      </el-row>
-    </el-drawer>
-    <el-dialog
-      v-model="costTypePopup"
-      title="费用类型"
-      width="40%"
-    >
-      <el-form>
-        <el-form-item
-          label="编辑类型："
-          size="large"
-        >
-          <el-input
-            v-model="changeTypeValue"
-            style="width: 550px"
-            placeholder="请输入费用类型"
-          >
-            <template #prepend>
-              <el-select
-                v-model="changeTypeSelect"
-                placeholder="请选择费用类型"
-                clearable
-                style="width: 140px"
-                @clear="clearTypeSelect"
-              >
-                <el-option
-                  v-for="item in costTypeList"
-                  :key="item.ID"
-                  :label="item.name"
-                  :value="item.ID"
-                />
-              </el-select>
-            </template>
-            <template #append>
-              <el-button @click="deleteCostType">删除</el-button>
-            </template>
-          </el-input>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button
-            type="primary"
-            @click="editCostType"
-          >
-            确认
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
+        <PeopleList />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from 'vue'
-import { payData } from '@/pinia/cost/cost'
-import { getDepByStart } from '@/api/department'
-import { projectCostTypeList, delProjectCostType, createProjectCost, deleteProjectCost, updateProjectCost } from '@/api/cost'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { getAllUsers } from '@/api/user'
-import { getAllProject } from '@/api/project'
-import { codeOperate } from '@/pinia/code/code'
+import { ref } from 'vue'
+import DetailList from '@/view/finance/firmPay/components/detailList.vue'
+import PeopleList from '@/view/finance/firmPay/components/peopleList.vue'
 defineOptions({
-  name: 'FirmPay'
-})
-onMounted(() => {
-  // 查询部门
-  queryDepartmentList()
-  // 查询项目费用类型
-  queryProjectCostType()
-  // 查询人员列表
-  getUserList()
-  // 查询项目列表
-  queryProjectList()
+  name: 'CostManage'
 })
-// 获取当前的项目code
-const codeBox = codeOperate()
-// 项目费用类型
-const costTypeList = reactive([])
-const costTypeSelect = ref('')
-const costTypePopup = ref(false)
-const clearCostType = () => {
-  costTypeSelect.value = ''
-  condition.genre = 0
-}
-const changeTypeValue = ref('')
-const changeTypeSelect = ref('')
-const clearTypeSelect = () => {
-  changeTypeSelect.value = ''
-}
-const deleteCostType = () => {
-  if (changeTypeSelect.value === '') {
-    ElMessage.error('请选择需要删除的费用类型')
-    return
-  }
-  ElMessageBox.confirm(
-    '确定进行删除该费用类型吗?',
-    '删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  )
-    .then(() => {
-      const deleteId = {
-        id: changeTypeSelect.value
-      }
-      delProjectCostType(deleteId).then(res => {
-        if (res.code === 0) {
-          ElMessage.success('删除成功')
-          queryProjectCostType()
-          changeTypeValue.value = ''
-          changeTypeSelect.value = ''
-        }
-      })
-    })
-    .catch(() => {
-      ElMessage({
-        type: 'info',
-        message: '取消删除',
-      })
-    })
-}
-const queryProjectCostType = () => {
-  projectCostTypeList().then(res => {
-    if (res.code === 0) {
-      costTypeList.length = 0
-      costTypeList.push(...res.data)
-    }
-  })
-}
-// 部门
-const departmentList = reactive([])
-const queryDepartmentList = () => {
-  getDepByStart().then(res => {
-    if (res.code === 0) {
-      departmentList.length = 0
-      departmentList.push(...res.data)
-    }
-  })
-}
-
-// 抽屉新增编辑信息
-const drawerTitle = ref('新增项目费用项')
-const drawerShow = ref(false)
-const drawerData = reactive({
-  reimburser: 0,
-  departmentId: 0,
-  expenditureAmount: 0,
-  depositAmount: 0,
-  projectCode: '',
-  feeTime: '',
-  genre: 0,
-  expenseDetail: '',
-  remarks: '',
-  thenBalance: 0,
-})
-const drawerDataType = ref('add')
-const changeCostList = () => {
-  for (const i in drawerData) {
-    if (drawerData[i] === '' || drawerData[i] === null) {
-      ElMessage.error('请将信息填写完整')
-      return
-    }
-  }
-  if (drawerDataType.value === 'add') {
-    createProjectCost(drawerData).then(res => {
-      if (res.code === 0) {
-        ElMessage.success('新增成功')
-        drawerShow.value = false
-        consultPayList()
-      }
-    })
-  } else {
-    updateProjectCost(drawerData).then(res => {
-      if (res.code === 0) {
-        ElMessage.success('编辑成功')
-        drawerShow.value = false
-        consultPayList()
-      }
-    })
-  }
-}
-
-// 费用数据存储
-const costData = payData()
-
-// 搜索条件
-const condition = reactive({
-  pageInfo: {
-    page: 1,
-    pageSize: 10
-  },
-  reimburser: 0,
-  projectCode: '',
-  genre: 0,
-  dayTime: '',
-  monthTime: '',
-  yearTime: ''
-})
-
-// 时间搜索
-const timeTypeList = reactive([
-  { label: '按日期查询', value: 'date' },
-  { label: '按月份查询', value: 'month' },
-  { label: '按年份查询', value: 'year' }
-])
-const timeTypeValue = ref('date')
-const changeTimeType = (value) => {
-  if (value === 'year') {
-    condition.monthTime = ''
-    condition.dayTime = ''
-  } else if (value === 'month') {
-    condition.yearTime = ''
-    condition.dayTime = ''
-  } else {
-    condition.yearTime = ''
-    condition.monthTime = ''
-  }
-}
-
-// 项目搜索
-const projectList = reactive([])
-const queryProjectList = () => {
-  getAllProject().then(res => {
-    if (res.code === 0) {
-      projectList.length = 0
-      projectList.push(...res.data)
-    }
-  })
-}
-
-// 人员搜索
-const peopleSelect = ref('')
-const userList = reactive([])
-const clearPeopleSelect = () => {
-  peopleSelect.value = ''
-  condition.reimburser = 0
-}
-const getUserList = () => {
-  getAllUsers().then(res => {
-    if (res.code === 0) {
-      userList.length = 0
-      userList.push(...res.data)
-    }
-  })
-}
-const changePeople = (val) => {
-  userList.forEach(item => {
-    if (val === item.ID) {
-      drawerData.departmentId = item.departmentId
-    }
-  })
-}
-
-// 查询费用列表
-const consultPayList = () => {
-  condition.genre = costTypeSelect.value === '' ? 0 : costTypeSelect.value
-  condition.reimburser = peopleSelect.value === '' ? 0 : peopleSelect.value
-  condition.projectCode = codeBox.currentCode
-  costData.getCostList(condition)
-}
-
-// 重置
-const payListReset = () => {
-  const initialCondition = {
-    pageInfo: {
-      page: 1,
-      pageSize: 10
-    },
-    reimburser: 0,
-    projectCode: '',
-    genre: 0,
-    dayTime: '',
-    monthTime: '',
-    yearTime: ''
-  }
-  Object.assign(condition, initialCondition)
-  costTypeSelect.value = ''
-  peopleSelect.value = ''
-  condition.projectCode = codeBox.currentCode
-  costData.getCostList(condition)
-}
-
-// 添加项目费用
-const addDetailRecord = () => {
-  drawerTitle.value = '新增项目费用项'
-  drawerDataType.value = 'add'
-  const initialData = {
-    reimburser: userList[0].ID,
-    departmentId: userList[0].departmentId,
-    expenditureAmount: 0,
-    depositAmount: 0,
-    projectCode: codeBox.currentCode,
-    feeTime: '',
-    genre: costTypeList[0].ID,
-    expenseDetail: '',
-    remarks: '',
-    thenBalance: 0
-  }
-  Object.assign(drawerData, initialData)
-  drawerShow.value = true
-}
-
-const costEdit = (val) => {
-  console.log(val)
-  drawerTitle.value = '编辑项目费用项'
-  drawerDataType.value = 'edit'
-  const editData = {
-    id: val.ID,
-    reimburser: val.reimburser,
-    departmentId: val.departmentId,
-    expenditureAmount: val.expenditureAmount,
-    depositAmount: val.depositAmount,
-    projectCode: val.projectCode,
-    feeTime: val.feeTime,
-    genre: val.genre,
-    expenseDetail: val.expenseDetail,
-    remarks: val.remarks,
-    thenBalance: val.thenBalance
-  }
-  Object.assign(drawerData, editData)
-  drawerShow.value = true
-}
-// 删除项目费用
-const costDelete = (val) => {
-  ElMessageBox.confirm(
-    '确定进行删除该项目费用吗?',
-    '删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  )
-    .then(() => {
-      const deleteId = {
-        id: val.ID
-      }
-      deleteProjectCost(deleteId).then(res => {
-        if (res.code === 0) {
-          ElMessage.success('删除成功')
-          consultPayList()
-        }
-      })
-    })
-    .catch(() => {
-      ElMessage({
-        type: 'info',
-        message: '取消删除',
-      })
-    })
-}
+const activeName = ref('detail')
+const handleClick = () => {}
 </script>
 
 <style scoped>
-
+.totalBox{
+  width: 100%;
+  height: 800px;
+  background-color: #ffffff;
+}
 </style>