395 lines
14 KiB
Vue
395 lines
14 KiB
Vue
<!--企业端的会员管理的相关信息 -->
|
|
<template>
|
|
<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',
|
|
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 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>
|