income_payments_enterprise_terminal/src/views/standardsAssociation/model/BindMemberModel.vue

<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>