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

mock/department/index.ts

@@ -101,5 +101,40 @@ export default [
         }
       }
     }
+  },
+  // 保存接口
+  {
+    url: '/department/user/save',
+    method: 'post',
+    timeout: 1000,
+    response: () => {
+      return {
+        data: {
+          code: code,
+          data: 'success'
+        }
+      }
+    }
+  },
+  // 删除接口
+  {
+    url: '/department/user/delete',
+    method: 'post',
+    response: ({ body }) => {
+      const ids = body.ids
+      if (!ids) {
+        return {
+          code: '500',
+          message: '请选择需要删除的数据'
+        }
+      } else {
+        return {
+          data: {
+            code: code,
+            data: 'success'
+          }
+        }
+      }
+    }
   }
 ] as MockMethod[]

src/api/department/index.ts

@@ -8,3 +8,11 @@ export const getDepartmentApi = () => {
 export const getUserByIdApi = (params: DepartmentUserParams) => {
   return request.get<DepartmentUserResponse>({ url: '/department/users', params })
 }
+
+export const deleteUserByIdApi = (ids: string[] | number[]) => {
+  return request.post({ url: '/department/user/delete', data: { ids } })
+}
+
+export const saveUserApi = (data: any) => {
+  return request.post({ url: '/department/user/save', data })
+}

src/api/department/types.ts

@@ -23,6 +23,7 @@ export interface DepartmentUserItem {
   email: string
   createTime: string
   role: string
+  department: DepartmentItem
 }
 
 export interface DepartmentUserResponse {

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">

src/hooks/web/useCrudSchemas.ts

@@ -13,23 +13,23 @@ export type CrudSchema = Omit<TableColumn, 'children'> & {
 }
 
 interface CrudSearchParams extends Omit<FormSchema, 'field'> {
-  // 是否显示在查询项
-  show?: boolean
+  // 是否隐藏在查询项
+  hidden?: boolean
 }
 
 interface CrudTableParams extends Omit<TableColumn, 'field'> {
-  // 是否显示表头
-  show?: boolean
+  // 是否隐藏表头
+  hidden?: boolean
 }
 
 interface CrudFormParams extends Omit<FormSchema, 'field'> {
-  // 是否显示表单项
-  show?: boolean
+  // 是否隐藏表单项
+  hidden?: boolean
 }
 
 interface CrudDescriptionsParams extends Omit<DescriptionsSchema, 'field'> {
-  // 是否显示表单项
-  show?: boolean
+  // 是否隐藏表单项
+  hidden?: boolean
 }
 
 interface AllSchemas {
@@ -78,17 +78,17 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
 
   for (let i = 0; i < length; i++) {
     const schemaItem = crudSchema[i]
-    // 判断是否显示
-    if (schemaItem?.search?.show) {
+    // 判断是否隐藏
+    if (!schemaItem?.search?.hidden) {
       const searchSchemaItem = {
-        component: schemaItem.search.component,
+        component: schemaItem?.search?.component || 'Input',
         ...schemaItem.search,
         field: schemaItem.field,
         label: schemaItem.label
       }
 
       // 删除不必要的字段
-      delete searchSchemaItem.show
+      delete searchSchemaItem.hidden
 
       searchSchema.push(searchSchemaItem)
     }
@@ -101,7 +101,7 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
 const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => {
   const tableColumns = treeMap<CrudSchema>(crudSchema, {
     conversion: (schema: CrudSchema) => {
-      if (schema?.table?.show !== false) {
+      if (!schema?.table?.hidden) {
         return {
           ...schema.table,
           ...schema
@@ -126,17 +126,17 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
 
   for (let i = 0; i < length; i++) {
     const formItem = crudSchema[i]
-    // 判断是否显示
-    if (formItem?.form?.show) {
+    // 判断是否隐藏
+    if (!formItem?.form?.hidden) {
       const formSchemaItem = {
-        component: formItem.form.component,
+        component: formItem?.form?.component || 'Input',
         ...formItem.form,
         field: formItem.field,
         label: formItem.label
       }
 
       // 删除不必要的字段
-      delete formSchemaItem.show
+      delete formSchemaItem.hidden
 
       formSchema.push(formSchemaItem)
     }
@@ -150,16 +150,16 @@ const filterDescriptionsSchema = (crudSchema: CrudSchema[]): DescriptionsSchema[
   const descriptionsSchema: FormSchema[] = []
 
   eachTree(crudSchema, (schemaItem: CrudSchema) => {
-    // 判断是否显示
-    if (schemaItem?.detail?.show !== false) {
+    // 判断是否隐藏
+    if (!schemaItem?.detail?.hidden) {
       const descriptionsSchemaItem = {
         ...schemaItem.detail,
         field: schemaItem.field,
         label: schemaItem.detail?.label || schemaItem.label
       }
 
       // 删除不必要的字段
-      delete descriptionsSchemaItem.show
+      delete descriptionsSchemaItem.hidden
 
       descriptionsSchema.push(descriptionsSchemaItem)
     }

src/locales/en.ts

@@ -494,7 +494,9 @@ export default {
     searchDepartment: 'Search department',
     account: 'Account',
     email: 'Email',
-    createTime: 'Create time'
+    createTime: 'Create time',
+    // 所属部门
+    department: 'Department'
   },
   inputPasswordDemo: {
     title: 'InputPassword',

src/locales/zh-CN.ts

@@ -486,7 +486,9 @@ export default {
     searchDepartment: '搜索部门',
     account: '账号',
     email: '邮箱',
-    createTime: '创建时间'
+    createTime: '创建时间',
+    // 所属部门
+    department: '所属部门'
   },
   inputPasswordDemo: {
     title: '密码输入框',