【update】-新增企业来款分类统计-待联调

2024-07-05 15:03:30 +08:00
parent 001689e93d
commit cbcdc87e2c
1 changed files with 432 additions and 0 deletions
@@ -0,0 +1,432 @@
+<!--企业来款分类统计-->
+<template>
+  <div>
+    <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="10" :lg="8" :md="8" :sm="24">
+              <a-form-item label="来款企业" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom: -1px">
+                <company-select isMultiple :can-add="false" placeholder="请选择来款企业"
+                                v-model="queryParam.chargeCompany"></company-select>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="项目年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date class="query-group-cust" placeholder="请选择开始年份" v-model="queryParam.year_begin" :disabled-date="disabledStartDate"></j-year-date>
+                <span class="query-group-split-cust"></span>
+                <j-year-date class="query-group-cust" placeholder="请选择结束年份" v-model="queryParam.year_end" :disabled-date="disabledEndDate"></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="'companyPaymentClassificationStatistics: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="'companyPaymentClassificationStatistics:export'">导出
+        </a-button>
+      </div>
+      <!--    操作按钮区域-end-->
+
+      <!--    table表格区域-->
+      <div>
+        <a-table
+          size="middle"
+          ref="table"
+          bordered
+          rowKey="chargeCompanyId"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{x: 1000}"
+          @change="handleTableChange"
+          :class="dataSource.length === 0 ? 'show-scroll' : ''"
+          class="j-table-force-nowrap main-table">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color"
+                        @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+          <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>
+
+          <!--<span slot="action" class="action-span-cell" slot-scope="text, record">-->
+          <!--      <a @click="goDetail(record)" v-has="'companyPaymentClassificationStatistics:detail'">详情</a>-->
+          <!--</span>-->
+
+          <template slot="footer" v-if="dataSource.length > 0">
+
+            <a-table
+              size="middle"
+              ref="footTable"
+              rowKey="id"
+              :columns="columnsFooter"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              :scroll="{x: 1000}"
+              class="j-table-force-nowrap footer-table">
+
+              <!--        项目名称-->
+              <template slot="projectName" slot-scope="text, record">
+                <j-ellipsis :value="text" :length="18" class="primary-color"
+                            @click="openDetailModal(record)"></j-ellipsis>
+              </template>
+
+              <template slot="text" slot-scope="text">
+                <j-ellipsis :value="text" :length="18"></j-ellipsis>
+              </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>
+          </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 { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+import { getAction } from '@api/manage'
+import CompanySelect from '@comp/company/CompanySelect'
+import { filterObj } from '../../../utils/util'
+import {formatMoney} from '@/utils/formatMoney'
+import { MonthData } from '../statisticData'
+import { RangeDateMixin } from '../../../mixins/RangeDateMixin'
+
+const defaultTableColumns = [
+  {
+    title: '来款企业',
+    align: 'center',
+    width: 160,
+    dataIndex: 'chargeCompanyName',
+    scopedSlots: { customRender: 'text' }
+  },
+  // {
+  //   title: '年度待确收金额',
+  //   align: 'center',
+  //   width: 160,
+  //   sorter: true,
+  //   dataIndex: 'allMoney',
+  //   scopedSlots: { customRender: 'allMoney' }
+  // },
+  // {
+  //   title: '操作',
+  //   dataIndex: 'action',
+  //   align: 'center',
+  //   fixed: 'right',
+  //   width: 160,
+  //   scopedSlots: { customRender: 'action' }
+  // }
+]
+const firstColumnTop =   {
+  title: '序号',
+  dataIndex: '',
+  key: 'rowIndex',
+  width: 60,
+  align: 'center',
+  customRender: function (t, r, index) {
+    return parseInt(index) + 1
+  }
+}
+
+const firstColumnFooter = {
+  title: '序号',
+  dataIndex: 'title',
+  align: 'center',
+  width: 60
+}
+// 统计的项目分类
+const projectCategory = [
+  { name: '工作组', key: 'workGroup' },
+  { name: '项目合作', key: 'generalProject' },
+  { name: '会议费', key: 'meeting' },
+  { name: '会员费', key: 'member' }
+]
+
+export default {
+  name: 'EnterprisePaymentStatisticsList',
+  components: { PageHeaderTitle, JYearDate, CompanySelect },
+  mixins: [JeroListMixin, RangeDateMixin],
+  data() {
+    return {
+      MonthData,
+      IconImg,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: '/statistics/companyComeMoney/list',
+        exportXlsUrl: '/statistics/companyComeMoney/excel'
+      },
+      columns: [firstColumnTop, ...defaultTableColumns],
+      // 总计表头，与主表表头一致
+      columnsFooter: [firstColumnFooter, ...defaultTableColumns],
+      // 总计数据
+      footerDataSource: [],
+      // 给定当年作为来款年份默认查询条件
+      queryParam: {
+        year_begin: new Date().getFullYear().toString(),
+        year_end: new Date().getFullYear().toString()
+      },
+      lastQueryParam: {
+        year_begin: new Date().getFullYear().toString(),
+        year_end: new Date().getFullYear().toString()
+      },
+      // 混入中方法重写
+      dateKeyObj: {
+        beginKey: 'year_begin',
+        endKey: 'year_end'
+      },
+      rangeDateFormat: {
+        begin: 'YYYY',
+        end: 'YYYY'
+      }
+    }
+  },
+  mounted() {
+    this.setScroll()
+  },
+  methods: {
+    formatMoney,
+    // 同步表与footer滚动，保留底部滚动条
+    setScroll() {
+      if (this.dataSource.length === 0) {
+        return
+      }
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    },
+    getQueryParams() {
+      //获取查询条件
+      let sqp = {}
+      if (this.superQueryParams) {
+        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
+        sqp['superQueryMatchType'] = this.superQueryMatchType
+      }
+      // var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
+      let param = Object.assign(sqp, this.lastQueryParam, this.isorter, this.filters)
+      param.field = this.getQueryField()
+      param.pageNo = this.ipagination.current
+      param.pageSize = this.ipagination.pageSize
+      // 获取企业id作为查询参数
+      if (param.chargeCompany && param.chargeCompany.hasOwnProperty.call(param.chargeCompany, 'id')) {
+        param.chargeCompanyId = param.chargeCompany.id
+        // 将企业信息对象从查询参数中去掉
+        delete param.chargeCompany
+      }
+      return filterObj(param)
+    },
+    // 获取查询的列数
+    getColumnsData() {
+      let keys = [], columnsObj = []
+      for(let i = this.lastQueryParam.year_begin; i <= this.lastQueryParam.year_end; i++) {
+        keys.push(i)
+        let item =   {
+          title: i + '年度待确收金额',
+          align: 'center',
+          width: 160,
+          // sorter: true,
+          dataIndex: i + '_' + 'allMoney',
+          scopedSlots: { customRender: 'allMoney' }
+        }
+        columnsObj.push(item)
+      }
+      keys.map(year => {
+        projectCategory.map(cate => {
+          let item =   {
+            title: `${year}年度-${cate.name}-待确收金额`,
+            align: 'center',
+            width: 160,
+            // sorter: true,
+            dataIndex: year + '_' + cate.key + '_' + 'allMoney',
+            scopedSlots: { customRender: 'allMoney' }
+          }
+          columnsObj.push(item)
+        })
+      })
+      return columnsObj
+    },
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      console.log(params)
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          // todo 处理TableColumns 的数据 先本地生成
+          // let columnsKeys = res.result.columns || []
+          let syncColumns = this.getColumnsData()
+          this.columns = [firstColumnTop, ...defaultTableColumns, ...syncColumns]
+          this.columnsFooter = [firstColumnFooter, ...defaultTableColumns, ...syncColumns]
+          // this.dataSource = res.result.pageList.records
+          // 表格数据
+          this.dataSource = res.result.pageList.records || []
+          this.dataSource.map(data => {
+            syncColumns.map(col => {
+              data[col.dataIndex] = data.allMoney || '0.00' + ''
+            })
+          })
+          // todo 操作汇总表格的数据
+          let footerData = res.result.footerData || res.result || {}
+          let obj = {
+            id: '1',
+            title: '总计'
+            // allMoney: res.result.sumOfMoney || '0.00' + '',
+            // comeAllMoney: res.result.sumOfReallyMoney || '0.00' + '',
+            // billMoney: res.result.sumOfBillMoney || '0.00' + '',
+            // confirmAmount: res.result.sumOfConfirmAmount || '0.00' + ''
+          }
+          syncColumns.map(col => {
+            obj[col.dataIndex] = footerData[col.dataIndex] || '0.00' + ''
+          })
+          this.footerDataSource = [obj]
+          if (res.result.pageList.total) {
+            this.ipagination.total = res.result.pageList.total
+          } else {
+            this.ipagination.total = 0
+          }
+        }
+        if (this.dataSource.length > 0) {
+          this.$nextTick(() => {
+            this.setScroll()
+          })
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    searchQuery() {
+      if(!this.queryParam.year_begin || !this.queryParam.year_end) {
+        this.$message.warning('请选择项目年份时间段')
+        return
+      }
+      this.lastQueryParam = {...this.queryParam}
+      this.loadData(1)
+    },
+    searchReset() {
+      this.lastQueryParam = {
+        year_begin: new Date().getFullYear().toString(),
+        year_end: new Date().getFullYear().toString()
+      }
+      this.queryParam = {
+        year_begin: new Date().getFullYear().toString(),
+        year_end: new Date().getFullYear().toString()
+      }
+      this.loadData(1)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
+
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
+}
+
+.show-scroll {
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+    background-color: #F5F5F5;
+  }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
+}
+
+</style>