wanshenmean
9 小时以前 0fa137570bf7ac2bf58c8af2828cd595625fa400
Code/WMS/WIDESEA_WMSClient/src/views/Index.vue
@@ -3,22 +3,12 @@
    <div class="vol-aside" :style="{ width: menuWidth + 'px' }">
      <div class="header" :style="{ width: menuWidth - 1 + 'px' }">
        <img v-show="!isCollapse" v-bind:src="logo" />
        <i
          @click="toggleLeft"
          class="collapse-menu"
          :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        />
        <i @click="toggleLeft" class="collapse-menu" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" />
      </div>
      <div class="vol-menu">
        <el-scrollbar style="height: 100%">
          <VolMenu
            :currentMenuId="currentMenuId"
            :on-select="onSelect"
            :enable="true"
            :open-select="false"
            :isCollapse="isCollapse"
            :list="menuOptions"
          ></VolMenu>
          <VolMenu :currentMenuId="currentMenuId" :on-select="onSelect" :enable="true" :open-select="false"
            :isCollapse="isCollapse" :list="menuOptions"></VolMenu>
        </el-scrollbar>
      </div>
    </div>
@@ -27,14 +17,9 @@
        <div class="project-name">WMS</div>
        <div class="header-text">
          <div class="h-link">
            <a
              href="javascript:void(0)"
              @click="to(item)"
              v-for="(item, index) in links.filter((c) => {
                return !c.icon;
              })"
              :key="index"
            >
            <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
              return !c.icon;
            })" :key="index">
              <span v-if="!item.icon"> {{ item.text }}</span>
              <i v-else :class="item.icon"></i>
            </a>
@@ -42,14 +27,9 @@
        </div>
        <div class="header-info">
          <div class="h-link">
            <a
              href="javascript:void(0)"
              @click="to(item)"
              v-for="(item, index) in links.filter((c) => {
                return c.icon;
              })"
              :key="index"
            >
            <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
              return c.icon;
            })" :key="index">
              <span v-if="!item.icon"> {{ item.text }}</span>
              <i v-else :class="item.icon"></i>
            </a>
@@ -57,15 +37,9 @@
          <!--消息管理-->
          <div class="h-link" @click="messageModel = true">
            <a
              ><i class="el-icon-message-solid"
                ><el-badge
                  :value="messageList.length"
                  :type="messageList.length > 0 ? 'danger' : 'success'"
                  class="item"
                  style="width: 10px"
                ></el-badge></i
            ></a>
            <a><i class="el-icon-message-solid"><el-badge :value="messageList.length"
                  :type="messageList.length > 0 ? 'danger' : 'success'" class="item"
                  style="width: 10px"></el-badge></i></a>
          </div>
          <div>
            <img class="user-header" :src="userImg" :onerror="errorImg" />
@@ -75,62 +49,37 @@
            <span id="index-date"></span>
          </div>
          <div class="settings">
            <i
              style="font-size: 20px"
              class="el-icon-s-tools"
              @click="drawer_model = true"
            />
            <i style="font-size: 20px" class="el-icon-s-tools" @click="drawer_model = true" />
          </div>
        </div>
      </div>
      <div class="vol-path">
        <el-tabs
          @tab-click="selectNav"
          @tab-remove="removeNav"
          @contextmenu.prevent="bindRightClickMenu(false)"
          type="border-card"
          class="header-navigation"
          v-model="selectId"
          :strtch="false"
        >
          <el-tab-pane
            v-for="(item, navIndex) in navigation"
            type="card"
            :name="navIndex + ''"
            :closable="navIndex > 0"
            :key="navIndex"
            :label="item.name"
          >
        <el-tabs @tab-click="selectNav" @tab-remove="removeNav" @contextmenu.prevent="bindRightClickMenu(false)"
          type="border-card" class="header-navigation" v-model="selectId" :strtch="false">
          <el-tab-pane v-for="(item, navIndex) in navigation" type="card" :name="navIndex + ''" :closable="navIndex > 0"
            :key="navIndex" :label="item.name">
            <span style="display: none">{{ navIndex }}</span>
          </el-tab-pane>
        </el-tabs>
        <!-- 右键菜单 -->
        <div v-show="contextMenuVisible">
          <ul
            :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
            class="contextMenu"
          >
          <ul :style="{ left: menuLeft + 'px', top: menuTop + 'px' }" class="contextMenu">
            <li v-show="visibleItem.all">
              <el-button link @click="closeTabs()">
                <i class="el-icon-close"></i>
                {{
                  navigation.length == 2 ? "关闭菜单" : "关闭所有"
                }}</el-button
              >
                }}</el-button>
            </li>
            <li v-show="visibleItem.left">
              <el-button link @click="closeTabs('left')"
                ><i class="el-icon-back"></i>关闭左边</el-button
              >
              <el-button link @click="closeTabs('left')"><i class="el-icon-back"></i>关闭左边</el-button>
            </li>
            <li v-show="visibleItem.right">
              <el-button link @click="closeTabs('right')">
                <i class="el-icon-right"></i>关闭右边</el-button
              >
                <i class="el-icon-right"></i>关闭右边</el-button>
            </li>
            <li v-show="visibleItem.other">
              <el-button link @click="closeTabs('other')"
                ><i class="el-icon-right"></i>关闭其他
              <el-button link @click="closeTabs('other')"><i class="el-icon-right"></i>关闭其他
              </el-button>
            </li>
          </ul>
@@ -141,56 +90,29 @@
          <loading v-show="$store.getters.isLoading()"></loading>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component
                :is="Component"
                :key="$route.name"
                v-if="
                  !$route.meta ||
                  ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
                "
              />
              <component :is="Component" :key="$route.name" v-if="
                !$route.meta ||
                ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
              " />
            </keep-alive>
            <component
              :is="Component"
              :key="$route.name"
              v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"
            />
            <component :is="Component" :key="$route.name"
              v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')" />
          </router-view>
        </el-scrollbar>
      </div>
    </div>
    <el-drawer
      title="选择主题"
      v-model="drawer_model"
      direction="rtl"
      destroy-on-close
    >
    <el-drawer title="选择主题" v-model="drawer_model" direction="rtl" destroy-on-close>
      <div class="theme-selector">
        <div
          @click="changeTheme(item.name)"
          class="item"
          v-for="(item, index) in theme_color"
          :key="index"
          :style="{ background: item.color }"
        >
          <div
            v-show="item.leftColor"
            :style="{ background: item.leftColor }"
            style="height: 100%; width: 20px"
            class="t-left"
          ></div>
        <div @click="changeTheme(item.name)" class="item" v-for="(item, index) in theme_color" :key="index"
          :style="{ background: item.color }">
          <div v-show="item.leftColor" :style="{ background: item.leftColor }" style="height: 100%; width: 20px"
            class="t-left"></div>
          <div class="t-right"></div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="消息列表"
      v-model="messageModel"
      direction="rtl"
      destroy-on-close
      size="40%"
    >
    <el-drawer title="消息列表" v-model="messageModel" direction="rtl" destroy-on-close size="40%">
      <Message :list="messageList"></Message>
    </el-drawer>
  </div>
@@ -199,11 +121,12 @@
@import "./index/index.less";
</style>
<script>
import loading from "@/components/basic/RouterLoading";
import loading from "@/components/basic/RouterLoading.vue";
import VolMenu from "@/components/basic/VolElementMenu.vue";
import Message from "./index/Message.vue";
import MessageConfig from "./index/MessageConfig.js";
var imgUrl = require("@/assets/imgs/wms_x.png");
import imgUrl from "@/assets/imgs/wms_x.png";
import errorImgSrc from "@/assets/imgs/error-img.png";
var $this;
var $interval;
var $indexDate;
@@ -272,9 +195,7 @@
        icon: "el-icon-switch-button",
      },
    ]);
    const errorImg = ref(
      'this.src="' + require("@/assets/imgs/error-img.png") + '"'
    );
    const errorImg = ref('this.src="' + errorImgSrc + '"');
    const selectId = ref("1");
    // 【首页】标签序号(当前右键选中的菜单)
    const selectMenuIndex = ref("0");
@@ -340,7 +261,7 @@
        setTimeout(createSocket, 10000);
      };
      client.onerror = function () {};
      client.onerror = function () { };
    };
    const changeTheme = (name) => {
@@ -607,7 +528,7 @@
      }
      createSocket("ws://127.0.0.1:9296/" + _userInfo.userName);
      // createSocket("ws://127.0.0.1:9296");
      Object.assign(_config.$tabs, { open: open, close: close });
      http.get("api/Sys_Menu/getTreeMenu", {}, true).then((data) => {
@@ -793,6 +714,7 @@
  font-size: 14px;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
  i,
  button {
    font-size: 14px !important;
@@ -815,12 +737,8 @@
  letter-spacing: 1px;
}
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation
  > .el-tabs__header
  .el-tabs__item:last-child,
.el-tabs--top.el-tabs--border-card.header-navigation
  > .el-tabs__header
  .el-tabs__item:nth-child(2) {
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child,
.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) {
  padding: 0;
}