收支分析

web/.env.development

@@ -4,7 +4,7 @@ VITE_CLI_PORT = 8080
 VITE_SERVER_PORT = 8220
 VITE_BASE_API = /api
 VITE_FILE_API = /api
-VITE_BASE_PATH = http://127.0.0.1
+VITE_BASE_PATH = http://192.168.110.116
 VITE_POSITION = close
 VITE_EDITOR = webstorm
 

web/src/api/collection.js

@@ -33,7 +33,6 @@ export const deleteCollection = (data) => {
     data: data
   })
 }
-
 // 检索收款记录
 export const retrievalCollection = (data) => {
   return service({

web/src/api/reimbursement.js

@@ -33,3 +33,13 @@ export const deleteReimburse = (data) => {
     data: data
   })
 }
+
+// 检索报销记录
+export const retrievalReimburse = (data) => {
+  return service({
+    url: '/project/queryReimbursementList',
+    method: 'post',
+    data: data
+  })
+}
+

web/src/pinia/code/code.js

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const codeOperate = defineStore('code', () => {
+  const code = ref('')
+  const changeCode = (id) => {
+    code.value = id
+  }
+  return {
+    code,
+    changeCode
+  }
+})

web/src/pinia/collection/Collection.js

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { reactive, ref } from 'vue'
-import { createCollection, deleteCollection, queryCollection, updateCollection } from '@/api/collection'
+import { createCollection, deleteCollection, updateCollection, retrievalCollection } from '@/api/collection'
 import { formatDate } from '@/utils/formatDate'
 
 export const collectionOperate = defineStore('payment', () => {
@@ -9,20 +9,16 @@ export const collectionOperate = defineStore('payment', () => {
   const paymentCode = ref('')
   const paymentTotal = ref(0)
   // 定义修改数据的方法
-  const getPaymentList = (code) => {
-    // retrievalCollection().then(res => {
-    //   if (res.code === 0) {
-    //
-    //   }
-    // })
-    queryCollection(code).then(res => {
+  const getPaymentList = (data) => {
+    retrievalCollection(data).then(res => {
       if (res.code === 0) {
-        const data = res.data
-        data.forEach(item => {
+        const list = res.data.list
+        list.forEach(item => {
           item.collectionTime = formatDate(item.collectionTime)
+          console.log(item.collectionTime)
         })
         paymentList.length = 0
-        paymentList.push(...data)
+        paymentList.push(...list)
       }
     })
   }

web/src/pinia/reimbursement/Reimbursement.js

@@ -1,13 +1,14 @@
 import { defineStore } from 'pinia'
-import { queryReimburse, createReimburse, updateReimburse, deleteReimburse } from '@/api/reimbursement'
-import { reactive } from 'vue'
+import { createReimburse, updateReimburse, deleteReimburse, retrievalReimburse } from '@/api/reimbursement'
+import { reactive, ref } from 'vue'
 
 export const reimburseOperate = defineStore('account', () => {
   // 定义数据
   const reimburseList = reactive([])
+  const reimburseTotal = ref(0)
   // 定义修改数据的方法
-  const getReimburseList = (code) => {
-    queryReimburse(code).then(res => {
+  const getReimburseList = (data) => {
+    retrievalReimburse(data).then(res => {
       if (res.code === 0) {
         reimburseList.length = 0
         reimburseList.push(...res.data)
@@ -40,12 +41,17 @@ export const reimburseOperate = defineStore('account', () => {
     reimburseList.length = 0
     reimburseList.push(...list)
   }
+  const changeReimburseTotal = (total) => {
+    reimburseTotal.value = total
+  }
   return {
     reimburseList,
+    reimburseTotal,
     getReimburseList,
     postReimburse,
     putReimburse,
     delReimburse,
-    changeReimburseList
+    changeReimburseList,
+    changeReimburseTotal
   }
 })

web/src/view/finance/components/payment.vue

@@ -53,12 +53,6 @@
               align="center"
               width="250px"
             />
-            <el-table-column
-              label="收款金额（元）"
-              prop="price"
-              align="center"
-              width="250px"
-            />
             <el-table-column
               label="操作"
               align="center"
@@ -237,13 +231,14 @@ const pay = collectionOperate()
 const condition = reactive({
   pageInfo: {
     page: 1,
-    pageSize: 10
+    pageSize: 8
   },
   code: '',
   time: ''
 })
 
 const paymentEditShow = ref(false)
+
 const paymentEditData = reactive({
   id: 0,
   projectCode: '',
@@ -251,6 +246,7 @@ const paymentEditData = reactive({
   remarks: '',
   collectionTime: ''
 })
+
 const editAmount = ref('')
 
 const paymentAddShow = ref(false)
@@ -261,19 +257,22 @@ const paymentAddData = reactive({
   remarks: '',
   collectionTime: ''
 })
+
 const addAmount = ref('')
+
 // 方法
 const openPaymentEdit = (row) => {
   paymentEditShow.value = true
   paymentEditData.projectCode = row.projectCode
   paymentEditData.collectionTime = row.collectionTime
-  paymentAmount.value = row.price
+  editAmount.value = row.price
   paymentEditData.id = row.ID
   paymentEditData.remarks = row.remarks
 }
-
 const paymentEdit = () => {
-  paymentEditData.price = parseFloat(paymentAmount.value)
+  const editCondition = condition
+  editCondition.code = paymentEditData.projectCode
+  paymentEditData.price = parseFloat(editAmount.value)
   updateCollection(paymentEditData).then(res => {
     if (res.code === 0) {
       ElMessage({
@@ -285,10 +284,13 @@ const paymentEdit = () => {
     }
   })
   paymentEditShow.value = false
-  pay.getPaymentList(paymentEditData.projectCode)
+  pay.getPaymentList(editCondition)
 }
 const paymentDelete = (row) => {
-  console.log(row)
+  const delCondition = condition
+  delCondition.code = pay.paymentCode
+  delCondition.pageInfo.page = 1
+  delCondition.time = ''
   ElMessageBox.confirm(
     '确定要删除该收款记录吗?',
     '删除记录',
@@ -309,7 +311,7 @@ const paymentDelete = (row) => {
             showClose: true,
             duration: 2000
           })
-          pay.getPaymentList(row.projectCode)
+          pay.getPaymentList(delCondition)
         }
       })
     }).catch(() => {})
@@ -346,7 +348,10 @@ const paymentAdd = () => {
     }
   }
   createCollection(addData).then(res => {
-    console.log(res)
+    const reset = condition
+    reset.pageInfo.page = 1
+    reset.code = pay.paymentCode
+    reset.time = ''
     if (res.code === 0) {
       ElMessage({
         message: '新增成功',
@@ -356,13 +361,16 @@ const paymentAdd = () => {
       })
       addAmount.value = ''
       paymentAddData.collectionTime = ''
-      pay.getPaymentList(pay.paymentCode)
+      pay.getPaymentList(reset)
       paymentAddShow.value = false
     }
   })
 }
 const changePaymentPage = (page) => {
-  console.log(page)
+  const pageCondition = condition
+  pageCondition.code = pay.paymentCode
+  pageCondition.pageInfo.page = page
+  pay.getPaymentList(pageCondition)
 }
 
 </script>

web/src/view/finance/components/reimburse.vue

@@ -1,11 +1,253 @@
 <template>
-
+  <div>
+    <el-row>
+      <el-col :span="6">
+        <el-form-item
+          label="报销日期："
+        >
+          <el-date-picker
+            v-model="condition.time"
+            type="month"
+            placeholder="请选择报销月份"
+            format="YYYY-MM"
+            value-format="YYYY-MM"
+            clearable
+          />
+        </el-form-item>
+      </el-col>
+      <el-col
+        :span="6"
+        :offset="1"
+      >
+        <el-form-item
+          label="报销人："
+        >
+          <el-input
+            v-model="condition.name"
+            placeholder="请输入报销人"
+            clearable
+          />
+        </el-form-item>
+      </el-col>
+      <el-col
+        :span="2"
+        :offset="1"
+      >
+        <el-button
+          type="primary"
+          :icon="Search"
+          @click="searchReimburse"
+        >查询</el-button>
+      </el-col>
+      <el-col
+        :span="2"
+        style="margin-left: 30px"
+      >
+        <el-button
+          type="primary"
+          :icon="Plus"
+          @click="reimburseAddShow = true"
+        >
+          新增
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="23">
+        <el-row>
+          <el-table
+            :data="submit.reimburseList"
+            stripe
+          >
+            <el-table-column
+              label="报销人"
+              prop="applicant"
+              align="center"
+              width="180px"
+            />
+            <el-table-column
+              label="报销日期"
+              prop="applicationTime"
+              align="center"
+              width="180px"
+            />
+            <el-table-column
+              label="报销金额（元）"
+              prop="price"
+              align="center"
+              width="250px"
+            />
+            <el-table-column
+              label="操作"
+              align="center"
+            >
+              <template #default="scope">
+                <el-button
+                  text
+                  type="primary"
+                  :icon="Notebook"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  text
+                  type="primary"
+                  :icon="Edit"
+                  @click="openReimburseEdit(scope.row)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  text
+                  type="primary"
+                  :icon="Delete"
+                  @click="reimburseDelete(scope.row)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-row>
+        <el-row justify="end">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="8"
+            :total="submit.reimburseTotal"
+            @change="changeReimbursePage"
+          />
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-dialog
+      v-model="reimburseAddShow"
+      width="40%"
+      title="新增报销记录"
+    >
+      <el-form
+        label-position="left"
+        label-width="90"
+        class="mt-5"
+      >
+        <el-form-item
+          label="申请人："
+        >
+          <el-input
+            v-model="createData.applicant"
+            placeholder="请输入申请人名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          label="报销日期："
+        >
+          <el-date-picker
+            v-model="createData.applicantTime"
+            placeholder="请选择报销日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          label="审批人："
+        >
+          <el-input
+            v-model="createData.approval"
+            placeholder="请输入审批人名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          label="费用类型："
+        >
+          <el-select
+            v-model="createData.genre"
+            placeholder="请选择费用类型"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          label="报销金额："
+        >
+          <el-input
+            v-model="amount"
+            placeholder="请输入报销金额"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          label="报销备注："
+        >
+          <el-input
+            v-model="createData.feeDetails.remarks"
+            placeholder="请输入报销备注"
+            type="textarea"
+            maxlength="150"
+            show-word-limit
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            type="primary"
+            size="large"
+            @click="createReimburse"
+          >
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { Search, Delete, Edit, Notebook, Plus } from '@element-plus/icons-vue'
+import { reactive, ref } from 'vue'
+import { reimburseOperate } from '@/pinia/reimbursement/Reimbursement'
 defineOptions({
-  name: 'reimburse'
+  name: 'Reimburse'
+})
+// 数据
+const reimburseAddShow = ref(false)
+const condition = reactive({
+  pageInfo: {
+    page: 1,
+    pageSize: 8
+  },
+  code: '',
+  name: '',
+  time: ''
+})
+const createData = reactive({
+  applicant: '',
+  applicantTime: '',
+  approval: '',
+  price: 0,
+  genre: '',
+  feeDetails: {
+    remarks: '',
+    price: 0
+  }
 })
+const amount = ref('')
+const submit = reimburseOperate()
+// 方法
+const searchReimburse = () => {}
+const openReimburseEdit = (row) => {
+  console.log(row)
+}
+const reimburseDelete = (row) => {
+  console.log(row)
+}
+const changeReimbursePage = (value) => {
+  console.log(value)
+}
+const createReimburse = () => {}
 </script>
 
 <style scoped>

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

@@ -117,7 +117,9 @@
           <el-tab-pane
             label="费用报销"
             :name="2"
-          >Config</el-tab-pane>
+          >
+            <Reimburse/>
+          </el-tab-pane>
           <el-tab-pane
             label="项目收款"
             :name="3"
@@ -244,17 +246,24 @@
 import { Menu, Search } from '@element-plus/icons-vue'
 import { ref, onMounted, reactive, computed } from 'vue'
 import { getProjectList, getProjectMessage, queryProjectExpense } from '@/api/project'
-import { collectionOperate } from '@/pinia/collection/Collection'
 // import iconCollection from '@/assets/Collection.png'
 // import iconAmount from '@/assets/amount.png'
 import Hour from '../components/hour.vue'
 import Payment from '../components/payment.vue'
-import { hourOperate } from '@/pinia/hour/Hour'
+import Reimburse from '../components/reimburse.vue'
+// 引入pinia
+import { collectionOperate } from '@/pinia/collection/Collection'
+import { codeOperate } from '@/pinia/code/code'
+import { reimburseOperate } from '@/pinia/reimbursement/Reimbursement'
+
 defineOptions({
   name: 'FinanceAnalysis'
 })
 // 数据
 const payment = collectionOperate()
+const symbol = codeOperate()
+const submit = reimburseOperate()
+
 const listShow = ref(false)
 const condition = reactive({
   pageInfo: {
@@ -269,7 +278,6 @@ const listData = reactive([])
 const projectTotal = ref(0)
 const projectMessage = reactive({})
 const listSort = ref(1)
-const hour = hourOperate()
 
 // 计算属性
 const buttonType = computed(() => (state) => {
@@ -304,13 +312,16 @@ const projectList = (condition) => {
       const list = res.data.list
       projectTotal.value = res.data.total
       listData.push(...list)
-      hour.getTimeList(list[0].code)
       payment.changePaymentCode(list[0].code)
+      symbol.changeCode(list[0].code)
       queryProjectExpense(list[0].code).then(res => {
         if (res.code === 0) {
           console.log(res.data)
-          payment.changePaymentList(res.data.collection)
-          payment.changePaymentTotal(res.data.collectionTotal)
+          const summaryData = res.data
+          payment.changePaymentList(summaryData.collection)
+          payment.changePaymentTotal(summaryData.collectionTotal)
+          submit.changeReimburseList(summaryData.reimbursement)
+          submit.changeReimburseTotal(summaryData.reimbursementTotal)
         }
       })
       getProjectMessage(list[0].code).then(res => {