fix: table edit form

package.json

@@ -34,78 +34,78 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "~6.1.0",
-    "@vueuse/core": "~9.6.0",
-    "ant-design-vue": "3.2.15",
-    "axios": "~1.2.0",
-    "core-js": "~3.26.1",
-    "dayjs": "~1.11.6",
-    "echarts": "^5.4.0",
+    "@vueuse/core": "~10.1.2",
+    "ant-design-vue": "3.2.20",
+    "axios": "~1.4.0",
+    "core-js": "~3.30.2",
+    "dayjs": "~1.11.7",
+    "echarts": "^5.4.2",
     "file-saver": "~2.0.5",
     "lodash-es": "~4.17.21",
     "mitt": "~3.0.0",
     "mockjs": "~1.1.0",
     "nprogress": "~1.0.0-1",
-    "pinia": "~2.0.27",
+    "pinia": "~2.1.3",
     "qiniu-js": "^3.4.1",
-    "qs": "~6.11.0",
-    "socket.io-client": "~4.5.4",
+    "qs": "~6.11.2",
+    "socket.io-client": "~4.6.1",
     "sortablejs": "~1.15.0",
-    "vue": "3.2.45",
-    "vue-echarts": "^6.2.3",
+    "vue": "3.3.4",
+    "vue-echarts": "^6.5.5",
     "vue-i18n": "9.2.2",
-    "vue-router": "~4.1.6",
-    "vue-types": "~5.0.1",
+    "vue-router": "~4.2.2",
+    "vue-types": "~5.0.3",
     "xlsx": "~0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "~17.3.0",
-    "@commitlint/config-conventional": "~17.3.0",
-    "@types/lodash-es": "~4.17.6",
-    "@types/node": "~18.11.10",
-    "@types/webpack-env": "~1.18.0",
-    "@typescript-eslint/eslint-plugin": "~5.45.0",
-    "@typescript-eslint/parser": "~5.45.0",
+    "@commitlint/cli": "~17.6.5",
+    "@commitlint/config-conventional": "~17.6.5",
+    "@types/lodash-es": "~4.17.7",
+    "@types/node": "~20.2.5",
+    "@types/webpack-env": "~1.18.1",
+    "@typescript-eslint/eslint-plugin": "~5.59.8",
+    "@typescript-eslint/parser": "~5.59.8",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-router": "~5.0.8",
     "@vue/cli-plugin-typescript": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "@vue/eslint-config-typescript": "~11.0.2",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/eslint-config-typescript": "~11.0.3",
+    "@vue/tsconfig": "^0.4.0",
     "conventional-changelog-cli": "~2.2.2",
     "cross-env": "~7.0.3",
-    "cz-git": "~1.3.12",
-    "czg": "~1.3.12",
-    "eslint": "~8.29.0",
-    "eslint-config-prettier": "~8.5.0",
-    "eslint-plugin-import": "2.26.0",
+    "cz-git": "~1.6.1",
+    "czg": "~1.6.1",
+    "eslint": "~8.41.0",
+    "eslint-config-prettier": "~8.8.0",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "~4.2.1",
-    "eslint-plugin-vue": "~9.8.0",
-    "husky": "~8.0.2",
+    "eslint-plugin-vue": "~9.14.1",
+    "husky": "~8.0.3",
     "less": "~4.1.3",
-    "less-loader": "11.1.0",
+    "less-loader": "11.1.1",
     "lint-staged": "~12.5.0",
     "path-browserify": "~1.0.1",
     "postcss-html": "~1.5.0",
     "postcss-less": "~6.0.0",
-    "prettier": "~2.8.0",
+    "prettier": "~2.8.8",
     "pretty-quick": "~3.1.3",
     "regenerator-runtime": "~0.13.11",
     "speed-measure-webpack-plugin": "~1.5.0",
-    "stylelint": "~14.16.0",
+    "stylelint": "~15.6.2",
     "stylelint-config-html": "~1.1.0",
-    "stylelint-config-prettier": "~9.0.4",
-    "stylelint-config-recommended": "~9.0.0",
+    "stylelint-config-prettier": "~9.0.5",
+    "stylelint-config-recommended": "~12.0.0",
     "stylelint-config-recommended-vue": "~1.4.0",
-    "stylelint-config-standard": "~29.0.0",
-    "stylelint-order": "~5.0.0",
+    "stylelint-config-standard": "~33.0.0",
+    "stylelint-order": "~6.0.3",
     "svg-sprite-loader": "~6.0.11",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.3",
-    "unplugin-vue-define-options": "~1.0.0",
+    "typescript": "~5.0.4",
+    "unplugin-vue-define-options": "~1.3.7",
     "vue-cli-plugin-windicss": "~1.1.6",
-    "vue-eslint-parser": "~9.1.0",
-    "vue-tsc": "^1.0.11"
+    "vue-eslint-parser": "~9.3.0",
+    "vue-tsc": "^1.6.5"
   },
   "__npminstall_done": false,
   "repository": {

src/components/basic/context-menu/src/ContextMenu.vue

@@ -36,7 +36,7 @@
         class="px-4"
         onClick={props.handler.bind(null, item)}
       >
-        {props.showIcon && item.icon && <IconFont class="mr-2" name={item.icon} />}
+        {props.showIcon && item.icon && <IconFont class="mr-2" type={item.icon} />}
         <span>{item.label}</span>
       </span>
     );

src/components/basic/icons-select/index.vue

@@ -49,7 +49,7 @@
   const visible = ref(false);
   const modelValue = useVModel(props, 'value', emit);
 
-  const selectIcon = (iconItem: typeof glyphs[number]) => {
+  const selectIcon = (iconItem: (typeof glyphs)[number]) => {
     modelValue.value = iconItem.font_class;
     visible.value = false;
   };
@@ -60,6 +60,7 @@
 
     &-item {
       @apply flex m-2px p-6px;
+
       border: 1px solid #e5e7eb;
 
       &:hover,

src/components/basic/svg-icon/svg-icon.vue

@@ -16,7 +16,7 @@
   }
 
   defineOptions({
-    name: 'svg-icon',
+    name: 'SvgIcon',
   });
 
   const props = defineProps({
@@ -48,6 +48,6 @@
   .svg-icon {
     overflow: hidden;
     vertical-align: -0.15em;
-    fill: currentColor;
+    fill: currentcolor;
   }
 </style>

src/components/core/dynamic-table/src/components/editable-cell/index.vue

@@ -118,15 +118,19 @@
       };
 
       const handleSaveCell = async () => {
-        const { rowKey, column } = props;
-        await validateCell(rowKey!, dataIndex.value);
-        if (isAsyncFunction(tableContext?.onSave)) {
-          saving.value = true;
-          await tableContext
-            .onSave(rowKey!, editFormModel.value[rowKey!], column?.record)
-            .finally(() => (saving.value = false));
-          cancelCellEditable(rowKey!, dataIndex.value);
-          isCellEdit.value = false;
+        try {
+          const { rowKey, column } = props;
+          await validateCell(rowKey!, dataIndex.value);
+          if (isAsyncFunction(tableContext?.onSave)) {
+            saving.value = true;
+            await tableContext
+              .onSave(rowKey!, editFormModel.value[rowKey!], column?.record)
+              .finally(() => (saving.value = false));
+            cancelCellEditable(rowKey!, dataIndex.value);
+            isCellEdit.value = false;
+          }
+        } catch (error) {
+          console.error(error);
         }
       };
 

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

@@ -1,7 +1,7 @@
 import { ref, watchEffect, unref, useSlots } from 'vue';
 import { cloneDeep, isFunction, mergeWith } from 'lodash-es';
 import { EditableCell } from '../components/';
-import { ColumnKeyFlag, CustomRenderParams } from '../types/column';
+import { ColumnKeyFlag, type CustomRenderParams } from '../types/column';
 import type { Slots } from 'vue';
 import type {
   TableActionType,

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

@@ -5,6 +5,7 @@ import { useEditable } from './useEditable';
 import type { DynamicTableProps, DynamicTableEmitFn } from '../dynamic-table';
 import type { OnChangeCallbackParams, TableColumn } from '../types/';
 import type { Pagination, TableState } from './useTableState';
+import type { FormProps } from 'ant-design-vue';
 import { isAsyncFunction, isBoolean } from '@/utils/is';
 
 export type UseInfiniteScrollParams = Parameters<typeof useInfiniteScroll>;
@@ -143,12 +144,13 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext)
   };
 
   /** 编辑表单验证失败回调 */
-  const handleEditFormValidate = (name: string[], status, errorMsgs) => {
+  const handleEditFormValidate: FormProps['onValidate'] = (name, status, errorMsgs) => {
     // console.log('errorInfo', editFormErrorMsgs);
+    const key = Array.isArray(name) ? name.join('.') : name;
     if (status) {
-      editFormErrorMsgs.value.delete(name.join('.'));
+      editFormErrorMsgs.value.delete(key);
     } else {
-      editFormErrorMsgs.value.set(name.join('.'), errorMsgs);
+      editFormErrorMsgs.value.set(key, errorMsgs);
     }
   };
 

src/components/core/schema-form/src/components/form-action.vue

@@ -44,7 +44,7 @@
   import { Form, Col } from 'ant-design-vue';
   import { useFormContext } from '../hooks/useFormContext';
   import type { ColEx } from '../types/component';
-  import { Button, ButtonProps } from '@/components/basic/button';
+  import { Button, type ButtonProps } from '@/components/basic/button';
   import { BasicArrow } from '@/components/basic/basic-arrow';
   import { useI18n } from '@/hooks/useI18n';
 

src/components/core/schema-form/src/schema-form-item.vue

@@ -7,7 +7,7 @@
       v-else
       v-bind="{ ...schema.formItemProps }"
       :label="renderLabelHelpMessage"
-      :name="schema.field"
+      :name="namePath"
       :label-col="itemLabelWidthProp.labelCol"
       :wrapper-col="itemLabelWidthProp.wrapperCol"
       :rules="getRules"
@@ -18,7 +18,7 @@
         v-else-if="getComponent"
         :ref="setItemRef(schema.field)"
         v-bind="getComponentProps"
-        v-model:[modelValueType]="formModel[schema.field]"
+        v-model:[modelValueType]="modelValue"
         :allow-clear="true"
         :disabled="getDisable"
         :loading="schema.loading"
@@ -54,7 +54,7 @@
   import type { ComponentMapType } from './componentMap';
   import type { CustomRenderFn, FormSchema, RenderCallbackParams, ComponentProps } from './types/';
   import type { RuleObject } from 'ant-design-vue/es/form/';
-  import { isBoolean, isNull, isObject, isString, isFunction } from '@/utils/is';
+  import { isBoolean, isNull, isObject, isString, isFunction, isArray } from '@/utils/is';
   import BasicHelp from '@/components/basic/basic-help/index.vue';
   import { useI18n } from '@/hooks/useI18n';
 
@@ -63,6 +63,7 @@
   });
 
   const props = defineProps(schemaFormItemProps);
+  const emit = defineEmits(['update:formModel']);
 
   // schemaForm组件实例
   const formContext = useFormContext();
@@ -76,6 +77,23 @@
   // @ts-ignore
   const itemLabelWidthProp = useItemLabelWidth(schema, formPropsRef);
 
+  const namePath = computed<string[]>(() => {
+    return isArray(schema.value.field) ? schema.value.field : schema.value.field.split('.');
+  });
+
+  const modelValue = computed({
+    get() {
+      return namePath.value.reduce((prev, field) => prev?.[field], props.formModel);
+    },
+    set(val) {
+      const namePath = schema.value.field.split('.');
+      const prop = namePath.pop()!;
+      const target = namePath.reduce((prev, field) => (prev[field] ??= {}), props.formModel);
+      target[prop] = val;
+      emit('update:formModel', props.formModel);
+    },
+  });
+
   const modelValueType = computed<string>(() => {
     const { component, componentProps } = schema.value;
     if (!isFunction(componentProps) && componentProps?.vModelKey) {
@@ -213,6 +231,9 @@
         plain: true,
       });
     }
+    if (isVNode(getComponent.value)) {
+      Object.assign(componentProps, getComponent.value.props);
+    }
 
     return componentProps;
   });
@@ -359,7 +380,7 @@
 
   const fetchRemoteData = async (request) => {
     if (request) {
-      const { componentProps, component } = unref(schema);
+      const { component } = unref(schema);
 
       try {
         const newSchema = {
@@ -377,8 +398,8 @@
         } else if (['TreeSelect', 'Tree'].some((n) => n === component)) {
           newSchema.componentProps.treeData = result;
         }
-        if (componentProps) {
-          componentProps.requestResult = result;
+        if (newSchema.componentProps) {
+          newSchema.componentProps.requestResult = result;
         }
         newSchema.loading = false;
         updateSchema(newSchema);

src/core/permission/modules/netdisk/manage.ts

@@ -14,6 +14,6 @@ export const netdiskMange = {
 
 export const values = Object.values(netdiskMange);
 
-export type NetdiskMangePerms = typeof values[number];
+export type NetdiskMangePerms = (typeof values)[number];
 
 export default netdiskMange;

src/core/permission/modules/sys/dept.ts

@@ -13,6 +13,6 @@ export const sysDept = {
 
 export const values = Object.values(sysDept);
 
-export type SysDeptPerms = typeof values[number];
+export type SysDeptPerms = (typeof values)[number];
 
 export default sysDept;

src/core/permission/modules/sys/log.ts

@@ -6,6 +6,6 @@ export const sysLog = {
 
 export const values = Object.values(sysLog);
 
-export type SysLogPerms = typeof values[number];
+export type SysLogPerms = (typeof values)[number];
 
 export default sysLog;

src/core/permission/modules/sys/menu.ts

@@ -8,6 +8,6 @@ export const sysMenu = {
 
 export const deptValues = Object.values(sysMenu);
 
-export type SysMenuPerms = typeof deptValues[number];
+export type SysMenuPerms = (typeof deptValues)[number];
 
 export default sysMenu;

src/core/permission/modules/sys/online.ts

@@ -5,6 +5,6 @@ export const sysOnline = {
 
 export const values = Object.values(sysOnline);
 
-export type SysOnlinePerms = typeof values[number];
+export type SysOnlinePerms = (typeof values)[number];
 
 export default sysOnline;

src/core/permission/modules/sys/param-config.ts

@@ -8,6 +8,6 @@ export const sysParamConfig = {
 
 export const values = Object.values(sysParamConfig);
 
-export type SysParamConfigPerms = typeof values[number];
+export type SysParamConfigPerms = (typeof values)[number];
 
 export default sysParamConfig;

src/core/permission/modules/sys/role.ts

@@ -9,6 +9,6 @@ export const sysRole = {
 
 export const values = Object.values(sysRole);
 
-export type SysRolePerms = typeof values[number];
+export type SysRolePerms = (typeof values)[number];
 
 export default sysRole;

src/core/permission/modules/sys/serve.ts

@@ -4,6 +4,6 @@ export const sysServe = {
 
 export const values = Object.values(sysServe);
 
-export type SysServePerms = typeof values[number];
+export type SysServePerms = (typeof values)[number];
 
 export default sysServe;

src/core/permission/modules/sys/task.ts

@@ -11,6 +11,6 @@ export const sysTask = {
 
 export const values = Object.values(sysTask);
 
-export type SysTaskPerms = typeof values[number];
+export type SysTaskPerms = (typeof values)[number];
 
 export default sysTask;