收入分析

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

@@ -0,0 +1,35 @@
+import service from '@/utils/request'
+// 查询费用列表
+export const queryCostList = (data) => {
+  return service({
+    url: '/expenses/queryExpensesList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 新增费用
+export const createCost = (data) => {
+  return service({
+    url: '/expenses/createExpenses',
+    method: 'post',
+    data: data
+  })
+}
+// 修改费用
+export const updateCost = (data) => {
+  return service({
+    url: '/expenses/updateExpenses',
+    method: 'put',
+    data: data
+  })
+}
+// 删除费用
+export const deleteCost = (data) => {
+  return service({
+    url: '/expenses/deleteExpenses',
+    method: 'delete',
+    data: data
+  })
+}
+

web/src/api/project.js

@@ -8,6 +8,14 @@ export const getProjectList = (data) => {
   })
 }
 
+// 查询所有项目
+export const getAllProject = (data) => {
+  return service({
+    url: '/project/queryAllProject',
+    method: 'get'
+  })
+}
+
 // 项目立项
 export const createProject = (data) => {
   return service({

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

@@ -1,91 +1,268 @@
 <template>
   <div>
-    <el-form :inline="true">
-      <el-form-item label="月份：">
-        <el-date-picker
-          v-model="condition.time"
-          type="month"
-          placeholder="请选择月份"
-          format="YYYY-MM"
-          value-format="YYYY-MM"
-          clearable
+    <el-row>
+      <el-col
+        :span="24"
+        class="bg-white"
+      >
+        <el-form
+          :inline="true"
+          style="margin: 20px 0 0 20px"
+        >
+          <el-form-item label="时间类型:">
+            <el-select
+              v-model="timeTypeList"
+              placeholder="请选择日期选择器"
+            >
+              <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
+            />
+          </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
+            />
+          </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
+            />
+          </el-form-item>
+          <el-form-item label="项目:">
+            <el-select placeholder="请选择项目">
+              <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
+              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="condition.name"
+              placeholder="请选择人员名称"
+            >
+              <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"
+                    >查询</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"
+                    >添加</el-button>
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-button
+                      type="primary"
+                      :icon="Delete"
+                    >删除</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: 20px">
+      <el-table>
+        <el-table-column
+          label="人员名称"
+          align="center"
+        />
+        <el-table-column
+          label="支入金额"
+          align="center"
+        />
+        <el-table-column
+          label="支出金额"
+          align="center"
+        />
+        <el-table-column
+          label="时间"
+          align="center"
         />
-      </el-form-item>
-      <el-form-item label="年份：">
-        <el-date-picker
-          v-model="condition.yearTime"
-          type="year"
-          placeholder="请选择年份"
-          format="YYYY"
-          value-format="YYYY"
-          clearable
+        <el-table-column
+          label="部门"
+          align="center"
         />
-      </el-form-item>
-      <el-form-item label="项目：">
-        <el-select placeholder="请选择项目" />
-      </el-form-item>
-      <el-form-item label="类型：">
-        <el-select placeholder="请选择类型" />
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          type="primary"
-          :icon="Search"
+        <el-table-column
+          label="操作"
+          align="center"
         >
-          查询
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <el-row>
-      <el-col :span="23">
-        <el-table>
-          <el-table-column
-            label="支入金额"
-            align="center"
-          />
-          <el-table-column
-            label="支出金额"
-            align="center"
-          />
-          <el-table-column
-            label="时间"
-            align="center"
-          />
-          <el-table-column
-            label="人员名称"
-            align="center"
-          />
-          <el-table-column
-            label="余额"
-            align="center"
-          />
-          <el-table-column
-            label="部门"
-            align="center"
-          />
-        </el-table>
-      </el-col>
+          <template #default="scope">
+            <el-button
+              text
+              type="primary"
+              size="small"
+              @click="costEdit(scope)"
+            >编辑</el-button>
+            <el-button
+              text
+              type="primary"
+              size="small"
+              @click="costDelete(scope)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </el-row>
   </div>
 </template>
 
 <script setup>
-import { Search } from '@element-plus/icons-vue'
+import { Search, Plus, Delete, Refresh } 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'
 })
-const condition = () => reactive(
-  {
-    pageInfo: {
-      page: 1,
-      pageSize: 8
-    },
-    code: '',
-    name: '',
-    time: '',
-    yearTime: ''
-  }
-)
+// 数据
+const timeTypeList = [
+  { label: '按日期查询', value: 'date' },
+  { label: '按月份查询', value: 'month' },
+  { label: '按年份查询', value: 'year' },
+]
+const userList = reactive([])
+const costTypeList = reactive([])
+const projectList = reactive([])
+const timeTypeValue = ref('date')
+const condition = reactive({
+  pageInfo: {
+    page: 1,
+    pageSize: 10
+  },
+  name: '',
+  projectId: 0,
+  genre: 0,
+  dayTime: '',
+  monthTime: '',
+  yearTime: ''
+})
+// 方法
+onMounted(() => {
+  getUserList()
+  getCostTypeList()
+  queryProjectList()
+  getCostList()
+})
+
+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 getCostList = () => {
+  console.log('条件', condition)
+  queryCostList(condition).then(res => {
+    console.log(res)
+    if (res.code === 0) {
+      console.log(res.data)
+    }
+  })
+}
+const costEdit = (scope) => {
+  console.log(scope)
+}
+const costDelete = (scope) => {
+  console.log(scope)
+}
 </script>
 
 <style scoped>