This commit is contained in:
sakuya
parent
ffd005bb02
commit
2660d74025
|
|
@ -139,14 +139,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/other/lala",
|
|
||||||
"name": "404",
|
|
||||||
"component": "lala",
|
|
||||||
"meta": {
|
|
||||||
"title": "模拟404"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -158,12 +150,12 @@
|
||||||
"icon": "el-icon-setting"
|
"icon": "el-icon-setting"
|
||||||
},
|
},
|
||||||
"children": [{
|
"children": [{
|
||||||
"path": "/setting/1",
|
"path": "/setting/system",
|
||||||
"name": "setting1",
|
"name": "system",
|
||||||
"meta": {
|
"meta": {
|
||||||
"title": "系统设置"
|
"title": "系统设置"
|
||||||
},
|
},
|
||||||
"component": "lala"
|
"component": "setting/system"
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
this.filter = this.defaultFilter;
|
this.filter = this.defaultFilter || [];
|
||||||
this.scrollInit()
|
this.scrollInit()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -178,13 +178,16 @@
|
||||||
this.cancel();
|
this.cancel();
|
||||||
this.change();
|
this.change();
|
||||||
},
|
},
|
||||||
change(){
|
getFilter(){
|
||||||
var _filter = this.filter;
|
var _filter = this.filter;
|
||||||
var formatData = {};
|
var formatData = {};
|
||||||
_filter.map(item => {
|
_filter.map(item => {
|
||||||
formatData.[item.key]=item.value
|
formatData.[item.key]=item.value
|
||||||
});
|
});
|
||||||
this.$emit('change', formatData)
|
return formatData;
|
||||||
|
},
|
||||||
|
change(){
|
||||||
|
this.$emit('change', this.getFilter())
|
||||||
},
|
},
|
||||||
scrollInit(){
|
scrollInit(){
|
||||||
const scrollDiv = this.$refs.scFilterBarScrollbar;
|
const scrollDiv = this.$refs.scFilterBarScrollbar;
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
<div class="scTable-table">
|
<div class="scTable-table">
|
||||||
<el-table :data="tableData" :row-key="rowKey" ref="scTable" :height="tableHeight" stripe @selection-change="selectionChange">
|
<el-table :data="tableData" :row-key="rowKey" ref="scTable" :height="tableHeight" stripe @selection-change="selectionChange">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
<el-table-column min-width="1"></el-table-column>
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<el-empty description="暂无数据" :image-size="100"></el-empty>
|
<el-empty description="暂无数据" :image-size="100"></el-empty>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -15,12 +16,20 @@
|
||||||
<el-button @click="setting" icon="el-icon-setting" circle style="margin-left:15px"></el-button>
|
<el-button @click="setting" icon="el-icon-setting" circle style="margin-left:15px"></el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<el-drawer title="表格设置" v-model="tableSetting" :size="400" direction="btt" custom-class="scTable-setting" append-to-body destroy-on-close>
|
||||||
|
待开发
|
||||||
|
</el-drawer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'scTable',
|
name: 'scTable',
|
||||||
|
components: {
|
||||||
|
draggable
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
apiObj: { type: Object, default: () => {} },
|
apiObj: { type: Object, default: () => {} },
|
||||||
data: { type: Object, default: () => {} },
|
data: { type: Object, default: () => {} },
|
||||||
|
|
@ -40,7 +49,9 @@
|
||||||
total: 0,
|
total: 0,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
loading: false,
|
loading: false,
|
||||||
tableHeight:'100%'
|
tableHeight:'100%',
|
||||||
|
tableSetting: false,
|
||||||
|
tableParams: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -52,9 +63,12 @@
|
||||||
if(this.apiObj){
|
if(this.apiObj){
|
||||||
this.getData();
|
this.getData();
|
||||||
}
|
}
|
||||||
window.addEventListener("resize", () => {
|
},
|
||||||
this.upTableHeight()
|
activated(){
|
||||||
})
|
window.addEventListener("resize", this.upTableHeight, true)
|
||||||
|
},
|
||||||
|
deactivated(){
|
||||||
|
window.removeEventListener("resize", this.upTableHeight, true)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//更新表格高度
|
//更新表格高度
|
||||||
|
|
@ -62,27 +76,37 @@
|
||||||
this.tableHeight = (this.$refs.scTableMain.offsetHeight - 50 ) + "px"
|
this.tableHeight = (this.$refs.scTableMain.offsetHeight - 50 ) + "px"
|
||||||
},
|
},
|
||||||
//获取数据
|
//获取数据
|
||||||
async getData(page=1){
|
async getData(){
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
var reqData = {
|
var reqData = {
|
||||||
page: page
|
page: this.currentPage
|
||||||
}
|
}
|
||||||
|
Object.assign(reqData, this.tableParams)
|
||||||
var res = await this.apiObj.get(reqData);
|
var res = await this.apiObj.get(reqData);
|
||||||
this.tableData = res.data;
|
this.tableData = res.data;
|
||||||
this.total = res.count;
|
this.total = res.count;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
},
|
},
|
||||||
//分页点击
|
//分页点击
|
||||||
reload(page){
|
reload(){
|
||||||
this.getData(page);
|
this.getData();
|
||||||
},
|
},
|
||||||
//刷新数据
|
//刷新数据
|
||||||
refresh(){
|
refresh(){
|
||||||
this.getData(this.currentPage);
|
this.getData();
|
||||||
|
},
|
||||||
|
//更新数据
|
||||||
|
upData(params){
|
||||||
|
this.currentPage = 1;
|
||||||
|
this.tableParams = params;
|
||||||
|
this.getData()
|
||||||
},
|
},
|
||||||
//表格设置
|
//表格设置
|
||||||
setting(){
|
setting(){
|
||||||
|
this.tableSetting = true;
|
||||||
|
},
|
||||||
|
userColumnClose(index){
|
||||||
|
this.userColumn.splice(index, 1);
|
||||||
},
|
},
|
||||||
//转发原装方法&事件
|
//转发原装方法&事件
|
||||||
selectionChange(selection){
|
selectionChange(selection){
|
||||||
|
|
@ -96,4 +120,13 @@
|
||||||
.scTable {display:flex;flex-direction:column;height:100%;}
|
.scTable {display:flex;flex-direction:column;height:100%;}
|
||||||
.scTable-table {flex:1;}
|
.scTable-table {flex:1;}
|
||||||
.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
|
.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
|
||||||
|
|
||||||
|
.setting-column {display:flex;padding:0 20px;}
|
||||||
|
.setting-column > div {border: 1px solid #eee;height: 250px;}
|
||||||
|
.setting-column .all {width: 300px;margin-right:20px;}
|
||||||
|
.setting-column .all span {display: inline-block;width: 100%;height:30px;line-height: 30px;padding:0 15px;}
|
||||||
|
.setting-column .all span:hover {background: #ecf5ff;}
|
||||||
|
.setting-column .user {flex:1;padding:20px;}
|
||||||
|
.setting-column .user>div {width: 100%;height: 100%;}
|
||||||
|
.setting-column .user .el-tag {margin:0 8px 8px 0;}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<div class="setting panel-item">
|
<div class="setting panel-item">
|
||||||
<i class="el-icon-setting"></i>
|
<i class="el-icon-setting"></i>
|
||||||
</div>
|
</div>
|
||||||
<el-popover placement="bottom" :width="360" trigger="click">
|
<el-popover placement="bottom" :width="360" trigger="hover">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<div class="msg panel-item">
|
<div class="msg panel-item">
|
||||||
<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
|
<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<el-dropdown trigger="click" @command="handleUser">
|
<el-dropdown trigger="hover" @command="handleUser">
|
||||||
<div class="user panel-item">
|
<div class="user panel-item">
|
||||||
<el-avatar :size="30">{{ userNameF }}</el-avatar>
|
<el-avatar :size="30">{{ userNameF }}</el-avatar>
|
||||||
<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
|
<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,6 @@ const routes = [{
|
||||||
//系统特殊路由
|
//系统特殊路由
|
||||||
const routes_404 = {
|
const routes_404 = {
|
||||||
path: "/:pathMatch(.*)*",
|
path: "/:pathMatch(.*)*",
|
||||||
name: "404",
|
|
||||||
hidden: true,
|
hidden: true,
|
||||||
component: () => import(/* webpackChunkName: "404" */ '@/views/other/404'),
|
component: () => import(/* webpackChunkName: "404" */ '@/views/other/404'),
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
/* 全局 */
|
||||||
|
#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
|
||||||
|
a {color: #333;text-decoration: none;}
|
||||||
|
a:hover, a:focus {color: #000;text-decoration: none;}
|
||||||
|
a:link {text-decoration: none;}
|
||||||
|
a:-webkit-any-link {text-decoration: none;}
|
||||||
|
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: border-box;outline:none !important; -webkit-appearance: none;}
|
||||||
|
* {margin: 0;padding: 0;box-sizing: border-box;outline: none;}
|
||||||
|
|
||||||
|
/* 全局滚动条样式 */
|
||||||
|
.scrollable {-webkit-overflow-scrolling: touch;}
|
||||||
|
::-webkit-scrollbar {width: 5px;height: 5px;}
|
||||||
|
::-webkit-scrollbar-thumb {background-color: rgba(50, 50, 50, 0.3);}
|
||||||
|
::-webkit-scrollbar-thumb:hover {background-color: rgba(50, 50, 50, 0.6);}
|
||||||
|
::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}
|
||||||
|
::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
|
||||||
|
|
||||||
|
.aminui-side-split {position: absolute;top:0px;left:0px;bottom:0px;width:65px;background: #333;z-index: 5;}
|
||||||
|
.adminui-side-split-scroll {position: absolute;top:0px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
|
||||||
|
.aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
|
||||||
|
.aminui-side-split li i {font-size: 16px;}
|
||||||
|
.aminui-side-split li p {margin-top:5px;}
|
||||||
|
.aminui-side-split li:hover {background: #444;}
|
||||||
|
.aminui-side-split li.active {background: #09f;}
|
||||||
|
|
||||||
|
.adminui-side-split-scroll::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.4);border-radius:5px;}
|
||||||
|
.adminui-side-split-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.5);}
|
||||||
|
.adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
|
||||||
|
.adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
|
||||||
|
|
||||||
|
.aminui-side {position: absolute;z-index: 5;top:0px;left:65px;bottom:0px;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
|
||||||
|
.adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
|
||||||
|
.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
|
||||||
|
.adminui-side-scroll {position: absolute;top:50px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
|
||||||
|
|
||||||
|
.aminui-body {position: absolute;z-index: 4;top:0px;left:275px;bottom:0px;right:0px;}
|
||||||
|
|
||||||
|
.adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
|
||||||
|
.adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
|
||||||
|
.adminui-header .right-panel {display: flex;align-items: center;}
|
||||||
|
.right-panel-search {display: flex;align-items: center;}
|
||||||
|
.right-panel-search > * + * {margin-left:10px;}
|
||||||
|
.adminui-header .panel-item {height:50px;line-height: 50px;padding:0 10px;cursor: pointer;}
|
||||||
|
.adminui-header .panel-item i {font-size: 16px;}
|
||||||
|
.adminui-header .panel-item .badge .el-badge__content {top:15px}
|
||||||
|
.adminui-header .panel-item:hover {background: #eee;}
|
||||||
|
.adminui-header .el-breadcrumb .el-breadcrumb__inner i {margin-right:5px;}
|
||||||
|
.adminui-header .user {display: flex;align-items: center;}
|
||||||
|
.adminui-header .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
|
||||||
|
|
||||||
|
.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
|
||||||
|
.msgList footer {height:35px;line-height: 35px;text-align:center;}
|
||||||
|
.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
|
||||||
|
.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border: 1px solid transparent;cursor:pointer;}
|
||||||
|
.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
|
||||||
|
.msgList ul li h2 i {margin-right: 10px;}
|
||||||
|
.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
|
||||||
|
.msgList ul li a:hover {background: #ecf5ff;border-top: 1px solid #d9ecff;border-bottom: 1px solid #d9ecff;}
|
||||||
|
.msgList ul li a:hover h2 {color: #409EFF;}
|
||||||
|
|
||||||
|
.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
|
||||||
|
.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}
|
||||||
|
.adminui-tags li a {display: inline-block;padding:0 10px;width:100%;height:100%;color: #999;text-decoration:none;}
|
||||||
|
.adminui-tags li i {margin-left:10px;padding:3px;}
|
||||||
|
.adminui-tags li i:hover {background: #ff5722;color: #fff;}
|
||||||
|
.adminui-tags li:hover {background: #ecf5ff;}
|
||||||
|
.adminui-tags li.active {background: #09f;}
|
||||||
|
.adminui-tags li.active a {color: #fff;}
|
||||||
|
|
||||||
|
.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;background-color: #f6f8f9;}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/* 覆盖element-plus样式 */
|
||||||
|
.el-menu {border: none!important;}
|
||||||
|
.el-menu-item.is-active {background: #ecf5ff;}
|
||||||
|
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
|
||||||
|
.el-form-item-msg {font-size: 12px;color: #999;}
|
||||||
|
.el-container {height: 100%;}
|
||||||
|
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;padding-top:20px;}
|
||||||
|
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
|
||||||
|
.el-header .left-panel {display: flex;align-items: center;}
|
||||||
|
.el-header .right-panel {display: flex;align-items: center;}
|
||||||
|
.el-header .right-panel > * + * {margin-left:10px;}
|
||||||
|
.el-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
|
||||||
|
.el-main {padding:15px;}
|
||||||
|
.el-main.nopadding {padding:0;background: #fff;}
|
||||||
|
.el-drawer__body {overflow: auto;}
|
||||||
|
.el-popconfirm__main {margin: 14px 0;}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* USERCENTER */
|
||||||
|
.user-info {padding:20px 40px;}
|
||||||
|
.user-info-top {text-align: center;}
|
||||||
|
.user-info-top h2 {margin-top:10px;font-size: 24px;}
|
||||||
|
.user-info-top p {color: #999;margin-top:5px;}
|
||||||
|
.user-info-top button {margin-top:10px;}
|
||||||
|
.user-info-main {padding:20px 0;}
|
||||||
|
.user-info-main li {list-style-type:none;line-height: 2;font-size: 14px;}
|
||||||
|
.user-info-main li i {margin-right: 10px;}
|
||||||
|
.user-info-bottom {border-top: 1px solid #e6e6e6;}
|
||||||
|
.user-info-bottom h2 {font-size: 14px;margin:15px 0;}
|
||||||
|
|
@ -1,101 +1,3 @@
|
||||||
#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
|
@import 'app.less';
|
||||||
a {color: #333;text-decoration: none;}
|
@import 'fix.less';
|
||||||
a:hover, a:focus {color: #000;text-decoration: none;}
|
@import 'pages.less';
|
||||||
a:link {text-decoration: none;}
|
|
||||||
a:-webkit-any-link {text-decoration: none;}
|
|
||||||
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: border-box;outline:none !important; -webkit-appearance: none;}
|
|
||||||
* {margin: 0;padding: 0;box-sizing: border-box;outline: none;}
|
|
||||||
|
|
||||||
/* 全局滚动条样式 */
|
|
||||||
.scrollable {-webkit-overflow-scrolling: touch;}
|
|
||||||
::-webkit-scrollbar {width: 5px;height: 5px;}
|
|
||||||
::-webkit-scrollbar-thumb {background-color: rgba(50, 50, 50, 0.3);}
|
|
||||||
::-webkit-scrollbar-thumb:hover {background-color: rgba(50, 50, 50, 0.6);}
|
|
||||||
::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}
|
|
||||||
::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
|
|
||||||
|
|
||||||
.aminui-side-split {position: absolute;top:0px;left:0px;bottom:0px;width:65px;background: #333;z-index: 5;}
|
|
||||||
.adminui-side-split-scroll {position: absolute;top:0px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
|
|
||||||
.aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
|
|
||||||
.aminui-side-split li i {font-size: 16px;}
|
|
||||||
.aminui-side-split li p {margin-top:5px;}
|
|
||||||
.aminui-side-split li:hover {background: #444;}
|
|
||||||
.aminui-side-split li.active {background: #09f;}
|
|
||||||
|
|
||||||
.adminui-side-split-scroll::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.4);border-radius:5px;}
|
|
||||||
.adminui-side-split-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.5);}
|
|
||||||
.adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
|
|
||||||
.adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
|
|
||||||
|
|
||||||
|
|
||||||
.aminui-side {position: absolute;z-index: 5;top:0px;left:65px;bottom:0px;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
|
|
||||||
.adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
|
|
||||||
.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
|
|
||||||
.adminui-side-scroll {position: absolute;top:50px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
|
|
||||||
|
|
||||||
|
|
||||||
.aminui-body {position: absolute;z-index: 4;top:0px;left:275px;bottom:0px;right:0px;}
|
|
||||||
|
|
||||||
.adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
|
|
||||||
|
|
||||||
.adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
|
|
||||||
.adminui-header .right-panel {display: flex;align-items: center;}
|
|
||||||
|
|
||||||
.adminui-header .panel-item {height:50px;line-height: 50px;padding:0 10px;cursor: pointer;}
|
|
||||||
.adminui-header .panel-item i {font-size: 16px;}
|
|
||||||
.adminui-header .panel-item .badge .el-badge__content {top:15px}
|
|
||||||
.adminui-header .panel-item:hover {background: #eee;}
|
|
||||||
|
|
||||||
.adminui-header .el-breadcrumb .el-breadcrumb__inner i {margin-right:5px;}
|
|
||||||
.adminui-header .user {display: flex;align-items: center;}
|
|
||||||
.adminui-header .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
|
|
||||||
|
|
||||||
.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
|
|
||||||
.msgList footer {height:35px;line-height: 35px;text-align:center;}
|
|
||||||
.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;padding:10px 0;}
|
|
||||||
.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border-radius: 4px;border: 1px solid transparent;cursor:pointer;}
|
|
||||||
.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
|
|
||||||
.msgList ul li h2 i {margin-right: 10px;}
|
|
||||||
.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
|
|
||||||
.msgList ul li a:hover {background: #ecf5ff;border: 1px solid #d9ecff;}
|
|
||||||
.msgList ul li a:hover h2 {color: #409EFF;}
|
|
||||||
|
|
||||||
.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
|
|
||||||
.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}
|
|
||||||
.adminui-tags li a {display: inline-block;padding:0 10px;width:100%;height:100%;color: #999;text-decoration:none;}
|
|
||||||
.adminui-tags li i {margin-left:10px;padding:3px;}
|
|
||||||
.adminui-tags li i:hover {background: #ff5722;color: #fff;}
|
|
||||||
.adminui-tags li:hover {background: #ecf5ff;}
|
|
||||||
.adminui-tags li.active {background: #09f;}
|
|
||||||
.adminui-tags li.active a {color: #fff;}
|
|
||||||
|
|
||||||
|
|
||||||
.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;background-color: #f6f8f9;}
|
|
||||||
|
|
||||||
|
|
||||||
/* USERCENTER */
|
|
||||||
.user-info {padding:20px 40px;}
|
|
||||||
.user-info-top {text-align: center;}
|
|
||||||
.user-info-top h2 {margin-top:10px;font-size: 24px;}
|
|
||||||
.user-info-top p {color: #999;margin-top:5px;}
|
|
||||||
.user-info-top button {margin-top:10px;}
|
|
||||||
.user-info-main {padding:20px 0;}
|
|
||||||
.user-info-main li {list-style-type:none;line-height: 2;font-size: 14px;}
|
|
||||||
.user-info-main li i {margin-right: 10px;}
|
|
||||||
.user-info-bottom {border-top: 1px solid #e6e6e6;}
|
|
||||||
.user-info-bottom h2 {font-size: 14px;margin:15px 0;}
|
|
||||||
|
|
||||||
.el-menu {border: none!important;}
|
|
||||||
.el-menu-item.is-active {background: #ecf5ff;}
|
|
||||||
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
|
|
||||||
|
|
||||||
.el-form-item-msg {font-size: 12px;color: #999;}
|
|
||||||
|
|
||||||
.el-container {height: 100%;}
|
|
||||||
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;padding-top:20px;}
|
|
||||||
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;display: flex;justify-content: space-between;}
|
|
||||||
.el-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
|
|
||||||
.el-main {padding:15px;}
|
|
||||||
.el-main.nopadding {padding:0;background: #fff;}
|
|
||||||
.el-drawer__body {overflow: auto;}
|
|
||||||
.el-popconfirm__main {margin: 14px 0;}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
const T = {
|
|
||||||
"color": [
|
|
||||||
"#409EFF",
|
|
||||||
"#67C23A",
|
|
||||||
"#E6A23C",
|
|
||||||
"#626c91",
|
|
||||||
"#F56C6C",
|
|
||||||
"#909399"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
export default T
|
|
||||||
|
|
@ -45,6 +45,28 @@ const tool = {
|
||||||
element.webkitRequestFullscreen();
|
element.webkitRequestFullscreen();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
/* 日期格式化 */
|
||||||
|
dateFormat(date, fmt='yyyy-MM-dd'){
|
||||||
|
date = new Date(date)
|
||||||
|
var o = {
|
||||||
|
"M+" : date.getMonth()+1, //月份
|
||||||
|
"d+" : date.getDate(), //日
|
||||||
|
"h+" : date.getHours(), //小时
|
||||||
|
"m+" : date.getMinutes(), //分
|
||||||
|
"s+" : date.getSeconds(), //秒
|
||||||
|
"q+" : Math.floor((date.getMonth()+3)/3), //季度
|
||||||
|
"S" : date.getMilliseconds() //毫秒
|
||||||
|
};
|
||||||
|
if(/(y+)/.test(fmt)) {
|
||||||
|
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
|
||||||
|
}
|
||||||
|
for(var k in o) {
|
||||||
|
if(new RegExp("("+ k +")").test(fmt)){
|
||||||
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fmt;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -48,8 +48,6 @@
|
||||||
.login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
|
.login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
|
||||||
.login-sidebox {width: 50%;background:url(/images/login-left.png) 0 0 no-repeat #607089;padding: 60px;color: #fff;position: relative;}
|
.login-sidebox {width: 50%;background:url(/images/login-left.png) 0 0 no-repeat #607089;padding: 60px;color: #fff;position: relative;}
|
||||||
|
|
||||||
.login-sidebox
|
|
||||||
|
|
||||||
.login-logo {font-size: 35px;}
|
.login-logo {font-size: 35px;}
|
||||||
.login-logo i {margin-right: 10px;}
|
.login-logo i {margin-right: 10px;}
|
||||||
|
|
||||||
|
|
@ -63,6 +61,10 @@
|
||||||
.login-form .el-divider {margin-top:40px;}
|
.login-form .el-divider {margin-top:40px;}
|
||||||
|
|
||||||
.login-footer {text-align: center;color: #999;margin-top: 50px;}
|
.login-footer {text-align: center;color: #999;margin-top: 50px;}
|
||||||
|
|
||||||
|
@media (max-height: 650px){
|
||||||
|
.login_container {position: static;transform: none;margin:50px auto;}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<el-main>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<el-tabs tab-position="left">
|
||||||
|
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
|
||||||
|
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
|
||||||
|
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
||||||
|
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-card>
|
||||||
|
</el-main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'system',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
@ -39,16 +39,26 @@
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
|
<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
|
||||||
<el-table-column label="是否隐藏" prop="meta.hidden">
|
<el-table-column label="是否隐藏" prop="meta.hidden" width="100">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ scope.row.meta.hidden?"是":"否" }}
|
{{ scope.row.meta.hidden?"是":"否" }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column label="操作" fixed="right" width="100">
|
<el-table-column label="操作" fixed="right" align="right" width="140">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button @click="table_show(scope.row)" type="text" size="small">查看</el-button>
|
<el-button @click="table_edit(scope.row)" type="text" size="mini">编辑</el-button>
|
||||||
<el-button @click="table_edit(scope.row)" type="text" size="small">编辑</el-button>
|
<el-dropdown style="margin-left:10px;">
|
||||||
|
<el-button size="mini" type="primary" plain icon="el-icon-arrow-down"></el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item @click="table_show(scope.row)">查看</el-dropdown-item>
|
||||||
|
<el-dropdown-item>更新数据</el-dropdown-item>
|
||||||
|
<el-dropdown-item>转移</el-dropdown-item>
|
||||||
|
<el-dropdown-item>删除</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- 表格列结束 -->
|
<!-- 表格列结束 -->
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header>
|
<el-header>
|
||||||
<div>
|
<div class="left-panel">
|
||||||
<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
|
<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
|
||||||
<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
|
<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
|
|
@ -9,9 +9,16 @@
|
||||||
</template>
|
</template>
|
||||||
</el-popconfirm>
|
</el-popconfirm>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right-panel">
|
||||||
|
<div class="right-panel-search">
|
||||||
|
<el-input v-model="search.name" placeholder="请输入内容" clearable></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||||
|
</div>
|
||||||
|
<scFilterBar ref="scFilterBar" :options="options" @change="updata"></scFilterBar>
|
||||||
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main class="nopadding">
|
<el-main class="nopadding">
|
||||||
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
|
<scTable ref="table" :apiObj="apiObj" :params="{name:'demo',a:'1'}" @selection-change="selectionChange">
|
||||||
<!-- 表格列开始 -->
|
<!-- 表格列开始 -->
|
||||||
<el-table-column type="selection" width="50"></el-table-column>
|
<el-table-column type="selection" width="50"></el-table-column>
|
||||||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||||
|
|
@ -32,8 +39,9 @@
|
||||||
<el-tag>{{scope.row.audit}}</el-tag>
|
<el-tag>{{scope.row.audit}}</el-tag>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="加入时间" prop="date" min-width="300"></el-table-column>
|
<el-table-column label="加入时间" prop="date" width="170"></el-table-column>
|
||||||
<el-table-column label="操作" fixed="right" width="140">
|
|
||||||
|
<el-table-column label="操作" fixed="right" align="right" width="140">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
|
<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
|
||||||
<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
|
<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
|
||||||
|
|
@ -88,15 +96,43 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import scTable from '@/components/scTable';
|
import scTable from '@/components/scTable';
|
||||||
|
import scFilterBar from '@/components/scFilterBar';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'normallist',
|
name: 'normallist',
|
||||||
components: {
|
components: {
|
||||||
scTable
|
scTable,
|
||||||
|
scFilterBar
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
filterType: "全部",
|
search : {
|
||||||
|
name: ""
|
||||||
|
},
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '状态',
|
||||||
|
value: 'type',
|
||||||
|
type: 'select',
|
||||||
|
extend: {
|
||||||
|
data:[
|
||||||
|
{
|
||||||
|
label: "通过",
|
||||||
|
value: "0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "失败",
|
||||||
|
value: "1"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '加入时间',
|
||||||
|
value: 'date',
|
||||||
|
type: 'daterange'
|
||||||
|
}
|
||||||
|
],
|
||||||
apiObj: this.$API.demo.demolist.list,
|
apiObj: this.$API.demo.demolist.list,
|
||||||
selection: [],
|
selection: [],
|
||||||
showDialog: false,
|
showDialog: false,
|
||||||
|
|
@ -170,7 +206,7 @@
|
||||||
id: new Date().getTime(),
|
id: new Date().getTime(),
|
||||||
date: "2021-04-30 13:57:00"
|
date: "2021-04-30 13:57:00"
|
||||||
}
|
}
|
||||||
this.$refs.table.tableData.push(newData)
|
this.$refs.table.tableData.unshift(newData)
|
||||||
this.closeDialog();
|
this.closeDialog();
|
||||||
}else{
|
}else{
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -202,6 +238,14 @@
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.form = {...row}
|
this.form = {...row}
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
upsearch(){
|
||||||
|
var data = Object.assign({}, this.search, this.$refs.scFilterBar.getFilter());
|
||||||
|
this.$refs.table.upData(data)
|
||||||
|
},
|
||||||
|
updata(val){
|
||||||
|
var data = Object.assign({},this.search, val);
|
||||||
|
this.$refs.table.upData(data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue