fix(components): [dynamic-table] parameter missing #95

Author: buqiyuan

package.json

@@ -16,6 +16,7 @@
     "build:report": "vue-cli-service build --report && npx live-server --open=dist/report.html",
     "clean:lib": "npx rimraf node_modules",
     "deploy": "npm run build && npx gh-pages -d dist",
+    "dev:debug": "cross-env DEBUG_ANTDV=true npm run serve",
     "lint": "vue-cli-service lint",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
@@ -30,11 +31,11 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
-    "@vueuse/core": "^8.2.5",
+    "@vueuse/core": "^8.2.6",
     "ant-design-vue": "3.1.1",
     "axios": "^0.26.1",
-    "core-js": "^3.21.1",
-    "dayjs": "^1.11.0",
+    "core-js": "^3.22.0",
+    "dayjs": "^1.11.1",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
@@ -44,7 +45,7 @@
     "qs": "^6.10.3",
     "socket.io-client": "4.4.1",
     "sortablejs": "^1.15.0",
-    "vue": "^3.2.32",
+    "vue": "3.2.32",
     "vue-i18n": "9.2.0-beta.30",
     "vue-router": "^4.0.14",
     "vue-types": "^4.1.1",
@@ -54,8 +55,8 @@
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.23",
-    "@types/webpack-env": "^1.16.3",
+    "@types/node": "^17.0.24",
+    "@types/webpack-env": "^1.16.4",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
     "@vue/cli-plugin-babel": "^5.0.4",
@@ -64,9 +65,10 @@
     "@vue/cli-plugin-typescript": "^5.0.4",
     "@vue/cli-service": "^5.0.4",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-import": "^1.13.5",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.2.2",
+    "cross-env": "^7.0.3",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "2.26.0",
@@ -75,14 +77,14 @@
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.3.7",
+    "lint-staged": "^12.3.8",
     "path-browserify": "^1.0.1",
-    "postcss-html": "^1.3.1",
+    "postcss-html": "^1.4.1",
     "postcss-less": "^6.0.0",
     "prettier": "^2.6.2",
     "regenerator-runtime": "^0.13.9",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "stylelint": "^14.6.1",
+    "stylelint": "^14.7.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",

src/components/core/dynamic-table/src/dynamic-table.vue

@@ -8,7 +8,7 @@
       v-bind="getFormProps"
       :table-instance="tableAction"
       @toggle-advanced="(e) => $emit('toggle-advanced', e)"
-      @submit="queryTable"
+      @submit="handleSubmit"
     >
       <template v-for="item in getFormSlotKeys" #[replaceFormSlotKey(item)]="data">
         <slot :name="item" v-bind="data || {}"></slot>
@@ -104,8 +104,15 @@
   const { tableData, queryFormRef, getBindValues } = tableState;
   // 表格内部方法
   const tableMethods = useTableMethods({ state: tableState, props, emit });
-  const { getColumnKey, setProps, fetchData, queryTable, reload, handleTableChange, getComponent } =
-    tableMethods;
+  const {
+    getColumnKey,
+    setProps,
+    fetchData,
+    handleSubmit,
+    reload,
+    handleTableChange,
+    getComponent,
+  } = tableMethods;
 
   // 搜索表单
   const { getFormProps, replaceFormSlotKey, getFormSlotKeys } = useTableForm({

src/components/core/dynamic-table/src/hooks/useTableMethods.tsx

@@ -27,8 +27,8 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext)
   /**
    * @description 表格查询
    */
-  const queryTable = (params) => {
-    params.page = 1;
+  const handleSubmit = (params, page = 1) => {
+    params.page = page;
     fetchData(params);
   };
 
@@ -103,13 +103,16 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext)
   /**
    * @description 分页改变
    */
-  const handleTableChange = (...rest: OnChangeCallbackParams) => {
+  const handleTableChange = async (...rest: OnChangeCallbackParams) => {
     // const [pagination, filters, sorter] = rest;
     const [pagination] = rest;
-    if (Object.keys(pagination).length) {
-      Object.assign(unref(paginationRef), pagination);
+    let params = {};
+    if (queryFormRef.value) {
+      const values = await queryFormRef.value.validate();
+      params = queryFormRef.value.handleFormValues(values);
     }
-    fetchData(pagination, rest);
+    Object.assign(unref(paginationRef), pagination || {});
+    fetchData(params, rest);
     emit('change', ...rest);
   };
 
@@ -129,7 +132,7 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext)
   return {
     setProps,
     getComponent,
-    queryTable,
+    handleSubmit,
     handleTableChange,
     getColumnKey,
     fetchData,

vue.config.js

@@ -67,6 +67,12 @@ module.exports = defineConfig({
     // 配置相关loader，支持修改，添加和替换相关的loader
     config.resolve.alias.set('@', resolve('src'));
     config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js');
+    if (process.env.DEBUG_ANTDV) {
+      console.info('DEBUG_ANTDV', process.env.DEBUG_ANTDV);
+      config.resolve.alias.set('ant-design-vue/es/', 'ant-design-vue/components/');
+      config.resolve.alias.set('ant-design-vue/lib/', 'ant-design-vue/components/');
+      config.resolve.alias.set('vue', 'ant-design-vue/node_modules/vue');
+    }
 
     config.plugin('html').tap((args) => {
       args[0].title = 'vue3-antd-admin管理系统';