1、表单收集信息的统计
前端:
编写analysis.vue文件展示统计信息
核心方法:
1、跳转到新页面查看提交者的的填写信息
1 2 3 4 5 6 7
| viewAnswer(data){ getTemplate(data.formId).then(response=>{ localStorage.setItem("formCode",response.data.content); localStorage.setItem("formVal",data.formData); window.open('/tool/formDesigner/view'); }) },
|
2、获取当前调查统计的信息(可优化当前获取了完整信息,当调查人数较多时不适用),并获取统计分析结果
1 2 3 4 5 6 7 8 9 10 11
| getData(formId) { this.loading = true; queryByFormIdForUser(this.formId).then(response=>{ this.formDataList=response.data; this.loading = false; }) analysis(formId).then(response=>{ this.list=response.data; console.info("list:",this.list) }) },
|
3、对匿名用户进行处理,将其展示名称改为“匿名用户”,此处使用的展示名取自createBy
1 2 3 4 5 6 7 8 9
| filteredData() { // 使用 computed 属性实时过滤数据 return this.formDataList.filter((item) => { if (item.createBy==null){ item.createBy = "匿名用户"; } return item.createBy.includes(this.searchText); }); },
|
4、搜索功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <div> <!-- 搜索框 --> <el-input placeholder="请输入用户名进行搜索" v-model="searchText" clearable style="width: auto" ></el-input> <el-table v-loading="loading" :data="filteredData" style="width: 500px; height: 300px; overflow-y: auto;" > <el-table-column width="55" align="center" /> <el-table-column label="用户" align="center" prop="createBy"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template v-slot="scope"> <el-button size="mini" type="text" icon="el-icon-s-claim" @click="viewAnswer(scope.row)" v-hasPermi="['']" >查看</el-button> </template> </el-table-column> </el-table> </div>
|
api:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| export function queryByFormIdForUser(formId) { return request({ url: '/form/analysis/queryByFormIdForUser/' + formId, method: 'get', }) }
export function analysis(formId) { return request({ url: '/form/analysis/' + formId, method: 'get' }) }
|
后端:
核心方法:
1、对提交的调查信息进行统计
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
|
@Override public List<Analysis> formAnalysis(Long formId) { List<String> requestTypeList = CollUtil.newArrayList( ComponentType.RADIO, ComponentType.CHECK_BOX, ComponentType.SELECT ); List<VtsTemplateFormItem> formItemList = vtsTemplateFormItemService.queryByFormId(formId); Map<String, Analysis> formMap = new LinkedHashMap<>(); for (VtsTemplateFormItem vtsTemplateFormItem : formItemList) { if (requestTypeList.contains(vtsTemplateFormItem.getFormItemType())) { Analysis analysis = new Analysis(); analysis.setLabel(vtsTemplateFormItem.getFormItemLabel()); analysis.setType(vtsTemplateFormItem.getFormItemType()); formMap.put(vtsTemplateFormItem.getFormItemId(), analysis); } }
for (String formItemId : formMap.keySet()) { Analysis analysis = formMap.get(formItemId); List<Map<String, Object>> valueAndCount = vtsTemplateFieldDataService.statistcsByFieldId(formItemId, formId); System.out.println("=======" + valueAndCount); List<String> labels = vtsTemplateFormItemService.getLabel(formId, formItemId); List<Integer> value = new ArrayList<>(); if(CollectionUtil.isEmpty(valueAndCount)){ analysis.setFieldName(labels); analysis.setData(Collections.nCopies(labels.size(), 0)); continue; }
int valueAndCountIndex = 0; for (int i = 1; i <= labels.size(); i++) { Map<String, Object> stringObjectMap = valueAndCount.get(valueAndCountIndex); Integer fieldValue = Integer.parseInt(stringObjectMap.get("fieldValue").toString()); if (fieldValue == i) { value.add(Integer.parseInt(stringObjectMap.get("value").toString())); valueAndCountIndex++; }else { value.add(0); } }
analysis.setFieldName(labels); analysis.setData(value); Map<String, Integer> map = new HashedMap(); for (int i = 0; i < labels.size(); i++) { map.put(labels.get(i),value.get(i)); } analysis.setMap(map);
} List<Analysis> result = new ArrayList(formMap.values()); return result; }
|
2、匿名问卷
前端:
具体页面参考anonymousForms.vue、publishView.vue
核心方法:
1 2 3 4 5 6 7 8 9 10 11
| mounted(){ this.$nextTick(()=> { //获取要使用的模板id,此处是从路由的参数中取出formId this.loading=true; this.formId = this.$route.params.formId; getTemplate(this.formId).then(response=>{ this.form = response.data; this.loading=false; }) }) },
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <template> <div class="publish-view"> <div> //使用vue-qr生成二维码 <vue-qr v-if="writeLink" :size="194" :text="writeLink" /> </div> <div> <p class="link-text">网址:{{ writeLink }}</p> </div> </div> </template>
mounted() { //通过动态地址获取到模版id this.formId = this.$route.params.formId; let url = window.location.protocol + '//' + window.location.host this.writeLink = `${url}/template/template/anonymousForms/${this.formId}`; },
|
3、表单修改功能
前端:在模板保存的基础上进行,不做修改
后端:
对于表单项因修改而需要更新的问题,这里采取发布后将原有的表单项全部删除再添加新的表单项(这一步并不对已提交的问卷回答做处理,只针对模板的表单项)
以下代码分别为添加(修改)表单、发布表单
1 2 3 4 5 6 7 8 9 10 11 12 13
| @SaCheckPermission("template:template:add") @Log(title = "表单代码", businessType = BusinessType.INSERT) @RepeatSubmit() @PostMapping() public R<Void> add(@Validated(AddGroup.class) @RequestBody VtsTemplateCodeBo bo) { if (bo.getFormId() != null){ bo.setStatus("0"); return toAjax(iVtsTemplateCodeService.updateByBo(bo)); }else{ return toAjax(iVtsTemplateCodeService.insertByBo(bo)); } }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| public R<Void> publish(Long formId) { SysUser user = userMapper.selectUserById(getUserId()); Long deptId = user.getDeptId();
VtsTemplateCodeVo vtsTemplateCodeVo = vtsTemplateCodeService.queryById(formId); vtsTemplateCodeVo.setStatus("1"); vtsTemplateCodeService.updateByBo(BeanUtil.toBean(vtsTemplateCodeVo, VtsTemplateCodeBo.class)); if(deptId !=null){ VtsTemplateCodeDept vtsTemplateCodeDept = selectOneByDeptIdAndFormId(deptId, formId); if(ObjectUtil.isEmpty(vtsTemplateCodeDept)){ System.out.println("新发布"); baseMapper.insert(new VtsTemplateCodeDept(deptId, formId));
}else { System.out.println("修改表单后再发布"); formItemService.deleteByFormId(formId);
} formItemService.createFormItems(formId, vtsTemplateCodeVo.getContent()); return R.ok("发表成功"); }else { return R.fail("该用户没有部门,只能匿名调查"); } }
|
4、上传附件的相关配置
1、修改previewRender.js问卷(ruoyi-ui/src/components/formDesigner/custom/previewRender.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
dataObject.attrs['headers'] = {"Authorization":"Bearer " + getToken()};
dataObject.attrs['on-success'] = file=>{ var filename=file.data.fileName let fileObj = {name: filename, url: file.data.url} let oldValue = []; if(dataObject.props.value) { oldValue = JSON.parse(dataObject.props.value); }else { oldValue = []; } if (oldValue) { oldValue.push(fileObj) } else { oldValue = [fileObj] } self.$emit('input',JSON.stringify(oldValue)); }
|
2、修改viewRender.js问卷(ruoyi-ui/src/components/formDesigner/custom/viewRender.js)
1 2 3 4
|
dataObject.attrs['headers'] = {"Authorization":"Bearer " + getToken()};
|
3、设置默认的上传地址,修改upload.js
(ruoyi-ui/src/components/formDesigner/custom/items/upload.js)
1 2
| action:'http://localhost/dev-api/system/oss/upload',
|