testcasee
This commit is contained in:
parent
2a13709dc8
commit
9ecfa2ae5c
|
|
@ -43,23 +43,6 @@ export default {
|
||||||
index: "/dashboard",
|
index: "/dashboard",
|
||||||
title: "系统首页",
|
title: "系统首页",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
icon: "el-icon-lx-cascades",
|
|
||||||
index: "/table",
|
|
||||||
title: "基础表格",
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
icon: "el-icon-lx-warn",
|
|
||||||
index: "7",
|
|
||||||
title: "错误处理",
|
|
||||||
subs: [
|
|
||||||
{
|
|
||||||
index: "/404",
|
|
||||||
title: "404页面",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,48 +13,6 @@ const routes = [{
|
||||||
title: '系统首页'
|
title: '系统首页'
|
||||||
},
|
},
|
||||||
component: () => import ( /* webpackChunkName: "dashboard" */ "../views/Dashboard.vue")
|
component: () => import ( /* webpackChunkName: "dashboard" */ "../views/Dashboard.vue")
|
||||||
}, {
|
|
||||||
path: "/table",
|
|
||||||
name: "basetable",
|
|
||||||
meta: {
|
|
||||||
title: '表格'
|
|
||||||
},
|
|
||||||
component: () => import ( /* webpackChunkName: "table" */ "../views/BaseTable.vue")
|
|
||||||
}, {
|
|
||||||
path: "/charts",
|
|
||||||
name: "basecharts",
|
|
||||||
meta: {
|
|
||||||
title: '图表'
|
|
||||||
},
|
|
||||||
component: () => import ( /* webpackChunkName: "charts" */ "../views/BaseCharts.vue")
|
|
||||||
}, {
|
|
||||||
path: "/form",
|
|
||||||
name: "baseform",
|
|
||||||
meta: {
|
|
||||||
title: '表单'
|
|
||||||
},
|
|
||||||
component: () => import ( /* webpackChunkName: "form" */ "../views/BaseForm.vue")
|
|
||||||
}, {
|
|
||||||
path: "/tabs",
|
|
||||||
name: "tabs",
|
|
||||||
meta: {
|
|
||||||
title: 'tab标签'
|
|
||||||
},
|
|
||||||
component: () => import ( /* webpackChunkName: "tabs" */ "../views/Tabs.vue")
|
|
||||||
}, {
|
|
||||||
path: '/404',
|
|
||||||
name: '404',
|
|
||||||
meta: {
|
|
||||||
title: '找不到页面'
|
|
||||||
},
|
|
||||||
component: () => import (/* webpackChunkName: "404" */ '../views/404.vue')
|
|
||||||
}, {
|
|
||||||
path: '/editor',
|
|
||||||
name: 'editor',
|
|
||||||
meta: {
|
|
||||||
title: '富文本编辑器'
|
|
||||||
},
|
|
||||||
component: () => import (/* webpackChunkName: "editor" */ '../views/Editor.vue')
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
|
|
@ -77,11 +35,6 @@ router.beforeEach((to, from, next) => {
|
||||||
const role = localStorage.getItem('ms_username');
|
const role = localStorage.getItem('ms_username');
|
||||||
if (!role && to.path !== '/login') {
|
if (!role && to.path !== '/login') {
|
||||||
next('/login');
|
next('/login');
|
||||||
} else if (to.meta.permission) {
|
|
||||||
// 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
|
|
||||||
role === 'admin'
|
|
||||||
? next()
|
|
||||||
: next('/403');
|
|
||||||
} else {
|
} else {
|
||||||
next();
|
next();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,14 +7,10 @@ export default createStore({
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
delTagsItem(state, data) {
|
delTagsItem(state, data) {
|
||||||
state
|
state.tagsList.splice(data.index, 1);
|
||||||
.tagsList
|
|
||||||
.splice(data.index, 1);
|
|
||||||
},
|
},
|
||||||
setTagsItem(state, data) {
|
setTagsItem(state, data) {
|
||||||
state
|
state.tagsList.push(data)
|
||||||
.tagsList
|
|
||||||
.push(data)
|
|
||||||
},
|
},
|
||||||
clearTags(state) {
|
clearTags(state) {
|
||||||
state.tagsList = []
|
state.tagsList = []
|
||||||
|
|
@ -27,21 +23,13 @@ export default createStore({
|
||||||
const item = state.tagsList[i];
|
const item = state.tagsList[i];
|
||||||
if (item.path === data.$route.fullPath) {
|
if (item.path === data.$route.fullPath) {
|
||||||
if (i < len - 1) {
|
if (i < len - 1) {
|
||||||
data
|
data.$router.push(state.tagsList[i + 1].path);
|
||||||
.$router
|
|
||||||
.push(state.tagsList[i + 1].path);
|
|
||||||
} else if (i > 0) {
|
} else if (i > 0) {
|
||||||
data
|
data.$router.push(state.tagsList[i - 1].path);
|
||||||
.$router
|
|
||||||
.push(state.tagsList[i - 1].path);
|
|
||||||
} else {
|
} else {
|
||||||
data
|
data.$router.push("/");
|
||||||
.$router
|
|
||||||
.push("/");
|
|
||||||
}
|
}
|
||||||
state
|
state.tagsList.splice(i, 1);
|
||||||
.tagsList
|
|
||||||
.splice(i, 1);
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,158 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="crumbs">
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item>
|
|
||||||
<i class="el-icon-pie-chart"></i> schart图表
|
|
||||||
</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<div class="plugins-tips">
|
|
||||||
vue-schart：vue.js封装sChart.js的图表组件。
|
|
||||||
访问地址：
|
|
||||||
<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
|
|
||||||
</div>
|
|
||||||
<div class="schart-box">
|
|
||||||
<div class="content-title">柱状图</div>
|
|
||||||
<schart class="schart" canvasId="bar" :options="options1"></schart>
|
|
||||||
</div>
|
|
||||||
<div class="schart-box">
|
|
||||||
<div class="content-title">折线图</div>
|
|
||||||
<schart class="schart" canvasId="line" :options="options2"></schart>
|
|
||||||
</div>
|
|
||||||
<div class="schart-box">
|
|
||||||
<div class="content-title">饼状图</div>
|
|
||||||
<schart class="schart" canvasId="pie" :options="options3"></schart>
|
|
||||||
</div>
|
|
||||||
<div class="schart-box">
|
|
||||||
<div class="content-title">环形图</div>
|
|
||||||
<schart class="schart" canvasId="ring" :options="options4"></schart>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Schart from "vue-schart";
|
|
||||||
export default {
|
|
||||||
name: "basecharts",
|
|
||||||
components: {
|
|
||||||
Schart,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const options1 = {
|
|
||||||
type: "bar",
|
|
||||||
title: {
|
|
||||||
text: "最近一周各品类销售图",
|
|
||||||
},
|
|
||||||
bgColor: "#fbfbfb",
|
|
||||||
labels: ["周一", "周二", "周三", "周四", "周五"],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "家电",
|
|
||||||
fillColor: "rgba(241, 49, 74, 0.5)",
|
|
||||||
data: [234, 278, 270, 190, 230],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "百货",
|
|
||||||
data: [164, 178, 190, 135, 160],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "食品",
|
|
||||||
data: [144, 198, 150, 235, 120],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const options2 = {
|
|
||||||
type: "line",
|
|
||||||
title: {
|
|
||||||
text: "最近几个月各品类销售趋势图",
|
|
||||||
},
|
|
||||||
bgColor: "#fbfbfb",
|
|
||||||
labels: ["6月", "7月", "8月", "9月", "10月"],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "家电",
|
|
||||||
data: [234, 278, 270, 190, 230],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "百货",
|
|
||||||
data: [164, 178, 150, 135, 160],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "食品",
|
|
||||||
data: [114, 138, 200, 235, 190],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const options3 = {
|
|
||||||
type: "pie",
|
|
||||||
title: {
|
|
||||||
text: "服装品类销售饼状图",
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
position: "left",
|
|
||||||
},
|
|
||||||
bgColor: "#fbfbfb",
|
|
||||||
labels: [
|
|
||||||
"T恤",
|
|
||||||
"牛仔裤",
|
|
||||||
"连衣裙",
|
|
||||||
"毛衣",
|
|
||||||
"七分裤",
|
|
||||||
"短裙",
|
|
||||||
"羽绒服",
|
|
||||||
],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: [334, 278, 190, 235, 260, 200, 141],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const options4 = {
|
|
||||||
type: "ring",
|
|
||||||
title: {
|
|
||||||
text: "环形三等分",
|
|
||||||
},
|
|
||||||
showValue: false,
|
|
||||||
legend: {
|
|
||||||
position: "bottom",
|
|
||||||
bottom: 40,
|
|
||||||
},
|
|
||||||
bgColor: "#fbfbfb",
|
|
||||||
labels: ["vue", "react", "angular"],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
data: [500, 500, 500],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
options1,
|
|
||||||
options2,
|
|
||||||
options3,
|
|
||||||
options4,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.schart-box {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
.schart {
|
|
||||||
width: 600px;
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
.content-title {
|
|
||||||
clear: both;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 50px;
|
|
||||||
margin: 10px 0;
|
|
||||||
font-size: 22px;
|
|
||||||
color: #1f2f3d;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -2,23 +2,6 @@
|
||||||
<div>
|
<div>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-card shadow="hover" class="mgb20" style="height:252px;">
|
|
||||||
<div class="user-info">
|
|
||||||
<img src="../assets/img/img.jpg" class="user-avator" alt />
|
|
||||||
<div class="user-info-cont">
|
|
||||||
<div class="user-info-name">{{ name }}</div>
|
|
||||||
<div>{{ role }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user-info-list">
|
|
||||||
上次登录时间：
|
|
||||||
<span>2019-11-01</span>
|
|
||||||
</div>
|
|
||||||
<div class="user-info-list">
|
|
||||||
上次登录地点：
|
|
||||||
<span>东莞</span>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
<el-card shadow="hover" style="height:252px;">
|
<el-card shadow="hover" style="height:252px;">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
|
|
@ -28,8 +11,6 @@
|
||||||
Vue
|
Vue
|
||||||
<el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
|
<el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
|
||||||
<el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
|
<el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
|
||||||
<el-progress :percentage="13.7"></el-progress>HTML
|
|
||||||
<el-progress :percentage="5.9" color="#f56c6c"></el-progress>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="16">
|
<el-col :span="16">
|
||||||
|
|
@ -68,47 +49,6 @@
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-card shadow="hover" style="height:403px;">
|
|
||||||
<template #header>
|
|
||||||
<div class="clearfix">
|
|
||||||
<span>待办事项</span>
|
|
||||||
<el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-table :show-header="false" :data="todoList" style="width:100%;">
|
|
||||||
<el-table-column width="40">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-checkbox v-model="scope.row.status"></el-checkbox>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column>
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="todo-item" :class="{
|
|
||||||
'todo-item-del': scope.row.status,
|
|
||||||
}">{{ scope.row.title }}</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column width="60">
|
|
||||||
<template>
|
|
||||||
<i class="el-icon-edit"></i>
|
|
||||||
<i class="el-icon-delete"></i>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card shadow="hover">
|
|
||||||
<schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card shadow="hover">
|
|
||||||
<schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -116,120 +56,17 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Schart from "vue-schart";
|
import Schart from "vue-schart";
|
||||||
import { reactive } from "vue";
|
|
||||||
export default {
|
export default {
|
||||||
name: "dashboard",
|
name: "dashboard",
|
||||||
components: { Schart },
|
components: { Schart },
|
||||||
setup() {
|
setup() {
|
||||||
const name = localStorage.getItem("ms_username");
|
const name = localStorage.getItem("ms_,username");
|
||||||
const role = name === "admin" ? "超级管理员" : "普通用户";
|
const role = name === "admin" ? "超级管理员" : "普通用户";
|
||||||
|
|
||||||
const data = reactive([
|
|
||||||
{
|
|
||||||
name: "2018/09/04",
|
|
||||||
value: 1083,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "2018/09/05",
|
|
||||||
value: 941,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "2018/09/06",
|
|
||||||
value: 1139,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "2018/09/07",
|
|
||||||
value: 816,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "2018/09/08",
|
|
||||||
value: 327,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "2018/09/09",
|
|
||||||
value: 228,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "2018/09/10",
|
|
||||||
value: 1065,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const options = {
|
|
||||||
type: "bar",
|
|
||||||
title: {
|
|
||||||
text: "最近一周各品类销售图",
|
|
||||||
},
|
|
||||||
xRorate: 25,
|
|
||||||
labels: ["周一", "周二", "周三", "周四", "周五"],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "家电",
|
|
||||||
data: [234, 278, 270, 190, 230],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "百货",
|
|
||||||
data: [164, 178, 190, 135, 160],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "食品",
|
|
||||||
data: [144, 198, 150, 235, 120],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const options2 = {
|
|
||||||
type: "line",
|
|
||||||
title: {
|
|
||||||
text: "最近几个月各品类销售趋势图",
|
|
||||||
},
|
|
||||||
labels: ["6月", "7月", "8月", "9月", "10月"],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "家电",
|
|
||||||
data: [234, 278, 270, 190, 230],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "百货",
|
|
||||||
data: [164, 178, 150, 135, 160],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "食品",
|
|
||||||
data: [74, 118, 200, 235, 90],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const todoList = reactive([
|
|
||||||
{
|
|
||||||
title: "今天要修复100个bug",
|
|
||||||
status: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "今天要修复100个bug",
|
|
||||||
status: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "今天要写100行代码加几个bug吧",
|
|
||||||
status: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "今天要修复100个bug",
|
|
||||||
status: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "今天要修复100个bug",
|
|
||||||
status: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "今天要写100行代码加几个bug吧",
|
|
||||||
status: true,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
data,
|
|
||||||
options,
|
|
||||||
options2,
|
|
||||||
todoList,
|
|
||||||
role,
|
role,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="crumbs">
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item>
|
|
||||||
<i class="el-icon-lx-redpacket_fill"></i> 支持作者
|
|
||||||
</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<div class="plugins-tips">如果该框架对你有帮助，那就请作者喝杯饮料吧！加微信号linxin_20探讨问题。</div>
|
|
||||||
<div>
|
|
||||||
<img src="https://lin-xin.gitee.io/images/weixin.jpg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "donate"
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="crumbs">
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item>
|
|
||||||
<i class="el-icon-lx-calendar"></i> 表单
|
|
||||||
</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>富文本编辑器</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<div class="plugins-tips">
|
|
||||||
wangEditor：轻量级 web 富文本编辑器，配置方便，使用简单。
|
|
||||||
访问地址：
|
|
||||||
<a href="https://www.wangeditor.com/doc/" target="_blank">wangEditor</a>
|
|
||||||
</div>
|
|
||||||
<div class="mgb20" ref='editor'></div>
|
|
||||||
<el-button type="primary" @click="syncHTML">提交</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import WangEditor from "wangeditor";
|
|
||||||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
export default {
|
|
||||||
name: "editor",
|
|
||||||
setup() {
|
|
||||||
const editor = ref(null);
|
|
||||||
const content = reactive({
|
|
||||||
html: "",
|
|
||||||
text: "",
|
|
||||||
});
|
|
||||||
let instance;
|
|
||||||
onMounted(() => {
|
|
||||||
instance = new WangEditor(editor.value);
|
|
||||||
instance.config.zIndex = 1;
|
|
||||||
instance.create();
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
instance.destroy();
|
|
||||||
instance = null;
|
|
||||||
});
|
|
||||||
const syncHTML = () => {
|
|
||||||
content.html = instance.txt.html();
|
|
||||||
console.log(content.html);
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
syncHTML,
|
|
||||||
editor,
|
|
||||||
content,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,137 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="">
|
|
||||||
<div class="crumbs">
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<el-tabs v-model="message">
|
|
||||||
<el-tab-pane :label="`未读消息(${state.unread.length})`" name="first">
|
|
||||||
<el-table :data="state.unread" :show-header="false" style="width: 100%">
|
|
||||||
<el-table-column>
|
|
||||||
<template #default="scope">
|
|
||||||
<span class="message-title">{{scope.row.title}}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="date" width="180"></el-table-column>
|
|
||||||
<el-table-column width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="handle-row">
|
|
||||||
<el-button type="primary">全部标为已读</el-button>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane :label="`已读消息(${state.read.length})`" name="second">
|
|
||||||
<template v-if="message === 'second'">
|
|
||||||
<el-table :data="state.read" :show-header="false" style="width: 100%">
|
|
||||||
<el-table-column>
|
|
||||||
<template #default="scope">
|
|
||||||
<span class="message-title">{{scope.row.title}}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="date" width="150"></el-table-column>
|
|
||||||
<el-table-column width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="handle-row">
|
|
||||||
<el-button type="danger">删除全部</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane :label="`回收站(${state.recycle.length})`" name="third">
|
|
||||||
<template v-if="message === 'third'">
|
|
||||||
<el-table :data="state.recycle" :show-header="false" style="width: 100%">
|
|
||||||
<el-table-column>
|
|
||||||
<template #default="scope">
|
|
||||||
<span class="message-title">{{scope.row.title}}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="date" width="150"></el-table-column>
|
|
||||||
<el-table-column width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button @click="handleRestore(scope.$index)">还原</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="handle-row">
|
|
||||||
<el-button type="danger">清空回收站</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ref, reactive } from "vue";
|
|
||||||
export default {
|
|
||||||
name: "tabs",
|
|
||||||
setup() {
|
|
||||||
const message = ref("first");
|
|
||||||
const state = reactive({
|
|
||||||
unread: [
|
|
||||||
{
|
|
||||||
date: "2018-04-19 20:00:00",
|
|
||||||
title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2018-04-19 21:00:00",
|
|
||||||
title: "今晚12点整发大红包，先到先得",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
read: [
|
|
||||||
{
|
|
||||||
date: "2018-04-19 20:00:00",
|
|
||||||
title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
recycle: [
|
|
||||||
{
|
|
||||||
date: "2018-04-19 20:00:00",
|
|
||||||
title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleRead = (index) => {
|
|
||||||
const item = state.unread.splice(index, 1);
|
|
||||||
console.log(item);
|
|
||||||
state.read = item.concat(state.read);
|
|
||||||
};
|
|
||||||
const handleDel = (index) => {
|
|
||||||
const item = state.read.splice(index, 1);
|
|
||||||
state.recycle = item.concat(state.recycle);
|
|
||||||
};
|
|
||||||
const handleRestore = (index) => {
|
|
||||||
const item = state.recycle.splice(index, 1);
|
|
||||||
state.read = item.concat(state.read);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
message,
|
|
||||||
state,
|
|
||||||
handleRead,
|
|
||||||
handleDel,
|
|
||||||
handleRestore,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.message-title {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.handle-row {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -1,192 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card shadow="hover">
|
|
||||||
<template #header>
|
|
||||||
<div class="clearfix">
|
|
||||||
<span>基础信息</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="info">
|
|
||||||
<div class="info-image" @click="showDialog">
|
|
||||||
<img :src="avatarImg" />
|
|
||||||
<span class="info-edit">
|
|
||||||
<i class="el-icon-lx-camerafill"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-name">{{ name }}</div>
|
|
||||||
<div class="info-desc">不可能！我的代码怎么可能会有bug！</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card shadow="hover">
|
|
||||||
<template #header>
|
|
||||||
<div class="clearfix">
|
|
||||||
<span>账户编辑</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-form label-width="90px">
|
|
||||||
<el-form-item label="用户名："> {{ name }} </el-form-item>
|
|
||||||
<el-form-item label="旧密码：">
|
|
||||||
<el-input type="password" v-model="form.old"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="新密码：">
|
|
||||||
<el-input type="password" v-model="form.new"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="个人简介：">
|
|
||||||
<el-input v-model="form.desc"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="onSubmit">保存</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
|
|
||||||
<vue-cropper ref="cropper" :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage"
|
|
||||||
style="width: 100%; height: 400px"></vue-cropper>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button class="crop-demo-btn" type="primary">选择图片
|
|
||||||
<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
|
|
||||||
</el-button>
|
|
||||||
<el-button type="primary" @click="saveAvatar">上传并保存</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { reactive, ref } from "vue";
|
|
||||||
import VueCropper from "vue-cropperjs";
|
|
||||||
import "cropperjs/dist/cropper.css";
|
|
||||||
import avatar from "../assets/img/img.jpg";
|
|
||||||
export default {
|
|
||||||
name: "user",
|
|
||||||
components: {
|
|
||||||
VueCropper,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const name = localStorage.getItem("ms_username");
|
|
||||||
const form = reactive({
|
|
||||||
old: "",
|
|
||||||
new: "",
|
|
||||||
desc: "不可能！我的代码怎么可能会有bug！",
|
|
||||||
});
|
|
||||||
const onSubmit = () => {};
|
|
||||||
|
|
||||||
const avatarImg = ref(avatar);
|
|
||||||
const imgSrc = ref("");
|
|
||||||
const cropImg = ref("");
|
|
||||||
const dialogVisible = ref(false);
|
|
||||||
const cropper = ref(null);
|
|
||||||
|
|
||||||
const showDialog = () => {
|
|
||||||
dialogVisible.value = true;
|
|
||||||
imgSrc.value = avatarImg.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const setImage = (e) => {
|
|
||||||
const file = e.target.files[0];
|
|
||||||
if (!file.type.includes("image/")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (event) => {
|
|
||||||
dialogVisible.value = true;
|
|
||||||
imgSrc.value = event.target.result;
|
|
||||||
cropper.value && cropper.value.replace(event.target.result);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
const cropImage = () => {
|
|
||||||
cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveAvatar = () => {
|
|
||||||
avatarImg.value = cropImg.value;
|
|
||||||
dialogVisible.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
form,
|
|
||||||
onSubmit,
|
|
||||||
cropper,
|
|
||||||
avatarImg,
|
|
||||||
imgSrc,
|
|
||||||
cropImg,
|
|
||||||
showDialog,
|
|
||||||
dialogVisible,
|
|
||||||
setImage,
|
|
||||||
cropImage,
|
|
||||||
saveAvatar,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.info {
|
|
||||||
text-align: center;
|
|
||||||
padding: 35px 0;
|
|
||||||
}
|
|
||||||
.info-image {
|
|
||||||
position: relative;
|
|
||||||
margin: auto;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 50px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.info-image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.info-edit {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
.info-edit i {
|
|
||||||
color: #eee;
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
.info-image:hover .info-edit {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.info-name {
|
|
||||||
margin: 15px 0 10px;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #262626;
|
|
||||||
}
|
|
||||||
.crop-demo-btn {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.crop-input {
|
|
||||||
position: absolute;
|
|
||||||
width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue