简历录入表单组件

267 阅读4分钟

目标

替换ats管理端,校招内推,猎头端,社招端多端的简历创建和编辑。

使用antd4.24.10作为基础组件库。不使用外部传入作为组件,保持各个端样式和交互的统一。

基于Input,Select等二次封装MobileInput,ResumeUpload等组件。

form.list使用时的select避免多次请求。通过context解决。

支持upload方法的传入,封装上传组件。

整体方案设计

使用antd4.24.10作为基础组件库。基于Select,Input等二次封装如MobileInput,ResumeUpload等组件。通过内部schema形式描述form的渲染文件,后通过两个端的渲染器渲染form。

采用ats中schema的形式创建form,原因如下

pc端和移动端样式不统一,但是schema只是描述form接口,可以通过不同的formRender去实现pc,移动以及不同端的样式。

可以采用type="xxx"的形式,在ResumeForm内部实现各个端的formSchema,外部只需传入简单的type即可渲染相应form。

目前ats和校招端都是schema形式创建,替换起来更丝滑。

具体实现

组件的二次封装

pc端:MobileInput,DateRangePicker,DateNowPicker,DatePicker,InputTextArea,Uploader

移动端:MobileInput,DateRangePicker,DateNowPicker,DateRangePicker,InputTextArea,Uploader

schema的合并

每个fieldItem我们项目内部都是固定的配置项,但是可能各个端对每个配置项的需求不一样,比方同一个字段,有的希望是必填,有的是可选,所以我们通过schema合并的方式解决这些差异点

每一个FieldItem我们都绑定了唯一key(类型是RFFieldItemEnum,外部也可以获取到),外部可以通过传入mergedFieldItemMap,内部通过一个merge方法根据key进行合并。同时我们也抛出了RfAllFieldsMap,用户同样可以根据key获取到当前FieldItem配置的所有内容。
mergedFieldItemMap所能变化的值我们作了一定的控制,只有特定的如rules等是可以修改。像component这样的字段是不允许外部修改的。

如何避免options重复请求

options会重复的请求一般有两个情况,一是当formList中点击增加时,都会加载一次组件然后触发获取options的请求,并且回显时如果form.list中是多个,也会直接触发多个的请求。同时也会存在一个form有请求多个options的情况

上述的mergedFieldItemMap中我们提供了一个可选的requestOptions的类型给到用户
当中间层渲染器渲染每个FormItem时,会判断是否有此方法,如果有就执行,同时根据key存放在contenxt。下次再请求时会根据key对应的请求状态是否loading以及是否有值判断是否需要重复请求。

预览模式

在校招端,会有两种模式,一种是编辑模式,一种是预览模式。所以resume-form需要支持用户的预览

增加isPreview的props。在formItem的渲染时,我们根据是否预览模式,渲染不同的formItem,正常模式下渲染所配置的component,此处渲染专门给预览所使用的组件。我们可以根绝componentType来渲染内容,也可以根据传入的value类型来渲染内容。

pc和移动端渲染器的封装

主要是根据schema的配置项和UI样式定制两端的渲染器,当然我们也可以增加配置项对渲染器进行自定义样式。这个的配置项视具体情况而定。

文件上传处理

内部封装upload组件,然后通过componentProps传递getDownloadUrl,uploadFile,getDownLoadUrl等方法。

同时渲染器内部劫持组件类型为Uploader的schema,增加onUploadChange方法,用户获取文件当前上传状态,然后抛出给最外层context。在用户点击保存时,判断uploading状态判断是否能提交。

关于取消请求:在上传时存放在某个ref中,key是文件的uid,value就是上传方法。在组件卸载时,如果当前key对应的还有值,调用上传的cancel方法,即可取消上传。

项目包导出内容

ResumeFormPc,ResumeFormMobile

FieldNameEnum:每一项Card的key,在card上绑定了id,主要用于Anchor的跳转。

FieldItemEnum:每个FormItem都会有个key,用此枚举能获取到所有key,主要用于mergedFieldItemMap的创建。

FieldsMap: 所有项的key值,主要用于合并schema使用。外部可以获取到当前key对应的配置项。对当前项进行修改后,传入resume-form内部。

组件参数

属性说明类型默认值是否必传
type控制schema内容的,也是最重要的属性,内部会根据type定制各个端的schema。FormTypeEnumFormTypeEnum.CAMPUS非必传
fields需要合并的每一项fieldsFields-非必传
cards需要合并的每一项cards{ [key in FieldNameEnum]?: MergeCard }-非必传
formPropsantd的formPropsFormProps-非必传
isPreview是否预览,开启后将直接显示文字booleanfalse非必传
onEditfield旁的编辑按钮,如果传递了这个方法那么就展示编辑按钮。入参是id,用于anchor的跳转(移动端无此属性)(id: RFFieldNameEnum) => void-非必传
showAnchor展示anchor(移动端无此属性)booleanfalse非必传
anchorPropsantd的anchorProps(移动端无此属性)AnchorPropsfalse非必传