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

manager/src/components/lili/config-drawer.vue

@@ -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>

manager/src/config/index.js

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

manager/src/config/setting.json

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

manager/src/store/index.js

@@ -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
   }
 });

manager/src/store/modules/setting.js

@@ -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;

manager/src/utils/filters.js

@@ -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');
+    }
+  }
+}
+
 
 /**
  * 订单来源

manager/src/views/Main.vue

@@ -12,14 +12,14 @@
       <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
+        <div class="header-avator-con">
-          :class="{
+          <!-- 左侧栏 -->
-            'header-avator-con': navType != 4,
+          <div>
-            'header-avator-con nav4': navType == 4,
+
-          }"
+          </div>
-        >
+          <div class="flex flex-a-c user-module">
             <!-- 通知消息 -->
             <message-tip v-if="tipsMessage" :res="tipsMessage"></message-tip>
             <!-- 用户头像 -->
@@ -30,6 +30,13 @@
                 align="middle"
                 class="user-dropdown-innercon"
               >
+                <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"
@@ -37,8 +44,8 @@
                 >
                   <div class="dropList">
                     <span class="main-user-name">{{ userInfo.nickName }}</span>
-                  <Icon type="md-arrow-dropdown" />
                     <Avatar
+                      icon="ios-person"
                       :src="avatarPath"
                       style="background: #fff; margin-left: 10px"
                     ></Avatar>
@@ -59,12 +66,13 @@
             </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"));

manager/src/views/goods/goods-info/goods.vue

@@ -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() {

manager/src/views/goods/goods-info/goodsApply.vue

@@ -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() {

manager/src/views/main.scss

@@ -145,9 +145,8 @@
     .header-avator-con {
       display: flex;
       align-items: center;
-      position: absolute;
+      padding: 0 30px;
-      right: 0;
+      justify-content: space-between;
-      top: 0;
       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;
+}

manager/src/views/member/list/index.vue

@@ -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 } })
     },
 
     //禁用会员

manager/src/views/member/list/memberRecycle.vue

@@ -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) {

manager/src/views/order/after-order/afterSaleOrder.vue

@@ -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) {

manager/src/views/order/after-order/orderComplaint.vue

@@ -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() {

manager/src/views/order/order/fictitiousOrderList.vue

@@ -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) {

manager/src/views/order/order/orderList.vue

@@ -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() {

manager/src/views/seller/bill/bill.vue

@@ -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({

seller/src/utils/filters.js

@@ -42,10 +42,13 @@ export function customRouterPush(push){
   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');
     }
+  }
 }