[add] -全所收入统计模块的开发

2022-08-01 15:36:20 +08:00
parent f483e9d450
commit d165d428cb
2 changed files with 215 additions and 12 deletions
@@ -0,0 +1,203 @@
+<!--全所收入的统计-->
+<template>
+<div class="whole-payments-statistics">
+  <page-header-title :img-for-icon="IconImg"></page-header-title>
+  <a-card :bordered="false">
+    <!--    查询区域-start -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row>
+
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="确认年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-year-date :allowClear="false" style="width:100%"  placeholder="请选择确认年份" v-model="queryParam.paymentYear"></j-year-date>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery"
+                        v-has="'wholePaymentsStatistics:search'">查询</a-button>
+              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!--    /查询区域-end-->
+    <!--    操作按钮区域-->
+    <div class="table-operator">
+      <a-button type="primary" icon="export" @click="handleExportXls('全所收入统计')"
+                v-has="'wholePaymentsStatistics:export'">导出
+      </a-button>
+    </div>
+    <!--    操作按钮区域-end-->
+
+    <!--    table表格区域-->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="projectId"
+        :columns="columns"
+        :scroll="{x: 1500}"
+        :dataSource="dataSource"
+        :pagination="false"
+        :loading="loading"
+        @change="handleTableChange"
+        class="j-table-force-nowrap main-table">
+
+        <template slot="text" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">{{ text }}</template>
+            <div class="table-text">{{ text }}</div>
+          </a-tooltip>
+        </template>
+
+        <template slot="allMoney" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">{{ formatMoney(text) }}</template>
+            <div class="table-text">{{ formatMoney(text) }}</div>
+          </a-tooltip>
+        </template>
+      </a-table>
+    </div>
+  </a-card>
+
+</div>
+</template>
+
+<script>
+import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
+import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
+import JYearDate from '../../components/jero/JYearDate'
+import {JeroListMixin} from '../../mixins/JeroListMixin'
+import {formatMoney} from '@/utils/formatMoney'
+import {getAction} from '../../api/manage'
+import { MonthData } from './statisticData'
+
+// 对表头进行操作
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 150,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+  // {
+  //   title: '1月',
+  //   align: 'center',
+  //   width: 150,
+  //   dataIndex: 'allMoney',
+  //   sorter: true,
+  //   scopedSlots: {customRender: 'allMoney'}
+  // },
+]
+MonthData.map(tt => {
+  columns.push({
+    title: tt.name,
+    align: 'center',
+    width: 150,
+    dataIndex: tt.key,
+    // sorter: true,
+    scopedSlots: {customRender: 'allMoney'}
+  })
+})
+columns.push({
+  title: '总计',
+  align: 'center',
+  width: 150,
+  dataIndex: 'total',
+  fixed: 'right',
+  scopedSlots: {customRender: 'allMoney'}
+})
+
+export default {
+  name: 'WholePaymentsStatistics',
+  components: {PageHeaderTitle, JYearDate},
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      IconImg,
+      labelCol: {
+        xs: {span: 24},
+        sm: {span: 5}
+      },
+      wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 10}
+      },
+      columns,
+      // 给定当年作为确认收入年份默认查询条件
+      queryParam: {
+        paymentYear: new Date().getFullYear().toString()
+      },
+      lastQueryParam: {
+        paymentYear: new Date().getFullYear().toString()
+      },
+      url: {
+        list: '/statistics/allProjectMoneyStatistics/list',
+        exportXlsUrl: '/statistics/allProjectMoneyStatistics/excel'
+      },
+    }
+  },
+  methods : {
+    formatMoney,
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let dataSource = res.result.list
+          //  讲树形结构的数据 ，修改成table可以直接展示的数据，默认只有三行数据
+          let tableData = [
+            {indexName: '确认收入金额', total: res.result.sumOfConfirmAmount},
+            {indexName: '开票金额', total: res.result.sumOfBillMoney},
+            {indexName: '到账金额', total: res.result.sumOfReallyMoney},
+          ]
+
+          dataSource.map((item, index) => {
+            let keyItem = MonthData.find(ele => Number(ele.value) === (index + 1))
+            if(keyItem) {
+              let key = keyItem.key
+              tableData[0][key] = item.confirmAmount
+              tableData[1][key] = item.billMoney
+              tableData[2][key] = item.comeAllMoney
+            }
+          })
+          this.dataSource = tableData
+
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    searchReset() {
+      this.lastQueryParam = {
+        paymentYear: new Date().getFullYear().toString()
+      }
+      this.queryParam = {
+        paymentYear: new Date().getFullYear().toString()
+      }
+      this.exportSelectedKeys = []
+      this.loadData(1)
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>
@@ -1,14 +1,14 @@
 export const MonthData = [
-  {name: '1月', value: '01'},
-  {name: '2月', value: '02'},
-  {name: '3月', value: '03'},
-  {name: '4月', value: '04'},
-  {name: '5月', value: '05'},
-  {name: '6月', value: '06'},
-  {name: '7月', value: '07'},
-  {name: '8月', value: '08'},
-  {name: '9月', value: '09'},
-  {name: '10月', value: '10'},
-  {name: '11月', value: '11'},
-  {name: '12月', value: '12'},
+  {name: '1月', value: '01', key: 'January'},
+  {name: '2月', value: '02', key: 'February'},
+  {name: '3月', value: '03', key: 'March'},
+  {name: '4月', value: '04', key: 'April'},
+  {name: '5月', value: '05', key: 'May'},
+  {name: '6月', value: '06', key: 'June'},
+  {name: '7月', value: '07', key: 'July'},
+  {name: '8月', value: '08', key: 'August'},
+  {name: '9月', value: '09', key: 'September'},
+  {name: '10月', value: '10', key: 'October'},
+  {name: '11月', value: '11', key: 'November'},
+  {name: '12月', value: '12', key: 'December'},
 ]