ylrz_scrm_companyUI/src/views/crm/components/addOrEditCustomer.vue

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <!-- <el-form-item label="客户编码" prop="customerCode">
                    <el-input v-model="form.customerCode" :disabled="form.customerId!=null" placeholder="请输入客户编码" />
                </el-form-item> -->
                <el-form-item label="客户名称" prop="customerName">
                    <el-input v-model="form.customerName" placeholder="请输入客户名称" />
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input  maxlength="11" v-model="form.mobile" placeholder="请输入手机" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio :label="item.dictValue" v-for="item in sexOptions" >{{item.dictLabel}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="微信号" prop="weixin">
                    <el-input v-model="form.weixin" placeholder="请输入微信号" />
                </el-form-item>
                <el-form-item label="所在地区" prop="address">
                    <el-cascader
                    ref="citySelect"
                    v-model="cityIds"
                    :options="citys"
                    @change="handleCityChange"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="detailAddress">
                    <el-input v-model="form.detailAddress" placeholder="请输入详细地址" />
                </el-form-item>
                <el-form-item label="客户类型" prop="customerLevel">
                    <el-select v-model="form.customerLevel" placeholder="请选择客户类型" clearable size="small">
                        <el-option
                            v-for="item in customerLevelOptions"
                            :key="item.dictValue"
                            :label="item.dictLabel"
                            :value="item.dictValue"
                            />
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="客户状态">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="item.dictValue" v-for="item in statusOptions">{{item.dictLabel}}</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item label="客户来源" prop="source">
                <el-select v-model="form.source" placeholder="请选择客户来源" clearable size="small">
                    <el-option
                        v-for="item in sourceOptions"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                        />
                </el-select>
                </el-form-item>
                <el-form-item label="标签" prop="tags">
                    <el-tag
                        :key="tag"
                        v-for="tag in tags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签+</el-button>
                    <el-select v-model="tagId" @change="tagsChange" style="width:140px;margin-left: 5px;" placeholder="请选择客户标签" clearable size="small">
                        <el-option
                            v-for="item in tagsOptions"
                            :key="item.dictValue"
                            :label="item.dictLabel"
                            :value="item.dictValue"
                            />
                    </el-select>
                </el-form-item>
                <el-form-item label="进线日期" prop="registerDate">
                <el-date-picker
                value-format="yyyy-MM-dd"
                    v-model="form.registerDate"
                    type="date"
                    placeholder="请选择进线日期">
                </el-date-picker>
                </el-form-item>
                <el-form-item label="进线链接" prop="registerLinkUrl">
                <el-input v-model="form.registerLinkUrl" placeholder="请输入进线链接" />
                </el-form-item>
                <el-form-item label="进线客户详情" prop="registerDesc">
                    <el-input v-model="form.registerDesc" placeholder="请输入进线客户详情" />
                </el-form-item>
                <el-form-item label="进线填写时间" prop="registerSubmitTime">
                <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="form.registerSubmitTime"
                    type="datetime"
                    placeholder="请选择进线填写时间">
                </el-date-picker>
                </el-form-item>
                <el-form-item label="进线方式" prop="registerType">
                    <el-input v-model="form.registerType" placeholder="请输入进线方式" />
                </el-form-item>
                <el-form-item label="来源渠道编码" prop="sourceCode">
                    <el-input v-model="form.sourceCode" placeholder="请输入来源渠道编码" />
                </el-form-item>
                <el-form-item label="推线时间" prop="pushTime">
                    <el-input v-model="form.pushTime" placeholder="请输入推线时间" />
                </el-form-item>
                <el-form-item label="推线编码" prop="pushCode">
                    <el-input v-model="form.pushCode" placeholder="请输入推线编码" />
                </el-form-item>
                <el-form-item :label="ext.name" v-for="ext  in exts"  >
                    <el-input v-model="ext.value"  />
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                    <el-input :rows="2" v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <div  class="footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
    </div>
</template>

<script>
    import { listCustomerExt } from "@/api/crm/customerExt";
    import { updateCustomer,addCustomer,addMyCustomer,getCustomerDetails   } from "@/api/crm/customer";
    import {getCitys} from "@/api/store/city";
    import {customerLevelOptions} from "@/api/crm/customerLevel";
    export default {
        name: "remark",
        data() {
            return {
                addType:1,//添加类型 1线索客户 2我的客户
                tagId:null,
                tagsOptions:[],
                cityIds:[],
                citys:[],
                tags:[],
                inputVisible: false,
                inputValue: '',
                statusOptions:[],
                typeOptions:[],
                sourceOptions:[],
                sexOptions:[],
                customerExts:[],
                // 表单参数
                form: {
                    province:null,
                    city:null,
                    district:null,
                    customerLevel: null
                },
                exts:[],
                // 表单校验
                rules: {
                    // customerName: [
                    // { required: true, message: "客户名称不能为空", trigger: "blur" }
                    // ],
                    mobile: [
                    { required: true, message: "手机号不能为空", trigger: "blur" }
                    ],
                    source: [
                    { required: true, message: "客户来源不能为空", trigger: "blur" }
                    ],
                },
              customerLevelOptions: []

            };
        },
        created() {
            this.getDicts("crm_customer_source").then((response) => {
                this.sourceOptions = response.data;
            });
            this.getDicts("common_sex").then((response) => {
                this.sexOptions = response.data;
            });
            this.getDicts("crm_customer_tag").then((response) => {
                this.tagsOptions = response.data;
            });
            this.getDicts("crm_customer_status").then((response) => {
                this.statusOptions = response.data;
            });
            this.getDicts("crm_customer_type").then((response) => {
                this.typeOptions = response.data;
            });

            this.getCitys()
          this.getCustomerLevelOptions()
        },
        methods: {
          getCustomerLevelOptions(){
            customerLevelOptions({status: 0}).then((response) => {
              this.customerLevelOptions = response.data;
            });
          },
            tagsChange(e){
                var item=this.tagsOptions.find(val => val.dictValue === e);
                console.log(item);
                this.tags.push(item.dictLabel);
                this.form.tags=this.tags.toString();
            },
            closeTag(){
                this.addTag.open=false;
                this.getDetails(this.customerId)
            },
            handleAddTag(){
                this.addTag.open=true;
                var that=this;
                setTimeout(() => {
                    that.$refs.tag.reset(this.item);
                }, 500);

            },
            handleCityChange(value) {
                console.log(value);
                var nodes=this.$refs.citySelect.getCheckedNodes();
                this.form.address=nodes[0].pathLabels[0]+"-"+nodes[0].pathLabels[1]+"-"+nodes[0].pathLabels[2];
                this.form.cityIds=value.toString();
                console.log(this.form.address);
            },
            getCitys(){
                getCitys().then(res => {
                this.loading = false;
                this.citys=res.data;
                })
            },
            handleClose(tag) {
                this.tags.splice(this.tags.indexOf(tag), 1);
                this.form.tags=this.tags.toString();
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.tags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
                this.form.tags=this.tags.toString();
            },
            // 表单重置
            reset() {
                this.form = {
                    customerId: null,
                    customerCode: null,
                    customerName: null,
                    mobile: null,
                    sex: null,
                    weixin: null,
                    remark: null,
                    userId: null,
                    createUserId: null,
                    receiveUserId: null,
                    customerUserId: null,
                    address: null,
                    location: null,
                    detailAddress: null,
                    lng: null,
                    lat: null,
                    createTime: null,
                    updateTime: null,
                    status: 0,
                    isReceive: null,
                    deptId: null,
                    isDel: null,
                    customerType: null,
                    receiveTime: null,
                    poolTime: null,
                    companyId: null,
                    isLine: null,
                    source: null,
                    tags: null,
                    customerLevel: null
                };
                this.exts=[];
                this.tags=[];
                this.cityIds=[];
                this.resetForm("form");
            },
            handleAdd(addType) {
                this.addType=addType;
                this.reset();
                console.log(this.customerExts)
                var data={status:1}
                listCustomerExt(data).then(response => {
                    this.customerExts = response.data;
                    this.customerExts.forEach(element => {
                        var data={extId:element.extId,name:element.name,value:""};
                        this.exts.push(data)
                    });

                });

                console.log(this.exts)
            },
            /** 修改按钮操作 */
            handleUpdate(customerId) {
                this.reset();
                var that=this;
                var data={customerId:customerId}
                getCustomerDetails(data).then(response => {
                    this.form = response.customer;
                    if(this.form.status!=null){
                        this.form.status = this.form.status.toString();
                    }
                    if(this.form.customerType!=null){
                        this.form.customerType = this.form.customerType.toString();
                    }
                    if(this.form.sex!=null){
                     this.form.sex = this.form.sex.toString();
                    }
                    if(this.form.source!=null){
                        this.form.source = this.form.source.toString();
                    }
                    if(this.form.tags!=null){
                        this.tags = this.form.tags.split(",")
                    }
                    if(this.form.cityIds!=null){
                        var ids=this.form.cityIds.split(",");
                        this.cityIds=[];
                        ids.forEach(element => {
                            var id=parseInt(element);
                            that.cityIds.push(id)
                        });
                    }
                    listCustomerExt(data).then(response => {
                        this.customerExts = response.data;
                        this.customerExts.forEach(element => {
                            var data={extId:element.extId,name:element.name,value:""};
                            this.exts.push(data)
                        });
                        if(this.form.extJson!=null){
                            var extList=JSON.parse(this.form.extJson);
                            that.exts.forEach(item => {
                                extList.forEach(element => {
                                    if(item.extId==element.extId){
                                        item.value=element.value
                                    }
                                });

                            });
                        }

                    });
                    this.open = true;
                    this.title = "修改客户";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.customerId != null) {
                            this.form.extJson=JSON.stringify(this.exts);
                            updateCustomer(this.form).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess("操作成功");
                                    this.$emit('close');
                                }
                            });
                        } else {
                            this.form.extJson=JSON.stringify(this.exts);
                            if(this.addType==1){
                                addCustomer(this.form).then(response => {
                                    if (response.code === 200) {
                                        this.msgSuccess("操作成功");
                                        this.$emit('close');
                                    }
                                });
                            }
                            else if(this.addType==2){
                                addMyCustomer(this.form).then(response => {
                                    if (response.code === 200) {
                                        this.msgSuccess("操作成功");
                                        this.$emit('close');
                                    }
                                });
                            }

                        }
                    }
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 20px;

}
.footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>