收入分析

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

@@ -128,6 +128,7 @@
                     <el-button
                       type="primary"
                       :icon="Refresh"
+                      @click="costListReset"
                     >重置</el-button>
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -141,6 +142,12 @@
               </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>
@@ -198,11 +205,10 @@
         >
           <template #default="scope">
             <el-popover
-              placement="top-start"
+              placement="top"
               :width="200"
               trigger="click"
               :content="scope.row.remarks"
-              @click="notes"
             >
               <template #reference>
                 <el-button
@@ -232,6 +238,18 @@
         </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"
@@ -349,6 +367,54 @@
         >确认</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>
 
@@ -356,7 +422,7 @@
 import { Search, Plus, Delete, Refresh, Edit, Notebook } from '@element-plus/icons-vue'
 import { ref, reactive, onMounted } from 'vue'
 import { getAllUsers } from '@/api/user'
-import { queryExpensesGenre } from '@/api/finance'
+import { createFeeGenre, deleteFeeGenre, queryExpensesGenre, updateFeeGenre } from '@/api/finance'
 import { getAllProject } from '@/api/project'
 import { queryCostList, updateCost } from '@/api/cost'
 import { getDepByStart } from '@/api/department'
@@ -375,6 +441,7 @@ const userList = reactive([])
 const costTypeList = reactive([])
 const projectList = reactive([])
 const costList = reactive([])
+const costListTotal = ref(0)
 const departmentList = reactive([])
 // 查询数据
 const timeTypeValue = ref('date')
@@ -412,6 +479,72 @@ const editData = reactive({
 // 抽屉类型、标题
 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(() => {
+      deleteFeeGenre(costTypeSelect.value).then(res => {
+        if (res.code === 0) {
+          ElMessage.success('删除成功')
+        }
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除',
+      })
+    })
+}
+const editCostType = () => {
+  if (changeCostValue.value === '') {
+    ElMessage.error('请输入费用类型')
+    return
+  }
+  if (costTypeSelect.value === '') {
+    console.log('新增类型')
+    const createCost = {
+      name: changeCostValue.value
+    }
+    createFeeGenre(createCost).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('新增类型成功')
+        getCostTypeList()
+      }
+    })
+  } else {
+    console.log('编辑类型')
+    const updateCost = {
+      id: costTypeSelect.value,
+      name: changeCostValue.value
+    }
+    updateFeeGenre(updateCost).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('修改类型成功')
+        getCostTypeList()
+      }
+    })
+  }
+}
+const clearCostType = () => {
+  costTypeSelect.value = ''
+}
 // 方法
 onMounted(() => {
   getUserList()
@@ -420,7 +553,25 @@ onMounted(() => {
   queryDepartmentList()
   getCostList(0, 0, 0)
 })
-
+const costListReset = () => {
+  const initial = {
+    pageInfo: {
+      page: 1,
+      pageSize: 10
+    },
+    reimburser: 0,
+    projectId: 0,
+    genre: 0,
+    dayTime: '',
+    monthTime: '',
+    yearTime: ''
+  }
+  projectSelect.value = ''
+  genreSelect.value = ''
+  peopleSelect.value = ''
+  Object.assign(condition, initial)
+  consultCostList()
+}
 const getUserList = () => {
   getAllUsers().then(res => {
     if (res.code === 0) {
@@ -473,7 +624,11 @@ const getCostList = (nameId, typeID, itemId) => {
   queryCostList(condition).then(res => {
     if (res.code === 0) {
       costList.length = 0
-      costList.push(...res.data.list)
+      console.log(res.data)
+      if (res.data.list !== null) {
+        costList.push(...res.data.list)
+      }
+      costListTotal.value = res.data.total
     }
   })
 }
@@ -556,9 +711,6 @@ const clearProject = () => {
   condition.projectId = 0
 }
 
-const notes = () => {
-}
-
 const changeTimeType = (value) => {
   if (value === 'year') {
     condition.monthTime = ''
@@ -608,6 +760,12 @@ const changeCostList = () => {
     })
   }
 }
+
+const changeCostPage = (val) => {
+  console.log(val)
+  condition.pageInfo.page = val
+  consultCostList()
+}
 </script>
 
 <style scoped>

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

@@ -110,36 +110,18 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-dropdown
-              split-button
+            <el-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"
-                    >重置</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>
+              :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>
@@ -154,25 +136,21 @@
           label="人员名称"
           align="center"
           prop="user.nickName"
-          width="180"
         />
         <el-table-column
           label="部门"
           align="center"
           prop="department.name"
-          width="180"
         />
         <el-table-column
-          label="支入金额(元)"
+          label="总支入金额(元)"
           align="center"
           prop="DepositAmountSum"
-          width="180"
         />
         <el-table-column
-          label="支出金额(元)"
+          label="总支出金额(元)"
           align="center"
           prop="ExpenditureAmountSum"
-          width="180"
         />
         <el-table-column
           label="操作"
@@ -187,29 +165,28 @@
             >
               详情
             </el-button>
-            <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="detailDrawerShow"
       title="费用详情"
       size="65%"
     >
+      <el-row />
       <el-table :data="detailList">
         <el-table-column
           label="费用类型"
@@ -246,20 +223,37 @@
           align="center"
         >
           <template #default="scope">
-            <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>
+            <el-tooltip
+              class="box-item"
+              effect="light"
+              :content="scope.row.remarks"
+              placement="bottom"
+              trigger="click"
+            >
+              <el-button
+                text
+                type="primary"
+                :icon="Notebook"
+              >
+                备注
+              </el-button>
+            </el-tooltip>
+            <el-popover
+              placement="bottom"
+              :width="200"
+              trigger="click"
+              :content="scope.row.expenseDetail"
+            >
+              <template #reference>
+                <el-button
+                  text
+                  type="primary"
+                  :icon="Notebook"
+                >
+                  详情
+                </el-button>
+              </template>
+            </el-popover>
           </template>
         </el-table-column>
       </el-table>
@@ -273,14 +267,14 @@ import { reactive, ref, onMounted } from 'vue'
 import { getAllUsers } from '@/api/user'
 import { queryExpensesGenre } from '@/api/finance'
 import { getAllProject } from '@/api/project'
-import { Search, Plus, Refresh, Notebook, Edit, Delete } from '@element-plus/icons-vue'
+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 projectList = reactive([])
@@ -326,6 +320,16 @@ onMounted(() => {
   getCostTypeList()
   queryProjectList()
 })
+// 查询条件转换
+const consultCostList = () => {
+  let nameId
+  let typeId
+  let itemId
+  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
@@ -333,12 +337,34 @@ const getCostList = (nameId, typeID, itemId) => {
   condition.projectId = itemId
   peopleCost(condition).then(res => {
     if (res.code === 0) {
-      console.log(res.data)
       costList.length = 0
-      costList.push(...res.data.list)
+      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: ''
+  }
+  projectSelect.value = ''
+  genreSelect.value = ''
+  peopleSelect.value = ''
+  Object.assign(condition, initial)
+  consultCostList()
+}
 // 获取用户列表
 const getUserList = () => {
   getAllUsers().then(res => {
@@ -395,25 +421,17 @@ const clearPeopleSelect = () => {
   condition.reimburser = 0
 }
 
-const consultCostList = () => {}
-
-const addDetailRecord = () => {}
-
-const costEdit = (val) => {
-  console.log(val)
-}
-
-const costDelete = (val) => {
-  console.log(val)
-}
-
 const openDetail = (scope) => {
-  console.log(scope)
   detailDrawerShow.value = true
   detailList.length = 0
   detailList.push(...scope)
 }
 
+const changeCostPage = (val) => {
+  condition.pageInfo.page = val
+  consultCostList()
+}
+
 </script>
 
 <style scoped>