laws-sinotruk-client/src/views/businessSupport/standardizationActivity/modules/ContactModal.vue

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :ok-text="$t('preservation')"
    :cancel-text="$t('cancel')"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-form :form="form">
      <!--联络人-->
      <a-form-item :labelCol="labelCol"
                   :wrapperCol="wrapperCol"
                   :label="$t('system.contact.contactPerson')">
        <a-input :placeholder="$t('pleaseEnter') + $t('system.contact.contactPerson')"
                 @change="event => event.target.value = event.target.value.trim()"
                 :maxLength="50"
                 v-decorator="['liaison', validatorRules.liaison]" />
      </a-form-item>

      <!--单位-->
      <a-form-item :labelCol="labelCol"
                   :wrapperCol="wrapperCol"
                   :label="$t('businessSupport.standardizationActivity.unit')">
        <a-input :placeholder="$t('pleaseEnter') + $t('businessSupport.standardizationActivity.unit')"
                 @change="event => event.target.value = event.target.value.trim()"
                 :maxLength="50"
                 v-decorator="['unit', validatorRules.unit]" />
      </a-form-item>

      <!--电话-->
      <a-form-item :labelCol="labelCol"
                   :wrapperCol="wrapperCol"
                   :label="$t('businessSupport.standardizationActivity.phone')">
        <a-input :placeholder="$t('pleaseEnter') + $t('businessSupport.standardizationActivity.phone')"
                 @change="event => event.target.value = event.target.value.trim()"
                 :maxLength="50"
                 v-decorator="['phone', validatorRules.phone]" />
      </a-form-item>

      <!--邮箱-->
      <a-form-item :labelCol="labelCol"
                   :wrapperCol="wrapperCol"
                   :label="$t('user.mailbox')">
        <a-input :placeholder="$t('pleaseEnter') + $t('user.mailbox')"
                 @change="event => event.target.value = event.target.value.trim()"
                 :maxLength="50"
                 v-decorator="['mailbox', validatorRules.mailbox]" />
      </a-form-item>
    </a-form>
  </j-modal>
</template>

<script>
import { phoneReg, isEmail } from '../../../../utils/validate'

export default {
  name: 'ContactModal',
  data () {
    return {
      title: this.$t('businessSupport.standardizationActivity.addContactInformation'),
      width: 800,
      visible: false,
      confirmLoading: false,
      model: {},
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      validatorRules: {
        // 联络人
        liaison: {
          rules: [{
            required: true,
            message: this.$t('pleaseEnter') + this.$t('system.contact.contactPerson')
          }],
          validateTrigger: 'blur'
        },
        // 单位
        unit: {
          rules: [{
            required: true,
            message: this.$t('pleaseEnter') + this.$t('businessSupport.standardizationActivity.unit')
          }],
          validateTrigger: 'blur'
        },
        // 电话
        phone: {
          rules: [{
            required: true, validator: this.checkPhone
          }],
          validateTrigger: 'blur'
        },
        // 邮箱
        mailbox: {
          rules: [{
            required: true, validator: this.checkEmail
          }],
          validateTrigger: 'blur'
        }
      }
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    view (record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.disabled = true
      this.$nextTick(() => {
        this.form.setFieldsValue(this.model)
      })
    },
    handleOk () {
      this.form.validateFields((errors, values) => {
        if (!errors) {
          const formData = Object.assign({}, values)
          this.$emit('ok', formData)
          this.close()
        }
      })
    },
    handleCancel () {
      this.close()
    },
    close () {
      this.visible = false
      this.model = {}
      this.form.resetFields()
    },
    /**
     * 校验电话
     * @param rule
     * @param value
     * @param callback
     */
    checkPhone (rule, value, callback) {
      if (!value) {
        // 请输入电话
        callback(new Error(this.$t('pleaseEnter') + this.$t('businessSupport.standardizationActivity.phone')))
        return
      }
      if (phoneReg(value)) {
        callback()
        return
      }
      // 请输入正确格式的电话
      callback(new Error(this.$t('businessSupport.standardizationActivity.pleaseEnterCorrectPhone')))
    },
    /**
     * 校验邮箱
     * @param rule
     * @param value
     * @param callback
     */
    checkEmail (rule, value, callback) {
      if (!value) {
        callback(new Error(this.$t('pleaseEnter') + this.$t('user.mailbox')))
        return
      }
      if (isEmail(value)) {
        callback()
        return
      }
      callback(this.$t('user.enterMailboxCorrect'))
    }
  }
}
</script>

<style scoped lang="less">

</style>