chore(components): improve ts types for BasicForm

.env

@@ -2,7 +2,7 @@
 VITE_PORT = 3000
 
 # 网站标题
-VITE_GLOB_APP_TITLE = 芋道管理系统
+VITE_GLOB_APP_TITLE = 山东青鸟工业互联网
 
 # 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符
 VITE_GLOB_APP_SHORT_NAME = Yudao_Admin

.env.development

@@ -8,7 +8,6 @@ VITE_PUBLIC_PATH = /
 # 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题
 # 可以有多个，注意多个不能换行，否则代理将会失效
 VITE_PROXY = [["/dev-api","http://192.168.1.100:48080/admin-api"],["/upload","http://192.168.1.100:48080/admin-api/infra/file/upload"]]
-# VITE_PROXY=[["/api","http://vben.xingyuv.com/test"]]
 
 # 是否删除Console.log
 VITE_DROP_CONSOLE = false

src/components/Table/src/components/editable/EditableCell.vue

@@ -53,8 +53,8 @@ export default defineComponent({
 
     const { prefixCls } = useDesign('editable-cell')
 
-    const getComponent = computed(() => props.column?.editComponent || 'Input')
-    const getRule = computed(() => props.column?.editRule)
+    const getComponent = computed(() => props.column.edit && props.column?.editComponent || 'Input')
+    const getRule = computed(() => props.column.edit && props.column?.editRule)
 
     const getRuleOpen = computed(() => {
       return unref(ruleMessage) && unref(ruleOpen)
@@ -65,6 +65,9 @@ export default defineComponent({
       return ['Checkbox', 'Switch'].includes(component)
     })
     const getDisable = computed(() => {
+      if (!props.column.edit)
+        return false
+
       const { editDynamicDisabled } = props.column
       let disabled = false
       if (isBoolean(editDynamicDisabled))
@@ -85,7 +88,7 @@ export default defineComponent({
 
       const value = isCheckValue ? (isNumber(val) || isBoolean(val) ? val : !!val) : val
 
-      let compProps = props.column?.editComponentProps ?? ({} as any)
+      let compProps = (props.column?.edit && props.column?.editComponentProps) ?? ({} as any)
       const { record, column, index } = props
 
       if (isFunction(compProps))
@@ -122,7 +125,7 @@ export default defineComponent({
     }
 
     const getValues = computed(() => {
-      const { editValueMap } = props.column
+      const editValueMap = props.column.edit ? props.column.editValueMap : null
 
       const value = unref(currentValueRef)
 
@@ -163,12 +166,18 @@ export default defineComponent({
     })
 
     watchEffect(() => {
+      if (!props.column.edit)
+        return
+
       const { editable } = props.column
       if (isBoolean(editable) || isBoolean(unref(getRowEditable)))
         isEdit.value = !!editable || unref(getRowEditable)
     })
 
     function handleEdit() {
+      if (!props.column.edit)
+        return
+
       if (unref(getRowEditable) || unref(props.column?.editRow))
         return
       ruleMessage.value = ''
@@ -211,7 +220,7 @@ export default defineComponent({
 
     async function handleSubmitRule() {
       const { column, record } = props
-      const { editRule } = column
+      const editRule = column.edit ? column.editRule : false
       const currentValue = unref(currentValueRef)
 
       if (editRule) {
@@ -293,7 +302,7 @@ export default defineComponent({
     }
 
     async function handleEnter() {
-      if (props.column?.editRow)
+      if (props.column?.edit && props.column?.editRow)
         return
 
       handleSubmit()
@@ -317,7 +326,7 @@ export default defineComponent({
     }
 
     function onClickOutside() {
-      if (props.column?.editable || unref(getRowEditable))
+      if (props.column?.edit && (props.column?.editable || unref(getRowEditable)))
         return
 
       const component = unref(getComponent)
@@ -413,7 +422,7 @@ export default defineComponent({
           onClick={this.handleEdit}
         >
           <div class="cell-content" title={this.column.ellipsis ? this.getValues ?? '' : ''}>
-            {this.column.editRender
+            {(this.column.edit && this.column.editRender)
               ? this.column.editRender({
                 text: this.value,
                 record: this.record as Recordable,
@@ -422,7 +431,7 @@ export default defineComponent({
               })
               : this.getValues ?? '\u00A0'}
           </div>
-          {!this.column.editRow && <FormOutlined class={`${this.prefixCls}__normal-icon`} />}
+          {(this.column.edit && !this.column.editRow) && <FormOutlined class={`${this.prefixCls}__normal-icon`} />}
         </div>
         {this.isEdit && (
           <Spin spinning={this.spinning}>

src/components/Table/src/hooks/useColumns.ts

@@ -99,7 +99,7 @@ function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: Bas
       fixed: 'right',
       ...actionColumn,
       flag: ACTION_COLUMN_FLAG,
-    })
+    } as BasicColumn)
   }
 }
 

src/components/Table/src/types/componentType.ts

@@ -1,4 +1,7 @@
-export type ComponentType =
+import type { ComponentProps } from '@/components/Form/src/types'
+
+export type ComponentType = keyof Pick<
+  ComponentProps,
   | 'Input'
   | 'InputNumber'
   | 'Select'
@@ -12,3 +15,4 @@ export type ComponentType =
   | 'RadioGroup'
   | 'RadioButtonGroup'
   | 'ApiRadioGroup'
+>

src/components/Table/src/types/table.ts

@@ -7,6 +7,7 @@ import type { ComponentType } from './componentType'
 import type { FormProps } from '@/components/Form'
 import type { VueNode } from '@/utils/propTypes'
 import type { RoleEnum } from '@/enums/roleEnum'
+import type { ComponentProps } from '@/components/Form/src/types'
 
 export declare type SortOrder = 'ascend' | 'descend'
 
@@ -416,7 +417,7 @@ export type CellFormat =
   | ((text: string, record: Recordable, index: number) => string | number)
   | Map<string | number, any>
 
-export interface BasicColumn extends Omit<ColumnProps<Recordable>, 'filters'> {
+export interface DefaultBasicColumn extends Omit<ColumnProps<Recordable>, 'filters'> {
   children?: BasicColumn[]
   filters?: {
     text: string
@@ -442,37 +443,48 @@ export interface BasicColumn extends Omit<ColumnProps<Recordable>, 'filters'> {
 
   format?: CellFormat
 
-  // Editable
-  edit?: boolean
+  // 权限编码控制是否显示
+  auth?: RoleEnum | RoleEnum[] | string | string[]
+  // 业务控制是否显示
+  ifShow?: boolean | ((column: BasicColumn) => boolean)
+
+  /**
+   * default is not editable
+   */
+  edit?: false
+}
+
+export interface EditableBasicColumn<T extends ComponentType = any> extends Omit<DefaultBasicColumn, 'edit'> {
+  edit: true
   editRow?: boolean
   editable?: boolean
-  editComponent?: ComponentType
+  editComponent: T
   editComponentProps?:
-  | ((opt: {
-    text: string | number | boolean | Recordable
-    record: Recordable
-    column: BasicColumn
-    index: number
-  }) => Recordable)
-  | Recordable
+    | ((opt: {
+      text: string | number | boolean | Recordable
+      record: Recordable
+      column: EditableBasicColumn
+      index: number
+    }) => ComponentProps[T])
+    | ComponentProps[T]
   editRule?: boolean | ((text: string, record: Recordable) => Promise<string>)
   editValueMap?: (value: any) => string
   onEditRow?: () => void
-  // 权限编码控制是否显示
-  auth?: RoleEnum | RoleEnum[] | string | string[]
-  // 业务控制是否显示
-  ifShow?: boolean | ((column: BasicColumn) => boolean)
   // 自定义修改后显示的内容
   editRender?: (opt: {
     text: string | number | boolean | Recordable
     record: Recordable
-    column: BasicColumn
+    column: EditableBasicColumn
     index: number
   }) => VNodeChild | JSX.Element
   // 动态 Disabled
   editDynamicDisabled?: boolean | ((record: Recordable) => boolean)
 }
 
+type EditableBasicColumns<T extends ComponentType = ComponentType> = T extends any ? EditableBasicColumn<T> : never
+
+export type BasicColumn = DefaultBasicColumn | EditableBasicColumns
+
 export interface ColumnChangeParam {
   dataIndex: string
   fixed: boolean | 'left' | 'right' | undefined

src/layouts/default/footer/index.vue

@@ -31,6 +31,6 @@ const getShowLayoutFooter = computed(() => {
 
 <template>
   <Footer v-if="getShowLayoutFooter" ref="footerRef" class="text-center text-[var(--normal-text)]">
-    <div>Copyright &copy;2023 {{ SITE_TITLE }}</div>
+    <div>Copyright &copy;2024 {{ SITE_TITLE }}</div>
   </Footer>
 </template>