fix(table): 修复未使用useTable时候组件报错问题

vbenjs · Aug 2, 2020 · 5b2399c · 5b2399c
1 parent 5bbfc7f
commit 5b2399c
Show file tree

Hide file tree

Showing 20 changed files with 199 additions and 103 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,34 @@
-## [1.0.4](https://github.com/anncwb/vue-vben-admin/compare/1.0.3...1.0.4) (2020-07-28)
+## [1.0.4](https://github.com/anncwb/vue-vben-admin/compare/1.0.3...1.0.4) (2020-07-31)
+
+### ⚡ Performance Improvements
+
+- 整体优化，加快页面切换速度 ([5ffaaaa](https://github.com/anncwb/vue-vben-admin/commit/5ffaaaa)) by: **陈文彬** (anncwb@126.com)
+
+### ✨ Features
+
+- **verify:** add verify component ([8e8a00a](https://github.com/anncwb/vue-vben-admin/commit/8e8a00a)) by: **陈文彬** (anncwb@126.com)
 
 ### 🎫 Chores
 
+- **deps:** update dep ([6753cb1](https://github.com/anncwb/vue-vben-admin/commit/6753cb1)) by: **陈文彬** (anncwb@126.com)
 - update deps ([33adcb1](https://github.com/anncwb/vue-vben-admin/commit/33adcb1)) by: **陈文彬** (anncwb@126.com)
+- update readme.md ([ca30c66](https://github.com/anncwb/vue-vben-admin/commit/ca30c66)) by: **陈文彬** (anncwb@126.com)
+
+### 🐛 Bug Fixes
+
+- **ci:** fix the problem that git does not exist during dev and build ([ab3ef33](https://github.com/anncwb/vue-vben-admin/commit/ab3ef33)) by: **陈文彬** (anncwb@126.com)
+- **components:** add download example ([f9abfc7](https://github.com/anncwb/vue-vben-admin/commit/f9abfc7)) by: **jq** (1151176506@qq.com)
+- **components:** tinymce add showUploadImage props ([c05cab1](https://github.com/anncwb/vue-vben-admin/commit/c05cab1)) by: **jq** (1151176506@qq.com)
+- **components:** upload add action props and preview function ([ee61193](https://github.com/anncwb/vue-vben-admin/commit/ee61193)) by: **jq** (1151176506@qq.com)
+- **tinymce:** change tab input debug ([2e3f5d4](https://github.com/anncwb/vue-vben-admin/commit/2e3f5d4)) by: **jq** (1151176506@qq.com)
+- **upload:** update preview ([4a90588](https://github.com/anncwb/vue-vben-admin/commit/4a90588)) by: **jq** (1151176506@qq.com)
+- **upload:** update style ([54b1add](https://github.com/anncwb/vue-vben-admin/commit/54b1add)) by: **jq** (1151176506@qq.com)
+
+### 🔧 Continuous Integration
+
+- add ls-lint ([1c17bfb](https://github.com/anncwb/vue-vben-admin/commit/1c17bfb)) by: **陈文彬** (anncwb@126.com)
+- perf changelog ([3cb6eda](https://github.com/anncwb/vue-vben-admin/commit/3cb6eda)) by: **陈文彬** (anncwb@126.com)
+- update npm-hook ([4c1fc0b](https://github.com/anncwb/vue-vben-admin/commit/4c1fc0b)) by: **jq** (1151176506@qq.com)
 
 ## [1.0.3](https://github.com/anncwb/vue-vben-admin/compare/24cea92...1.0.3) (2020-07-28)
 

diff --git a/build/npm-hook/preserve.js b/build/npm-hook/preserve.js
@@ -34,7 +34,8 @@ checkPkgUpdate();
     );
     try {
       // 从代码执行貌似不会自动读取.npmrc 所以手动加上源地址
-      await run('yarn install --registry=https://registry.npm.taobao.org ', {
+      // await run('yarn install --registry=https://registry.npm.taobao.org ', {
+      await run('yarn install ', {
         async: true,
         stdio: 'inherit',
       });

diff --git a/config/vue/optimization.js b/config/vue/optimization.js
@@ -104,9 +104,13 @@ function configOptimization(config) {
             packageName = 'design';
           } else if (
             packageName.indexOf('echarts') !== -1 ||
+            packageName.indexOf('zrender') !== -1 ||
+            packageName.indexOf('apexcharts') !== -1 ||
             packageName.indexOf('vue-baidu-map') !== -1
           ) {
             packageName = 'chart';
+          } else if (packageName.indexOf('xlsx') !== -1) {
+            packageName = 'xlsx';
           }
           // else {
           //   packageName = 'vendor';

diff --git a/package.json b/package.json
@@ -111,7 +111,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
-    "fork-ts-checker-webpack-plugin": "^5.0.11",
+    "fork-ts-checker-webpack-plugin": "^5.0.13",
     "glob": "^7.1.6",
     "hard-source-webpack-plugin": "^0.13.1",
     "html-webpack-harddisk-plugin": "^1.0.1",
@@ -148,7 +148,7 @@
     "webpack-merge": "^5.0.9",
     "webpack-theme-color-replacer": "^1.3.14",
     "webpackbar": "^4.0.0",
-    "worker-loader": "^2.0.0",
+    "worker-loader": "^3.0.0",
     "yargs": "^15.4.1"
   },
   "repository": {

diff --git a/src/components/excel/index.ts b/src/components/excel/index.ts
@@ -1,6 +1,6 @@
-// import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
+import { getAsyncComponent } from '@/common/factory/getAsyncComponent';
 
-// export const ImportFromExcel = getAsyncComponent(() => import('./src/ImportFromExcel.vue'));
-export { default as ImportFromExcel } from './src/ImportFromExcel.vue';
+export const ImportFromExcel = getAsyncComponent(() => import('./src/ImportFromExcel.vue'));
+// export { default as ImportFromExcel } from './src/ImportFromExcel.vue';
 export * from './src/types';
 export * from './src/Export2Excel';
diff --git a/src/components/table/src/BasicTable.vue b/src/components/table/src/BasicTable.vue
@@ -18,7 +18,7 @@
   import { BasicTableProps, TableInstance, FetchParams, getColumnsParams } from './types/table';
   import { PaginationProps } from './types/pagination';
   import { getSlot } from '@/utils/helper/tsxHelper';
-  import { isFunction } from '@/utils/is/index';
+  import { isFunction, isString } from '@/utils/is/index';
 
   import { BasicForm, FormProps } from '@/components/form/index';
   export default defineComponent({
@@ -28,58 +28,63 @@
       const { attrs, emit, slots, listeners } = ctx;
       const tableElRef = ref<any>(null);
       const innerPropsRef = ref<Partial<BasicTableProps>>();
-      const lastPropsRef = ref<BasicTableProps>();
+      // const lastPropsRef = ref<BasicTableProps>();
 
-      const getPropsRef = computed(() => {
-        lastPropsRef.value = {
+      const getMergeProps = computed(() => {
+        return {
           ...props,
-          ...unref(lastPropsRef),
           ...unref(innerPropsRef),
         };
-        return unref(lastPropsRef) as BasicTableProps;
       });
+      // const getPropsRef = computed(() => {
+      //   lastPropsRef.value = {
+      //     ...props,
+      //     ...unref(lastPropsRef),
+      //     ...unref(innerPropsRef),
+      //   };
+      //   return unref(lastPropsRef) as BasicTableProps;
+      // });
       const getComponentsRef = computed(() => {
         const res: any = {};
 
-        if (unref(getPropsRef).canRowDrag) {
+        if (unref(getMergeProps).canRowDrag) {
           res.body = {
             wrapper: BodyWarpper,
           };
         }
-        if (unref(getPropsRef).canColDrag) {
+        if (unref(getMergeProps).canColDrag) {
           res.header = {
             cell: CellResize,
           };
         }
 
         return res;
       });
-      const { getPaginationRef, setPagination } = usePagination(getPropsRef);
-      const { loadingRef } = useLoading(getPropsRef);
-      const { getDataSourceRef, setTableData, rowKey, fetch } = useDataSource(getPropsRef, ctx, {
+      const { getPaginationRef, setPagination } = usePagination(getMergeProps);
+      const { loadingRef } = useLoading(getMergeProps);
+      const { getDataSourceRef, setTableData, rowKey, fetch } = useDataSource(getMergeProps, ctx, {
         getPaginationRef,
         loadingRef,
         setPagination,
       });
-      const { getColumnsRef, setColumns } = useColumns(getPropsRef, getPaginationRef);
-      const { getScrollRef, redoHeight } = useTableScroll(getPropsRef, tableElRef);
+      const { getColumnsRef, setColumns } = useColumns(getMergeProps, getPaginationRef);
+      const { getScrollRef, redoHeight } = useTableScroll(getMergeProps, tableElRef);
       const {
         getRowSelectionRef,
         getSelectRows,
         clearSelectedRowKeys,
         getSelectRowKeys,
         deleteSelectRowByKey,
         setSelectedRowKeys,
-      } = useRowSelection(getPropsRef, emit);
+      } = useRowSelection(getMergeProps, emit);
       const { prefixCls } = useDesign('basic-table');
 
       const renderTitle = () => {
-        const title = unref(getPropsRef).title;
-
+        const title = unref(getMergeProps).title;
         return (
           getSlot(slots, 'title') || (
             <TableTitle
-              helpMessage={unref(getPropsRef).titleHelpMessage}
+              helpMessage={unref(getMergeProps).titleHelpMessage}
               title={title}
               getSelectRows={getSelectRows}
             >
@@ -89,7 +94,7 @@
         );
       };
       function handleTableChange(pagination: PaginationProps) {
-        const { clearSelectOnPageChange } = unref(getPropsRef);
+        const { clearSelectOnPageChange } = unref(getMergeProps);
         if (clearSelectOnPageChange) {
           clearSelectedRowKeys();
         }
@@ -98,7 +103,7 @@
       }
 
       function handleSearchInfoChange(info: any) {
-        const { handleSearchInfoFn } = unref(getPropsRef);
+        const { handleSearchInfoFn } = unref(getMergeProps);
         if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) {
           info = handleSearchInfoFn(info) || info;
         }
@@ -142,16 +147,16 @@
       emit('register', instance);
 
       return () => {
-        const title = unref(getPropsRef).title;
-        const titleData =
-          !getSlot(slots, 'title') && !title && !getSlot(slots, 'toolbar')
+        const title = unref(getMergeProps).title;
+        const titleData: any =
+          !getSlot(slots, 'title') && !isString(title) && !title && !getSlot(slots, 'toolbar')
             ? {}
-            : { title: renderTitle };
+            : { title: !getSlot(slots, 'title') && !title ? null : renderTitle };
         const propsData: BasicTableProps = {
           // @ts-ignore
           size: 'middle',
           ...attrs,
-          ...unref(getPropsRef),
+          ...unref(getMergeProps),
           ...titleData,
           columns: unref(getColumnsRef),
           dataSource: unref(getDataSourceRef),

diff --git a/src/components/table/src/hooks/useColumns.ts b/src/components/table/src/hooks/useColumns.ts
@@ -3,11 +3,13 @@ import { PaginationProps } from '../types/pagination';
 import { unref, ComputedRef, computed, watch, ref } from 'compatible-vue';
 import { isBoolean, isArray, isObject } from '@/utils/is/index';
 import { PAGE_SIZE } from '../const';
+import { useProps } from './useProps';
 
 export function useColumns(
-  propsRef: ComputedRef<BasicTableProps>,
+  refProps: ComputedRef<BasicTableProps>,
   getPaginationRef: ComputedRef<false | PaginationProps>
 ) {
+  const { propsRef } = useProps(refProps);
   const columnsRef = ref<BasicColumn[]>(unref(propsRef).columns);
   const cacheColumnsRef = ref<BasicColumn[]>(unref(propsRef).columns);
 

diff --git a/src/components/table/src/hooks/useDataSource.ts b/src/components/table/src/hooks/useDataSource.ts
@@ -14,17 +14,20 @@ import { buildUUID } from '@/utils/uuid';
 import { isFunction, isBoolean } from '@/utils/is/index';
 import { ROW_KEY } from '../const';
 import { get } from '@/utils/lodashChunk';
+import { useProps } from './useProps';
 
 interface ActionType {
   getPaginationRef: ComputedRef<false | PaginationProps>;
   setPagination: (info: Partial<PaginationProps>) => void;
   loadingRef: Ref<boolean | undefined>;
 }
 export function useDataSource(
-  propsRef: ComputedRef<BasicTableProps>,
+  refProps: ComputedRef<BasicTableProps>,
   ctx: SetupContext,
   { getPaginationRef, setPagination, loadingRef }: ActionType
 ) {
+  const { propsRef } = useProps(refProps);
+
   const { emit } = ctx;
   const dataSourceRef = ref<any[]>([]);
 

diff --git a/src/components/table/src/hooks/useLoading.ts b/src/components/table/src/hooks/useLoading.ts
@@ -1,6 +1,10 @@
 import { BasicTableProps } from '../types/table';
 import { watch, ref, unref, ComputedRef } from 'compatible-vue';
-export function useLoading(propsRef: ComputedRef<BasicTableProps>) {
+import { useProps } from './useProps';
+
+export function useLoading(refProps: ComputedRef<BasicTableProps>) {
+  const { propsRef } = useProps(refProps);
+
   const loadingRef = ref(unref(propsRef).loading);
 
   watch(

diff --git a/src/components/table/src/hooks/usePagination.tsx b/src/components/table/src/hooks/usePagination.tsx
@@ -3,9 +3,12 @@ import { Icon } from '@/components/icon/index';
 import { BasicTableProps } from '../types/table';
 import { PaginationProps } from '../types/pagination';
 import { isBoolean } from '@/utils/is/index';
+import { useProps } from './useProps';
 
 import { PAGE_SIZE } from '../const';
-export function usePagination(propsRef: ComputedRef<BasicTableProps>) {
+export function usePagination(refProps: ComputedRef<BasicTableProps>) {
+  const { propsRef } = useProps(refProps);
+
   const configRef = ref<PaginationProps>({});
 
   // function handleChange(page: number) {

diff --git a/src/components/table/src/hooks/useProps.ts b/src/components/table/src/hooks/useProps.ts
@@ -0,0 +1,29 @@
+/*
+ * @description:
+ * @author: wenbin.chen
+ * @Date: 2020-05-12 13:20:26
+ * @LastEditors: wenbin.chen
+ * @LastEditTime: 2020-06-10 16:05:20
+ * @email: 190848757@qq.com
+ */
+
+import { Ref, ref, watch, unref } from '@vue/composition-api';
+import { BasicTableProps } from '../types/table';
+
+/**
+ * @description:
+ * @Date: 2020-05-12 13:20:37
+ */
+export function useProps(props: Readonly<Ref<BasicTableProps>>) {
+  const propsRef = ref<BasicTableProps>(unref(props)) as Ref<BasicTableProps>;
+  watch(
+    () => props.value,
+    (v) => {
+      propsRef.value = unref(v);
+    },
+    {
+      immediate: false,
+    }
+  );
+  return { propsRef };
+}
diff --git a/src/components/table/src/hooks/useRowSelection.ts b/src/components/table/src/hooks/useRowSelection.ts
@@ -1,11 +1,15 @@
 import { computed, ref, unref, ComputedRef } from 'compatible-vue';
 import { BasicTableProps } from '../types/table';
 import { TableRowSelection } from 'ant-design-vue/types/table/table';
+import { useProps } from './useProps';
+
 /* eslint-disable */
 export function useRowSelection(
-  propsRef: ComputedRef<BasicTableProps>,
+  refProps: ComputedRef<BasicTableProps>,
   emit: (event: string, ...args: any[]) => void
 ) {
+  const { propsRef } = useProps(refProps);
+
   const selectedRowKeysRef = ref<string[]>([]);
   const selectedRowRef = ref<any[]>([]);
 

diff --git a/src/components/table/src/hooks/useTable.ts b/src/components/table/src/hooks/useTable.ts
@@ -9,6 +9,7 @@ export function useTable(
   if (!getCurrentInstance()) {
     throw new Error('Please put useTable function in the setup function!');
   }
+
   const tableRef = ref<TableInstance | null>(null);
   const loadedRef = ref<boolean | null>(false);
 

diff --git a/src/components/table/src/hooks/useTableScroll.ts b/src/components/table/src/hooks/useTableScroll.ts
@@ -4,8 +4,11 @@ import { getViewportOffset } from '@/utils/domUtils';
 import { isBoolean } from '@/utils/is/index';
 import { useTimeout } from '@/hooks/core/useTimeout';
 import { useWindowSizeFn } from '@/hooks/event/useWindowSize';
+import { useProps } from './useProps';
+
+export function useTableScroll(refProps: ComputedRef<BasicTableProps>, tableElRef: Ref<any>) {
+  const { propsRef } = useProps(refProps);
 
-export function useTableScroll(propsRef: ComputedRef<BasicTableProps>, tableElRef: Ref<any>) {
   const { scroll } = unref(propsRef);
   const tableHeightRef: Ref<number | null> = ref(null);
 

diff --git a/src/components/verify/src/ImgRotate.vue b/src/components/verify/src/ImgRotate.vue
@@ -126,7 +126,13 @@
         return (
           <div class={prefixCls}>
             <div class={`${prefixCls}-img__wrap`} style={unref(getImgWrapStyleRef)}>
-              <img src={src} onLoad={handleImgOnLoad} class={imgCls} style={state.imgStyle} />
+              <img
+                src={src}
+                onLoad={handleImgOnLoad}
+                width={props.width}
+                class={imgCls}
+                style={state.imgStyle}
+              />
             </div>
             <BasicDragVerify
               value={isPassing}
@@ -139,6 +145,7 @@
               {...{
                 props: {
                   ...attrs,
+                  ...props,
                 },
               }}
             />

diff --git a/src/components/verify/src/VerifyModal.vue b/src/components/verify/src/VerifyModal.vue
@@ -23,7 +23,12 @@
           canFullscreen={false}
           footer={null}
         >
-          <RotateDragVerify {...{ props: attrs }} onSuccess={handleSuccess} />
+          <RotateDragVerify
+            width={240}
+            text="请拖动滑块将图片摆正"
+            {...{ props: attrs }}
+            onSuccess={handleSuccess}
+          />
         </BasicModal>
       );
     },

diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
@@ -70,7 +70,7 @@ const setting: ProjectConfig = {
   showBreadCrumb: true,
 
   // 使用error-handler-plugin
-  useErrorHandle: true || isProdMode(),
+  useErrorHandle: isProdMode(),
 
   // 路由切换动画
   routerTransition: RouterTransitionEnum.ZOOM_FADE,