update 进行了一系列优化

Web/src/assets/style/app.less

@@ -22,6 +22,7 @@
 @import './lib/description.less';
 @import './lib/select.less';
 @import './lib/dropdown.less';
+@import './lib/modal.less';
 @import './lib/tree-layout.less';
 @import './lib/authority-view.less';
 @import './lib/icon-selector.less';

Web/src/assets/style/lib/modal.less

@@ -0,0 +1,33 @@
+@import (reference) '~@/assets/style/extend.less';
+.ant-modal-content {
+  background-color: fade(@primary-color, 20%);
+
+  backdrop-filter: blur(10px);
+}
+.ant-modal-header {
+  padding: @padding-sm @padding-md;
+
+  background-color: transparent;
+}
+.ant-modal-title {
+  color: fade(@white, 85%);
+}
+.ant-modal-body {
+  background-color: @white;
+}
+.ant-modal-footer {
+  background-color: @white;
+}
+.ant-modal-close {
+  color: fade(@white, 45%);
+  &:focus,
+  &:hover {
+    color: fade(@white, 75%);
+  }
+}
+.ant-modal-close-x {
+  line-height: 46px;
+
+  width: 46px;
+  height: 46px;
+}

Web/src/components/yoTreeLayout/index.js

@@ -1,3 +1,7 @@
+import Swiper from 'swiper'
+
+let timer, swiper
+
 export default {
   props: {
     loadData: {
@@ -20,6 +24,7 @@ export default {
 
       searchValue: '',
 
+      selectedKeys: [],
       expandedKeys: [],
       autoExpandParent: true
     }
@@ -29,7 +34,64 @@ export default {
     this.onLoadData()
   },
 
+  mounted() {
+    const container = this.$refs.swiper,
+      scrollBar = container.querySelector('.swiper-scrollbar')
+
+    const swiperOptions = {
+      direction: 'vertical',
+      slidesPerView: 'auto',
+      freeMode: true,
+      scrollbar: {
+        el: scrollBar,
+      },
+      mousewheel: true,
+    }
+
+    swiper = new Swiper(container, swiperOptions)
+
+    window.addEventListener('resize', () => {
+      this.onUpdateSwiper()
+    })
+
+  },
+
   methods: {
+
+    renderBreadcrumbItem() {
+
+      const path = ['顶级']
+
+      const findPath = (data, level) => {
+        level = level || 1
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i]
+
+          path[level] = item.title
+
+          if (item.id === this.selectedKeys[0]) {
+            path.length = level + 1
+            return true
+          }
+
+          if (item.children && item.children.length) {
+            const found = findPath(item.children, level + 1)
+            if (found) {
+              return true
+            }
+          }
+        }
+      }
+
+      if (this.selectedKeys.length) {
+        findPath(this.data)
+      }
+
+      return path.map(p => (
+        <a-breadcrumb-item>{p}</a-breadcrumb-item>
+      ))
+    },
+
     onLoadData() {
       this.loading = true
 
@@ -42,6 +104,10 @@ export default {
         }
         this.data = data
 
+        this.$nextTick(() => {
+          this.onUpdateSwiper()
+        })
+
         this.loading = false
       })
     },
@@ -51,8 +117,9 @@ export default {
     },
 
     onExpand(expandedKeys) {
-      this.expandedKeys = expandedKeys;
+      this.expandedKeys = expandedKeys
-      this.autoExpandParent = false;
+      this.autoExpandParent = false
+      this.onUpdateSwiper()
     },
 
     onSearch(value) {
@@ -77,9 +144,18 @@ export default {
         const data = this.list.find(m => m.key === p)
         selectedIds.push(data.id)
       })
+      this.selectedKeys = selectedIds
       this.$emit('select', selectedIds)
     },
 
+    onUpdateSwiper() {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        swiper.update()
+        swiper.update()
+      }, 300)
+    },
+
     generateKey(data, level) {
       const n = level || [0]
       n.push(0)
@@ -98,9 +174,9 @@ export default {
       // 这里获取不到Key
       for (let i = 0; i < data.length; i++) {
         const { key, id, title, children } = data[i]
-        this.list.push({ key, id, title });
+        this.list.push({ key, id, title })
         if (children) {
-          this.generateList(children);
+          this.generateList(children)
         }
       }
     },
@@ -108,12 +184,12 @@ export default {
     getParentKey(key, tree) {
       let parentKey;
       for (let i = 0; i < tree.length; i++) {
-        const node = tree[i];
+        const node = tree[i]
         if (node.children) {
           if (node.children.some(item => item.key === key)) {
-            parentKey = node.key;
+            parentKey = node.key
           } else if (this.getParentKey(key, node.children)) {
-            parentKey = this.getParentKey(key, node.children);
+            parentKey = this.getParentKey(key, node.children)
           }
         }
       }
@@ -123,14 +199,6 @@ export default {
 
   render() {
 
-    const swiperOptions = {
-      direction: 'vertical',
-      slidesPerView: 'auto',
-      freeMode: true,
-      scrollbar: true,
-      mousewheel: true,
-    }
-
     const props = {
       treeData: this.data,
       expandedKeys: this.expandedKeys,
@@ -170,16 +238,24 @@ export default {
               <a-input-search allowClear={true} placeholder="请输入检索关键字" onSearch={this.onSearch} />
             </div>
           </a-layout-header>
-          <swiper options={swiperOptions}>
+          <div class="swiper-container" ref="swiper">
-            <a-spin style={{ height: '100%' }} spinning={this.loading}>
+            <div class="swiper-wrapper">
-              <a-icon slot="indicator" type="loading" spin />
+              <div class="swiper-slide">
-              <swiper-slide>
+                <a-spin style={{ height: '100%' }} spinning={this.loading}>
-                <a-tree {...{ props, on, scopedSlots }} />
+                  <a-icon slot="indicator" type="loading" spin />
-              </swiper-slide>
+                  <a-tree {...{ props, on, scopedSlots }} />
-            </a-spin>
+                </a-spin>
-          </swiper>
+              </div>
+            </div>
+            <div class="swiper-scrollbar" />
+          </div>
         </a-layout-sider>
         <a-layout-content>
+          <container>
+            <a-breadcrumb class="mt-md mb-md">
+              {this.renderBreadcrumbItem()}
+            </a-breadcrumb>
+          </container>
           {this.$scopedSlots.default ? this.$scopedSlots.default() : null}
         </a-layout-content>
       </a-layout>

Web/src/main.js

@@ -13,9 +13,7 @@ Vue.use(Antd)
 /**
  * 引入swiper
  */
-import VueAwesomeSwiper from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
-Vue.use(VueAwesomeSwiper)
 import {
   Swiper as SwiperClass,
   Pagination,

Web/src/pages/system/_seed/editForm.vue

@@ -2,7 +2,8 @@
   <a-modal
     :confirmLoading="confirmLoading"
     :visible="visible"
-    @close="onCancel"
+    @cancel="onCancel"
+    @ok="onOk"
     class="yo-modal-form"
     title="编辑XX"
   >

Web/src/pages/system/_seed/index.vue

@@ -166,7 +166,6 @@ export default {
         this.$message.success(successMessage);
         this.onReloadData();
       }
-      this.$refs.table.onLoaded();
     },
 
     /**
@@ -180,6 +179,9 @@ export default {
         .testDeleteApi(record)
         .then(({ success }) => {
           this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
         });
     },
   },

Web/src/pages/system/dict/dictdata/editForm.vue

@@ -5,7 +5,7 @@
     @cancel="onCancel"
     @ok="onOk"
     class="yo-modal-form"
-    title="编辑XX"
+    title="编辑字典数据"
   >
     <FormBody ref="form-body" />
   </a-modal>

Web/src/pages/system/org/addForm.vue

@@ -42,9 +42,7 @@ export default {
         await this.formBody.onInit();
 
         // 获取外部选中的部门id
-        this.formBody.onFillData({
+        this.formBody.onFillData(record, orgId);
-          pid: orgId,
-        });
       });
     },
 

Web/src/pages/system/org/form.vue

@@ -11,6 +11,7 @@
         </a-form-model-item>
         <a-form-model-item label="上级机构" prop="pid">
           <a-tree-select
+            :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
             :tree-data="orgData"
             placeholder="请选择上级机构"
             tree-default-expand-all
@@ -26,7 +27,7 @@
             v-model="form.sort"
           />
         </a-form-model-item>
-        <a-form-model-item label="备注">
+        <a-form-model-item label="备注" prop="remark">
           <a-textarea placeholder="请输入备注" v-model="form.remark" />
         </a-form-model-item>
       </div>
@@ -39,7 +40,10 @@ import { EMPTY_ID } from '@/util/global';
 export default {
   data() {
     return {
-      form: {},
+      form: {
+        pid: undefined,
+        sort: 100,
+      },
       rules: {
         name: [{ required: true, message: '请输入机构名称' }],
         code: [{ required: true, message: '请输入唯一编码' }],
@@ -56,8 +60,12 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(record, orgId) {
-      this.form = this.$_.cloneDeep(record);
+      if (orgId) {
+        this.form.pid = orgId;
+      } else if (record) {
+        this.form = this.$_.cloneDeep(record);
+      }
     },
 
     /**
@@ -98,10 +106,6 @@ export default {
         ];
       });
     },
-
-    onChangeExtData(value, record, type) {
-      record[type] = value;
-    },
   },
 };
 </script>

Web/src/pages/system/org/index.vue

@@ -6,7 +6,6 @@
     ref="tree-layout"
   >
     <container>
-      <br />
       <a-card :bordered="false">
         <Auth auth="sysOrg:page">
           <div class="yo-query-bar">

Web/src/pages/system/user/addForm.vue

@@ -43,11 +43,7 @@ export default {
         await this.formBody.onInit();
 
         // 获取外部选中的部门id
-        this.formBody.onFillData({
+        this.formBody.onFillData(record, id);
-          sysEmpParam: {
-            orgId: id,
-          },
-        });
       });
     },
 

Web/src/pages/system/user/form.vue

@@ -57,9 +57,10 @@
           <div class="yo-form-group">
             <a-form-model-item label="所属组织机构" prop="sysEmpParam.orgId">
               <a-tree-select
+                :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                 :tree-data="orgData"
                 placeholder="请选择所属组织机构"
-                treeDefaultExpandAll
+                tree-default-expand-all
                 v-model="form.sysEmpParam.orgId"
               />
             </a-form-model-item>
@@ -89,6 +90,7 @@
             <template slot="orgId" slot-scope="text, record">
               <a-tree-select
                 :default-value="text"
+                :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                 :tree-data="orgData"
                 @change="value => onChangeExtData(value, record, 'orgId')"
                 placeholder="请选择附加组织机构"
@@ -183,8 +185,8 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(record, orgId) {
-      const form = this.$_.cloneDeep(record);
+      const form = this.$_.cloneDeep(record || {});
       // 日期特殊处理
       if (form.birthday) {
         form.birthday = moment(form.birthday).format('YYYY-MM-DD');
@@ -212,6 +214,10 @@ export default {
           };
         });
       }
+
+      if (orgId) {
+        form.sysEmpParam.orgId = orgId;
+      }
       this.form = form;
     },
 

Web/src/pages/system/user/index.vue

@@ -1,7 +1,6 @@
 <template>
   <yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
     <container>
-      <br />
       <a-alert closable type="error">
         <template slot="message">
           后端bug:生日不填写,在保存时会默认写入0001-01-01
@@ -9,10 +8,6 @@
         </template>
       </a-alert>
       <br />
-      <a-alert closable type="warning">
-        <template slot="message">缺授权的两块功能</template>
-      </a-alert>
-      <br />
       <a-card :bordered="false">
         <Auth auth="sysUser:page">
           <div class="yo-query-bar">

Web/src/views/main/_layout/sider/index copy.vue

@@ -0,0 +1,138 @@
+<template>
+  <section>
+    <a-layout-sider
+      :collapsed="siderCollapsed === undefined ? $root.global.settings.siderCollapsed : siderCollapsed"
+      @collapse="onCollapse"
+      v-if="$root.global.settings.layout === 'left-menu' || $root.global.settings.layout === 'right-menu'"
+      width="200"
+    >
+      <Logo />
+      <div class="yo-sider-nav">
+        <App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
+        <!-- <swiper :options="siderSwiperOptions" ref="sider-swiper">
+          <swiper-slide>
+            <a-spin :spinning="nav.loading">
+              <a-icon slot="indicator" spin type="loading" />
+              <Menu
+                :menu-style="{ height: '100%', borderRight: 0 }"
+                :nav="nav"
+                @openChange="onMenuOpenChange"
+                mode="inline"
+              />
+            </a-spin>
+          </swiper-slide>
+          <div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
+        </swiper>-->
+        <div class="swiper-container" id="layout--swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <a-spin :spinning="nav.loading">
+                <a-icon slot="indicator" spin type="loading" />
+                <Menu
+                  :menu-style="{ height: '100%', borderRight: 0 }"
+                  :nav="nav"
+                  @openChange="onMenuOpenChange"
+                  mode="inline"
+                />
+              </a-spin>
+            </div>
+            <div class="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
+          </div>
+        </div>
+      </div>
+    </a-layout-sider>
+    <template v-else-if="$root.global.settings.layout === 'top-nav'">
+      <Menu
+        :menu-style="{ borderBottom: 0 }"
+        :nav="nav"
+        @openChange="onMenuOpenChange"
+        mode="horizontal"
+      />
+    </template>
+  </section>
+</template>
+<script>
+import Logo from '../logo';
+import App from './app';
+import Menu from './menu';
+
+import Swiper from 'swiper';
+
+let timer,
+  swiper,
+  siderSwiperOptions = {
+    direction: 'vertical',
+    slidesPerView: 'auto',
+    freeMode: true,
+    scrollbar: {
+      el: '#layout--swiper-scrollbar',
+    },
+    mousewheel: true,
+  };
+
+export default {
+  components: {
+    Logo,
+    App,
+    Menu,
+  },
+  props: {
+    nav: {
+      default() {
+        return {
+          apps: [],
+          menus: [],
+          loading: false,
+        };
+      },
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      siderCollapsed: undefined,
+    };
+  },
+  mounted() {
+    swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
+
+    window.addEventListener('resize', () => {
+      if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
+        if (!this.$root.global.settings.siderCollapsed) {
+          if (window.innerWidth < 1000) {
+            this.siderCollapsed = true;
+          } else {
+            this.siderCollapsed = undefined;
+          }
+        }
+
+        this.onUpdateSwiper();
+      }
+    });
+  },
+  methods: {
+    onUpdateSwiper() {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        // if (this.$refs['sider-swiper']) {
+        //   this.$refs['sider-swiper'].$swiper.update();
+        // }
+        swiper.update();
+      }, 300);
+    },
+
+    onMenuOpenChange() {
+      this.onUpdateSwiper();
+    },
+
+    onCollapse() {
+      this.onUpdateSwiper();
+    },
+
+    windowTriggerResize() {
+      let e = new Event('resize');
+      window.dispatchEvent(e);
+    },
+  },
+};
+</script>

Web/src/views/main/_layout/sider/index.vue

@@ -9,20 +9,22 @@
       <Logo />
       <div class="yo-sider-nav">
         <App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
-        <swiper :options="siderSwiperOptions" ref="sider-swiper">
+        <div class="swiper-container" id="layout--swiper-container">
-          <swiper-slide>
+          <div class="swiper-wrapper">
-            <a-spin :spinning="nav.loading">
+            <div class="swiper-slide">
-              <a-icon slot="indicator" spin type="loading" />
+              <a-spin :spinning="nav.loading">
-              <Menu
+                <a-icon slot="indicator" spin type="loading" />
-                :menu-style="{ height: '100%', borderRight: 0 }"
+                <Menu
-                :nav="nav"
+                  :menu-style="{ height: '100%', borderRight: 0 }"
-                @openChange="onMenuOpenChange"
+                  :nav="nav"
-                mode="inline"
+                  @openChange="onMenuOpenChange"
-              />
+                  mode="inline"
-            </a-spin>
+                />
-          </swiper-slide>
+              </a-spin>
-          <div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
+            </div>
-        </swiper>
+          </div>
+          <div class="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
+        </div>
       </div>
     </a-layout-sider>
     <template v-else-if="$root.global.settings.layout === 'top-nav'">
@@ -40,7 +42,19 @@ import Logo from '../logo';
 import App from './app';
 import Menu from './menu';
 
-let timer;
+import Swiper from 'swiper';
+
+let timer,
+  swiper,
+  siderSwiperOptions = {
+    direction: 'vertical',
+    slidesPerView: 'auto',
+    freeMode: true,
+    scrollbar: {
+      el: '#layout--swiper-scrollbar',
+    },
+    mousewheel: true,
+  };
 
 export default {
   components: {
@@ -62,20 +76,13 @@ export default {
   },
   data() {
     return {
-      siderSwiperOptions: {
-        direction: 'vertical',
-        slidesPerView: 'auto',
-        freeMode: true,
-        scrollbar: {
-          el: '#layout--swiper-scrollbar',
-        },
-        mousewheel: true,
-      },
-
       siderCollapsed: undefined,
     };
   },
   mounted() {
+    // swiper不能使用vue版本的组件.效果相当差
+    swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
+
     window.addEventListener('resize', () => {
       if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
         if (!this.$root.global.settings.siderCollapsed) {
@@ -86,22 +93,26 @@ export default {
           }
         }
 
-        clearTimeout(timer);
+        this.onUpdateSwiper();
-        timer = setTimeout(() => {
-          if (this.$refs['sider-swiper']) {
-            this.$refs['sider-swiper'].$swiper.update();
-          }
-        }, 300);
       }
     });
   },
   methods: {
+    onUpdateSwiper() {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        // 需要更新两次
+        swiper.update();
+        swiper.update();
+      }, 300);
+    },
+
     onMenuOpenChange() {
-      this.windowTriggerResize();
+      this.onUpdateSwiper();
     },
 
     onCollapse() {
-      this.windowTriggerResize();
+      this.onUpdateSwiper();
     },
 
     windowTriggerResize() {