springboot项目实战-销售管理系统-订单管理
发布时间
阅读量：
阅读量
还是接着之前的内容，我把代码贴出来
数据库
drop table if exists ap_order;
CREATE TABLE `ap_order` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键id',
`user_id` bigint(20) DEFAULT NULL COMMENT '创建用户id',
`customer_id` bigint(20) DEFAULT NULL COMMENT '客户id',
`create_date` datetime DEFAULT NULL COMMENT '创建日期',
`total_money` decimal(10,2) DEFAULT NULL COMMENT '总金额',
`already_pay` decimal(10,2) DEFAULT NULL COMMENT '已经支付的钱数',
`next_pay_time` datetime DEFAULT NULL COMMENT '下次支付时间',
`discount` decimal(10,2) DEFAULT NULL COMMENT '回扣',
`product_state` tinyint(2) DEFAULT NULL COMMENT '0未发货 1发货部分产品 2全部发货完成',
`pay_state` tinyint(2) DEFAULT NULL COMMENT '订单支付状态: 0未支付 1支付部分 2支付完成',
`send_time` datetime DEFAULT NULL COMMENT '发货时间',
`send_address` varchar(200) DEFAULT NULL COMMENT '地址',
`send_price` decimal(10,2) DEFAULT NULL COMMENT '运费',
`send_way` varchar(255) DEFAULT NULL COMMENT '发货方式',
`is_deleted` tinyint default 0 comment '是否删除，0正常，1删除',
PRIMARY KEY (`id`)
) COMMENT='订单表';
insert into ap_order(user_id,customer_id,create_date,total_money,product_state,pay_state) values(2,1,'2023-01-01',10000,0,0);
insert into ap_order(user_id,customer_id,create_date,total_money,product_state,pay_state) values(2,2,'2023-01-01',9999,0,0);
springboot后端
order.java
package com.shrimpking.pojo;
import java.math.BigDecimal;
import com.baomidou.mybatisplus.annotation.TableLogic;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.time.LocalDateTime;
import java.io.Serializable;
import java.util.Date;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;
/** * <p>
* 订单表
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
@Data
@EqualsAndHashCode(callSuper = false)
@TableName("ap_order")
@ApiModel(value="Order对象", description="订单表")
public class Order implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "主键id")
@TableId(value = "id", type = IdType.AUTO)
private Long id;
@ApiModelProperty(value = "创建用户id")
private Long userId;
@ApiModelProperty(value = "客户id")
private Long customerId;
@ApiModelProperty(value = "创建日期")
private Date createDate;
@ApiModelProperty(value = "总金额")
private BigDecimal totalMoney;
@ApiModelProperty(value = "已经支付的钱数")
private BigDecimal alreadyPay;
@ApiModelProperty(value = "下次支付时间")
private Date nextPayTime;
@ApiModelProperty(value = "回扣")
private BigDecimal discount;
@ApiModelProperty(value = "0未发货 1发货部分产品 2全部发货完成")
private Integer productState;
@ApiModelProperty(value = "订单支付状态: 0未支付 1支付部分 2支付完成")
private Integer payState;
@ApiModelProperty(value = "发货时间")
private Date sendTime;
@ApiModelProperty(value = "地址")
private String sendAddress;
@ApiModelProperty(value = "运费")
private BigDecimal sendPrice;
@ApiModelProperty(value = "发货方式")
private String sendWay;
@TableLogic
@ApiModelProperty(value = "发货方式")
private Integer isDeleted;
}
orderMapper.java
package com.shrimpking.mapper;
import com.shrimpking.pojo.Order;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
/** * <p>
* 订单表 Mapper 接口
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
public interface OrderMapper extends BaseMapper<Order> {
}
orderMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.shrimpking.mapper.OrderMapper">
<!-- 通用查询映射结果 -->
<resultMap id="BaseResultMap" type="com.shrimpking.pojo.Order">
<id column="id" property="id" />
<result column="user_id" property="userId" />
<result column="customer_id" property="customerId" />
<result column="create_date" property="createDate" />
<result column="total_money" property="totalMoney" />
<result column="already_pay" property="alreadyPay" />
<result column="next_pay_time" property="nextPayTime" />
<result column="discount" property="discount" />
<result column="product_state" property="productState" />
<result column="pay_state" property="payState" />
<result column="send_time" property="sendTime" />
<result column="send_address" property="sendAddress" />
<result column="send_price" property="sendPrice" />
<result column="send_way" property="sendWay" />
</resultMap>
<!-- 通用查询结果列 -->
<sql id="Base_Column_List">
id, user_id, customer_id, create_date, total_money, already_pay, next_pay_time, discount, product_state, pay_state, send_time, send_address, send_price, send_way
</sql>
</mapper>
orderService.java
package com.shrimpking.service;
import com.shrimpking.pojo.Order;
import com.baomidou.mybatisplus.extension.service.IService;
/** * <p>
* 订单表 服务类
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
public interface OrderService extends IService<Order> {
}
orderServiceImpl.java
package com.shrimpking.service.impl;
import com.shrimpking.pojo.Order;
import com.shrimpking.mapper.OrderMapper;
import com.shrimpking.service.OrderService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
/** * <p>
* 订单表 服务实现类
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
@Service
public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements OrderService {
}
orderController.java
package com.shrimpking.controller;
import cn.hutool.core.util.ObjectUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.shrimpking.pojo.CustomerFollow;
import com.shrimpking.pojo.Order;
import com.shrimpking.req.FollowParams;
import com.shrimpking.req.OrderParams;
import com.shrimpking.res.Result;
import com.shrimpking.service.OrderService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/** * <p>
* 订单表 前端控制器
* </p>
* * @author shrimpking
* @since 2023-11-20
*/
@RestController
@RequestMapping("/order")
public class OrderController {
@Autowired
private OrderService orderService;
@GetMapping("/listPage")
public Result listPage(OrderParams orderParams){
IPage<Order> page = new Page<>(orderParams.getCurrentPage(), orderParams.getPageSize());
LambdaQueryWrapper<Order> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(ObjectUtil.isNotNull(orderParams.getUserId()), Order::getUserId, orderParams.getUserId());
queryWrapper.eq(ObjectUtil.isNotNull(orderParams.getCustomerId()),Order::getCustomerId,orderParams.getCustomerId());
queryWrapper.eq(ObjectUtil.isNotNull(orderParams.getProductState()),Order::getProductState,orderParams.getProductState());
queryWrapper.eq(ObjectUtil.isNotNull(orderParams.getPayState()),Order::getPayState,orderParams.getPayState());
IPage<Order> resultPage = this.orderService.page(page, queryWrapper);
return Result.success(resultPage);
}
@PostMapping("/save")
public Result save(@RequestBody Order order){
boolean save = this.orderService.save(order);
if(!save) { return Result.fail("保存失败");}
return Result.success("保存成功");
}
@PostMapping("/update")
public Result update(@RequestBody Order order){
boolean update = this.orderService.updateById(order);
if(!update){ return Result.fail("更新失败");}
return Result.success("更新成功");
}
@DeleteMapping("/delete/{id}")
public Result delete(@PathVariable("id") Long orderId){
if(ObjectUtil.isNull(orderId)){
return Result.fail("未选择记录，无法删除");
}
boolean remove = this.orderService.removeById(orderId);
if(!remove) { return Result.fail("删除失败");}
return Result.success("删除成功");
}
@GetMapping("/list")
public Result list(){
List<Order> list = this.orderService.list();
return Result.success(list);
}
}
orderparams.java
package com.shrimpking.req;
import lombok.Data;
import lombok.EqualsAndHashCode;
/** * Created by IntelliJ IDEA.
* * @Author : Shrimpking
* @create 2023/11/21 18:24
*/
@EqualsAndHashCode(callSuper = true)
@Data
public class OrderParams extends QueryParams
{
private Integer userId;
private Integer customerId;
private Integer productState;
private Integer payState;
}
vue前端
router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/login',
},
{
path: '/login',
name:'LoginView',
component: ()=> import('@/views/LoginView.vue'),
},
{
path: '/home',
name: 'HomeView',
redirect: '/index',
component: ()=> import('@/views/HomeView.vue'),
children:[
{
path: '/index',
name: 'IndexView',
component: ()=> import('@/views/IndexView.vue'),
meta: {
title: '首页'
}
},
{
path: '/user',
name: 'UserView',
component: ()=> import('@/views/User/UserView.vue'),
meta: {
title: '用户信息'
}
},
{
path: '/customer',
name: 'CustomerView',
component: ()=> import('@/views/Customer/CustomerView.vue'),
meta: {
title: '客户信息'
}
},
{
path: '/follow',
name: 'CustomerFollow',
component: ()=> import('@/views/Customer/CustomerFollow.vue'),
meta: {
title: '客户跟进'
}
},
{
path: '/product',
name: 'ProductView',
component: ()=> import('@/views/Product/ProductView.vue'),
meta: {
title: '产品信息'
}
},
{
path: '/order',
name: 'OrderView',
component: ()=> import('@/views/Order/OrderView.vue'),
meta: {
title: '订单信息'
}
},
]
}
]
const router = new VueRouter({
routes
})
//路由错误时，解决问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject);
return originalPush.call(this, location).catch(err => err)
};
//白名单
const IGNORE_URLS = ['/login'];
//前置守卫
router.beforeEach((to, from, next) => {
//在白名单中，放行
if(IGNORE_URLS.includes(to.path)){
next();
}
//获取用户
let admin = JSON.parse(window.localStorage.getItem('access-admin'));
if(!admin && !IGNORE_URLS.includes(to.path)){
//没有登录 ，没有在白名单中，跳转登录
return next('/login');
}
next();
});
export default router
orderView.jvue
<template>
<div class="user-area">
<el-card show="always" class="search">
<el-row>
<el-form :inline="true">
<el-form-item>
<el-select
v-model="searchForm.customerId"
placeholder="选择客户"
@clear="doSearch"
clearable>
<el-option
v-for="item in customerList"
:label="item.name"
:value="item.id"
:key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="searchForm.userId"
placeholder="选择用户"
style="margin-left: 1px;"
@clear="doSearch"
clearable>
<el-option
v-for="item in userList"
:label="item.name"
:value="item.id"
:key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="searchForm.productState"
placeholder="选择发货状态"
style="margin-left: 1px;"
@clear="doSearch"
clearable>
<el-option label="未发货" value="0"></el-option>
<el-option label="部分发货" value="1"></el-option>
<el-option label="全部发货" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="searchForm.payState"
placeholder="选择支付状态"
style="margin-left: 1px;"
@clear="doSearch"
clearable>
<el-option label="未支付" value="0"></el-option>
<el-option label="部分支付" value="1"></el-option>
<el-option label="全部支付" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-toilet-paper" @click="doClean">清空</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-plus" @click="addBtn">新增</el-button>
</el-form-item>
</el-form>
</el-row>
</el-card>
<div class="data-table">
<el-table
:data="tableData"
border
:height="tableHeight"
size="mini"
style="width: 100%">
<el-table-column
fixed
prop="id"
width="50px"
label="ID">
</el-table-column>
<el-table-column
fixed
prop="customerId"
label="客户名称"
width="200px"
show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ customerList.find(item => item.id === scope.row.customerId).name }} </span>
</template>
</el-table-column>
<el-table-column
prop="userId"
label="负责人"
width="200px"
show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ userList.find(item => item.id === scope.row.userId).name }} </span>
</template>
</el-table-column>
<el-table-column
prop="createDate"
label="创建日期"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="totalMoney"
label="总金额"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="alreadyPay"
label="已支付金额"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="nextPayTime"
label="下次支付时间"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="discount"
label="打折"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="product_state"
label="发货状态"
width="200px"
show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.productState === 0">未发货</span>
<span v-if="scope.row.productState === 1">部分发货</span>
<span v-if="scope.row.productState === 2">全部发货</span>
</template>
</el-table-column>
<el-table-column
prop="payState"
label="支付状态"
width="200px"
show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.payState === 0">未支付</span>
<span v-if="scope.row.payState === 1">部分支付</span>
<span v-if="scope.row.payState === 2">全部支付</span>
</template>
</el-table-column>
<el-table-column
prop="sendTime"
label="发货时间"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="sendAddress"
label="发货地址"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="sendPrice"
label="运费"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="sendway"
label="发货方式"
width="200px"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" fixed="right" width="200px">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="data-page">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchForm.currentPage"
:page-sizes="[2, 5, 10, 50]"
:page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<!-- 新增对话框 -->
<div>
<el-dialog
:title="dialogTitle"
:visible.sync="addDialogVisible"
:close-on-click-modal="false"
width="50%"
:before-close="handleClose">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
label-position="left"
class="demo-ruleForm">
<el-row>
<el-col :span="10" :offset="1">
<el-form-item label="客户" prop="customerId">
<el-select v-model="ruleForm.customerId" style="width: 100%;" clearable>
<el-option
v-for="item in customerList"
:label="item.name"
:value="item.id"
:key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="负责人" prop="userId">
<el-select v-model="ruleForm.userId" style="width: 100%;" clearable>
<el-option
v-for="item in userList"
:label="item.name"
:value="item.id"
:key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="创建日期" prop="createDate" >
<el-date-picker
v-model="ruleForm.createDate"
type="date"
placeholder="选择日期"
style="width: 100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="总金额" prop="totalMoney">
<el-input-number v-model="ruleForm.totalMoney" :precision="2" :step="1.0" :min="0.0" style="width: 70%;"></el-input-number>
</el-form-item>
<el-form-item label="已支付金额">
<el-input-number v-model="ruleForm.alreadyPay" :precision="2" :step="1.0" :min="0.0" style="width: 70%;"></el-input-number>
</el-form-item>
<el-form-item label="下次支付时间">
<el-date-picker
v-model="ruleForm.nextPayTime"
type="date"
placeholder="选择日期"
style="width: 100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="打折" >
<el-input v-model="ruleForm.discount" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="发货状态" prop="productState">
<el-select v-model="ruleForm.productState" style="width: 100%;" clearable>
<el-option label="未发货" :value="0"></el-option>
<el-option label="部分发货" :value="1"></el-option>
<el-option label="全部发货" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="支付状态" prop="payState">
<el-select v-model="ruleForm.payState" style="width: 100%;" clearable>
<el-option label="未支付" :value="0"></el-option>
<el-option label="部分支付" :value="1"></el-option>
<el-option label="全部支付" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发货时间">
<el-date-picker
v-model="ruleForm.sendTime"
type="date"
placeholder="选择日期"
style="width: 100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="发货地址">
<el-input v-model="ruleForm.sendAddress" clearable></el-input>
</el-form-item>
<el-form-item label="运费">
<el-input-number v-model="ruleForm.sendPrice" :precision="2" :step="0.5" :min="0" style="width: 70%;"></el-input-number>
</el-form-item>
<el-form-item label="发货方式" >
<el-input v-model="ruleForm.sendWay" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogReset" v-if="dialogTitle==='新增订单'">重 置</el-button>
<el-button type="primary" @click="dialogSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import request from "@/utils/request";
export default {
name: "OrderView",
data(){
return {
//客户列表
customerList:[],
//用户列表
userList:[],
//对话框标题
dialogTitle: '',
//对话框可见
addDialogVisible: false,
//搜索区域
searchForm: {
customerId:'',
userId:'',
productState:'',
payState:'',
currentPage:1,
pageSize:5,
},
//总记录数
total:0,
//表格数据
tableData:[],
//表格高度
tableHeight:0,
//新增表单
ruleForm: {
customerId: '',
userId: '',
createDate: '',
totalMoney: '',
alreadyPay: '',
nextPayTime: '',
discount: '',
productState:'',
payState:'',
sendTime:'',
sendAddress:'',
sendPrice:'',
sendWay:'',
},
rules: {
customerId: [
{ required: true, message: '请选择客户', trigger: 'change' },
],
userId: [
{ required: true, message: '请选择用户', trigger: 'change' },
],
createDate: [
{ required: true, message: '请选择创建日期', trigger: 'change' },
],
totalMoney: [
{ required: true, message: '请输入总金额', trigger: 'blur' },
],
productState: [
{ required: true, message: '请选择发货状态', trigger: 'change' },
],
payState: [
{ required: true, message: '请选择支付状态', trigger: 'change' },
],
}
}
},
methods: {
//获取用户列表
getCustomerList(){
request.get('/customer/list').then(res=>{
if(res.code === 200){
this.customerList = res.data;
}
})
},
//获取用户列表
getUserList(){
request.get('/user/list').then(res=>{
if(res.code === 200){
this.userList = res.data;
}
})
},
//删除
handleDelete(row){
this.$confirm(`您确定要删除吗？`,'删除提示',{
confirmButtonText:'删除',
cancelButtonText:'取消',
type: 'warning'
}).then(()=>{
request.delete('/order/delete/' + row.id)
.then(res=>{
if(res.code === 200){
this.$message.success(res.msg);
this.doSearch();
}else {
this.$message.error(res.msg);
this.doSearch();
}
});
}).catch(_=>{
this.$message.warning("已取消删除");
})
},
//编辑
handleEdit(row){
//深度拷贝
let obj = JSON.parse(JSON.stringify(row));
this.ruleForm = obj;
this.dialogTitle = '编辑订单';
this.addDialogVisible = true;
},
//新增
addBtn(){
this.ruleForm = {};
this.dialogTitle = '新增订单';
this.addDialogVisible = true;
},
//对话框提交
dialogSubmit(){
this.$refs.ruleForm.validate((valid)=>{
if(valid){
request.post(this.ruleForm.id ? '/order/update':'/order/save',this.ruleForm)
.then(res=>{
if(res.code === 200){
this.$message.success(res.msg);
this.handleClose();
this.doSearch();
}else {
this.$message.error(res.msg);
this.doSearch();
}
})
}
})
},
//对话框重置
dialogReset(){
this.$refs.ruleForm.resetFields();
this.ruleForm = {};
},
//对话框关闭
handleClose(){
this.dialogReset();
this.addDialogVisible = false;
},
//清空
doClean(){
this.searchForm.customerId = '';
this.searchForm.userId = '';
this.searchForm.productState = '';
this.searchForm.payState = '';
this.doSearch();
},
//搜索
doSearch(){
this.searchForm.currentPage = 1;
this.getData();
},
//获取数据
getData(){
request.get("/order/listPage",{
params: this.searchForm
}).then(res=>{
if(res.code === 200){
this.tableData = res.data.records;
this.searchForm.currentPage = res.data.current;
this.searchForm.pageSize = res.data.size;
this.total = res.data.total;
}else {
this.$message.error("获取数据失败！");
}
})
},
handleSizeChange(val){
this.searchForm.pageSize = val;
this.searchForm.currentPage = 1;
this.getData();
},
handleCurrentChange(val){
this.searchForm.currentPage = val;
this.getData();
}
},
created(){
//计算表格高度
this.$nextTick(()=>{
this.tableHeight = window.innerHeight - 275;
});
//获取数据
this.getData();
//获取用户列表
this.getUserList();
//获取客户列表
this.getCustomerList();
}
}
</script>
<style lang="scss" scoped>
.user-area{
width: 100%;
height: 100%;
margin-top: 15px;
.search{
}
.data-table{
margin-top: 15px;
}
.data-page{
text-align: left;
margin-top: 5px;
}
}
</style>
home.vue
<template>
<div>
<el-container class="home-area">
<el-header class="home-header">
<span class="header-title">销售管理系统</span>
<span class="header-user">
用户：{{ admin.name }}
<el-button type="info" icon="el-icon-switch-button" @click="exitBtn" circle></el-button>
</span>
</el-header>
<el-container class="home-main">
<el-aside class="main-aside" width="210px">
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:unique-opened="true"
router>
<el-menu-item index="/index">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu index="/user" v-if="admin.role === 1">
<template slot="title">
<i class="el-icon-menu"></i>
<span>用户管理</span>
</template>
<el-menu-item index="/user">
<i class="el-icon-mobile-phone"></i>
<span slot="title">用户信息</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/customer">
<template slot="title">
<i class="el-icon-menu"></i>
<span>客户管理</span>
</template>
<el-menu-item index="/customer">
<i class="el-icon-mobile-phone"></i>
<span slot="title">客户信息</span>
</el-menu-item>
<el-menu-item index="/follow">
<i class="el-icon-mobile-phone"></i>
<span slot="title">客户跟进</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/product">
<template slot="title">
<i class="el-icon-menu"></i>
<span>产品管理</span>
</template>
<el-menu-item index="/product">
<i class="el-icon-mobile-phone"></i>
<span slot="title">产品信息</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/order">
<template slot="title">
<i class="el-icon-menu"></i>
<span>订单管理</span>
</template>
<el-menu-item index="/order">
<i class="el-icon-mobile-phone"></i>
<span slot="title">订单信息</span>
</el-menu-item>
<el-menu-item index="/orderDetail">
<i class="el-icon-mobile-phone"></i>
<span slot="title">订单明细</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/target">
<template slot="title">
<i class="el-icon-menu"></i>
<span>目标管理</span>
</template>
<el-menu-item index="/target">
<i class="el-icon-mobile-phone"></i>
<span slot="title">订单目标</span>
</el-menu-item>
</el-submenu>
<el-submenu index="/todo">
<template slot="title">
<i class="el-icon-menu"></i>
<span>事项管理</span>
</template>
<el-menu-item index="/todo">
<i class="el-icon-mobile-phone"></i>
<span slot="title">待办事项</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main class="main-content">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: this.$route.path}">{{ $route.meta.title }}</el-breadcrumb-item>
</el-breadcrumb>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "HomeView",
computed: {
admin(){
return JSON.parse(window.localStorage.getItem('access-admin'));
}
},
methods: {
exitBtn(){
this.$confirm('您确定要退出系统吗','退出提示',{
confirmButtonText: '退出',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
this.$message.success("退出成功");
window.localStorage.clear();
this.$router.replace('/login');
}).catch(_=>{
this.$message.warning("已取消退出");
});
}
}
}
</script>
<style lang="scss" scoped>
.home-area{
width: 100%;
height: 100vh;
.home-header{
background-color: #545c64;
.header-title{
line-height: 60px;
font-size: 28px;
font-weight: bolder;
font-family: 华文彩云,Sans-serif,serif;
color: white;
}
.header-user{
width: 280px;
float: right;
line-height: 60px;
color: white;
text-align: center;
}
}
.home-main{
height: 100%;
.main-aside{
width: 210px;
.el-menu-vertical-demo{
height: 100%;
border-right: none;
}
}
.main-content{
width: 100%;
height: 100%;
overflow: hidden;
padding: 15px;
}
}
}
</style>
全部评论 (0)
还没有任何评论哟~