目标
替换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。 | FormTypeEnum | FormTypeEnum.CAMPUS | 非必传 |
| fields | 需要合并的每一项fields | Fields | - | 非必传 |
| cards | 需要合并的每一项cards | { [key in FieldNameEnum]?: MergeCard } | - | 非必传 |
| formProps | antd的formProps | FormProps | - | 非必传 |
| isPreview | 是否预览,开启后将直接显示文字 | boolean | false | 非必传 |
| onEdit | field旁的编辑按钮,如果传递了这个方法那么就展示编辑按钮。入参是id,用于anchor的跳转(移动端无此属性) | (id: RFFieldNameEnum) => void | - | 非必传 |
| showAnchor | 展示anchor(移动端无此属性) | boolean | false | 非必传 |
| anchorProps | antd的anchorProps(移动端无此属性) | AnchorProps | false | 非必传 |