收入分析

web/src/view/finance/test/test.vue

@@ -1,18 +1,18 @@
 <template>
-  <div>
+  <div style="width: 97%">
     <el-row>
       <el-col
         :span="24"
-        class="bg-white"
       >
         <el-form
           :inline="true"
-          style="margin: 20px 0 0 20px"
+          style="margin: 15px 0 0 10px;height: 40px"
         >
           <el-form-item label="时间类型:">
             <el-select
-              v-model="timeTypeList"
+              v-model="timeTypeValue"
               placeholder="请选择日期选择器"
+              @change="changeTimeType"
             >
               <el-option
                 v-for="item in timeTypeList"
@@ -33,6 +33,7 @@
               format="YYYY-MM-DD"
               value-format="YYYY-MM-DD"
               clearable
+              @clear="condition.dayTime = ''"
             />
           </el-form-item>
           <el-form-item
@@ -46,6 +47,7 @@
               format="YYYY-MM"
               value-format="YYYY-MM"
               clearable
+              @clear="condition.monthTime = ''"
             />
           </el-form-item>
           <el-form-item
@@ -59,10 +61,16 @@
               format="YYYY"
               value-format="YYYY"
               clearable
+              @clear="condition.yearTime = ''"
             />
           </el-form-item>
           <el-form-item label="项目:">
-            <el-select placeholder="请选择项目">
+            <el-select
+              v-model="projectSelect"
+              placeholder="请选择项目"
+              clearable
+              @clear="clearProject"
+            >
               <el-option
                 v-for="item in projectList"
                 :key="item.ID"
@@ -73,7 +81,10 @@
           </el-form-item>
           <el-form-item label="类型:">
             <el-select
+              v-model="genreSelect"
               placeholder="请选择类型"
+              clearable
+              @clear="clearGenre"
             >
               <el-option
                 v-for="item in costTypeList"
@@ -85,8 +96,10 @@
           </el-form-item>
           <el-form-item label="人员:">
             <el-select
-              v-model="condition.name"
+              v-model="peopleSelect"
               placeholder="请选择人员名称"
+              clearable
+              @clear="clearPeopleSelect"
             >
               <el-option
                 v-for="item in userList"
@@ -108,6 +121,7 @@
                     <el-button
                       type="primary"
                       :icon="Search"
+                      @click="consultCostList"
                     >查询</el-button>
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -120,6 +134,7 @@
                     <el-button
                       type="primary"
                       :icon="Plus"
+                      @click="addDetailRecord"
                     >添加</el-button>
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -135,91 +150,169 @@
         </el-form>
       </el-col>
     </el-row>
-    <el-row style="margin-top: 20px">
-      <el-table>
+    <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="支入金额"
+          label="费用类型"
           align="center"
+          prop="expensesGenre.name"
+          width="180"
         />
         <el-table-column
-          label="支出金额"
+          label="时间"
           align="center"
+          prop="feeTime"
+          width="180"
         />
         <el-table-column
-          label="时间"
+          label="部门"
           align="center"
+          prop="department.name"
+          width="180"
         />
         <el-table-column
-          label="部门"
+          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-start"
+              :width="200"
+              trigger="click"
+              :content="scope.row.remarks"
+              @click="notes"
+            >
+              <template #reference>
+                <el-button
+                  text
+                  type="primary"
+                  :icon="Notebook"
+                >
+                  备注
+                </el-button>
+              </template>
+            </el-popover>
             <el-button
               text
               type="primary"
               size="small"
-              @click="costEdit(scope)"
+              :icon="Edit"
+              @click="costEdit(scope.row)"
             >编辑</el-button>
             <el-button
               text
               type="primary"
               size="small"
+              :icon="Delete"
               @click="costDelete(scope)"
             >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-row>
+    <el-dialog
+      v-model="editDialogShow"
+      title="编辑费用"
+      width="40%"
+    >
+      <el-form>
+        <el-form-item label="报销人">
+          <el-select/>
+        </el-form-item>
+        <el-form-item label="部门">
+          <el-select/>
+        </el-form-item>
+        <el-form-item label="支入金额">
+          <el-input/>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { Search, Plus, Delete, Refresh } from '@element-plus/icons-vue'
+import { Search, Plus, Delete, Refresh, Edit, Notebook } from '@element-plus/icons-vue'
 import { ref, reactive, onMounted } from 'vue'
-// import { queryCostList } from '@/api/cost'
 import { getAllUsers } from '@/api/user'
 import { queryExpensesGenre } from '@/api/finance'
 import { getAllProject } from '@/api/project'
 import { queryCostList } from '@/api/cost'
 defineOptions({
-  name: 'Test'
+  name: 'DetailList'
 })
-// 数据
-const timeTypeList = [
+const timeTypeList = reactive([
   { label: '按日期查询', value: 'date' },
   { label: '按月份查询', value: 'month' },
-  { label: '按年份查询', value: 'year' },
-]
+  { label: '按年份查询', value: 'year' }
+])
 const userList = reactive([])
 const costTypeList = reactive([])
 const projectList = reactive([])
+const costList = reactive([])
 const timeTypeValue = ref('date')
 const condition = reactive({
   pageInfo: {
     page: 1,
     pageSize: 10
   },
-  name: '',
+  reimburser: 0,
   projectId: 0,
   genre: 0,
   dayTime: '',
   monthTime: '',
   yearTime: ''
 })
+const peopleSelect = ref('')
+const genreSelect = ref('')
+const projectSelect = ref('')
+const editDialogShow = ref(false)
+const editData = reactive({
+  id: 0,
+  reimburser: 0,
+  departmentId: 0,
+  expenditureAmount: 0,
+  depositAmount: 0,
+  feeTime: '',
+  genre: 0,
+  projectId: 0,
+  expenseDetail: '',
+  remarks: '',
+  thenBalance: 0
+})
 // 方法
 onMounted(() => {
   getUserList()
   getCostTypeList()
   queryProjectList()
-  getCostList()
+  getCostList(0, 0, 0)
 })
 
 const getUserList = () => {
@@ -248,21 +341,71 @@ const queryProjectList = () => {
     }
   })
 }
-const getCostList = () => {
-  console.log('条件', condition)
+
+const consultCostList = () => {
+  let nameId = 0
+  let typeId = 0
+  let itemId = 0
+  peopleSelect.value === '' ? nameId = 0 : nameId = peopleSelect.value
+  genreSelect.value === '' ? typeId = 0 : typeId = genreSelect.value
+  projectSelect.value === '' ? itemId = 0 : itemId = projectSelect.value
+  getCostList(nameId, typeId, itemId)
+}
+const getCostList = (nameId, typeID, itemId) => {
+  condition.reimburser = nameId
+  condition.genre = typeID
+  condition.projectId = itemId
+  console.log(condition)
   queryCostList(condition).then(res => {
-    console.log(res)
+    console.log(res.data)
     if (res.code === 0) {
-      console.log(res.data)
+      costList.length = 0
+      costList.push(...res.data.list)
     }
   })
 }
-const costEdit = (scope) => {
-  console.log(scope)
+const costEdit = (row) => {
+  editDialogShow.value = true
+  console.log(row)
 }
 const costDelete = (scope) => {
   console.log(scope)
 }
+const addDetailRecord = () => {
+  const test = [{}, {}, {}, {}, {}]
+  costList.push(...test)
+}
+
+const clearPeopleSelect = () => {
+  peopleSelect.value = ''
+  condition.reimburser = 0
+}
+
+const clearGenre = () => {
+  genreSelect.value = ''
+  condition.genre = 0
+}
+
+const clearProject = () => {
+  projectSelect.value = ''
+  condition.projectId = 0
+}
+
+const notes = () => {
+}
+
+const changeTimeType = (value) => {
+  if (value === 'year') {
+    condition.monthTime = ''
+    condition.dayTime = ''
+  } else if (value === 'month') {
+    condition.yearTime = ''
+    condition.dayTime = ''
+  } else {
+    condition.yearTime = ''
+    condition.monthTime = ''
+  }
+}
 </script>
 
 <style scoped>

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

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'PeopleList'
+})
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="totalBox">
+    <el-tabs
+      v-model="activeName"
+      class="demo-tabs"
+      @tab-click="handleClick"
+    >
+      <el-tab-pane
+        label="人员费用列表"
+        name="people"
+      >User</el-tab-pane>
+      <el-tab-pane
+        label="详情费用列表"
+        name="detail"
+      >
+        <DetailList/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import DetailList from '@/view/finance/costManage/components/detailList.vue'
+defineOptions({
+  name: 'CostManage'
+})
+const activeName = ref('people')
+const handleClick = () => {}
+</script>
+
+<style scoped>
+.totalBox{
+  width: 100%;
+  height: 800px;
+  background-color: #ffffff;
+}
+</style>