<template> <el-container> <!-- 左侧 --> <el-aside :width="isShowed ? '3.4%' : '17%'"> <div class="menuTitle">{{ isShowed ? "" : title }}</div> <!-- 菜单 --> <el-menu active-text-color="#ffd04b" background-color="#334157" class="el-menu-vertical-demo" default-active="2" style="border-right: solid 0px;" :unique-opened="true" text-color="#fff" :collapse="isShowed" :collapse-transition="false" :router="true" > <!-- 市场活动菜单 --> <el-sub-menu index="1"> <template #title> <el-icon><OfficeBuilding /></el-icon> <span>市场活动</span> </template> <!-- 二级目录 --> <el-menu-item index="/dashboard/activity"> <el-icon><OfficeBuilding /></el-icon> 市场活动 </el-menu-item> </el-sub-menu> <!-- 线索管理菜单 --> <el-sub-menu index="2"> <template #title> <el-icon><Operation /></el-icon> <span>线索管理</span> </template> <!-- 二级目录 --> <el-menu-item index="/dashboard/clue"> <el-icon><OfficeBuilding /></el-icon> 线索管理 </el-menu-item> </el-sub-menu> <!-- 客户管理菜单 --> <el-sub-menu index="3"> <template #title> <el-icon><User /></el-icon> <span>客户管理</span> </template> <!-- 二级目录 --> <el-menu-item index="/dashboard/customer"> <el-icon><OfficeBuilding /></el-icon> 客户管理 </el-menu-item> </el-sub-menu> <!-- 交易管理菜单 --> <el-sub-menu index="4"> <template #title> <el-icon><location /></el-icon> <span>交易管理</span> </template> <!-- 二级目录 --> <el-menu-item index="4-1"> <el-icon><OfficeBuilding /></el-icon> 交易管理 </el-menu-item> <el-menu-item index="4-2"> <el-icon><OfficeBuilding /></el-icon> 交易统计 </el-menu-item> </el-sub-menu> <!-- 产品管理菜单 --> <el-sub-menu index="5"> <template #title> <el-icon><location /></el-icon> <span>产品管理</span> </template> <!-- 二级目录 --> <el-menu-item index="5-1"> <el-icon><OfficeBuilding /></el-icon> 产品管理 </el-menu-item> <el-menu-item index="5-2"> <el-icon><OfficeBuilding /></el-icon> 产品统计 </el-menu-item> </el-sub-menu> <!-- 字典管理菜单 --> <el-sub-menu index="6"> <template #title> <el-icon><location /></el-icon> <span>字典管理</span> </template> <!-- 二级目录 --> <el-menu-item index="6-1"> <el-icon><OfficeBuilding /></el-icon> 字典管理 </el-menu-item> <el-menu-item index="6-2"> <el-icon><OfficeBuilding /></el-icon> 字典统计 </el-menu-item> </el-sub-menu> <!-- 用户管理菜单 --> <el-sub-menu index="7"> <template #title> <el-icon><location /></el-icon> <span>用户管理</span> </template> <!-- 二级目录 --> <el-menu-item index="/dashboard/user"> <el-icon><OfficeBuilding /></el-icon> 用户管理 </el-menu-item> </el-sub-menu> <!-- 系统管理菜单 --> <el-sub-menu index="8"> <template #title> <el-icon><location /></el-icon> <span>系统管理</span> </template> <!-- 二级目录 --> <el-menu-item index="8-1"> <el-icon><OfficeBuilding /></el-icon> 系统管理 </el-menu-item> <el-menu-item index="8-2"> <el-icon><OfficeBuilding /></el-icon> 系统统计 </el-menu-item> </el-sub-menu> </el-menu> </el-aside> <el-container class="rightContent"> <!-- 右侧上 --> <el-header> <!-- 折叠 --> <el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon> <!-- 打开 --> <el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon> <!-- 用户信息的下拉菜单 --> <el-dropdown :hide-on-click="false"> <span class="el-dropdown-link"> {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>我的资料</el-dropdown-item> <el-dropdown-item>修改密码</el-dropdown-item> <el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </el-header> <!-- 右侧中 --> <el-main v-if="isRouterAlive"> <router-view></router-view> </el-main> <!-- 右侧下 --> <el-footer>@版权所有 2000-2099 旧约Alatus 广东省广州市九龙大道206号第XX栋XX总部xx号</el-footer> </el-container> </el-container> </template> <script> import { doGet } from "../http/httpRequest.js"; import { messageTip, getTokenName, removeToken, messageConfirm, later } from "../util/util.js"; export default { name : "dashboard", mounted(){ // 挂载时获取用户名 this.loadLoginName(); }, // 提供者生产者 provide(){ return { // 提供了一个函数,要求必须是箭头函数 reload: () => { this.isRouterAlive = false; //提供一个函数 (页面局部刷新函数) this.$nextTick(function(){ this.isRouterAlive = true; }) } } }, methods : { loadLoginName(){ // 获取用户名 doGet("/api/login/info",{}).then((resp) => { this.user = resp.data.data; }); }, // 左侧菜单左右展开与折叠 showMenu(){ // 取反即可 this.isShowed = !this.isShowed; }, // 退出登录 logOut(){ // 一样没有参数值,直接给个空的大括号就好 doGet("/api/logOut",{}).then(resp => { if(resp.data.code === 200){ messageTip('退出成功,即将返回首页',"success"); // 退出成功 removeToken(); later("/"); } else{ messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => { messageTip('退出成功,即将返回首页',"success"); // 后端不起作用,我们就把前端这里存的删了先 removeToken(); later("/"); }).catch(() => { messageTip("已取消强制退出","warning"); }); } }); } }, data(){ return { isShowed : false, // 登录的用户对象 user : {}, title : "@CRM管理系统", // 控制右侧子路由内容是否显示 isRouterAlive : true } } } </script> <style scoped> .el-dropdown{ float: right; line-height: 225%; } .el-aside{ background-color: black; } .menuTitle{ color: white; text-align: center; height: 5%; line-height: 225%; } .el-header{ background-color: azure; height: 5%; line-height: 225%; } .el-footer{ background-color: aliceblue; height: 5%; line-height: 225%; text-align: center; } .rightContent{ /* 高度设置为计算高度,屏幕高度的100% */ height: calc(100vh); } .show{ /* 聚焦事件 */ cursor: pointer; } </style>
<template>
<el-container>
<!-- 左侧 -->
<el-aside :width="isShowed ? '3.4%' : '17%'">
<div class="menuTitle">{{ isShowed ? "" : title }}</div>
<!-- 菜单 -->
<el-menu
active-text-color="#ffd04b"
background-color="#334157"
class="el-menu-vertical-demo"
default-active="2"
style="border-right: solid 0px;"
:unique-opened="true"
text-color="#fff"
:collapse="isShowed"
:collapse-transition="false"
:router="true"
>
<!-- 市场活动菜单 -->
<el-sub-menu index="1">
<template #title>
<el-icon><OfficeBuilding /></el-icon>
<span>市场活动</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="/dashboard/activity">
<el-icon><OfficeBuilding /></el-icon>
市场活动
</el-menu-item>
</el-sub-menu>
<!-- 线索管理菜单 -->
<el-sub-menu index="2">
<template #title>
<el-icon><Operation /></el-icon>
<span>线索管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="/dashboard/clue">
<el-icon><OfficeBuilding /></el-icon>
线索管理
</el-menu-item>
</el-sub-menu>
<!-- 客户管理菜单 -->
<el-sub-menu index="3">
<template #title>
<el-icon><User /></el-icon>
<span>客户管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="/dashboard/customer">
<el-icon><OfficeBuilding /></el-icon>
客户管理
</el-menu-item>
</el-sub-menu>
<!-- 交易管理菜单 -->
<el-sub-menu index="4">
<template #title>
<el-icon><location /></el-icon>
<span>交易管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="4-1">
<el-icon><OfficeBuilding /></el-icon>
交易管理
</el-menu-item>
<el-menu-item index="4-2">
<el-icon><OfficeBuilding /></el-icon>
交易统计
</el-menu-item>
</el-sub-menu>
<!-- 产品管理菜单 -->
<el-sub-menu index="5">
<template #title>
<el-icon><location /></el-icon>
<span>产品管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="5-1">
<el-icon><OfficeBuilding /></el-icon>
产品管理
</el-menu-item>
<el-menu-item index="5-2">
<el-icon><OfficeBuilding /></el-icon>
产品统计
</el-menu-item>
</el-sub-menu>
<!-- 字典管理菜单 -->
<el-sub-menu index="6">
<template #title>
<el-icon><location /></el-icon>
<span>字典管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="6-1">
<el-icon><OfficeBuilding /></el-icon>
字典管理
</el-menu-item>
<el-menu-item index="6-2">
<el-icon><OfficeBuilding /></el-icon>
字典统计
</el-menu-item>
</el-sub-menu>
<!-- 用户管理菜单 -->
<el-sub-menu index="7">
<template #title>
<el-icon><location /></el-icon>
<span>用户管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="/dashboard/user">
<el-icon><OfficeBuilding /></el-icon>
用户管理
</el-menu-item>
</el-sub-menu>
<!-- 系统管理菜单 -->
<el-sub-menu index="8">
<template #title>
<el-icon><location /></el-icon>
<span>系统管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="8-1">
<el-icon><OfficeBuilding /></el-icon>
系统管理
</el-menu-item>
<el-menu-item index="8-2">
<el-icon><OfficeBuilding /></el-icon>
系统统计
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
<el-container class="rightContent">
<!-- 右侧上 -->
<el-header>
<!-- 折叠 -->
<el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon>
<!-- 打开 -->
<el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon>
<!-- 用户信息的下拉菜单 -->
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link">
{{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>我的资料</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-header>
<!-- 右侧中 -->
<el-main v-if="isRouterAlive">
<router-view></router-view>
</el-main>
<!-- 右侧下 -->
<el-footer>@版权所有 2000-2099 旧约Alatus 广东省广州市九龙大道206号第XX栋XX总部xx号</el-footer>
</el-container>
</el-container>
</template>
<script>
import { doGet } from "../http/httpRequest.js";
import { messageTip, getTokenName, removeToken, messageConfirm, later } from "../util/util.js";
export default {
name : "dashboard",
mounted(){
// 挂载时获取用户名
this.loadLoginName();
},
// 提供者生产者
provide(){
return {
// 提供了一个函数,要求必须是箭头函数
reload: () => {
this.isRouterAlive = false;
//提供一个函数 (页面局部刷新函数)
this.$nextTick(function(){
this.isRouterAlive = true;
})
}
}
},
methods : {
loadLoginName(){
// 获取用户名
doGet("/api/login/info",{}).then((resp) => {
this.user = resp.data.data;
});
},
// 左侧菜单左右展开与折叠
showMenu(){
// 取反即可
this.isShowed = !this.isShowed;
},
// 退出登录
logOut(){
// 一样没有参数值,直接给个空的大括号就好
doGet("/api/logOut",{}).then(resp => {
if(resp.data.code === 200){
messageTip('退出成功,即将返回首页',"success");
// 退出成功
removeToken();
later("/");
}
else{
messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => {
messageTip('退出成功,即将返回首页',"success");
// 后端不起作用,我们就把前端这里存的删了先
removeToken();
later("/");
}).catch(() => {
messageTip("已取消强制退出","warning");
});
}
});
}
},
data(){
return {
isShowed : false,
// 登录的用户对象
user : {},
title : "@CRM管理系统",
// 控制右侧子路由内容是否显示
isRouterAlive : true
}
}
}
</script>
<style scoped>
.el-dropdown{
float: right;
line-height: 225%;
}
.el-aside{
background-color: black;
}
.menuTitle{
color: white;
text-align: center;
height: 5%;
line-height: 225%;
}
.el-header{
background-color: azure;
height: 5%;
line-height: 225%;
}
.el-footer{
background-color: aliceblue;
height: 5%;
line-height: 225%;
text-align: center;
}
.rightContent{
/* 高度设置为计算高度,屏幕高度的100% */
height: calc(100vh);
}
.show{
/* 聚焦事件 */
cursor: pointer;
}
</style>
import { createRouter,createWebHistory } from "vue-router"; const router = createRouter({ // 路由历史 history:createWebHistory(), // 配置路由,可以配置多个路由 routes:[ { //路由路径 path:"/", //对应路径的页面 component:() => import('../view/login.vue') }, { //路由路径 path:"/dashboard", //对应路径的页面 component:() => import('../view/dashboard.vue'), // 子路由 children : [ { // 子路由的path开始不能有/ path:"user", //对应路径的页面 component:() => import('../view/userView.vue'), }, { // 子路由路径 path:"user/detail/:id", //路由路径所展示的页面 component : () => import('../view/userDetail.vue') }, { path:"activity", component : () => import('../view/activityView.vue') }, { path:"activity/add", component : () => import('../view/activityRecordView.vue') }, { path:"activity/edit/:id", component : () => import('../view/activityRecordView.vue') }, { path:"activity/detail/:id", component : () => import('../view/activityDetail.vue') }, { path:"clue", component : () => import('../view/clueView.vue') }, { path:"clue/add", component : () => import('../view/clueRecordView.vue') }, { path:"clue/edit/:id", component : () => import('../view/clueRecordView.vue') }, { path:"clue/detail/:id", component : () => import('../view/clueDetailView.vue') }, { path:"customer", component : () => import('../view/customerView.vue') } ] } ] }); export default router;
import { createRouter,createWebHistory } from "vue-router";
const router = createRouter({
// 路由历史
history:createWebHistory(),
// 配置路由,可以配置多个路由
routes:[
{
//路由路径
path:"/",
//对应路径的页面
component:() => import('../view/login.vue')
},
{
//路由路径
path:"/dashboard",
//对应路径的页面
component:() => import('../view/dashboard.vue'),
// 子路由
children : [
{
// 子路由的path开始不能有/
path:"user",
//对应路径的页面
component:() => import('../view/userView.vue'),
},
{
// 子路由路径
path:"user/detail/:id",
//路由路径所展示的页面
component : () => import('../view/userDetail.vue')
},
{
path:"activity",
component : () => import('../view/activityView.vue')
},
{
path:"activity/add",
component : () => import('../view/activityRecordView.vue')
},
{
path:"activity/edit/:id",
component : () => import('../view/activityRecordView.vue')
},
{
path:"activity/detail/:id",
component : () => import('../view/activityDetail.vue')
},
{
path:"clue",
component : () => import('../view/clueView.vue')
},
{
path:"clue/add",
component : () => import('../view/clueRecordView.vue')
},
{
path:"clue/edit/:id",
component : () => import('../view/clueRecordView.vue')
},
{
path:"clue/detail/:id",
component : () => import('../view/clueDetailView.vue')
},
{
path:"customer",
component : () => import('../view/customerView.vue')
}
]
}
]
});
export default router;
<template> <el-button type="primary" class="btn" @click="batchExportExcel">批量导出(Excel)</el-button> <el-button type="success" 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 { 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(){ }, batchExportExcel(){ }, chooseExportExcel(){ } } } </script> <style> </style>
<template>
<el-button type="primary" class="btn" @click="batchExportExcel">批量导出(Excel)</el-button>
<el-button type="success" 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 { 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(){
},
batchExportExcel(){
},
chooseExportExcel(){
}
}
}
</script>
<style>
</style>