yos_web/src/HManagement/addressList/mycontact/modules/addContact.vue

<template>
  <div>
    <el-button type="primary" size="small" icon="el-icon-plus" @click="onShow">{{$t('新建联系人')}}</el-button>
    <el-drawer :title="$t(`新建联系人`)" append-to-body :visible.sync="dialogFormVisible" size="664px" @close="onClose">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" ref="form" :rules="rules" label-position="right" :label-width="tool.onlyZh('90px')" size="small">
            <el-col :span="24">
              <el-form-item :label="$t(`姓名`)+':'" prop="name" :rules="[
              { required: true, message: $t('联系人姓名不能为空')},
            ]">
                <el-input v-model="form.name" autocomplete="on" :placeholder="$t(`请填写联系人姓名`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-radio v-model="form.isTelephone" label="0" @change="phoneChange('手机')">{{$t('手机号')}}</el-radio>
                <el-radio v-model="form.isTelephone" label="1" @change="phoneChange('座机')">{{$t('座机电话')}}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.isTelephone == '1'">
              <el-form-item :label="$t(`联系方式`)+':'" prop="telephone" >
                <el-input v-model="form.areaCode" style="width: 25%" autocomplete="on" :placeholder="$t(`请填写区号`)"></el-input>
                <span style="color: #999999">——</span>
                <el-input v-model="form.telephone" style="width: 68%" autocomplete="on" :placeholder="$t(`请填写座机电话`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24"  >
              <el-form-item v-if="form.isTelephone == '0'" :label="$t(`联系方式`)+':'" prop="phonenumber" :rules="[
              { required: true, message: $t('手机号码不能为空')},
              { pattern:/^1[3-9][0-9]\d{8}$/, message: $t('请输入正确手机号码'),trigger: 'change' }
            ]">
                <el-input v-model="form.phonenumber" autocomplete="on" :placeholder="$t(`请填写手机号码`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`关联客户`)+':'" prop="sys_enterpriseids">
                <popoverTemplate ref="enterpriseRef" :params="enterpriseParam"></popoverTemplate>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`微信`)+':'" prop="wechatnum">
                <el-input v-model="form.wechatnum" autocomplete="on" :placeholder="$t(`请填写微信号`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`邮箱`)+':'" prop="email" :rules="[
              { pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: $t('请输入正确邮箱'),trigger: 'blur' }
            ]">
                <el-input v-model="form.email" autocomplete="on" :placeholder="$t(`请填写邮箱`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`传真`)+':'" prop="fax">
                <el-input v-model="form.fax" autocomplete="on" :placeholder="$t(`请填写传真`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`部门`)+':'" prop="depname">
                <el-input v-model="form.depname" autocomplete="on" :placeholder="$t(`请填写部门`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`职位`)+':'" prop="position">
                <el-input v-model="form.position" autocomplete="on" :placeholder="$t(`请填写职位`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`性别`)+':'" prop="sex">
                <el-radio v-model="form.sex" :label="$t(`男`)">男</el-radio>
                <el-radio v-model="form.sex" :label="$t(`女`)">女</el-radio>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item :label="$t(`生日`)" prop="birthday">
                <el-date-picker
                    style="width:100%"
                    v-model="form.birthday"
                    value-format="yyyy-MM-dd"
                    type="date"
                    :placeholder="$t(`选择日期`)">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item :label="$t(`家庭住址`)" prop="homeaddress">
                <el-input v-model="form.homeaddress" autocomplete="on" :placeholder="$t(`请填写家庭住址`)"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item :label="$t(`微信`)">
                <el-input v-model="form.wechat" autocomplete="on" :placeholder="$t(`输入联系人微信`)"></el-input>
              </el-form-item>
            </el-col> -->

            <el-col :span="24">
              <el-form-item :label="$t(`群组`)" prop="sys_phonebookgroupid">
                <el-select v-model="form.sys_phonebookgroupid" style="width:100%" >
                  <el-option v-for="item in groupList" :key="item.index" :value="item.sys_phonebookgroupid" :label="item.groupname"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
<!--            <el-col :span="24">
              <el-form-item :label="$t(`标签`)" prop="tags">
                <el-select v-model="tags" style="width:100%" multiple>
                  <el-option v-for="item in tagList" :key="item.index" :value="item.tag" :label="$t(item.tag)" :disabled="hasDisabledTag(item)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>-->
            <el-col :span="24">
              <el-form-item :label="$t(`偏好`)" prop="preference">
                <el-input v-model="form.preference" autocomplete="on" :placeholder="$t(`请填写偏好`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`爱好`)" prop="hobby">
                <el-input v-model="form.hobby" autocomplete="on" :placeholder="$t(`请填写爱好`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`备注`)" prop="remarks">
                <el-input v-model="form.remarks" autocomplete="on" :placeholder="$t(`输入联系人备注`)"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>

      <div class="fixed__btn__panel">
        <el-button size="small" style="width:120px" @click="onClose">{{$t(`取 消`)}}</el-button>
        <el-button size="small" style="width:120px" type="primary" :loading="loading" @click="addGroup()">{{$t(`确 定`)}}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import popoverTemplate from '@/components/popoverTemplate/index'
export default {
  props:['group','tagList'],
  components:{popoverTemplate},
  data () {
    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 {
      dialogFormVisible:false,
      form:{
        "sys_phonebookid":0,     //sys_phonebookid<=0时 为新增
        "sys_phonebookgroupid":"",
        "groupname":"",
        "name": "",
        "phonenumber": "",
        "company": "",
        "depname": "",
        "position": "",
        "email": "",
        "sex": "男",
        "birthday": '',
        "homeaddress": "",
        "remarks": "",
        "tag": [],
        "isTelephone":'0',
        "fax":"",
        "areaCode":'',
        "telephone":'',
        "preference":'',
        "hobby":'',
        "sys_enterpriseids":[]
      },
      tags:[],
      datatag:[],
      sys_enterprise:[],
      rules:{
        telephone:[
          { required: true, validator: telephone, trigger: 'change' }
         /* { required: true, message: '请输入座机电话', trigger: 'change' },
          { pattern:/^0\d{2,3}-\d{7,8}$/, message: '请输入正确座机电话',trigger: 'change' }*/
        ],
        depname:[
          { required: true, message: this.$t('请输入部门'), trigger: 'blur' },
        ],
        position:[
          { required: true, message: this.$t('请输入职位'), trigger: 'blur' },
        ],
      },
      groupList:[],
      enterpriseParam:{
        "content": {
          "pageNumber": 1,
          "pageSize": 9999,
          "where": {
            "condition": ""
          }
        },
        "id": 2025041710422802,
      }
    }
  },
  watch: {
    dialogFormVisible (val) {
     !val && this.$refs.form.resetFields();this.tags=[]
    }
  },
  computed:{
    ...mapGetters({
      sys_options:'sys_options',
      loading:'loading'
    })
  },
  methods:{
    onShow () {
      this.dialogFormVisible = true
      this.queryGroup()
      console.log(this.tagList,'tagList')
      console.log(this.group,'group')
    },
    addGroup () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;
        this.$store.commit('setLoading',true)
        if (this.form.isTelephone == '1'){
          this.form.phonenumber = this.form.areaCode + "-" + this.form.telephone
        }
        const res = await this.$api.requested({
          "id": "20220831164503",
          "content": this.form
        })
        this.tool.showMessage(res,async()=>{
          /*let res2 = await this.$api.requested({
            "id": 20220929090901,
            "content": {
                "ownertable":"sys_phonebook",
                "ownerid":res.data.sys_phonebookid,
                "datatag": this.tags
            }
          })*/
          this.$store.commit('setLoading',false)
          this.dialogFormVisible = false
          this.$refs.form.resetFields()
          this.form = {
            "sys_phonebookid":0,     //sys_phonebookid<=0时 为新增
            "sys_phonebookgroupid":"",
            "name": "",
            "phonenumber": "",
            "company": "",
            "depname": "",
            "position": "",
            "email": "",
            "sex": "男",
            "birthday": '',
            "homeaddress": "",
            "remarks": "",
            "tag": [],
            "isTelephone":'0',
            "fax":"",
            "areaCode":'',
            "telephone":'',
            "groupname":"",
          }
          this.$emit('onAddSuccess')
        })
      });
    },
    onClose(){
      this.dialogFormVisible = false
      this.$refs.form.resetFields()
      this.form = {
        "sys_phonebookid":0,     //sys_phonebookid<=0时 为新增
        "sys_phonebookgroupid":"",
        "name": "",
        "phonenumber": "",
        "company": "",
        "depname": "",
        "position": "",
        "email": "",
        "sex": "男",
        "birthday": '',
        "homeaddress": "",
        "remarks": "",
        "tag": [],
        "isTelephone":'0',
        "fax":"",
        "areaCode":'',
        "telephone":''
      }
    },
    hasDisabledTag (item) {
      let arr = []
      let arr2 = []
      arr = this.tagList.filter(item=>{
        return this.tags.includes(item.tag)
      })
      arr.forEach(e=>{
        arr2 = arr2.concat(e.mutextag)
      })
      arr2 = this.tags.length === 0?[]:arr2
      let _isSame = arr2.some(tag=>item.tag === tag)
      return _isSame
    },
    phoneChange(val){
      if (val === '手机'){
        this.form.telephone = ''
        this.form.areaCode = ''
      }else {
        this.form.phonenumber = ''
      }
    },
    async queryGroup(){
      const res = await this.$api.requested({
        "id": 20240102153304,
        "content": {
        }
      })
      this.groupList = res.data
    }
  },
  mounted () {
    this.$store.dispatch('optiontypeselect','sex')
  }
}

</script>
<style scoped>
/deep/.el-dialog__body {
  padding-bottom: 0;
}
</style>