fix(component): 🐛修复dynamicTable ts类型错误

buqiyuan · Dec 18, 2021 · 58b9275 · 58b9275
1 parent 9eaa568
commit 58b9275
Show file tree

Hide file tree

Showing 41 changed files with 984 additions and 1,144 deletions.
diff --git a/.env.development b/.env.development
@@ -5,7 +5,7 @@ VITE_BASE_URL = /
 
 # base api
 VITE_BASE_API = '/api/admin/'
-VITE_BASE_SOCKET_PATH = '/ws'
+VITE_BASE_SOCKET_PATH = '/ws-api'
 VITE_BASE_SOCKET_NSP = '/admin'
 
 # mock api

diff --git a/.env.production b/.env.production
@@ -2,8 +2,8 @@
 
 # base api
 VITE_BASE_API = 'http://buqiyuan.site:7001/admin/'
-VITE_BASE_SOCKET_PATH = '/ws'
-VITE_BASE_SOCKET_NSP = '/admin'
+VITE_BASE_SOCKET_PATH = '/ws-api'
+VITE_BASE_SOCKET_NSP = 'ws://buqiyuan.site:7002/admin'
 
 # 网站前缀
 VITE_BASE_URL = /vite-vue3-admin/

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "test:br": "npx http-server dist --cors --brotli -c-1"
   },
   "dependencies": {
-    "@vueuse/core": "^7.3.0",
+    "@vueuse/core": "^7.4.0",
     "ant-design-vue": "3.0.0-alpha.15",
     "axios": "^0.24.0",
     "core-js": "^3.20.0",
@@ -26,6 +26,7 @@
     "nprogress": "^1.0.0-1",
     "pinia": "2.0.6",
     "qs": "^6.10.2",
+    "socket.io-client": "^4.4.0",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12"
@@ -43,15 +44,15 @@
     "@vue/compiler-sfc": "^3.2.26",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
-    "eslint": "^8.4.1",
+    "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.2.0",
     "gh-pages": "^3.2.3",
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^12.1.3",
     "lodash-webpack-plugin": "^0.11.6",
     "mockjs": "^1.1.0",
     "postcss-html": "^1.3.0",
@@ -68,7 +69,7 @@
     "vite-plugin-svg-icons": "^1.0.5",
     "vite-plugin-windicss": "^1.5.4",
     "vue-eslint-parser": "^8.0.1",
-    "windicss": "^3.3.0"
+    "windicss": "^3.4.0"
   },
   "__npminstall_done": false,
   "homepage": "git@buqiyuan.github.io/vite-vue3-admin",

diff --git a/src/api/demos/hero.ts b/src/api/demos/hero.ts
@@ -0,0 +1,15 @@
+import { request, BaseResponse } from '@/utils/request';
+
+export function getHeroList(query: API.PageParams) {
+  return request<BaseResponse<API.TableListResult>>(
+    {
+      url: '/demos/hero/list',
+      method: 'get',
+      params: query,
+    },
+    {
+      isMock: true,
+      isGetDataDirectly: false,
+    },
+  );
+}
diff --git a/src/api/system/log/index.ts b/src/api/system/log/index.ts
@@ -10,7 +10,6 @@ export function getReqLogList(query: API.PageParams) {
     },
     {
       isMock: true,
-      isGetDataDirectly: false,
     },
   );
 }

diff --git a/src/api/system/log/model.d.ts b/src/api/system/log/model.d.ts
@@ -32,7 +32,7 @@ declare namespace API {
     id: number;
     taskId: number;
     name: string;
-    createTime: string;
+    createdAt: string;
     consumeTime: number;
     detail: string;
     status: number;

diff --git a/src/api/system/menu/model.d.ts b/src/api/system/menu/model.d.ts
@@ -1,7 +1,7 @@
 declare namespace API {
   type MenuListResultItem = {
     createTime: string;
-    updateTime: string;
+    updatedAt: string;
     id: number;
     parentId: number;
     name: string;

diff --git a/src/api/system/role/model.d.ts b/src/api/system/role/model.d.ts
@@ -14,8 +14,8 @@ declare namespace API {
 
   /** 角色列表项 */
   type RoleListResultItem = {
-    createTime: string;
-    updateTime: string;
+    createdAt: string;
+    updatedAt: string;
     id: number;
     userId: string;
     name: string;

diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
@@ -1,18 +1,12 @@
 import { request } from '@/utils/request';
 import Api from '@/core/permission/modules/sys/user';
-import { generatePermCode } from '@/core/permission/modules';
 
 export function getUserListPage(data: API.PageParams<{ departmentIds: number[] }>) {
-  return request<API.TableListResult<API.UserListPageResult>>(
-    {
-      url: Api.page,
-      method: 'post',
-      data,
-    },
-    {
-      permCode: generatePermCode(Api.page),
-    },
-  );
+  return request<API.TableListResult<API.UserListPageResult>>({
+    url: Api.page,
+    method: 'post',
+    data,
+  });
 }
 
 export function createUser(data: API.CreateUserParams) {
@@ -23,23 +17,17 @@ export function createUser(data: API.CreateUserParams) {
       data,
     },
     {
-      permCode: generatePermCode(Api.add),
       successMsg: '创建用户成功',
     },
   );
 }
 
 export function getUserInfo(query: { userId: number }) {
-  return request<API.AdminUserInfo>(
-    {
-      url: Api.info,
-      method: 'get',
-      params: query,
-    },
-    {
-      permCode: generatePermCode(Api.info),
-    },
-  );
+  return request<API.AdminUserInfo>({
+    url: Api.info,
+    method: 'get',
+    params: query,
+  });
 }
 
 export function updateUser(data: API.UpdateAdminInfoParams) {
@@ -50,34 +38,23 @@ export function updateUser(data: API.UpdateAdminInfoParams) {
       data,
     },
     {
-      permCode: generatePermCode(Api.update),
       successMsg: '修改用户成功',
     },
   );
 }
 
 export function updateUserPassword(data: API.UpdateAdminUserPassword) {
-  return request(
-    {
-      url: Api.password,
-      method: 'post',
-      data,
-    },
-    {
-      permCode: generatePermCode(Api.password),
-    },
-  );
+  return request({
+    url: Api.password,
+    method: 'post',
+    data,
+  });
 }
 
 export function deleteUsers(data: { userIds: number[] }) {
-  return request(
-    {
-      url: Api.delete,
-      method: 'post',
-      data,
-    },
-    {
-      permCode: generatePermCode(Api.delete),
-    },
-  );
+  return request({
+    url: Api.delete,
+    method: 'post',
+    data,
+  });
 }
diff --git a/src/components/dynamic-table/components/query-form/index.vue b/src/components/dynamic-table/components/query-form/index.vue
@@ -76,7 +76,10 @@
 
       const formItemSchemas = computed<FormItemSchema[]>(() => {
         return props.columns
-          .filter((n) => !n.hideInSearch && !!getColumnKey(n))
+          .filter((n) => {
+            const field = getColumnKey(n);
+            return !n.hideInSearch && !!field && field !== '$action';
+          })
           .map((n) => {
             return {
               field: n.formItemProps?.field ?? n.searchField ?? getColumnKey(n),

diff --git a/src/components/dynamic-table/components/table-action.vue b/src/components/dynamic-table/components/table-action.vue
@@ -37,17 +37,17 @@
       }
       if (isString(auth)) {
         const isValid = verifyAuth(auth);
-        item.disabled = !isValid;
-        if (item.disabled) {
+        item.disabled ??= !isValid;
+        if (item.disabled && !isValid) {
           item.title = '对不起，您没有该操作权限！';
         }
         return isValid;
       }
       if (isObject(auth)) {
         const isValid = verifyAuth(auth.perm);
         const isDisable = auth.effect !== 'delete';
-        item.disabled = !isValid && isDisable;
-        if (item.disabled) {
+        item.disabled ??= !isValid && isDisable;
+        if (item.disabled && !isValid) {
           item.title = '对不起，您没有该操作权限！';
         }
         return isValid || isDisable;

diff --git a/src/components/dynamic-table/components/table-settings/column-setting.vue b/src/components/dynamic-table/components/table-settings/column-setting.vue
@@ -83,6 +83,7 @@
   let inited = false;
   const defaultColumns = cloneDeep(table.columns);
   const defaultShowIndex = !!table.showIndex;
+  const defaultBordered = table.bordered;
 
   const tableColumns = ref<TableColumn[]>([]);
 
@@ -103,6 +104,7 @@
   const initCheckStatus = () => {
     tableColumns.value = cloneDeep(defaultColumns);
     checkIndex.value = defaultShowIndex;
+    checkBordered.value = defaultBordered;
     tableColumns.value.forEach((item) => (item.hideInTable ??= false));
   };
   initCheckStatus();
@@ -157,7 +159,7 @@
 
   const reset = () => {
     initCheckStatus();
-    table.setProps({ showIndex: defaultShowIndex });
+    table.setProps({ showIndex: defaultShowIndex, bordered: defaultBordered });
   };
 </script>
 

diff --git a/src/components/dynamic-table/components/table-settings/size-setting.vue b/src/components/dynamic-table/components/table-settings/size-setting.vue
@@ -8,7 +8,7 @@
       <ColumnHeightOutlined />
       <template #overlay>
         <Menu @click="handleMenuClick" selectable v-model:selectedKeys="selectedKeysRef">
-          <Menu.Item key="default">
+          <Menu.Item key="large">
             <span>默认</span>
           </Menu.Item>
           <Menu.Item key="middle">

diff --git a/src/components/dynamic-table/dynamic-table.vue b/src/components/dynamic-table/dynamic-table.vue
@@ -63,7 +63,7 @@
     reactive,
     ref,
     toRefs,
-    watch,
+    watchEffect,
     getCurrentInstance,
     computed,
     unref,
@@ -114,7 +114,7 @@
         'expandedRowRender',
         'customFilterIcon',
         'customFilterDropdown',
-      ];
+      ] as const;
 
       const state = reactive({
         expandItemRefs: {},
@@ -123,18 +123,11 @@
       });
 
       // 如果外界设置了dataSource，那就直接用外界提供的数据
-      watch(
-        () => props.dataSource,
-        (val) => {
-          if (val) {
-            state.tableData = val;
-          }
-        },
-        {
-          deep: true,
-          immediate: true,
-        },
-      );
+      watchEffect(() => {
+        if (props.dataSource) {
+          state.tableData = props.dataSource;
+        }
+      });
 
       const setProps = (props: Partial<TableProps>) => {
         innerPropsRef.value = { ...unref(innerPropsRef), ...props };
@@ -144,6 +137,7 @@
        * @description 表格查询
        */
       const queryTable = (params) => {
+        params.page = 1;
         fetchTableData(params);
       };
 
@@ -168,6 +162,7 @@
             Object.assign(queryParams, {
               page: _pagination.current,
               limit: _pagination.pageSize,
+              ...queryParams,
             });
           }
           state.loading = true;
@@ -192,24 +187,14 @@
               total: ~~total,
             });
           }
-
-          state.tableData = data?.list || [];
+          if (Array.isArray(data?.list)) {
+            state.tableData = data!.list;
+          } else if (Array.isArray(data)) {
+            state.tableData = data;
+          } else {
+            state.tableData = [];
+          }
         }
-
-        // const end = Math.max(pageSize, current * pageSize)
-        // .slice(end - pageSize, end) // 这里0，10是条数
-
-        // 是否开启了合计行
-        // if (props.showSummary) {
-        //   const { pageSize, current } = unref(pagination);
-        //   const end = Math.max(pageSize, current * pageSize);
-
-        //   const data = Object.is(props.dataSource, undefined)
-        //     ? state.tableData
-        //     : state.tableData.slice(end - pageSize, end);
-        // }
-        // 是否可以拖拽行
-        // props.dragRowEnable && (state.customRow = useDragRow<any>(state.tableData)!)
       };
 
       /**
@@ -235,6 +220,8 @@
             title: '序号',
             width: 60,
             align: 'center',
+            fixed: 'left',
+            ...props.indexColumnProps,
             bodyCell: ({ index }) => {
               const getPagination = unref(paginationRef);
               if (isBoolean(getPagination)) {
@@ -306,6 +293,10 @@
         display: flex;
       }
 
+      .ant-image:hover {
+        cursor: zoom-in;
+      }
+
       .ant-btn {
         margin-right: 10px;
       }