[update]-企业端增加标协会员-基本信息、会员管理 前端页面

src/views/standardsAssociation/MemberManagement.vue

@@ -1,13 +1,386 @@
+<!--企业端的会员管理的相关信息 -->
 <template>
-  <div>会员管理</div>
+  <div class='main-box'>
+    <a-card :bordered="false">
+      <!--企业端-编辑框-->
+      <div>
+        <a-spin :spinning="confirmLoading">
+          <a-form :form="form">
+            <!--会员表头信息-->
+            <a-row :span="24">
+              <a-col :span="6">
+                <a-form-item label="会员编号" :labelCol="labelColTopInfo" :wrapperCol="wrapperColTopInfo">
+                  <label v-text="memberInfo.memberNo"></label>
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="注册时间" :labelCol="labelColTopInfo" :wrapperCol="wrapperColTopInfo">
+                  <label v-text="memberInfo.registerTime"></label>
+                </a-form-item>
+              </a-col>
+              <!-- 会员性质 会员回显 管理员为下拉框-->
+              <a-col :span="6">
+                <a-form-item label="会员性质" :labelCol="labelColTopInfo" :wrapperCol="wrapperColTopInfo">
+                  <label v-text="memberNature"></label>
+                </a-form-item>
+              </a-col>
+              <!--  会员单位 --显示批复文号 的相关信息-->
+              <a-col :span="6" v-if="memberInfo.memberStatus === 3 ">
+                <a-form-item label="会员批复文件" :labelCol="labelColTopInfo" :wrapperCol="wrapperColTopInfo">
+                  <!--                      如果当前没有批复文号 不显示 会员批复文件-->
+                  <span  v-if="currentApproval" class="approveFile" @click="uploadApproveFile(memberInfo)">会员批复文件.pdf</span>
+                </a-form-item>
+              </a-col>
+
+            </a-row>
+            <a-row :span="24">
+              <a-col :span='6'>
+                <a-form-item label='会员状态' :labelCol='labelColTopInfo' :wrapperCol='wrapperColTopInfo'>
+                <span
+                  data-v-fd11489c=''
+                  class='ant-tag ant-tag-yellow'
+                  v-if='memberInfo.memberStatus === 1'>待审核</span>
+                  <span data-v-fd11489c='' class='ant-tag ant-tag-blue' v-if='memberInfo.memberStatus === 2'>未缴费</span>
+                  <span
+                    data-v-fd11489c=''
+                    class='ant-tag ant-tag-green'
+                    v-if='memberInfo.memberStatus === 3'>已缴费</span>
+                  <span
+                    data-v-fd11489c=''
+                    class='ant-tag ant-tag-gray'
+                    v-if='memberInfo.memberStatus === 4'>会员已过期</span>
+                  <span class='red'>会员还剩<b>{{ remainingTime }}</b>天</span>
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="会员生效日期" :labelCol="labelColTopInfo" :wrapperCol="wrapperColTopInfo">
+                  <label>{{ memberInfo.validDate ? memberInfo.validDate.split('~')[0] : '' }}</label>
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <a-form-item label="会员失效日期" :labelCol="labelColTopInfo" :wrapperCol="wrapperColTopInfo">
+                  <label>{{ memberInfo.validDate ? memberInfo.validDate.split('~')[1] : '' }}</label>
+                </a-form-item>
+              </a-col>
+              <!--                副理事会长才显示推荐表-->
+              <a-col :span="6" v-if="memberInfo.memberNature === 1 ">
+                <a-form-item label="推荐表"  :labelCol="labelColTopInfo" :wrapperCol="wrapperColTopInfo">
+                  <span class="approveFile" @click="downRecommendWord(memberInfo.recommendWordId)">{{ memberInfo.recommendWordName }}</span>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <div>
+              <div class="row clearfix">
+                <div class="col-md-12 column">
+                  <a-tabs @change="switchNav" :animated='false'>
+                    <a-tab-pane key="1" tab="会员信息">
+                      <member-info v-if='navIndex === 1' ref='memberInfoDom' :member-info='memberInfo'></member-info>
+                    </a-tab-pane>
+                    <a-tab-pane key="2" tab="缴费记录">
+                      <payment-info v-if='navIndex === 2' ref='paymentInfo' :member-info='memberInfo'></payment-info>
+                    </a-tab-pane>
+                    <a-tab-pane key="3" tab="证书记录">
+                      <certificate-info v-if='navIndex === 3' ref='certificateInfo' :member-info='memberInfo'></certificate-info>
+                    </a-tab-pane>
+                    <a-tab-pane key="4" tab="单位名称变更记录">
+                      <company-name-apply-record v-if='navIndex === 4' ref='companyNameApplyRecord' :member-info='memberInfo'></company-name-apply-record>
+                    </a-tab-pane>
+                    <a-tab-pane key="5" tab="资源下载记录">
+                      <download-record v-if='navIndex === 5' ref='downloadRecord' :member-info='memberInfo'></download-record>
+                    </a-tab-pane>
+                  </a-tabs>
+                </div>
+              </div>
+            </div>
+          </a-form>
+          <div class="center">
+            <template v-if="navIndex === 1">
+              <a-button type="primary" @click="handleOk">确定</a-button>
+              <a-button style="margin-left: 10px;" class="mt-10" @click="handleCancel">取消</a-button>
+            </template>
+          </div>
+        </a-spin>
+      </div>
+    </a-card>
+  </div>
 </template>
 
 <script>
+// eslint-disable-next-line no-unused-vars
+import { getAction, getFileAccessHttpUrl, httpAction, downloadFile } from '@api/memberManage'
+import { queryApprovalNo, getEncryptedString } from '../../api/standardsAssociationApi'
+import Vue from 'vue'
+import { USER_INFO } from '@/store/mutation-types'
+import { JSEncrypt } from 'jsencrypt'
+// 会员的基础信息
+import MemberInfo from './memberInfo/MemberInfo'
+// 缴费信息
+import PaymentInfo from './memberInfo/PaymentInfo'
+// 证书记录的相关信息
+import CertificateInfo from './memberInfo/CertificateInfo'
+// 单位名称变更记录
+import CompanyNameApplyRecord from './memberInfo/CompanyNameApplyRecord'
+// 资源下载记录
+import DownloadRecord from './memberInfo/DownloadRecord'
+
 export default {
-  name: 'MemberManagement'
+  name: 'MemberManagement',
+  components: {
+    MemberInfo,
+    PaymentInfo,
+    CertificateInfo,
+    CompanyNameApplyRecord,
+    DownloadRecord
+  },
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      userId: Vue.ls.get(USER_INFO).id,
+      // 入会申请表
+      applicationWordName: '',
+      // 推荐表副理事显示
+      wordFlag: '',
+      // 会员剩余时间
+      remainingTime: 0,
+      // 当前是否有批复文号
+      currentApproval: false,
+      // 整个页面加载的标志
+      confirmLoading: false,
+      // 会员上面信息的label布局
+      labelColTopInfo: {
+        xl: { span: 8 },
+        sm: { span: 11 },
+        xs: { span: 24 }
+      },
+      // 会员上面信息的wrapper布局
+      wrapperColTopInfo: {
+        xl: { span: 16 },
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+      // 会员对象
+      memberInfo: {},
+      // 导航索引:
+      navIndex: 1,
+      url: {
+        add: '/memberInfo/memberInfo/add',
+        edit: '/memberInfo/memberInfo/edit',
+        detail: '/memberInfo/memberInfo/queryById'
+      }
+    }
+  },
+  computed: {
+    memberNature() {
+      switch (this.memberInfo.memberNature) {
+        case 1:
+          return '副理事单位'
+        case 2:
+          return '理事单位'
+        case 3:
+          return '会员单位'
+        default: return ''
+      }
+    }
+  },
+  methods: {
+    // 会员批复文件下载
+    uploadApproveFile(val) {
+      const url = `/memberInfo/memberInfo/downloadApprovalPdf?companyName=${encodeURIComponent(val.companyName)}&memberId=${val.id}`
+      downloadFile(url, '会员批复文件.pdf')
+    },
+    // tab按钮的切换
+    switchNav(index) {
+      this.navIndex = Number(index)
+    },
+    /*
+    * 会员推荐表下载
+    * */
+    downRecommendWord(text) {
+      if (!text) {
+        this.$message.warning('未知的文件')
+        return
+      }
+      if (text.indexOf(',') > 0) {
+        text = text.substring(0, text.indexOf(','))
+      }
+      const url = getFileAccessHttpUrl(text)
+      window.open(url, '_self')
+    },
+    /*
+    * 查询当前是否有批复文号
+    * */
+    queryExistApproval(record) {
+      const param = {
+        memberId: record.id
+      }
+      queryApprovalNo(param).then(res => {
+        // null 说明该会员没有批复文号
+        if (res.result === null) {
+          this.currentApproval = false
+        } else {
+          this.currentApproval = true
+        }
+      })
+    },
+    // 取消 回到初始列表页
+    handleCancel() {
+      // this.$router.push('/member/memberInfo/MemberInfoList')
+      // this.$router.history.go(-1)
+      this.$refs.memberInfoDom && this.$refs.memberInfoDom.initData(this.memberInfo)
+    },
+    handleOk() {
+      // 首页校验 会员单位信息的form 表单的数据是否正确
+      const that = this
+      // this.$refs.memberInfoDom.form.validateFields()
+      this.$refs.memberInfoDom.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          let httpurl = ''
+          let method = ''
+          if (!this.model.id) {
+            httpurl += this.url.add
+            method = 'post'
+          } else {
+            httpurl += this.url.edit
+            method = 'put'
+          }
+          const formData = Object.assign(this.model, values)
+          let encrypt = new JSEncrypt()
+          encrypt.setPublicKey(that.encryptedString)
+          formData.standardPhone = encrypt.encrypt(values.standardPhone)
+          formData.standardMobile = encrypt.encrypt(values.standardMobile)
+          formData.standardEmail = encrypt.encrypt(values.standardEmail)
+          formData.mobile = encrypt.encrypt(values.mobile)
+          formData.phone = encrypt.encrypt(values.phone)
+          formData.email = encrypt.encrypt(values.email)
+          formData.rsapublickey = that.encryptedString
+          console.log('表单提交数据', JSON.stringify(formData))
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              // 重新更新页面的选择
+              that.getMemberInfo()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    /*
+     * 获取会员的详细信息
+     * */
+    getMemberInfo() {
+      //   const url = this.url.detail + '?id=' + this.$route.query.id
+      // todo 暂时写死用户，后续在user等信息中调取
+      const url = this.url.detail + '?id=' + '1413419593870872578'
+      // 会员剩余天数
+      this.pageType = this.$route.query.pageType
+      getAction(url).then(res => {
+        if (res.success) {
+          this.edit(res.result)
+          this.remainingTime = this.remainingTimeCount(res.result.validDate)
+          this.$nextTick(() => {
+            this.$refs.memberInfoDom && this.$refs.memberInfoDom.initData(res.result)
+          })
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    // 获得加密公钥的方法
+    getEncryptedStringFunc() {
+      getEncryptedString().then((res) => {
+        this.encryptedString = res.result
+      })
+    },
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      // 记录之前的单位全称
+      this.originCompanyName = record.companyName
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.wordFlag = this.model.memberNature
+      this.memberInfo = record
+      this.memberId = record.id
+      // 查询会员是否有批复文号
+      this.queryExistApproval(record)
+      // getFilesByIds({ ids: record.applicationWordId }).then(res => {
+      //   if (res.success) {
+      //     this.applicationWordName = res.result[0].fileName || ''
+      //   }
+      // })
+    },
+    // 计算会员剩余天数
+    remainingTimeCount: function(date) {
+      if (date === null || date === undefined || date.length === 0) {
+        return 0
+      }
+      date = date.substring(11)
+      console.log(date)
+      var strArr = (date + ' 23:59:59').split(' ')
+      console.log(strArr[0])
+      var strDay = strArr[0].split('-')
+      var strTime = strArr[1].split(':')
+      var yy = strDay[0]
+      var mm = strDay[1]
+      var dd = strDay[2]
+      var hh = strTime[0]
+      var mi = strTime[1]
+      var se = strTime[2]
+      var date1 = new Date(Date.UTC(yy, mm - 1, dd, hh - 8, mi, se))
+      var date2 = new Date()
+      if (date1 <= date2) {
+        return 0
+      }
+      // var miao = (date1.getTime() - date2.getTime()) / 1000
+      var fen = ((date1.getTime() - date2.getTime()) / 1000) / 60
+      return parseInt(fen / (24 * 60)) // 得出剩bai余
+    }
+  },
+  created() {
+    this.pageType = this.$route.query.pageType
+    // 当前默认选中的tab页
+    this.navIndex = Number(this.$route.query.navIndex) || 1
+    // 不是跳转第一页的时候，触发相应的点击事件
+    if (this.navIndex !== 1) {
+      this.switchNav(this.navIndex)
+    }
+    // 获得会员的相关信息
+    this.getMemberInfo()
+    // 获得公钥的相关信息
+    this.getEncryptedStringFunc()
+  }
+
 }
 </script>
 
-<style scoped>
+<style scoped lang='less'>
+@import '~@assets/less/common.less';
+// 会员批复文件的样式
+.approveFile {
+  color: #219AFF;
+  cursor: pointer;
+  margin-left: 10px;
+}
+.red {
+  color: red;
+}
+// 2021-09-23 标题部分的修改
+/deep/.member-panel-title{
+  height: 48px;
+  line-height: 48px;
+  background: rgba(6,159,153,0.1);
+  font-size: 16px;
+  width: calc(100% - 0px);
+  color: #2F3133;
+  padding-left: 20px;
+  margin: 10px 0px;
+}
 
-</style>
+</style>