|
|
<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> |
|
|
|
|
|
|
