unitRegister.vue

<template>
  <div>
    <a-form-model ref="from" :model="formData" :rules="unitRules" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" class="from-table" key="2" style="border-top:0;">
      <a-row style="border-top:0;">
        <a-col :span="24">
          <div class="title">
            <span>注册单位</span>
          </div>
        </a-col>
      </a-row>
      <!-- <a-row>
        <a-col :span="24">
          <a-form-model-item ref="upTreeCode" label="上级单位" prop="upTreeCode">
            <unit-tree-select v-model="formData.upTreeCode" :unitType="0" />
          </a-form-model-item>
        </a-col>
      </a-row> -->
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="unitName" label="单位名称" prop="unitName">
            <a-input v-model="formData.unitName" @blur="() => {$refs.unitName.onFieldBlur(); }" style="width: 350px;" />
            <!-- <a-select v-model="formData.unitName" showSearch placeholder="请输入单位名称" :filterOption="filterOption" @search="onSearch" @change="handleChange" style="width: 350px;">
              <a-select-option v-for="item in selectData" :key="item.key" :value="item.key">
                {{ item.title }}
              </a-select-option>
            </a-select>-->
          </a-form-model-item> 
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="unitType" label="单位类型" prop="unitType">
            <base-select v-model="formData.unitType" :type="6" :isAll="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item prop="organizationCode" ref="organizationCode" label="机构代码">
            <a-input placeholder="组织机构代码/统一社会信用代码" v-model="formData.organizationCode" :maxLength="100" style="width:350px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="unitAddress" label="单位地址" prop="unitAddress">
            <a-input v-model="formData.unitAddress" @blur="() => {$refs.unitAddress.onFieldBlur(); }" style="width:350px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <div class="title">
            <span>注册单位管理员</span>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="username" label="用户名" prop="username">
            <a-input AUTOCOMPLETE="off" v-model="formData.username" :readOnly="readOnly" @click="() => {this.readOnly=false }" @check="() => {this.readOnly=false }" @blur="() => {$refs.username.onFieldBlur();this.readOnly=false }" style="width:200px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="password" label="密码" prop="password">
            <a-input-password AUTOCOMPLETE="off" v-model="formData.password" @blur="() => {$refs.password.onFieldBlur(); }" style="width:200px;" />
            <span style="color: rgb(56, 188, 213);margin-left:3px">※密码由数字加字母组成，长度为6-10位</span>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="confirmPassword" label="确认密码" prop="confirmPassword">
            <a-input-password v-model="formData.confirmPassword" @blur="() => {$refs.confirmPassword.onFieldBlur(); }" style="width:200px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="certId" label="证件号" prop="certId">
            <a-input v-model="formData.certId" @blur="() => {$refs.certId.onFieldBlur(); }" style="width:200px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="personName" label="姓名" prop="personName">
            <a-input v-model="formData.personName" @blur="() => {$refs.personName.onFieldBlur(); }" style="width:200px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- <a-row>
        <a-col :span="24">
          <a-form-model-item ref="email" label="邮箱" prop="email" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
            <a-input v-model="formData.email" @blur="() => {$refs.email.onFieldBlur();}" style="width:200px;" />
            <span style="color: rgb(56, 188, 213);margin-left:3px">※输入真实邮箱地址，以便接收相关通知</span>
          </a-form-model-item>
        </a-col>
      </a-row> -->
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="mobile" label="手机号" prop="mobile">
            <a-input ref="unitMobile" v-model="formData.mobile" @blur="() => {$refs.mobile.onFieldBlur();}" style="width:150px;" />
            <span style="margin-left: 5px;"></span>
            <a-button @click="verifiMobile()" :disabled="check.disabled">{{check.title}}</a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item ref="code" label="验证码" prop="code">
            <a-input v-model="formData.code" @blur="() => {$refs.code.onFieldBlur(); }" style="width:100px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: center;">
          <a-button type="primary" @click="submitUnit">提交</a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <a-modal v-model="visibleCheck" title="验证" class="sc_modal" :width="'300px'" :dialog-style="{ top: '35%' }" :maskClosable="false" :footer="null" destroyOnClose>
      <verifi-code :mobile="formData.mobile" @close="closeMobileCheck" />
    </a-modal>
  </div>
</template>
<script>
import { isEmptyParams, checkPhone, checkEmail, checkIdentitytionId, getCardInfo } from "@/views/utils/common"

import unitTreeSelect from '@/views/components/common/unitTreeSelect'
import verifiCode from '@/views/register/components/verifiCode'
import { isIdentityId } from '@/views/utils/validate'

export default {
  name: "unitRegister",
  components: {
     unitTreeSelect, verifiCode
  },
  data () {
    return {
      formData: {
        username: null, password: null, confirmPassword: null, personName: null, certId: null, sex: null, birthday: null, unitId: null, degree: null, title: null, spec: null, mobile: null, code: null, email: null, upTreeCode: process.env.VUE_APP_SYSTEM_TOP_CODE, unitName: null, unitType: '', unitAddress: null,
      },
      readOnly: true,
      visibleCheck: false,
      unitRules: {
        upTreeCode: [{ required: true, message: '请选择单位', trigger: 'change' }],
        unitName: [
          { required: true, message: '请输入单位名称', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              else {
                let pars = { UnitName: value }
                this.$api.unit.getListByUnitName(pars).then(({ data = {} }) => {
                  if (data && data.length > 0) {
                    callback(new Error("单位已存在"));
                  } else
                    callback()
                })
              }
            }
          }
        ],
        unitType: [{ required: true, message: '请选择单位类型', trigger: 'change' }],
        organizationCode: [{ required: true, message: '请输入机构代码', trigger: 'blur' }],
        unitAddress: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              else {
                let pars = { username: value }
                this.$api.base.checkUser(pars).then(({ data = {} }) => {
                  if (data) {
                    callback(new Error("用户名已存在"));
                  } else
                    callback()
                })
              }
            }
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value == '' || value == undefined) {
              callback()
            }
            let ckPwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
            if (ckPwd.test(value)) {
              callback()
            } else {
              callback(new Error('密码格式错误，请检查！'));
            }
          }
        },],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              if (value == this.formData.password) {
                callback()
              } else {
                callback(new Error('请重新确认密码！'));
              }
            },
          },
        ],
        certId: [
          { required: true, message: '请输入证件号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              var errorMsg = isIdentityId(value);
              if (errorMsg != "") {
                callback(new Error(errorMsg));
              } else {
                let pars = { certId: this.formData.certId }
                this.$api.base.checkCertId(pars).then(({ data = {} }) => {
                  if (data) {
                    callback(new Error("证件号已存在"));
                  } else
                    callback()
                })
              }
            }
          }],
        personName: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              var ckPhone = /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/;
              if (ckPhone.test(value)) {
                let pars = { mobile: value, type: 'register' }
                this.$api.base.checkMobile(pars).then(({ data = {} }) => {
                  if (data) {
                    callback()
                  } else
                    callback(new Error('手机号已存在'));
                })
              } else {
                callback(new Error('请输入正确的手机号'));
              }
            }
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
      selectData: [],
    }
  },
  props: {
    check: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  created () {

  },
  methods: {
    onSearch(value) {
      let pars = { UnitName: value }
      this.$api.unit.getListByUnitName(pars).then(({ data = {} }) => {
        this.selectData = []
        // 模拟从数据库查询数据
        const matchedOptions = data.filter(option => option.title.includes(value));
        if (matchedOptions.length > 0) {
          matchedOptions.forEach(e => {
            this.selectData.push(e)
          })
        } else {
          this.selectData.push({ title: value, key: "00000000-0000-0000-0000-000000000000" })
        }
      })
    },
    filterOption(input, option) {
      // 自定义过滤逻辑，如果没有匹配的选项就保留输入值
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    handleChange(value) {
      this.formData.unitName = value
    },
    verifiMobile () {
      this.$refs.from.validateField('mobile', (error) => {
        if (!error) {
          this.visibleCheck = true
        }
      })
    },
    closeMobileCheck (value) {
      if (value && value == 'success') {
        this.visibleCheck = false
        this.countStart()
      }
    },
    countStart () {
      this.check.disabled = true
      this.check.title = this.check.count + 's后重新发送'
      let time = setInterval(() => {
        if (this.check.count < 1) {
          clearInterval(time)
          this.check.title = '获取验证码'
          this.check.count = this.check.time
          this.check.disabled = false
        } else {
          this.check.count--
          this.check.title = this.check.count + 's后重新发送'
        }
      }, 1000)
    },
    submitUnit () {
      let cardInfo = null
      this.$refs.from.validate(valid => {
        if (valid) {
          this.$emit('load', true)
          if (this.formData.certId) {
            cardInfo = getCardInfo(this.formData.certId)
            this.formData.birthday = cardInfo.birth + ' 00:00:00'
            this.formData.sex = cardInfo.sex
          }
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          this.$api.unit.register(par).then(({ data = {} }) => {
            if (data) {
              this.$message.success('注册成功！')
              this.$emit('load', false)
              this.$emit('sub', 'sub')
            } else this.$emit('load', false)
          }).catch(() => {
            this.$emit('load', false)
            this.$message.error('注册失败，请稍后重试！')
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>