LK/income_payments_enterprise_terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update]-企业端 修改标协会员-会员管理、增加标协会员-缴费信息的功能

Browse Source
This commit is contained in:
fengchenchen
2021-12-14 16:06:30 +08:00
parent 3343f87335
commit 34b33e5994
35 changed files with 10826 additions and 988 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/standardsAssociation/CertificateManagement.vue
+554 -4
View File
@@ -1,13 +1,563 @@
<!--标协会员-证书管理-->
<template>
<div>证书管理</div>
<div class="main-box">
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :span="6" :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="证书类型" class="certificate-type-item">
<j-dict-select-tag
placeholder="请选择证书类型"
v-model="queryParam.certificateType"
:title="queryParam.certificateType"
dictCode="certificate_type" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="状态">
<j-multi-select-tag
placeholder="请选择证书状态"
v-model="queryParam.certificateStatus"
dictCode="certificate_status"
>
</j-multi-select-tag>
</a-form-item>
</a-col>
<template>
<a-col :xl="10" :lg="11" :md="12" :sm="24">
<a-form-item label="发证时间">
<j-date
placeholder="请选择开始日期"
date-format="YYYY-MM-DD 00:00:00"
class="query-group-cust"
v-model="queryParam.beginCertificationDate"
:disabled-date="disabledStartDate">
</j-date>
<span class="query-group-split-cust"></span>
<j-date
placeholder="请选择结束日期"
date-format="YYYY-MM-DD 23:59:59"
class="query-group-cust"
v-model="queryParam.endCertificationDate"
:disabled-date="disabledEndDate">
</j-date>
</a-form-item>
</a-col>
</template>
<a-col :xl="6" :lg="7" :md="8" :sm="24" v-has=" 'vin:applicationHistory'">
<a-form-item label="单位全称">
<a-input placeholder="请输入单位全称" v-model="queryParam.companyName"></a-input>
</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">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">刷新</a-button>
<a-button
type="primary"
@click="applyCertificate"
class="primary"
style="margin-left: 8px">申请证书
</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 查询区域-END -->
<!-- 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"
@change="handleTableChange">
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
<img
v-else
:src="getImgView(text)"
height="25px"
alt=""
style="max-width:80px;font-size: 12px;font-style: italic;" />
</template>
<template slot="fileSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button
v-else
:ghost="true"
type="primary"
icon="download"
size="small"
@click="uploadFile(text)">
下载
</a-button>
</template>
<span slot="action" class="action-span-cell" slot-scope="text, record">
<a @click="handleDetail(record)">查看</a>
<!-- <a v-has="'vin:verify'" v-show="record.certificateStatus == 3">-->
<!-- <a href="javascript:;" @click="(record.certificateStatus === 3) && handleVerify(record)">核实</a>-->
<!-- </a>-->
<a v-show="record.certificateStatus == 4">
<a href="javascript:;" @click="(record.certificateStatus == 4) && bindMember(record)">绑定会员</a>
</a>
<!-- v-show="record.chargeType != 1 && record.certificateModality == 3 && record.certificateStatus == 5"-->
<!-- 已绑定的证书不能续费 已支付已缴费的不能续费 需要流程走完才能续费 v-has="'vin:renew'"-->
<a
v-show="record.certificateStatus === 4 ||record.certificateStatus === 5 || record.certificateStatus === 7 ">
<a href="javascript:;" @click="renewCharge(record)">续费</a>
</a>
<!-- v-has="'vin:renewal'"-->
<a
v-show="record.certificateModality == 3 && (record.certificateStatus == 1 || record.certificateStatus == 4)">
<a href="javascript:;"
@click="(record.certificateModality == 3 && (record.certificateStatus == 1 || record.certificateStatus == 4)) && replacement(record)">换证</a>
</a>
<a v-show="(record.certificateStatus == 6 && record.chargeType == 2) || record.certificateStatus == 0">
<a href="javascript:;"
@click="((record.certificateStatus == 6 && record.chargeType == 2) || record.certificateStatus == 0) && handleEditRenew(record)">编辑</a>
</a>
<!-- 会员 只有企业证书才 正常使用 已绑定的证书 可授权申请-->
<a
v-show="roleCode === 'member'&& record.certificateType === 2 && (record.certificateStatus === 4 || record.certificateStatus === 1)"
>
<a href="javascript:;" @click="authorizationFunc(record)">授权申请</a>
</a>
<a v-show="record.certificateStatus == 6 || record.certificateStatus == 0">
<a
@click="(record.certificateStatus == 6 || record.certificateStatus == 0) && handleDelete(record.id)">删除</a>
</a>
</span>
<!-- 状态渲染模板 -->
<template slot="customRenderStatus" slot-scope="certificateStatus">
<a-tag v-if="certificateStatus==0" color="#c37e00">待支付</a-tag>
<a-tag v-if="certificateStatus==1" color="#40835e">已绑定</a-tag>
<a-tag v-if="certificateStatus==2" color="#40835e">已支付</a-tag>
<a-tag v-if="certificateStatus==3" color="#40835e">已缴费</a-tag>
<a-tag v-if="certificateStatus==4" color="#40835e">正常使用</a-tag>
<a-tag v-if="certificateStatus==5" color="#8a8c8e">已失效</a-tag>
<a-tag v-if="certificateStatus==6" color="#8a8c8e">已驳回</a-tag>
<a-tag v-if="certificateStatus==7" color="#8a8c8e">绑定已失效</a-tag>
</template>
<!-- 临近证书与超期证书-->
<template slot="codeState" slot-scope="text,record">
<span v-if="record.codeState === 0 ">{{ text }}<span class="state-0">超期证书</span></span><!--
--><span v-if="record.codeState === 1 ">{{ text }}<span class="state-1">临期证书</span></span><!--
--><span v-if="record.codeState === 2 ">{{ text }}</span>
</template>
</a-table>
</div>
<vinCertificate-modal ref="modalForm" @ok="modalFormOk"></vinCertificate-modal>
</a-card>
</div>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeroListMixin } from '@/mixins/JeroListMixin'
import VinCertificateModal from './memberManagementModule/VinCertificateModal'
import JDate from '../../components/tools/JDate'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
import { RangeDateMixin } from '@/mixins/RangeDateMixin'
import JDictSelectTag from '../../components/standardsAssociation/JDictSelectTag'
// eslint-disable-next-line no-unused-vars
import { deleteAction, downloadFile, getAction, getFileAccessHttpUrl } from '@/api/memberManage'
export default {
name: 'CertificateManagement'
name: 'CertificateManagement',
mixins: [JeroListMixin, mixinDevice, RangeDateMixin],
components: {
JMultiSelectTag,
JDate,
VinCertificateModal,
JDictSelectTag
},
data() {
return {
deleteAction,
getAction,
getFileAccessHttpUrl,
// 时间范围查询显示的类型
rangeDateFormat: {
begin: 'YYYY-MM-DD hh:mm:ss',
end: 'YYYY-MM-DD'
},
description: 'VIN证书管理页面',
roleCode: Vue.ls.get(USER_INFO).roleCode,
// 表头
columns: [
{
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function(t, r, index) {
return parseInt(index) + 1
}
},
{
title: '单位全称',
align: 'center',
dataIndex: 'companyName'
},
{
title: '证书类型',
align: 'center',
dataIndex: 'certificateType',
customRender: function(text) {
if (text === 1) {
return '世界制造厂识别代号（WMI）证书'
} else if (text === 2) {
return '企业名称代号证书'
}
}
},
{
title: '证书代码',
align: 'center',
dataIndex: 'code',
scopedSlots: { customRender: 'codeState' }
},
{
title: '发证时间',
align: 'center',
dataIndex: 'certificationDate'
},
{
title: '生效时间',
align: 'center',
dataIndex: 'effectDate',
customRender: function(text) {
return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
}
},
{
title: '失效时间',
align: 'center',
dataIndex: 'invalidDate',
customRender: function(text) {
return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
}
},
{
title: '备案通知书',
align: 'center',
dataIndex: 'noticeOfFiling',
customRender: function(text) {
if (text === 1) {
return '是'
} else if (text === 0) {
return '否'
} else {
return ''
}
}
},
{
title: '状态',
align: 'center',
dataIndex: 'certificateStatus',
scopedSlots: { customRender: 'customRenderStatus' }
},
{
title: '证书形式',
align: 'center',
dataIndex: 'certificateModality',
customRender: function(text) {
if (text === 1) {
return '换证'
} else if (text === 2) {
return '续证'
} else if (text === 3) {
return '正常'
} else if (text === 4) {
return '申请'
}
}
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
// fixed:"right",
width: 147,
scopedSlots: { customRender: 'action' }
}
],
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
url: {
list: '/vinCertificate/vinCertificate/getMyVinCertificate',
delete: '/vinCertificate/vinCertificate/delete',
deleteBatch: '/vinCertificate/vinCertificate/deleteBatch',
exportXlsUrl: '/vinCertificate/vinCertificate/exportXls',
importExcelUrl: 'vinCertificate/vinCertificate/importExcel'
},
dictOptions: {},
dateKeyObj: {
beginKey: 'beginCertificationDate',
endKey: 'endCertificationDate'
}
}
},
computed: {
importExcelUrl: function() {
return `${window._CONFIG['memberURL']}/${this.url.importExcelUrl}`
}
},
methods: {
initDictConfig() {
},
// 授权
authorizationFunc(record) {
this.$router.push({
name: 'member-vinCertificate-Authorization',
query: {
id: record.id
}
})
},
/*
* 授权记录
* */
authorizationHistoryFunc(record) {
this.$router.push({
name: 'member-vinCertificate-Authorization',
query: {
id: record.id
}
})
},
// 申请证书
applyCertificate: function() {
const that = this
// 可申请的免费证书的个数
let freeCount
getAction('/vinCertificate/vinCertificate/getFreeCount').then(res => {
if (res.success) {
freeCount = res.result
that.$refs.modalForm.title = '新增申请'
that.$refs.modalForm.disableSubmit = false
that.$refs.modalForm.freeCount = freeCount
// freeCount 为0 打开收费证书申请窗口
if (freeCount === 0) {
that.$refs.modalForm.pageType = 6
} else {
that.$refs.modalForm.pageType = 5
}
// 弹窗口操作
that.$refs.modalForm.add()
} else {
that.$message.warning(res.message)
}
})
},
// 查看证书
handleDetail: function(record) {
this.$refs.modalForm.title = '查看证书'
this.$refs.modalForm.disableSubmit = true
this.$refs.modalForm.pageType = 1
this.$refs.modalForm.remainingTime = this.remainingTimeCount(record.certificateValidDate)
this.$refs.modalForm.edit(record)
},
// 核实证书
handleVerify: function(val) {
this.$refs.modalForm.title = '核对证书'
this.$refs.modalForm.disableSubmit = true
if (val.certificateModality === 1) {
this.$refs.modalForm.pageType = 3
} else {
// 新增和续证使用2号核对窗口
this.$refs.modalForm.pageType = 2
}
// 换证时使用3号核对窗口
this.$refs.modalForm.edit(val)
},
// 绑定会员
bindMember: function(record) {
this.$refs.modalForm.title = '绑定会员'
this.$refs.modalForm.disableSubmit = true
// 绑定会员时使用4号窗口
this.$refs.modalForm.pageType = 4
// 证书id
this.$refs.modalForm.vinId = record.id
this.$refs.modalForm.edit(record)
},
// 续费
renewCharge: function(record) {
// if(!(record.chargeType != 1 && record.certificateModality == 3 && record.certificateStatus == 5)){
// return;
// }
this.$refs.modalForm.title = '续费'
this.$refs.modalForm.disableSubmit = true
// 换证显示 1是世界证书
this.$refs.modalForm.isChangeCer = record.certificateType
// 证书续费时使用7号窗口
this.$refs.modalForm.pageType = 7
this.$refs.modalForm.edit2(record)
},
// 换证
replacement: function(record) {
this.$refs.modalForm.title = '换证'
this.$refs.modalForm.disableSubmit = true
// 换证的时候使用8号窗口
this.$refs.modalForm.pageType = 8
this.$refs.modalForm.edit3(record)
},
// 编辑: 包括免费证书，收费证书，续费，换证
handleEditRenew: function(record) {
console.log(record)
record.certificateModality = Number(record.certificateModality)
record.certificateStatus = Number(record.certificateStatus)
record.chargeType = Number(record.chargeType)
// 分为续证驳回和 非免费证书申请驳回 chargeType 1是免费证书 2是收费证书
this.$refs.modalForm.title = ''
this.$refs.modalForm.disableSubmit = true
// certificateStatus 0 是待支付
if (record.certificateStatus === 0) {
if (record.chargeType === 1) {
if (record.certificateModality === 4) {
// 免费证书申请编辑
let freeCount
getAction('/vinCertificate/vinCertificate/getFreeCount').then((res) => {
freeCount = res.result
this.$refs.modalForm.freeCountVin = freeCount + 1
this.$refs.modalForm.title = '新增申请'
this.$refs.modalForm.disableSubmit = false
this.$refs.modalForm.pageType = 10
this.$refs.modalForm.edit5(record)
return
})
return
} else if (record.certificateModality === 1) {
// 免费证书换证编辑
this.$refs.modalForm.title = '换证'
this.$refs.modalForm.disableSubmit = true
// 换证的时候使用13号窗口
this.$refs.modalForm.pageType = 13
this.$refs.modalForm.edit8(record)
}
} else if (record.chargeType === 2 && record.certificateModality === 4) {
// 收费证书编辑
this.$refs.modalForm.title = '新增申请'
this.$refs.modalForm.disableSubmit = false
this.$refs.modalForm.pageType = 11
this.$refs.modalForm.edit6(record)
} else if (record.chargeType === 2 && record.certificateModality === 2) {
// 续费编辑
this.$refs.modalForm.title = '续费'
this.$refs.modalForm.disableSubmit = true
// 证书续费编辑时使用12号窗口
this.$refs.modalForm.pageType = 12
this.$refs.modalForm.edit7(record)
} else if (record.chargeType === 2 && record.certificateModality === 1) {
// 换证编辑
this.$refs.modalForm.title = '换证'
this.$refs.modalForm.disableSubmit = true
// 换证的时候使用13号窗口
this.$refs.modalForm.pageType = 13
this.$refs.modalForm.edit8(record)
}
} else {
// 新增证书缴费编辑窗口
if (record.chargeType === 2 && record.certificateModality === 4 && record.certificateStatus === 6) {
this.$refs.modalForm.title = '新增申请'
this.$refs.modalForm.disableSubmit = false
this.$refs.modalForm.pageType = 11
this.$refs.modalForm.edit6(record)
} else if (record.chargeType === 2 && record.certificateModality === 2 && record.certificateStatus === 6) {
this.$refs.modalForm.title = '续费'
this.$refs.modalForm.disableSubmit = true
// 证书续费编辑时使用12号窗口
this.$refs.modalForm.pageType = 12
this.$refs.modalForm.edit7(record)
}
}
},
remainingTimeCount: function(date) {
if (date === null || date === undefined || date.length === 0) {
return 0
}
date = date.substring(11)
var strArr = (date + ' 23:59:59').split(' ')
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余
}
}
}
</script>
<style scoped>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>
@label-width: 78px;
.certificate-type-item {
/deep/ .ant-form-item-label {
min-width: @label-width !important;
}
/deep/ .ant-form-item-control-wrapper {
width: calc(100% - @label-width);
max-width: calc(100% - @label-width);
& > span {
max-width: 100%;
}
}
}
.state-0 {
display: inline-block;
margin-left: 5px;
color: red;
}
.state-1 {
display: inline-block;
margin-left: 5px;
color: #c37e00;
}
</style>