Commit 5f03309f authored by 姬鋆屾's avatar 姬鋆屾

tui

parent cc28d5e8
...@@ -7,7 +7,7 @@ VUE_APP_BASE_API =/basics_api ...@@ -7,7 +7,7 @@ VUE_APP_BASE_API =/basics_api
# 门户登录地址 # 门户登录地址
VUE_APP_PORTAL_URL = /portal_home VUE_APP_PORTAL_URL = http://192.168.0.98:11072
VUE_APP_PORTAL_PORT = 21080 VUE_APP_PORTAL_PORT = 21080
......
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
box-sizing: border-box;
}
html * {
outline: 0;
box-sizing: inherit;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
height: 100%;
min-height: 100%;
font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
}
body {
overflow-y: scroll;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
input,
select,
textarea,
button {
font-size: 100%;
-webkit-appearance: none;
border: 0;
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
del {
text-decoration: line-through;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 500;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
q:before,
q:after {
content: "";
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
ins,
a {
text-decoration: none;
cursor: pointer;
}
/* ============================================================
flex:定义布局为盒模型
flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
兼容性:ios 4+、android 2.3+、winphone8+
============================================================ */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-v {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-pack-justify {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.clearfix:after {
content: "";
display: table;
clear: both;
font-size: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.hide {
display: none;
}
.disabled {
pointer-events: none;
}
#app,
.pages {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
[v-cloak] {
display: none;
}
[disabled] {
pointer-events: none;
}
.el-dialog .el-checkbox-group .el-checkbox {
margin: 5px 0;
width: 33.33%;
}
.el-dialog .el-checkbox-group .pointBox {
width: 50%;
}
.el-table th {
user-select: all;
}
.el-progress-bar {
padding-right: 70px;
margin-right: -70px;
}
#operatorUserCabinCheckBox .el-checkbox {
white-space: normal !important;
width: 100%;
}
#operatorUserCabinCheckBox .el-checkbox__label {
display: inline;
}
.page-statistics .chart {
margin-bottom: 80px;
border: 1px solid #ededed;
height: 400px;
}
.page-statistics .el-table th.color-gray,
.page-statistics .el-table tr.color-gray {
background-color: #f0f9eb;
}
@media screen and (max-width: 800px) {
.page {
margin: 5px 5px;
}
.el-dialog {
width: 98% !important;
}
.el-dialog .el-checkbox-group .el-checkbox {
margin: 5px 0;
width: 50%;
font-size: 12px;
}
.el-dialog .el-checkbox-group .el-checkbox .el-checkbox__label {
font-size: 12px;
}
}
.mobile-table-card {
margin: 10px auto;
padding: 10px;
box-shadow: 0 0 5px #ccc;
}
.mobile-table-card .mobile-table-cell {
padding: 5px 0;
border-bottom: 1px dotted #eee;
}
.mobile-table-card .mobile-table-cell .cell-title {
font-size: 13px;
color: #666;
}
.mobile-table-card .mobile-table-cell .cell-content {
padding-left: 5px;
text-align: right;
word-break: break-word;
}
.layout-menu-wrapper {
height: 64px !important;
line-height: 64px !important;
background: linear-gradient(90deg, #1845c6, #2999ff) !important;
}
.layout-menu-wrapper .layout-logo {
font-size: 20px;
font-weight: bold;
}
.layout-menu-wrapper .menu-list li a {
display: block;
padding: 0 12px;
height: 100%;
font-size: 14px !important;
color: rgba(254, 254, 254, 0.65) !important;
text-align: center !important;
}
.layout-menu-wrapper .menu-list li a i {
font-size: 14px !important;
margin-right: 10px !important;
}
.layout-menu-wrapper .menu-list li a i:first-child {
margin-right: 0px !important;
}
.layout-menu-wrapper .menu-list li a:hover {
color: #fff !important;
}
.layout-menu-wrapper .menu-list li a.router-link-active,
.layout-menu-wrapper .menu-list li a[active] {
color: #fff !important;
list-style-type: none;
border-bottom: none !important;
padding-bottom: 2px;
background-color: #1890ff !important;
}
.layout-header .layout-submenu-wrapper {
width: 95% !important;
margin: 0 auto !important;
margin-top: 20px !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.page.active {
width: 95% !important;
margin: 0 auto !important;
padding: 20px !important;
padding-top: 0 !important;
}
.page {
height: 82% !important;
min-height: 82% !important;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
html * { html * {
outline: 0; outline: 0;
box-sizing: inherit; box-sizing: inherit;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
html,body { html,
height: 100%; body {
height: 100%;
min-height: 100%; min-height: 100%;
font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial,
sans-serif;
} }
body { body {
overflow-y: scroll; overflow-y: scroll;
} }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { body,
margin: 0; div,
padding: 0 dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
} }
input,select,textarea,button { input,
font-size: 100%; select,
textarea,
button {
font-size: 100%;
-webkit-appearance: none; -webkit-appearance: none;
border:0; border: 0;
outline: 0; outline: 0;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0 border-spacing: 0;
} }
fieldset,img { fieldset,
border: 0 img {
border: 0;
} }
abbr,acronym { abbr,
border: 0; acronym {
font-variant: normal border: 0;
font-variant: normal;
} }
del { del {
text-decoration: line-through text-decoration: line-through;
} }
address,caption,cite,code,dfn,em,th,var { address,
font-style: normal; caption,
font-weight: 500 cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 500;
} }
ol,ul { ol,
list-style: none ul {
list-style: none;
} }
caption,th { caption,
text-align: left th {
text-align: left;
} }
// h1,h2,h3,h4,h5,h6 { // h1,h2,h3,h4,h5,h6 {
...@@ -67,28 +120,31 @@ caption,th { ...@@ -67,28 +120,31 @@ caption,th {
// font-weight: 500 // font-weight: 500
// } // }
q:before,q:after { q:before,
content: '' q:after {
content: "";
} }
sub,sup { sub,
font-size: 75%; sup {
line-height: 0; font-size: 75%;
position: relative; line-height: 0;
vertical-align: baseline position: relative;
vertical-align: baseline;
} }
sup { sup {
top: -.5em top: -0.5em;
} }
sub { sub {
bottom: -.25em bottom: -0.25em;
} }
ins,a { ins,
text-decoration: none; a {
cursor: pointer; text-decoration: none;
cursor: pointer;
} }
/* ============================================================ /* ============================================================
flex:定义布局为盒模型 flex:定义布局为盒模型
...@@ -99,36 +155,72 @@ ins,a { ...@@ -99,36 +155,72 @@ ins,a {
flex-pack-justify:子元素两端对齐 flex-pack-justify:子元素两端对齐
兼容性:ios 4+、android 2.3+、winphone8+ 兼容性:ios 4+、android 2.3+、winphone8+
============================================================ */ ============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex {
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} display: -webkit-box;
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} display: -webkit-flex;
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} display: -ms-flexbox;
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} display: flex;
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;} }
.flex-v {
.clearfix{ -webkit-box-orient: vertical;
&:after{ -webkit-flex-direction: column;
content: ''; -ms-flex-direction: column;
flex-direction: column;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-pack-justify {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.clearfix {
&:after {
content: "";
display: table; display: table;
clear: both; clear: both;
font-size: 0; font-size: 0;
} }
} }
.fl{float: left}; .fl {
.fr{float: right}; float: left;
.hide{display: none;}
.disabled{
pointer-events: none;
} }
.fr {
#app,.pages{ float: right;
.flex; }
.flex-v; .hide {
height: 100%; display: none;
}
.disabled {
pointer-events: none;
} }
#app,
.pages {
.flex;
.flex-v;
height: 100%;
}
.ellipsis{ .ellipsis {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -137,90 +229,143 @@ ins,a { ...@@ -137,90 +229,143 @@ ins,a {
display: none; display: none;
} }
[disabled] { [disabled] {
pointer-events: none; pointer-events: none;
} }
.el-dialog{ .el-dialog {
.el-checkbox-group{ .el-checkbox-group {
.el-checkbox{ .el-checkbox {
margin: 5px 0; margin: 5px 0;
width: 33.33%; width: 33.33%;
} }
.pointBox{ .pointBox {
width: 50%; width: 50%;
} }
} }
} }
.el-table th { .el-table th {
user-select: all; user-select: all;
} }
.el-progress-bar{ .el-progress-bar {
padding-right: 70px; padding-right: 70px;
margin-right: -70px; margin-right: -70px;
} }
#operatorUserCabinCheckBox .el-checkbox{ #operatorUserCabinCheckBox .el-checkbox {
white-space: normal !important; white-space: normal !important;
width: 100% width: 100%;
} }
#operatorUserCabinCheckBox .el-checkbox__label{ #operatorUserCabinCheckBox .el-checkbox__label {
display: inline; display: inline;
} }
// 统计页面隔日期变色 // 统计页面隔日期变色
.page-statistics{ .page-statistics {
.chart{ .chart {
margin-bottom: 80px; margin-bottom: 80px;
border: 1px solid #ededed; border: 1px solid #ededed;
height: 400px; height: 400px;
} }
.el-table th, .el-table tr{ .el-table th,
&.color-gray{ .el-table tr {
&.color-gray {
background-color: #f0f9eb; background-color: #f0f9eb;
} }
} }
} }
@media screen and (max-width: 800px) {
.page {
@media screen and (max-width: 800px){ margin: 5px 5px;
.page{ }
margin: 5px 5px; .el-dialog {
} width: 98% !important;
.el-dialog{ .el-checkbox-group {
width: 98%!important; .el-checkbox {
.el-checkbox-group{ margin: 5px 0;
.el-checkbox{ width: 50%;
margin: 5px 0; font-size: 12px;
width: 50%; .el-checkbox__label {
font-size: 12px; font-size: 12px;
.el-checkbox__label{ }
font-size: 12px; }
} }
} }
}
}
} }
// .is-active{ // .is-active{
// background-color: red; // background-color: red;
// } // }
.mobile-table-card{ .mobile-table-card {
margin: 10px auto; margin: 10px auto;
padding: 10px; padding: 10px;
box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc;
.mobile-table-cell{ .mobile-table-cell {
padding: 5px 0; padding: 5px 0;
border-bottom: 1px dotted #eee; border-bottom: 1px dotted #eee;
.cell-title{ .cell-title {
font-size: 13px; font-size: 13px;
color: #666; color: #666;
} }
.cell-content{ .cell-content {
padding-left: 5px; padding-left: 5px;
text-align: right; text-align: right;
word-break: break-word; word-break: break-word;
} }
} }
} }
\ No newline at end of file .layout-menu-wrapper {
height: 64px !important;
line-height: 64px !important;
background: linear-gradient(90deg, #1845c6, #2999ff) !important;
}
.layout-menu-wrapper .layout-logo {
font-size: 20px;
font-weight: bold;
}
.layout-menu-wrapper .menu-list li a {
display: block;
padding: 0 12px;
height: 100%;
font-size: 14px !important;
color: rgba(254, 254, 254, 0.65) !important;
text-align: center !important;
}
.layout-menu-wrapper .menu-list li a i {
font-size: 14px !important;
margin-right: 10px !important;
}
.layout-menu-wrapper .menu-list li a i:first-child {
margin-right: 0px !important;
}
.layout-menu-wrapper .menu-list li a:hover {
color: #fff !important;
}
.layout-menu-wrapper .menu-list li a.router-link-active,
.layout-menu-wrapper .menu-list li a[active] {
color: #fff !important;
list-style-type: none;
border-bottom: none !important;
padding-bottom: 2px;
background-color: #1890ff !important;
}
.layout-header .layout-submenu-wrapper {
width: 95% !important;
margin: 0 auto !important;
margin-top: 20px !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.page.active {
width: 95% !important;
margin: 0 auto !important;
padding: 20px !important;
padding-top: 0 !important;
}
.page {
height: 82% !important;
min-height: 82% !important;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
import axios from 'axios'; import axios from "axios";
import Qs from 'qs'; import Qs from "qs";
const JSONbig = require('json-bigint')({"storeAsString": true}); const JSONbig = require("json-bigint")({ storeAsString: true });
import cookie from './cookie'; import cookie from "./cookie";
import httpErrorHandler from './httpErrorHandler'; import httpErrorHandler from "./httpErrorHandler";
const instance = axios.create({ const instance = axios.create({
baseURL: '/refined', baseURL: "/refined",
headers: { headers: {
post: { post: {
'Content-Type': 'application/json;charset=UTF-8', "Content-Type": "application/json;charset=UTF-8",
'dataType': 'json', dataType: "json",
} },
}, },
transformResponse: [data=>{ transformResponse: [
try { (data) => {
JSON.parse(data); try {
return JSONbig.parse(data); JSON.parse(data);
} catch (error) { return JSONbig.parse(data);
return data; } catch (error) {
} return data;
}], }
},
],
}); });
instance.interceptors.request.use(
(config) => {
// 获取当前页面的主机名和端口号
const hostname = location.hostname;
const baseURL = config.baseURL;
//const port = location.port;
const port =
process.env.VUE_APP_PORTAL_PORT == "undefined"
? "11089"
: process.env.VUE_APP_PORTAL_PORT;
instance.interceptors.request.use(config => { // 动态修改请求地址
// 获取当前页面的主机名和端口号
const hostname = location.hostname;
const baseURL =config.baseURL;
//const port = location.port;
const port =process.env.VUE_APP_PORTAL_PORT=='undefined'?'11089':process.env.VUE_APP_PORTAL_PORT;
// 动态修改请求地址 console.log(config.url);
console.log(config.url) if (config.url.startsWith("/")) {
// 字符串以 / 开头
config.url = `http://112.19.80.237:11080${baseURL}${config.url}`;
// config.url = `http://${hostname}:${port}${baseURL}${config.url}`;
}
if (config.url.startsWith('/')) { //config.url = `http://${hostname}:${port}${baseURL}/${config.url}`;
// 字符串以 / 开头 //config.data = Qs.stringify(config.data, {arrayFormat: 'repeat', allowDots: true});
config.url = `http://${hostname}:${port}${baseURL}${config.url}`; //config.data = Qs.stringify(config.data, {arrayFormat: 'indices', allowDots: true});
//brackets
// 也可以在这里给请求添加token之类的字段
// config.headers['Content-Type'] = 'application/json;charset=UTF-8'
// config.headers.timestamp = Math.floor(new Date().getTime() / 1000)
// console.log("sessionStorage",window.sessionStorage)
config.headers.Authorization = window.sessionStorage.getItem("token") || "";
//console.log("request config and session",config,window.sessionStorage);
return config;
},
(err) => {
return Promise.reject(err);
} }
);
//config.url = `http://${hostname}:${port}${baseURL}/${config.url}`; instance.interceptors.response.use((response) => {
//config.data = Qs.stringify(config.data, {arrayFormat: 'repeat', allowDots: true}); return response.data;
//config.data = Qs.stringify(config.data, {arrayFormat: 'indices', allowDots: true}); }, httpErrorHandler);
//brackets
// 也可以在这里给请求添加token之类的字段
// config.headers['Content-Type'] = 'application/json;charset=UTF-8'
// config.headers.timestamp = Math.floor(new Date().getTime() / 1000)
// console.log("sessionStorage",window.sessionStorage)
config.headers.Authorization = window.sessionStorage.getItem('token') || ''
//console.log("request config and session",config,window.sessionStorage);
return config;
}, err => {
return Promise.reject(err);
});
instance.interceptors.response.use(response=>{
return response.data
},httpErrorHandler);
/** /**
* 封装后的axios post方法 * 封装后的axios post方法
...@@ -68,9 +76,9 @@ instance.interceptors.response.use(response=>{ ...@@ -68,9 +76,9 @@ instance.interceptors.response.use(response=>{
*/ */
export function post(url, option, config = {}) { export function post(url, option, config = {}) {
const data = Object.assign({}, option, { const data = Object.assign({}, option, {
// __mortals_token__: cookie.getItem('__mortals_token__'), // __mortals_token__: cookie.getItem('__mortals_token__'),
}) });
return instance.post(url, data, config) return instance.post(url, data, config);
} }
/** /**
...@@ -84,24 +92,23 @@ export function post(url, option, config = {}) { ...@@ -84,24 +92,23 @@ export function post(url, option, config = {}) {
export function get(url, option, config = {}) { export function get(url, option, config = {}) {
const data = Object.assign({}, option, { const data = Object.assign({}, option, {
//__mortals_token__: cookie.getItem('__mortals_token__'), //__mortals_token__: cookie.getItem('__mortals_token__'),
}) });
return instance.get(url, { params: data }, config) return instance.get(url, { params: data }, config);
} }
// 文件上传 // 文件上传
const uploadInstance = axios.create({ const uploadInstance = axios.create({
baseURL: '/m', baseURL: "/m",
headers: { headers: {
post: { post: {
'Content-Type': 'multipart/form-data', "Content-Type": "multipart/form-data",
} },
} },
}); });
uploadInstance.interceptors.response.use(response=>{ uploadInstance.interceptors.response.use((response) => {
return response.data return response.data;
},httpErrorHandler); }, httpErrorHandler);
/** /**
* 封装后的axios upload方法 * 封装后的axios upload方法
...@@ -113,8 +120,8 @@ uploadInstance.interceptors.response.use(response=>{ ...@@ -113,8 +120,8 @@ uploadInstance.interceptors.response.use(response=>{
*/ */
export function upload(url, option, config = {}) { export function upload(url, option, config = {}) {
let formdata = new FormData(); let formdata = new FormData();
Object.keys(option).forEach(key=>{ Object.keys(option).forEach((key) => {
formdata.append(key, option[key]) formdata.append(key, option[key]);
}) });
return uploadInstance.post(url, formdata, config) return uploadInstance.post(url, formdata, config);
} }
<template> <template>
<el-table <el-table
size='small' size="small"
:data="tableData" :data="tableData"
:row-key="handleRowKeyMethod" :row-key="handleRowKeyMethod"
:span-method="handleSpanMethod" :span-method="handleSpanMethod"
...@@ -9,113 +9,111 @@ ...@@ -9,113 +9,111 @@
@sort-change="handleSortChange" @sort-change="handleSortChange"
@row-click="handleRowClick" @row-click="handleRowClick"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
:empty-text='emptyText' :empty-text="emptyText"
border border
style="width: 100%"> height="600"
style="width: 100%"
>
<el-table-column
v-for="column in columns"
:key="column.prop"
:type="column.type"
:index="handleIndexMethod"
:selectable="handleSelectableMethod"
:prop="column.prop"
:label="column.label"
:width="column.width"
:sortable="column.sortable"
:show-overflow-tooltip="column.tooltip"
:align="column.align || 'left'"
:formatter="column.formatter"
:reserve-selection="column.reserveSelection"
:subColumns="column.subColumns"
>
<el-table-column <el-table-column
v-for='column in columns' v-for="sunColumn in column.subColumns"
:key='column.prop' :key="sunColumn.prop"
:type="column.type" :type="sunColumn.type"
:index="handleIndexMethod" :prop="sunColumn.prop"
:selectable="handleSelectableMethod" :label="sunColumn.label"
:prop="column.prop" :width="sunColumn.width"
:label="column.label" :sortable="sunColumn.sortable"
:width="column.width" :align="sunColumn.align || 'left'"
:sortable="column.sortable" :formatter="sunColumn.formatter"
:show-overflow-tooltip="column.tooltip" />
:align="column.align || 'left'" </el-table-column>
:formatter='column.formatter'
:reserve-selection='column.reserveSelection'
:subColumns='column.subColumns'
>
<el-table-column
v-for='sunColumn in column.subColumns'
:key='sunColumn.prop'
:type="sunColumn.type"
:prop="sunColumn.prop"
:label="sunColumn.label"
:width="sunColumn.width"
:sortable="sunColumn.sortable"
:align="sunColumn.align || 'left'"
:formatter='sunColumn.formatter'
/>
</el-table-column>
</el-table> </el-table>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
handleRowKeyMethod: { handleRowKeyMethod: {
type: Function, type: Function,
required: false, required: false,
default: row => { return row.id } default: (row) => {
return row.id;
},
}, },
handleSelectableMethod: { handleSelectableMethod: {
type: Function, type: Function,
required: false, required: false,
default: () => {} default: () => {},
}, },
handleIndexMethod: { handleIndexMethod: {
type: Function, type: Function,
required: false, required: false,
default: () => {} default: () => {},
}, },
handleSpanMethod: { handleSpanMethod: {
type: Function, type: Function,
required: false, required: false,
default: () => {} default: () => {},
}, },
handleSelectionChange: { handleSelectionChange: {
type: Function, type: Function,
required: false, required: false,
default: () => {} default: () => {},
}, },
handleRowClick: { handleRowClick: {
type: Function, type: Function,
required: false, required: false,
default: () => {} default: () => {},
}, },
handleSortChange: { handleSortChange: {
type: Function, type: Function,
required: false, required: false,
default: () => {} default: () => {},
}, },
tableRowClassName: { tableRowClassName: {
type: Function, type: Function,
required: false, required: false,
default: () => {} default: () => {},
}, },
loading: { loading: {
type: Boolean, type: Boolean,
required: false, required: false,
default: true default: true,
}, },
tableData: { tableData: {
type: Array, type: Array,
required: false, required: false,
default: () => [] default: () => [],
}, },
columns: { columns: {
type: Array, type: Array,
required: false, required: false,
default: ()=> [], default: () => [],
} },
}, },
computed: { computed: {
emptyText() { emptyText() {
return (!this.loading && !this.tableData.length) ? '暂无数据' : '加载中...' return !this.loading && !this.tableData.length ? "暂无数据" : "加载中...";
}, },
}, },
methods:{ methods: {},
},
data() { data() {
return {} return {};
} },
} };
</script> </script>
...@@ -6,12 +6,20 @@ ...@@ -6,12 +6,20 @@
<div class="layout-menu flex flex-1"> <div class="layout-menu flex flex-1">
<!-- logo --> <!-- logo -->
<div class="layout-logo flex"> <div class="layout-logo flex">
<i class="el-icon-menu" @click='showMobileMenu=!showMobileMenu'> </i> <i class="el-icon-menu" @click="showMobileMenu = !showMobileMenu">
</i>
<router-link to="/"> <router-link to="/">
<img src="../assets/images/logo.png" style="margin-bottom:5px" height="40" alt=""> <img
<b style="color:white;font-size:18px;">&nbsp;&nbsp;&nbsp; 智慧大厅精细化管理系统 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> src="../assets/images/logo.png"
style="margin-bottom:5px"
height="40"
alt=""
/>
<b style="color:white;font-size:18px;"
>&nbsp;&nbsp;&nbsp; 智慧大厅精细化管理系统
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b
>
</router-link> </router-link>
</div> </div>
<!-- 站点选择 --> <!-- 站点选择 -->
<div> <div>
...@@ -19,60 +27,83 @@ ...@@ -19,60 +27,83 @@
</div> </div>
<!-- 一级菜单 --> <!-- 一级菜单 -->
<ul class="menu-list flex"> <ul class="menu-list flex">
<li v-for='item in menu' :key='item.id'> <li v-for="item in menu" :key="item.id">
<router-link :to="item.path" :active='submenu.path === item.path' :title="item.name"> <router-link
<i :class="'el-icon-'+item.icon"></i> :to="item.path"
{{item.name}} :active="submenu.path === item.path"
:title="item.name"
>
<i :class="'el-icon-' + item.icon"></i>
{{ item.name }}
</router-link> </router-link>
</li> </li>
</ul> </ul>
</div> </div>
<div class="layout-profile"> <div class="layout-profile">
<!-- <span class="el-dropdown-link">
<!-- <span class="el-dropdown-link">
{{userData.currUserName}} {{userData.currUserName}}
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
</span> --> </span> -->
<!-- <!--
<i class="el-icon-s-home" style="font-size: 15px;margin-right: 10px" > 返回门户</i> <i class="el-icon-s-home" style="font-size: 15px;margin-right: 10px" > 返回门户</i>
--> -->
<!-- <!--
<el-link class="el-icon-s-home" style="font-size: 15px;margin-right: 10px" @click="returnHome" > 返回门户</el-link> <el-link class="el-icon-s-home" style="font-size: 15px;margin-right: 10px" @click="returnHome" > 返回门户</el-link>
--> -->
<el-tooltip
effect="dark"
content="返回门户"
placement="bottom"
style="margin-right: 20px;"
>
<a style="color: #fff;" :href="portal">
<i class="el-icon-s-home"></i> 返回门户
</a>
</el-tooltip>
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
<span class="el-dropdown-link" style="color:white"> <span class="el-dropdown-link" style="color:white">
{{userData.currUserName}} {{ userData.currUserName }}
<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i> <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="update">修改密码</el-dropdown-item> <el-dropdown-item command="update">修改密码</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item> <el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<!-- 一级菜单 --> <!-- 一级菜单 -->
<ul class="mobile-menu-list flex flex-pack-justify" v-if='showMobileMenu'> <ul class="mobile-menu-list flex flex-pack-justify" v-if="showMobileMenu">
<li v-for='item in menu' :key='item.id'> <li v-for="item in menu" :key="item.id">
<router-link :to="item.path" :active='submenu.path === item.path' :title="item.name"> <router-link
<i :class="'el-icon-'+item.icon"></i> :to="item.path"
{{item.name}} :active="submenu.path === item.path"
:title="item.name"
>
<i :class="'el-icon-' + item.icon"></i>
{{ item.name }}
</router-link> </router-link>
</li> </li>
</ul> </ul>
<!-- 二级菜单 --> <!-- 二级菜单 -->
<div class="layout-submenu-wrapper flex" v-if='submenu.children && submenu.children.length'> <div
class="layout-submenu-wrapper flex"
v-if="submenu.children && submenu.children.length"
>
<div class="layout-submenu"> <div class="layout-submenu">
<ul class="submenu-list flex"> <ul class="submenu-list flex">
<li v-for='item in submenu.children' :key='item.id'> <li v-for="item in submenu.children" :key="item.id">
<a :href="item.path" target="blank" v-if='item.isOut'>{{item.name}}</a> <a :href="item.path" target="blank" v-if="item.isOut">{{
<router-link :to="item.path" :active='group === item.path' v-else>{{item.name}}</router-link> item.name
}}</a>
<router-link :to="item.path" :active="group === item.path" v-else>{{
item.name
}}</router-link>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -88,31 +119,34 @@ export default { ...@@ -88,31 +119,34 @@ export default {
HeaderSite, HeaderSite,
}, },
methods: { methods: {
returnHome(){ returnHome() {
window.close(); window.close();
}, },
handleCommand(key) { handleCommand(key) {
if(key === 'update'){ if (key === "update") {
this.$router.push('/login/updatePwd') this.$router.push("/login/updatePwd");
} }
if(key === 'logout'){ if (key === "logout") {
this.logout() this.logout();
} }
}, },
// 退出登录 // 退出登录
logout() { logout() {
this.$post('/login/logout').then(data=>{}).catch(error=>{}).then(()=>{ this.$post("/login/logout")
this.$message.success('已退出登录'); .then((data) => {})
this.$store.commit('logout'); .catch((error) => {})
this.$router.replace('/login'); .then(() => {
}) this.$message.success("已退出登录");
} this.$store.commit("logout");
this.$router.replace("/login");
});
},
}, },
beforeDestroy() { beforeDestroy() {
console.log("beforeDestroy"); console.log("beforeDestroy");
//window.removeEventListener("message", this.getsocketData, false); //window.removeEventListener("message", this.getsocketData, false);
}, },
mounted() { mounted() {
// console.log("mounted"); // console.log("mounted");
// this.$nextTick(function () { // this.$nextTick(function () {
// console.log("login websocket:"+"ws://"+process.env.VUE_APP_WEBSOCKET_API +"/ws?accessToken="+ this.$store.state.userData.id) // console.log("login websocket:"+"ws://"+process.env.VUE_APP_WEBSOCKET_API +"/ws?accessToken="+ this.$store.state.userData.id)
...@@ -123,12 +157,10 @@ export default { ...@@ -123,12 +157,10 @@ export default {
// this.$store.state.userData.id // this.$store.state.userData.id
// ); // );
// }); // });
// let _this = this; // let _this = this;
// const getsocketData = (e) => {i // const getsocketData = (e) => {i
// // 创建接收消息函数 // // 创建接收消息函数
// const data = e && e.detail.data; // const data = e && e.detail.data;
// let obj = JSON.parse(data); // let obj = JSON.parse(data);
// if (obj.type == "SEND_TO_ALL_REQUEST") { // if (obj.type == "SEND_TO_ALL_REQUEST") {
// vm.refreshData(); // vm.refreshData();
...@@ -139,147 +171,159 @@ export default { ...@@ -139,147 +171,159 @@ export default {
// type: "warning", // type: "warning",
// duration: 8000, // duration: 8000,
// }); // });
// } // }
// }; // };
// this.getsocketData = getsocketData; // this.getsocketData = getsocketData;
// // 注册监听事件 // // 注册监听事件
// window.addEventListener("onmessageWS", getsocketData,false); // window.addEventListener("onmessageWS", getsocketData,false);
},
},
computed: { computed: {
group() { group() {
const relativeGroup = this.$store.state.group; const relativeGroup = this.$store.state.group;
if(relativeGroup) { if (relativeGroup) {
return relativeGroup; return relativeGroup;
} }
let groupArray = this.$route.path.split('/'); let groupArray = this.$route.path.split("/");
let group = this.$route.path; let group = this.$route.path;
let type = groupArray.pop(); let type = groupArray.pop();
if(['add', 'edit', 'view', 'new','importView','resetPwdView'].indexOf(type) > -1){ if (
groupArray.push('list'); ["add", "edit", "view", "new", "importView", "resetPwdView"].indexOf(
group = groupArray.join('/') type
) > -1
) {
groupArray.push("list");
group = groupArray.join("/");
} }
return group; return group;
}, },
relativeGroup() { relativeGroup() {
return this.$store.state.group return this.$store.state.group;
}, },
flat() { flat() {
return this.userData.flat return this.userData.flat;
}, },
menu() { menu() {
if(!this.userData.barList) return []; if (!this.userData.barList) return [];
return this.userData.barList.map(item=>{ return this.userData.barList.map((item) => {
const url = item.url ? item.url : (item.childList[0] ? (item.childList[0].url || '') : ''); const url = item.url
? item.url
: item.childList[0]
? item.childList[0].url || ""
: "";
return { return {
name: item.name, name: item.name,
path: url, path: url,
id: item.id, id: item.id,
icon: item.imgPath, icon: item.imgPath,
children: item.childList.map(sub=>{ children: item.childList.map((sub) => {
return { return {
name: sub.name, name: sub.name,
path: sub.url ? sub.url : (sub.childList[0] ? (sub.childList[0].url || 0) : ''), path: sub.url
? sub.url
: sub.childList[0]
? sub.childList[0].url || 0
: "",
id: sub.id, id: sub.id,
parentId: sub.parentId, parentId: sub.parentId,
icon: sub.imgPath, icon: sub.imgPath,
isOut: /^https?\:\/\//.test(sub.url) isOut: /^https?\:\/\//.test(sub.url),
} };
}) }),
} };
}) });
}, },
submenu() { submenu() {
if(!this.menu.length) return {}; if (!this.menu.length) return {};
let matchMenu = {}; let matchMenu = {};
this.menu.forEach(item=>{ this.menu.forEach((item) => {
const menu = item; const menu = item;
item.children.forEach(item=>{ item.children.forEach((item) => {
if(item.path === this.group) { if (item.path === this.group) {
matchMenu = menu; matchMenu = menu;
return; return;
} }
}) });
}) });
return matchMenu return matchMenu;
}, },
userData() { userData() {
return this.$store.state.userData; return this.$store.state.userData;
} },
}, },
data() { data() {
return { return {
showMobileMenu: false, showMobileMenu: false,
} portal: process.env.VUE_APP_PORTAL_URL + "/#/home/siteArrange",
} };
} },
};
</script> </script>
<style lang="less"> <style lang="less">
.layout-header{ .layout-header {
.mobile-menu-list{display: none} .mobile-menu-list {
.layout-menu-wrapper{ display: none;
}
.layout-menu-wrapper {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
font-size: 14px; font-size: 14px;
color: #eee; color: #eee;
background: #1848c8; background: #1848c8;
.layout-logo{ .layout-logo {
height: 50px; height: 50px;
.el-icon-menu{display: none} .el-icon-menu {
a{ display: none;
}
a {
margin: auto; margin: auto;
} }
img{ img {
vertical-align: middle; vertical-align: middle;
} }
} }
.menu-list{ .menu-list {
li{ li {
a{ a {
display: block; display: block;
padding: 0 12px; padding: 0 12px;
height: 100%; height: 100%;
color: #eee; color: #eee;
&.router-link-active, &.router-link-active,
&[active]{ &[active] {
//background: #1890ff; //background: #1890ff;
color: #fff; color: #fff;
list-style-type:none; list-style-type: none;
border-bottom:3px solid #fff; border-bottom: 3px solid #fff;
padding-bottom: 2px; padding-bottom: 2px;
} }
} }
} }
} }
.layout-profile{ .layout-profile {
padding-right: 30px; padding-right: 30px;
cursor: pointer; cursor: pointer;
} }
} }
.layout-submenu-wrapper{ .layout-submenu-wrapper {
padding-left: 20px; padding-left: 20px;
background: #fff; background: #fff;
height: 42px; height: 42px;
border-bottom: 1px solid #ededed; border-bottom: 1px solid #ededed;
.layout-title{ .layout-title {
font-size: 18px; font-size: 18px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
color: #333; color: #333;
} }
.layout-submenu{ .layout-submenu {
margin-left: 15px; margin-left: 15px;
white-space: nowrap; white-space: nowrap;
overflow: auto; overflow: auto;
li{ li {
a{ a {
display: block; display: block;
padding: 0 10px; padding: 0 10px;
height: 40px; height: 40px;
...@@ -287,7 +331,7 @@ export default { ...@@ -287,7 +331,7 @@ export default {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
&.router-link-active, &.router-link-active,
&[active]{ &[active] {
color: #1890ff; color: #1890ff;
border-bottom: 2px solid #1890ff; border-bottom: 2px solid #1890ff;
} }
...@@ -297,48 +341,48 @@ export default { ...@@ -297,48 +341,48 @@ export default {
} }
} }
@media screen and (max-width: 800px){ @media screen and (max-width: 800px) {
.layout-header { .layout-header {
.mobile-menu-list{ .mobile-menu-list {
display: flex; display: flex;
background: #222333; background: #222333;
padding: 0 10px; padding: 0 10px;
li{ li {
padding: 8px 5px; padding: 8px 5px;
a{ a {
width: 1em; width: 1em;
display: block; display: block;
color: #eee; color: #eee;
font-size: 14px; font-size: 14px;
word-break: break-all; word-break: break-all;
&.router-link-active, &.router-link-active,
&[active]{ &[active] {
color: #1890ff; color: #1890ff;
} }
} }
} }
} }
.layout-submenu-wrapper{ .layout-submenu-wrapper {
padding-left: 0; padding-left: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.layout-menu-wrapper { .layout-menu-wrapper {
width: 100%; width: 100%;
.layout-logo{ .layout-logo {
width: 40px; width: 40px;
.el-icon-menu{ .el-icon-menu {
margin: auto; margin: auto;
display: inline-block; display: inline-block;
} }
a{ a {
display: none; display: none;
} }
} }
.menu-list{ .menu-list {
display: none; display: none;
} }
li{ li {
width: 100%; width: 100%;
} }
} }
......
<template> <template>
<div> <div>
<div class="profile" :class="{close: isOpen}"> <div class="profile" :class="{ close: isOpen }">
<p class="menu-switch"> <p class="menu-switch">
<i @click="toogle" :class="`el-icon-s-${isOpen?'unfold':'fold'}`" /> <i @click="toogle" :class="`el-icon-s-${isOpen ? 'unfold' : 'fold'}`" />
</p> </p>
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
{{currentUserName}} {{ currentUserName }}
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="update">修改密码</el-dropdown-item> <el-dropdown-item command="update">修改密码</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item> <el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<div class="sidebar" :class="{close: isOpen}"> <div class="sidebar" :class="{ close: isOpen }">
<div class="logo"> <div class="logo">
<router-link to="/"> <router-link to="/">
<img src="../assets/images/logo.png" height="20" alt /> <img src="../assets/images/logo.png" height="20" alt />
{{isOpen ? '' : 'xxx系统' }} {{ isOpen ? "" : "xxx系统" }}
</router-link> </router-link>
</div> </div>
<el-menu :default-active="defaultActive" background-color="#222333" text-color="#fff" active-text-color="#409eff" :collapse="isOpen" :collapse-transition="false" router unique-opened> <el-menu
<el-menu-item index="/index" key="home"> :default-active="defaultActive"
<i class="el-icon-s-home"></i> background-color="#222333"
<span>首页</span> text-color="#fff"
</el-menu-item> active-text-color="#409eff"
:collapse="isOpen"
:collapse-transition="false"
router
unique-opened
>
<el-menu-item index="/index" key="home">
<i class="el-icon-s-home"></i>
<span>首页</span>
</el-menu-item>
<el-submenu v-for="item in menu" :key="item.id" :index="item.name"> <el-submenu v-for="item in menu" :key="item.id" :index="item.name">
<template slot="title"> <template slot="title">
<i :class="`el-icon-${item.icon}`"></i> <i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{item.name}}</span> <span slot="title">{{ item.name }}</span>
</template> </template>
<el-menu-item v-for="val in item.children" :index="val.path" :key="val.id"> <el-menu-item
<i :class="`el-icon-${val.icon}`"></i> v-for="val in item.children"
<span>{{val.name}}</span> :index="val.path"
</el-menu-item> :key="val.id"
</el-submenu> >
</el-menu> <i :class="`el-icon-${val.icon}`"></i>
</div> <span>{{ val.name }}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
isOpen: { isOpen: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
},
methods: {
handleCommand(key) {
if (key === "update") {
this.$router.push("/login/updatePwd");
}
if (key === "logout") {
this.logout();
}
},
toogle() {
this.$emit("toggle");
},
// 退出登录
logout() {
this.$post("/login/logout")
.then((data) => {})
.catch((error) => {})
.then(() => {
this.$message.success("已退出登录");
this.$store.commit("logout");
this.$router.replace("/login");
});
},
},
computed: {
currentUserName() {
const { currUserName } = this.$store.state.userData;
return currUserName;
},
group() {
const relativeGroup = this.$store.state.group;
if (relativeGroup) {
return relativeGroup;
}
let groupArray = this.$route.path.split("/");
let group = this.$route.path;
let type = groupArray.pop();
if (["add", "edit", "view", "new"].indexOf(type) > -1) {
groupArray.push("list");
group = groupArray.join("/");
}
return group;
}, },
methods: { relativeGroup() {
handleCommand(key) { return this.$store.state.group;
if (key === "update") {
this.$router.push("/login/updatePwd");
}
if (key === "logout") {
this.logout();
}
},
toogle() {
this.$emit("toggle");
},
// 退出登录
logout() {
this.$post("/login/logout")
.then((data) => {})
.catch((error) => {})
.then(() => {
this.$message.success("已退出登录");
this.$store.commit("logout");
this.$router.replace("/login");
});
},
}, },
computed: { flat() {
currentUserName() { return this.userData.flat;
const { currUserName } = this.$store.state.userData;
return currUserName;
},
group() {
const relativeGroup = this.$store.state.group;
if (relativeGroup) {
return relativeGroup;
}
let groupArray = this.$route.path.split("/");
let group = this.$route.path;
let type = groupArray.pop();
if (["add", "edit", "view", "new"].indexOf(type) > -1) {
groupArray.push("list");
group = groupArray.join("/");
}
return group;
},
relativeGroup() {
return this.$store.state.group;
},
flat() {
return this.userData.flat;
},
menu() {
if (!this.userData.barList) return [];
return this.userData.barList.map((item) => {
const url = item.url
? item.url
: item.childList[0]
? item.childList[0].url || ""
: "";
return {
name: item.name,
path: url,
id: item.id,
icon: item.imgPath,
children: item.childList.map((sub) => {
return {
name: sub.name,
path: sub.url
? sub.url
: sub.childList[0]
? sub.childList[0].url || 0
: "",
id: sub.id,
parentId: sub.parentId,
icon: sub.imgPath,
isOut: /^https?\:\/\//.test(sub.url),
};
}),
};
});
},
defaultActive() {
this.search = "";
// this.$route.path;
return this.group;
},
submenu() {
if (!this.menu.length) return {};
let matchMenu = {};
this.menu.forEach((item) => {
const menu = item;
item.children.forEach((item) => {
if (item.path === this.group) {
matchMenu = menu;
return;
}
});
});
return matchMenu;
},
userData() {
return this.$store.state.userData;
},
}, },
data() { menu() {
return {}; if (!this.userData.barList) return [];
return this.userData.barList.map((item) => {
const url = item.url
? item.url
: item.childList[0]
? item.childList[0].url || ""
: "";
return {
name: item.name,
path: url,
id: item.id,
icon: item.imgPath,
children: item.childList.map((sub) => {
return {
name: sub.name,
path: sub.url
? sub.url
: sub.childList[0]
? sub.childList[0].url || 0
: "",
id: sub.id,
parentId: sub.parentId,
icon: sub.imgPath,
isOut: /^https?\:\/\//.test(sub.url),
};
}),
};
});
}, },
defaultActive() {
this.search = "";
// this.$route.path;
return this.group;
},
submenu() {
if (!this.menu.length) return {};
let matchMenu = {};
this.menu.forEach((item) => {
const menu = item;
item.children.forEach((item) => {
if (item.path === this.group) {
matchMenu = menu;
return;
}
});
});
return matchMenu;
},
userData() {
return this.$store.state.userData;
},
},
data() {
return {};
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
.profile { .profile {
height: 50px; height: 50px;
background-color: #222333; background-color: #222333;
text-align: right; text-align: right;
position: fixed; position: fixed;
right: 0; right: 0;
width: calc(100% - 200px); width: calc(100% - 200px);
z-index: 999; z-index: 999;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&.close { &.close {
width: calc(100% - 64px); width: calc(100% - 64px);
} }
.menu-switch { .menu-switch {
cursor: pointer; cursor: pointer;
i { i {
font-size: 20px; font-size: 20px;
color: #999; color: #999;
font-weight: normal; font-weight: normal;
}
} }
}
} }
.sidebar { .sidebar {
width: 200px; width: 200px;
height: 100%; height: 100%;
background-color: #222333; background-color: #222333;
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
.el-menu { .el-menu {
border-right: 0 none; border-right: 0 none;
height: calc(100% - 50px); height: calc(100% - 50px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 17px; width: 17px;
height: 17px; height: 17px;
background-color: transparent; background-color: transparent;
border-radius: 9px; border-radius: 9px;
}
&::-webkit-scrollbar-thumb {
background-color: #40425a;
border-radius: 9px;
background-clip: content-box;
border: 5px solid transparent;
}
i {
&.el-icon-folder {
font-size: 18px;
margin-right: 3px;
}
&.el-icon-tickets {
font-size: 16px;
margin-right: 0;
}
}
} }
&.close { &::-webkit-scrollbar-thumb {
width: 64px; background-color: #40425a;
.logo { border-radius: 9px;
img { background-clip: content-box;
margin-right: 0; border: 5px solid transparent;
}
a {
padding: 0;
}
}
} }
i {
&.el-icon-folder {
font-size: 18px;
margin-right: 3px;
}
&.el-icon-tickets {
font-size: 16px;
margin-right: 0;
}
}
}
&.close {
width: 64px;
.logo { .logo {
height: 50px; img {
line-height: 50px; margin-right: 0;
text-align: center; }
background-color: #222333; a {
display: flex; padding: 0;
align-items: center; }
justify-content: center; }
.el-icon-menu { }
display: none; .logo {
} height: 50px;
a { line-height: 50px;
margin: auto; text-align: center;
color: #fff; background-color: #222333;
display: flex; display: flex;
flex-direction: row; align-items: center;
justify-content: flex-start; justify-content: center;
align-items: center; .el-icon-menu {
padding-left: 20px; display: none;
} }
img { a {
margin-right: 5px; margin: auto;
} color: #fff;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding-left: 20px;
}
img {
margin-right: 5px;
} }
}
} }
</style> </style>
\ No newline at end of file
...@@ -4,33 +4,34 @@ ...@@ -4,33 +4,34 @@
<div class="layout-table" :loading="data.loading"> <div class="layout-table" :loading="data.loading">
<div class="table-head flex flex-pack-justify"> <div class="table-head flex flex-pack-justify">
<div class="table-head-left flex flex-align-center"> <div class="table-head-left flex flex-align-center">
<slot name="breadcrumb"> <slot name="breadcrumb">
<Breadcrumb style="margin-left: 10px" /> <Breadcrumb style="margin-left: 10px" />
</slot> </slot>
<div class="buttons"> <div class="buttons">
<el-row> <el-row>
<slot name="table-head-left"></slot> <slot name="table-head-left"></slot>
<slot name="table-head-center"> <slot name="table-head-center">
<el-button <el-button
v-if="isShowButton('notAdd')" v-if="isShowButton('notAdd')"
type="primary" type="primary"
icon="el-icon-plus" icon="el-icon-plus"
plain plain
size="mini" size="mini"
@click="config.methods.add" @click="config.methods.add"
title="新增" title="新增"
>新增</el-button >新增</el-button
> >
<el-button <el-button
v-if="isShowBtn('import')" v-if="isShowBtn('import')"
size="mini" size="mini"
plain plain
@click="config.methods.importView" @click="config.methods.importView"
class="el-icon-upload2" class="el-icon-upload2"
title="导入" title="导入"
>导入</el-button> >导入</el-button
>
<!-- <el-button <!-- <el-button
v-if="isShowButton('notDel')" v-if="isShowButton('notDel')"
icon="el-icon-delete" icon="el-icon-delete"
type="danger" type="danger"
...@@ -40,36 +41,47 @@ ...@@ -40,36 +41,47 @@
title="批量删除" title="批量删除"
>删除</el-button >删除</el-button
> --> > -->
<Confirm v-if='isShowButton("notDel")' @confirm='config.methods.del' message='确定要删除选中的多条记录吗?'> <Confirm
<el-button icon="el-icon-delete" type="danger" size='mini' plain title="批量删除">批量删除</el-button> v-if="isShowButton('notDel')"
</Confirm> @confirm="config.methods.del"
<el-button message="确定要删除选中的多条记录吗?"
@click="item.method" >
size="mini" <el-button
:key="item.label" icon="el-icon-delete"
:icon="item.icon" type="danger"
:type="item.type" size="mini"
:loading="item.loading" plain
v-if="item.isShow" title="批量删除"
v-for="item in config.buttons" >批量删除</el-button
circle >
:title="item.label" </Confirm>
></el-button> <el-button
<el-button @click="item.method"
v-if="isShowBtn('back')" size="mini"
@click="config.methods.back" :key="item.label"
size="mini" :icon="item.icon"
icon="el-icon-back" :type="item.type"
circle :loading="item.loading"
title="返回" v-if="item.isShow"
></el-button> v-for="item in config.buttons"
</slot> circle
<slot name="table-head-left2"></slot> :title="item.label"
></el-button>
<el-button
v-if="isShowBtn('back')"
@click="config.methods.back"
size="mini"
icon="el-icon-back"
circle
title="返回"
></el-button>
</slot>
<slot name="table-head-left2"></slot>
</el-row> </el-row>
<el-row> <el-row>
<slot name="table-head-row2-left"></slot> <slot name="table-head-row2-left"></slot>
</el-row> </el-row>
</div> </div>
</div> </div>
......
<template> <template>
<div class="page page-home" style="min-height: 100vh;"> <div class="page page-home" style="min-height: 100vh;">
欢迎你,{{userData}} 欢迎你,{{ userData }}
</div> </div>
</template> </template>
<script> <script>
export default { export default {
computed: { computed: {
userData() { userData() {
return this.$store.state.userData.currUserName; return this.$store.state.userData.currUserName;
},
}, },
},
}; };
</script> </script>
\ No newline at end of file <style lang="less" scoped>
.page-home {
margin-top: 20px !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
</style>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable notAdd notDel :data="tableData" :config="tableConfig"> <LayoutTable notAdd notDel :data="tableData" :config="tableConfig">
<el-button <el-button
slot="table-head-left2" slot="table-head-left2"
style="margin-left: 10px" style="margin-left: 10px"
icon="el-icon-tickets" icon="el-icon-tickets"
size="mini" size="mini"
type="danger" type="danger"
@click="monitorWarn" @click="monitorWarn"
>监测预警</el-button >监测预警</el-button
> >
</LayoutTable>
</LayoutTable>
<drawer-show ref="dataDrawerShow" />
<drawer-show ref="dataDrawerShow" /> <dialog-show ref="dialogform" @ok="getData" />
<dialog-show ref="dialogform" @ok="getData" /> </div>
</div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
import drawerShow from "./dataDrawerShow"; import drawerShow from "./dataDrawerShow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { export default {
name: "RealtimeDataflowList", name: "RealtimeDataflowList",
components: { components: {
dialogShow,drawerShow dialogShow,
drawerShow,
}, },
mixins: [table], mixins: [table],
created() { created() {},
}, methods: {
methods: { /** 重写新增方法 */
/** 重写新增方法 */ toAdd(row) {
toAdd(row) { this.$refs.dialogform.add(row);
this.$refs.dialogform.add(row); },
}, /** 重写编辑方法 */
/** 重写编辑方法 */ toEdit(row) {
toEdit(row) { this.$refs.dialogform.edit(row);
this.$refs.dialogform.edit(row); },
}, /** 重写查看方法 */
/** 重写查看方法 */ toView(row) {
toView(row) { this.$refs.dialogform.view(row);
this.$refs.dialogform.view(row); },
},
monitorWarn(row) {
monitorWarn(row) { this.$refs.dataDrawerShow.view(row);
this.$refs.dataDrawerShow.view(row); },
},
data() {
return {
config: {
search: [
{
name: "device",
type: "select",
label: "监测设备",
}, },
}, {
data() { name: "detectTimeStart",
return { type: "datetime",
config: { label: "开始时间",
search: [ },
{
name: "device",
type: "select",
label: "监测设备",
},
{
name: "detectTimeStart",
type: "datetime",
label: "开始时间",
},
{ {
name: "detectTimeEnd", name: "detectTimeEnd",
type: "datetime", type: "datetime",
label: "结束时间", label: "结束时间",
}, },
], ],
columns: [ columns: [
/* {type: "selection", width: 60},*/ /* {type: "selection", width: 60},*/
{type: "index",label: "序号",width: 50}, { type: "index", label: "序号", width: 50 },
{label: "姓名", prop: "name"}, { label: "姓名", prop: "name" },
{label: "监测设备", prop: "device"}, { label: "监测设备", prop: "device" },
{label: "监测时间", prop: "detectTime", formatter: this.formatterDate}, {
label: "监测时间",
prop: "detectTime",
formatter: this.formatterDate,
},
{label: "联系方式", prop: "contact"}, { label: "联系方式", prop: "contact" },
{label: "身份证号码", prop: "idNumber"}, { label: "身份证号码", prop: "idNumber" },
{label: "是否预约", prop: "isBooking",formatter: this.formatter}, { label: "是否预约", prop: "isBooking", formatter: this.formatter },
{label: "排队编码", prop: "queueNum"}, { label: "排队编码", prop: "queueNum" },
{label: "办理位置", prop: "location"}, { label: "办理位置", prop: "location" },
{label: "识别截图", prop: "picture",formatter: (row) => { {
return row.picture != "" ? ( label: "识别截图",
<el-image prop: "picture",
style="width: 70px; height: 70px" formatter: (row) => {
src={row.picture} return row.picture != "" ? (
preview-src-list={[row.picture]} <el-image
></el-image> style="width: 70px; height: 70px"
) : ( src={row.picture}
"--" preview-src-list={[row.picture]}
); ></el-image>
},}, ) : (
"--"
);
},
},
{ {
label: "操作", label: "操作",
width: 240, width: 240,
formatter: row => { formatter: (row) => {
return ( return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> <table-buttons
); noAdd
} row={row}
} onEdit={this.toEdit}
] onView={this.toView}
} onDel={this.toDel}
}; />
} );
},
},
],
},
}; };
},
};
</script> </script>
...@@ -6,25 +6,50 @@ ...@@ -6,25 +6,50 @@
<el-col :span="24" v-if="form.parentId !== 0"> <el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级节点" prop="parentId"> <el-form-item label="上级节点" prop="parentId">
<treeselect <treeselect
v-model="form.parentId" v-model="form.parentId"
:options="menuOptions" :options="menuOptions"
:normalizer="normalizer" :normalizer="normalizer"
placeholder="选择上级菜单信息" placeholder="选择上级菜单信息"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <Field label="ID" prop="id" v-model="form.id" v-if='pageInfo.type !== "add"' disabled /> <!-- <Field label="ID" prop="id" v-model="form.id" v-if='pageInfo.type !== "add"' disabled />
--> <Field label="名称" prop="name" v-model="form.name"/> -->
<Field label="权限类型" prop="authType" v-model="form.authType" :enumData='dict.authType' type='select' /> <Field label="名称" prop="name" v-model="form.name" />
<Field label="访问地址" prop="url" v-model="form.url" /> <Field
<Field label="状态" prop="status" v-model="form.status" :enumData='dict.status' type='radio' /> label="权限类型"
<Field class="radio-group-container" label="图标" prop="imgPath" :span='24'> prop="authType"
<el-radio-group v-model="form.imgPath" class='form-el-radio-group'> v-model="form.authType"
<el-radio-button style="width: 180px" label="">不需要图标</el-radio-button> :enumData="dict.authType"
<el-radio-button style="width: 180px" v-for='(icon, index) in icons' :key='index' :label="icon"> type="select"
<i :class="'el-icon-'+icon" style="font-size: 20px"></i> />
{{icon}} <Field label="访问地址" prop="url" v-model="form.url" />
<Field
label="状态"
prop="status"
v-model="form.status"
:enumData="dict.status"
type="radio"
/>
<Field
class="radio-group-container"
label="图标"
prop="imgPath"
:span="24"
>
<el-radio-group v-model="form.imgPath" class="form-el-radio-group">
<el-radio-button style="width: 180px" label=""
>不需要图标</el-radio-button
>
<el-radio-button
style="width: 180px"
v-for="(icon, index) in icons"
:key="index"
:label="icon"
>
<i :class="'el-icon-' + icon" style="font-size: 20px"></i>
{{ icon }}
</el-radio-button> </el-radio-button>
</el-radio-group> </el-radio-group>
</Field> </Field>
...@@ -41,7 +66,7 @@ ...@@ -41,7 +66,7 @@
import form from "@/assets/mixins/formdialog"; import form from "@/assets/mixins/formdialog";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import axios from 'axios' import axios from "axios";
export default { export default {
mixins: [form], mixins: [form],
components: { components: {
...@@ -49,15 +74,42 @@ export default { ...@@ -49,15 +74,42 @@ export default {
}, },
data() { data() {
return { return {
fileContent:"", fileContent: "",
icons: [ icons: [
'info', 'error', 'success', 'warning', 'question', "info",
'tickets', 'document', 'goods', 'sold-out', 'news', "error",
'message', 'date', 'printer', 'time', 'bell', "success",
'mobile-phone', 'service', 'view', 'menu', 'star-on', "warning",
'location', 'phone', 'picture', 'delete', 'search', "question",
'edit', 'rank', 'refresh', 'share', 'setting', "tickets",
'upload', 'upload2', 'download', 'loading', "document",
"goods",
"sold-out",
"news",
"message",
"date",
"printer",
"time",
"bell",
"mobile-phone",
"service",
"view",
"menu",
"star-on",
"location",
"phone",
"picture",
"delete",
"search",
"edit",
"rank",
"refresh",
"share",
"setting",
"upload",
"upload2",
"download",
"loading",
], ],
menuOptions: [], menuOptions: [],
// 遮罩层 // 遮罩层
...@@ -66,46 +118,38 @@ export default { ...@@ -66,46 +118,38 @@ export default {
title: "菜单信息", title: "菜单信息",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
id:null, id: null,
toString:[ toString: ["status", "linkType", "commMenu", "menuType", "authType"],
"status",
"linkType",
"commMenu",
"menuType",
"authType",
],
// 表单校验 // 表单校验
rules: { rules: {},
}
}; };
}, },
created() { created() {
axios.get('/icon.txt') axios.get("/icon.txt").then((response) => {
.then(response => { this.fileContent = response.data;
this.fileContent = response.data this.icons = this.fileContent.split("\n");
this.icons = this.fileContent.split('\n') });
})
}, },
methods: { methods: {
/** 编辑 */ /** 编辑 */
edit(row, menuOptions) { edit(row, menuOptions) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.editUrl;; this.urls.currUrl = this.pageInfo.editUrl;
this.getData(); this.getData();
this.menuOptions = menuOptions; this.menuOptions = menuOptions;
this.title = "修改菜单信息"; this.title = "修改菜单信息";
}, },
/** 新增 */ /** 新增 */
async add(row, menuOptions) { async add(row, menuOptions) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl = this.pageInfo.addUrl; this.urls.currUrl = this.pageInfo.addUrl;
this.getData(); this.getData();
if(row.id){ if (row.id) {
this.id=row.id this.id = row.id;
this.form.parentId=row.id this.form.parentId = row.id;
} }
this.menuOptions = menuOptions; this.menuOptions = menuOptions;
this.title = "新增菜单信息"; this.title = "新增菜单信息";
...@@ -113,7 +157,7 @@ export default { ...@@ -113,7 +157,7 @@ export default {
/** 查看*/ /** 查看*/
view(row, menuOptions) { view(row, menuOptions) {
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.viewUrl;; this.urls.currUrl = this.pageInfo.viewUrl;
this.getData(); this.getData();
this.menuOptions = menuOptions; this.menuOptions = menuOptions;
this.title = "菜单信息详细"; this.title = "菜单信息详细";
...@@ -124,8 +168,8 @@ export default { ...@@ -124,8 +168,8 @@ export default {
}, },
/**获取数据后弹框 */ /**获取数据后弹框 */
afterRender(data) { afterRender(data) {
if(this.id){ if (this.id) {
this.form.parentId=this.id this.form.parentId = this.id;
} }
this.open = true; this.open = true;
}, },
...@@ -148,21 +192,21 @@ export default { ...@@ -148,21 +192,21 @@ export default {
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
name : '', name: "",
url : '', url: "",
ancestors : '', ancestors: "",
parentId : 0, parentId: 0,
orderId : 1, orderId: 1,
status : 1, status: 1,
linkType : 0, linkType: 0,
groupId : 1, groupId: 1,
groupName : '', groupName: "",
imgPath : '', imgPath: "",
buttonImgPath : '', buttonImgPath: "",
imgCommPath : '', imgCommPath: "",
commMenu : 0, commMenu: 0,
menuType : 0, menuType: 0,
authType : 3, authType: 3,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
...@@ -195,10 +239,10 @@ export default { ...@@ -195,10 +239,10 @@ export default {
box-shadow: none; box-shadow: none;
} }
.el-radio-button__orig-radio:checked+.el-radio-button__inner { .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
border: 1px solid #3E7BFA !important; border: 1px solid #3e7bfa !important;
color: #3E7BFA; color: #3e7bfa;
line-height: 14px; line-height: 14px;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
......
<template> <template>
<div className="page"> <div class="page">
<LayoutTable notPagination ref="layoutTable" :data="tableData" :config="tableConfig"/> <LayoutTable
<dialog-show ref="dialogform" @ok="getData"/> notPagination
ref="layoutTable"
:data="tableData"
:config="tableConfig"
/>
<dialog-show ref="dialogform" @ok="getData" />
</div> </div>
</template> </template>
<script> <script>
import {handleTree} from "@/assets/utils/table"; import { handleTree } from "@/assets/utils/table";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
...@@ -16,17 +20,17 @@ import dialogShow from "./dialogshow"; ...@@ -16,17 +20,17 @@ import dialogShow from "./dialogshow";
export default { export default {
name: "Menu", name: "Menu",
mixins: [table], mixins: [table],
components: {Treeselect, dialogShow}, components: { Treeselect, dialogShow },
created() { created() {
this.query={"page":1,"size":-1} this.query = { page: 1, size: -1 };
}, },
methods: { methods: {
afterRender(data) { afterRender(data) {
console.log(data) console.log(data);
data.data = handleTree(data.data, "id", "parentId"); data.data = handleTree(data.data, "id", "parentId");
console.log("tree data:",data.data) console.log("tree data:", data.data);
this.menuOptions = data.data; this.menuOptions = data.data;
this.$refs.layoutTable.showType = "treetable" this.$refs.layoutTable.showType = "treetable";
}, },
handleUp(data) { handleUp(data) {
...@@ -47,25 +51,25 @@ export default { ...@@ -47,25 +51,25 @@ export default {
id: id, id: id,
type: type, type: type,
}) })
.then((res) => { .then((res) => {
if (res && res.code && res.code == 1) { if (res && res.code && res.code == 1) {
this.getData() this.getData();
this.loading = false;
this.$message.success("更新排序成功!");
}
})
.catch((error) => {
this.loading = false; this.loading = false;
this.$message.error(error.message); this.$message.success("更新排序成功!");
}); }
})
.catch((error) => {
this.loading = false;
this.$message.error(error.message);
});
}, },
handleAdd(row) { handleAdd(row) {
this.$refs.dialogform.add(row, this.menuOptions); this.$refs.dialogform.add(row, this.menuOptions);
}, },
handleRowClick(row){ handleRowClick(row) {
console.log(row) console.log(row);
//if(row.children || row.children.length === 0) return ; //if(row.children || row.children.length === 0) return ;
//this.$refs.layoutTable.toggleRowExpansion(row,true) //this.$refs.layoutTable.toggleRowExpansion(row,true)
}, },
...@@ -77,17 +81,17 @@ export default { ...@@ -77,17 +81,17 @@ export default {
/** 重写编辑方法 */ /** 重写编辑方法 */
toEdit(row) { toEdit(row) {
this.loading = true; this.loading = true;
this.$post(this.pageInfo.exclude, {id: row.id}) this.$post(this.pageInfo.exclude, { id: row.id })
.then((res) => { .then((res) => {
if (res && res.code && res.code == 1) { if (res && res.code && res.code == 1) {
this.menuOptions = handleTree(res.data.data); this.menuOptions = handleTree(res.data.data);
this.$refs.dialogform.edit(row, this.menuOptions); this.$refs.dialogform.edit(row, this.menuOptions);
this.loading = false; this.loading = false;
} }
}) })
.catch((error) => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}); });
}, },
/** 重写查看方法 */ /** 重写查看方法 */
toView(row) { toView(row) {
...@@ -96,24 +100,25 @@ export default { ...@@ -96,24 +100,25 @@ export default {
// 展示菜单图标 // 展示菜单图标
showIcon(row, column) { showIcon(row, column) {
return <i class={'el-icon-'+row.imgPath}></i> return <i class={"el-icon-" + row.imgPath}></i>;
}, },
// 操作菜单状态 // 操作菜单状态
changeStatus(row, column) { changeStatus(row, column) {
return ( return (
<my-switch <my-switch
confirm confirm
url='/menu/save' url="/menu/save"
row={row} row={row}
onChange={this.statusChange} onChange={this.statusChange}
value={this.tableData.data} value={this.tableData.data}
onInput={(data)=>{ onInput={(data) => {
this.tableData.data = data; this.tableData.data = data;
}}/> }}
) />
);
}, },
statusChange() { statusChange() {
this.$store.dispatch('login'); this.$store.dispatch("login");
}, },
}, },
data() { data() {
...@@ -125,41 +130,41 @@ export default { ...@@ -125,41 +130,41 @@ export default {
search: [], search: [],
columns: [ columns: [
{ {
type: 'selection', type: "selection",
width: 60, width: 60,
}, },
{ {
prop: 'id', prop: "id",
label: 'ID', label: "ID",
width: 120, width: 120,
}, },
{ {
prop: 'name', prop: "name",
label: '名称', label: "名称",
width: 160, width: 160,
}, },
{ {
prop: 'imgPath', prop: "imgPath",
label: '图标', label: "图标",
width: 50, width: 50,
formatter: this.showIcon, formatter: this.showIcon,
}, },
{ {
prop: 'authType', prop: "authType",
label: '权限类型', label: "权限类型",
formatter: this.formatter, formatter: this.formatter,
}, },
{ {
prop: 'parentId', prop: "parentId",
label: '父ID', label: "父ID",
}, },
{ {
prop: 'url', prop: "url",
label: '地址', label: "地址",
}, },
{ {
prop: 'status', prop: "status",
label: '状态', label: "状态",
width: 100, width: 100,
formatter: this.changeStatus, formatter: this.changeStatus,
}, },
...@@ -183,51 +188,50 @@ export default { ...@@ -183,51 +188,50 @@ export default {
{ {
label: "操作", label: "操作",
width: 280, width: 280,
formatter: row => { formatter: (row) => {
return ( return (
<div> <div>
<el-link <el-link
style="margin-right:5px;margin-left:5px" style="margin-right:5px;margin-left:5px"
icon="el-icon-top" icon="el-icon-top"
onClick={() => { onClick={() => {
this.handleUp(row); this.handleUp(row);
}} }}
></el-link> ></el-link>
<el-link <el-link
style="margin-right:5px;margin-left:5px" style="margin-right:5px;margin-left:5px"
icon="el-icon-bottom" icon="el-icon-bottom"
onClick={() => { onClick={() => {
this.handleDown(row); this.handleDown(row);
}} }}
></el-link>
></el-link> <el-button
size="mini"
<el-button type="text"
size="mini" icon="el-icon-edit-outline"
type="text" onClick={() => {
icon="el-icon-edit-outline" this.handleAdd(row);
onClick={() => { }}
this.handleAdd(row); >
}} 新增
> </el-button>
新增 <table-buttons
</el-button> noAdd
<table-buttons noView
noAdd row={row}
noView onEdit={this.toEdit}
row={row} onView={this.toView}
onEdit={this.toEdit} onDel={this.toDel}
onView={this.toView} />
onDel={this.toDel} </div>
/>
</div>
); );
} },
} },
] ],
} },
}; };
} },
}; };
</script> </script>
...@@ -17,7 +17,8 @@ module.exports = { ...@@ -17,7 +17,8 @@ module.exports = {
hot: true,//自动保存 hot: true,//自动保存
proxy: { proxy: {
'/refined': { '/refined': {
target: 'http://127.0.0.1:21080', target: 'http://112.19.80.237:11080/',
// target: 'http://127.0.0.1:21080',
changeOrigin: true, changeOrigin: true,
secure: false, secure: false,
cookieDomainRewrite: 'localhost', cookieDomainRewrite: 'localhost',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment