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-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="社交软件">
              <el-select v-model="form.customerContacts[0].social" :placeholder="$t('请选择社交软件')" size="mini">
                <el-option v-for="dict in getDictDatas(DICT_TYPE.SOCIAL)"
                           :key="dict.value" :label=" $l(dict,'label')" :value="parseInt(dict.value)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社交软件号码">
              <el-input v-model="form.customerContacts[0].socialNumber" :placeholder="$t('请输入社交软件号码')"
                        size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input v-model="form.customerContacts[0].email" :placeholder="$t('请输入邮箱')" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>
        <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 prop="customerService" :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('图片')" prop="picture">
          <upload v-model="form.picture" :limit="1"></upload>
        </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";
import upload from '@/components/ImageUpload'

export default {
  name: "addPotentialCustom",
  methods: {
    getDictDatas,
    getProductListFn(val) {
      getProductList({typeId: val}).then(r => {
        this.productList = r.data
      })
    },
    reset() {
      this.form = {
        name: undefined,
        customerContacts: [{
          areaCode: '',
          phoneNew: undefined,
          name: undefined,
          isDefault: 1,
          social: undefined,
          socialNumber: undefined,
          email: undefined,
        }],
        source: undefined,
        type: [],
        customerService: undefined,
        company: undefined,
        companyEn: undefined,
        inquiry: undefined,
        productType: undefined,
        productId: undefined,
        picture: 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('创建成功'));
              this.reset()
              this.$refs.form.resetFields()
            }
          })
        }
      })

    },
  },
  components: {AreaCodeSelector, upload},
  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'},
        customerService: {required: true, message: this.$t('请选择客户经理。'), target: ['blur'], type: 'number'},
        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: {}
    }
  },
  watch: {
    dialogTableVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>