|
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-row :gutter="280">
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div class="flex-between border-b ht50">
|
|
|
|
|
|
<div class="flex-center">
|
|
|
|
|
|
<img src="../../assets/img/icon_c.png" class="mgr10" />
|
|
|
|
|
|
<p class="fz-18 c-black">客户资源管理系统</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<back @click.native="goto('background')"></back>
|
|
|
|
|
|
<!-- <el-button type="text"><i class="el-icon-arrow-left"></i>返回</el-button> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex-between mgtb20">
|
|
|
|
|
|
<div class="df-ac">
|
|
|
|
|
|
<div class=" not-zoom mgr20 font-blue">创建时间</div>
|
|
|
|
|
|
<el-radio-group class="round-radio" v-model="searchForm.month" @change="itemRadio">
|
|
|
|
|
|
<el-radio-button class="btn-group" v-for="(item, index) in dateList" :key="index" :label="item.id">{{item.name}}</el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="df-ac wd25">
|
|
|
|
|
|
<div class="df-ac not-zoom mgr20 mgl20 font-blue font">自定义</div>
|
|
|
|
|
|
<div label="自定义" class=" system">
|
|
|
|
|
|
<el-date-picker
|
|
|
|
|
|
class="wd100"
|
|
|
|
|
|
v-model="searchForm.date"
|
|
|
|
|
|
align="right"
|
|
|
|
|
|
unlink-panels
|
|
|
|
|
|
type="daterange"
|
|
|
|
|
|
start-placeholder="开始日期"
|
|
|
|
|
|
end-placeholder="结束日期"
|
|
|
|
|
|
format="yyyy-MM-dd"
|
|
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
|
|
@change="selectTime"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
>
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="df">
|
|
|
|
|
|
<div class="not-zoom df-ac mgr20 font-blue">客户类型</div>
|
|
|
|
|
|
<el-select v-model="searchForm.cusType" clearable placeholder="请选择类型">
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="(item, index) in cusTypeList"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
:label="item.name"
|
|
|
|
|
|
:value="item.value"
|
|
|
|
|
|
></el-option>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<div class="flex-center">
|
|
|
|
|
|
<el-input
|
|
|
|
|
|
placeholder="搜索客户编号/客户名称"
|
|
|
|
|
|
class="mgr20"
|
|
|
|
|
|
v-model="searchForm.keyword"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
></el-input>
|
|
|
|
|
|
<el-button type="primary" size="small" round @click="search">查询</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="shadow radius10 pdt20">
|
|
|
|
|
|
<div class="flex-between mab20 mgl10">
|
|
|
|
|
|
<div class="flex-center">
|
|
|
|
|
|
<p class="hr_tag"></p>
|
|
|
|
|
|
<span class="hr_text">客户列表</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="mgr10">
|
|
|
|
|
|
<el-button v-if="$router.currentRoute.meta.btn.includes('新增客户')" type="primary" size="small" round icon="el-icon-plus" @click.native="estimatePage('workbench-client-message')">新增客户</el-button>
|
|
|
|
|
|
<el-button v-if="$router.currentRoute.meta.btn.includes('导入客户信息')" type="primary" plain size="small" round icon="el-icon-download" @click="importExcal"
|
|
|
|
|
|
>批量导入</el-button
|
|
|
|
|
|
><!-- <a :href="excelExport" class="downLoad_btn"></a> -->
|
|
|
|
|
|
<el-button v-if="$router.currentRoute.meta.btn.includes('导出客户信息')" @click="appleExportFile" type="primary" plain size="small" round icon="el-icon-upload2"
|
|
|
|
|
|
>导出</el-button>
|
|
|
|
|
|
<el-button v-if="$router.currentRoute.meta.btn.includes('删除客户')" type="danger" size="small" round icon="el-icon-delete" @click="delAllSelection">删除</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<Background-list
|
|
|
|
|
|
@getCheckbox="SelectionChange"
|
|
|
|
|
|
:nowPage="pageNo"
|
|
|
|
|
|
:totalPage="totalPage"
|
|
|
|
|
|
:tableData="cusData"
|
|
|
|
|
|
@getPaging="currentChange"
|
|
|
|
|
|
:totalCount="totalCount"
|
|
|
|
|
|
@getSize="getSize"
|
|
|
|
|
|
>
|
|
|
|
|
|
<template v-slot:tableData>
|
|
|
|
|
|
<el-table-column prop="code" label="客户编号" align="center"></el-table-column>
|
|
|
|
|
|
<el-table-column prop="name" label="客户姓名" align="center"></el-table-column>
|
|
|
|
|
|
<el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
|
|
|
|
|
|
<el-table-column prop="createTime" label="创建日期" align="center"></el-table-column>
|
|
|
|
|
|
<el-table-column prop="manager" label="客户经理" align="center"></el-table-column>
|
|
|
|
|
|
<el-table-column prop="type" label="客户类型" align="center"></el-table-column>
|
|
|
|
|
|
<el-table-column prop="departments" label="所属部门" align="center"></el-table-column>
|
|
|
|
|
|
<el-table-column label="操作" align="center">
|
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
|
<el-button v-if="$router.currentRoute.meta.btn.includes('查看客户')" type="text" @click="estimatePage(scope, scope.$index, 'watch')">查看</el-button>
|
|
|
|
|
|
<el-button v-if="$router.currentRoute.meta.btn.includes('编辑客户')" type="text" @click="estimatePage(scope, scope.$index, 'edit')">编辑</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column></template
|
|
|
|
|
|
>
|
|
|
|
|
|
</Background-list>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 批量导入 -->
|
|
|
|
|
|
<el-dialog title="批量导入" :visible.sync="importVisible" width="24%" center :close-on-click-modal="false">
|
|
|
|
|
|
<div class="flex-start-around">
|
|
|
|
|
|
<el-button type="primary" round
|
|
|
|
|
|
><a :href="excelTemplate" class="downLoad_btn_a">模板下载<i class="el-icon-download el-icon--right"></i></a
|
|
|
|
|
|
></el-button>
|
|
|
|
|
|
<el-upload
|
|
|
|
|
|
accept=".xls,.xlsx"
|
|
|
|
|
|
:on-remove="handleRemove"
|
|
|
|
|
|
:on-error="uploadError"
|
|
|
|
|
|
:on-success="uploadSuccess"
|
|
|
|
|
|
:before-remove="beforeRemove"
|
|
|
|
|
|
:limit="1"
|
|
|
|
|
|
:on-exceed="handleExceed"
|
|
|
|
|
|
:action="excelImport"
|
|
|
|
|
|
:file-list="uploadList"
|
|
|
|
|
|
name="file"
|
|
|
|
|
|
:headers="importHeaders"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-button type="primary" round class="ml20">导入文件<i class="el-icon-upload2 el-icon--right"></i></el-button>
|
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="download_tips">tips: 请先下载模板再进行导入文件</p>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import { querycustomerList, excelExport, excelTemplate, excelImport, deleteCustomer } from '../../utils/api';
|
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
|
var mytoken = sessionStorage.getItem('token');
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
searchForm: {
|
|
|
|
|
|
month: 0,
|
|
|
|
|
|
date: '',
|
|
|
|
|
|
cusType: '',
|
|
|
|
|
|
keyword: '',
|
|
|
|
|
|
startTime: '',
|
|
|
|
|
|
endTime: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
dateList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 0,
|
|
|
|
|
|
name: '不限'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 3,
|
|
|
|
|
|
name: '3个月内'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 6,
|
|
|
|
|
|
name: '6个月内'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 9,
|
|
|
|
|
|
name: '9个月内'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 12,
|
|
|
|
|
|
name: '1年内'
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
cusTypeList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '个人',
|
|
|
|
|
|
value: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '企业',
|
|
|
|
|
|
value: 1
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
cusData: [],
|
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
|
pageNumber: 10,
|
|
|
|
|
|
totals: 1,
|
|
|
|
|
|
totalPage: 1,
|
|
|
|
|
|
importVisible: false,
|
|
|
|
|
|
uploadList: [],
|
|
|
|
|
|
multipleSelection: [],
|
|
|
|
|
|
importHeaders: { token: mytoken },
|
|
|
|
|
|
excelExport: excelExport,
|
|
|
|
|
|
excelTemplate: excelTemplate,
|
|
|
|
|
|
excelImport: excelImport,
|
|
|
|
|
|
totalCount:10
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
created(){
|
|
|
|
|
|
// v-if="$router.currentRoute.meta.btn.includes('新建审批')"
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
this.getData();
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 跳转
|
|
|
|
|
|
goto(path) {
|
|
|
|
|
|
this.$router.push('/' + path);
|
|
|
|
|
|
},
|
|
|
|
|
|
// 查询客户
|
|
|
|
|
|
async getData() {
|
|
|
|
|
|
let res = await querycustomerList({
|
|
|
|
|
|
page: this.pageNo,
|
|
|
|
|
|
size: this.pageNumber,
|
|
|
|
|
|
codeOrName: this.searchForm.keyword,
|
|
|
|
|
|
customerType: this.searchForm.cusType,
|
|
|
|
|
|
createTime: this.searchForm.month,
|
|
|
|
|
|
startTime: this.searchForm.startTime,
|
|
|
|
|
|
endTime: this.searchForm.endTime
|
|
|
|
|
|
});
|
|
|
|
|
|
res.data.list.map((e) => {
|
|
|
|
|
|
e.type = e.type == 0 ? '个人类型' : '企业类型';
|
|
|
|
|
|
if (e.departments) {
|
|
|
|
|
|
e.departments = e.departments.join(',');
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
this.cusData = res.data.list;
|
|
|
|
|
|
this.totals = res.data.totalCount;
|
|
|
|
|
|
this.totalPage = res.data.totalPage;
|
|
|
|
|
|
this.totalCount = res.data.totalCount
|
|
|
|
|
|
},
|
|
|
|
|
|
getSize(val){
|
|
|
|
|
|
this.pageNo.page = 1
|
|
|
|
|
|
this.pageNumber = val
|
|
|
|
|
|
this.getData()
|
|
|
|
|
|
},
|
|
|
|
|
|
importExcal() {
|
|
|
|
|
|
this.importVisible = true;
|
|
|
|
|
|
this.uploadList = [];
|
|
|
|
|
|
},
|
|
|
|
|
|
// 导出模板
|
|
|
|
|
|
// downLoadTemplate(){
|
|
|
|
|
|
// window.open(this.api.excelTemplate)
|
|
|
|
|
|
// },
|
|
|
|
|
|
// 上传文件
|
|
|
|
|
|
handleExceed(files, fileList) {
|
|
|
|
|
|
this.$message.warning(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
|
|
|
|
|
|
},
|
|
|
|
|
|
uploadSuccess(response, file, fileList) {
|
|
|
|
|
|
if (response.code == 10000) {
|
|
|
|
|
|
this.$message.success('上传成功');
|
|
|
|
|
|
this.importVisible = false;
|
|
|
|
|
|
this.getData();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.$message.error(response.message);
|
|
|
|
|
|
}
|
|
|
|
|
|
// this.uploadList.push({ name: file.name, url: response.message.fileUrl });
|
|
|
|
|
|
},
|
|
|
|
|
|
uploadError(err, file, fileList) {
|
|
|
|
|
|
this.$message({
|
|
|
|
|
|
message: '上传出错，请重试！',
|
|
|
|
|
|
type: 'error',
|
|
|
|
|
|
center: true
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
beforeRemove(file, fileList) {
|
|
|
|
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
|
|
|
|
|
},
|
|
|
|
|
|
handleRemove(file, fileList) {
|
|
|
|
|
|
this.uploadList = fileList;
|
|
|
|
|
|
},
|
|
|
|
|
|
// 导出excal
|
|
|
|
|
|
// downLoad(){
|
|
|
|
|
|
// window.open(this.api.excelExport)
|
|
|
|
|
|
// },
|
|
|
|
|
|
itemRadio(val) {
|
|
|
|
|
|
this.searchForm.month = val;
|
|
|
|
|
|
this.searchForm.date = '';
|
|
|
|
|
|
this.searchForm.startTime = '';
|
|
|
|
|
|
this.searchForm.endTime = '';
|
|
|
|
|
|
this.search()
|
|
|
|
|
|
},
|
|
|
|
|
|
// 选择时间
|
|
|
|
|
|
selectTime(val) {
|
|
|
|
|
|
if (val) {
|
|
|
|
|
|
this.searchForm.startTime = val[0];
|
|
|
|
|
|
this.searchForm.endTime = val[1];
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.searchForm.startTime = '';
|
|
|
|
|
|
this.searchForm.endTime = '';
|
|
|
|
|
|
}
|
|
|
|
|
|
this.searchForm.month = 0;
|
|
|
|
|
|
},
|
|
|
|
|
|
search() {
|
|
|
|
|
|
this.pageNo = 1;
|
|
|
|
|
|
this.getData();
|
|
|
|
|
|
},
|
|
|
|
|
|
getRowKeys(row) {
|
|
|
|
|
|
return row.id;
|
|
|
|
|
|
},
|
|
|
|
|
|
SelectionChange(val) {
|
|
|
|
|
|
this.multipleSelection = val;
|
|
|
|
|
|
},
|
|
|
|
|
|
// 批量删除客户
|
|
|
|
|
|
delAllSelection() {
|
|
|
|
|
|
if (this.multipleSelection.length != 0) {
|
|
|
|
|
|
let newArr = this.multipleSelection;
|
|
|
|
|
|
let delList = newArr.map((e) => e.id);
|
|
|
|
|
|
this.$confirm('确定要删除选中客户吗？', '提示', {
|
|
|
|
|
|
type: 'warning'
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
deleteCustomer(delList)
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
this.multipleSelection = [];
|
|
|
|
|
|
this.$message.success('删除成功');
|
|
|
|
|
|
this.getData();
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((res) => {});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(() => {});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.$message.error('请先选择客户 ！');
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
currentChange(val) {
|
|
|
|
|
|
this.pageNo = val;
|
|
|
|
|
|
this.getData();
|
|
|
|
|
|
},
|
|
|
|
|
|
// 判断是新增，审查，编辑页,取ID
|
|
|
|
|
|
estimatePage(data, index, val) {
|
|
|
|
|
|
if (val && data) {
|
|
|
|
|
|
if (val == 'watch') {
|
|
|
|
|
|
sessionStorage.removeItem('work-client-companyId')
|
|
|
|
|
|
sessionStorage.setItem('watch-client', true);
|
|
|
|
|
|
sessionStorage.setItem('work-client-id', data.row.id);
|
|
|
|
|
|
if(data.row.companyId){
|
|
|
|
|
|
sessionStorage.setItem('work-client-companyId', data.row.companyId);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.goto('addcustomer');
|
|
|
|
|
|
} else if (val == 'edit') {
|
|
|
|
|
|
sessionStorage.removeItem('work-client-companyId')
|
|
|
|
|
|
sessionStorage.setItem('edit-client', true);
|
|
|
|
|
|
sessionStorage.setItem('work-client-id', data.row.id);
|
|
|
|
|
|
if(data.row.companyId){
|
|
|
|
|
|
sessionStorage.setItem('work-client-companyId', data.row.companyId);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.goto('addcustomer');
|
|
|
|
|
|
} else if(val == 'delete'){
|
|
|
|
|
|
// 这里需要切换弹框显示，如果未审核，切换提示审核弹框，
|
|
|
|
|
|
// 已审核，则显示确认删除
|
|
|
|
|
|
// 状态未定义，先不做判断
|
|
|
|
|
|
this.deleteBox = true
|
|
|
|
|
|
this.selectId = data.row.id
|
|
|
|
|
|
}
|
|
|
|
|
|
}else{
|
|
|
|
|
|
//新增
|
|
|
|
|
|
this.goto('addcustomer');
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 业务申请--导出
|
|
|
|
|
|
appleExportFile() {
|
|
|
|
|
|
let url = this.excelExport
|
|
|
|
|
|
let downloadElement = document.createElement('a');
|
|
|
|
|
|
downloadElement.href = url;
|
|
|
|
|
|
// downloadElement.download = '业务申请导出文件'; //下载后文件名
|
|
|
|
|
|
document.body.appendChild(downloadElement);
|
|
|
|
|
|
downloadElement.click(); //点击下载
|
|
|
|
|
|
document.body.removeChild(downloadElement); //下载完成移除元素
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
@import url('../../assets/css/common.scss');
|
|
|
|
|
|
.customer_view {
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
padding: 20px 0 10px 0;
|
|
|
|
|
|
border-bottom: 2px solid #f2f2f2;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 26px;
|
|
|
|
|
|
height: 26px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.datePicker {
|
|
|
|
|
|
margin-right: 90px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.datePicker /deep/ .el-input__inner {
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
|
margin-right: 90px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.datePicker /deep/ .el-date-editor--daterange.el-input__inner {
|
|
|
|
|
|
width: 415px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.mar_top30 {
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.download_tips {
|
|
|
|
|
|
color: #ff9784;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.downLoad_btn {
|
|
|
|
|
|
color: #00b9ff;
|
|
|
|
|
|
&:hover{
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.downLoad_btn_a {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-radio-button__inner {
|
|
|
|
|
|
padding-left: 12px !important;
|
|
|
|
|
|
padding-right: 12px !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
