收支分析

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://106.52.134.22
+VITE_BASE_PATH = http://192.168.110.116
 VITE_POSITION = close
 VITE_EDITOR = webstorm
 

web/src/pinia/collection/Collection.js

@@ -1,14 +1,20 @@
 import { defineStore } from 'pinia'
 import { reactive, ref } from 'vue'
-import { createCollection, deleteCollection, queryCollection, updateCollection } from '@/api/collection'
+import { createCollection, deleteCollection, queryCollection, updateCollection, retrievalCollection } from '@/api/collection'
 import { formatDate } from '@/utils/formatDate'
 
 export const collectionOperate = defineStore('payment', () => {
   // 定义数据
   const paymentList = reactive([])
   const paymentCode = ref('')
+  const paymentTotal = ref(0)
   // 定义修改数据的方法
   const getPaymentList = (code) => {
+    // retrievalCollection().then(res => {
+    //   if (res.code === 0) {
+    //
+    //   }
+    // })
     queryCollection(code).then(res => {
       if (res.code === 0) {
         const data = res.data
@@ -48,19 +54,25 @@ export const collectionOperate = defineStore('payment', () => {
     })
     paymentList.length = 0
     paymentList.push(...list)
+    paymentTotal.value = list.length
   }
   const changePaymentCode = (code) => {
     paymentCode.value = code
   }
+  const changePaymentTotal = (total) => {
+    paymentTotal.value = total
+  }
 
   return {
     paymentList,
     paymentCode,
+    paymentTotal,
     getPaymentList,
     postCollection,
     putCollection,
     delCollection,
     changePaymentList,
-    changePaymentCode
+    changePaymentCode,
+    changePaymentTotal
   }
 })

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row>
-      <el-col :span="6">
+      <el-col :span="8">
         <el-form-item
           label="收款日期："
         >
@@ -14,76 +14,102 @@
           />
         </el-form-item>
       </el-col>
-      <el-col :span="3">
+      <el-col :span="2">
         <el-button
           type="primary"
           :icon="Search"
           @click="searchCollection"
         >查询</el-button>
       </el-col>
+      <el-col
+        :span="2"
+        style="margin-left: 30px"
+      >
+        <el-button
+          type="primary"
+          :icon="Plus"
+          @click="paymentAddShow = true"
+        >
+          新增
+        </el-button>
+      </el-col>
     </el-row>
     <el-row>
-      <el-col :span="14">
-        <el-table
-          :data="pay.paymentList"
-          stripe
-        >
-          <el-table-column
-            label="收款时间"
-            prop="collectionTime"
-            align="center"
-            width="180px"
-          />
-          <el-table-column
-            label="收款金额（元）"
-            prop="price"
-            align="center"
-            width="250px"
-          />
-          <el-table-column
-            label="操作"
-            align="center"
+      <el-col :span="23">
+        <el-row>
+          <el-table
+            :data="pay.paymentList"
+            stripe
           >
-            <template #default="scope">
-              <el-popover
-                placement="top-start"
-                title="收款备注"
-                :width="200"
-                trigger="click"
-                :content="scope.remarks"
-              >
-                <template #reference>
-                  <el-button
-                    text
-                    type="primary"
-                    :icon="Notebook"
-                    size="large"
-                  >
-                    备注
-                  </el-button>
-                </template>
-              </el-popover>
-              <el-button
-                text
-                type="primary"
-                :icon="Edit"
-                size="large"
-                @click="openPaymentEdit(scope.row)"
-              >
-                编辑
-              </el-button>
-              <el-button
-                text
-                type="primary"
-                :icon="Delete"
-                size="large"
-                @click="paymentDelete(scope.row)"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+            <el-table-column
+              label="收款时间"
+              prop="collectionTime"
+              align="center"
+              width="180px"
+            />
+            <el-table-column
+              label="收款金额（元）"
+              prop="price"
+              align="center"
+              width="250px"
+            />
+            <el-table-column
+              label="收款金额（元）"
+              prop="price"
+              align="center"
+              width="250px"
+            />
+            <el-table-column
+              label="操作"
+              align="center"
+            >
+              <template #default="scope">
+                <el-popover
+                  placement="top-start"
+                  title="收款备注"
+                  :width="200"
+                  trigger="click"
+                  :content="scope.row.remarks"
+                >
+                  <template #reference>
+                    <el-button
+                      text
+                      type="primary"
+                      :icon="Notebook"
+                    >
+                      备注
+                    </el-button>
+                  </template>
+                </el-popover>
+                <el-button
+                  text
+                  type="primary"
+                  :icon="Edit"
+                  @click="openPaymentEdit(scope.row)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  text
+                  type="primary"
+                  :icon="Delete"
+                  @click="paymentDelete(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="pay.paymentTotal"
+            @change=""
+          />
+        </el-row>
       </el-col>
     </el-row>
     <el-dialog
@@ -97,9 +123,10 @@
           size="large"
         >
           <el-input
-            v-model="paymentEditData.days"
+            v-model="editAmount"
             placeholder="请输入收款金额"
             clearable
+            type="number"
           />
         </el-form-item>
         <el-form-item
@@ -123,25 +150,83 @@
             v-model="paymentEditData.remarks"
             placeholder="请输入收款备注"
             clearable
+            type="textarea"
+            maxlength="100"
+            show-word-limit
           />
         </el-form-item>
       </el-form>
       <template #footer>
         <el-button
           type="primary"
+          size="large"
           @click="paymentEdit"
         >
           确认
         </el-button>
       </template>
     </el-dialog>
+    <el-dialog
+      v-model="paymentAddShow"
+      title="新增收款"
+      width="40%"
+    >
+      <el-form>
+        <el-form-item
+          label="收款金额："
+          size="large"
+        >
+          <el-input
+            v-model="addAmount"
+            placeholder="请输入收款金额"
+            clearable
+            type="number"
+          />
+        </el-form-item>
+        <el-form-item
+          label="收款日期："
+          size="large"
+        >
+          <el-date-picker
+            v-model="paymentAddData.collectionTime"
+            type="date"
+            placeholder="请选择收款日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          label="收款备注："
+          size="large"
+        >
+          <el-input
+            v-model="paymentAddData.remarks"
+            placeholder="请输入收款备注(选填)"
+            clearable
+            type="textarea"
+            maxlength="100"
+            show-word-limit
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button
+          type="primary"
+          size="large"
+          @click="paymentAdd"
+        >
+          确认
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import { reactive, ref } from 'vue'
-import { Search, Delete, Edit, Notebook } from '@element-plus/icons-vue'
-import { retrievalCollection, updateCollection } from '@/api/collection'
+import { Search, Delete, Edit, Notebook, Plus } from '@element-plus/icons-vue'
+import { retrievalCollection, updateCollection, deleteCollection, createCollection } from '@/api/collection'
 import { collectionOperate } from '@/pinia/collection/Collection'
 import { ElMessage, ElMessageBox } from 'element-plus'
 defineOptions({
@@ -162,21 +247,33 @@ const paymentEditShow = ref(false)
 const paymentEditData = reactive({
   id: 0,
   projectCode: '',
-  days: 0,
+  price: 0,
+  remarks: '',
+  collectionTime: ''
+})
+const editAmount = ref('')
+
+const paymentAddShow = ref(false)
+
+const paymentAddData = reactive({
+  projectCode: '',
+  price: 0,
   remarks: '',
   collectionTime: ''
 })
+const addAmount = ref('')
 // 方法
 const openPaymentEdit = (row) => {
-  console.log(row)
   paymentEditShow.value = true
   paymentEditData.projectCode = row.projectCode
   paymentEditData.collectionTime = row.collectionTime
-  paymentEditData.days = row.price
+  paymentAmount.value = row.price
   paymentEditData.id = row.ID
+  paymentEditData.remarks = row.remarks
 }
 
 const paymentEdit = () => {
+  paymentEditData.price = parseFloat(paymentAmount.value)
   updateCollection(paymentEditData).then(res => {
     if (res.code === 0) {
       ElMessage({
@@ -188,14 +285,38 @@ const paymentEdit = () => {
     }
   })
   paymentEditShow.value = false
+  pay.getPaymentList(paymentEditData.projectCode)
 }
 const paymentDelete = (row) => {
   console.log(row)
+  ElMessageBox.confirm(
+    '确定要删除该收款记录吗?',
+    '删除记录',
+    {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const id = { id: row.ID }
+      deleteCollection(id).then(res => {
+        console.log(res)
+        if (res.code === 0) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success',
+            showClose: true,
+            duration: 2000
+          })
+          pay.getPaymentList(row.projectCode)
+        }
+      })
+    }).catch(() => {})
 }
 
 const searchCollection = () => {
   condition.code = pay.paymentCode
-  console.log(condition)
   retrievalCollection(condition).then(res => {
     console.log(res.data)
     if (res.code === 0) {
@@ -204,6 +325,45 @@ const searchCollection = () => {
   })
 }
 
+const paymentAdd = () => {
+  const addData = paymentAddData
+  addData.price = addAmount.value.length === 0 ? 0 : parseFloat(addAmount.value)
+  addData.projectCode = pay.paymentCode
+  const summary = {
+    'price': '请输入收款金额',
+    'collectionTime': '请选择收款日期'
+  }
+  for (const item in addData) {
+    if (item === 'remarks') {
+      continue
+    }
+    if (addData[item] === '' || addData[item] === 0 || addData[item] === null) {
+      ElMessage({
+        message: summary[item],
+        type: 'error',
+        showClose: true,
+        duration: 2000
+      })
+      return
+    }
+  }
+  createCollection(addData).then(res => {
+    console.log(res)
+    if (res.code === 0) {
+      ElMessage({
+        message: '新增成功',
+        type: 'success',
+        showClose: true,
+        duration: 2000
+      })
+      addAmount.value = ''
+      paymentAddData.collectionTime = ''
+      pay.getPaymentList(pay.paymentCode)
+      paymentAddShow.value = false
+    }
+  })
+}
+
 </script>
 
 <style scoped>

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

@@ -96,72 +96,12 @@
     </el-row>
     <el-row
       class="mt-5"
-      style="height: 150px"
-      justify="space-between"
+      style="height: 680px"
     >
       <el-col
-        :span="4"
-        class="bg-white"
-      >
-        <el-row
-          style="height: 100px"
-          align="middle"
-        >
-          <el-col
-            :span="13"
-            :offset="1"
-          >
-            <el-text>项目收款</el-text>
-          </el-col>
-          <el-col
-            :span="9"
-            class="flex justify-center"
-          >
-            <el-image
-              :src="iconCollection"
-              class="iconStyle"
-            />
-          </el-col>
-        </el-row>
-        <el-row
-          style="height: 50px"
-          align="middle"
-        >
-          <el-col
-            :span="4"
-            :offset="1"
-          >
-            <el-image
-              :src="iconAmount"
-              class="countIcon"
-            />
-          </el-col>
-        </el-row>
-      </el-col>
-      <el-col
-        :span="4"
+        :span="16"
         class="bg-white"
-      />
-      <el-col
-        :span="4"
-        class="bg-white"
-      />
-      <el-col
-        :span="4"
-        class="bg-white"
-      />
-      <el-col
-        :span="4"
-        class="bg-white"
-      />
-    </el-row>
-    <el-row
-      class="bg-white mt-5"
-      style="height: 540px"
-    >
-      <el-col
-        :span="20"
-        class="ml-10"
+        style="padding-left: 20px"
       >
         <el-tabs
           v-model="listSort"
@@ -186,6 +126,52 @@
           </el-tab-pane>
         </el-tabs>
       </el-col>
+      <el-col :span="8">
+        <div style="width: 97%;margin-left: 3%">
+          <el-row justify="space-between">
+            <el-col
+              :span="11"
+              class="bg-white"
+              style="height: 150px"
+            />
+            <el-col
+              :span="11"
+              class="bg-white"
+              style="height: 150px"
+            />
+          </el-row>
+          <el-row
+            justify="space-between"
+            style="margin-top: 20px"
+          >
+            <el-col
+              :span="11"
+              class="bg-white"
+              style="height: 150px"
+            />
+            <el-col
+              :span="11"
+              class="bg-white"
+              style="height: 150px"
+            />
+          </el-row>
+          <el-row
+            justify="space-between"
+            style="margin-top: 20px"
+          >
+            <el-col
+              :span="11"
+              class="bg-white"
+              style="height: 150px"
+            />
+            <el-col
+              :span="11"
+              class="bg-white"
+              style="height: 150px"
+            />
+          </el-row>
+        </div>
+      </el-col>
     </el-row>
     <el-drawer
       v-model="listShow"
@@ -259,8 +245,8 @@ 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 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'
@@ -322,6 +308,7 @@ const projectList = (condition) => {
       payment.changePaymentCode(list[0].code)
       queryProjectExpense(list[0].code).then(res => {
         if (res.code === 0) {
+          console.log(res.data)
           payment.changePaymentList(res.data.collection)
         }
       })