Commit ed87d995 authored by renjintao's avatar renjintao

Merge branch 'product' of git.mes123.com:zhouyx/mes-ui into product-rjt

parents 68ab455e 094fd58a
......@@ -16,14 +16,10 @@
<td>
<ul class="table_row_ul">
<li>
<a class="a_goIndex" @click="goIndex">
首页一
</a>
<a class="a_goIndex" @click="goIndex">首页一</a>
</li>
<li>
<a class="a_goIndex" @click="goIndexTwo">
首页二
</a>
<a class="a_goIndex" @click="goIndexTwo">首页二</a>
</li>
</ul>
</td>
......@@ -35,7 +31,10 @@
<td>
<ul class="table_row_ul">
<li v-for="(li) in item.children">
<a @click="goPage(item,li)" :class="{'active': li.id === isActive}">{{li.title}}</a>
<a
@click="goPage(item,li)"
:class="{'active': li.id === isActive}"
>{{li.title}}</a>
</li>
</ul>
</td>
......@@ -55,12 +54,8 @@
<BreadcrumbItem to="/" class="white">
<Icon type="ios-home" />首页
</BreadcrumbItem>
<BreadcrumbItem>
{{homeMenu}}
</BreadcrumbItem>
<BreadcrumbItem :to="parthto" class="white">
{{homeMenuItem}}
</BreadcrumbItem>
<BreadcrumbItem>{{homeMenu}}</BreadcrumbItem>
<BreadcrumbItem :to="parthto" class="white">{{homeMenuItem}}</BreadcrumbItem>
</Breadcrumb>
<i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
<div class="header_right">
......@@ -77,6 +72,11 @@
<i-header-setting v-if="enableSetting && !isMobile" />-->
</div>
</Header>
<div class="i-tabs">
<transition name="fade-quick">
<i-tabs v-if="tabs" v-show="showHeader" @on-reload="handleReload" />
</transition>
</div>
<Content class="i-layout-content">
<keep-alive :include="keepAlive">
<nuxt v-if="loadRouter" />
......@@ -137,9 +137,9 @@ export default {
isDelayHideSider: false, // hack,当从隐藏侧边栏的 header 切换到正常 header 时,防止 Logo 抖动
loadRouter: true,
homeMenu:'',
homeMenuItem:"",
parthto:'',
homeMenu: "",
homeMenuItem: "",
parthto: ""
};
},
computed: {
......@@ -248,7 +248,8 @@ export default {
}, 0);
},
$route(to, from) {
if (to.name === from.name) {// 相同路由,不同参数,跳转时,重载页面
if (to.name === from.name) {
// 相同路由,不同参数,跳转时,重载页面
if (Setting.sameRouteForceUpdate) {
this.handleReload();
}
......@@ -267,7 +268,8 @@ export default {
},
handleScroll() {
if (!this.headerHide) return;
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
const scrollTop =
document.body.scrollTop + document.documentElement.scrollTop;
if (!this.ticking) {
this.ticking = true;
requestAnimation(() => {
......@@ -294,7 +296,8 @@ export default {
// todo $menuHead.handleGetMenuHeight();
}
},
handleReload() {// 针对缓存的页面也生效
handleReload() {
// 针对缓存的页面也生效
const isCurrentPageCache = this.keepAlive.indexOf(this.$route.name) > -1;
const pageName = this.$route.name;
if (isCurrentPageCache) {
......@@ -308,24 +311,24 @@ export default {
}
});
},
goPage(u,li) {
this.$router.push(li.path)
this.isActive = li.id
this.homeMenu = u.title
this.homeMenuItem = li.title
this.parthto = li.path
goPage(u, li) {
this.$router.push(li.path);
this.isActive = li.id;
this.homeMenu = u.title;
this.homeMenuItem = li.title;
this.parthto = li.path;
},
goIndex(){
this.$router.push("/")
this.homeMenu = ''
this.homeMenuItem = ''
this.isActive = 0
goIndex() {
this.$router.push("/");
this.homeMenu = "";
this.homeMenuItem = "";
this.isActive = 0;
},
goIndexTwo(){
this.$router.push("/home")
this.homeMenu = ''
this.homeMenuItem = ''
this.isActive = 0
goIndexTwo() {
this.$router.push("/home");
this.homeMenu = "";
this.homeMenuItem = "";
this.isActive = 0;
}
},
mounted() {
......@@ -342,21 +345,25 @@ export default {
<style lang="less">
.i-layout-header-breadcrumb {
color: #A7B8CC!important;//wheat
color: #a7b8cc !important; //wheat
}
.i-layout-header-breadcrumb .white .ivu-breadcrumb-item-link {
color: #ffffff!important;//wheat
color: #ffffff !important; //wheat
}
.ivu-icon-ios-home{
.ivu-icon-ios-home {
font-size: 20px;
}
.white{
color: #ffffff!important;
.white {
color: #ffffff !important;
}
.product-layout {
.i-layout-content {
padding: 5px 10px;
}
.i-tabs {
width: 100% !important;
height: 40px;
}
.ivu-layout-header {
height: 50px;
line-height: 50px;
......
......@@ -44,95 +44,99 @@
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import menuSider from '@/menu/sider';
import tTitle from '../mixins/translate-title';
import { mapState, mapGetters, mapActions } from "vuex";
import menuSider from "@/menu/sider";
import tTitle from "../mixins/translate-title";
import Setting from '@/setting';
import Setting from "@/setting";
import { getAllSiderMenu } from '@/libs/system';
import { getAllSiderMenu } from "@/libs/system";
export default {
name: 'iTabs',
mixins: [ tTitle ],
export default {
name: "iTabs",
mixins: [tTitle],
computed: {
...mapState('admin/page', [
'opened',
'current'
...mapState("admin/page", ["opened", "current"]),
...mapState("admin/layout", [
"showTabsIcon",
"tabsFix",
"tabsReload",
"headerFix",
"headerStick",
"isMobile",
"menuCollapse"
]),
...mapState('admin/layout', [
'showTabsIcon',
'tabsFix',
'tabsReload',
'headerFix',
'headerStick',
'isMobile',
'menuCollapse'
]),
...mapGetters('admin/menu', [
'hideSider'
]),
classes () {
return {
'i-layout-tabs-fix': this.tabsFix
}
...mapGetters("admin/menu", ["hideSider"]),
classes() {
// return {
// "i-layout-tabs-fix": this.tabsFix
// };
},
isHeaderStick () {
isHeaderStick() {
return this.hideSider;
},
styles () {
styles() {
let style = {};
if (this.tabsFix && !this.headerFix) {
style.top = `${64 - this.scrollTop}px`;
}
const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? 80 : Setting.menuSideWidth;
if (!this.isMobile && this.tabsFix) {
style.width = `calc(100% - ${menuWidth}px)`;
style.left = `${menuWidth}px`;
}
const menuWidth = this.isHeaderStick
? 0
: this.menuCollapse
? 80
: Setting.menuSideWidth;
// if (!this.isMobile && this.tabsFix) {
// style.width = `calc(100% - ${menuWidth}px)`;
// style.left = `${menuWidth}px`;
// }
return style;
}
},
data () {
data() {
return {
// 得到所有侧边菜单,并转为平级,查询图标用
allSiderMenu: getAllSiderMenu(menuSider),
scrollTop: 0
}
};
},
methods: {
...mapActions('admin/page', [
'close',
'closeLeft',
'closeRight',
'closeOther',
'closeAll'
...mapActions("admin/page", [
"close",
"closeLeft",
"closeRight",
"closeOther",
"closeAll"
]),
tabLabel (h, page) {
const title = h('span', this.tTitle(page.meta.title) || '未命名');
tabLabel(h, page) {
const title = h("span", this.tTitle(page.meta.title) || "未命名");
let slot = [];
if (this.showTabsIcon) {
const fullPathWithoutQuery = page.fullPath.indexOf('?') >= 0 ? page.fullPath.split('?')[0] : page.fullPath;
const currentMenu = this.allSiderMenu.find(menu => menu.path === fullPathWithoutQuery) || {};
const fullPathWithoutQuery =
page.fullPath.indexOf("?") >= 0
? page.fullPath.split("?")[0]
: page.fullPath;
const currentMenu =
this.allSiderMenu.find(menu => menu.path === fullPathWithoutQuery) ||
{};
let icon;
if (currentMenu.icon) {
icon = h('Icon', {
icon = h("Icon", {
props: {
type: currentMenu.icon
}
});
} else if (currentMenu.custom) {
icon = h('Icon', {
icon = h("Icon", {
props: {
custom: currentMenu.custom
}
});
} else if (currentMenu.img) {
icon = h('img', {
icon = h("img", {
attrs: {
src: currentMenu.img
}
......@@ -145,14 +149,18 @@
slot.push(title);
}
return h('div', {
class: 'i-layout-tabs-title'
}, slot);
return h(
"div",
{
class: "i-layout-tabs-title"
},
slot
);
},
handleClickTab (tabName) {
handleClickTab(tabName) {
if (tabName === this.current) {
if (this.tabsReload) {
this.$emit('on-reload');
this.$emit("on-reload");
}
} else {
const page = this.opened.find(page => page.fullPath === tabName);
......@@ -161,43 +169,43 @@
if (page) this.$router.push({ name, params, query }, () => {});
}
},
handleClickClose (tagName) {
handleClickClose(tagName) {
this.close({
tagName
});
},
handleScroll () {
if (this.tabsFix && !this.headerFix) {
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
this.scrollTop = scrollTop > 64 ? 64 : scrollTop;
}
handleScroll() {
// if (this.tabsFix && !this.headerFix) {
// const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
// this.scrollTop = scrollTop > 64 ? 64 : scrollTop;
// }
},
handleClose (name) {
handleClose(name) {
const params = {
pageSelect: this.current
};
switch (name) {
case 'left':
case "left":
this.closeLeft(params);
break;
case 'right':
case "right":
this.closeRight(params);
break;
case 'other':
case "other":
this.closeOther(params);
break;
case 'all':
case "all":
this.closeAll();
break;
}
}
},
mounted () {
document.addEventListener('scroll', this.handleScroll, { passive: true });
mounted() {
document.addEventListener("scroll", this.handleScroll, { passive: true });
this.handleScroll();
},
beforeDestroy () {
document.removeEventListener('scroll', this.handleScroll);
}
beforeDestroy() {
document.removeEventListener("scroll", this.handleScroll);
}
};
</script>
......@@ -363,7 +363,7 @@ export default {
},
created() {
this.treeHeight = window.innerHeight - 140;
this.tableHeight = window.innerHeight - 210;
this.tableHeight = window.innerHeight - 250;
this.newColumn = this.column;
this.tableTata(this.selectName);
},
......@@ -376,7 +376,7 @@ export default {
return (() => {
window.screenHeight = window.innerHeight;
this.treeHeight = window.screenHeight - 140;
this.tableHeight = window.innerHeight - 210;
this.tableHeight = window.innerHeight - 250;
})();
};
},
......
......@@ -9,8 +9,8 @@ import { getAllSiderMenu, includeArray } from '@/libs/system';
// 判定是否需要缓存
const isKeepAlive = data => get(data, 'meta.cache', false);
export const strict=false;
export const state=()=>({
export const strict = false;
export const state = () => ({
// 可以在多页 tab 模式下显示的页面
pool: [],
// 当前显示的多页面列表
......@@ -21,11 +21,11 @@ export const state=()=>({
keepAlive: []
})
export const actions={
export const actions = {
/**
* @description 从持久化数据载入分页列表
*/
openedLoad ({ state, commit, dispatch, rootState }) {
openedLoad({ state, commit, dispatch, rootState }) {
return new Promise(async resolve => {
// store 赋值
const value = await dispatch('admin/db/get', {
......@@ -79,7 +79,7 @@ export const actions={
/**
* 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
*/
opened2db ({ state, dispatch }) {
opened2db({ state, dispatch }) {
return new Promise(async resolve => {
// 设置数据
dispatch('admin/db/set', {
......@@ -96,7 +96,7 @@ export const actions={
* @description 更新页面列表上的某一项
* @param {Object} param { index, params, query, fullPath } 路由信息
*/
openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath, meta }) {
openedUpdate({ state, commit, dispatch }, { index, params, query, fullPath, meta }) {
return new Promise(async resolve => {
// 更新页面列表某一项
let page = state.opened[index];
......@@ -115,7 +115,7 @@ export const actions={
* @description 更新页面当前项
* @param {Object} param { params, query, fullPath } 路由信息
*/
currentUpdate ({ state, commit, dispatch }, { params, query, fullPath, meta }) {
currentUpdate({ state, commit, dispatch }, { params, query, fullPath, meta }) {
return new Promise(async resolve => {
setTimeout(async () => {
// 更新当前项
......@@ -137,7 +137,7 @@ export const actions={
* @description 新增一个 tag (打开一个页面)
* @param {Object} param new tag info
*/
add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
add({ state, commit, dispatch }, { tag, params, query, fullPath }) {
return new Promise(async resolve => {
// 设置新的 tag 在新打开一个以前没打开过的页面时使用
let newTag = tag;
......@@ -160,7 +160,7 @@ export const actions={
* @description 打开一个新的页面
* @param {Object} param 从路由钩子的 to 对象上获取 { name, params, query, fullPath } 路由信息
*/
open ({ state, commit, dispatch }, { name, params, query, fullPath }) {
open({ state, commit, dispatch }, { name, params, query, fullPath }) {
return new Promise(async resolve => {
// 已经打开的页面
let opened = state.opened;
......@@ -201,7 +201,7 @@ export const actions={
* @description 关闭一个 tag (关闭一个页面)
* @param {Object} param { tagName: 要关闭的标签名字 }
*/
close ({ state, commit, dispatch }, { tagName }) {
close({ state, commit, dispatch }, { tagName }) {
return new Promise(async resolve => {
// 下个新的页面
let newPage = state.opened[0];
......@@ -245,7 +245,7 @@ export const actions={
params,
query
};
$nuxt.$router.push(routerObj, () => {});
$nuxt.$router.push(routerObj, () => { });
}
// end
resolve();
......@@ -255,7 +255,8 @@ export const actions={
* @description 关闭当前标签左边的标签
* @param {Object} param { pageSelect: 当前选中的tagName }
*/
closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
closeLeft({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
const pageAim = pageSelect || state.current;
let currentIndex = 0;
......@@ -267,6 +268,10 @@ export const actions={
if (currentIndex > 0) {
// 删除打开的页面 并在缓存设置中删除
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name));
}
if (state.opened.length == 2) {
state.opened.splice(0, 1);
}
state.current = pageAim;
if ($nuxt.$router.fullPath !== pageAim) {
......@@ -282,7 +287,7 @@ export const actions={
* @description 关闭当前标签右边的标签
* @param {Object} param { pageSelect: 当前选中的tagName }
*/
closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
closeRight({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
const pageAim = pageSelect || state.current;
let currentIndex = 0;
......@@ -308,7 +313,7 @@ export const actions={
* @description 关闭当前激活之外的 tag
* @param {Object} param { pageSelect: 当前选中的tagName }
*/
closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
closeOther({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
const pageAim = pageSelect || state.current;
let currentIndex = 0;
......@@ -324,6 +329,9 @@ export const actions={
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name));
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name));
}
if (state.opened.length == 2) {
state.opened.splice(0, 1);
}
// 设置新的页面
state.current = pageAim;
if ($nuxt.$router.fullPath !== pageAim) {
......@@ -339,31 +347,31 @@ export const actions={
* @description 关闭所有 tag
* @param {Object} state vuex state
*/
closeAll ({ state, commit, dispatch }) {
closeAll({ state, commit, dispatch }) {
return new Promise(async resolve => {
// 删除打开的页面 并在缓存设置中删除
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name));
state.opened.splice(0).forEach(({ name }) => commit('keepAliveRemove', name));
// 持久化
await dispatch('opened2db');
// 关闭所有的标签页后需要判断一次现在是不是在首页
if ($nuxt.$router.name !== 'index') {
$nuxt.$router.push({
name: 'index'
}, () => {});
}
// if ($nuxt.$router.name !== 'index') {
// $nuxt.$router.push({
// name: 'index'
// }, () => { });
// }
// end
resolve();
});
}
}
export const mutations={
export const mutations = {
/**
* @class keepAlive
* @description 从已经打开的页面记录中更新需要缓存的页面记录
* @param {Object} state vuex state
*/
keepAliveRefresh (state) {
keepAliveRefresh(state) {
state.keepAlive = state.opened.filter(item => isKeepAlive(item)).map(e => e.name);
},
/**
......@@ -371,22 +379,25 @@ export const mutations={
* @param {Object} state vuex state
* @param {String} name name
*/
keepAliveRemove (state, name) {
const list = [ ...state.keepAlive ];
keepAliveRemove(state, name) {
const list = [...state.keepAlive];
const index = list.findIndex(item => item === name);
if (index !== -1) {
list.splice(index, 1);
state.keepAlive = list;
}
if (state.opened.length == 2) {
state.opened.splice(0, 1);
}
},
/**
* @description 增加一个页面的缓存设置
* @param {Object} state vuex state
* @param {String} name name
*/
keepAlivePush (state, name) {
const keep = [ ...state.keepAlive ];
keepAlivePush(state, name) {
const keep = [...state.keepAlive];
keep.push(name);
state.keepAlive = keep;
},
......@@ -394,7 +405,7 @@ export const mutations={
* @description 清空页面缓存设置
* @param {Object} state vuex state
*/
keepAliveClean (state) {
keepAliveClean(state) {
state.keepAlive = [];
},
/**
......@@ -403,7 +414,7 @@ export const mutations={
* @param {Object} state vuex state
* @param {String} fullPath new fullPath
*/
currentSet (state, fullPath) {
currentSet(state, fullPath) {
state.current = fullPath;
},
/**
......@@ -412,7 +423,7 @@ export const mutations={
* @param {Object} state vuex state
* @param {Array} routes routes
*/
init (state, routes) {
init(state, routes) {
const pool = [];
const push = function (routes) {
routes.forEach(route => {
......
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