收支分析

web/.env.development

@@ -4,11 +4,11 @@ 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://106.52.134.22
+VITE_BASE_PATH = http://106.52.134.22

web/src/api/finance.js

@@ -30,7 +30,7 @@ export const queryWorkingHoursSum = (data) => {
     data
   })
 }
-
+// 查询费用类型
 export const queryExpensesGenre = () => {
   return service({
     url: '/finance/queryExpensesGenre',

web/src/api/reimbursement.js

@@ -12,8 +12,8 @@ export const queryReimburse = (code) => {
 // 新增报销记录
 export const createReimburse = (data) => {
   return service({
-    url: '/project/queryReimbursement',
-    method: 'get',
+    url: '/project/createReimbursement',
+    method: 'post',
     data: data
   })
 }

web/src/pinia/code/code.js

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

web/src/pinia/reimbursement/Reimbursement.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { createReimburse, updateReimburse, deleteReimburse, retrievalReimburse } from '@/api/reimbursement'
+import { updateReimburse, deleteReimburse, retrievalReimburse } from '@/api/reimbursement'
 import { reactive, ref } from 'vue'
 
 export const reimburseOperate = defineStore('account', () => {
@@ -9,17 +9,10 @@ export const reimburseOperate = defineStore('account', () => {
   // 定义修改数据的方法
   const getReimburseList = (data) => {
     retrievalReimburse(data).then(res => {
+      console.log(res)
       if (res.code === 0) {
         reimburseList.length = 0
-        reimburseList.push(...res.data)
-        console.log(reimburseList)
-      }
-    })
-  }
-  const postReimburse = (data) => {
-    createReimburse(data).then(res => {
-      if (res.code === 0) {
-        console.log(res.data)
+        reimburseList.push(...res.data.list)
       }
     })
   }
@@ -48,7 +41,6 @@ export const reimburseOperate = defineStore('account', () => {
     reimburseList,
     reimburseTotal,
     getReimburseList,
-    postReimburse,
     putReimburse,
     delReimburse,
     changeReimburseList,

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

@@ -120,14 +120,14 @@
         </el-row>
       </el-col>
     </el-row>
-    <el-dialog
+    <el-drawer
       v-model="reimburseAddShow"
-      width="40%"
       title="新增报销记录"
+      size="40%"
     >
       <el-form
         label-position="left"
-        label-width="90"
+        label-width="100"
         class="mt-5"
       >
         <el-form-item
@@ -137,27 +137,37 @@
             v-model="createData.applicant"
             placeholder="请输入申请人名称"
             clearable
+            @clear="createData.applicant = ''"
           />
         </el-form-item>
         <el-form-item
           label="报销日期："
         >
           <el-date-picker
-            v-model="createData.applicantTime"
+            v-model="createData.applicationTime"
             placeholder="请选择报销日期"
             format="YYYY-MM-DD"
             value-format="YYYY-MM-DD"
             clearable
+            @clear="createData.applicationTime = ''"
           />
         </el-form-item>
         <el-form-item
           label="审批人："
         >
-          <el-input
+          <el-select
             v-model="createData.approval"
-            placeholder="请输入审批人名称"
+            placeholder="请选择审批人"
             clearable
-          />
+            @clear="createData.approval = ''"
+          >
+            <el-option
+              v-for="item in userList"
+              :key="item.ID"
+              :label="item.nickName"
+              :value="item.ID"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item
           label="费用类型："
@@ -166,52 +176,218 @@
             v-model="createData.genre"
             placeholder="请选择费用类型"
             clearable
-          />
+            @clear="createData.genre = ''"
+          >
+            <el-option
+              v-for="item in costList"
+              :key="item.ID"
+              :label="item.name"
+              :value="item.ID"
+            />
+          </el-select>
         </el-form-item>
+        <el-row
+          v-for="(item,index) in reimburseItem"
+          :key="index"
+        >
+          <el-col :span="12">
+            <el-form-item
+              label="报销金额："
+            >
+              <el-input-number
+                v-model="item.price"
+                placeholder="请输入报销金额"
+                clearable
+                size="large"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="报销备注："
+            >
+              <el-input
+                v-model="item.remarks"
+                placeholder="请输入报销备注"
+                type="textarea"
+                maxlength="150"
+                show-word-limit
+                clearable
+                size="large"
+                @clear="item.remarks = ''"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            v-show="reimburseItem.length > 1"
+            size="large"
+            @click="reimburseItem.splice(reimburseItem.length - 1,1)"
+          >
+            删除报销详情
+          </el-button>
+          <el-button
+            size="large"
+            @click="addFeeDetails"
+          >
+            添加报销详情
+          </el-button>
+          <el-button
+            type="primary"
+            size="large"
+            @click="addReimburse"
+          >
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+    <el-drawer
+      v-model="reimburseEditShow"
+      title="新增报销记录"
+      size="40%"
+    >
+      <el-form
+        label-position="left"
+        label-width="100"
+        class="mt-5"
+      >
         <el-form-item
-          label="报销金额："
+          label="申请人："
         >
           <el-input
-            v-model="amount"
-            placeholder="请输入报销金额"
+            v-model="createData.applicant"
+            placeholder="请输入申请人名称"
             clearable
+            @clear="createData.applicant = ''"
           />
         </el-form-item>
         <el-form-item
-          label="报销备注："
+          label="报销日期："
         >
-          <el-input
-            v-model="createData.feeDetails.remarks"
-            placeholder="请输入报销备注"
-            type="textarea"
-            maxlength="150"
-            show-word-limit
+          <el-date-picker
+            v-model="createData.applicationTime"
+            placeholder="请选择报销日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
             clearable
+            @clear="createData.applicationTime = ''"
           />
         </el-form-item>
+        <el-form-item
+          label="审批人："
+        >
+          <el-select
+            v-model="editData.approval"
+            placeholder="请选择审批人"
+            clearable
+            @clear="editData.approval = ''"
+          >
+            <el-option
+              v-for="item in userList"
+              :key="item.ID"
+              :label="item.nickName"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="费用类型："
+        >
+          <el-select
+            v-model="editData.genre"
+            placeholder="请选择费用类型"
+            clearable
+            @clear="editData.genre = ''"
+          >
+            <el-option
+              v-for="item in costList"
+              :key="item.ID"
+              :label="item.name"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-row
+          v-for="(item,index) in reimburseItem"
+          :key="index"
+        >
+          <el-col :span="12">
+            <el-form-item
+              label="报销金额："
+            >
+              <el-input-number
+                v-model="item.price"
+                placeholder="请输入报销金额"
+                clearable
+                size="large"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="报销备注："
+            >
+              <el-input
+                v-model="item.remarks"
+                placeholder="请输入报销备注"
+                type="textarea"
+                maxlength="150"
+                show-word-limit
+                clearable
+                size="large"
+                @clear="item.remarks = ''"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
+          <el-button
+            v-show="reimburseItem.length > 1"
+            size="large"
+            @click="reimburseItem.splice(reimburseItem.length - 1,1)"
+          >
+            删除报销详情
+          </el-button>
+          <el-button
+            size="large"
+            @click="addFeeDetails"
+          >
+            添加报销详情
+          </el-button>
           <el-button
             type="primary"
             size="large"
-            @click="createReimburse"
+            @click="addReimburse"
           >
             确定
           </el-button>
         </div>
       </template>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
 <script setup>
 import { Search, Delete, Edit, Notebook, Plus } from '@element-plus/icons-vue'
-import { reactive, ref } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { reimburseOperate } from '@/pinia/reimbursement/Reimbursement'
+import { codeOperate } from '@/pinia/code/code'
+import { queryExpensesGenre } from '@/api/finance'
+import { getAllUsers } from '@/api/user'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { createReimburse, deleteReimburse } from '@/api/reimbursement'
 defineOptions({
   name: 'Reimburse'
 })
+// pinia
+const submit = reimburseOperate()
+const serial = codeOperate()
 // 数据
 const reimburseAddShow = ref(false)
 const condition = reactive({
@@ -224,30 +400,128 @@ const condition = reactive({
   time: ''
 })
 const createData = reactive({
-  applicant: '',
-  applicantTime: '',
+  projectCode: '',
+  applicant: '张三',
+  applicationTime: '',
   approval: '',
   price: 0,
   genre: '',
-  feeDetails: {
-    remarks: '',
-    price: 0
-  }
+  feeDetails: []
 })
-const amount = ref('')
-const submit = reimburseOperate()
+const editData = reactive({
+  projectCode: '',
+  applicant: '张三',
+  applicationTime: '',
+  approval: '',
+  price: 0,
+  genre: '',
+  feeDetails: []
+})
+const reimburseEditShow = ref(false)
+const costList = reactive([])
+const userList = reactive([])
+const reimburseItem = reactive([{
+  remarks: '',
+  price: 0
+}])
+// const overall = ref(0)
 // 方法
-const searchReimburse = () => {}
+onMounted(() => {
+  queryExpensesGenre().then(res => {
+    if (res.code === 0) {
+      costList.push(...res.data)
+    }
+  })
+  getAllUsers().then(res => {
+    if (res.code === 0) {
+      userList.length = 0
+      userList.push(...res.data)
+    }
+  })
+})
+const searchReimburse = () => {
+  condition.code = serial.currentCode
+  submit.getReimburseList(condition)
+}
 const openReimburseEdit = (row) => {
   console.log(row)
 }
 const reimburseDelete = (row) => {
-  console.log(row)
+  ElMessageBox.confirm(
+    '确定要删除该报销记录吗?',
+    '删除记录',
+    {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const id = { id: row.ID }
+      deleteReimburse(id).then(res => {
+        if (res.code === 0) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success',
+            showClose: true,
+            duration: 2000
+          })
+          refreshList()
+        }
+      })
+    }).catch(() => {})
 }
 const changeReimbursePage = (value) => {
   console.log(value)
 }
-const createReimburse = () => {}
+const addReimburse = () => {
+  const data = createData
+  const sum = ref(0)
+  // 报销详情
+  data.feeDetails = reimburseItem
+  // // 报销总金额
+  reimburseItem.forEach(item => {
+    sum.value += item.price
+  })
+  data.price = sum.value
+  data.projectCode = serial.currentCode
+  console.log(data)
+  for (const i in data) {
+    if (data[i] === '' || data[i] === 0) {
+      ElMessage({
+        message: '请将信息填写完整',
+        type: 'error',
+        showClose: true,
+        duration: 3000
+      })
+      return
+    }
+  }
+  createReimburse(data).then(res => {
+    if (res.code === 0) {
+      ElMessage({
+        message: '添加成功',
+        type: 'success',
+        showClose: true,
+        duration: 2000
+      })
+      reimburseAddShow.value = false
+      refreshList()
+    }
+  })
+}
+
+const refreshList = () => {
+  const refresh = condition
+  refresh.code = serial.currentCode
+  submit.getReimburseList(refresh)
+}
+const addFeeDetails = () => {
+  reimburseItem.push({
+    remarks: '',
+    price: 0
+  })
+}
 </script>
 
 <style scoped>

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

@@ -316,7 +316,6 @@ const projectList = (condition) => {
       symbol.changeCode(list[0].code)
       queryProjectExpense(list[0].code).then(res => {
         if (res.code === 0) {
-          console.log(res.data)
           const summaryData = res.data
           payment.changePaymentList(summaryData.collection)
           payment.changePaymentTotal(summaryData.collectionTotal)