yos_web/src/HDrpManagement/contractManage/components/contactList/addContact.vue

<template>
  <div>
    <el-button size="small" type="primary" @click="addBtn(drawerFormVisible = true)">添加</el-button>
    <el-drawer
        title="添加联系人"
        :visible.sync="drawerFormVisible"
        size="600px"
        direction="rtl"
        :show-close="false"
        append-to-body
        @close="onClose">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules"  ref="form"  size="mini" label-position="right" label-width="90px">
            <el-col :span="24">
              <el-form-item  label="姓名:" prop="name">
                <contactsNewTemplate ref="contactRef" ownertable="sys_enterprise" :isParam="true" :newParam="param" @contactData="contactData" ></contactsNewTemplate>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item >
                <el-radio v-model="form.isTelephone" label="0" disabled>手机号</el-radio>
                <el-radio v-model="form.isTelephone" label="1" disabled>座机电话</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.isTelephone == '1'">
              <el-form-item label="联系方式:" prop="telephone" >
                <el-input v-model="form.areaCode" style="width: 25%" autocomplete="on" placeholder="请填写区号" disabled></el-input>
                <span style="color: #999999">——</span>
                <el-input v-model="form.telephone" style="width: 68%" autocomplete="on" placeholder="请填写座机电话" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24"  >
              <el-form-item v-if="form.isTelephone == '0'" label="联系方式:" prop="phonenumber" :rules="[
              { required: true, message: '手机号码不能为空'},
              { pattern:/^1[3-9][0-9]\d{8}$/, message: '请输入正确手机号码',trigger: 'change' }
            ]">
                <el-input v-model="form.phonenumber" autocomplete="on" placeholder="请填写手机号码" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="微信:" prop="wechatnum" >
                <el-input  autosize v-model="form.wechatnum" placeholder="请输入微信" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item   label="邮箱:" :rules="[
              { pattern:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入有效的邮箱',trigger: 'change' }
            ]">
                <el-input   autosize v-model="form.email" placeholder="请输入邮箱" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="传真:" >
                <el-input  autosize v-model="form.fax" placeholder="请输入传真" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="关联企业:" >
                <el-input  autosize v-model="form.enterprisename" placeholder="请输入关联企业" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="部门:" prop="depname" >
                <el-input  autosize v-model="form.depname" placeholder="请输入部门" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="职位:" prop="position">
                <el-input  autosize v-model="form.position" placeholder="请输入职位" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="性别:" >
                <el-radio v-model="form.sex" label="男" disabled>男</el-radio>
                <el-radio v-model="form.sex" label="女" disabled>女</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="生日:" >
                <el-date-picker
                    disabled
                    v-model="form.birthday"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="家庭住址:" >
                <el-input type="textarea" rows="5" v-model="form.address" placeholder="请输入家庭住址" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="偏好" prop="preference" >
                <el-input v-model="form.preference" autocomplete="on" placeholder="请填写偏好" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="爱好" prop="hobby" >
                <el-input v-model="form.hobby" autocomplete="on" placeholder="请填写爱好" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="备注:" >
                <el-input type="textarea"  rows="5" v-model="form.remarks" placeholder="请输入备注" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" class="normal-btn-width" :disabled="loading">取 消</el-button>
        <el-button size="small" type="primary" :loading="loading"  @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import contactsNewTemplate from '@/template/contactsNewTemplate/index'
export default {
  name: "addContact",
  components:{contactsNewTemplate},
  props:['data'],
  data(){
    var validateMobilePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不可为空'));
      } else {
        if (value !== '') {
          var reg=/^1[3456789]\d{9}$/;
          if(!reg.test(value)){
            callback(new Error('请输入有效的手机号码'));
          }
        }
        callback();
      }
    };
    var telephone = (rule,value,callback) =>{
      if (this.form.areaCode === '' && this.form.telephone === ''){
        callback(new Error('座机电话不能为空'))
      } else  {
        var reg=/^0\d{2,3}-\d{7,8}$/
        let telephone = this.form.areaCode + '-' + this.form.telephone
        if (!reg.test(telephone)){
          callback(new Error('请输入正确座机电话'))
        } else {
          callback();
        }
      }

    }
    return {
      drawerFormVisible:false,
      loading:false,
      form:{
        contactsid: 0,
        sys_enterpriseid: "",
        name: "",
        sex: "",
        depname: "",
        position: "",
        birthday: "",
        phonenumber: "",
        email: "",
        address: "",
        remarks: "",
        enterprisename:'',
        province: "",
        city: "",
        county: "",
        workaddress: 0,
        isdefault: 1,
        isprimary: 1,
        sys_phonebookid:'',
        telephone:'',
        fax:'',
        ownerid: this.$route.query.id,
        ownertable: "sa_customers",
        isTelephone:'0',
        areaCode:'',
        company:''
      },
      rules:{
        name: [
          { required: true, message: '姓名不能为空', trigger: 'change' },
        ],
        telephone:[
          { required: true, validator: telephone, trigger: 'change' }
        ],
        depname: [
          { required: true, message: '部门不能为空', trigger: 'blur' },
        ],
        position: [
          { required: true, message: '职位不能为空', trigger: 'blur' },
        ],
      },
      param:{
        "id": 20240923153304,
        "content": {
          "sa_contractid": this.$route.query.id,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        }
      }
    }
  },
  methods:{
    addBtn(){
      this.$refs.form.clearValidate()
    },
    onSubmit(){
      this.$refs.form.validate(async(valid)=>{
        if (!valid) return false
        this.loading = true
        const res = await this.$api.requested({
          "id": 20240923153004,
          "content": {
            "sa_contractid": this.$route.query.id,
            "sys_phonebookid": this.form.sys_phonebookid
          }
        })
        this.loading = false
        this.tool.showMessage(res,()=>{
          this.$emit('addSuccess')
          this.onClose()
        })
      })
    },
    onClose(){
      this.drawerFormVisible = false
      this.form = {}
      this.$refs.contactRef.nameValue = ''
    },
    contactData(val){
      this.form = Object.assign({},this.form,val)
      this.form.name = val.name
      if (val.phonenumber.indexOf('-') != '-1'){
        this.form.isTelephone = '1'
        this.form.areaCode = val.phonenumber.substring(0,val.phonenumber.indexOf('-'))
        this.form.telephone = val.phonenumber.substring(this.form.areaCode.length+1)
        this.form.phonenumber = ''
      }else {
        this.form.isTelephone = '0'
        this.form.phonenumber = val.phonenumber
        this.form.areaCode = ''
        this.form.telephone = ''
      }
    },
  }
}
</script>

<style scoped>

</style>