From 436cc6bdfc2d4389b60181cadf6faf3c5a49cf7c Mon Sep 17 00:00:00 2001 From: Charles7c Date: Fri, 21 Mar 2025 21:14:39 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20GiForm?= =?UTF-8?q?=E3=80=81GiEditTable=EF=BC=88=E5=90=8C=E6=AD=A5=20GiDemo=20?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GiEditTable/GiEditTable.vue | 70 +++++++++++----- src/components/GiForm/src/GiForm.vue | 82 +++++++++++++------ .../GiTable/src/components/ColumnSetting.vue | 2 +- src/types/components.d.ts | 2 +- src/views/monitor/log/login/index.vue | 2 +- src/views/monitor/log/operation/index.vue | 2 +- src/views/system/menu/MenuAddModal.vue | 4 +- 7 files changed, 113 insertions(+), 51 deletions(-) diff --git a/src/components/GiEditTable/GiEditTable.vue b/src/components/GiEditTable/GiEditTable.vue index bbfe743..5e0a91b 100644 --- a/src/components/GiEditTable/GiEditTable.vue +++ b/src/components/GiEditTable/GiEditTable.vue @@ -45,15 +45,18 @@ import type { TableColumnData, TableData } from '@arco-design/web-vue' import type { ColumnItem, Disabled } from './type' defineOptions({ name: 'GiEditTable', inheritAttrs: false }) + const props = withDefaults(defineProps(), { cellDisabled: false, }) +/** 事件定义 */ const emit = defineEmits<{ (e: 'tr-dblclick', value: { record: any, rowIndex: number }): void (e: 'td-dblclick', value: { record: any, rowIndex: number, column: TableColumnData }): void }>() +/** 插槽定义 */ defineSlots<{ [propsName: string]: (props: { record: T, rowIndex: number, column: ColumnItem }) => void }>() @@ -66,36 +69,61 @@ interface Props { const attrs = useAttrs() +/** 表单数据 */ const form = computed(() => ({ tableData: props.data })) +/** 表单实例 */ const formRef = useTemplateRef('formRef') +/** 获取表头必填星号*样式 */ const headerCellClass = (col: ColumnItem) => { return col.required ? 'gi_column_require' : '' } -const getComponentBindProps = (col: ColumnItem) => { - // 组件默认配置映射表 - const ConfigMap = new Map & { placeholder?: string | string[] }>>([ - ['input', { allowClear: true, placeholder: `请输入${col.title}`, maxLength: 50 }], - ['input-number', { placeholder: `请输入${col.title}` }], - ['textarea', { allowClear: false, placeholder: `请填写${col.title}`, maxLength: 200 }], - ['input-tag', { allowClear: true, placeholder: `请输入${col.title}` }], - ['mention', { allowClear: true, placeholder: `请输入${col.title}` }], - ['select', { allowClear: true, placeholder: `请选择${col.title}` }], - ['tree-select', { allowClear: true, placeholder: `请选择${col.title}` }], - ['cascader', { allowClear: true, placeholder: `请选择${col.title}` }], - ['radio-group', {}], - ['checkbox-group', {}], - ['date-picker', { allowClear: true, placeholder: '请选择日期' }], - ['time-picker', { allowClear: true, placeholder: '请选择时间' }], - ]) - // 获取默认配置 - const defaultProps = ConfigMap.get(col.type) || {} - // 合并默认配置和自定义配置 - return { ...defaultProps, ...col.props } +/** 静态配置 */ +const STATIC_PROPS = new Map>([ + ['input', { allowClear: true, maxLength: 20 }], + ['textarea', { allowClear: false, maxLength: 200 }], + ['input-tag', { allowClear: true }], + ['mention', { allowClear: true }], + ['select', { allowClear: true }], + ['tree-select', { allowClear: true }], + ['cascader', { allowClear: true }], + ['date-picker', { allowClear: true }], + ['time-picker', { allowClear: true }], +]) + +/** 获取组件默认占位 */ +const getPlaceholder = (item: ColumnItem) => { + if (!item.type) return undefined + if (['input', 'input-tag', 'mention'].includes(item.type)) { + return `请输入${item.title}` + } + if (['textarea'].includes(item.type)) { + return `请填写${item.title}` + } + if (['select', 'tree-select', 'cascader'].includes(item.type)) { + return `请选择${item.title}` + } + if (['date-picker'].includes(item.type)) { + return '请选择日期' + } + if (['time-picker'].includes(item.type)) { + return '请选择时间' + } + return undefined } +/** 获取组件默认配置 */ +const getComponentBindProps = (col: ColumnItem) => { + return { + ...STATIC_PROPS.get(col.type) || {}, + placeholder: getPlaceholder(col), + ...col.props, + } +} + +/** 获取组件默认规则 */ const getRuleMessage = (col: ColumnItem) => { if (['input', 'input-number', 'input-tag', 'mention'].includes(col.type ?? '')) { return `请输入${col.title}` @@ -106,12 +134,14 @@ const getRuleMessage = (col: ColumnItem) => { return `请选择${col.title}` } +/** 判断是否禁用 */ const isDisabled: Props['cellDisabled'] = (p) => { if (typeof props?.cellDisabled === 'boolean') return props.cellDisabled if (typeof props?.cellDisabled === 'function') return props.cellDisabled(p) return false } +/** 暴露表单实例 */ defineExpose({ formRef }) diff --git a/src/components/GiForm/src/GiForm.vue b/src/components/GiForm/src/GiForm.vue index 00764f0..7e6027b 100644 --- a/src/components/GiForm/src/GiForm.vue +++ b/src/components/GiForm/src/GiForm.vue @@ -29,7 +29,7 @@ @@ -135,35 +136,66 @@ const defaultGridItemProps = computed(() => { }) const formRef = useTemplateRef('formRef') +/** 是否折叠 */ const collapsed = ref(props.defaultCollapsed) +/** 数据字典 */ const dicData: Record = reactive({}) -// 组件的默认props配置 +/** 静态配置 */ +const STATIC_PROPS = new Map>([ + ['input', { allowClear: true, maxLength: 255, showWordLimit: !props.search }], + ['input-password', { allowClear: true, showWordLimit: !props.search }], + ['textarea', { allowClear: false, maxLength: 200, showWordLimit: !props.search, autoSize: { minRows: 3, maxRows: 5 } }], + ['input-tag', { allowClear: true }], + ['mention', { allowClear: true }], + ['select', { allowClear: true }], + ['tree-select', { allowClear: true }], + ['cascader', { allowClear: true }], + ['date-picker', { allowClear: true }], + ['time-picker', { allowClear: true }], +]) + +/** 获取组件默认占位 */ +const getPlaceholder = (item: ColumnItem) => { + if (!item.type) return undefined + if (['input', 'input-number', 'input-password', 'textarea', 'input-tag', 'mention'].includes(item.type)) { + return `请输入${item.label}` + } + if (['select', 'tree-select', 'cascader'].includes(item.type)) { + return `请选择${item.label}` + } + if (['date-picker'].includes(item.type)) { + return '请选择日期' + } + if (['time-picker'].includes(item.type)) { + return '请选择时间' + } + return undefined +} + +/** 获取选项数据 */ +const getOptions = (item: ColumnItem): any[] | undefined => { + if (!item.type) return undefined + /** 需要选项数据的组件类型 */ + const arr = ['select', 'tree-select', 'cascader', 'radio-group', 'checkbox-group'] + if (arr.includes(item.type)) { + return dicData[item.field] || [] + } + return undefined +} + +/** 获取组件绑定属性 */ const getComponentBindProps = (item: ColumnItem) => { - // 组件默认配置映射表 - const ConfigMap = new Map>([ - ['input', { allowClear: true, placeholder: `请输入${item.label}`, maxLength: 255, showWordLimit: !props.search }], - ['input-password', { placeholder: `请输入${item.label}`, showWordLimit: !props.search }], - ['input-number', { placeholder: `请输入${item.label}` }], - ['textarea', { allowClear: false, placeholder: `请输入${item.label}`, maxLength: 200, showWordLimit: !props.search, autoSize: { minRows: 3, maxRows: 5 } }], - ['input-tag', { allowClear: true, placeholder: `请输入${item.label}` }], - ['mention', { allowClear: true, placeholder: `请输入${item.label}` }], - ['select', { allowClear: true, placeholder: `请选择${item.label}`, options: dicData[item.field] || [] }], - ['tree-select', { allowClear: true, placeholder: `请选择${item.label}` }], - ['cascader', { allowClear: true, placeholder: `请选择${item.label}`, options: dicData[item.field] || [] }], - ['radio-group', { options: dicData[item.field] || [] }], - ['checkbox-group', { options: dicData[item.field] || [] }], - ['date-picker', { allowClear: true, placeholder: '请选择日期' }], - ['time-picker', { allowClear: true, placeholder: '请选择时间' }], - ]) - // 获取默认配置 - const defaultProps = ConfigMap.get(item.type) || {} - // 合并默认配置和自定义配置 - return { ...defaultProps, ...item.props } + return { + ...STATIC_PROPS.get(item.type) || {}, + placeholder: getPlaceholder(item), + options: getOptions(item), + ...item.props, + } } /** 表单数据更新 */ -const valueChange = (value: any, field: string) => { +const updateValue = (value: any, field: string) => { emit('update:modelValue', Object.assign(props.modelValue, { [field]: value })) } diff --git a/src/components/GiTable/src/components/ColumnSetting.vue b/src/components/GiTable/src/components/ColumnSetting.vue index 2666272..8eb2d22 100644 --- a/src/components/GiTable/src/components/ColumnSetting.vue +++ b/src/components/GiTable/src/components/ColumnSetting.vue @@ -30,7 +30,7 @@
- +
h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize), }, diff --git a/src/views/monitor/log/operation/index.vue b/src/views/monitor/log/operation/index.vue index c269c91..4629255 100644 --- a/src/views/monitor/log/operation/index.vue +++ b/src/views/monitor/log/operation/index.vue @@ -83,7 +83,7 @@ const { const columns: TableInstance['columns'] = [ { title: '序号', - width: 66, + minWidth: 66, align: 'center', render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize), }, diff --git a/src/views/system/menu/MenuAddModal.vue b/src/views/system/menu/MenuAddModal.vue index 771ddde..bd5bb3d 100644 --- a/src/views/system/menu/MenuAddModal.vue +++ b/src/views/system/menu/MenuAddModal.vue @@ -40,7 +40,7 @@ - + @@ -80,7 +80,7 @@ - +