添加潜在客户

src/views/ecw/customer/addPotentialCustom.vue

+<template>
+ <div>
+   <el-dialog title="新建客户信息" :visible.sync="dialogTableVisible">
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px"  style="padding: 0 20px;">
+      <el-form-item prop="name" label="客户姓名">
+        <el-input v-model="form.name"  placeholder="placeholder"></el-input>
+      </el-form-item>
+      <el-form-item required label="联系方式" >
+       <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="客户来源">
+        <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="客户类别" 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="客户经理" >
+        <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="公司名称">
+        <el-input v-model="form.company" ></el-input>
+      </el-form-item>
+      <el-form-item label="公司英文名称">
+        <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="询盘信息" >
+        <el-input
+          v-model="form.inquiry"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入内容">
+        </el-input>
+      </el-form-item>
+    </el-form>
+     <div slot="footer" class="dialog-footer">
+       <el-button @click="dialogTableVisible = false">取 消</el-button>
+       <el-button type="primary" @click="submit">确 定</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('创建成功');
+             }
+           })
+         }
+      })
+
+    },
+  },
+  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:'请输入名称',target:'blur' },
+            customerContacts:[{areaCode:{required:true,message:'请输入区号。',target:'blur'},phoneNew:{required:true,message:'请输入电话号码。',target:'blur'} },],
+            type:{ type:'array',  message:'请输入客户类别。', required:true, target:['blur','change']},
+            source:{message:'前请输入客户来源',required:true,target:'change',type:'number'}
+      }
+    }
+  },
+
+  data(){
+    return {
+      dialogTableVisible:false,
+      serviceUserList:[],
+      productTypeList:[],
+      productList:[],
+      form:{}
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>