收入分析

web/.env.development

@@ -4,12 +4,12 @@ VITE_CLI_PORT = 8080
 VITE_SERVER_PORT = 8220
 VITE_BASE_API = /api
 VITE_FILE_API = /api
-VITE_BASE_PATH = http://192.168.110.116
+//VITE_BASE_PATH = http://192.168.110.116
 VITE_POSITION = close
 VITE_EDITOR = webstorm
 
 
 // VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm
 // 如果使用docker-compose开发模式，设置为下面的地址或本机主机IP
-//VITE_BASE_PATH = http://110.40.223.170
+VITE_BASE_PATH = http://110.40.223.170
 

web/src/api/cost.js

@@ -40,3 +40,12 @@ export const deleteCost = (data) => {
   })
 }
 
+// 查询费用按人
+export const peopleCost = (data) => {
+  return service({
+    url: '/expenses/queryExpensesSumByPeople',
+    method: 'post',
+    data: data
+  })
+}
+

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

@@ -459,9 +459,9 @@ const queryDepartmentList = () => {
 }
 
 const consultCostList = () => {
-  let nameId = 0
-  let typeId = 0
-  let itemId = 0
+  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

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

@@ -1,11 +1,353 @@
 <template>
-  <div></div>
+  <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="projectSelect"
+              placeholder="请选择项目"
+              clearable
+              @clear="clearProject"
+            >
+              <el-option
+                v-for="item in projectList"
+                :key="item.ID"
+                :label="item.name"
+                :value="item.ID"
+              />
+            </el-select>
+          </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
+              @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"
+                    >重置</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>
+      </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="department.name"
+          width="180"
+        />
+        <el-table-column
+          label="支入金额(元)"
+          align="center"
+          prop="DepositAmountSum"
+          width="180"
+        />
+        <el-table-column
+          label="支出金额(元)"
+          align="center"
+          prop="ExpenditureAmountSum"
+          width="180"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+        >
+          <template #default="scope">
+            <el-button
+              text
+              type="primary"
+              :icon="Notebook"
+              @click="openDetail(scope.expenses)"
+            >
+              详情
+            </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-drawer
+      v-model="detailDrawerShow"
+      title="费用详情"
+      width="40%"
+    ></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, Plus, Refresh, Notebook, Edit, Delete } from '@element-plus/icons-vue'
+
 defineOptions({
   name: 'PeopleList'
 })
+
+// 数据
+const costList = reactive([])
+const userList = reactive([])
+const costTypeList = reactive([])
+const projectList = 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 projectSelect = ref('')
+const genreSelect = ref('')
+const peopleSelect = ref('')
+const detailDrawerShow = ref(false)
+const detailList = reactive([])
+// 方法
+onMounted(() => {
+  getCostList(0, 0, 0)
+  getUserList()
+  getCostTypeList()
+  queryProjectList()
+})
+// 获取费用列表
+const getCostList = (nameId, typeID, itemId) => {
+  condition.reimburser = nameId
+  condition.genre = typeID
+  condition.projectId = itemId
+  peopleCost(condition).then(res => {
+    if (res.code === 0) {
+      console.log(res.data)
+      costList.length = 0
+      costList.push(...res.data.list)
+    }
+  })
+}
+// 获取用户列表
+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 queryProjectList = () => {
+  getAllProject().then(res => {
+    if (res.code === 0) {
+      projectList.length = 0
+      projectList.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 clearProject = () => {
+  projectSelect.value = ''
+  condition.projectId = 0
+}
+
+const clearGenre = () => {
+  genreSelect.value = ''
+  condition.genre = 0
+}
+
+const clearPeopleSelect = () => {
+  peopleSelect.value = ''
+  condition.reimburser = 0
+}
+
+const consultCostList = () => {}
+
+const addDetailRecord = () => {}
+
+const costEdit = (val) => {
+  console.log(val)
+}
+
+const costDelete = (val) => {
+  console.log(val)
+}
+
+const openDetail = (expenses) => {
+  console.log(expenses)
+  detailDrawerShow.value = true
+  detailList.length = 0
+  detailList.push(...expenses)
+}
+
 </script>
 
 <style scoped>

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

@@ -8,7 +8,9 @@
       <el-tab-pane
         label="人员费用列表"
         name="people"
-      >User</el-tab-pane>
+      >
+        <PeopleList/>
+      </el-tab-pane>
       <el-tab-pane
         label="详情费用列表"
         name="detail"
@@ -22,6 +24,7 @@
 <script setup>
 import { ref } from 'vue'
 import DetailList from '@/view/finance/costManage/components/detailList.vue'
+import PeopleList from '@/view/finance/costManage/components/peopleList.vue';
 defineOptions({
   name: 'CostManage'
 })