Merge branch 'master' of ssh://home.bobandjuly.cyou:5122/ewide/ewide_core

.gitignore

@@ -5,3 +5,4 @@ obj/
 /packages
 .vs
 Logs/
+/Api/Ewide.Web.Entry/wwwroot/Upload

Api/Ewide.Core/Entity/SysLogOp.cs

@@ -28,7 +28,7 @@ namespace Ewide.Core
         /// 是否执行成功（Y-是，N-否）
         /// </summary>
         [Comment("是否执行成功")]
-        public string Success { get; set; }
+        public bool? Success { get; set; }
 
         /// <summary>
         /// 具体消息

Api/Ewide.Core/Filter/RequestActionFilter.cs

@@ -38,7 +38,7 @@ namespace Ewide.Core
             {
                 Name = descAtt != null ? descAtt.Description : actionDescriptor.ActionName,
                 OpType = 1,
-                Success = isRequestSucceed ? YesOrNot.Y.ToString() : YesOrNot.N.ToString(),
+                Success = isRequestSucceed,
                 //Message = isRequestSucceed ? "成功" : "失败",
                 Ip = httpContext.GetRemoteIpAddressToIPv4(),
                 Location = httpRequest.GetRequestUrlAddress(),

Api/Ewide.Core/Service/Dict/Dto/DictDataInput.cs

@@ -44,7 +44,7 @@ namespace Ewide.Core.Service
         /// <summary>
         /// 字典类型Id
         /// </summary>
-        [Required(ErrorMessage = "字典类型Id不能为空"), DataValidation(ValidationTypes.Numeric)]
+        [Required(ErrorMessage = "字典类型Id不能为空")]
         public string TypeId { get; set; }
     }
 
@@ -53,7 +53,7 @@ namespace Ewide.Core.Service
         /// <summary>
         /// 字典类型Id
         /// </summary>
-        [Required(ErrorMessage = "字典类型Id不能为空"), DataValidation(ValidationTypes.Numeric)]
+        [Required(ErrorMessage = "字典类型Id不能为空")]
         public override string TypeId { get; set; }
 
         /// <summary>
@@ -74,7 +74,7 @@ namespace Ewide.Core.Service
         /// <summary>
         /// 字典值Id
         /// </summary>
-        [Required(ErrorMessage = "字典值Id不能为空"), DataValidation(ValidationTypes.Numeric)]
+        [Required(ErrorMessage = "字典值Id不能为空")]
         public string Id { get; set; }
     }
 
@@ -83,7 +83,7 @@ namespace Ewide.Core.Service
         /// <summary>
         /// 字典值Id
         /// </summary>
-        [Required(ErrorMessage = "字典值Id不能为空"), DataValidation(ValidationTypes.Numeric)]
+        [Required(ErrorMessage = "字典值Id不能为空")]
         public string Id { get; set; }
     }
 

Api/Ewide.Core/Service/Dict/Dto/DictDataOutput.cs

@@ -8,6 +8,6 @@
         /// <summary>
         /// 字典Id
         /// </summary>
-        public virtual long Id { get; set; }
+        public virtual string Id { get; set; }
     }
 }

Api/Ewide.Core/Service/File/SysFileService.cs

@@ -106,7 +106,6 @@ namespace Ewide.Core.Service
         /// <param name="input"></param>
         /// <returns></returns>
         [HttpGet("/sysFileInfo/preview")]
-        [AllowAnonymous]
         public async Task<IActionResult> PreviewFileInfo([FromQuery] QueryFileInoInput input)
         {
             return await DownloadFileInfo(input);

Api/Ewide.Core/Service/Log/Dto/OpLogInput.cs

@@ -20,7 +20,7 @@ namespace Ewide.Core.Service
         /// <summary>
         /// 是否执行成功（Y-是，N-否）
         /// </summary>
-        public string Success { get; set; }
+        public bool? Success { get; set; }
 
         /// <summary>
         /// 具体消息

Api/Ewide.Core/Service/Log/SysOpLogService.cs

@@ -33,12 +33,12 @@ namespace Ewide.Core.Service
         public async Task<dynamic> QueryOpLogPageList([FromQuery] OpLogInput input)
         {
             var name = !string.IsNullOrEmpty(input.Name?.Trim());
-            var success = !string.IsNullOrEmpty(input.Success?.Trim());
+            var success = input.Success.HasValue;
             var searchBeginTime = !string.IsNullOrEmpty(input.SearchBeginTime?.Trim());
             var opLogs = await _sysOpLogRep.DetachedEntities
                                            .Where((name, u => EF.Functions.Like(u.Name, $"%{input.Name.Trim()}%")))
                                            .Where(input.OpType > 0, u => u.OpType == input.OpType)
-                                           .Where(success, u => u.Success == input.Success.Trim())
+                                           .Where(success, u => u.Success == input.Success.Value)
                                            .Where(searchBeginTime, u => u.OpTime >= DateTime.Parse(input.SearchBeginTime.Trim()) &&
                                                                    u.OpTime <= DateTime.Parse(input.SearchEndTime.Trim()))
                                            .OrderByDescending(u => u.Id)

Api/Ewide.Core/Service/Org/SysOrgService.cs

@@ -211,7 +211,7 @@ namespace Ewide.Core.Service
         [UnitOfWork]
         public async Task UpdateOrg(UpdateOrgInput input)
         {
-            if (input.Pid != "0" && !string.IsNullOrEmpty(input.Pid))
+            if (!input.Pid.Equals(System.Guid.Empty.ToString()) && !string.IsNullOrEmpty(input.Pid))
             {
                 var org = await _sysOrgRep.DetachedEntities.FirstOrDefaultAsync(u => u.Id == input.Pid);
                 _ = org ?? throw Oops.Oh(ErrorCode.D2000);

Api/Ewide.Core/Service/Role/Dto/RoleOutput.cs

@@ -8,7 +8,7 @@
         /// <summary>
         /// Id
         /// </summary>
-        public long Id { get; set; }
+        public string Id { get; set; }
 
         /// <summary>
         /// 编码

Api/Ewide.Core/Service/Timer/Dto/JobInput.cs

@@ -93,7 +93,7 @@ namespace Ewide.Core.Service
         /// <summary>
         /// 任务Id
         /// </summary>
-        [Required(ErrorMessage = "任务Id不能为空"), DataValidation(ValidationTypes.Numeric)]
+        [Required(ErrorMessage = "任务Id不能为空")]
         public string Id { get; set; }
     }
 

Api/Ewide.Database.Migrations/Migrations/20210426060021_Init20210426a.cs

@@ -0,0 +1,35 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+namespace Ewide.Database.Migrations.Migrations
+{
+    public partial class Init20210426a : Migration
+    {
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterColumn<bool>(
+                name: "Success",
+                table: "sys_log_op",
+                type: "tinyint(1)",
+                nullable: true,
+                comment: "是否执行成功",
+                oldClrType: typeof(string),
+                oldType: "longtext CHARACTER SET utf8mb4",
+                oldNullable: true,
+                oldComment: "是否执行成功");
+        }
+
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterColumn<string>(
+                name: "Success",
+                table: "sys_log_op",
+                type: "longtext CHARACTER SET utf8mb4",
+                nullable: true,
+                comment: "是否执行成功",
+                oldClrType: typeof(bool),
+                oldType: "tinyint(1)",
+                oldNullable: true,
+                oldComment: "是否执行成功");
+        }
+    }
+}

Api/Ewide.Database.Migrations/Migrations/DefaultDbContextModelSnapshot.cs

@@ -2681,8 +2681,8 @@ namespace Ewide.Database.Migrations.Migrations
                         .HasColumnType("longtext CHARACTER SET utf8mb4")
                         .HasComment("返回结果");
 
-                    b.Property<string>("Success")
-                        .HasColumnType("longtext CHARACTER SET utf8mb4")
+                    b.Property<bool?>("Success")
+                        .HasColumnType("tinyint(1)")
                         .HasComment("是否执行成功");
 
                     b.Property<string>("Url")

Api/Ewide.Web.Core/Startup.cs

@@ -26,7 +26,9 @@ namespace Ewide.Web.Core
                     .AddMvcFilter<RequestActionFilter>()
                     .AddInjectWithUnifyResult<XnRestfulResultProvider>()
                     // 在管道中增加NewtonsoftJson,防止参数类型严格验证
-                    .AddNewtonsoftJson()
+                    .AddNewtonsoftJson(options => {
+                        options.SerializerSettings.DateFormatString = "yyyy-MM-dd HH:mm:ss";
+                    })
                     .AddJsonOptions(options =>
                     {
                         //options.JsonSerializerOptions.DefaultBufferSize = 10_0000;//返回较大数据数据序列化时会截断，原因：默认缓冲区大小（以字节为单位）为16384。

Web/src/assets/style/app.less

@@ -19,8 +19,10 @@
 @import './lib/table.less';
 @import './lib/list.less';
 @import './lib/form.less';
+@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/description.less

@@ -0,0 +1,10 @@
+@import (reference) '~@/assets/style/extend.less';
+.ant-descriptions-bordered {
+  .ant-descriptions-view {
+    >table {
+      border-collapse: collapse;
+
+      background-color: @white;
+    }
+  }
+}

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/assets/style/lib/table.less

@@ -25,10 +25,6 @@
 
 .ant-table {
   background-color: @white;
-
-  .yo-action-bar {
-    margin-bottom: 0;
-  }
 }
 
 .ant-table-small {

Web/src/common/api/requests/index.js

@@ -11,44 +11,8 @@
  *  [url]必填,为接口地址,[method]选填,为请求方式(不区分大小写),默认为POST
  */
 
-import appManage from './sys/appManage'
-import configManage from './sys/configManage'
-import dictDataManage from './sys/dictDataManage'
-import dictManage from './sys/dictManage'
-import emailManage from './sys/emailManage'
-import fileManage from './sys/fileManage'
-import loginManage from './sys/loginManage'
-import logManage from './sys/logManage'
-import machineManage from './sys/machineManage'
-import menuManage from './sys/menuManage'
-import noticeManage from './sys/noticeManage'
-import onlineUserManage from './sys/onlineUserManage'
-import orgManage from './sys/orgManage'
-import posManage from './sys/posManage'
-import roleManage from './sys/roleManage'
-import smsManage from './sys/smsManage'
-import tenantManage from './sys/tenantManage'
-import timersManage from './sys/timersManage'
-import userManage from './sys/userManage'
+import sys from './sys'
 
 export default {
-    ...appManage, 
-    ...configManage, 
-    ...dictDataManage, 
-    ...dictManage, 
-    ...emailManage, 
-    ...fileManage, 
-    ...loginManage, 
-    ...logManage, 
-    ...machineManage, 
-    ...menuManage, 
-    ...noticeManage, 
-    ...onlineUserManage, 
-    ...orgManage, 
-    ...posManage, 
-    ...roleManage, 
-    ...smsManage, 
-    ...tenantManage, 
-    ...timersManage, 
-    ...userManage, 
+    ...sys
 }

Web/src/common/api/requests/sys/index.js

@@ -0,0 +1,41 @@
+import appManage from './appManage'
+import configManage from './configManage'
+import dictDataManage from './dictDataManage'
+import dictManage from './dictManage'
+import emailManage from './emailManage'
+import fileManage from './fileManage'
+import loginManage from './loginManage'
+import logManage from './logManage'
+import machineManage from './machineManage'
+import menuManage from './menuManage'
+import noticeManage from './noticeManage'
+import onlineUserManage from './onlineUserManage'
+import orgManage from './orgManage'
+import posManage from './posManage'
+import roleManage from './roleManage'
+import smsManage from './smsManage'
+import tenantManage from './tenantManage'
+import timersManage from './timersManage'
+import userManage from './userManage'
+
+export default {
+    ...appManage,
+    ...configManage,
+    ...dictDataManage,
+    ...dictManage,
+    ...emailManage,
+    ...fileManage,
+    ...loginManage,
+    ...logManage,
+    ...machineManage,
+    ...menuManage,
+    ...noticeManage,
+    ...onlineUserManage,
+    ...orgManage,
+    ...posManage,
+    ...roleManage,
+    ...smsManage,
+    ...tenantManage,
+    ...timersManage,
+    ...userManage,
+}

Web/src/components/yoImage/index.js

@@ -0,0 +1,35 @@
+import { ArrayBufferToBase64 } from '@/util/file'
+
+export default {
+    props: {
+        type: {
+            type: String,
+            default: 'image'
+        },
+        id: {
+            type: [String, Number],
+            require: true
+        }
+    },
+    data() {
+        return {
+            src: ''
+        }
+    },
+
+    created() {
+        if (this.id) {
+            this.$api.sysFileInfoPreview({ id: this.id }).then(async ({ data }) => {
+                const base64 = await ArrayBufferToBase64(data)
+                this.src = base64
+            })
+        }
+    },
+
+    render() {
+        return this.type == 'avatar' ?
+            <a-avatar src={this.src} {...{ props: this.$attrs }} />
+            :
+            <img src={this.src} {...{ props: this.$attrs }} />
+    },
+}

Web/src/components/yoTable/index.js

@@ -162,7 +162,8 @@ export default {
     }
 
     const on = {
-      change: this.onTableChange
+      change: this.onTableChange,
+      ...this.$listeners
     }
     return (
       <section>

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.autoExpandParent = false;
+      this.expandedKeys = expandedKeys
+      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">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
                 <a-spin style={{ height: '100%' }} spinning={this.loading}>
                   <a-icon slot="indicator" type="loading" spin />
-              <swiper-slide>
                   <a-tree {...{ props, on, scopedSlots }} />
-              </swiper-slide>
                 </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,
@@ -53,6 +51,8 @@ import YoTable from './components/yoTable'
 Vue.component('YoTable', YoTable)
 import YoTableActions from './components/yoTableActions'
 Vue.component('YoTableActions', YoTableActions)
+import YoImage from './components/yoImage'
+Vue.component('YoImage', YoImage)
 
 /**
  * 引入主题样式

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/addForm.vue

@@ -0,0 +1,78 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="新增字典类型"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.formBody.onInit();
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictTypeAdd(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('新增成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="新增字典数据"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen(record, typeId) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.formBody.onInit();
+        this.formBody.onFillData(record, typeId);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictDataAdd(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('新增成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="编辑字典数据"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+        this.formBody.onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictDataEdit(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,122 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <a-form-model-item label="字典值" prop="value">
+          <a-input placeholder="请输入字典值" v-model="form.value" />
+        </a-form-model-item>
+        <a-form-model-item label="唯一编码" prop="code">
+          <a-input placeholder="请输入唯一编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="remark">
+          <a-textarea placeholder="请输入备注" v-model="form.remark" />
+        </a-form-model-item>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {
+        typeId: '',
+        sort: 100,
+      },
+      /** 验证格式 */
+      rules: {
+        value: [{ required: true, message: '请输入字典值' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /** ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record, typeId) {
+      if (typeId) {
+        this.form.typeId = typeId;
+      } else {
+        /** 将默认数据覆盖到form */
+        this.form = this.$_.cloneDeep({
+          ...record,
+          /** 在此处添加默认数据转换 */
+          /** ... */
+        });
+      }
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /** ...BEGIN */
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /** ... */
+  },
+};
+</script>

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

@@ -1,17 +1,11 @@
 <template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    width="800px"
-    class="yo-modal-form"
-    title="字典值管理"
-  >
-    <a-card :bordered="false">
-      <Auth auth="sysDictType:page">
+  <a-card>
+    <Auth auth="sysDictData:page">
       <div class="yo-query-bar">
         <a-form-model :model="query" layout="inline">
-            <a-form-model-item label="类型名称">
-              <a-input placeholder="请输入类型名称" v-model="query.name" />
+          <!-- 此处添加查询表单控件 -->
+          <a-form-model-item label="字典值">
+            <a-input placeholder="请输入字典值" v-model="query.value" />
           </a-form-model-item>
           <a-form-model-item label="唯一编码">
             <a-input placeholder="请输入唯一编码" v-model="query.code" />
@@ -19,147 +13,119 @@
           <a-form-model-item>
             <a-button-group>
               <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button
-                  @click="
-                    () => {
-                      (query = {}), onQuery();
-                    }
-                  "
-                  >重置</a-button
-                >
+              <a-button @click="onResetQuery">重置</a-button>
             </a-button-group>
           </a-form-model-item>
         </a-form-model>
       </div>
     </Auth>
+
     <yo-table :columns="columns" :load-data="loadData" ref="table">
-        <div class="yo-action-bar" slot="title">
-          <div class="yo-action-bar--actions">
-            <a-button @click="onOpen('add-form')">新增类型</a-button>
-          </div>
-        </div>
-         <span slot="status" slot-scope="text, record">
-             {{statusFilter(text)}}
-             </span>
+      <Auth auth="sysDictData:add" slot="operator">
+        <a-button @click="onOpen('add-form')" icon="plus">新增字典数据</a-button>
+      </Auth>
+      <!-- 格式化字段内容 -->
+      <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+      <!-- 添加操作控件 -->
       <span slot="action" slot-scope="text, record">
         <yo-table-actions>
-              <a @click="onLoad('data-Index', record)">字典</a>
-            <Auth auth="[sysDictType:edit],[sysDictType:delete]">
-              <a-dropdown>
-                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
-                <a-menu slot="overlay">
-                  <Auth auth="sysDictType:edit">
-                    <a-menu-item>
-                      <a  @click="$refs.roleMenuForm.roleMenu(record)"
-                        >编辑</a
-                      >
-                    </a-menu-item>
+          <Auth auth="sysDictData:edit">
+            <a @click="onOpen('edit-form', record)">编辑</a>
           </Auth>
-                  <Auth auth="sysDictType:delete">
-                    </a-menu-item>
-                    <a-menu-item>
-                    <a-popconfirm
-                      @confirm="onDelete(record)"
-                      placement="topRight"
-                      title="是否确认删除"
-                    >
+          <Auth auth="sysDictData:delete">
+            <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
               <a>删除</a>
             </a-popconfirm>
-                     </a-menu-item>
-                  </Auth>
-                </a-menu>
-              </a-dropdown>
           </Auth>
+          <!-- 可在此处添加其他操作控件 -->
         </yo-table-actions>
       </span>
     </yo-table>
-    </a-card>
-    <br />
-     <!-- <data-Index ref="data-Index" @ok="onReloadData"/> -->
-     <!-- <add-form @ok="onReloadData" ref="add-form" />
+
+    <add-form @ok="onReloadData" ref="add-form" />
     <edit-form @ok="onReloadData" ref="edit-form" />
-      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
-      <role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
-  </container>
-  </a-modal>
+  </a-card>
 </template>
 <script>
-// import AddForm from './addForm';
-// import editForm from "./editForm";
-// import roleMenuForm from "./roleMenuForm";
-// import dataIndex from "./dictdata/index";
+import AddForm from './addForm';
+import EditForm from './editForm';
+
 export default {
   components: {
-      //  dataIndex
-  //     AddForm,
-  //     editForm,
-  //     roleMenuForm,
-  //     roleOrgForm,
+    AddForm,
+    EditForm,
+  },
+  props: {
+    type: {
+      type: Object,
+    },
+
+    codes: {
+      type: Object,
+    },
   },
   data() {
     return {
-      query: {},
+      query: {
+        typeId: this.type.id,
+      },
       columns: [
         {
-          title: "类型名称",
-          dataIndex: "name",
+          title: '字典值',
+          dataIndex: 'value',
         },
         {
-          title: "唯一编码",
-          dataIndex: "code",
+          title: '唯一编码',
+          dataIndex: 'code',
         },
         {
-          title: "排序",
-          dataIndex: "sort",
+          title: '排序',
+          dataIndex: 'sort',
         },
         {
-          title: "备注",
-          dataIndex: "remark",
+          title: '备注',
+          dataIndex: 'remark',
           width: 200,
         },
         {
-          title: "状态",
-          dataIndex: "status",
-          scopedSlots: { customRender: "status" },
-        },
-        {
-          title: "操作",
-          width: "150px",
-          dataIndex: "action",
-          scopedSlots: { customRender: "action" },
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
         },
       ],
-      visible:false,
-
-      statusDict: [],
     };
   },
   created() {
     this.onLoadCodes();
-  },
-  methods: {
-    statusFilter(status) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.statusDict.filter((item) => item.code == status);
-      if (values.length > 0) {
-        return values[0].value;
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/** ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
     }
   },
+  methods: {
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
+      return (
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
           .sysDictDataPage({
             ...params,
             ...this.query,
           })
           .then((res) => {
-          this.visible = true;
-          console.log(params)
             return res.data;
-        });
+          })
+      );
     },
 
     /**
@@ -170,6 +136,20 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'typeId') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -179,20 +159,18 @@ export default {
     },
 
     /**
-     * 加载字典数据时的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
      */
-    onLoadCodes() {
-      this.$api
-        .$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
-        .then((res) => {
-          this.statusDict = res[0].data;
-        });
-    },
+    onLoadCodes() {},
 
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
     bindCodeValue(code, name) {
-      const c = this.codes
-        .find((p) => p.code == name)
-        .values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
@@ -200,39 +178,36 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen(record, this.type.id);
     },
 
-    onLoad(formName,record){
-      this.$refs[formName].loadData(record);
-    },
-    onResult(success, message, successMessage) {
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
       if (success) {
         this.$message.success(successMessage);
         this.onReloadData();
-      } else {
-        this.$refs.table.onLoaded();
-        this.$message.error(message);
       }
+      this.$refs.table.onLoaded();
     },
 
-    onSetDefault(record) {
-      this.$refs.table.onLoading();
-      this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
-        });
-    },
-
+    /**
+     * 必要方法
+     * 删除时调用
+     */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
-        this.onResult(success, message, "删除成功");
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .sysDictDataDelete(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
         });
     },
   },

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

@@ -0,0 +1,79 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="编辑字典类型"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  computed: {
+    formBody() {
+      return this.$refs['form-body'];
+    },
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+        this.formBody.onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onGetData().then((data) => {
+        this.confirmLoading = true;
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
+          .sysDictTypeEdit(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onCancel();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,117 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <a-form-model-item label="类型名称" prop="name">
+          <a-input placeholder="请输入类型名称" v-model="form.name" />
+        </a-form-model-item>
+        <a-form-model-item label="唯一编码" prop="code">
+          <a-input placeholder="请输入唯一编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="remark">
+          <a-textarea placeholder="请输入备注" v-model="form.remark" />
+        </a-form-model-item>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {
+        sort: 100,
+      },
+      /** 验证格式 */
+      rules: {
+        name: [{ required: true, message: '请输入类型名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /** ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /** ...BEGIN */
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /** ... */
+  },
+};
+</script>

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

@@ -5,6 +5,7 @@
       <Auth auth="sysDictType:page">
         <div class="yo-query-bar">
           <a-form-model :model="query" layout="inline">
+            <!-- 此处添加查询表单控件 -->
             <a-form-model-item label="类型名称">
               <a-input placeholder="请输入类型名称" v-model="query.name" />
             </a-form-model-item>
@@ -14,143 +15,127 @@
             <a-form-model-item>
               <a-button-group>
                 <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button
-                  @click="
-                    () => {
-                      (query = {}), onQuery();
-                    }
-                  "
-                  >重置</a-button
-                >
+                <a-button @click="onResetQuery">重置</a-button>
               </a-button-group>
             </a-form-model-item>
           </a-form-model>
         </div>
       </Auth>
+
       <yo-table :columns="columns" :load-data="loadData" ref="table">
-        <div class="yo-action-bar" slot="title">
-          <div class="yo-action-bar--actions">
-            <a-button @click="onOpen('add-form')">新增类型</a-button>
-          </div>
-        </div>
-         <span slot="status" slot-scope="text, record">
-             {{statusFilter(text)}}
-             </span>
+        <Auth auth="sysDictType:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
+        </Auth>
+        <!-- 格式化字段内容 -->
+        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
+        <!-- 添加操作控件 -->
         <span slot="action" slot-scope="text, record">
           <yo-table-actions>
-              <a @click="onLoad('data-Index', record)">字典</a>
-            <Auth auth="[sysDictType:edit],[sysDictType:delete]">
-              <a-dropdown>
-                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
-                <a-menu slot="overlay">
             <Auth auth="sysDictType:edit">
-                    <a-menu-item>
-                      <a  @click="$refs.roleMenuForm.roleMenu(record)"
-                        >编辑</a
-                      >
-                    </a-menu-item>
+              <a @click="onOpen('edit-form', record)">编辑</a>
             </Auth>
             <Auth auth="sysDictType:delete">
-                    </a-menu-item>
-                    <a-menu-item>
-                    <a-popconfirm
-                      @confirm="onDelete(record)"
-                      placement="topRight"
-                      title="是否确认删除"
-                    >
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
                 <a>删除</a>
               </a-popconfirm>
-                     </a-menu-item>
-                  </Auth>
-                </a-menu>
-              </a-dropdown>
             </Auth>
+            <!-- 可在此处添加其他操作控件 -->
           </yo-table-actions>
         </span>
+        <div slot="expandedRowRender" slot-scope="record">
+          <dict-data :codes="codes" :type="record" />
+        </div>
       </yo-table>
     </a-card>
     <br />
-     <data-Index ref="data-Index" @ok="onReloadData"/>
-     <!-- <add-form @ok="onReloadData" ref="add-form" />
+    <add-form @ok="onReloadData" ref="add-form" />
     <edit-form @ok="onReloadData" ref="edit-form" />
-      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
-      <role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
   </container>
 </template>
 <script>
-// import AddForm from './addForm';
-// import editForm from "./editForm";
-// import roleMenuForm from "./roleMenuForm";
-import dataIndex from "./dictdata/index";
+import DictData from './dictdata';
+
+import AddForm from './addForm';
+import EditForm from './editForm';
+
 export default {
   components: {
-       dataIndex
-  //     AddForm,
-  //     editForm,
-  //     roleMenuForm,
-  //     roleOrgForm,
+    DictData,
+    AddForm,
+    EditForm,
   },
   data() {
     return {
       query: {},
       columns: [
         {
-          title: "类型名称",
-          dataIndex: "name",
+          title: '类型名称',
+          dataIndex: 'name',
         },
         {
-          title: "唯一编码",
-          dataIndex: "code",
+          title: '唯一编码',
+          dataIndex: 'code',
         },
         {
-          title: "排序",
-          dataIndex: "sort",
+          title: '排序',
+          dataIndex: 'sort',
         },
         {
-          title: "备注",
-          dataIndex: "remark",
+          title: '备注',
+          dataIndex: 'remark',
           width: 200,
         },
         {
-          title: "状态",
-          dataIndex: "status",
-          scopedSlots: { customRender: "status" },
-        },
-        {
-          title: "操作",
-          width: "150px",
-          dataIndex: "action",
-          scopedSlots: { customRender: "action" },
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' },
         },
       ],
-      statusDict: [],
+      codes: {
+        commonStatus: [],
+      },
     };
   },
   created() {
     this.onLoadCodes();
-  },
-  methods: {
-    statusFilter(status) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.statusDict.filter((item) => item.code == status);
-      if (values.length > 0) {
-        return values[0].value;
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth(/** ... */);
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
     }
   },
+  methods: {
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
+      return (
+        this.$api
+          /** !!此处必须修改调用的接口方法 */
           .sysDictTypePage({
             ...params,
             ...this.query,
           })
           .then((res) => {
-          console.log(params)
-          return res.data;
-        });
+            const data = res.data;
+            data.rows = data.rows.map(
+              (p) =>
+                (p = {
+                  ...p,
+                  data: [],
+                  query: {},
+                })
+            );
+            return data;
+          })
+      );
     },
 
     /**
@@ -161,6 +146,16 @@ export default {
       this.$refs.table.onReloadData(true);
     },
 
+    /**
+     * 有查询功能时的必要方法
+     * 重置查询条件
+     */
+    onResetQuery() {
+      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
+      this.query = {};
+      this.onQuery();
+    },
+
     /**
      * 必要方法
      * 重新列表数据
@@ -170,20 +165,22 @@ export default {
     },
 
     /**
-     * 加载字典数据时的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
      */
     onLoadCodes() {
-      this.$api
-        .$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
-        .then((res) => {
-          this.statusDict = res[0].data;
+      this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'common_status' })]).then(([commonStatus]) => {
+        this.codes.commonStatus = commonStatus.data;
       });
     },
 
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
     bindCodeValue(code, name) {
-      const c = this.codes
-        .find((p) => p.code == name)
-        .values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
@@ -191,39 +188,38 @@ export default {
     },
 
     /**
-     * 有编辑新增功能的必要方法
+     * 必要方法
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
       this.$refs[formName].onOpen(record);
     },
 
-    onLoad(formName,record){
-      this.$refs[formName].loadData(record);
-    },
-    onResult(success, message, successMessage) {
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
       if (success) {
         this.$message.success(successMessage);
         this.onReloadData();
-      } else {
-        this.$refs.table.onLoaded();
-        this.$message.error(message);
       }
     },
 
-    onSetDefault(record) {
-      this.$refs.table.onLoading();
-      this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
-        });
-    },
-
+    /**
+     * 必要方法
+     * 删除时调用
+     */
     onDelete(record) {
       this.$refs.table.onLoading();
-      this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
-        this.onResult(success, message, "删除成功");
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .sysDictTypeDelete(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
         });
     },
   },

Web/src/pages/system/log/oplog/detailsForm.vue

@@ -1,72 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    :width="1024"
-    @ok="onOk"
-    :footer="false"
-    title="日志详情"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    onOpen(record) {
-      this.visible = true;
-       this.$nextTick(() => {
-        this.$refs['form-body'].onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-    //   this.$refs['form-body'].onValidate((valid) => {
-    //     if (valid) {
-    //       this.confirmLoading = true;
-    //       this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
-    //         this.confirmLoading = false;
-    //         if (success) {
-    //           this.$message.success('编辑成功');
-    //           this.onCancel();
-    //           this.$emit('ok');
-    //         } else {
-    //           this.$message.error(message);
-    //         }
-    //       });
-    //     }
-    //   });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/log/oplog/form.vue

@@ -1,105 +0,0 @@
-<template>
-<a-form-model :model="form"  class="yo-form" ref="form">
-  <a-descriptions bordered>
-    <a-descriptions-item label="方法名称" :span="1">
-      {{form.methodName}}
-    </a-descriptions-item>
-    <a-descriptions-item label="地址" :span="2">
-      {{form.location}}
-    </a-descriptions-item>
-    <a-descriptions-item label="浏览器">
-      {{form.browser}}
-    </a-descriptions-item>
-    <a-descriptions-item label="操作系统" :span="2">
-      {{form.os}}
-    </a-descriptions-item>
-    <a-descriptions-item label="类名称" :span="3">
-      {{form.className}}
-    </a-descriptions-item>
-    <a-descriptions-item label="返回结果" :span="3">
-      {{form.result}}
-    </a-descriptions-item>
-      <a-descriptions-item label="请求参数" :span="3">
-      {{form.param}}
-    </a-descriptions-item>
-        <a-descriptions-item label="具体消息" :span="3">
-      {{form.message}}
-    </a-descriptions-item>
-  </a-descriptions>
-  </a-form-model> 
-  <!-- <a-form-model :model="form"  class="yo-form" ref="form">
-    <a-row :gutter="16">
-      <a-col :span="10">
-        <div class="yo-form-group">
-          <a-form-model-item label="方法名称" prop="methodName">
-            <a-input v-model="form.methodName" />
-          </a-form-model-item>
-          <a-form-model-item label="地址" prop="location">
-            <a-input v-model="form.location" />
-          </a-form-model-item>
-                    <a-form-model-item label="类名称" prop="className">
-            <a-textarea :rows="4" v-model="form.className" />
-          </a-form-model-item>
-          <a-form-model-item label="返回结果" prop="result">
-            <a-textarea :rows="4" v-model="form.result" />
-          </a-form-model-item>
-        </div>
-      </a-col>
-      <a-col :span="14">
-        <div class="yo-form-group">
-          <a-form-model-item label="浏览器" prop="browser">
-            <a-input v-model="form.browser" />
-          </a-form-model-item>
-          <a-form-model-item label="操作系统" prop="os">
-            <a-input v-model="form.os" />
-          </a-form-model-item>
-          <a-form-model-item label="请求参数" prop="param">
-            <a-textarea :rows="4" v-model="form.param" />
-          </a-form-model-item>
-          <a-form-model-item label="具体消息" prop="message">
-            <a-textarea :rows="4" v-model="form.message" />
-          </a-form-model-item>
-        </div>
-      </a-col>
-    </a-row>
-  </a-form-model> -->
-</template>
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        active: "N",
-      },
-    };
-  },
-  methods: {
-    /**
-     * 必要的方法
-     * 在打开编辑页时允许填充数据
-     */
-    onFillData(record) {
-      this.form = this.$_.cloneDeep(record);
-    },
-
-    /**
-     * 必要的方法
-     * 在外部窗口进行保存时调用表单验证
-     */
-    onValidate(callback) {
-      this.$refs.form.validate(callback);
-    },
-
-    /**
-     * 必要的方法
-     * 在外部窗口关闭或重置时对表单验证进行初始化
-     */
-    onResetFields() {
-      setTimeout(() => {
-        this.form = {};
-        this.$refs.form.resetFields();
-      }, 300);
-    },
-  },
-};
-</script>

Web/src/pages/system/log/oplog/index.vue

@@ -1,35 +1,59 @@
 <template>
   <container>
     <br />
-      <a-alert banner closable type="error">
-        <template slot="message">后端bug:任何操作的操作类型都是增加</template>
-      </a-alert>
-       <br />
-      <a-alert banner closable type="warning">
-        <template slot="message">详情的确认按钮没功能</template>
+    <a-alert closable type="error">
+      <template slot="message">
+        <div>后端bug:任何操作的操作类型都是增加</div>
+        <div>没有记录请求参数.返回结果等信息</div>
+      </template>
     </a-alert>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysApp:page">
+      <Auth auth="sysOpLog:page">
         <div class="yo-query-bar">
           <a-form-model :model="query" layout="inline">
-            <a-form-model-item label="角色名称">
-              <a-input placeholder="请输入角色名称" v-model="query.name" />
+            <a-form-model-item label="日志名称">
+              <a-input placeholder="请输入日志名称" v-model="query.name" />
             </a-form-model-item>
-            <a-form-model-item label="唯一编号">
-              <a-input placeholder="请输入唯一编码" v-model="query.code" />
+            <a-form-model-item label="操作类型">
+              <a-select
+                :style="{ width: '170px' }"
+                allow-clear
+                placeholder="请选择操作类型"
+                v-model="query.opType"
+              >
+                <a-select-option
+                  :key="item.code"
+                  :value="item.code"
+                  v-for="item in codes.opTypeDict"
+                >{{ item.value }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+            <a-form-model-item label="是否成功">
+              <a-select
+                :style="{ width: '170px' }"
+                allow-clear
+                placeholder="请选择是否成功"
+                v-model="query.success"
+              >
+                <a-select-option value="true">是</a-select-option>
+                <a-select-option value="false">否</a-select-option>
+              </a-select>
+            </a-form-model-item>
+            <a-form-model-item label="操作时间">
+              <a-range-picker
+                :show-time="{
+                      hideDisabledOptions: true,
+                      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+                    }"
+                format="YYYY-MM-DD HH:mm:ss"
+                v-model="query.dates"
+              />
             </a-form-model-item>
             <a-form-model-item>
               <a-button-group>
                 <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button
-                  @click="
-                    () => {
-                      (query = {}), onQuery();
-                    }
-                  "
-                  >重置</a-button
-                >
+                <a-button @click="() => { query = {}, onQuery() }">重置</a-button>
               </a-button-group>
             </a-form-model-item>
           </a-form-model>
@@ -37,126 +61,96 @@
       </Auth>
 
       <yo-table :columns="columns" :load-data="loadData" ref="table">
-        <div class="yo-action-bar" slot="title">
-          <Auth auth="sysApp:delete">
-            <div class="yo-action-bar--actions">
-              <a-popconfirm
-                @confirm="sysVisLogDelete()"
-                placement="topRight"
-                title="确认清空日志？"
-              >
+        <Auth auth="sysOpLog:delete" slot="operator">
+          <a-popconfirm @confirm="onOpLogClear" placement="bottomLeft" title="是否确认清空日志">
             <a-button>清空日志</a-button>
           </a-popconfirm>
-            </div>
         </Auth>
-        </div>
-        <span slot="opType" slot-scope="text">
-          {{ opTypeFilter(text) }}
-        </span>
-        <span slot="success" slot-scope="text">
-          {{ successFilter(text) }}
-        </span>
-        <span slot="action" slot-scope="text, record">
-          <yo-table-actions>
-            <a @click="onOpen('details-Form', record)">详情</a>
-          </yo-table-actions>
-        </span>
+        <span slot="opType" slot-scope="text">{{ bindCodeValue(text, 'opTypeDict') }}</span>
+        <span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
+        <a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
+          <a-descriptions-item :span="1" label="方法名称">{{ record.methodName }}</a-descriptions-item>
+          <a-descriptions-item :span="2" label="地址">{{ record.location }}</a-descriptions-item>
+          <a-descriptions-item label="浏览器">{{ record.browser }}</a-descriptions-item>
+          <a-descriptions-item :span="2" label="操作系统">{{ record.os }}</a-descriptions-item>
+          <a-descriptions-item :span="3" label="类名称">{{ record.className }}</a-descriptions-item>
+          <a-descriptions-item :span="3" label="返回结果">{{ record.result }}</a-descriptions-item>
+          <a-descriptions-item :span="3" label="请求参数">{{ record.param }}</a-descriptions-item>
+          <a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
+        </a-descriptions>
       </yo-table>
-      <details-Form ref="details-Form" />
     </a-card>
     <br />
   </container>
 </template>
 <script>
-import detailsForm from "./detailsForm";
+import moment from 'moment';
+
 export default {
-  components: {
-    detailsForm,
-  },
   data() {
     return {
       query: {},
       columns: [
         {
-          title: "日志名称",
-          dataIndex: "name",
+          title: '日志名称',
+          dataIndex: 'name',
         },
         {
-          title: "操作类型",
-          dataIndex: "opType",
-          scopedSlots: { customRender: "opType" },
+          title: '操作类型',
+          dataIndex: 'opType',
+          scopedSlots: { customRender: 'opType' },
         },
         {
-          title: "是否成功",
-          dataIndex: "success",
-          scopedSlots: { customRender: "success" },
+          title: '是否成功',
+          dataIndex: 'success',
+          scopedSlots: { customRender: 'success' },
         },
         {
-          title: "ip",
-          dataIndex: "ip",
+          title: 'ip',
+          dataIndex: 'ip',
         },
         {
-          title: "请求地址",
-          dataIndex: "url",
-          scopedSlots: { customRender: "url" },
+          title: '请求地址',
+          dataIndex: 'url',
+          scopedSlots: { customRender: 'url' },
         },
         {
-          title: "操作时间",
-          dataIndex: "opTime",
-          scopedSlots: { customRender: "opTime" },
+          title: '操作时间',
+          dataIndex: 'opTime',
+          scopedSlots: { customRender: 'opTime' },
         },
         {
-          title: "操作人",
-          dataIndex: "account",
-        },
-        {
-          title: "详情",
-          dataIndex: "action",
-          width: "150px",
-          scopedSlots: { customRender: "action" },
+          title: '操作人',
+          dataIndex: 'account',
         },
       ],
+      codes: {
         opTypeDict: [],
-      successDict: [],
+      },
     };
   },
   created() {
     this.onLoadCodes();
   },
   methods: {
-    opTypeFilter(result) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.opTypeDict.filter((item) => item.code == result);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
-    sysVisLogDelete() {
-      this.$api.sysOpLogDelete().then((res) => {
-        if (res.success) {
-          this.$message.success("清空成功");
-          this.onReloadData();
-        } else {
-          this.$message.error("清空失败：" + res.message);
-        }
-      });
-    },
-    successFilter(result) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.successDict.filter((item) => item.code == result);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
+    moment,
+
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
+      const query = this.$_.cloneDeep(this.query);
+      if (query.dates && query.dates.length) {
+        query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
+        query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
+        delete query.dates;
+      }
+
       return this.$api
         .sysOpLogPage({
           ...params,
-          ...this.query,
+          ...query,
         })
         .then((res) => {
           return res.data;
@@ -183,57 +177,32 @@ export default {
      * 加载字典数据时的必要方法
      */
     onLoadCodes() {
-      this.$api
-        .$queue([
-          this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
-          this.$api.sysDictTypeDropDownWait({ code: "op_type" }),
-        ])
-        .then(([yesOrNo, commonStatus]) => {
-          this.opTypeDict = commonStatus.data;
-          this.successDict = yesOrNo.data;
+      this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'op_type' })]).then(([commonStatus]) => {
+        this.codes.opTypeDict = commonStatus.data;
       });
     },
     bindCodeValue(code, name) {
-      const c = this.codes
-        .find((p) => p.code == name)
-        .values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
       return null;
     },
 
-    /**
-     * 有编辑新增功能的必要方法
-     * 从列表页调用窗口的打开方法
-     */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
-    },
-
-    onResult(success, message, successMessage) {
-      if (success) {
-        this.$message.success(successMessage);
-        this.onReloadData();
-      } else {
-        this.$refs.table.onLoaded();
-        this.$message.error(message);
-      }
-    },
-
-    onSetDefault(record) {
+    onOpLogClear() {
       this.$refs.table.onLoading();
       this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
-        });
-    },
-
-    onDelete(record) {
-      this.$refs.table.onLoading();
-      this.$api.sysRoleDel(record).then(({ success, message }) => {
-        this.onResult(success, message, "删除成功");
+        .sysOpLogDelete()
+        .then((res) => {
+          if (res.success) {
+            this.$message.success('清空成功');
+            this.onReloadData();
+          } else {
+            this.$message.error('清空失败：' + res.message);
+          }
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
         });
     },
   },

Web/src/pages/system/log/vislog/detailsForm.vue

@@ -1,72 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    @cancel="onCancel"
-    @ok="onOk"
-    class="yo-modal-form"
-    title="日志详情"
-    :footer="false"
-  >
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    onOpen(record) {
-      this.visible = true;
-       this.$nextTick(() => {
-        this.$refs['form-body'].onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-    //   this.$refs['form-body'].onValidate((valid) => {
-    //     if (valid) {
-    //       this.confirmLoading = true;
-    //       this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
-    //         this.confirmLoading = false;
-    //         if (success) {
-    //           this.$message.success('编辑成功');
-    //           this.onCancel();
-    //           this.$emit('ok');
-    //         } else {
-    //           this.$message.error(message);
-    //         }
-    //       });
-    //     }
-    //   });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

Web/src/pages/system/log/vislog/form.vue

@@ -1,46 +0,0 @@
-<template>
-  <a-form-model :model="form"  class="yo-form" ref="form">
-      <a-form-model-item label="具体消息" prop="message">
-         <a-textarea :rows="4" v-model="form.message" />
-      </a-form-model-item>
-  </a-form-model>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        active: 'N',
-      },
-    };
-  },
-  methods: {
-    /**
-     * 必要的方法
-     * 在打开编辑页时允许填充数据
-     */
-    onFillData(record) {
-      this.form = this.$_.cloneDeep(record);
-    },
-
-    /**
-     * 必要的方法
-     * 在外部窗口进行保存时调用表单验证
-     */
-    onValidate(callback) {
-      this.$refs.form.validate(callback);
-    },
-
-    /**
-     * 必要的方法
-     * 在外部窗口关闭或重置时对表单验证进行初始化
-     */
-    onResetFields() {
-      setTimeout(() => {
-        this.form = {};
-        this.$refs.form.resetFields();
-      }, 300);
-    },
-  },
-};
-</script>

Web/src/pages/system/log/vislog/index.vue

@@ -1,37 +1,56 @@
 <template>
   <container>
     <br />
-    <a-alert banner closable type="warning">
-      <template slot="message">详情的确认按钮没功能</template>
-    </a-alert>
-    <br />
-    <a-alert banner closable type="warning">
-      <template slot="message"
-        >页面刷新的时候也会有保存登录日志，但是没有ip显示</template
-      >
+    <a-alert closable type="error">
+      <template slot="message">页面刷新的时候也会有保存登录日志，但是没有ip显示</template>
     </a-alert>
     <br />
     <a-card :bordered="false">
-      <Auth auth="sysApp:page">
+      <Auth auth="sysVisLog:page">
         <div class="yo-query-bar">
           <a-form-model :model="query" layout="inline">
-            <a-form-model-item label="角色名称">
-              <a-input placeholder="请输入角色名称" v-model="query.name" />
+            <a-form-model-item label="日志名称">
+              <a-input placeholder="请输入日志名称" v-model="query.name" />
             </a-form-model-item>
-            <a-form-model-item label="唯一编号">
-              <a-input placeholder="请输入唯一编码" v-model="query.code" />
+            <a-form-model-item label="访问类型">
+              <a-select
+                :style="{ width: '170px' }"
+                allow-clear
+                placeholder="请选择访问类型"
+                v-model="query.visType"
+              >
+                <a-select-option
+                  :key="item.code"
+                  :value="item.code"
+                  v-for="item in codes.visTypeDict"
+                >{{ item.value }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+            <a-form-model-item label="是否成功">
+              <a-select
+                :style="{ width: '170px' }"
+                allow-clear
+                placeholder="请选择是否成功"
+                v-model="query.success"
+              >
+                <a-select-option value="true">是</a-select-option>
+                <a-select-option value="false">否</a-select-option>
+              </a-select>
+            </a-form-model-item>
+            <a-form-model-item label="操作时间">
+              <a-range-picker
+                :show-time="{
+                      hideDisabledOptions: true,
+                      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+                    }"
+                format="YYYY-MM-DD HH:mm:ss"
+                v-model="query.dates"
+              />
             </a-form-model-item>
             <a-form-model-item>
               <a-button-group>
                 <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button
-                  @click="
-                    () => {
-                      (query = {}), onQuery();
-                    }
-                  "
-                  >重置</a-button
-                >
+                <a-button @click="() => {query = {}, onQuery()}">重置</a-button>
               </a-button-group>
             </a-form-model-item>
           </a-form-model>
@@ -39,127 +58,91 @@
       </Auth>
 
       <yo-table :columns="columns" :load-data="loadData" ref="table">
-        <div class="yo-action-bar" slot="title">
-          <Auth auth="sysApp:delete">
+        <Auth auth="sysVisLog:delete" slot="operator">
           <div class="yo-action-bar--actions">
-              <a-popconfirm
-                @confirm="sysVisLogDelete()"
-                placement="topRight"
-                title="确认清空日志？"
-              >
+            <a-popconfirm @confirm="onVisLogClear" placement="bottomLeft" title="是否确认清空日志">
               <a-button>清空日志</a-button>
             </a-popconfirm>
           </div>
         </Auth>
-        </div>
-        <span slot="visType" slot-scope="text">
-          {{ visTypeFilter(text) }}
-        </span>
-        <span slot="success" slot-scope="text">
-          {{ successFilter(text) }}
-        </span>
-        <span slot="action" slot-scope="text, record">
-          <span slot="action" >
-            <a @click="onOpen('details-Form', record)">详情</a>
-          </span>
-        </span>
+        <span slot="visType" slot-scope="text">{{ bindCodeValue(text, 'visTypeDict') }}</span>
+        <span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
+        <a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
+          <a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
+        </a-descriptions>
       </yo-table>
-      <details-Form ref="details-Form" />
     </a-card>
     <br />
   </container>
 </template>
 <script>
-import detailsForm from "./detailsForm";
+import moment from 'moment';
+
 export default {
-  components: {
-    detailsForm,
-  },
   data() {
     return {
       query: {},
       columns: [
         {
-          title: "日志名称",
-          dataIndex: "name",
+          title: '日志名称',
+          dataIndex: 'name',
         },
         {
-          title: "访问类型",
-          dataIndex: "visType",
-          scopedSlots: { customRender: "visType" },
+          title: '访问类型',
+          dataIndex: 'visType',
+          scopedSlots: { customRender: 'visType' },
         },
         {
-          title: "是否成功",
-          dataIndex: "success",
-          scopedSlots: { customRender: "success" },
+          title: '是否成功',
+          dataIndex: 'success',
+          scopedSlots: { customRender: 'success' },
         },
         {
-          title: "ip",
-          dataIndex: "ip",
+          title: 'ip',
+          dataIndex: 'ip',
         },
         {
-          title: "浏览器",
-          dataIndex: "browser",
+          title: '浏览器',
+          dataIndex: 'browser',
         },
         {
-          title: "访问时间",
-          dataIndex: "visTime",
-          scopedSlots: { customRender: "visTime" },
+          title: '访问时间',
+          dataIndex: 'visTime',
+          scopedSlots: { customRender: 'visTime' },
         },
         {
-          title: "访问人",
-          dataIndex: "account",
-        },
-        {
-          title: "详情",
-          width: "200px",
-          dataIndex: "action",
-          scopedSlots: {
-            customRender: "action",
-          },
+          title: '访问人',
+          dataIndex: 'account',
         },
       ],
+
+      codes: {
         visTypeDict: [],
-      successDict: [],
+      },
     };
   },
   created() {
     this.onLoadCodes();
   },
   methods: {
-    visTypeFilter(result) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.visTypeDict.filter((item) => item.code == result);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
-    sysVisLogDelete() {
-      this.$api.sysVisLogDelete().then((res) => {
-        if (res.success) {
-          this.$message.success("清空成功");
-          this.onReloadData();
-        } else {
-          this.$message.error("清空失败：" + res.message);
-        }
-      });
-    },
-    successFilter(result) {
-      // eslint-disable-next-line eqeqeq
-      const values = this.successDict.filter((item) => item.code == result);
-      if (values.length > 0) {
-        return values[0].value;
-      }
-    },
+    moment,
+
     /**
      * 必要的方法
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
+      const query = this.$_.cloneDeep(this.query);
+      if (query.dates && query.dates.length) {
+        query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
+        query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
+        delete query.dates;
+      }
+
       return this.$api
         .sysVisLogPage({
           ...params,
-          ...this.query,
+          ...query,
         })
         .then((res) => {
           return res.data;
@@ -186,57 +169,32 @@ export default {
      * 加载字典数据时的必要方法
      */
     onLoadCodes() {
-      this.$api
-        .$queue([
-          this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
-          this.$api.sysDictTypeDropDownWait({ code: "vis_type" }),
-        ])
-        .then(([yesOrNo, commonStatus]) => {
-          this.visTypeDict = commonStatus.data;
-          this.successDict = yesOrNo.data;
+      this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'vis_type' })]).then(([commonStatus]) => {
+        this.codes.visTypeDict = commonStatus.data;
       });
     },
     bindCodeValue(code, name) {
-      const c = this.codes
-        .find((p) => p.code == name)
-        .values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
       return null;
     },
 
-    /**
-     * 有编辑新增功能的必要方法
-     * 从列表页调用窗口的打开方法
-     */
-    onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
-    },
-
-    onResult(success, message, successMessage) {
-      if (success) {
-        this.$message.success(successMessage);
-        this.onReloadData();
-      } else {
-        this.$refs.table.onLoaded();
-        this.$message.error(message);
-      }
-    },
-
-    onSetDefault(record) {
+    onVisLogClear() {
       this.$refs.table.onLoading();
       this.$api
-        .sysAppSetAsDefault({ id: record.id })
-        .then(({ success, message }) => {
-          this.onResult(success, message, "设置成功");
-        });
-    },
-
-    onDelete(record) {
-      this.$refs.table.onLoading();
-      this.$api.sysRoleDel(record).then(({ success, message }) => {
-        this.onResult(success, message, "删除成功");
+        .sysVisLogDelete()
+        .then((res) => {
+          if (res.success) {
+            this.$message.success('清空成功');
+            this.onReloadData();
+          } else {
+            this.$message.error('清空失败：' + res.message);
+          }
+        })
+        .finally(() => {
+          this.$refs.table.onLoaded();
         });
     },
   },

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

@@ -0,0 +1,93 @@
+<template>
+  <container>
+    <br />
+    <Auth auth="sysMachine:query">
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-card :bordered="false" :loading="loading" style="margin-bottom: 20px" title="系统信息">
+            <template>
+              <a-descriptions bordered>
+                <a-descriptions-item :span="3" label="主机名称：">{{ machineBaseInfo.hostName }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="操作系统：">{{ machineBaseInfo.systemOs }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="系统架构：">{{ machineBaseInfo.osArchitecture }}</a-descriptions-item>
+                <a-descriptions-item
+                  :span="3"
+                  label="运行框架："
+                >{{ machineBaseInfo.frameworkDescription }}</a-descriptions-item>
+                <a-descriptions-item label="CPU核数:">{{ machineBaseInfo.processorCount }}</a-descriptions-item>
+              </a-descriptions>
+            </template>
+          </a-card>
+        </a-col>
+        <a-col :md="12" :sm="24">
+          <a-card :bordered="false" :loading="loading" style="margin-bottom: 20px" title="网络信息">
+            <template>
+              <a-descriptions bordered>
+                <a-descriptions-item
+                  :span="3"
+                  label="外网信息："
+                  style="ant-descriptions-item-label ant-descriptions-item-colon"
+                >{{ machineBaseInfo.wanIp }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="IPv4地址：">{{ machineBaseInfo.lanIp }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="网卡MAC：">{{ machineBaseInfo.ipMac }}</a-descriptions-item>
+                <a-descriptions-item
+                  :span="3"
+                  label="流量统计："
+                >{{ machineNetworkInfo.sendAndReceived }}</a-descriptions-item>
+                <a-descriptions-item label="网络速度：:">{{ machineNetworkInfo.networkSpeed }}</a-descriptions-item>
+              </a-descriptions>
+            </template>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-card :bordered="false" :loading="loading" title="其他信息">
+        <template>
+          <a-descriptions bordered>
+            <a-descriptions-item :span="3" label="运行时间：">{{ machineUseInfo.runTime }}</a-descriptions-item>
+            <a-descriptions-item :span="3" label="CPU使用率：">{{ machineUseInfo.cpuRate }}</a-descriptions-item>
+            <a-descriptions-item :span="3" label="总内存：">{{ machineUseInfo.totalRam }}</a-descriptions-item>
+            <a-descriptions-item :span="2" label="内存使用率：">{{ machineUseInfo.ramRate }}</a-descriptions-item>
+          </a-descriptions>
+        </template>
+      </a-card>
+    </Auth>
+  </container>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      machineBaseInfo: [],
+      machineUseInfo: [],
+      machineNetworkInfo: [],
+    };
+  },
+  created() {
+    this.loading = true;
+    this.onLoadCodes();
+  },
+  methods: {
+    //加载系统信息，网络信息，其他信息
+    onLoadCodes() {
+      this.$api
+        .$queue([this.$api.sysMachineBase(), this.$api.sysMachineUse(), this.$api.sysMachineNetwork()])
+        .then(([MachineBase, MachineUseInfo, MachineNetwork]) => {
+          this.machineBaseInfo = MachineBase;
+          this.machineUseInfo = MachineUseInfo;
+          this.machineNetworkInfo = MachineNetwork;
+          this.loading = false;
+        });
+    },
+    refreshData() {
+      this.onLoadCodes();
+    },
+  },
+  mounted() {
+    this.timer = setInterval(this.refreshData, 3000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+};
+</script>

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

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

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

@@ -3,14 +3,15 @@
     <a-spin :spinning="loading">
       <a-icon slot="indicator" spin type="loading" />
       <div class="yo-form-group">
-        <a-form-model-item has-feedback label="机构名称" prop="name">
+        <a-form-model-item label="机构名称" prop="name">
           <a-input placeholder="请输入机构名称" v-model="form.name" />
         </a-form-model-item>
-        <a-form-model-item has-feedback label="唯一编码" prop="code">
+        <a-form-model-item label="唯一编码" prop="code">
           <a-input placeholder="请输入唯一编码" v-model="form.code" />
         </a-form-model-item>
-        <a-form-model-item has-feedback label="上级机构" prop="pid">
+        <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>
@@ -34,10 +35,15 @@
   </a-form-model>
 </template>
 <script>
+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: '请输入唯一编码' }],
@@ -54,8 +60,12 @@ export default {
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
+    onFillData(record, orgId) {
+      if (orgId) {
+        this.form.pid = orgId;
+      } else if (record) {
         this.form = this.$_.cloneDeep(record);
+      }
     },
 
     /**
@@ -78,18 +88,23 @@ export default {
 
     async onInit() {
       this.loading = true;
-      this.orgData = await this.onLoadOrgData();
+      await this.onLoadOrgData();
       this.loading = false;
     },
 
     onLoadOrgData() {
       return this.$api.getOrgTree().then(({ data }) => {
-        return data;
-      });
+        this.orgData = [
+          {
+            id: EMPTY_ID,
+            parentId: undefined,
+            title: '顶级',
+            value: EMPTY_ID,
+            pid: undefined,
+            children: data,
           },
-
-    onChangeExtData(value, record, type) {
-      record[type] = value;
+        ];
+      });
     },
   },
 };

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({
-          sysEmpParam: {
-            orgId: id,
-          },
-        });
+        this.formBody.onFillData(record, 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) {
-      const form = this.$_.cloneDeep(record);
+    onFillData(record, orgId) {
+      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">
@@ -80,12 +75,13 @@
             <a-list-item-meta>
               <div slot="title">{{ record.nickName || record.name }}</div>
               <div slot="description">{{ record.account }}</div>
-              <a-avatar
+              <yo-image
+                :id="record.avatar"
                 :size="48"
-                :src="`${previewUrl}?id=${record.avatar}`"
                 icon="user"
                 shape="square"
                 slot="avatar"
+                type="avatar"
               />
             </a-list-item-meta>
             <div class="yo-list-content--h">
@@ -120,8 +116,6 @@
   </yo-tree-layout>
 </template>
 <script>
-import { PERVIEW_URL } from '@/util/global';
-
 import YoTreeLayout from '@/components/yoTreeLayout';
 import YoList from '@/components/yoList';
 
@@ -153,8 +147,6 @@ export default {
           values: [],
         },
       ],
-
-      previewUrl: PERVIEW_URL,
     };
   },
 

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

@@ -1,3 +1,116 @@
 <template>
-  <div></div>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="授权额外数据"
+  >
+    <a-form-model class="yo-form" ref="form">
+      <a-spin :spinning="loading">
+        <a-icon slot="indicator" spin type="loading" />
+        <div class="yo-form-group">
+          <a-form-model-item class="yo-form--fluid">
+            <a-tree-select
+              :show-checked-strategy="SHOW_PARENT"
+              :tree-data="orgList"
+              placeholder="请选择机构"
+              search-placeholder="请检索"
+              tree-checkable
+              v-model="orgs"
+            />
+          </a-form-model-item>
+        </div>
+      </a-spin>
+    </a-form-model>
+  </a-modal>
 </template>
+<script>
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+
+export default {
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+
+      loading: false,
+
+      id: '',
+      orgs: [],
+      orgList: [],
+      SHOW_PARENT,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen(record) {
+      this.visible = true;
+      this.id = record.id;
+      this.$nextTick(() => {
+        this.onInit();
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.confirmLoading = true;
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .sysUserGrantData({
+          id: this.id,
+          grantOrgIdList: this.orgs,
+        })
+        .then(({ success }) => {
+          if (success) {
+            this.$message.success('授权成功');
+            this.onCancel();
+            this.$emit('ok');
+          }
+        })
+        .finally(() => {
+          this.confirmLoading = false;
+        });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.visible = false;
+      setTimeout(() => {
+        this.orgs = [];
+      }, 300);
+    },
+
+    async onInit() {
+      this.loading = true;
+      this.orgList = await this.onLoadOrgList();
+      this.orgs = await this.onLoadOrg();
+      this.loading = false;
+    },
+
+    onLoadOrgList() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onLoadOrg() {
+      return this.$api.sysUserOwnData({ id: this.id }).then(({ data }) => {
+        return data;
+      });
+    },
+  },
+};
+</script>

Web/src/util/file/index.js

@@ -0,0 +1,85 @@
+const _getFileTypeByBase64 = (base64) => {
+    let arr = base64.split(','),
+        fileType = arr[0].match(/:(.*?);/)[1]
+    return fileType
+}
+
+/**
+ * ArrayBuffer转Base64
+ * @param {*} arrayBuffer 
+ * @returns 
+ */
+export const ArrayBufferToBase64 = async (arrayBuffer) => {
+    const blob = ArrayBufferToBlob(arrayBuffer)
+    const base64 = await BlobToBase64(blob)
+    return base64
+}
+
+/**
+ * ArrayBuffer转Blob
+ * @param {*} arrayBuffer 
+ * @returns 
+ */
+export const ArrayBufferToBlob = (arrayBuffer) => {
+    return new Blob([arrayBuffer])
+}
+
+/**
+ * Base64转Blob
+ * @param {*} base64 
+ * @returns 
+ */
+export const Base64ToBlob = (base64) => {
+    let arr = base64.split(','),
+        fileType = _getFileTypeByBase64(base64),
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n)
+
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new Blob([u8arr], { type: fileType })
+}
+
+/**
+ * Blob转文件
+ * @param {*} blob 
+ * @param {*} fileName 
+ * @param {*} fileType 
+ * @returns 
+ */
+export const BlobToFile = (blob, fileName, fileType) => {
+    blob.lastModifiedDate = new Date()
+    blob.name = fileName
+    const file = new File([blob], fileName, { type: fileType })
+    return file
+}
+
+/**
+ * Base64转文件
+ * @param {*} base64 
+ * @param {*} fileName 
+ * @returns 
+ */
+export const Base64ToFile = (base64, fileName) => {
+    const blob = Base64ToBlob(base64)
+    const fileType = _getFileTypeByBase64(base64)
+    const file = BlobToFile(blob, fileName, fileType)
+    return file
+}
+
+/**
+ * Blob转Base64
+ * @param {*} blob 
+ * @returns 
+ */
+export const BlobToBase64 = async (blob) => {
+    return new Promise(resolve => {
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = (e) => {
+            resolve(e.target.result)
+        }
+    })
+}

Web/src/views/main/_layout/header/user.js

@@ -52,11 +52,9 @@ export default {
             <div onMouseenter={this.onOpen} onMouseleave={this.onClose} class="user-container" >
                 <div class="user-container-inner">
                     <div class="user--base">
-                        <a-avatar
-                            src={this.$root.global.info && (`${PERVIEW_URL}?id=${this.$root.global.info.avatar}`)}
-                            class="user--avatar"
-                            icon="user"
-                        />
+                        {
+                            this.$root.global.info && <yo-image width="32" type="avatar" class="user--avatar" icon="user" id={this.$root.global.info.avatar} />
+                        }
                         {
                             this.$root.global.info &&
                             <span

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,8 +9,9 @@
       <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>
+        <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
@@ -20,9 +21,10 @@
                   mode="inline"
                 />
               </a-spin>
-          </swiper-slide>
-          <div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
-        </swiper>
+            </div>
+          </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);
-        timer = setTimeout(() => {
-          if (this.$refs['sider-swiper']) {
-            this.$refs['sider-swiper'].$swiper.update();
-          }
-        }, 300);
+        this.onUpdateSwiper();
       }
     });
   },
   methods: {
+    onUpdateSwiper() {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        // 需要更新两次
+        swiper.update();
+        swiper.update();
+      }, 300);
+    },
+
     onMenuOpenChange() {
-      this.windowTriggerResize();
+      this.onUpdateSwiper();
     },
 
     onCollapse() {
-      this.windowTriggerResize();
+      this.onUpdateSwiper();
     },
 
     windowTriggerResize() {