javascript">import { ElMessage, ElMessageBox } from 'element-plus'; // 消息提示工具类 export function messageTip(msg,type){ ElMessage({ showClose:true,//消息提示是否可以关闭 center:true,//文字居中 message:msg, type:type, }); } export function getTokenName(){ return "crmSystem"; } export function getToken() { let token = window.sessionStorage.getItem(getTokenName()); if (!token) { //前面加了一个!,表示token不存在,token是空的,token没有值,这个意思 token = window.localStorage.getItem(getTokenName()); } if (token) { //表示token存在,token不是空的,token有值,这个意思 return token; } else { messageConfirm("请求token为空,是否重新去登录?").then(() => { //用户点击“确定”按钮就会触发then函数 //既然后端验证token未通过,那么前端的token肯定是有问题的,那没必要存储在浏览器中,直接删除一下 removeToken(); //跳到登录页 window.location.href = "/"; }).catch(() => { //用户点击“取消”按钮就会触发catch函数 messageTip("取消去登录", "warning"); }) } } export function removeToken(){ window.sessionStorage.removeItem(getTokenName()); window.localStorage.removeItem(getTokenName()); } export function messageConfirm(msg,warn){ return ElMessageBox.confirm( // 提示信息 msg, warn, { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ) } export function later(href){ setTimeout(() => { window.location.href=href; },500); } export function goBack(){ messageTip("返回成功","su***ess"); this.$router.back(); }
import { ElMessage, ElMessageBox } from 'element-plus';
// 消息提示工具类
export function messageTip(msg,type){
ElMessage({
showClose:true,//消息提示是否可以关闭
center:true,//文字居中
message:msg,
type:type,
});
}
export function getTokenName(){
return "crmSystem";
}
export function getToken() {
let token = window.sessionStorage.getItem(getTokenName());
if (!token) { //前面加了一个!,表示token不存在,token是空的,token没有值,这个意思
token = window.localStorage.getItem(getTokenName());
}
if (token) { //表示token存在,token不是空的,token有值,这个意思
return token;
} else {
messageConfirm("请求token为空,是否重新去登录?").then(() => { //用户点击“确定”按钮就会触发then函数
//既然后端验证token未通过,那么前端的token肯定是有问题的,那没必要存储在浏览器中,直接删除一下
removeToken();
//跳到登录页
window.location.href = "/";
}).catch(() => { //用户点击“取消”按钮就会触发catch函数
messageTip("取消去登录", "warning");
})
}
}
export function removeToken(){
window.sessionStorage.removeItem(getTokenName());
window.localStorage.removeItem(getTokenName());
}
export function messageConfirm(msg,warn){
return ElMessageBox.confirm(
// 提示信息
msg,
warn,
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
}
export function later(href){
setTimeout(() => {
window.location.href=href;
},500);
}
export function goBack(){
messageTip("返回成功","su***ess");
this.$router.back();
}
<template> <el-button type="primary" class="btn" @click="batchExportExcel">批量导出(Excel)</el-button> <el-button type="su***ess" class="btn" @click="chooseExportExcel">选择导出(Excel)</el-button> <el-table :data="customerList" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="50"/> <el-table-column type="index" label="序号" width="65"/> <el-table-column property="ownerDO.name" label="负责人" width="120" /> <el-table-column property="activityDO.name" label="所属活动"/> <el-table-column label="姓名"> <template #default="scope"> <a href="javascript:" @click="view(scope.row.id)">{{ scope.row.clueDO.fullName }}</a> </template> </el-table-column> <el-table-column property="appellationDO.typeValue" label="称呼"/> <el-table-column property="clueDO.phone" label="手机" width="120"/> <el-table-column property="clueDO.weixin" label="微信" width="120"/> <el-table-column property="needLoanDO.typeValue" label="是否贷款"/> <el-table-column property="intentionStateDO.typeValue" label="意向状态"/> <el-table-column property="stateDO.typeValue" label="线索状态"/> <el-table-column property="sourceDO.typeValue" label="线索来源"/> <el-table-column property="intentionProductDO.name" label="意向产品"/> <el-table-column property="nextContactTime" label="下次联系时间" width="165"/> <el-table-column label="操作" width="85"> <template #default="scope"> <el-button type="primary" @click="view(scope.row.id)">详情</el-button> </template> </el-table-column> </el-table> <div class="parent"> <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @prev-click="page" @next-click="page" @current-change="page"/> </div> </template> <script> import axios from 'axios'; import { getToken } from '../util/util'; import { doGet } from "../http/httpRequest.js"; export default { name : "customer", mounted(){ this.getData(1); }, data(){ return { //客户列表数据对象,初始值是空 customerList : [{ clueDO : {}, ownerDO : {}, activityDO : {}, appellationDO : {}, needLoanDO : {}, intentionStateDO : {}, stateDO : {}, sourceDO : {}, intentionProductDO : {}, }], //分页时每页显示多少条数据 pageSize : 0, //总共有多少条 total : 0, //客户的id数组,初始值是空 customerIdArray : [] } }, methods : { //勾选或者取消勾选时,触发该函数(已经勾选的数据或传给我们这个函数) handleSelectionChange(selectionnDataArray) { this.customerIdArray = []; console.log(selectionnDataArray); selectionnDataArray.forEach(data => { let customerId = data.id; this.customerIdArray.push(customerId); }) }, //获取线索分页列表数据 getData(current) { doGet("/api/customers", { current : current //当前页,前面是参数名,后面是参数值 }).then(resp => { if (resp.data.code === 200) { this.customerList = resp.data.data.list; // resp.data = R 对象 this.pageSize = resp.data.data.pageSize; this.total = resp.data.data.total; } }) }, //分页函数 page(number) { //number值是element-plus回调时传给我们的,number这个值就是当前页 this.getData(number); }, handleSelectionChange(){ }, // 批量导出Excel数据 batchExportExcel(){ let token = getToken(); //1、向后端发送一个请求 (我们来实现) let iframe = document.createElement("iframe") // if (ids) { // iframe.src = axios.defaults.baseURL + "/api/exportExcel?Authorization="+token + "&ids="+ ids; // } else { iframe.src = axios.defaults.baseURL + "/api/exportExcel?Authorization="+token // } iframe.style.display = "none"; //iframe隐藏,页面上不要显示出来 document.body.appendChild(iframe); }, chooseExportExcel(){ } } } </script> <style> </style>
<template>
<el-button type="primary" class="btn" @click="batchExportExcel">批量导出(Excel)</el-button>
<el-button type="su***ess" class="btn" @click="chooseExportExcel">选择导出(Excel)</el-button>
<el-table
:data="customerList"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"/>
<el-table-column type="index" label="序号" width="65"/>
<el-table-column property="ownerDO.name" label="负责人" width="120" />
<el-table-column property="activityDO.name" label="所属活动"/>
<el-table-column label="姓名">
<template #default="scope">
<a href="javascript:" @click="view(scope.row.id)">{{ scope.row.clueDO.fullName }}</a>
</template>
</el-table-column>
<el-table-column property="appellationDO.typeValue" label="称呼"/>
<el-table-column property="clueDO.phone" label="手机" width="120"/>
<el-table-column property="clueDO.weixin" label="微信" width="120"/>
<el-table-column property="needLoanDO.typeValue" label="是否贷款"/>
<el-table-column property="intentionStateDO.typeValue" label="意向状态"/>
<el-table-column property="stateDO.typeValue" label="线索状态"/>
<el-table-column property="sourceDO.typeValue" label="线索来源"/>
<el-table-column property="intentionProductDO.name" label="意向产品"/>
<el-table-column property="nextContactTime" label="下次联系时间" width="165"/>
<el-table-column label="操作" width="85">
<template #default="scope">
<el-button type="primary" @click="view(scope.row.id)">详情</el-button>
</template>
</el-table-column>
</el-table>
<div class="parent">
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@prev-click="page"
@next-click="page"
@current-change="page"/>
</div>
</template>
<script>
import axios from 'axios';
import { getToken } from '../util/util';
import { doGet } from "../http/httpRequest.js";
export default {
name : "customer",
mounted(){
this.getData(1);
},
data(){
return {
//客户列表数据对象,初始值是空
customerList : [{
clueDO : {},
ownerDO : {},
activityDO : {},
appellationDO : {},
needLoanDO : {},
intentionStateDO : {},
stateDO : {},
sourceDO : {},
intentionProductDO : {},
}],
//分页时每页显示多少条数据
pageSize : 0,
//总共有多少条
total : 0,
//客户的id数组,初始值是空
customerIdArray : []
}
},
methods : {
//勾选或者取消勾选时,触发该函数(已经勾选的数据或传给我们这个函数)
handleSelectionChange(selectionnDataArray) {
this.customerIdArray = [];
console.log(selectionnDataArray);
selectionnDataArray.forEach(data => {
let customerId = data.id;
this.customerIdArray.push(customerId);
})
},
//获取线索分页列表数据
getData(current) {
doGet("/api/customers", {
current : current //当前页,前面是参数名,后面是参数值
}).then(resp => {
if (resp.data.code === 200) {
this.customerList = resp.data.data.list; // resp.data = R 对象
this.pageSize = resp.data.data.pageSize;
this.total = resp.data.data.total;
}
})
},
//分页函数
page(number) { //number值是element-plus回调时传给我们的,number这个值就是当前页
this.getData(number);
},
handleSelectionChange(){
},
// 批量导出Excel数据
batchExportExcel(){
let token = getToken();
//1、向后端发送一个请求 (我们来实现)
let iframe = document.createElement("iframe")
// if (ids) {
// iframe.src = axios.defaults.baseURL + "/api/exportExcel?Authorization="+token + "&ids="+ ids;
// } else {
iframe.src = axios.defaults.baseURL + "/api/exportExcel?Authorization="+token
// }
iframe.style.display = "none"; //iframe隐藏,页面上不要显示出来
document.body.appendChild(iframe);
},
chooseExportExcel(){
}
}
}
</script>
<style>
</style>