From 4e2a8b8256b7a9923814fe3fbbc3b10975f9c9e9 Mon Sep 17 00:00:00 2001 From: K <1175047471@qq.com> Date: Mon, 8 Jan 2024 14:01:06 +0800 Subject: [PATCH] chore(components): improve ts types for BasicForm --- .env | 2 +- .env.development | 1 - .../src/components/editable/EditableCell.vue | 27 ++++++++---- src/components/Table/src/hooks/useColumns.ts | 2 +- .../Table/src/types/componentType.ts | 6 ++- src/components/Table/src/types/table.ts | 44 ++++++++++++------- src/layouts/default/footer/index.vue | 2 +- 7 files changed, 54 insertions(+), 30 deletions(-) diff --git a/.env b/.env index 8975d33b..d396fe74 100644 --- a/.env +++ b/.env @@ -2,7 +2,7 @@ VITE_PORT = 3000 # 网站标题 -VITE_GLOB_APP_TITLE = 芋道管理系统 +VITE_GLOB_APP_TITLE = 山东青鸟工业互联网 # 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符 VITE_GLOB_APP_SHORT_NAME = Yudao_Admin diff --git a/.env.development b/.env.development index 322f1b98..f7e98eb8 100644 --- a/.env.development +++ b/.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 diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue index 4df2fa24..49228bf8 100644 --- a/src/components/Table/src/components/editable/EditableCell.vue +++ b/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} >
- {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'}
- {!this.column.editRow && } + {(this.column.edit && !this.column.editRow) && } {this.isEdit && ( diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts index 83dcfa39..6348400c 100644 --- a/src/components/Table/src/hooks/useColumns.ts +++ b/src/components/Table/src/hooks/useColumns.ts @@ -99,7 +99,7 @@ function handleActionColumn(propsRef: ComputedRef, columns: Bas fixed: 'right', ...actionColumn, flag: ACTION_COLUMN_FLAG, - }) + } as BasicColumn) } } diff --git a/src/components/Table/src/types/componentType.ts b/src/components/Table/src/types/componentType.ts index 293f07c3..9a5560aa 100644 --- a/src/components/Table/src/types/componentType.ts +++ b/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' +> diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts index 9ed5ae30..a878e24c 100644 --- a/src/components/Table/src/types/table.ts +++ b/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 -export interface BasicColumn extends Omit, 'filters'> { +export interface DefaultBasicColumn extends Omit, 'filters'> { children?: BasicColumn[] filters?: { text: string @@ -442,37 +443,48 @@ export interface BasicColumn extends Omit, '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 extends Omit { + 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) 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 any ? EditableBasicColumn : never + +export type BasicColumn = DefaultBasicColumn | EditableBasicColumns + export interface ColumnChangeParam { dataIndex: string fixed: boolean | 'left' | 'right' | undefined diff --git a/src/layouts/default/footer/index.vue b/src/layouts/default/footer/index.vue index 5200b840..f5e5b372 100644 --- a/src/layouts/default/footer/index.vue +++ b/src/layouts/default/footer/index.vue @@ -31,6 +31,6 @@ const getShowLayoutFooter = computed(() => {