github/CRMEB
1
0
Fork 0
mirror of https://github.com/crmeb/CRMEB.git synced 2026-10-30 22:40:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 标签操作及刷新

Browse Source
This commit is contained in:
From-wh 2023-04-25 11:49:01 +08:00
parent 19a401fc63
commit bf920568ea
4 changed files with 76 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
template/admin/src/i18n/lang/zh-cn.js
View File

@ -64,6 +64,7 @@ export default {
title4: '消息',
title5: '开全屏',
title6: '关全屏',
title7: '刷新',
dropdownDefault: '默认',
dropdownMedium: '中等',
dropdownSmall: '小型',

1
template/admin/src/i18n/lang/zh-tw.js
View File

@ -64,6 +64,7 @@ export default {
title4: '消息',
title5: '開全屏',
title6: '關全屏',
title7: '重繪',
dropdownDefault: '默認',
dropdownMedium: '中等',
dropdownSmall: '小型',

6
template/admin/src/layout/navBars/breadcrumb/user.vue
View File

@ -23,6 +23,9 @@
<el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown> -->
<div class="layout-navbars-breadcrumb-user-icon" @click="refresh">
<i class="el-icon-refresh-right" :title="$t('message.user.title7')"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
<i class="el-icon-search" :title="$t('message.user.title2')"></i>
</div>
@ -121,6 +124,9 @@ export default {
onLayoutSetingClick() {
this.bus.$emit('openSetingsDrawer');
},
refresh() {
this.bus.$emit('onTagsViewRefreshRouterView', this.$route.path);
},
// 全屏点击
onScreenfullClick() {
if (!screenfull.isEnabled) {

73
template/admin/src/layout/navBars/tagsView/tagsView.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="layout-navbars-tagsview">
<div ref="tagsView" class="layout-navbars-tagsview">
<i v-if="scrollTagIcon" class="direction el-icon-arrow-left" @click="scrollTag('left')"></i>
<el-scrollbar ref="scrollbarRef" @wheel.native.prevent="onHandleScroll">
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
<li
@ -31,7 +32,16 @@
</li>
</ul>
</el-scrollbar>
<!-- <i class="el-icon-menu" @click="onContextmenuIcon($event)"></i> -->
<i v-if="scrollTagIcon" class="direction el-icon-arrow-right" @click="scrollTag('right')"></i>
<el-dropdown @command="clickDropdown" v-if="tagsViewList.length > 2">
<span class="setting-tag el-dropdown-link"><i class="el-icon-menu"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in dropdownList" :command="item.id" :key="item.id">
<i :class="item.icon"></i>
{{ $t(item.txt) }}</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
<Contextmenu :dropdown="tagsDropdown" ref="tagsContextmenu" @currentContextmenuClick="onCurrentContextmenuClick" />
</div>
</template>
@ -56,13 +66,20 @@ export default {
tagsRefsIndex: 0,
tagsRoutePath: this.$route.path,
tagsViewRoutesList: [],
dropdownList: [
{ id: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'el-icon-refresh-right' },
{ id: 1, txt: 'message.tagsView.close', affix: false, icon: 'el-icon-close' },
{ id: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'el-icon-circle-close' },
{ id: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'el-icon-folder-delete' },
],
scrollTagIcon: false,
};
},
computed: {
// 获取布局配置信息
getThemeConfig() {
return this.$store.state.themeConfig.themeConfig;
},
},
// 动态设置 tagsView 风格样式
setTagsStyle() {
return this.$store.state.themeConfig.themeConfig.tagsStyle;
@ -82,10 +99,28 @@ export default {
if (!this.$store.state.app.tagNavList.length) {
this.getTagsViewRoutes();
}
// this.$nextTick((e) => {
// console.log(this.$refs.tagsView.offsetWidth);
// console.log(this.$refs.tagsUlRef.offsetWidth);
// });
if (this.$refs.tagsView.offsetWidth < this.$refs.scrollbarRef.$refs.wrap.scrollWidth) {
this.scrollTagIcon = true;
}
window.addEventListener('resize', () => {
console.log(this.$refs.tagsView.offsetWidth);
console.log(this.$refs.scrollbarRef.$refs.wrap.scrollWidth);
if (this.$refs.tagsView.offsetWidth < this.$refs.scrollbarRef.$refs.wrap.scrollWidth) {
this.scrollTagIcon = true;
}
});
},
methods: {
...mapMutations(['setBreadCrumb', 'setTagNavList', 'addTag', 'setLocal', 'setHomeRoute', 'closeTag']),
clickDropdown(e) {
// console.log(e, this.$route.path);
let data = { id: e, path: this.$route.path };
this.onCurrentContextmenuClick(data);
},
// 获取路由信息
getRoutesList() {
return this.$store.state.routesList.routesList;
@ -114,6 +149,17 @@ export default {
onHandleScroll(e) {
this.$refs.scrollbarRef.$refs.wrap.scrollLeft += e.wheelDelta / 4;
},
scrollTag(production) {
let scrollRefs = this.$refs.scrollbarRef.$refs.wrap.scrollWidth;
let scrollLeft = this.$refs.scrollbarRef.$refs.wrap.scrollLeft;
console.log(production, this.$refs.scrollbarRef.$refs.wrap.scrollLeft);
if (production === 'left') {
this.$refs.scrollbarRef.$refs.wrap.scrollLeft = scrollLeft - 300 <= 0 ? 0 : scrollLeft - 300;
} else {
this.$refs.scrollbarRef.$refs.wrap.scrollLeft = scrollLeft + 300 >= scrollRefs ? scrollRefs : scrollLeft + 300;
}
},
// tagsView 横向滚动
tagsViewmoveToCurrentTag() {
this.$nextTick(() => {
@ -330,11 +376,28 @@ export default {
/deep/ .el-scrollbar__bar.is-horizontal {
height: 0;
}
.el-dropdown-menu {
width: 130px;
}
.setting-tag {
padding: 0 10px;
cursor: pointer;
}
.direction {
padding: 0 3px;
}
.direction:hover {
line-height: 34px;
background-color: #f7f2f2;
cursor: pointer;
transition: all 0.3s;
}
.layout-navbars-tagsview {
flex: 1;
background-color: var(--prev-bg-white);
border-bottom: 1px solid var(--prev-border-color-lighter);
display: flex;
align-items: center;
& ::v-deep .is-vertical {
display: none !important;
}
@ -342,7 +405,7 @@ export default {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
// width: 100%;
height: 34px;
display: flex;
align-items: center;