【update】-统计模块-会议打包统计前端页面的增加

2023-12-25 18:02:19 +08:00
parent 3ed81474e2
commit 28d3d55467
1 changed files with 419 additions and 0 deletions
@@ -0,0 +1,419 @@
+<!--会议打包统计-->
+<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="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="来款单位">
+              <a-input placeholder="请输入来款单位" v-model="queryParam.companyName" :maxLength='50'></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="确认年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-year-date style="width:100%" placeholder="请选择确认年份" v-model="queryParam.paymentYear"></j-year-date>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24" class="flex-width-zero">
+            <a-form-item label="来款方式">
+              <j-dict-select-tag
+                v-model="queryParam.payMode"
+                placeholder="请选择来款方式"
+                dictCode="meeting_pay_type"/>
+            </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="'meetingPackStatistics: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="'meetingPackStatistics:export'">导出
+      </a-button>
+    </div>
+    <!--    操作按钮区域-end-->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :scroll="{x: 1100}"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange"
+        :class="dataSource.length === 0 ? 'show-scroll' : ''"
+        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>
+
+        <template slot="footer" v-if="dataSource.length > 0">
+
+          <a-table
+            size="middle"
+            ref="footTable"
+            rowKey="id"
+            :columns="columnsFooter"
+            :scroll="{x: 1100}"
+            :dataSource="footerDataSource"
+            :showHeader="false"
+            :pagination="false"
+            class="j-table-force-nowrap footer-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>
+        </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 {formatMoney} from '@/utils/formatMoney'
+import { MonthData } from './statisticData'
+
+const defaultTableColumns = [
+  {
+    title: '会议名称',
+    align: 'center',
+    width: 160,
+    dataIndex: 'meetingName',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '会议类型',
+    align: 'center',
+    width: 100,
+    dataIndex: 'meetingType_dictText',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '来款单位',
+    align: 'center',
+    width: 180,
+    dataIndex: 'companyName',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '参会人员',
+    align: 'center',
+    width: 160,
+    dataIndex: 'companyContactName',
+    scopedSlots: { customRender: 'projectName' }
+  },
+  {
+    title: '年度待确收金额',
+    align: 'center',
+    width: 140,
+    dataIndex: 'allMoney',
+    sorter: true,
+    scopedSlots: {customRender: 'allMoney'}
+  },
+  {
+    title: '确认收入金额',
+    align: 'center',
+    width: 150,
+    sorter: true,
+    dataIndex: 'confirmAmount',
+    scopedSlots: { customRender: 'allMoney' }
+  },
+  {
+    title: '开票金额',
+    align: 'center',
+    width: 150,
+    sorter: true,
+    dataIndex: 'billMoney',
+    scopedSlots: { customRender: 'allMoney' }
+  },
+  {
+    title: '到账金额',
+    align: 'center',
+    width: 140,
+    dataIndex: 'comeAllMoney',
+    sorter: true,
+    scopedSlots: {customRender: 'allMoney'}
+  }
+]
+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
+}
+
+export default {
+  name: 'MeetingPackStatistics',
+  components: { PageHeaderTitle, JYearDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      MonthData,
+      IconImg,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      columns: [firstColumnTop, ...defaultTableColumns],
+      columnsFooter: [firstColumnFooter, ...defaultTableColumns],
+      footerDataSource: [],
+      // 给定当年作为来款年份默认查询条件
+      queryParam: {
+        paymentYear: new Date().getFullYear().toString(),
+        payMode: 3 // 缴费方式-默认打包
+      },
+      lastQueryParam: {
+        paymentYear: new Date().getFullYear().toString(),
+        payMode: 3 // 缴费方式-默认打包
+      },
+      // todo 需要替换掉
+      url: {
+        list: '/statistics/principalPeople/list',
+        exportXlsUrl: '/statistics/principalPeople/excel'
+      }
+    }
+  },
+  created() {
+    this.queryParam.payMode = 3 // 默认是打包
+  },
+  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
+      )
+    },
+    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) {
+          this.dataSource = res.result.pageList.records
+          // this.dataSource = res.result.pageList.records
+          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' + ''
+          }
+          this.footerDataSource = [obj]
+          if (res.result.pageList.total) {
+            this.ipagination.total = res.result.pageList.total
+            //清空列表选中
+            this.onClearSelected()
+          } 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
+      })
+    },
+    searchReset() {
+      this.lastQueryParam = {
+        paymentYear: new Date().getFullYear().toString(),
+        payMode: 3 // 缴费方式-默认打包
+      }
+      this.queryParam = {
+        paymentYear: new Date().getFullYear().toString(),
+        payMode: 3 // 缴费方式-默认打包
+      }
+      this.loadData(1)
+    },
+    /**
+     * 搜索金额校验
+     * @param type 起始范围--start，终止范围--end
+     */
+    checkMoney(type) {
+      if (type === 'start') {
+        this.queryParam.allMoney = this.queryParam.allMoney.replace(/[^0-9.]/g, '')
+        let pointIndex = this.queryParam.allMoney.indexOf('.')
+        // 包含小数点，保留小数点后两位
+        if (pointIndex > -1) {
+          this.queryParam.allMoney = this.queryParam.allMoney.substr(0, pointIndex + 3)
+          // 截取整数部分
+          let str = this.queryParam.allMoney.slice(0, pointIndex)
+          // 整数部分大于十位则去掉十位之后的整数部门，并将小数部分拼接
+          if (str.length > 10) {
+            str = str.substr(0, 10)
+            this.queryParam.allMoney = str + this.queryParam.allMoney.substr(pointIndex, 3)
+          }
+        }
+        // 不包含小数点且输入数字超过十位保留前十位数据
+        if (pointIndex === -1 && this.queryParam.allMoney.length > 10) {
+          this.queryParam.allMoney = this.queryParam.allMoney.substr(0, 10)
+        }
+        return
+      }
+      if (type === 'end') {
+        this.queryParam.allMoneyTwo = this.queryParam.allMoneyTwo.replace(/[^0-9.]/g, '')
+        let pointIndex = this.queryParam.allMoneyTwo.indexOf('.')
+        // 包含小数点，保留小数点后两位
+        if (pointIndex > -1) {
+          this.queryParam.allMoneyTwo = this.queryParam.allMoneyTwo.substr(0, pointIndex + 3)
+          // 截取整数部分
+          let str = this.queryParam.allMoneyTwo.slice(0, pointIndex)
+          // 整数部分大于十位则去掉十位之后的整数部门，并将小数部分拼接
+          if (str.length > 10) {
+            str = str.substr(0, 10)
+            this.queryParam.allMoneyTwo = str + this.queryParam.allMoneyTwo.substr(pointIndex, 3)
+          }
+        }
+        // 不包含小数点且输入数字超过十位保留前十位数据
+        if (pointIndex === -1 && this.queryParam.allMoneyTwo.length > 10) {
+          this.queryParam.allMoneyTwo = this.queryParam.allMoneyTwo.substr(0, 10)
+        }
+        return
+      }
+    },
+    // 确认年份 年份选择器改变的事件
+    paymentYearChange() {
+      if(!this.queryParam.paymentYear) {
+        this.queryParam.paymentMonth = undefined
+      }
+    }
+  }
+}
+</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>