chore: merge branch 'main' of github.com:anncwb/vue-vben-admin into main

CHANGELOG.en_US.md

@@ -1,3 +1,18 @@
+## 2.5.1(2021-06-26)
+
+### ⚡ Performance Improvements
+
+- Upgrade `vue` and `ant-design-vue` versions to solve compatibility issues
+- **Tree** Performance optimization
+
+### 🐛 Bug Fixes
+
+- **Table** Fix page jitter problem
+- **Upload** Make sure to carry custom parameters
+- **Dropdown** Fix the icon display problem of popConfirm
+- **Table** Fix the problem that the editing event of the tree table is abnormal
+- **Table** Fix the problem that when the table data is empty, the value returned by getDataSource is not the data source used by the table
+
 ## 2.5.0(2021-06-20)
 
 ## (Breaking changes) Breaking changes

CHANGELOG.zh_CN.md

@@ -1,10 +1,17 @@
-## Wip
+## 2.5.1(2021-06-26)
+
+### ⚡ Performance Improvements
+
+- 升级`vue`与`ant-design-vue`版本，解决兼容问题
+- **Tree** 性能优化
 
 ### 🐛 Bug Fixes
 
 - **Table** 修复分页抖动问题
 - **Upload** 确保携带自定义参数
 - **Dropdown** 修复 popConfirm 的图标显示问题
+- **Table** 修复树形表格的编辑事件不正常的问题
+- **Table** 修复当表格数据为空时，getDataSource 返回的值不是表格所使用的数据源的问题
 
 ## 2.5.0(2021-06-20)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vben-admin",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "author": {
     "name": "vben",
     "email": "anncwb@126.com",
@@ -37,7 +37,7 @@
     "@iconify/iconify": "^2.0.2",
     "@vueuse/core": "^5.0.3",
     "@zxcvbn-ts/core": "^0.3.0",
-    "ant-design-vue": "2.1.6",
+    "ant-design-vue": "2.2.0-beta.6",
     "axios": "^0.21.1",
     "crypto-js": "^4.0.0",
     "echarts": "^5.1.2",
@@ -48,7 +48,7 @@
     "pinia": "2.0.0-beta.3",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
-    "vue": "3.0.11",
+    "vue": "3.1.2",
     "vue-i18n": "9.1.6",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.10",
@@ -77,7 +77,7 @@
     "@vitejs/plugin-legacy": "^1.4.2",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.5",
-    "@vue/compiler-sfc": "3.0.11",
+    "@vue/compiler-sfc": "3.1.2",
     "@vue/test-utils": "^2.0.0-rc.9",
     "autoprefixer": "^10.2.6",
     "commitizen": "^4.2.4",
@@ -89,7 +89,7 @@
     "eslint-define-config": "^1.0.8",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.11.1",
+    "eslint-plugin-vue": "^7.12.1",
     "esno": "^0.7.3",
     "fs-extra": "^10.0.0",
     "http-server": "^0.12.3",
@@ -120,16 +120,16 @@
     "vite-plugin-mock": "^2.8.0",
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-pwa": "^0.8.1",
-    "vite-plugin-style-import": "^1.0.0",
-    "vite-plugin-svg-icons": "^0.7.1",
+    "vite-plugin-style-import": "^1.0.1",
+    "vite-plugin-svg-icons": "^1.0.0",
     "vite-plugin-theme": "^0.8.1",
     "vue-eslint-parser": "^7.6.0",
     "vue-tsc": "^0.2.0"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "^2.52.2"
+    "rollup": "^2.52.3"
   },
   "repository": {
     "type": "git",

src/components/Form/src/hooks/useAdvanced.ts

@@ -51,12 +51,7 @@ export default function ({
   const debounceUpdateAdvanced = useDebounceFn(updateAdvanced, 30);
 
   watch(
-    [
-      // TODO
-      // () => unref(getSchema),
-      () => advanceState.isAdvanced,
-      () => unref(realWidthRef),
-    ],
+    [() => unref(getSchema), () => advanceState.isAdvanced, () => unref(realWidthRef)],
     () => {
       const { showAdvancedButton } = unref(getProps);
       if (showAdvancedButton) {

src/components/Menu/src/components/BasicMenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuItem>
+  <MenuItem :key="item.path">
     <!-- <MenuItem :class="getLevelClass"> -->
     <MenuItemContent v-bind="$props" :item="item" />
   </MenuItem>

src/components/Menu/src/components/BasicSubMenuItem.vue

@@ -3,6 +3,7 @@
   <SubMenu
     v-if="menuHasChildren(item) && getShowMenu"
     :class="[theme]"
+    :key="`submenu-${item.path}`"
     popupClassName="app-top-menu-popup"
   >
     <template #title>
@@ -16,7 +17,6 @@
 </template>
 <script lang="ts">
   import type { Menu as MenuType } from '/@/router/types';
-
   import { defineComponent, computed } from 'vue';
   import { Menu } from 'ant-design-vue';
   import { useDesign } from '/@/hooks/web/useDesign';

src/components/Menu/src/components/MenuItemContent.vue

@@ -1,6 +1,6 @@
 <template>
   <span :class="`${prefixCls}- flex items-center `">
-    <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon`" />
+    <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
     {{ getI18nName }}
   </span>
 </template>

src/components/Table/src/components/editable/EditableCell.vue

@@ -44,6 +44,7 @@
   import { propTypes } from '/@/utils/propTypes';
   import { isString, isBoolean, isFunction, isNumber, isArray } from '/@/utils/is';
   import { createPlaceholderMessage } from './helper';
+  import { set } from 'lodash-es';
 
   export default defineComponent({
     name: 'EditableCell',
@@ -227,14 +228,16 @@
           if (!isPass) return false;
         }
 
-        const { column, index } = props;
+        const { column, index, record } = props;
+        if (!record) return false;
         const { key, dataIndex } = column;
         const value = unref(currentValueRef);
         if (!key || !dataIndex) return;
 
         const dataKey = (dataIndex || key) as string;
 
-        const record = await table.updateTableData(index, dataKey, value);
+        set(record, dataKey, value);
+        //const record = await table.updateTableData(index, dataKey, value);
         needEmit && table.emit?.('edit-end', { record, index, key, value });
         isEdit.value = false;
       }

src/components/Table/src/hooks/useDataSource.ts

@@ -113,7 +113,7 @@ export function useDataSource(
   const getDataSourceRef = computed(() => {
     const dataSource = unref(dataSourceRef);
     if (!dataSource || dataSource.length === 0) {
-      return [];
+      return unref(dataSourceRef);
     }
     if (unref(getAutoCreateKey)) {
       const firstItem = dataSource[0];

src/components/Tree/src/typing.ts

@@ -31,6 +31,7 @@ export interface TreeActionType {
   getCheckedKeys: () => CheckKeys;
   filterByLevel: (level: number) => void;
   insertNodeByKey: (opt: InsertNodeParams) => void;
+  insertNodesByKey: (opt: InsertNodeParams) => void;
   deleteNodeByKey: (key: string) => void;
   updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
 }

src/components/Tree/src/useTree.ts

@@ -87,11 +87,39 @@ export function useTree(
       if (treeItem[keyField] === parentKey) {
         treeItem[childrenField] = treeItem[childrenField] || [];
         treeItem[childrenField][push](node);
+        return true;
       }
     });
     treeDataRef.value = treeData;
   }
+  /**
+   * 批量添加节点
+   */
+  function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
+    const treeData: any = cloneDeep(unref(treeDataRef));
+    if (!list || list.length < 1) {
+      return;
+    }
+    if (!parentKey) {
+      for (let i = 0; i < list.length; i++) {
+        treeData[push](list[i]);
+      }
+    } else {
+      const { key: keyField, children: childrenField } = unref(getReplaceFields);
+      if (!childrenField || !keyField) return;
 
+      forEach(treeData, (treeItem) => {
+        if (treeItem[keyField] === parentKey) {
+          treeItem[childrenField] = treeItem[childrenField] || [];
+          for (let i = 0; i < list.length; i++) {
+            treeItem[childrenField][push](list[i]);
+          }
+          treeDataRef.value = treeData;
+          return true;
+        }
+      });
+    }
+  }
   // Delete node
   function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
     if (!key) return;
@@ -111,5 +139,12 @@ export function useTree(
       }
     }
   }
-  return { deleteNodeByKey, insertNodeByKey, filterByLevel, updateNodeByKey, getAllKeys };
+  return {
+    deleteNodeByKey,
+    insertNodeByKey,
+    insertNodesByKey,
+    filterByLevel,
+    updateNodeByKey,
+    getAllKeys,
+  };
 }

src/hooks/web/usePermission.ts

@@ -75,9 +75,9 @@ export function usePermission() {
       if (!value) {
         return def;
       }
-      const allCodeList = permissionStore.getPermCodeList;
+      const allCodeList = permissionStore.getPermCodeList as string[];
       if (!isArray(value)) {
-        return allCodeList.includes(value as string);
+        return allCodeList.includes(value);
       }
       return (intersection(value, allCodeList) as string[]).length > 0;
     }

src/hooks/web/useWatermark.ts

@@ -2,7 +2,9 @@ import { getCurrentInstance, onBeforeUnmount, ref, Ref, unref } from 'vue';
 
 const domSymbol = Symbol('watermark-dom');
 
-export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.body)) {
+export function useWatermark(
+  appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>
+) {
   let func: Fn = () => {};
   const id = domSymbol.toString();
   const clear = () => {

src/locales/lang/en/routes/demo.ts

@@ -163,7 +163,7 @@ export default {
     moduleName: 'System management',
 
     account: 'Account management',
-
+    account_detail: 'Account detail',
     password: 'Change password',
 
     dept: 'Department management',

src/locales/lang/zh_CN/routes/demo.ts

@@ -157,6 +157,7 @@ export default {
   system: {
     moduleName: '系统管理',
     account: '账号管理',
+    account_detail: '账号详情',
     password: '修改密码',
     dept: '部门管理',
     menu: '菜单管理',

src/utils/helper/treeHelper.ts

@@ -147,7 +147,10 @@ export function forEach<T = any>(
   const list: any[] = [...tree];
   const { children } = config;
   for (let i = 0; i < list.length; i++) {
-    func(list[i]);
+    //func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+    if (func(list[i])) {
+      return;
+    }
     children && list[i][children] && list.splice(i + 1, 0, ...list[i][children]);
   }
 }

tsconfig.json

@@ -39,5 +39,5 @@
     "mock/**/*.ts",
     "vite.config.ts"
   ],
-  "exclude": ["node_modules", "dist", "**/*.js"]
+  "exclude": ["node_modules", "tests/server/**/*.ts", "dist", "**/*.js"]
 }

types/axios.d.ts

@@ -5,9 +5,10 @@ export interface RequestOptions {
   joinParamsToUrl?: boolean;
   // Format request parameter time
   formatDate?: boolean;
-  //  Whether to process the request result
+  // Whether to process the request result
   isTransformResponse?: boolean;
-  // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+  // Whether to return native response headers
+  // For example: use this attribute when you need to get the response headers
   isReturnNativeResponse?: boolean;
   // Whether to join url
   joinPrefix?: boolean;