Skip to content

Commit

Permalink
refactor: 优化 GiForm 组件代码（同步 GiDemo 更新）
Browse files Browse the repository at this point in the history
  • Loading branch information
@Charles7c
Charles7c committed Oct 16, 2024
1 parent 795932e commit ad31d9f
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 194 deletions.
261 changes: 72 additions & 189 deletions src/components/GiForm/src/GiForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,196 +1,30 @@
<template>
<a-form ref="formRef" v-bind="options.form" :model="modelValue" :auto-label-width="true">
<a-form ref="formRef" :auto-label-width="true" v-bind="options.form" :model="modelValue">
<a-row :gutter="14" v-bind="options.row" class="w-full">
<template v-for="(item, index) in columns" :key="item.field">
<a-col
v-if="!isHide(item.hide)"
v-show="index <= (options.fold?.index || 0) || (index >= (options.fold?.index || 0) && !collapsed)"
:span="item.span || 12"
v-bind="item.col || item.span ? item.col : options.col"
>
<a-form-item
v-bind="item.item"
:label="item.label"
:field="item.field"
:rules="item.rules"
:disabled="isDisabled(item.disabled)"
>
<slot :name="item.field" v-bind="{ disabled: isDisabled(item.disabled) }">
<template v-if="item.type === 'input'">
<a-input
:placeholder="`请输入${item.label}`"
v-bind="(item.props as A.InputInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
></a-input>
</template>

<template v-if="item.type === 'input-password'">
<a-input-password
:placeholder="`请输入${item.label}`"
v-bind="(item.props as A.InputInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
></a-input-password>
</template>

<template v-if="item.type === 'input-number'">
<a-input-number
:placeholder="`请输入${item.label}`"
v-bind="(item.props as A.InputNumberInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
></a-input-number>
</template>

<template v-if="item.type === 'textarea'">
<a-textarea
:placeholder="`请输入${item.label}`"
:show-word-limit="true"
v-bind="(item.props as A.TextareaInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
></a-textarea>
</template>

<template v-if="item.type === 'select'">
<a-select
:placeholder="`请选择${item.label}`"
v-bind="(item.props as A.SelectInstance['$props'])"
:options="dicData[item.field] || (item.options as A.SelectInstance['$props']['options'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
></a-select>
</template>

<template v-if="item.type === 'cascader'">
<a-cascader
:placeholder="`请选择${item.label}`"
v-bind="(item.props as A.CascaderInstance['$props'])"
:options="dicData[item.field] || (item.options as A.CascaderInstance['$props']['options'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
/>
</template>

<template v-if="item.type === 'tree-select'">
<a-tree-select
:placeholder="`请选择${item.label}`"
v-bind="(item.props as A.TreeSelectInstance['$props'])"
:data="dicData[item.field] || (item.data as A.TreeSelectInstance['$props']['data'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
>
</a-tree-select>
</template>

<template v-if="item.type === 'radio-group'">
<a-radio-group
v-bind="(item.props as A.RadioGroupInstance['$props'])"
:options="dicData[item.field] || (item.options as A.RadioGroupInstance['$props']['options'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
></a-radio-group>
</template>

<template v-if="item.type === 'checkbox-group'">
<a-checkbox-group
v-bind="(item.props as A.CheckboxGroupInstance['$props'])"
:options="dicData[item.field] || (item.options as A.CheckboxGroupInstance['$props']['options'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
></a-checkbox-group>
</template>

<template v-if="item.type === 'date-picker'">
<a-date-picker
placeholder="请选择日期"
v-bind="(item.props as A.DatePickerInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
></a-date-picker>
</template>

<template v-if="item.type === 'time-picker'">
<a-time-picker
placeholder="请选择时间"
v-bind="(item.props as A.TimePickerInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
>
</a-time-picker>
</template>

<template v-if="item.type === 'year-picker'">
<a-year-picker
v-bind="(item.props as A.YearPickerInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"></a-year-picker>
</template>

<template v-if="item.type === 'month-picker'">
<a-month-picker
v-bind="(item.props as A.MonthPickerInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"></a-month-picker>
</template>

<template v-if="item.type === 'quarter-picker'">
<a-quarter-picker
v-bind="(item.props as A.QuarterPickerInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"></a-quarter-picker>
</template>

<template v-if="item.type === 'week-picker'">
<a-week-picker
v-bind="(item.props as A.WeekPickerInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"></a-week-picker>
</template>

<a-col v-if="!isHide(item.hide)" v-show="colVShow(index)" :span="item.span || 12"
v-bind="item.col || item.span ? item.col : options.col">
<a-form-item v-bind="item.item" :label="item.label" :field="item.field" :rules="item.rules"
:disabled="isDisabled(item.disabled)">
<slot v-if="!['group-title'].includes(item.type || '')" :name="item.field"
v-bind="{ disabled: isDisabled(item.disabled) }">
<template v-if="item.type === 'range-picker'">
<DateRangePicker v-bind="(item.props as A.RangePickerInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)" />
</template>

<template v-if="item.type === 'color-picker'">
<a-color-picker
v-bind="(item.props as A.ColorPickerInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"></a-color-picker>
</template>

<template v-if="item.type === 'rate'">
<a-rate
v-bind="(item.props as A.RateInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
/>
</template>

<template v-if="item.type === 'switch'">
<a-switch
v-bind="(item.props as A.SwitchInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
/>
</template>

<template v-if="item.type === 'slider'">
<a-slider
v-bind="(item.props as A.SliderInstance['$props'])"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"
/>
</template>
<component v-else :is="`a-${item.type}`" v-bind="getComponentBindProps(item)"
:model-value="modelValue[item.field as keyof typeof modelValue]"
@update:model-value="valueChange($event, item.field)"></component>
</slot>
<slot v-else name="group-title">
<a-alert v-bind="item.props">{{ item.label }}</a-alert>
</slot>
</a-form-item>
</a-col>
</template>
<a-col v-if="!options.btns?.hide" :span="options.btns?.span || 12" v-bind="options.btns?.col">
<a-space wrap :size="[8, 16]" style="flex-wrap: nowrap">
<a-space wrap>
<slot name="suffix">
<a-button type="primary" @click="emit('search')">
<template #icon><icon-search /></template>
Expand All @@ -215,7 +49,6 @@
</template>

<script setup lang="ts">
import type * as A from '@arco-design/web-vue'
import { cloneDeep } from 'lodash-es'
import type { Columns, ColumnsItem, ColumnsItemDisabled, ColumnsItemHide, Options } from './type'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
Expand All @@ -234,14 +67,63 @@ const emit = defineEmits<{
(e: 'reset'): void
}>()
const formRef = ref('formRef')
const collapsed = ref(props.options.fold?.defaultCollapsed ?? false)
const dicData: Record<string, any> = reactive({})
// col组件的显示隐藏
const colVShow = (index: number) => {
return index <= (props.options.fold?.index || 0) || (index >= (props.options.fold?.index || 0) && !collapsed.value)
}
// 组件的默认props配置
const getComponentBindProps = (item: ColumnsItem) => {
const obj: Partial<ColumnsItem['props'] & { placeholder: string }> = {}
if (item.type === 'input') {
obj.placeholder = `请输入${item.label}`
}
if (item.type === 'input-password') {
obj.placeholder = `请输入${item.label}`
}
if (item.type === 'input-number') {
obj.placeholder = `请输入${item.label}`
}
if (item.type === 'textarea') {
obj.placeholder = `请输入${item.label}`
obj.maxLength = 200
}
if (item.type === 'select') {
obj.placeholder = `请选择${item.label}`
obj.options = dicData[item.field] || item.options
}
if (item.type === 'cascader') {
obj.placeholder = `请选择${item.label}`
obj.options = dicData[item.field] || item.options
}
if (item.type === 'tree-select') {
obj.placeholder = `请选择${item.label}`
obj.data = dicData[item.field] || item.data
}
if (item.type === 'radio-group') {
obj.options = dicData[item.field] || item.options
}
if (item.type === 'checkbox-group') {
obj.options = dicData[item.field] || item.options
}
if (item.type === 'date-picker') {
obj.placeholder = '请选择日期'
}
if (item.type === 'time-picker') {
obj.allowClear = true
obj.placeholder = `请选择时间`
}
return { ...obj, ...item.props }
}
const valueChange = (value: any, field: string) => {
emit('update:modelValue', Object.assign(props.modelValue, { [field]: value }))
}
const collapsed = ref(props.options.fold?.defaultCollapsed ?? false)
const formRef = ref<A.FormInstance>()
defineExpose({ formRef })
const isHide = (hide?: ColumnsItemHide<boolean | object>) => {
if (hide === undefined) return false
if (typeof hide === 'boolean') return hide
Expand All @@ -258,7 +140,8 @@ const isDisabled = (disabled?: ColumnsItemDisabled<boolean | object>) => {
}
}
const dicData: Record<string, any> = reactive({})
defineExpose({ formRef })
props.columns.forEach((item) => {
if (item.request && typeof item.request === 'function' && item?.init) {
item.request(props.modelValue).then((res) => {
Expand Down Expand Up @@ -305,7 +188,7 @@ watch(cloneForm as any, (newVal, oldVal) => {
</script>

<style lang="scss" scoped>
:deep(.arco-form-item-layout-inline) {
margin-right: 0;
}
:deep(.arco-form-item-layout-inline) {
margin-right: 0;
}
</style>
18 changes: 13 additions & 5 deletions src/components/GiForm/src/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,32 @@ import type * as A from '@arco-design/web-vue'

export type FormType =
| 'input'
| 'input-password'
| 'input-number'
| 'select'
| 'radio-group'
| 'checkbox-group'
| 'textarea'
| 'date-picker'
| 'time-picker'
| 'year-picker'
| 'quarter-picker'
| 'week-picker'
| 'range-picker'
| 'month-picker'
| 'time-picker'
| 'color-picker'
| 'input-number'
| 'rate'
| 'switch'
| 'slider'
| 'cascader'
| 'tree-select'
| 'input-password'
| 'upload'
| 'group-title'

export type ColumnsItemPropsKey =
| keyof A.InputInstance['$props']
| keyof A.InputPasswordInstance['$props']
| keyof A.InputNumberInstance['$props']
| keyof A.SelectInstance['$props']
| keyof A.TextareaInstance['$props']
| keyof A.DatePickerInstance['$props']
Expand All @@ -35,13 +39,14 @@ export type ColumnsItemPropsKey =
| keyof A.RangePickerInstance['$props']
| keyof A.RadioGroupInstance['$props']
| keyof A.CheckboxGroupInstance['$props']
| keyof A.InputNumberInstance['$props']
| keyof A.ColorPickerInstance['$props']
| keyof A.RateInstance['$props']
| keyof A.SwitchInstance['$props']
| keyof A.SliderInstance['$props']
| keyof A.CascaderInstance['$props']
| keyof A.TreeSelectInstance['$props']
| keyof A.UploadInstance['$props']
| keyof A.AlertInstance['$props']

export type ColumnsItemHide<F> = boolean | ((form: F) => boolean)
export type ColumnsItemDisabled<F> = boolean | ((form: F) => boolean)
Expand Down Expand Up @@ -71,18 +76,21 @@ export interface ColumnsItem<F = any> {
item?: Omit<A.FormItemInstance['$props'], 'label' | 'field'> // a-form-item的props
props?:
& A.InputInstance['$props']
& A.InputPasswordInstance['$props']
& A.InputNumberInstance['$props']
& A.SelectInstance['$props']
& A.TextareaInstance['$props']
& A.DatePickerInstance['$props']
& A.TimePickerInstance['$props']
& A.RadioGroupInstance['$props']
& A.CheckboxGroupInstance['$props']
& A.InputNumberInstance['$props']
& A.RateInstance['$props']
& A.SwitchInstance['$props']
& A.SliderInstance['$props']
& A.CascaderInstance['$props']
& A.TreeSelectInstance['$props']
& A.UploadInstance['$props']
& A.AlertInstance['$props']
rules?: A.FormItemInstance['$props']['rules'] // 表单校验规则
// 下拉列表|复选框组|单选框组|级联选择组件的options
options?:
Expand Down

0 comments on commit ad31d9f

Please sign in to comment.