抽离证书弹窗组件
This commit is contained in:
dongwei
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:maskClosable="false"
|
||||
switchFullscreen
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
<template>
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-row>
|
||||
<a-col :span="16">
|
||||
<a-form-item label="解绑证书" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-select
|
||||
placeholder="请选择解绑证书"
|
||||
:triggerChange="true"
|
||||
v-decorator="['unBindId',validatorRules.unBindId]"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in bindVinList"
|
||||
:title="item.certificate+'('+item.certificate_code+')'"
|
||||
:key="item.id"
|
||||
:value="item.id">
|
||||
{{ item.certificate }}({{ item.certificate_code }})
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="container">
|
||||
<label v-if="model.certificateType==1">
|
||||
确定绑定该世界制造厂识别代号（WMI）证书到用户会员吗？绑定后，原绑定证书将解绑。
|
||||
</label>
|
||||
<label v-if="model.certificateType==2">
|
||||
确定绑定该企业名称代号证书到用户会员吗？绑定后，原绑定证书将解绑。
|
||||
</label>
|
||||
<input type="hidden" v-text="vinId"/>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
<a-button @click="bind" type="primary">提交</a-button>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@api/memberManage'
|
||||
import { getCertificateByMemberId } from '@/api/standardsAssociationApi'
|
||||
export default {
|
||||
// 绑定会员 窗口
|
||||
name: 'BindMemberModel',
|
||||
data() {
|
||||
return {
|
||||
title: '绑定会员',
|
||||
// 绑定会员的证书id
|
||||
vinId: '',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
pageType: 4,
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
model: {},
|
||||
// 会员绑定证书数组
|
||||
bindVinList: [],
|
||||
validatorRules: {
|
||||
unBindId: {
|
||||
rules: [{ required: true, message: '请选择要解绑的证书' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
edit(val) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, val)
|
||||
// 获取绑定证书数据
|
||||
this.getCertificateBindList()
|
||||
this.visible = true
|
||||
},
|
||||
/*
|
||||
* 绑定会员提交
|
||||
* */
|
||||
bind: function() {
|
||||
const that = this
|
||||
that.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
// const params = 'vinId=' + this.model.id + '&unBindId=' + values.unBindId
|
||||
const params = `vinId=${this.model.id}&unBindId=${values.unBindId}`
|
||||
that.confirmLoading = true
|
||||
getAction('/vinCertificate/vinCertificate/bind?' + params).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
that.$emit('ok')
|
||||
this.visible = false
|
||||
} else {
|
||||
that.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 查询会员绑定证书的下拉数据
|
||||
* */
|
||||
getCertificateBindList() {
|
||||
const that = this
|
||||
getCertificateByMemberId({ id: this.model.memberId }).then(res => {
|
||||
if (res.success) {
|
||||
that.bindVinList = res.result
|
||||
} else {
|
||||
console.log(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
if (this.pageType === 14) {
|
||||
return 400
|
||||
}
|
||||
if (this.pageType !== 4) {
|
||||
return 1350
|
||||
} else {
|
||||
return 650
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.v-middle {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
list-style: none;
|
||||
font-feature-settings: 'tnum';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.remark span {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 165px;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.vin-style {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-color: #ccc;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
// 证书状态颜色
|
||||
.certificate {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
padding: 0 7px;
|
||||
border-radius: 3px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
background: #c37e00;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
background: #40835e;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
background: #8a8c8e;
|
||||
}
|
||||
|
||||
.transalte-y-10 {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.apply-notice {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.apply-code-notice {
|
||||
color: #f5222d;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 25%
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user