基於antd封裝一個高可用form元件 減少cv程式碼導致的bug
阿新 • • 發佈：2019-12-10
引言
在開發中臺過程中 我們的原型中有很多表單，antd有表單元件，但是粒度比較細，就單純元件而言，無可厚非，但是在開發過程中，可能會造成程式碼不夠聚合，有些表單公共邏輯無法提取，copy paste比較多，所以可以加以封裝，搞一個相容性和擴充套件性都契合專案本身的元件。
主要思路
我簡單查閱了一番資料，參考了一下別人的封裝方式，決定以Col和FormItem作為基本單元，進行表單的搭建，主要原因
- 可以將
FormItem的資訊和Col的資訊以物件方式傳入，這樣我們可以更加專注於元件的包含的資訊 減少CV程式碼可能導致的bug Col可以進行佈局的調整，可以調整表單單元位置和所佔寬度- 表單的元件形式是不定的，可能是input也有可能是select,所以可以進行外部傳入，通用屬性可以內部修改
- 複用性高，可以用它來實現一個純提交表單 和列表元件結合成可搜尋表單 或者其他任何專案裡需要自定義的一個表單
實現細節
抽象的FormItemInfo
export interface FormItemInfo { name: string, //label id: string, // 屬性 colLayOut?: object,// 列布局 formItemLayout?: object,// 表單項佈局 Comp?: any, // 傳入的元件 不傳預設input ruleArr?: RuleObj[],// 驗證規則 initialValue?: string, // 初始值 required?: boolean, // 是否必填 CompExtraProps?: object // 傳入元件額外屬性 isDetail?: boolean //是否需要被getFieldDecorator託管 }
baseForm元件
* @param name 表單項label * @param id 屬性欄位名 * @param colLayOut 列布局 * @param formItemLayout 表單項佈局 * @param Comp 傳入的元件 不傳預設input * @param ruleArr 驗證規則 長度只需傳入｛max:xxx｝驗證資訊是統一的 * @param initialValue 初始值 編輯時推薦使用antd的mapPropsToFields 不要手動設定回顯值 * @param required 是否必填 預設否 因為要統一寫驗證提示 * @param CompExtraProps 元件額外屬性 const mapToFormItem = (val: FormItemInfo) => { ...... // 是否傳入元件 const hasCompType = Comp && Comp.type // 根據元件型別 給出提示文字 const msg = getMsgByCompType(hasCompType && hasCompType.name, name) // 判斷是不是select元件 是的話 調整寬度樣式 const mixStyle = fixStyleByCompType(hasCompType && hasCompType.name) // 生成驗證規則 const rules = getFormRules(ruleArr || [], required || false, name) return ( <Col {...(colLayOut || defaultColSpan)} key={id}> {!isDetail ? <FormItem label={name} key={id} {...(formItemLayout || {})}> {/*用cloneElement方法給傳入的元件加新屬性*/} { getFieldDecorator(id, { initialValue: initialValue || '', rules, })(Comp ? React.cloneElement(Comp, { placeholder: msg, ...mixStyle, ...CompExtraProps }) : <Input type="text" placeholder={msg}/>) } </FormItem> : <FormItem label={name} key={id} {...(formItemLayout || {})}> {Comp}</FormItem>} </Col> ) ｝
統一方法
- 根據元件型別 給出提示文字
/**根據元件型別 給出提示文字
* @param type 元件型別 根據傳入元件的函式名判斷 在map裡維護
* @param name label名稱
* @returns 提示文字
* */
const getMsgByCompType = (name: string, type?: string): string => {
if (!type) {
return `請輸入${name}`
}
const map: { [props: string]: string } = {
Select: '請選擇',
Input: '請輸入',
default: '請輸入',
}
return `${map[type] || map.default}${name}`
}
- 生成驗證規則
// 生成驗證規則
* @param ruleArr 驗證規則 長度只需傳入｛max:xxx｝驗證資訊是統一的
* @param name 表單項label
* @param required 是否必填 預設否 因為要統一寫驗證提示
const getFormRules = (val: RuleObj[], required: boolean, name: string) => {
// 根據max生成最長輸入提示
const ruleArr: object[] = []
val.forEach(item => {
if ('max' in item) {
ruleArr.push({ ...item, message: `輸入資訊不能超過${item.max}字` })
} else {
ruleArr.push(item)
}
})
// 根據name生成報錯提示
return [{ required: required, message: `${name}不能為空` }, ...ruleArr]
- 根據元件型別 給出統一樣式修改
/**根據元件型別 給出統一樣式修改
* @param type 元件型別 根據傳入元件的函式名判斷 在map裡維護
* @returns 樣式物件
* */
const fixStyleByCompType = (type?: string): object => {
if (!type) {
return {}
}
const map: { [props: string]: object } = {
Select: { style: { width: '100%' } },
default: {},
}
return map[type] || map.default
}注意：當出現表單顯示一個詳情文字或者一個按鈕 此時需要用isDetail幹掉getFieldDecorator託管
實現提交表單SubmitForm
* @param form -`antd`的form
* @param title - 主標題
* @param subTitle - 分組標題
* @param FormItemInfos - 二維陣列 順序和數量和分組標題對應 存放表單項資訊
* @param isLoading - `dva-loading` 執行effects過程中的loading
* @param onSubmit - 傳入的submit方法
* @param buttonArea - 可選 不傳預設數提交和取消 傳入覆蓋
* @param children - 在表單下面 按鈕區域上面的傳入內容
* @param formLayOutType - 佈局方式 詳情見`getLayOutByType`方法
* @returns ReactNode
......
<Form onSubmit={onSubmit}>
<SubmitLayOut subTitle={subTitle} title={title} renderFormArea={renderFormArea}>
{children}
{buttonArea?buttonArea: <Row type="flex" gutter={24} justify="center">
<Col>
<Button type="primary" htmlType="submit" loading={isLoading}>提交</Button>
</Col>
<Col>
<Button type="default" onClick={() => router.go(-1)}>取消</Button>
</Col>
</Row>}
</SubmitLayOut>
</Form>對BaseForm的呼叫在renderFormArea方法裡
// 水平和垂直佈局
export enum FormLayOutType {
normal = 'normal',
vertical = 'vertical'
}
const renderFormArea = (idx: number) => {
// 在這邊加上normal表單的layout
const FormItemInfo = FormItemInfos[idx]
// 根據傳入引數 返回佈局型別
const _FormItemInfo = getLayOutByType(formLayOutType||FormLayOutType.normal, FormItemInfo)
return <BaseForm formItems={_FormItemInfo} form={form}/>
}FormItemInfos這裡是二維陣列，二維分別承載分組資訊和表單項資訊 而且在這裡用getLayOutByType封裝常用的水平 垂直佈局方式
這裡結合了我們業務裡的表單佈局 大標題 和小標題對錶單區域進行分組，我將佈局單獨搞了個SubmitLayOut元件 將渲染邏輯和樣式元件在其中實現 這樣也方便更換成其他LayOut
// SubmitLayOut
* @param title - 主標題
* @param subTitle - 分組標題
* @param renderFormArea - 根據分組的順序 渲染表單區域
* @param children - 傳入內容
......
<Card title={title} bordered={false} className={styles["special-card"]}>
<List itemLayout="vertical" className="special-list">
{subTitle.map((item,idx) => {
return (
<>
<Meta title={item}/>
<List.Item>
{renderFormArea(idx)}
</List.Item>
</>
)
})}
</List>
{children}
</Card>
結語
後續還實現了serachForm等業務相關性高的元件，所以個人覺得封裝的思路主要是
- 底層元件越純粹越好
- 中層可以實現一些適用性比較高的具體業務元件和通用方法
- 高層就具體要頁面的細節的方方面面了