client-base-v5/src/App.vue

<template>
  <div>
    <div
      :class="{
        'grid-container': isShowTopNavigation,
        'grid-container-hide-column1': !isShowMenu,
      }"
      :style="{
        gridTemplateColumns: width + 'px auto',
      }"
    >
      <div v-if="isShowMenu" class="grid-item-row12-column1">
        <div>
          <div
            id="resizable"
            ref="resizable"
            class="resizable-container"
            :style="{ width: width + 'px' }"
          >
            <div>
              <keep-alive>
                <MenuWidget :width="width" />
                <div class="resize-handle" @mousedown="handleMouseDown" />
              </keep-alive>
            </div>
          </div>
        </div>
      </div>

      <div v-if="isShowTopNavigation" class="grid-item-row1-column2">
        <div>
          <!-- top navigation -->
          <keep-alive>
            <TopNavigation @menu-visible-changed="clickIsShowMenu" />
          </keep-alive>
        </div>
      </div>

      <div :class="{ 'grid-item-row2-column2': isShowTopNavigation }">
        <div
          id="grid-item-center"
          :class="{ 'grid-center-container': isShowTopNavigation }"
        />
        <div
          :class="{
            'center-container-single': !isShowTopNavigation,
            'center-container': isShowTopNavigation,
          }"
        >
          <a-config-provider :locale="locale">
            <router-view />
          </a-config-provider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MenuWidget from './client/MenuWidget.vue';
import TopNavigation from './client/TopNavigation.vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

export default {
  components: {
    MenuWidget,
    TopNavigation,
  },
  data: function () {
    return {
      // 是否显示菜单
      isShowMenu: false,
      // 是否显示上导航栏
      isShowTopNavigation: false,
      locale: zhCN,
      // 菜单拉伸值
      isResizing: false,
      startX: 0,
      startWidth: 0,
      width: 230,
    };
  },

  watch: {
    '$route.path': function (value) {
      this.computerComponentVisible();
    },
  },

  mounted: function () {
    var _self = this;
    var languageSelected = localStorage.getItem('#languageSelected');
    if (languageSelected == null || languageSelected == '') {
      this.$i18n.locale = 'zh-CN';
    } else {
      this.$i18n.locale = languageSelected;
    }

    // 恢复菜单栏宽度
    const menuWidth = localStorage.getItem('menuWidth');
    if (menuWidth !== null && menuWidth !== undefined) {
      this.width = Number(menuWidth);
    } else {
      this.width = 230;
      localStorage.setItem('menuWidth', 230);
    }

    this.computerComponentVisible();
  },

  methods: {
    throttle(func, limit) {
      let inThrottle;
      return function () {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
          func.apply(context, args);
          inThrottle = true;
          setTimeout(() => (inThrottle = false), limit);
        }
      };
    },
    // 鼠标按下时开始监听
    handleMouseDown(e) {
      this.isResizing = true;
      this.startX = e.clientX;
      this.startWidth = this.width;
      const el = document.querySelector('.grid-container');
      el.style.userSelect = 'none';
      // 绑定鼠标移动和鼠标抬起事件到document
      document.documentElement.addEventListener(
        'mousemove',
        this.throttle(this.handleMouseMove, 20),
      );
      document.documentElement.addEventListener('mouseup', this.handleMouseUp);
    },
    // 鼠标移动时开始计算
    handleMouseMove(e) {
      const _self = this;
      if (!_self.isResizing) return;
      e.preventDefault();
      const deltaX = e.clientX - _self.startX;
      // 最小宽度230
      if (_self.startWidth + deltaX >= 230) {
        _self.width = _self.startWidth + deltaX;
      }
    },

    // 鼠标松开时清除
    handleMouseUp(e) {
      const _self = this;
      this.isResizing = false;
      const el = document.querySelector('.grid-container');
      el.style.userSelect = 'auto';
      setTimeout(() => {
        localStorage.setItem('menuWidth', _self.width);
      }, 1000);
      document.documentElement.removeEventListener(
        'mousemove',
        this.handleMouseMove,
      );
      document.documentElement.removeEventListener(
        'mouseup',
        this.handleMouseUp,
      );
    },

    /**
     * 点击之后存储isShowMenu
     */
    clickIsShowMenu: function () {
      var _self = this;
      this.isShowMenu = !this.isShowMenu;
      if (this.isShowMenu) {
        const menuWidth = localStorage.getItem('menuWidth');
        this.width = Number(menuWidth);
      } else {
        this.width = 0;
      }
      // localStorage.setItem('menuWidth', this.width);
      // localStorage.setItem('#IsShowMenu', this.isShowMenu);
    },
    /**
     * 计算组件的显示隐藏
     */
    computerComponentVisible: function () {
      let path = this.$route.path;
      let count = 0;
      if (path != null) {
        for (let index = 0; index < path.length; index++) {
          if (path[index] == '/') {
            count++;
          }
        }

        if (path.indexOf('register/') >= 0) {
          count = 1;
        }

        if (path.indexOf('dictionary/') >= 0) {
          count = 1;
        }

        if (path.indexOf('propassapp/') >= 0) {
          count = 1;
        }

        if (path.indexOf('single/') >= 0) {
          count = 1;
        }

        if (path.indexOf('lowcode-page/') >= 0) {
          count = 1;
        }

        if (path.indexOf('/generate-document/') >= 0) {
          count = 1;
        }

        if (path.indexOf('/excel-import/') >= 0) {
          count = 1;
        }

        if (path.indexOf('/CheckVouchImport/') >= 0) {
          count = 1;
        }

        if (path.indexOf('/repertoryCheckWork/') >= 0) {
          count = 1;
        }

        if (path.indexOf('/repertoryCheck/') >= 0) {
          count = 1;
        }

        if (path.indexOf('/CheckVouchsImport/') >= 0) {
          count = 1;
        }
        if (path.indexOf('/CheckVouchProjectUserImport/') >= 0) {
          count = 1;
        }
        if (path.indexOf('/CheckVouchProjectImport/') >= 0) {
          count = 1;
        }
        if (path.indexOf('/CheckVouchWorkImport/') >= 0) {
          count = 1;
        }
        if (path.indexOf('/CheckVouchWorksImport/') >= 0) {
          count = 1;
        }

        if (window.top !== window.self) {
          count = 1;
        }
      }
      //if (value == "/client-init" || value == "/login") {
      if (count == 1) {
        this.isShowMenu = false;
        this.isShowTopNavigation = false;
      } else {
        // var isShowMenu = localStorage.getItem('#IsShowMenu');
        // if (isShowMenu == 'true') {
        //   this.isShowMenu = true;
        // } else {
        //   this.isShowMenu = false;
        // }
        this.isShowMenu = true;
        this.isShowTopNavigation = true;
      }
    },
  },
};
</script>


<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 230px auto;
  grid-template-rows: 54px 1fr;
  gap: 0px;
  justify-items: stretch;
  align-items: stretch;
  height: calc(100vh);
  overflow: auto;
}

.grid-container-hide-column1 {
  grid-template-columns: 0px auto;
  /*grid-template-rows: 0px 1fr;*/
}

.grid-item-row12-column1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

.grid-item-row1-column2 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}

.grid-item-row2-column2 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  overflow: auto;
}

.grid-center-container {
  padding: 10px 20px 0;
}

.center-container-single {
  /* padding: 0px 20px 0; */
  padding: 0px;
}

.center-container {
  padding: 0px 20px 0;
}
</style>

<style>
/** 修复Bootstrap样式的BUG，input-group form-control 控件 会显示在 日期控件的前面 */
.input-group .form-control {
  /* z-index: 0; */
  /*checked by DengXin，修复input-group form-control 控件 会显示在 日期控件的前面的BUG*/
  position: static;
}
</style>



<!-- 已确定的CSS样式 -->
<style>
.site_title {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 22px;
  width: 100%;
  color: #ecf0f1 !important;
  margin-left: 0 !important;
  line-height: 59px;
  display: block;
  height: 55px;
  margin: 0;
  padding-left: 10px;
}

.site_title:hover,
.site_title:focus {
  text-decoration: none;
}

.clearfix {
  clear: both;
}
</style>

<!-- 已确定的CSS 样式 -->
<style>
.container {
  width: 100% !important;
  padding: 0 !important;
}

.left_col {
  background: #2a3f54;
}

.menu_section {
  margin-bottom: 35px;
}

.menu_section h3 {
  padding-left: 23px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: 1px 1px #000;
}

.menu_section > ul {
  margin-top: 10px;
}
</style>


<style>
.nav-md .container.body .col-md-3.left_col {
  width: 230px;
  padding: 0;
  position: absolute;
  display: -ms-flexbox;
  display: flex;
}

.nav-md .container.body .col-md-3.left_col.menu_fixed {
  height: 100%;
  position: fixed;
}

.nav-md .container.body .right_col {
  padding: 10px 20px 0;
}

/*@media (max-width: 991px) {
    .nav-md .container.body .right_col {
      width: 100%;
      margin: 0; 
    }

    .nav-md .container.body .col-md-3.left_col {
      display: none; 
    }

    .nav-md .container.body .right_col {
      width: 100%;
      padding-right: 0; 
    }

    .right_col {
      padding: 10px !important; 
    } 
  }*/
</style>

<style>
.profile_pic {
  width: 35%;
  float: left;
}

.img-circle.profile_img {
  width: 70%;
  background: #fff;
  margin-left: 15%;
  z-index: 1000;
  position: inherit;
  border: 1px solid rgba(52, 73, 94, 0.44);
  padding: 0px;
}

.profile_info {
  margin-top: 5px;
  width: 65%;
  float: left;
}

.profile_info span {
  font-size: 13px;
  line-height: 30px;
  color: #bab8b8;
}

.profile_info h2 {
  font-size: 14px;
  color: #ecf0f1;
  margin: 0;
  font-weight: 300;
}

.profile.img_2 {
  text-align: center;
}

.profile.img_2 .profile_pic {
  width: 100%;
}

.profile.img_2 .profile_pic .img-circle.profile_img {
  width: 50%;
  margin: 10px 0 0;
}

.profile.img_2 .profile_info {
  padding: 15px 10px 0;
  width: 100%;
  margin-bottom: 10px;
  float: left;
}

.main_menu span.fa {
  float: right;
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
  min-width: inherit;
  color: #c4cfda;
}

.active a span.fa {
  text-align: right !important;
  margin-right: 4px;
}

/* .navbar-nav > li > a {
  color: #fff !important;
} */

body .container.body .right_col {
  background: #f7f7f7;
}

.nav_title {
  width: 230px;
  float: left;
  background: #2a3f54;
  border-radius: 0;
  height: 57px;
}

@media (max-width: 1200px) {
  .x_title h2 {
    width: 62%;
    font-size: 17px;
  }

  .tile,
  .graph {
    zoom: 85%;
    height: inherit;
  }
}

@media (max-width: 1270px) and (min-width: 192px) {
  .x_title h2 small {
    display: none;
  }
}

.left_col .mCSB_scrollTools {
  width: 6px;
}

.left_col .mCSB_dragger {
  max-height: 400px !important;
}
</style>

<style>
/** 修复分页的样式 By YangZhiJie 2021-07-06 11:23 */
nav ul.pagination {
  margin: 0 !important;
}

/** 修复CURD界面输入框右上角和右下角的圆弧倒角覆盖的BUG By YangZhiJie 2021-12-09 20:14 */
.input-group .form-control:first-child {
  border-radius: 4px;
}
</style>

<style scoped>
.resizable-container {
  position: relative;
  min-width: 230px; /* 设置最小宽度 */
  padding: 10px;
}

.resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  height: calc(100vh);
  background-color: #ffffff;
}
.resize-handle:hover {
  cursor: ew-resize;
}
</style>