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

tui

parent cc28d5e8
......@@ -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
......
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 {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
box-sizing: border-box;
}
html * {
outline: 0;
outline: 0;
box-sizing: inherit;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,body {
height: 100%;
html,
body {
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 {
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 {
margin: 0;
padding: 0
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%;
input,
select,
textarea,
button {
font-size: 100%;
-webkit-appearance: none;
border:0;
border: 0;
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0
fieldset,
img {
border: 0;
}
abbr,acronym {
border: 0;
font-variant: normal
abbr,
acronym {
border: 0;
font-variant: normal;
}
del {
text-decoration: line-through
text-decoration: line-through;
}
address,caption,cite,code,dfn,em,th,var {
font-style: normal;
font-weight: 500
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 500;
}
ol,ul {
list-style: none
ol,
ul {
list-style: none;
}
caption,th {
text-align: left
caption,
th {
text-align: left;
}
// h1,h2,h3,h4,h5,h6 {
......@@ -67,28 +120,31 @@ caption,th {
// font-weight: 500
// }
q:before,q:after {
content: ''
q:before,
q:after {
content: "";
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em
top: -0.5em;
}
sub {
bottom: -.25em
bottom: -0.25em;
}
ins,a {
text-decoration: none;
cursor: pointer;
ins,
a {
text-decoration: none;
cursor: pointer;
}
/* ============================================================
flex:定义布局为盒模型
......@@ -99,36 +155,72 @@ ins,a {
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: '';
.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;
.fl {
float: left;
}
#app,.pages{
.flex;
.flex-v;
height: 100%;
.fr {
float: right;
}
.hide {
display: none;
}
.disabled {
pointer-events: none;
}
#app,
.pages {
.flex;
.flex-v;
height: 100%;
}
.ellipsis{
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......@@ -137,90 +229,143 @@ ins,a {
display: none;
}
[disabled] {
pointer-events: none;
}
.el-dialog{
.el-checkbox-group{
.el-checkbox{
margin: 5px 0;
width: 33.33%;
}
.pointBox{
width: 50%;
}
}
pointer-events: none;
}
.el-dialog {
.el-checkbox-group {
.el-checkbox {
margin: 5px 0;
width: 33.33%;
}
.pointBox {
width: 50%;
}
}
}
.el-table th {
user-select: all;
user-select: all;
}
.el-progress-bar{
padding-right: 70px;
margin-right: -70px;
.el-progress-bar {
padding-right: 70px;
margin-right: -70px;
}
#operatorUserCabinCheckBox .el-checkbox{
#operatorUserCabinCheckBox .el-checkbox {
white-space: normal !important;
width: 100%
width: 100%;
}
#operatorUserCabinCheckBox .el-checkbox__label{
#operatorUserCabinCheckBox .el-checkbox__label {
display: inline;
}
// 统计页面隔日期变色
.page-statistics{
.chart{
.page-statistics {
.chart {
margin-bottom: 80px;
border: 1px solid #ededed;
height: 400px;
}
.el-table th, .el-table tr{
&.color-gray{
.el-table th,
.el-table tr {
&.color-gray {
background-color: #f0f9eb;
}
}
}
@media screen and (max-width: 800px){
.page{
margin: 5px 5px;
}
.el-dialog{
width: 98%!important;
.el-checkbox-group{
.el-checkbox{
margin: 5px 0;
width: 50%;
font-size: 12px;
.el-checkbox__label{
font-size: 12px;
}
}
}
}
@media screen and (max-width: 800px) {
.page {
margin: 5px 5px;
}
.el-dialog {
width: 98% !important;
.el-checkbox-group {
.el-checkbox {
margin: 5px 0;
width: 50%;
font-size: 12px;
.el-checkbox__label {
font-size: 12px;
}
}
}
}
}
// .is-active{
// background-color: red;
// }
.mobile-table-card{
margin: 10px auto;
padding: 10px;
box-shadow: 0 0 5px #ccc;
.mobile-table-cell{
padding: 5px 0;
border-bottom: 1px dotted #eee;
.cell-title{
font-size: 13px;
color: #666;
}
.cell-content{
padding-left: 5px;
text-align: right;
word-break: break-word;
}
}
}
\ No newline at end of file
.mobile-table-card {
margin: 10px auto;
padding: 10px;
box-shadow: 0 0 5px #ccc;
.mobile-table-cell {
padding: 5px 0;
border-bottom: 1px dotted #eee;
.cell-title {
font-size: 13px;
color: #666;
}
.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;
}
import axios from 'axios';
import Qs from 'qs';
const JSONbig = require('json-bigint')({"storeAsString": true});
import cookie from './cookie';
import httpErrorHandler from './httpErrorHandler';
import axios from "axios";
import Qs from "qs";
const JSONbig = require("json-bigint")({ storeAsString: true });
import cookie from "./cookie";
import httpErrorHandler from "./httpErrorHandler";
const instance = axios.create({
baseURL: '/refined',
baseURL: "/refined",
headers: {
post: {
'Content-Type': 'application/json;charset=UTF-8',
'dataType': 'json',
}
"Content-Type": "application/json;charset=UTF-8",
dataType: "json",
},
},
transformResponse: [data=>{
try {
JSON.parse(data);
return JSONbig.parse(data);
} catch (error) {
return data;
}
}],
transformResponse: [
(data) => {
try {
JSON.parse(data);
return JSONbig.parse(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.url = `http://${hostname}:${port}${baseURL}/${config.url}`;
//config.data = Qs.stringify(config.data, {arrayFormat: 'repeat', allowDots: true});
//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}`;
//config.data = Qs.stringify(config.data, {arrayFormat: 'repeat', allowDots: true});
//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);
});
instance.interceptors.response.use(response=>{
return response.data
},httpErrorHandler);
instance.interceptors.response.use((response) => {
return response.data;
}, httpErrorHandler);
/**
* 封装后的axios post方法
......@@ -68,9 +76,9 @@ instance.interceptors.response.use(response=>{
*/
export function post(url, option, config = {}) {
const data = Object.assign({}, option, {
// __mortals_token__: cookie.getItem('__mortals_token__'),
})
return instance.post(url, data, config)
// __mortals_token__: cookie.getItem('__mortals_token__'),
});
return instance.post(url, data, config);
}
/**
......@@ -84,24 +92,23 @@ export function post(url, option, config = {}) {
export function get(url, option, config = {}) {
const data = Object.assign({}, option, {
//__mortals_token__: cookie.getItem('__mortals_token__'),
})
return instance.get(url, { params: data }, config)
});
return instance.get(url, { params: data }, config);
}
// 文件上传
const uploadInstance = axios.create({
baseURL: '/m',
baseURL: "/m",
headers: {
post: {
'Content-Type': 'multipart/form-data',
}
}
"Content-Type": "multipart/form-data",
},
},
});
uploadInstance.interceptors.response.use(response=>{
return response.data
},httpErrorHandler);
uploadInstance.interceptors.response.use((response) => {
return response.data;
}, httpErrorHandler);
/**
* 封装后的axios upload方法
......@@ -113,8 +120,8 @@ uploadInstance.interceptors.response.use(response=>{
*/
export function upload(url, option, config = {}) {
let formdata = new FormData();
Object.keys(option).forEach(key=>{
formdata.append(key, option[key])
})
return uploadInstance.post(url, formdata, config)
Object.keys(option).forEach((key) => {
formdata.append(key, option[key]);
});
return uploadInstance.post(url, formdata, config);
}
<template>
<el-table
size='small'
size="small"
:data="tableData"
:row-key="handleRowKeyMethod"
:span-method="handleSpanMethod"
......@@ -9,113 +9,111 @@
@sort-change="handleSortChange"
@row-click="handleRowClick"
:row-class-name="tableRowClassName"
:empty-text='emptyText'
:empty-text="emptyText"
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
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
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>
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>
</template>
<script>
export default {
props: {
handleRowKeyMethod: {
type: Function,
required: false,
default: row => { return row.id }
default: (row) => {
return row.id;
},
},
handleSelectableMethod: {
type: Function,
required: false,
default: () => {}
default: () => {},
},
handleIndexMethod: {
type: Function,
required: false,
default: () => {}
default: () => {},
},
handleSpanMethod: {
type: Function,
required: false,
default: () => {}
default: () => {},
},
handleSelectionChange: {
type: Function,
required: false,
default: () => {}
default: () => {},
},
handleRowClick: {
type: Function,
required: false,
default: () => {}
default: () => {},
},
handleSortChange: {
type: Function,
required: false,
default: () => {}
default: () => {},
},
tableRowClassName: {
type: Function,
required: false,
default: () => {}
default: () => {},
},
loading: {
type: Boolean,
required: false,
default: true
default: true,
},
tableData: {
type: Array,
required: false,
default: () => []
default: () => [],
},
columns: {
type: Array,
required: false,
default: ()=> [],
}
default: () => [],
},
},
computed: {
emptyText() {
return (!this.loading && !this.tableData.length) ? '暂无数据' : '加载中...'
return !this.loading && !this.tableData.length ? "暂无数据" : "加载中...";
},
},
methods:{
},
methods: {},
data() {
return {}
}
}
return {};
},
};
</script>
......@@ -4,33 +4,34 @@
<div class="layout-table" :loading="data.loading">
<div class="table-head flex flex-pack-justify">
<div class="table-head-left flex flex-align-center">
<slot name="breadcrumb">
<slot name="breadcrumb">
<Breadcrumb style="margin-left: 10px" />
</slot>
<div class="buttons">
<el-row>
<slot name="table-head-left"></slot>
<slot name="table-head-center">
<el-button
v-if="isShowButton('notAdd')"
type="primary"
icon="el-icon-plus"
plain
size="mini"
@click="config.methods.add"
title="新增"
>新增</el-button
>
<el-button
v-if="isShowBtn('import')"
size="mini"
plain
@click="config.methods.importView"
class="el-icon-upload2"
title="导入"
>导入</el-button>
<slot name="table-head-left"></slot>
<slot name="table-head-center">
<el-button
v-if="isShowButton('notAdd')"
type="primary"
icon="el-icon-plus"
plain
size="mini"
@click="config.methods.add"
title="新增"
>新增</el-button
>
<el-button
v-if="isShowBtn('import')"
size="mini"
plain
@click="config.methods.importView"
class="el-icon-upload2"
title="导入"
>导入</el-button
>
<!-- <el-button
<!-- <el-button
v-if="isShowButton('notDel')"
icon="el-icon-delete"
type="danger"
......@@ -40,36 +41,47 @@
title="批量删除"
>删除</el-button
> -->
<Confirm v-if='isShowButton("notDel")' @confirm='config.methods.del' message='确定要删除选中的多条记录吗?'>
<el-button icon="el-icon-delete" type="danger" size='mini' plain title="批量删除">批量删除</el-button>
</Confirm>
<el-button
@click="item.method"
size="mini"
:key="item.label"
:icon="item.icon"
:type="item.type"
:loading="item.loading"
v-if="item.isShow"
v-for="item in config.buttons"
circle
: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>
<Confirm
v-if="isShowButton('notDel')"
@confirm="config.methods.del"
message="确定要删除选中的多条记录吗?"
>
<el-button
icon="el-icon-delete"
type="danger"
size="mini"
plain
title="批量删除"
>批量删除</el-button
>
</Confirm>
<el-button
@click="item.method"
size="mini"
:key="item.label"
:icon="item.icon"
:type="item.type"
:loading="item.loading"
v-if="item.isShow"
v-for="item in config.buttons"
circle
: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>
<slot name="table-head-row2-left"></slot>
</el-row>
<el-row>
<slot name="table-head-row2-left"></slot>
</el-row>
</div>
</div>
......
<template>
<div class="page page-home" style="min-height: 100vh;">
欢迎你,{{userData}}
</div>
<div class="page page-home" style="min-height: 100vh;">
欢迎你,{{ userData }}
</div>
</template>
<script>
export default {
computed: {
userData() {
return this.$store.state.userData.currUserName;
},
computed: {
userData() {
return this.$store.state.userData.currUserName;
},
},
};
</script>
\ No newline at end of file
</script>
<style lang="less" scoped>
.page-home {
margin-top: 20px !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
</style>
<template>
<div class="page">
<LayoutTable notAdd notDel :data="tableData" :config="tableConfig">
<el-button
slot="table-head-left2"
style="margin-left: 10px"
icon="el-icon-tickets"
size="mini"
type="danger"
@click="monitorWarn"
>监测预警</el-button
>
</LayoutTable>
<drawer-show ref="dataDrawerShow" />
<dialog-show ref="dialogform" @ok="getData" />
</div>
<div class="page">
<LayoutTable notAdd notDel :data="tableData" :config="tableConfig">
<el-button
slot="table-head-left2"
style="margin-left: 10px"
icon="el-icon-tickets"
size="mini"
type="danger"
@click="monitorWarn"
>监测预警</el-button
>
</LayoutTable>
<drawer-show ref="dataDrawerShow" />
<dialog-show ref="dialogform" @ok="getData" />
</div>
</template>
<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import drawerShow from "./dataDrawerShow";
import table from "@/assets/mixins/table";
export default {
name: "RealtimeDataflowList",
components: {
dialogShow,drawerShow
},
mixins: [table],
created() {
},
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.dialogform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.dialogform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.dialogform.view(row);
},
monitorWarn(row) {
this.$refs.dataDrawerShow.view(row);
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import drawerShow from "./dataDrawerShow";
import table from "@/assets/mixins/table";
export default {
name: "RealtimeDataflowList",
components: {
dialogShow,
drawerShow,
},
mixins: [table],
created() {},
methods: {
/** 重写新增方法 */
toAdd(row) {
this.$refs.dialogform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.dialogform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.dialogform.view(row);
},
monitorWarn(row) {
this.$refs.dataDrawerShow.view(row);
},
},
data() {
return {
config: {
search: [
{
name: "device",
type: "select",
label: "监测设备",
},
},
data() {
return {
config: {
search: [
{
name: "device",
type: "select",
label: "监测设备",
},
{
name: "detectTimeStart",
type: "datetime",
label: "开始时间",
},
{
name: "detectTimeStart",
type: "datetime",
label: "开始时间",
},
{
name: "detectTimeEnd",
type: "datetime",
label: "结束时间",
},
],
columns: [
/* {type: "selection", width: 60},*/
{type: "index",label: "序号",width: 50},
{
name: "detectTimeEnd",
type: "datetime",
label: "结束时间",
},
],
columns: [
/* {type: "selection", width: 60},*/
{ 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 != "" ? (
<el-image
style="width: 70px; height: 70px"
src={row.picture}
preview-src-list={[row.picture]}
></el-image>
) : (
"--"
);
},},
{
label: "识别截图",
prop: "picture",
formatter: (row) => {
return row.picture != "" ? (
<el-image
style="width: 70px; height: 70px"
src={row.picture}
preview-src-list={[row.picture]}
></el-image>
) : (
"--"
);
},
},
{
label: "操作",
width: 240,
formatter: row => {
return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
);
}
}
]
}
};
}
{
label: "操作",
width: 240,
formatter: (row) => {
return (
<table-buttons
noAdd
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
);
},
},
],
},
};
},
};
</script>
......@@ -6,25 +6,50 @@
<el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级节点" prop="parentId">
<treeselect
v-model="form.parentId"
:options="menuOptions"
:normalizer="normalizer"
placeholder="选择上级菜单信息"
v-model="form.parentId"
:options="menuOptions"
:normalizer="normalizer"
placeholder="选择上级菜单信息"
/>
</el-form-item>
</el-col>
<!-- <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="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}}
<!-- <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="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-group>
</Field>
......@@ -41,7 +66,7 @@
import form from "@/assets/mixins/formdialog";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import axios from 'axios'
import axios from "axios";
export default {
mixins: [form],
components: {
......@@ -49,15 +74,42 @@ export default {
},
data() {
return {
fileContent:"",
fileContent: "",
icons: [
'info', 'error', 'success', 'warning', 'question',
'tickets', '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',
"info",
"error",
"success",
"warning",
"question",
"tickets",
"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: [],
// 遮罩层
......@@ -66,46 +118,38 @@ export default {
title: "菜单信息",
// 是否显示弹出层
open: false,
id:null,
toString:[
"status",
"linkType",
"commMenu",
"menuType",
"authType",
],
id: null,
toString: ["status", "linkType", "commMenu", "menuType", "authType"],
// 表单校验
rules: {
}
rules: {},
};
},
created() {
axios.get('/icon.txt')
.then(response => {
this.fileContent = response.data
this.icons = this.fileContent.split('\n')
})
axios.get("/icon.txt").then((response) => {
this.fileContent = response.data;
this.icons = this.fileContent.split("\n");
});
},
methods: {
/** 编辑 */
edit(row, menuOptions) {
this.reset()
this.reset();
this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.editUrl;;
this.urls.currUrl = this.pageInfo.editUrl;
this.getData();
this.menuOptions = menuOptions;
this.title = "修改菜单信息";
},
/** 新增 */
async add(row, menuOptions) {
this.reset()
this.reset();
this.query = { id: row.id };
this.urls.currUrl = this.pageInfo.addUrl;
this.getData();
if(row.id){
this.id=row.id
this.form.parentId=row.id
if (row.id) {
this.id = row.id;
this.form.parentId = row.id;
}
this.menuOptions = menuOptions;
this.title = "新增菜单信息";
......@@ -113,7 +157,7 @@ export default {
/** 查看*/
view(row, menuOptions) {
this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.viewUrl;;
this.urls.currUrl = this.pageInfo.viewUrl;
this.getData();
this.menuOptions = menuOptions;
this.title = "菜单信息详细";
......@@ -124,8 +168,8 @@ export default {
},
/**获取数据后弹框 */
afterRender(data) {
if(this.id){
this.form.parentId=this.id
if (this.id) {
this.form.parentId = this.id;
}
this.open = true;
},
......@@ -148,21 +192,21 @@ export default {
// 表单重置
reset() {
this.form = {
name : '',
url : '',
ancestors : '',
parentId : 0,
orderId : 1,
status : 1,
linkType : 0,
groupId : 1,
groupName : '',
imgPath : '',
buttonImgPath : '',
imgCommPath : '',
commMenu : 0,
menuType : 0,
authType : 3,
name: "",
url: "",
ancestors: "",
parentId: 0,
orderId: 1,
status: 1,
linkType: 0,
groupId: 1,
groupName: "",
imgPath: "",
buttonImgPath: "",
imgCommPath: "",
commMenu: 0,
menuType: 0,
authType: 3,
};
this.resetForm("form");
},
......@@ -195,10 +239,10 @@ export default {
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);
border: 1px solid #3E7BFA !important;
color: #3E7BFA;
border: 1px solid #3e7bfa !important;
color: #3e7bfa;
line-height: 14px;
outline: none;
box-shadow: none;
......
<template>
<div className="page">
<LayoutTable notPagination ref="layoutTable" :data="tableData" :config="tableConfig"/>
<dialog-show ref="dialogform" @ok="getData"/>
<div class="page">
<LayoutTable
notPagination
ref="layoutTable"
:data="tableData"
:config="tableConfig"
/>
<dialog-show ref="dialogform" @ok="getData" />
</div>
</template>
<script>
import {handleTree} from "@/assets/utils/table";
import { handleTree } from "@/assets/utils/table";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import table from "@/assets/mixins/table";
......@@ -16,17 +20,17 @@ import dialogShow from "./dialogshow";
export default {
name: "Menu",
mixins: [table],
components: {Treeselect, dialogShow},
components: { Treeselect, dialogShow },
created() {
this.query={"page":1,"size":-1}
this.query = { page: 1, size: -1 };
},
methods: {
afterRender(data) {
console.log(data)
console.log(data);
data.data = handleTree(data.data, "id", "parentId");
console.log("tree data:",data.data)
console.log("tree data:", data.data);
this.menuOptions = data.data;
this.$refs.layoutTable.showType = "treetable"
this.$refs.layoutTable.showType = "treetable";
},
handleUp(data) {
......@@ -47,25 +51,25 @@ export default {
id: id,
type: type,
})
.then((res) => {
if (res && res.code && res.code == 1) {
this.getData()
this.loading = false;
this.$message.success("更新排序成功!");
}
})
.catch((error) => {
.then((res) => {
if (res && res.code && res.code == 1) {
this.getData();
this.loading = false;
this.$message.error(error.message);
});
this.$message.success("更新排序成功!");
}
})
.catch((error) => {
this.loading = false;
this.$message.error(error.message);
});
},
handleAdd(row) {
this.$refs.dialogform.add(row, this.menuOptions);
},
handleRowClick(row){
console.log(row)
handleRowClick(row) {
console.log(row);
//if(row.children || row.children.length === 0) return ;
//this.$refs.layoutTable.toggleRowExpansion(row,true)
},
......@@ -77,17 +81,17 @@ export default {
/** 重写编辑方法 */
toEdit(row) {
this.loading = true;
this.$post(this.pageInfo.exclude, {id: row.id})
.then((res) => {
if (res && res.code && res.code == 1) {
this.menuOptions = handleTree(res.data.data);
this.$refs.dialogform.edit(row, this.menuOptions);
this.loading = false;
}
})
.catch((error) => {
this.$message.error(error.message);
});
this.$post(this.pageInfo.exclude, { id: row.id })
.then((res) => {
if (res && res.code && res.code == 1) {
this.menuOptions = handleTree(res.data.data);
this.$refs.dialogform.edit(row, this.menuOptions);
this.loading = false;
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
/** 重写查看方法 */
toView(row) {
......@@ -96,24 +100,25 @@ export default {
// 展示菜单图标
showIcon(row, column) {
return <i class={'el-icon-'+row.imgPath}></i>
return <i class={"el-icon-" + row.imgPath}></i>;
},
// 操作菜单状态
changeStatus(row, column) {
return (
<my-switch
confirm
url='/menu/save'
row={row}
onChange={this.statusChange}
value={this.tableData.data}
onInput={(data)=>{
this.tableData.data = data;
}}/>
)
<my-switch
confirm
url="/menu/save"
row={row}
onChange={this.statusChange}
value={this.tableData.data}
onInput={(data) => {
this.tableData.data = data;
}}
/>
);
},
statusChange() {
this.$store.dispatch('login');
this.$store.dispatch("login");
},
},
data() {
......@@ -125,41 +130,41 @@ export default {
search: [],
columns: [
{
type: 'selection',
type: "selection",
width: 60,
},
{
prop: 'id',
label: 'ID',
prop: "id",
label: "ID",
width: 120,
},
{
prop: 'name',
label: '名称',
prop: "name",
label: "名称",
width: 160,
},
{
prop: 'imgPath',
label: '图标',
prop: "imgPath",
label: "图标",
width: 50,
formatter: this.showIcon,
},
{
prop: 'authType',
label: '权限类型',
prop: "authType",
label: "权限类型",
formatter: this.formatter,
},
{
prop: 'parentId',
label: '父ID',
prop: "parentId",
label: "父ID",
},
{
prop: 'url',
label: '地址',
prop: "url",
label: "地址",
},
{
prop: 'status',
label: '状态',
prop: "status",
label: "状态",
width: 100,
formatter: this.changeStatus,
},
......@@ -183,51 +188,50 @@ export default {
{
label: "操作",
width: 280,
formatter: row => {
formatter: (row) => {
return (
<div>
<el-link
style="margin-right:5px;margin-left:5px"
icon="el-icon-top"
onClick={() => {
this.handleUp(row);
}}
></el-link>
<div>
<el-link
style="margin-right:5px;margin-left:5px"
icon="el-icon-top"
onClick={() => {
this.handleUp(row);
}}
></el-link>
<el-link
style="margin-right:5px;margin-left:5px"
icon="el-icon-bottom"
onClick={() => {
this.handleDown(row);
}}
<el-link
style="margin-right:5px;margin-left:5px"
icon="el-icon-bottom"
onClick={() => {
this.handleDown(row);
}}
></el-link>
></el-link>
<el-button
size="mini"
type="text"
icon="el-icon-edit-outline"
onClick={() => {
this.handleAdd(row);
}}
>
新增
</el-button>
<table-buttons
noAdd
noView
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
</div>
<el-button
size="mini"
type="text"
icon="el-icon-edit-outline"
onClick={() => {
this.handleAdd(row);
}}
>
新增
</el-button>
<table-buttons
noAdd
noView
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
</div>
);
}
}
]
}
},
},
],
},
};
}
},
};
</script>
......@@ -17,7 +17,8 @@ module.exports = {
hot: true,//自动保存
proxy: {
'/refined': {
target: 'http://127.0.0.1:21080',
target: 'http://112.19.80.237:11080/',
// target: 'http://127.0.0.1:21080',
changeOrigin: true,
secure: false,
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