perf: Form Table Search Descriptions 支持嵌套赋值

src/components/Descriptions/src/Descriptions.vue

@@ -6,6 +6,7 @@ import { ref, unref, PropType, computed, defineComponent } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { DescriptionsSchema } from './types'
 import { Icon } from '@/components/Icon'
+import { get } from 'lodash-es'
 
 const appStore = useAppStore()
 
@@ -114,7 +115,7 @@ export default defineComponent({
                             default: () =>
                               item.slots?.default
                                 ? item.slots?.default(props.data)
-                                : props.data[item.field]
+                                : get(props.data, item.field)
                           }}
                         </ElDescriptionsItem>
                       )

src/components/Form/src/Form.vue

@@ -318,9 +318,19 @@ export default defineComponent({
             }
 
             const Comp = () => {
+              // 如果field是多层路径，需要转换成对象
+              const fields = item.field.split('.')
+              // 循环fields，绑定v-model
+              const vModel = fields.reduce((prev, next, index) => {
+                if (index === 0) {
+                  return formModel.value[next]
+                }
+                return prev[next]
+              }, {})
+
               return (
                 <Com
-                  vModel={formModel.value[item.field]}
+                  vModel={vModel}
                   ref={(el: any) => setComponentRefMap(el, item.field)}
                   {...(autoSetPlaceholder && setTextPlaceholder(item))}
                   {...setComponentProps(item)}

src/components/Form/src/helper/index.ts

@@ -2,6 +2,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { PlaceholderModel, FormSchema, ComponentNameEnum, ColProps } from '../types'
 import { isFunction } from '@/utils/is'
 import { firstUpperCase, humpToDash } from '@/utils'
+import { set, get } from 'lodash-es'
 
 const { t } = useI18n()
 
@@ -143,13 +144,14 @@ export const setItemComponentSlots = (slotsProps: Recordable = {}): Recordable =
 export const initModel = (schema: FormSchema[], formModel: Recordable) => {
   const model: Recordable = { ...formModel }
   schema.map((v) => {
-    // 如果是hidden，就删除对应的值
     if (v.remove) {
       delete model[v.field]
     } else if (v.component && v.component !== 'Divider') {
-      const hasField = Reflect.has(model, v.field)
+      // const hasField = Reflect.has(model, v.field)
+      const hasField = get(model, v.field)
       // 如果先前已经有值存在，则不进行重新赋值，而是采用现有的值
-      model[v.field] = hasField ? model[v.field] : v.value !== void 0 ? v.value : undefined
+      set(model, v.field, hasField ? get(model, v.field) : v.value !== void 0 ? v.value : undefined)
+      // model[v.field] = hasField ? model[v.field] : v.value !== void 0 ? v.value : undefined
     }
   })
   return model

src/components/Icon/src/Icon.vue

@@ -19,8 +19,6 @@ const props = defineProps({
   hoverColor: propTypes.string
 })
 
-const emit = defineEmits(['click'])
-
 const isLocal = computed(() => props.icon.startsWith('svg-icon:'))
 
 const symbolId = computed(() => {
@@ -34,14 +32,10 @@ const getIconifyStyle = computed(() => {
     color
   }
 })
-
-const iconClick = () => {
-  emit('click')
-}
 </script>
 
 <template>
-  <ElIcon :class="prefixCls" :size="size" :color="color" @click="iconClick">
+  <ElIcon :class="prefixCls" :size="size" :color="color">
     <svg v-if="isLocal" aria-hidden="true">
       <use :xlink:href="symbolId" />
     </svg>
@@ -57,7 +51,7 @@ const iconClick = () => {
 .iconify {
   &:hover {
     :deep(svg) {
-      color: v-bind(hoverColor) !important;
+      color: v-bind(hovercolor) !important;
     }
   }
 }

src/components/Table/src/Table.vue

@@ -11,7 +11,7 @@ import { defineComponent, PropType, ref, computed, unref, watch, onMounted } fro
 import { propTypes } from '@/utils/propTypes'
 import { setIndex } from './helper'
 import type { TableProps, TableColumn, Pagination, TableSetProps } from './types'
-import { set } from 'lodash-es'
+import { set, get } from 'lodash-es'
 import { CSSProperties } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
 import TableActions from './components/TableActions.vue'
@@ -364,10 +364,10 @@ export default defineComponent({
               : props?.slots?.default
               ? props.slots.default(args)
               : v?.formatter
-              ? v?.formatter?.(data.row, data.column, data.row[v.field], data.$index)
+              ? v?.formatter?.(data.row, data.column, get(data.row, v.field), data.$index)
               : isImageUrl
-              ? renderPreview(data.row[v.field])
-              : data.row[v.field]
+              ? renderPreview(get(data.row, v.field))
+              : get(data.row, v.field)
           }
         }
         if (props?.slots?.header) {
@@ -461,10 +461,10 @@ export default defineComponent({
                 : props?.slots?.default
                 ? props.slots.default(args)
                 : v?.formatter
-                ? v?.formatter?.(data.row, data.column, data.row[v.field], data.$index)
+                ? v?.formatter?.(data.row, data.column, get(data.row, v.field), data.$index)
                 : isImageUrl
-                ? renderPreview(data.row[v.field])
-                : data.row[v.field]
+                ? renderPreview(get(data.row, v.field))
+                : get(data.row, v.field)
             }
           }
           if (props?.slots?.header) {

src/components/Table/src/components/TableActions.vue

@@ -62,12 +62,13 @@ export default defineComponent({
       <>
         <div class="text-right h-28px flex items-center justify-end">
           <ElTooltip content={t('common.refresh')} placement="top">
-            <Icon
-              icon="ant-design:sync-outlined"
-              class="cursor-pointer"
-              hover-color="var(--el-color-primary)"
-              onClick={refresh}
-            />
+            <span onClick={refresh}>
+              <Icon
+                icon="ant-design:sync-outlined"
+                class="cursor-pointer"
+                hover-color="var(--el-color-primary)"
+              />
+            </span>
           </ElTooltip>
 
           <ElTooltip content={t('common.size')} placement="top">