4.0.71 菜单可拉宽

package.json

@@ -1,7 +1,7 @@
 {
   "name": "client-base-v4",
   "description": "Leanwo Prodog Client",
-  "version": "4.0.69",
+  "version": "4.0.71",
   "author": "yangzhijie1488 <yangzhijie1488@163.com>",
   "scripts": {
     "dev": "cross-env webpack serve --config ./webpack.dev.js",
@@ -18,7 +18,7 @@
     "click-outside-vue3": "^4.0.1",
     "dayjs": "^1.11.6",
     "dingtalk-jsapi": "^2.10.3",
-    "pc-component-v3": "1.0.84",
+    "pc-component-v3": "1.0.86",
     "uuid": "^8.3.2",
     "v-tooltip": "^4.0.0-beta.17",
     "vue-request": "^1.2.4",

src/App.vue

@@ -1,13 +1,29 @@
 <template>
   <div>
     <div
-      :class="{ 'grid-container': isShowTopNavigation, 'grid-container-hide-column1': !isShowMenu }"
+      :class="{
+        'grid-container': isShowTopNavigation,
+        'grid-container-hide-column1': !isShowMenu,
+      }"
+      :style="{
+        gridTemplateColumns: width + 'px auto',
+      }"
     >
       <div v-if="isShowMenu" class="grid-item-row12-column1">
         <div>
-          <keep-alive>
-            <MenuWidget />
-          </keep-alive>
+          <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>
 
@@ -20,9 +36,17 @@
         </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 }">
+      <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>
@@ -41,7 +65,6 @@ import 'dayjs/locale/zh-cn';
 dayjs.locale('zh-cn');
 
 export default {
-
   components: {
     MenuWidget,
     TopNavigation,
@@ -53,6 +76,11 @@ export default {
       // 是否显示上导航栏
       isShowTopNavigation: false,
       locale: zhCN,
+      // 菜单拉伸值
+      isResizing: false,
+      startX: 0,
+      startWidth: 0,
+      width: 230,
     };
   },
 
@@ -71,16 +99,89 @@ export default {
       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);
     },
     /**
@@ -224,7 +325,6 @@ export default {
   padding: 0px;
 }
 
-
 .center-container {
   padding: 0px 20px 0;
 }
@@ -463,4 +563,25 @@ nav ul.pagination {
 .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>

src/client/MenuNode.vue

@@ -240,7 +240,8 @@ export default {
 .menu-branch-leaf-icon {
     float: top;
     position: absolute;
-    left: 150px;
+    /* left: 150px; */
+    right: 10px;
     top: 15px;
     color: #FFFFFF;
 }

src/client/MenuWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu-side left_col scroll-view">
+  <div class="menu-side left_col scroll-view" :style="{width: width+ 'px'}">
     <div class="navbar nav_title" style="border: 0">
       <a href="#/desktop/dashboard" class="site_title"><img style="width: 150px;" src="/static/assets/client-base-v4/image/template-logo_42.png" /></a>
     </div>
@@ -64,6 +64,12 @@ export default {
   components: {
     MenuNode,
   },
+  props: {
+    width:{
+      default:230,
+      type:Number,
+    },
+  }, 
   data: function () {
     this.Language = Language;
     return {

src/window/tabFormView/TabFormEdit.vue

@@ -279,12 +279,13 @@ import FormFieldDef from './FormFieldDef.vue';
 import AttachmentPanel from '../attachment/AttachmentPanel.vue';
 
 import AttributePanel from '../attribute/AttributePanel.vue';
-import ApproveComment from '../../workflow/ApproveComment.vue';
 import HistoryApproveComment from '../../workflow/HistoryApproveComment.vue';
+import ApproveComment from '../../workflow/ApproveComment.vue';
 
 import DataRecoveryResource from '../../api/base/DataRecoveryResource.js';
 import JsUtil from '../../common/JsUtil.js';
 import { Notify, Uuid, Modal } from 'pc-component-v3';
+
 export default {
 
   components: {

src/window/tabFormView/TabFormView.vue

@@ -364,8 +364,9 @@ import AttributeViewPanel from '../attribute/AttributeViewPanel.vue';
 import WorkflowSelectUser from '../../workflow/WorkflowSelectUser.vue';
 import WorkflowStart from '../../workflow/WorkflowStart.vue';
 import WorkflowUserDefine from '../../workflow/WorkflowUserDefine.vue';
-import ApproveComment from '../../workflow/ApproveComment.vue';
 import TabAudit from '../tabView/TabAudit.vue';
+import ApproveComment from '../../workflow/ApproveComment.vue';
+
 
 import CurdWindowResourceV2 from '../../api/dic/CurdWindowResourceV2.js';
 import CurdWindowEditResource from '../../api/dic/CurdWindowEditResource.js';

src/workflow/ReportApprove.vue

@@ -174,7 +174,6 @@
 <script>
 import WorkflowUserDefine from './WorkflowUserDefine.vue';
 import WorkflowSelectUser from './WorkflowSelectUser.vue';
-import ApproveComment from './ApproveComment.vue';
 import Common from '../common/Common.js';
 import CurdWindowResource from '../api/dic/CurdWindowResource.js';
 import WindowServerUtil from '../resource/dictionary/WindowServerUtil.js';
@@ -188,6 +187,7 @@ import Language from '../common/Language.js';
 import { Notify } from 'pc-component-v3';
 import WorkflowResource from '../api/workflow/WorkflowResource.js';
 import HistoryApproveComment from './HistoryApproveComment.vue';
+import ApproveComment from './ApproveComment.vue';
 
 
 export default {