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

2025-12-20 18:05:53 +08:00 · 2023-07-14 09:19:52 +08:00
parent 36ef331b94
commit 873764b59e
18 changed files with 238 additions and 89 deletions
--- a/manager/src/views/Main.vue
+++ b/manager/src/views/Main.vue
@@ -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"));
--- a/manager/src/views/goods/goods-info/goods.vue
+++ b/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() {
--- a/manager/src/views/goods/goods-info/goodsApply.vue
+++ b/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() {
--- a/manager/src/views/main.scss
+++ b/manager/src/views/main.scss
@@ -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;
+}
--- a/manager/src/views/member/list/index.vue
+++ b/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 } })
    },

    //禁用会员
--- a/manager/src/views/member/list/memberRecycle.vue
+++ b/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) {
--- a/manager/src/views/order/after-order/afterSaleOrder.vue
+++ b/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) {
--- a/manager/src/views/order/after-order/orderComplaint.vue
+++ b/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() {
--- a/manager/src/views/order/order/fictitiousOrderList.vue
+++ b/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) {
--- a/manager/src/views/order/order/orderList.vue
+++ b/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() {
--- a/manager/src/views/seller/bill/bill.vue
+++ b/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({