llccing/regex-phone.md

## regex-phone.md

      
    Raw
  

              regex-phone.md
            
          
      {{form.idc_name}}
  <DescriptionList title="运营商" class="mb20">
    <Description :col="2">
      <FormItem label="运营商：">{{supportName}}</FormItem>
    </Description>
    <Description :col="2">
      <FormItem label="运营商邮箱：" prop="support_email">
        <Input placeholder="请输入邮箱，若多个以逗号分隔" v-model="form.support_email"/>
      </FormItem>
    </Description>
  </DescriptionList>

  <DescriptionList title="机房主管" class="mb20">
    <Description :col="2">
      <FormItem label="机房主管：" prop="principal_name">
        <Input placeholder="请输入" v-model="form.principal_name"/>
      </FormItem>
    </Description>

    <Description :col="2">
      <FormItem label="机房主管联系电话：" prop="principal_tel">
        <Input placeholder="请输入电话或者手机号" v-model="form.principal_tel"/>
      </FormItem>
    </Description>

    <Description :col="2">
      <FormItem label="机房主管邮箱：" prop="principal_email">
        <Input placeholder="请输入邮箱，若多个以逗号分隔" v-model="form.principal_email"/>
      </FormItem>
    </Description>

    <Description :col="2">
      <FormItem label="机房值班电话：" prop="on_duty_phone">
        <Input placeholder="请输入电话或者手机号" v-model="form.on_duty_phone"/>
      </FormItem>
    </Description>
  </DescriptionList>

  <DescriptionList title="机房外包商">
    <Description :col="2">
      <FormItem label="外包商：" prop="outsources_name">
        <Input placeholder="请输入" v-model="form.outsources_name"/>
      </FormItem>
    </Description>

    <Description :col="2">
      <FormItem label="外包值班电话：" prop="outsources_tel">
        <Input placeholder="请输入电话或者手机号" v-model="form.outsources_tel"/>
      </FormItem>
    </Description>

    <Description :col="2">
      <FormItem label="机房外包组邮箱" prop="outsources_email">
        <Input placeholder="请输入邮箱，若多个以逗号分隔" v-model="form.outsources_email"/>
      </FormItem>
    </Description>
  </DescriptionList>
</Form>

  
<script>
export default {
  name: 'ModalIdcInfo',
  props: {
    value: Boolean,
    arrOutsources: Array,
    arrSupport: Array,
    row: Object,
  },
  data() {
    // eslint-disable-next-line
    const multiEmailRegex = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\,))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/;
    const validateMultiEmails = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱必填！'));
      } else if (!multiEmailRegex.test(value)) {
        return callback(new Error('格式不正确，若多个以逗号分隔'));
      }
      callback();
    };
const validatePhone = (rule, value, callback) => {
  const phone = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
  const telePhone = /^1(3|4|5|7|8)\d{9}$/;
  if (!value) {
    return callback(new Error('联系电话或手机号必填！'));
  } else if (phone.test(value) || telePhone.test(value)) {
    callback();
  } else {
    return callback(new Error('请输入正确格式的联系电话或者手机号！'));
  }
};
return {
  loading: true,
  form: {
    idc_id: '',
    idc_name: '',
    support: '',

    support_email: '',
    on_duty_phone: '',
    principal_name: '',
    principal_tel: '',
    principal_email: '',
    outsources_name: '',
    outsources_tel: '',
    outsources_email: '',
  },
  ruleValidate: {
    support_email: [
      {
        required: true,
        validator: validateMultiEmails,
        trigger: 'blur',
      },
    ],
    on_duty_phone: [
      {
        required: true,
        validator: validatePhone,
        trigger: 'blur',
      },
    ],
    principal_name: [
      {
        required: true,
        message: '负责人必填！',
        type: 'string',
        trigger: 'blur',
      },
    ],
    principal_tel: [
      {
        required: true,
        validator: validatePhone,
        trigger: 'blur',
      },
    ],
    principal_email: [
      {
        required: true,
        validator: validateMultiEmails,
        trigger: 'blur',
      },
    ],
    outsources_name: [
      {
        required: true,
        message: '外包商必填！',
        type: 'string',
        trigger: 'blur',
      },
    ],
    outsources_tel: [
      {
        required: true,
        validator: validatePhone,
        trigger: 'blur',
      },
    ],
    outsources_email: [
      {
        required: true,
        validator: validateMultiEmails,
        trigger: 'blur',
      },
    ],
  },
};

},
computed: {
show: {
get() {
if (this.value) {
this.init();
}
return this.value;
},
set(newVal) {
this.$emit('input', newVal);
},
},
supportName() {
  const { support } = this.form;
  if (!Array.isArray(support)) return '';
  const str = support.map((item, idx) =>
    (support.length - 1 === idx ? `${item.support_name}` : `${item.support_name} , `));

  return str.join(',');
},

},
methods: {
submit() {
this.$refs.form.validate((flag) => {
if (flag) {
const data = this._.cloneDeep(this.form);
delete data.support_name;
delete data.idc_name;
this.$axios
.post(this.$api.resourceManage.postM1IdcUpdateIdcInfo, data)
.then((resp) => {
if (resp.status === 200) {
this.$Message.success('修改成功！');
this.$emit('on-submit');
}
});
} else {
this.loading = false;
this.$nextTick(() => {
this.loading = true;
});
this.$Message.error('请填写必填项并确认格式正确！');
}
});
},
init() {
  Object.keys(this.form).forEach((key) => {
    this.form[key] = this.row[key];
  });
},

},
};
</script>
<style scoped>
.mb20{
  margin-bottom: 20px;
}

.modal-idc-info >>> .ivu-form-item{
  margin-bottom: 4px;
}

.modal-idc-info >>> .detail{
  padding-left: 5px;
  padding-right: 5px;
}
</style>