使用Vue生成动态表单
开需求会了,产品说这次需求的表单比较多,目前有18个,后期的表单可能会有增加、修改。我作为这次的前端开发,看到这样的需求,心里知道要这样搞不得把自己累死,首先表单居多,还会有变更,以后维护起来也让人心力憔悴。
于是我提议做动态表单,做一个表单的配置系统,在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求,系统部分由后端自行开发,我要处理的部分是动态生成表单,展现提交的表单,以及对表单的处理情况。
数据接口设计
表单类型的接口就不用说了,这个比较简单。我跟后端约定了一个预备创建工单接口,这个接口是后端告知前端,需要生成一个什么样的表单。
预备创建表单接口(其中字段解释说明):
id
name
type
thttp://www.haoziyuan.ccitle
prompt_msg
selectObj
{ "code":0, "msg":"success", "data":{ "list":[{ "id":10, "name":"check_type", "type":"select_http://www.haoziyuan.ccitem", "thttp://www.haoziyuan.ccitle":"审核类型", "prompt_msg":"请填写审核类型", "selectObj":[{ "id":1, "http://www.haoziyuan.ccitem":"预审核" },{ "id":2, "http://www.haoziyuan.ccitem":"患者审核" }], "val":null, "rank":0 },{ "id":16, "name":"bank_branch_info", "type":"string", "thttp://www.haoziyuan.ccitle":"支行信息", "prompt_msg":"请填写支行信息", "selectObj":null, "val":null, "rank":0 },{ "id":19, "name":"project_content", "type":"multiple", "thttp://www.haoziyuan.ccitle":"项目内容", "prompt_msg":"请填写项目内容", "selectObj":null, "val":null, "rank":0 },{ "id":22, "name":"project_extension_time", "type":"integer", "thttp://www.haoziyuan.ccitle":"项目延长时间", "prompt_msg":"请填写项目延长时间", "selectObj":null, "val":null, "rank":0 },{ "id":24, "name":"images", "type":"images", "thttp://www.haoziyuan.ccitle":"图片", "prompt_msg":"请上传图片", "selectObj":null, "val":null, "rank":0 }] } }
通过Vue动态组件渲染表单
现在预备创建表单接口文档都了,该怎么渲染动态表单呢?动态表单的元素类型有5类,按照这个类别创建五个元素组件。
1.上传图片组件
上传图片组件这里使用了 Uploader组件。
{{http://www.haoziyuan.ccitem.thttp://www.haoziyuan.ccitle}}