Commit 8bb01cf9 authored by Marcus's avatar Marcus

全部客户弹窗改新页面

parent 19bfe2ae
<template>
<div>
<el-row type="flex" style="margin-top: 15px;margin-bottom: 15px" justify="center">
<el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="16">
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="客户名称" prop="name">
<el-input v-model="form.name" placeholder="请输入客户名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="国家" prop="country">
<el-select v-model="form.country" placeholder="请选择国家">
<el-option v-for="dict in getDictDatas(DICT_TYPE.COUNTRY)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户等级" prop="level">
<el-select v-model="form.level" placeholder="请选择客户等级">
<el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_LEVEL)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址" prop="address">
<el-input v-model="form.address" placeholder="请输入联系地址" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户类别" prop="type">
<el-select v-model="form.type" placeholder="请选择客户类别">
<el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="所属代理" prop="agentId">-->
<!-- <el-select v-model="form.agentId" placeholder="请选择所属代理">-->
<!-- <el-option v-for="dict in getDictDatas(DICT_TYPE.COMMON_STATUS)"-->
<!-- :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
<el-form-item label="常用提货网点" prop="pickupPoint">
<el-select v-model="form.pickupPoint" placeholder="请输入常用提货网点">
<el-option v-for="node in nodeList"
:key="node.value" :label="node.label" :value="node.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公司名称" prop="company">
<el-input v-model="form.company" placeholder="请输入公司名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户生日" prop="birthday">
<el-date-picker
v-model="form.birthday"
type="date"
value-format="timestamp"
placeholder="请输入客户生日">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主营类别" prop="productType">
<el-row :gutter="10">
<el-col :span="11">
<el-select v-model="form.productType" placeholder="请选择产品类别">
<!-- <el-option label="请选择字典生成" value="" />-->
</el-select>
</el-col>
<el-col :span="11">
<el-select v-model="form.productType" placeholder="请选择主营类别">
<!-- <el-option label="请选择字典生成" value="" />-->
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户来源" prop="source">
<el-select v-model="form.source" placeholder="请选择客户来源">
<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-col>
<el-col :span="12">
<el-form-item label="结算方式" prop="balance">
<el-select v-model="form.balance" placeholder="请选择结算方式">
<el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_BALANCE)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="跟进客服" prop="customerService">
<el-select v-model="form.customerService" placeholder="请选择跟进客服">
<el-option v-for="dict in getDictDatas(DICT_TYPE.COMMON_STATUS)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="图片" prop="picture">
<upload v-model="form.picture" :limit="1"></upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户状态" prop="status">
<el-select v-model="form.status" placeholder="请选择客户状态">
<el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_STATUS)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="推介人" prop="promoter">
<el-input v-model="form.promoter" placeholder="请输入推介人" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="创建人" prop="founder">
<el-input v-model="form.founder" placeholder="请输入创建人" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="创建时间" prop="founder">
<el-date-picker
v-model="form.createTime"
type="datetime"
value-format="timestamp"
placeholder="选择创建时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" placeholder="请输入备注" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="到仓确认" prop="arrivalConfirm">
<el-switch v-model="form.arrivalConfirm" :active-value="0" :inactive-value="1" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="重货标准(CBM)" prop="weightUnit">
<el-input v-model="form.weightUnit" placeholder="请输入重货标准(CBM)" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="指定线路" prop="line">
<el-switch v-model="showLine"></el-switch>
<el-table
v-show="showLine"
border
:data="form.customerLines"
style="width: 500px">
<el-table-column
prop="departureId"
label="始发地">
</el-table-column>
<el-table-column
prop="objectiveId"
label="目的地">
</el-table-column>
</el-table>
</el-form-item>
</el-col>
</el-row>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>联系人</span>
<el-button style="float: right;" size="small" type="primary" @click="form.customerContacts.push({department: undefined})">+</el-button>
</div>
<el-table
:data="form.customerContacts"
style="width: 100%"
>
<el-table-column
prop="department"
label="部门"
width=""
>
<template v-slot="{ row, column, $index }">
<el-input v-model="row.department" placeholder="请输入部门" size="mini"/>
</template>
</el-table-column>
<el-table-column
prop="position"
label="职位"
width=""
>
<template v-slot="{row}">
<el-input v-model="row.position" placeholder="请输入职位" size="mini"/>
</template>
</el-table-column>
<el-table-column
prop="name"
label="联系人"
>
<template v-slot:header>
联系人 <span style="color: #ff0000">*</span>
</template>
<template v-slot="{row}">
<el-input v-model="row.name" placeholder="请输入联系人" size="mini"/>
</template>
</el-table-column>
<el-table-column
prop="areaCode"
label="区号"
>
<template v-slot:header>
区号 <span style="color: #ff0000">*</span>
</template>
<template v-slot="{row}">
<el-select v-model="row.areaCode" placeholder="请选择区号">
<el-option v-for="dict in getDictDatas(DICT_TYPE.AREA_CODE)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</template>
</el-table-column>
<el-table-column
prop="phoneNew"
label="联系方式"
>
<template v-slot:header>
联系方式 <span style="color: #ff0000">*</span>
</template>
<template v-slot="{row}">
<el-input v-model="row.phoneNew" placeholder="请输入联系方式" size="mini"/>
</template>
</el-table-column>
<el-table-column
prop=""
label="关联账号"
>
</el-table-column>
<el-table-column
prop="social"
label="社交软件"
>
<template v-slot="{row}">
<el-select v-model="row.social" placeholder="请选择社交软件">
<el-option v-for="dict in getDictDatas(DICT_TYPE.SOCIAL)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</template>
</el-table-column>
<el-table-column
prop="socialNumber"
label="社交软件号码"
>
<template v-slot="{row}">
<el-input v-model="row.socialNumber" placeholder="请输入社交软件号码" size="mini"/>
</template>
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
>
<template v-slot="{row}">
<el-input v-model="row.email" placeholder="请输入邮箱" size="mini"/>
</template>
</el-table-column>
<el-table-column
prop="isDefault"
label="设为默认"
>
<template v-slot="{row}">
<el-select v-model="row.isDefault" placeholder="设为默认">
<el-option v-for="dict in getDictDatas(DICT_TYPE.IS_DEFAULT)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.isDefault)" />
</el-select>
</template>
</el-table-column>
<el-table-column
prop="name"
label="操作"
>
<template v-slot="{ row, column, $index }">
<el-button type="danger" @click="form.customerContacts.splice($index, 1)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-row :gutter="10" style="margin-top: 15px">
<el-col :span="12">
<el-form-item label="发票抬头" prop="invoiceTitle">
<el-input v-model="form.invoiceTitle" placeholder="请输入发票抬头" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="纳税人识别号" prop="licenseNumber">
<el-input v-model="form.licenseNumber" placeholder="请输入纳税人识别号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开户行" prop="bank">
<el-input v-model="form.bank" placeholder="请输入开户行" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="账户" prop="bankNumber">
<el-input v-model="form.bankNumber" placeholder="请输入账户" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目" prop="project">
<el-input v-model="form.project" placeholder="请输入项目" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票地址" prop="billingAddress">
<el-input v-model="form.billingAddress" placeholder="请输入开票地址" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票电话" prop="billingTell">
<el-input v-model="form.billingTell" placeholder="请输入开票电话" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="税率" prop="taxRate">
<el-input v-model="form.taxRate" placeholder="请输入税率" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="text-align: right">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import upload from '@/components/ImageUpload'
import {createCustomer, getCustomer, updateCustomer} from "../../../api/ecw/customer"
export default {
name: "edit",
components: {
upload
},
created() {
this.customerId = this.$route.params && this.$route.params.customerId;
console.log(this.customerId)
if(!!this.customerId)
this.getCustomer(this.customerId)
},
data(){
return {
customerId: undefined,
getDictDatas,
DICT_TYPE,
// 表单参数
form: {},
// 表单校验
rules: {
name: [{ required: true, message: "客户名称不能为空", trigger: "blur" }],
country: [{ required: true, message: "国家不能为空", trigger: "blur" }],
level: [{ required: true, message: "客户等级不能为空", trigger: "blur" }],
type: [{ required: true, message: "客户类别不能为空", trigger: "blur" }],
// createTime: [{ required: true, message: "创建时间不能为空", trigger: "blur" }],
source: [{ required: true, message: "客户来源不能为空", trigger: "blur" }],
customerService: [{ required: true, message: "跟进客服不能为空", trigger: "blur" }],
status: [{ required: true, message: "客户状态不能为空", trigger: "blur" }],
founder: [{ required: true, message: "创建人不能为空", trigger: "blur" }],
},
// 网点
nodeList: [],
showLine: false
}
},
methods: {
/** 取消按钮 */
cancel() {
this.open = false;
this.reset();
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (!valid) {
// return;
}
// 修改的提交
if (this.form.id != null) {
updateCustomer(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
return;
}
// 添加的提交
createCustomer(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
});
},
/** 表单重置 */
reset() {
this.form = {
id: undefined,
number: undefined,
name: undefined,
level: undefined,
country: undefined,
type: undefined,
agentId: undefined,
company: undefined,
address: undefined,
productType: undefined,
productId: undefined,
pickupPoint: undefined,
memberId: undefined,
birthday: undefined,
balance: undefined,
source: undefined,
picture: undefined,
customerService: undefined,
customerContacts: [],
customerLines: [],
promoter: undefined,
status: undefined,
founder: undefined,
department: undefined,
invoiceTitle: undefined,
licenseNumber: undefined,
bank: undefined,
bankNumber: undefined,
project: undefined,
billingAddress: undefined,
billingTell: undefined,
taxRate: undefined,
remarks: undefined,
arrivalConfirm: undefined,
weightUnit: undefined,
};
this.resetForm("form");
},
getCustomer(id) {
this.reset();
getCustomer(id).then(response => {
this.form = { ...this.form, ...response.data };
this.open = true;
this.title = "修改客户";
});
},
}
}
</script>
<style scoped>
</style>
......@@ -595,19 +595,21 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加客户";
this.$router.push('/customer/edit/0')
// this.reset();
// this.open = true;
// this.title = "添加客户";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id;
getCustomer(id).then(response => {
this.form = { ...this.form, ...response.data };
this.open = true;
this.title = "修改客户";
});
this.$router.push('/customer/edit/' + row.id)
// this.reset();
// const id = row.id;
// getCustomer(id).then(response => {
// this.form = { ...this.form, ...response.data };
// this.open = true;
// this.title = "修改客户";
// });
},
/** 提交按钮 */
submitForm() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment