<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('客户编号')" prop="number">
<el-input v-model="queryParams.number" :placeholder="$t('请输入客户编号')" clearable @keyup.enter.native="handleQuery"/>
</el-form-item>
<el-form-item :label="$t('客户名称')" prop="name">
<el-input v-model="queryParams.name" :placeholder="$t('请输入客户名称')" clearable @keyup.enter.native="handleQuery"/>
</el-form-item>
<el-form-item :label="$t('客户等级')" prop="level">
<el-select clearable v-model="queryParams.level" :placeholder="$t('请选择客户等级')" clearable size="small">
<el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_LEVEL)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('联系方式')">
<el-input :placeholder="$t('请输入联系方式')" v-model="queryParams.defaultContactPhone"></el-input>
</el-form-item>
<el-form-item :label="$t('客户类别')" prop="level">
<dict-selector :type="DICT_TYPE.CUSTOMER_TYPE" v-model="queryParams.type"></dict-selector>
</el-form-item>
<el-form-item :label="$t('客户经理')" prop="customerService">
<el-select clearable v-model="queryParams.customerService" :placeholder="$t('请选择客户经理')" clearable size="small">
<el-option v-for="dict in customerServiceList"
:key="dict.id" :label="dict.nickname" :value="dict.id"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('客户来源')" prop="source">
<el-select clearable v-model="queryParams.source" :placeholder="$t('请选择客户来源')" clearable size="small">
<el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_SOURCE)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('国家')" prop="source">
<el-select clearable v-model="form.country" :placeholder="$t('请选择国家')">
<el-option v-for="dict in countryList"
:key="dict.id" :label=" isChinese ? dict.nameZh : dict.nameEn" :value="parseInt(dict.id)" />
</el-select>
</el-form-item>
<el-form-item :label="$t('客户状态')" prop="status">
<el-select clearable v-model="queryParams.status" :placeholder="$t('请选择客户状态')" clearable size="small">
<el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_STATUS)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('创建时间')">
<el-date-picker clearable v-model="dateRangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
</el-form-item>
<el-form-item :label="$t('信用等级')" prop="department">
<el-select clearable v-model="queryParams.creditLevel" >
<el-option v-for="(item,index) in creditList" :label=" isChinese ? item.nameZh : item.nameEn" :key="index" :value="item.id" ></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('市场获客')" prop="department">
<dict-selector clearable :type="DICT_TYPE.ECW_CUSTOMER_RESOURCE_TYPE" v-model="queryParams.marketType" formatter="number"></dict-selector>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('搜索')}}</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">{{$t('重置')}}</el-button>
</el-form-item>
</el-form>
<!-- 操作工具栏 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="$router.push({path:'/customer/add-edit/0',query:{isCustomerServiceConfirmed:true,}})"
v-hasPermi="['ecw:customer: treat-create']">{{$t('新增')}}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
v-hasPermi="['ecw:customer:treat-export']">{{$t('导出')}}</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column :label="$t('客户编号')" align="center" prop="number" >
<template v-slot="{row}">
<router-link :to="'/customer/query/' + row.id">
{{row.number}}
</router-link>
</template>
</el-table-column>
<el-table-column :label="$t('客户名称')" align="center" prop="name" />
<el-table-column :label="$t('客户等级')" align="center" prop="vipLevelNameZh">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.CUSTOMER_LEVEL" :value="scope.row.level" />
</template>
</el-table-column>
<el-table-column :label="$t('信用等级')" :prop="isChinese ? 'creditLevelNameZh' : 'creditLevelNameEn'"></el-table-column>
<el-table-column :label="$t('客户状态')" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.CUSTOMER_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column :label="$t('主联系人')" prop="defaultContactName"></el-table-column>
<el-table-column :label="$t('主联系方式')" prop="defaultContactPhone">
<template v-slot="{row}">{{row.defaultContactPhone}}</template>
</el-table-column>
<el-table-column :label="$t('创建时间')" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('分配时间')" align="center" prop="createTime" width="180">
<template v-slot = {row}>
<span>{{ parseTime(row.customerServiceAssignedTime ) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('客户经理')" align="center" prop="customerServiceName">
</el-table-column>
<el-table-column :label="$t('国家')" align="center" prop="country" :formatter="countryFormatter"></el-table-column>
<el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleConfirmService(scope.row)"
v-hasPermi="['ecw:customer:treat-accept']">{{$t('确认接收')}}</el-button>
<el-button size="mini" type="text" @click="handOver(scope.row)"
v-hasPermi="['ecw:customer:treat-transfer']">{{$t('移交')}}</el-button>
<router-link style="margin: 0 10px;" to="/offer/create">
<el-button v-has-permi="['ecw:customer:treat-quoted-price']" size="mini" type="text">
{{$t('报价')}}
</el-button>
</router-link>
<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
v-hasPermi="['ecw:customer:treat-perfect']">{{$t('完善')}}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
<!-- 对话框(添加 / 修改) -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-col :span="12">
<el-form-item :label="$t('客户名称')" prop="name">
<el-input v-model="form.name" :placeholder="$t('请输入客户名称')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('国家')" prop="country">
<el-select v-model="form.country" :placeholder="$t('请选择国家')">
<el-option v-for="dict in this.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="$t('客户等级')" prop="level">
<el-select v-model="form.level" :placeholder="$t('请选择客户等级')">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.CUSTOMER_LEVEL)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('所属代理')" prop="agentId">
<el-select v-model="form.agentId" :placeholder="$t('请选择所属代理')">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('联系地址')" prop="address">
<el-input v-model="form.address" :placeholder="$t('请输入联系地址')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('客户类别')" prop="type">
<el-select v-model="form.type" :placeholder="$t('请选择客户类别')">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.CUSTOMER_TYPE)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('常用提货网点')" prop="pickupPoint">
<el-select v-model="form.pickupPoint" :placeholder="$t('请输入常用提货网点')">
<el-option :label="$t('请选择字典生成')" value="" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('公司名称')" prop="company">
<el-input v-model="form.company" :placeholder="$t('请输入公司名称')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('客户生日')" prop="birthday">
<el-input v-model="form.birthday" :placeholder="$t('请输入客户生日')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('产品类型')" prop="productType">
<el-select v-model="form.productType" :placeholder="$t('请选择产品类型')">
<el-option :label="$t('请选择字典生成')" value="" />
</el-select>
</el-form-item>
<el-form-item :label="$t('产品id')" prop="productId">
<el-input v-model="form.productId" :placeholder="$t('请输入产品id')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('客户来源')" prop="source">
<el-select v-model="form.source" :placeholder="$t('请选择客户来源')">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.CUSTOMER_SOURCE)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('结算方式')" prop="balance">
<el-select v-model="form.balance" :placeholder="$t('请选择结算方式')">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.CUSTOMER_BALANCE)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('客户经理')" prop="customerService">
<el-select v-model="form.customerService" :placeholder="$t('请选择客户经理')">
<el-option v-for="dict in serviceStaffOptions"
:key="dict.id" :label="dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('图片')" prop="picture">
<el-input v-model="form.picture" :placeholder="$t('请输入图片')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('客户状态')" prop="status">
<el-select v-model="form.status" :placeholder="$t('请选择客户状态')">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.CUSTOMER_STATUS)"
:key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('推介人')" prop="promoter">
<el-input v-model="form.promoter" :placeholder="$t('请输入推介人')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('创建人')" prop="founder">
<el-input v-model="form.founder" :placeholder="$t('请输入创建人')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('创建时间')" prop="founder">
<el-input v-model="form.founder" :placeholder="$t('请输入创建人')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('备注')" prop="remarks">
<el-input v-model="form.remarks" :placeholder="$t('请输入备注')" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="$t('到仓确认')" 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="$t('重货标准(CBM)')" prop="weightUnit">
<el-input v-model="form.weightUnit" :placeholder="$t('请输入重货标准(CBM)')" />
</el-form-item>
</el-col>
<el-form-item :label="$t('关联会员账号')" prop="memberId">
<el-input v-model="form.memberId" :placeholder="$t('请输入关联会员账号')" />
</el-form-item>
<el-form-item :label="$t('部门')" prop="department">
<el-input v-model="form.department" :placeholder="$t('请输入部门')" />
</el-form-item>
<el-form-item :label="$t('发票抬头')" prop="invoiceTitle">
<el-input v-model="form.invoiceTitle" :placeholder="$t('请输入发票抬头')" />
</el-form-item>
<el-form-item :label="$t('纳税人识别号')" prop="licenseNumber">
<el-input v-model="form.licenseNumber" :placeholder="$t('请输入纳税人识别号')" />
</el-form-item>
<el-form-item :label="$t('开户行')" prop="bank">
<el-input v-model="form.bank" :placeholder="$t('请输入开户行')" />
</el-form-item>
<el-form-item :label="$t('账户')" prop="bankNumber">
<el-input v-model="form.bankNumber" :placeholder="$t('请输入账户')" />
</el-form-item>
<el-form-item :label="$t('项目')" prop="project">
<el-input v-model="form.project" :placeholder="$t('请输入项目')" />
</el-form-item>
<el-form-item :label="$t('开票地址')" prop="billingAddress">
<el-input v-model="form.billingAddress" :placeholder="$t('请输入开票地址')" />
</el-form-item>
<el-form-item :label="$t('开票电话')" prop="billingTell">
<el-input v-model="form.billingTell" :placeholder="$t('请输入开票电话')" />
</el-form-item>
<el-form-item :label="$t('税率')" prop="taxRate">
<el-input v-model="form.taxRate" :placeholder="$t('请输入税率')" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">{{$t('确 定')}}</el-button>
<el-button @click="cancel">{{$t('取 消')}}</el-button>
</div>
</el-dialog>
<!-- 移交 -->
<!-- 对话框(添加 / 修改) -->
<el-dialog :title="title" :visible.sync="openHandOver" width="500px" append-to-body>
<el-form ref="handOverForm" :model="handOverForm" :rules="rules" label-width="80px">
<el-form-item :label="$t('客户经理')" prop="customerServiceId">
<el-select v-model="handOverForm.customerServiceId" :placeholder="$t('请选择客户经理')" clearable filterable>
<el-option v-for="user in serviceStaffOptions"
:key="user.id" :value="user.id"
:label="user.nickname" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitHandOverForm">{{$t('确 定')}}</el-button>
<el-button @click="cancelHandOver">{{$t('取 消')}}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
updateCustomer,
getCustomer,
exportCustomerExcel,
getWaitForConfirmList,
confirm,
waiteConfirmExportExcel
} from "@/api/ecw/customer";
import { listServiceUser } from "@/api/system/user"
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
import {CommonStatusEnum} from '@/utils/constants'
import {handOverCustomer} from "../../../api/ecw/customer";
import {getCountryListAll} from "@/api/ecw/country";
import {getCreditPage} from "@/api/customer/credit";
export default {
name: "EcwCustomerconfirmIndex",
activated() {
this.getList();
},
computed:{
DICT_TYPE() {
return DICT_TYPE
},
isChinese(){
return this.$i18n.locale === 'zh_CN'
},
},
components: {
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 客户列表
list: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
openHandOver: false,
dateRangeCreateTime: [],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
number: null,
name: null,
level: null,
source: null,
customerService: null,
status: null,
department: null,
creditLevel:null,
country:null,
marketType:null,
},
// 表单参数
form: {},
handOverForm: {},
// 表单校验
rules: {
name: [{ required: true, message: this.$t('客户名称不能为空'), trigger: "blur" }],
weightUnit: [{ required: true, message: this.$t('重货标准(CBM)不能为空'), trigger: "blur" }],
},
serviceStaffOptions: [],
customerServiceList:[],
countryList:[],
creditList:[]
};
},
created() {
this.getList();
getCreditPage({page:1,rows:999}).then(r => {
this.creditList = r.data.list
})
// 获得客服人员列表
listServiceUser().then(response => {
this.serviceStaffOptions = response.data;
})
listServiceUser().then(r=>{
this.customerServiceList = r.data;
})
getCountryListAll().then(r => {
this.countryList = r.data
})
},
methods: {
getDictDatas,
countryFormatter(row, column, cellValue) {
const country = this.countryList.find((e) => e.id === cellValue)
return this.isChinese ? country?.nameZh : country?.nameEn
},
/** 查询列表 */
getList() {
this.loading = true;
// 处理查询参数
let params = {...this.queryParams};
this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime', false);
// 执行查询
getWaitForConfirmList(params).then(response => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
});
},
/** 取消按钮 */
cancel() {
this.open = false;
this.reset();
},
/** 表单重置 */
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,
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");
},
/** 表单重置 */
resetHandOverForm() {
this.form = {
customerIdList: undefined,
customerServiceId: undefined
};
this.resetForm("handOverForm");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRangeCreateTime = [];
this.resetForm("queryForm");
this.queryParams = {
pageNo: 1,
pageSize: 10,
number: null,
name: null,
level: null,
source: null,
customerService: null,
status: null,
department: null,
creditLevel:null,
country:null,
}
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = this.$t('添加客户');
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id;
this.$router.push({path:'/customer/perfect/'+id,query:{isCustomerServiceConfirmed:true,}});
// getCustomer(id).then(response => {
// this.form = response.data;
// this.open = true;
// this.title = this.$t("完善客户");
// });
},
/** 修改按钮操作 */
handleConfirmService(row) {
const id = row.id;
this.$modal.confirm(this.$t('是否确认接收客户')+'["' + row.name + '"]?').then(function() {
return confirm({"customerId": id});
}).then(() => {
this.getList();
this.$modal.msgSuccess(this.$t('接收成功'));
}).catch(() => {});
},
/** 修改按钮操作 */
handOver(row) {
this.resetHandOverForm();
this.openHandOver = true;
this.handOverForm.customerIdList = [row.id];
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (!valid) {
return;
}
// 修改的提交
if (this.form.id != null) {
updateCustomer(this.form).then(response => {
this.$modal.msgSuccess(this.$t('修改成功'));
this.open = false;
this.getList();
});
return;
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const id = row.id;
this.$modal.confirm(this.$t('是否确认删除客户编号为"') + id + this.$t('"的数据项?')).then(function() {
return deleteCustomer(id);
}).then(() => {
this.getList();
this.$modal.msgSuccess(this.$t('删除成功'));
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = {...this.queryParams};
params.pageNo = undefined;
params.pageSize = undefined;
this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
// 执行导出
this.$modal.confirm(this.$t('是否确认导出我的待接受客户数据项?')).then(() => {
this.exportLoading = true;
return waiteConfirmExportExcel(params);
}).then(response => {
this.$download.excel(response, `${this.$t('我的待接收客户')}.xls`);
this.exportLoading = false;
}).catch(() => {});
},
/** 提交按钮 */
submitHandOverForm() {
// 移交的提交
handOverCustomer(this.handOverForm).then(response => {
this.$modal.msgSuccess(this.$t('移交成功'));
this.openHandOver = false;
this.getList();
});
},
/** 取消按钮 */
cancelHandOver() {
this.openHandOver = false;
this.handOverForm = {
customerId: undefined,
customerIdList : undefined
};
},
}
};
</script>