addPotentialCustom.vue

<template>
 <div>
   <el-dialog :title="$t('新建潜在客户信息')" :visible.sync="dialogTableVisible">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px"  style="padding: 0 20px;">
      <el-form-item prop="name" :label="$t('客户姓名')">
        <el-input v-model="form.name"  :placeholder="$t('请输入客户姓名')"></el-input>
      </el-form-item>
      <el-form-item required :label="$t('联系方式')" >
       <el-row :gutter="20">
         <el-col :span="4" >
           <el-form-item  prop="customerContacts[0].areaCode" >
             <area-code-selector v-model="form.customerContacts['0'].areaCode" />
           </el-form-item>
         </el-col>
         <el-col :span="10">
           <el-form-item prop="customerContacts[0].phoneNew">
             <el-input  style="width:100%;" v-model="form.customerContacts[0].phoneNew"  maxlength="11" :placeholder="$t('请输入联系方式')" />
           </el-form-item>
         </el-col>
       </el-row>
      </el-form-item>
      <el-form-item prop="source" :label="$t('客户来源')">
        <el-select  v-model="form.source" :placeholder="$t('请选择客户来源')">
          <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_SOURCE)"
                     :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
        </el-select>
      </el-form-item>
        <el-form-item :label="$t('客户类别')" prop="type" >
        <dict-selector v-model="form.type" :type="DICT_TYPE.CUSTOMER_TYPE" form-type="checkbox" multiple ></dict-selector>
      </el-form-item>
      <el-form-item :label="$t('客户经理')" >
        <el-select v-model="form.customerService" :placeholder="$t('请选择客户经理')">
          <el-option v-for="item in serviceUserList"
                     :key="item.id" :label="item.nickname" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('公司名称')">
        <el-input v-model="form.company" ></el-input>
      </el-form-item>
      <el-form-item :label="$t('公司英文名称')">
        <el-input v-model="form.companyEn" ></el-input>
      </el-form-item>
        <el-form-item :label="$t('主营类别')" prop="productType">
        <el-row :gutter="10">
          <el-col :span="11">
            <el-select v-model="form.productType" style="width: 100%"  @change="getProductListFn" :placeholder="$t('请选择产品类别')" >
              <el-option  :label="item.titleZh" :value="item.id" v-for="(item) in productTypeList" :key="item.id"/>
            </el-select>
          </el-col>
          <el-col :span="11">
            <el-select v-model="form.productId"  style="width: 100%"  :placeholder="$t('请选择')">
              <el-option :label="item.titleZh" :value="parseInt(item.id)" v-for="(item) in productList" :key="item.id"/>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="$t('询盘信息')" >
        <el-input
          v-model="form.inquiry"
          type="textarea"
          :rows="3"
          :placeholder="$t('请输入内容')">
        </el-input>
      </el-form-item>
    </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogTableVisible = false">{{$t('取 消')}}</el-button>
       <el-button type="primary" @click="submit">{{$t('确 定')}}</el-button>
     </div>
   </el-dialog>
 </div>
</template>

<script>
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import AreaCodeSelector from "@/components/AreaCodeSelector/index.vue";
import {listServiceUser} from "@/api/system/user";
import {getProductTypeList} from "@/api/ecw/productType";
import {getProductList} from "@/api/ecw/product";
import {createPotential} from "@/api/ecw/customer";

export default {
  name: "addPotentialCustom",
  methods: {
    getDictDatas,
    getProductListFn(val){
      getProductList({typeId:val}).then(r => {
        this.productList = r.data
      })
    },
    reset(){
      this.form = {
        name:undefined,
        customerContacts:[{areaCode:undefined,phoneNew:undefined,name:undefined,isDefault: 1}],
        source:undefined,
        type:[],
        customerService:undefined,
        company:undefined,
        companyEn:undefined,
        inquiry:undefined,
        productType:undefined,
        productId:undefined,
      }
    },
    submit(){
      this.$refs.form.validate((valId)=>{
         if (valId){
           let p = {...this.form}
           p.type = p.type.join(',')
           p.customerContacts[0].name = p.name + p.customerContacts[0].phoneNew
           createPotential(p).then(r => {
             if(r.code === 0){
               this.$emit('change');
               this.dialogTableVisible = false;
               this.$message(this.$t('创建成功'));
             }
           })
         }
      })

    },
  },
  components: {AreaCodeSelector},
  created() {
    this.reset()
    listServiceUser().then(r => {
      this.serviceUserList = r.data
    })
    getProductTypeList().then(r => {
      this.productTypeList = r.data
    })


  },
  computed: {
    DICT_TYPE() {
      return DICT_TYPE
    },
    rules(){
      return {
            name:{ required:true,message:this.$t('请输入名称'),target:'blur' },
            customerContacts:[{areaCode:{required:true,message:this.$t('请输入区号。'),target:'blur'},phoneNew:{required:true,message:this.$t('请输入电话号码。'),target:'blur'} },],
            type:{ type:'array',  message:this.$t('请输入客户类别。'), required:true, target:['blur','change']},
            source:{message:this.$t('前请输入客户来源'),required:true,target:'change',type:'number'}
      }
    }
  },

  data(){
    return {
      dialogTableVisible:false,
      serviceUserList:[],
      productTypeList:[],
      productList:[],
      form:{}
    }
  },

}
</script>

<style scoped>

</style>