[update]-企业端费用办理 模块功能的开发

src/views/standardsAssociation/feehandle/FeeHandle.vue

@@ -1,61 +1,317 @@
 <template>
   <a-card :bordered="false">
-    <a-radio-group v-model="menuValue" @change="changeMenu">
-      <a-radio :style="radioStyle" :value="1">
-        会员缴费
-      </a-radio>
-      <a-radio :style="radioStyle" :value="2">
-        证书缴费
-      </a-radio>
-    </a-radio-group>
-    <div
-      class="charge-notice"
-      @click="handlePreview"
-    >{{
-        newestNoticeInfo.chargeNoticeName
-      }}</div>
-    <!--    会员缴费 begin -->
-    <member-info v-if="menuValue === 1"></member-info>
-    <!--    会员缴费 end -->
+    <div class="charge-notice" @click="handlePreview">{{newestNoticeInfo.chargeNoticeName}}</div>
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="缴费类别">
+              <j-dict-select-tag
+                placeholder="请选择缴费类别"
+                v-model="queryParam.paymentModuleCategory"
+                dictCode="payment_module_category"></j-dict-select-tag>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="缴费状态">
+              <j-dict-select-tag
+                placeholder="请选择缴费状态"
+                v-model="queryParam.paymentStatus"
+                dictCode="certificate_payment_status"/>
+            </a-form-item>
+          </a-col>
+          <template>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="缴费时间">
+                <j-date
+                  date-format="YYYY-MM-DD 00:00:00"
+                  placeholder="请选择开始日期"
+                  class="query-group-cust"
+                  v-model="queryParam.submissionTime_begin"
+                  :disabled-date="disabledStartDate"></j-date>
+                <span class="query-group-split-cust"></span>
+                <j-date
+                  date-format="YYYY-MM-DD 23:59:59"
+                  placeholder="请选择结束日期"
+                  class="query-group-cust"
+                  v-model="queryParam.submissionTime_end"
+                  :disabled-date="disabledEndDate"></j-date>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="缴费方式">
+              <j-dict-select-tag
+                placeholder="请选择缴费方式"
+                v-model="queryParam.paymentMethod"
+                dictCode="payment_method"></j-dict-select-tag>
+            </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">
+              <!-- v-has="'paymentinfo:search'"-->
+              <a-button
+                class="btn btn-primary"
+                type="primary"
+                @click="searchQuery"
+                icon="search">查询</a-button>
+              <a-button
+                type="primary"
+                class="btn btn-primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px;">刷新</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!--查询区域-END -->
 
-    <!--   证书缴费 begin -->
-    <certificate-info v-if="menuValue === 2"></certificate-info>
-      <!--   证书缴费 end -->
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <!--        企业管理员没有操作权限 -->
+      <a-button @click="handleAdd" type="primary" icon="plus" v-if="$store.getters.userInfo.roleCode !== '3'">新增
+      </a-button>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        class="j-table-force-nowrap standard-table"
+        @change="handleTableChange">
+
+        <template slot="text" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">{{ text }}</template>
+            <div class="table-text">{{ text }}</div>
+          </a-tooltip>
+        </template>
+
+        <template slot-scope="text,record" slot="billNumber">
+          {{text}}<span v-if="record.paymentStatus === 0 && !record.paymentRecord " class="color-red">&nbsp;(待上传凭证)</span>
+        </template>
+
+        <div slot="action" class="action-span-cell" slot-scope="text, record">
+          <!-- 会员缴费的相关操作 -->
+          <template v-if="record.paymentModuleCategory === 1">
+            <!-- 管理端上传的缴费 企业端只能上传凭证 -->
+            <template v-if="record.adminAddFlag === 0">
+              <!--已支付显示 撤回-->
+              <a v-show="record.paymentStatus === 1 && $store.getters.userInfo.roleCode !== '3'  "
+                 @click="handleWithdraw(record)">撤回</a>
+              <a v-show="(record.paymentStatus<1 ||record.paymentStatus==2) && $store.getters.userInfo.roleCode !== '3'"
+                 @click="(record.paymentStatus<1 ||record.paymentStatus==2) && handleEdit(record)">编辑</a>
+
+              <a v-show="(record.paymentStatus<1||record.paymentStatus==2) && $store.getters.userInfo.roleCode !== '3'">
+                <a @click="(record.paymentStatus<1||record.paymentStatus==2) && handleDelete(record.id)">删除</a>
+              </a>
+              <a>
+                <a href="javascript:;" @click="handleDetail(record)">查看</a>
+              </a>
+            </template>
+
+            <template v-if="record.adminAddFlag === 1">
+              <!--  待上传的可以上传凭证 -->
+              <a v-show="record.paymentStatus === 4 || record.paymentStatus === 2 " href="javascript:;"
+                 @click="(record.paymentStatus === 4 || record.paymentStatus === 2) && handleUploadRecord(record)">上传凭证</a>
+              <a href="javascript:;" @click="handleDetail(record)">查看</a>
+            </template>
+          </template>
+
+          <!-- 证书缴费的相关操作-->
+          <template v-else>
+            <a v-if="record.paymentStatus === 4 || record.paymentStatus === 2" href="javascript:;" @click="handleCertificateUploadRecord(record)">上传凭证</a>
+            <a @click="handleCertificateDetail(record)">查看</a>
+          </template>
+
+        </div>
+
+      </a-table>
+    </div>
+
+    <!--会员缴费的 模态框 ===开始 ===-->
+    <!--会员缴费-->
+    <paymentInfo-modal ref="modalForm" @ok="modalFormOk"></paymentInfo-modal>
+
+    <!--组合缴费 -->
+    <combination-payment-modal ref="combinationPayment" @ok="modalFormOk"></combination-payment-modal>
+    <!--组合缴费 -->
+
+    <!--      企业端上传 缴费凭证-->
+    <upload-record-modal upload-type="2" ref="uploadRecord" @ok="modalFormOk"></upload-record-modal>
+    <!--      企业端上传 缴费凭证-->
+    <!--会员缴费的 模态框 ===结束 ===-->
+
+
+    <!--证书缴费的 模态框 ===开始 ===-->
+    <certificate-payment-info-modal ref="certificateModalForm" @ok="modalFormOk"></certificate-payment-info-modal>
+    <upload-record-modal upload-type="1" ref="certificateUploadRecord" @ok="modalFormOk"></upload-record-modal>
+    <!--证书缴费的 模态框 ===结束 ===-->
 
   </a-card>
 </template>
 
 <script>
-// import PaymentInfoList from '@views/member/paymentInfo/PaymentInfoList'
-import CertificateInfo from '@views/standardsAssociation/PaymentInfo/CertificateInfo'
-import MemberInfo from '@views/standardsAssociation/PaymentInfo/MemberInfo'
-import {downNewestNotice} from '@api/standardsAssociationApi'
-// import {ACCESS_TOKEN} from '@/store/mutation-types'
-// import Vue from  'vue'
-import {previewPdf} from '@api/standardsAssociationApi'
+
+import '@/assets/less/common.less'
+
+import JDictSelectTag from '@/components/standardsAssociation/JDictSelectTag.vue'
+import JDate from '@/components/tools/JDate.vue'
+import PaymentInfoModal from '../PaymentInfo/modules/PaymentInfoModal'
+import CombinationPaymentModal from '@views/standardsAssociation/PaymentInfo/modules/CombinationPaymentModal'
+import UploadRecordModal from '@views/standardsAssociation/PaymentInfo/modules/UploadRecordModal'
+import CertificatePaymentInfoModal from '../PaymentInfo/modules/CertificatePaymentInfoModal'
+
+import {getAction} from '@/api/memberManage'
+import {filterObj} from '../../../utils/util'
+import {RangeDateMixin} from '@/mixins/RangeDateMixin'
+import {mixinDevice} from '@/utils/mixin'
+import {downNewestNotice, previewPdf , withDrawPayment} from '../../../api/standardsAssociationApi'
+
+const columns = [
+  {
+    title: '序号',
+    dataIndex: '',
+    key: 'rowIndex',
+    width: 60,
+    align: 'center',
+    fixed: 'left',
+    customRender: function(t, r, index) {
+      return parseInt(index) + 1
+    }
+  },
+  {
+    title: '缴费单号',
+    align: 'center',
+    dataIndex: 'billNumber',
+    width: 140,
+    fixed: 'left',
+    scopedSlots: { customRender: 'billNumber' }
+  },
+  {
+    title: '缴费金额',
+    align: 'center',
+    dataIndex: 'paymentAmount',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '缴费状态',
+    align: 'center',
+    dataIndex: 'paymentStatus_dictText',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '缴费类别',
+    align: 'center',
+    dataIndex: 'paymentModuleCategory_dictText',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '缴费时间',
+    align: 'center',
+    dataIndex: 'submissionTime',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '缴费方式',
+    align: 'center',
+    dataIndex: 'paymentMethod_dictText',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '核对时间',
+    align: 'center',
+    dataIndex: 'checkTime',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '关联证书代码',
+    align: 'center',
+    dataIndex: 'code',
+    scopedSlots: { customRender: 'text' }
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    align: 'center',
+    width: 200,
+    scopedSlots: { customRender: 'action' }
+  }
+]
 
 export default {
   name: 'FeeHandle',
+  mixins: [mixinDevice, RangeDateMixin],
   components: {
-    MemberInfo,
-    CertificateInfo
+    JDictSelectTag,
+    JDate,
+    PaymentInfoModal,
+    CombinationPaymentModal,
+    UploadRecordModal,
+    CertificatePaymentInfoModal,
   },
   data() {
     return {
-      menuValue: 1,
+      getAction,
       newestNoticeInfo:{},
-      radioStyle: {
-        display: 'block',
-        height: '30px',
-        lineHeight: '30px',
-
+      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
+      queryParam: {},
+      // 记录上一次查询的条件，防止查询处输入框的数据发生变化，未点击查询按钮，再点击分页的时候数据发生变化
+      lastQueryParam: {},
+      /* 数据源 */
+      dataSource: [],
+      // 表头
+      columns,
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      /* 排序参数 */
+      isorter: {
+        column: 'createTime',
+        order: 'desc'
+      },
+      /* table加载状态 */
+      loading: false,
+      /* table选中keys*/
+      selectedRowKeys: [],
+      /* table选中records*/
+      selectionRows: [],
+      url: {
+        list: '/paymentInfo/list',
+        delete: '/paymentInfo/delete'
+      },
+      dateKeyObj: {
+        beginKey: 'submissionTime_begin',
+        endKey: 'submissionTime_end'
       }
     }
   },
   created() {
     this.getNewestNotice()
+    this.loadData(1)
   },
   methods: {
+    // 预览右上角的文件
     handlePreview() {
       const fileInfo = {
         id: this.newestNoticeInfo.chargeNoticeFileId,
@@ -77,16 +333,137 @@ export default {
         }
       })
     },
+    handleAdd() {
+      this.$refs.combinationPayment.add()
+      this.$refs.combinationPayment.title = '新增'
+      this.$refs.combinationPayment.disableSubmit = false
+    },
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      // 加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      var params = this.getQueryParams()// 查询条件
+      this.loading = true
+      this.getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          this.dataSource = res.result.records
+          this.ipagination.total = res.result.total
+          this.onClearSelected()
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      })
+    },
+    getQueryParams() {
+      // 获取查询条件
+      const sqp = {}
+      const param = Object.assign(sqp, this.lastQueryParam, this.isorter)
+      param.field = this.getQueryField()
+      param.pageNo = this.ipagination.current
+      param.pageSize = this.ipagination.pageSize
+      return filterObj(param)
+    },
+    getQueryField() {
+      // 字段权限控制
+      var str = 'id,'
+      this.columns.forEach(function(value) {
+        str += ',' + value.dataIndex
+      })
+      return str
+    },
+    onClearSelected() {
+      this.selectedRowKeys = []
+      this.selectionRows = []
+    },
+    searchQuery() {
+      this.lastQueryParam = { ...this.queryParam }
+      this.loadData(1)
+    },
+    searchReset() {
+      this.queryParam = {}
+      this.lastQueryParam = {}
+      this.loadData(1)
+    },
+    handleTableChange(pagination, filters, sorter) {
+      // 分页、排序、筛选变化时触发
+      // 筛选
+      if (Object.keys(sorter).length > 0) {
+        this.isorter.column = sorter.field
+        this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
+      }
+      this.ipagination = pagination
+      this.loadData()
+    },
+    modalFormOk() {
+      // 新增/修改 成功时，重载列表
+      this.loadData()
+    },
+    //  会员缴费的操作------开发
     /**
-     * 更换菜单
+     * 撤回会员缴费
      * */
-    changeMenu(e) {
-      console.log(e)
-      this.menuValue = e.target.value
+    handleWithdraw(record) {
+      const that = this
+      this.$confirm({
+        title: '确定撤回',
+        content:'是否撤回该条数据',
+        onOk() {
+          const param = {
+            id: record.id,
+            memberId: record.memberId,
+            paymentStatus: '1'
+          }
+          withDrawPayment(param).then(res => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.loadData()
+            } else {
+              that.$message.warning(res.message)
+            }
+          })
+        }
+      })
+    },
+    // 核对凭证
+    handleCheck: function (record) {
+      this.$refs.modalForm.handleCheck(record)
+      this.$refs.modalForm.title = '核对凭证'
+      this.$refs.modalForm.pageType = 2
+    },
+    // 查看
+    handleDetail: function (record) {
+      this.$refs.modalForm.detail(record)
+      this.$refs.modalForm.title = '查看'
+      this.$refs.modalForm.disableSubmit = true
+      this.$refs.modalForm.pageType = 2
+    },
+    /**
+     * 上传凭证
+     * */
+    handleUploadRecord(record) {
+      this.$refs.uploadRecord.open(record)
+    },
+    //  会员缴费的操作------结束
+
+    handleCertificateUploadRecord(record) {
+      this.$refs.certificateUploadRecord.open(record)
+    },
+    handleCertificateDetail(record) {
+      this.$refs.certificateModalForm.detail(record)
+      this.$refs.certificateModalForm.title = '查看'
+      this.$refs.certificateModalForm.disableSubmit = true
+      this.$refs.certificateModalForm.pageType = 2
     }
   },
   beforeDestroy() {
-    this.menuValue = 1
+
   }
 }
 </script>
@@ -97,11 +474,19 @@ export default {
   color: #219AFF;
   cursor: pointer;
   font-size: 14px;
-  padding: 20px;
-
-  position: absolute;
+  padding: 0 20px 20px;
+  float: right;
+  //position: absolute;
   right: 0;
   top: 0;
 }
+.table-page-search-wrapper {
+  clear: both;
+}
 
+
+/*列表td的padding设置 可以控制列表大小*/
+.standard-table .ant-table-tbody .ant-table-row td .action-span-cell a{
+  padding: 0 10px;
+}
 </style>

src/views/standardsAssociation/feehandle/FeeHandleLast.vue

@@ -0,0 +1,108 @@
+<!--之前的费用办理 已废弃-->
+<template>
+  <a-card :bordered="false">
+    <a-radio-group v-model="menuValue" @change="changeMenu">
+      <a-radio :style="radioStyle" :value="1">
+        会员缴费
+      </a-radio>
+      <a-radio :style="radioStyle" :value="2">
+        证书缴费
+      </a-radio>
+    </a-radio-group>
+    <div
+      class="charge-notice"
+      @click="handlePreview"
+    >{{
+        newestNoticeInfo.chargeNoticeName
+      }}</div>
+    <!--    会员缴费 begin -->
+    <member-info v-if="menuValue === 1"></member-info>
+    <!--    会员缴费 end -->
+
+    <!--   证书缴费 begin -->
+    <certificate-info v-if="menuValue === 2"></certificate-info>
+    <!--   证书缴费 end -->
+
+  </a-card>
+</template>
+
+<script>
+// import PaymentInfoList from '@views/member/paymentInfo/PaymentInfoList'
+import CertificateInfo from '@views/standardsAssociation/PaymentInfo/CertificateInfo'
+import MemberInfo from '@views/standardsAssociation/PaymentInfo/MemberInfo'
+import {downNewestNotice} from '@api/standardsAssociationApi'
+// import {ACCESS_TOKEN} from '@/store/mutation-types'
+// import Vue from  'vue'
+import {previewPdf} from '@api/standardsAssociationApi'
+
+export default {
+  name: 'FeeHandleLast',
+  components: {
+    MemberInfo,
+    CertificateInfo
+  },
+  data() {
+    return {
+      menuValue: 1,
+      newestNoticeInfo:{},
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px',
+
+      }
+    }
+  },
+  created() {
+    this.getNewestNotice()
+  },
+  methods: {
+    handlePreview() {
+      const fileInfo = {
+        id: this.newestNoticeInfo.chargeNoticeFileId,
+        url: `/${this.newestNoticeInfo.chargeNoticeName}`
+      }
+      window.open(previewPdf(fileInfo))
+    },
+    getFileUrl(fileId) {
+      return `${window._CONFIG['domianURL']}/sys/common/download/${fileId}`
+    },
+    /**
+     * 查找最新的缴费通知单
+     * */
+    getNewestNotice() {
+      this.newestNoticeInfo = {}
+      downNewestNotice().then(res => {
+        if (res.success) {
+          this.newestNoticeInfo = Object.assign({}, res.result)
+        }
+      })
+    },
+    /**
+     * 更换菜单
+     * */
+    changeMenu(e) {
+      console.log(e)
+      this.menuValue = e.target.value
+    }
+  },
+  beforeDestroy() {
+    this.menuValue = 1
+  }
+}
+</script>
+
+<style scoped lang="less">
+.charge-notice {
+  display: inline-block;
+  color: #219AFF;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 20px;
+
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+</style>