index.vue

<template>
  <el-dialog :visible.sync="show" :title="$t('快速新建客户')" :close-on-click-modal="false" class="quick-create-customer">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" :validate-on-rule-change="false">
      <el-form-item :label="$t('客户类别')" prop="type">
        <dict-selector :type="DICT_TYPE.CUSTOMER_TYPE" form-type="checkbox" multiple v-model="form.type"></dict-selector>
      </el-form-item>
      <el-form-item :label="$t('客户名称')" prop="name">
        <el-input v-model="form.name" :placeholder="$t('请输入客户名称')" />
      </el-form-item>
      <el-form-item :label="$t('国家')" prop="country">
        <el-select filterable clearable v-model="form.country" :placeholder="$t('请选择国家')">
          <el-option v-for="dict in countryList"
                      :key="dict.id" :label="$l(dict, 'name')" :value="parseInt(dict.id)" />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('联系人')" prop="customerContacts.0.name">
        <el-input v-model="form.customerContacts[0].name" :placeholder="$t('请输入联系人')" />
      </el-form-item>
      <el-form-item :label="$t('手机号')" prop="customerContacts.0.phoneNew">
        <!-- <el-select v-model="form.customerContacts[0].areaCode" :placeholder="$t('请选择区号')" filterable class="w-200">
          <el-option v-for="(item, index) in countryList"
                      :key="index" :label="item.nameShort + item.nameZh + '(' + item.tel + ')'" :value="item.tel" />
        </el-select> -->
        <area-code-selector v-model="form.customerContacts[0].areaCode"  />
        <el-input v-model="form.customerContacts[0].phoneNew" maxlength="11" :placeholder="$t('请输入联系方式')" class="w-150 ml-10"/>
      </el-form-item>

      <el-form-item :label="$t('客户来源')" prop="source">
        <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="createTime">
        <el-date-picker
          v-model="form.createTime"
          type="datetime"
          value-format="timestamp"
          :placeholder="$t('选择创建时间')">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item :label="$t('客户经理')" prop="customerService">
        <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('备注')" prop="remarks">
        <el-input v-model="form.remarks" :placeholder="$t('请输入备注')"/>
      </el-form-item>
    </el-form>
    <div style="text-align: right">
      <el-button type="primary" @click="submitForm">{{$t('确定')}}</el-button>
      <el-button @click="cancel">{{$t('取消')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {createCustomer} from '@/api/ecw/customer'
import {DICT_TYPE} from "@/utils/dict";
import {listServiceUser} from "@/api/system/user"
import { getCountryListAll } from '@/api/ecw/country'
import {getCustomerContactsSelect} from '@/api/ecw/customerContacts'
import AreaCodeSelector from '@/components/AreaCodeSelector'
export default {
  name: "quickCreateCustomer",
  components: {AreaCodeSelector},
  props:{
    type: String,
  },

  data(){
    return {
      show: true,
      DICT_TYPE,
      // 表单参数
      form: {
        customerContacts:[{isDefault: 1}]
      },
      // 表单校验
      serviceUserList: [],
      countryList: [],
    }
  },
  watch:{
    show(){
      if(!this.show){
        this.$emit('close')
      }
    }
  },
  computed:{
    rules(){
      return {
        name                          : [{ required: true, message: this.$t("客户名称不能为空"), trigger: "blur" }],
        country                       : [{ required: true, message: this.$t("国家不能为空"), trigger: "blur" }],
        'customerContacts.0.phoneNew' : [{ required: true, message: this.$t("手机号不能为空"), trigger: "blur" }],
        'customerContacts.0.name'     : [{ required: true, message: this.$t("联系人不能为空"), trigger: "blur" }],
        type                          : [{ required: true, message: this.$t("客户类别不能为空"), trigger: "blur" }],
        createTime                    : [{ required: true, message: this.$t("创建时间不能为空"), trigger: "blur" }],
        source                        : [{ required: true, message: this.$t("客户来源不能为空"), trigger: "blur" }],
        customerService               : [{ required: true, message: this.$t("客户经理不能为空"), trigger: "blur" }],
        status                        : [{ required: true, message: this.$t("客户状态不能为空"), trigger: "blur" }],
        founder                       : [{ required: true, message: this.$t("创建人不能为空"), trigger: "blur" }],
      }
    }
  },
  created() {
    if(this.type){
      this.$set(this.form, 'type', this.type)
    }
    listServiceUser().then(r => {
      this.serviceUserList = r.data
    })
    getCountryListAll().then(r => {
      this.countryList = r.data
    })
  },
  methods: {
    open(){
      this.show = true
    },
    /** 取消按钮 */
    cancel() {
      this.show = false
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 添加的提交
        let data = {...this.form}
        data.type = this.form.type.join(",")
        createCustomer(data).then(res => {
          this.$modal.msgSuccess(this.$t("新增成功"));
          return getCustomerContactsSelect({customerId: res.data})
        }).then(res => {
          this.$emit('success', res.data.list[0])
        })
      });
    },
  }
}
</script>
<style lang="scss">
.quick-create-customer .el-form-item{
  margin-bottom: 22px;
}
</style>