【update】-首页应收账款增加图标点击的事件；会议报名详情页增加缴费方式的查询条件

2023-03-14 12:07:24 +08:00
parent 4b255906e6
commit 5255214b63
3 changed files with 441 additions and 5 deletions
@@ -37,7 +37,7 @@
            :scroll="{x: 500}"
            :dataSource="dataSource"
            :pagination="false"
-            class="j-table-force-nowrap main-table">
+            class="j-table-force-nowrap main-table not-receive-table">

            <template slot="text" slot-scope="text">
              <a-tooltip>
@@ -55,6 +55,8 @@
          </a-table>
        </div>
    <!--   表格区域end -->
+    <!--   点击饼状图后显示的模态框-->
+    <not-received-modal ref="notReceivedModal"></not-received-modal>

  </div>
 </template>
@@ -81,6 +83,7 @@ echarts.use([
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
 import {queryDepartTreeList} from '@api/api'
+import NotReceivedModal from './modules/NotReceivedModal'

 const columns = [
  {
@@ -94,6 +97,7 @@ const columns = [

 export default {
  name: 'NotReceivedEcharts',
+  components: { NotReceivedModal },
  data() {
    return {
      activeIndex: 'income',
@@ -193,7 +197,7 @@ export default {
          show: true,
          trigger: 'item',
          formatter: (param) => {
-            console.log(param,'eee')
+            // console.log(param,'eee')
            return `<div>
 <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>
 <span style="color: #999">${param.name}</span>
@@ -247,6 +251,19 @@ export default {
      window.addEventListener('resize', () => {
        myChart.resize()
      })
+      myChart.on('click', this.chartClickFunc)
+    },
+    // echarts 的点击事件
+
+    chartClickFunc(params) {
+      console.log('--------顺序----------', params)
+      // 获取当前点击的饼状图的名字
+      let queryData = {
+        name: params.data.name, // 名字
+        type: params.dataIndex + 1 // 序号
+      }
+      this.$refs.notReceivedModal.show(queryData)
+
    },
    /**
     * 处理表头
@@ -381,20 +398,20 @@ export default {
  font-size: 20px;
 }

-/deep/ .ant-table-thead tr > th {
+/deep/.not-receive-table .ant-table-thead tr > th {
  color: #050525;
  font-weight: bold;
  background: rgb(245, 245, 246);
  border: none;
 }

-/deep/ .ant-table-tbody tr > td {
+/deep/ .not-receive-table .ant-table-tbody tr > td {
  color: rgba(5, 5, 37, 0.8);
  border: none;
  border-bottom: 1px solid rgb(245, 245, 246);
 }

-/deep/ .ant-table-tbody tr > td:first-child {
+/deep/ .not-receive-table .ant-table-tbody tr > td:first-child {
  color: #050525;
  font-weight: bold;
  background: rgb(245, 245, 246);
@@ -0,0 +1,407 @@
+<template>
+  <j-modal
+    :title="seriesName + title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    :footer="null"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="projectId"
+        :columns="columns"
+        :scroll="{x: 1500}"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :class="dataSource.length === 0 ? 'show-scroll' : ''"
+        class="j-table-force-nowrap main-table">
+
+        <!--        项目名称-->
+        <template slot="projectName" slot-scope="text">
+          <a-tooltip>
+            <!--  primary-color" @click="openDetailModal(record)-->
+            <template slot="title">{{ text }}</template>
+            <div class="table-text">{{ text }}</div>
+          </a-tooltip>
+        </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>
+
+        <!--              是否打包-->
+        <template slot="pack" slot-scope="text, record">
+          <status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
+        </template>
+
+        <template slot="footer" v-if="dataSource.length > 0">
+
+          <a-table
+            size="middle"
+            ref="footTable"
+            :rowKey="record => record.id"
+            :columns="columnsFooter"
+            :scroll="{x: 1500}"
+            :dataSource="footerDataSource"
+            :showHeader="false"
+            :pagination="false"
+            class="j-table-force-nowrap footer-table">
+
+            <!--        项目名称-->
+            <template slot="projectName" slot-scope="text">
+            <!--   primary-color @click="openDetailModal(record)"-->
+              <a-tooltip>
+                <template slot="title">{{ text }}</template>
+                <div class="table-text " >{{ text }}</div>
+              </a-tooltip>
+            </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>
+
+          </a-table>
+        </template>
+
+      </a-table>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+
+import { formatMoney } from '../../../utils/formatMoney'
+import { getAction } from '../../../api/manage'
+import {filterObj} from '@/utils/util'
+import StatusSlot from '../../../components/tools/StatusSlot'
+
+
+const defaultTableColumns = [
+  {
+    title: '来款项目',
+    align: 'center',
+    width: 280,
+    dataIndex: 'projectName',
+    scopedSlots: {customRender: 'projectName'}
+  },
+  {
+    title: '项目负责人',
+    align: 'center',
+    width: 150,
+    dataIndex: 'principalName',
+    scopedSlots: {customRender: 'text'}
+  },
+  {
+    title: '所属科室',
+    align: 'center',
+    width: 150,
+    dataIndex: 'depart',
+    scopedSlots: {customRender: 'text'}
+  },
+  {
+    title: '来款单位',
+    align: 'center',
+    width: 300,
+    dataIndex: 'chargeCompanyTemporaryName',
+    scopedSlots: {customRender: 'text'}
+  },
+  {
+    title: '是否打包',
+    align: 'center',
+    width: 100,
+    dataIndex: 'pack',
+    scopedSlots: {customRender: 'pack'}
+  },
+  {
+    title: '年度待确收金额',
+    align: 'center',
+    width: 150,
+    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: 150,
+    sorter: true,
+    dataIndex: 'comeAllMoney',
+    scopedSlots: {customRender: 'allMoney'}
+  },
+
+  {
+    title: '来款用途',
+    align: 'center',
+    dataIndex: 'chargeUse_text',
+    width: 150
+  }
+]
+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: 'NotReceivedModal',
+  components: {
+    StatusSlot
+  },
+  data() {
+    return {
+      title: '详情',
+      seriesName: '',
+      width: 1200,
+      visible: false,
+      confirmLoading: false,
+      // 表格的相关参数
+      columns: [firstColumnTop, ...defaultTableColumns],
+      columnsFooter: [firstColumnFooter, ...defaultTableColumns],
+      footerDataSource: [],
+      url: {
+        list: '/statistics/allProjectStatistics/list'
+      },
+      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
+      queryParam: {
+        year: new Date().getFullYear().toString()
+      },
+      /* 数据源 */
+      dataSource: [],
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30', '50', '100'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      /* 排序参数 */
+      isorter: {
+        column: 'createTime',
+        order: 'desc',
+      },
+      /* table加载状态 */
+      loading: false,
+    }
+  },
+  methods: {
+    /*
+    * 显示模态框
+    * seriesName  名字
+    * type 序号
+    * */
+    show({seriesName, type}) {
+      this.visible = true
+      this.seriesName = seriesName || ''
+      this.queryParam.type = type // 查询的序号
+      this.dataSource = []
+      this.footerDataSource = []
+      this.searchReset()
+    },
+    formatMoney,
+    /**
+     * 同步表与footer滚动，保留底部滚动条
+     */
+    setScroll() {
+      if (this.dataSource.length === 0) {
+        return
+      }
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    },
+    getQueryField() {
+      //TODO 字段权限控制
+      var str = 'id,'
+      if (this.columns && this.columns.length) {
+        this.columns.forEach(function (value) {
+          str += ',' + value.dataIndex
+        })
+      }
+      return str
+    },
+    getQueryParams()  {
+      var param = Object.assign({ }, this.queryParam, this.isorter, this.filters)
+      param.field = this.getQueryField()
+      param.pageNo = this.ipagination.current
+      param.pageSize = this.ipagination.pageSize
+      return filterObj(param)
+    },
+    searchReset() {
+      this.queryParam = {
+        year: new Date().getFullYear().toString()
+      }
+      this.loadData(1)
+    },
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      if (params.hasOwnProperty.call(params, 'allMoney') && params.hasOwnProperty.call(params, 'allMoneyTwo')) {
+        if (Number(params.allMoney) > Number(params.allMoneyTwo)) {
+          this.$message.warn('应收款项范围不正确，请修改')
+          return
+        }
+      }
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          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
+          } 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
+      })
+    },
+    handleOk() {
+      this.visible = false
+    },
+    handleCancel() {
+      this.visible = false
+    }
+  }
+}
+</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>
@@ -204,6 +204,14 @@
                                   dictCode="yn"/>
              </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="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search"
@@ -990,4 +998,8 @@ export default {
    white-space: pre-wrap;
  }
 }
+
+/deep/.flex-width-zero .ant-form-item-control-wrapper {
+  width: 0;
+}
 </style>