zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ 管理端添加多标签Tab页内嵌模式设置

master
Yer 2023-07-14 09:19:52 +08:00
parent 36ef331b94
commit 873764b59e
18 changed files with 238 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
manager/src/components/lili/config-drawer.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div>
<Drawer width="300px" title="页面配置" v-model="drawer">
<!-- 内容 -->
<h3>
内容设置
</h3>
<div class="config-item flex flex-a-c flex-j-sb">
<div>
<Tooltip theme="light" placement="bottom-end" max-width="100" content="关闭之后部分页面点击'查看''详情'等按钮将跳到新页面展示" >
<div>
多标签Tab页内嵌模式
</div>
</Tooltip>
</div>
<i-switch v-model="setting.isUseTabsRouter"></i-switch>
</div>
</Drawer>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "configDrawer",
data() {
return {
drawer: false,
};
},
computed: {
...mapState({
setting: state => {
return state.setting.setting
}
})
},
watch: {
setting: {
handler(val) {
this.setStore('admin-setting', val)
this.$store.commit('updateSetting', val);
},
deep: true
}
},
mounted() {
},
methods: {
open() {
this.drawer = true
},
close() {
this.drawer = false
},
toggle() {
this.drawer != this.drawer
},
}
}
</script>
<style lang="scss" scoped>
* {
color: #333 !important;
}
h3 {
margin: 10px 0 20px 0;
}
.config-item {
cursor: pointer;
margin-bottom: 20px;
justify-content: space-between;
}
</style>

3
manager/src/config/index.js
View File

@ -13,4 +13,7 @@ module.exports = {
port: 10003, //端口
inputMaxLength:'140', //全局输入框默认最大输入长度字
mainColor:"#ff5c58", //主题色
setting: {
isUseTabsRouter: true, //多标签Tab页模式
},
};

6
manager/src/config/setting.json Normal file
View File

@ -0,0 +1,6 @@
{
"setting": {
"isUseTabsRouter": true,
"showFooter": false
}
}

2
manager/src/store/index.js
View File

@ -2,6 +2,7 @@ import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";
import setting from './modules/setting';
import user from "./modules/user";
import dict from "./modules/dict";
@ -21,6 +22,7 @@ const store = new Vuex.Store({
modules: {
app,
user,
setting,
dict
}
});

15
manager/src/store/modules/setting.js Normal file
View File

@ -0,0 +1,15 @@
const { setting } = require("@/config");
const localSetting = window.localStorage.getItem('admin-setting')
const settingData = {
state: {
setting:localSetting ? JSON.parse(localSetting) : setting,
},
mutations: {
updateSetting(state, data) {
state.setting = data;
},
},
};
export default settingData;

21
manager/src/utils/filters.js
View File

@ -15,7 +15,7 @@ export function unitPrice(val, unit, location) {
}
return (unit || '') + price
}
// 转义
// 转义
export function enCode(v1) {
var entry = {
"&#39;": "'",
@ -32,6 +32,25 @@ export function enCode(v1) {
return v1;
}
import {router} from "@/router/index";
/**
* 自定义跳转
*/
export function customRouterPush(push){
const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
if(setting.isUseTabsRouter){
router.push(push)
}
else{
if(Object.keys(setting).length == 0){router.push(push)}
else{
let url = router.resolve(push);
window.open(url.href, '_blank');
}
}
}
/**
* 订单来源

111
manager/src/views/Main.vue
View File

@ -12,59 +12,67 @@
<shrinkable-menu></shrinkable-menu>
</div>
<!-- 顶部标题栏主体 -->
<div class="main-header-con">
<div class="main-header-con" :style="{ height: setting.isUseTabsRouter ? '100px' : '60px' }">
<div class="main-header">
<div
:class="{
'header-avator-con': navType != 4,
'header-avator-con nav4': navType == 4,
}"
>
<!-- 通知消息 -->
<message-tip v-if="tipsMessage" :res="tipsMessage"></message-tip>
<!-- 用户头像 -->
<div class="user-dropdown-menu-con">
<Row
type="flex"
justify="end"
align="middle"
class="user-dropdown-innercon"
>
<Dropdown
transfer
trigger="hover"
@on-click="handleClickUserDropdown"
<div class="header-avator-con">
<!-- 左侧栏 -->
<div>
</div>
<div class="flex flex-a-c user-module">
<!-- 通知消息 -->
<message-tip v-if="tipsMessage" :res="tipsMessage"></message-tip>
<!-- 用户头像 -->
<div class="user-dropdown-menu-con">
<Row
type="flex"
justify="end"
align="middle"
class="user-dropdown-innercon"
>
<div class="dropList">
<span class="main-user-name">{{ userInfo.nickName }}</span>
<Icon type="md-arrow-dropdown" />
<Avatar
:src="avatarPath"
style="background: #fff; margin-left: 10px"
></Avatar>
</div>
<DropdownMenu slot="list">
<DropdownItem name="personalCenter">{{
$t("userCenter")
}}</DropdownItem>
<DropdownItem name="changePass">{{
$t("changePass")
}}</DropdownItem>
<DropdownItem name="loginOut" divided>{{
$t("logout")
}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</Row>
<ul class="nav-list">
<li class="nav-item " @click="handleClickSetting">
<Tooltip content="设置">
<Icon size="16" type="md-settings" />
</Tooltip>
</li>
</ul>
<Dropdown
transfer
trigger="hover"
@on-click="handleClickUserDropdown"
>
<div class="dropList">
<span class="main-user-name">{{ userInfo.nickName }}</span>
<Avatar
icon="ios-person"
:src="avatarPath"
style="background: #fff; margin-left: 10px"
></Avatar>
</div>
<DropdownMenu slot="list">
<DropdownItem name="personalCenter">{{
$t("userCenter")
}}</DropdownItem>
<DropdownItem name="changePass">{{
$t("changePass")
}}</DropdownItem>
<DropdownItem name="loginOut" divided>{{
$t("logout")
}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</Row>
</div>
</div>
</div>
</div>
<!-- 已打开的页面标签 -->
<div class="tags-con">
<div class="tags-con" v-if="setting.isUseTabsRouter">
<tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
</div>
</div>
<div class="single-page-con">
<div class="single-page-con" :style="{ 'top': setting.isUseTabsRouter ? '100px' : '60px', height: setting.isUseTabsRouter ? 'calc(100% - 110px)' : 'calc(100% - 70px)' }">
<div class="single-page">
<!-- <keep-alive :include="cachePage"> -->
<router-view></router-view>
@ -73,6 +81,8 @@
</div>
<!-- 全局加载动画 -->
<circleLoading class="loading-position" v-show="loading" />
<!-- 右侧抽屉配置 -->
<configDrawer ref="config"/>
</div>
</template>
@ -81,29 +91,37 @@ import shrinkableMenu from "./main-parts/shrinkable-menu/shrinkable-menu.vue";
import tagsPageOpened from "./main-parts/tags-page-opened.vue";
import messageTip from "./main-parts/message-tip.vue";
import circleLoading from "@/components/lili/circle-loading.vue";
import configDrawer from "@/components/lili/config-drawer.vue";
import Cookies from "js-cookie";
import util from "@/libs/util.js";
import { getNoticePage, logout } from "@/api/index";
import { getBaseSite } from "@/api/common";
var client;
const config = require("@/config/index.js");
export default {
components: {
shrinkableMenu,
tagsPageOpened,
messageTip,
circleLoading,
configDrawer
},
data() {
return {
config,
sliceNum: 5, // 展示nav数量
userInfo: "", // 用户信息
navType: 1, // nav类型
tipsMessage: "", // 通知消息
domainLogo: "",
};
},
computed: {
setting(){
let data = this.$store.state.setting
return data.setting
},
loading() {
return this.$store.state.app.loading;
},
@ -119,6 +137,9 @@ export default {
},
methods: {
handleClickSetting() {
this.$refs.config.open();
},
init() {
// 菜单初始化
let userInfo = JSON.parse(Cookies.get("userInfoManager"));

4
manager/src/views/goods/goods-info/goods.vue
View File

@ -422,10 +422,10 @@ export default {
//查看商品详情
showDetail(v) {
let id = v.id;
this.$router.push({
this.$options.filters.customRouterPush({
name: "goods-detail",
query: { id: id },
});
})
},
},
mounted() {

4
manager/src/views/goods/goods-info/goodsApply.vue
View File

@ -286,10 +286,10 @@ export default {
//查看商品详情
showDetail(v) {
let id = v.id;
this.$router.push({
this.$options.filters.customRouterPush({
name: "goods-detail",
query: { id: id },
});
})
},
},
mounted() {

48
manager/src/views/main.scss
View File

@ -145,9 +145,8 @@
.header-avator-con {
display: flex;
align-items: center;
position: absolute;
right: 0;
top: 0;
padding: 0 30px;
justify-content: space-between;
height: 100%;
@ -188,27 +187,7 @@
align-items: center;
}
.user-dropdown {
&-menu-con {
.main-user-name {
font-size: 14px;
display: inline-block;
cursor: pointer;
margin-right: 5px;
max-width: 200px;
overflow: hidden;
word-wrap: normal;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
overflow: hidden;
text-align: right;
}
}
}
.full-screen-btn-con {
display: inline-block;
@ -312,3 +291,26 @@
z-index: 100;
top: 1px;
}
.nav-item {
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #ededed;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
}
.footer-page-on{
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.user-module{
align-items: center;
}

2
manager/src/views/member/list/index.vue
View File

@ -439,7 +439,7 @@ export default {
},
//查看会员
detail(row) {
this.$router.push({ name: "member-detail", query: { id: row.id } });
this.$options.filters.customRouterPush({ name: "member-detail", query: { id: row.id } })
},
//禁用会员

3
manager/src/views/member/list/memberRecycle.vue
View File

@ -400,7 +400,8 @@ export default {
//详细
detail(row) {
this.$router.push({ name: "member-detail", query: { id: row.id } });
this.$options.filters.customRouterPush({ name: "member-detail", query: { id: row.id } })
},
//启用会员
enable(v) {

4
manager/src/views/order/after-order/afterSaleOrder.vue
View File

@ -354,10 +354,10 @@ export default {
// 跳转售后详情
detail(v) {
let sn = v.sn;
this.$router.push({
this.$options.filters.customRouterPush({
name: "after-order-detail",
query: { sn: sn },
});
})
},
// 售后筛选
serviceStatusClick(item) {

4
manager/src/views/order/after-order/orderComplaint.vue
View File

@ -244,10 +244,10 @@
//投诉详情
detail(v) {
let id = v.id;
this.$router.push({
this.$options.filters.customRouterPush({
name: "order-complaint-detail",
query: { id: id },
});
})
},
},
mounted() {

6
manager/src/views/order/order/fictitiousOrderList.vue
View File

@ -267,13 +267,11 @@ export default {
},
// 订单详情
detail (v) {
console.log(v.orderType);
let sn = v.sn;
this.$router.push({
this.$options.filters.customRouterPush({
name: "order-detail",
query: { sn: sn, orderType: v.orderType },
});
})
},
// 订单筛选
orderStatusClick(item) {

5
manager/src/views/order/order/orderList.vue
View File

@ -383,10 +383,11 @@ export default {
// 跳转详情页面
detail(v) {
let sn = v.sn;
this.$router.push({
this.$options.filters.customRouterPush({
name: "order-detail",
query: { sn: sn },
});
})
},
// 导出订单
async exportOrder() {

4
manager/src/views/seller/bill/bill.vue
View File

@ -197,10 +197,10 @@ export default {
},
detail(v) { // 账单详情
let id = v.id;
this.$router.push({
this.$options.filters.customRouterPush({
name: "bill-detail",
query: { id: id },
});
})
},
remove(v) {
this.$Modal.confirm({

7
seller/src/utils/filters.js
View File

@ -43,8 +43,11 @@ export function customRouterPush(push){
router.push(push)
}
else{
let url = router.resolve(push);
window.open(url.href, '_blank');
if(Object.keys(setting).length == 0){router.push(push)}
else{
let url = router.resolve(push);
window.open(url.href, '_blank');
}
}
}