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 8975d33..d396fe7 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 322f1b9..f7e98eb 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 4df2fa2..49228bf 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}
>
<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}>
diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts
index 83dcfa3..6348400 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<BasicTableProps>, 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 293f07c..9a5560a 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 9ed5ae3..a878e24 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<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
diff --git a/src/layouts/default/footer/index.vue b/src/layouts/default/footer/index.vue
index 5200b84..f5e5b37 100644
--- a/src/layouts/default/footer/index.vue
+++ b/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 ©2023 {{ SITE_TITLE }}</div>
+ <div>Copyright ©2024 {{ SITE_TITLE }}</div>
</Footer>
</template>