2.调查问卷系统-修改formDesigner功能

1、修改formDesigner源码实现模板保存按钮功能（供参考）

前端：

1、按钮与调用的方法（ruoyi-ui/src/components/formDesigner/designer.vue）

1
<el-button icon="el-icon-add" type="text" @click="saveHandle">保存</el-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
saveHandle() {
      let  form = {};
      form.formName = this.formConf.formRef;
      form.content = this.code;
      form.formId=this.formId;
      this.$confirm('确定保存吗？','模板保存',{type: 'warning'}).then(() => {
        // 写一个调用，将this.code，连同其他数据，如表单模板名称等，发送到后端保存\
        addTemplate(form).then(response => {
          this.$modal.msgSuccess("保存成功");
        })
		//路由跳转
        this.$router.push({ name: 'Template'});
      });
    },

api：

1
2
3
4
5
6
7
8
// 新增表单代码
export function addTemplate(data) {
  return request({
    url: '/template/template',
    method: 'post',
    data: data
  })
}

后端：

代码由ruoyi代码生成模块生成，主要是最基本的增删改查

2、用户调查填写功能

前端：

编写quesitionNaire.vue文件用于用户填写调查的页面

核心方法：

1、获取当前用户需要填写的所有表单

1
2
3
4
5
6
7
8
9
10
11
12
mounted(){
    this.$nextTick(()=> {
      //获取当前用户要使用的所有表单
      this.loading=true;
      getForms().then(response=>{
        response.data.forEach(templateId=>{
          this.forms.push(templateId)
          this.loading=false;
        })
      })
    })
  },

2、提交填写的信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
handlerSubForm(formId,content,index){
      //此处的方法会对填写的信息进行整理
      this.$refs['formBuilder'][index].validate();
      //var test = this.$refs['formBuilder'][index]._data.itemList;
      // console.info(this.$refs['formBuilder'][index]);
      //此处提交表单各个内容
      let  questions = {};
      questions.name = this.$store.state.user.name;
      questions.templateId = formId;
      questions.content = content;
      questions.formData = this.formVal;
      // console.info(questions)
      addSurvey(questions).then(response=>{
        this.$modal.msgSuccess("提交成功");
      })
    },

api：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//获取当前用户需要填写的表单（根据部门来分的）
export function getForms() {
  return request({
    url: '/template/template/getForms',
    method: 'get'
  })
}
// 新增用户调查
export function addSurvey(data) {
  return request({
    url: '/survey/survey',
    method: 'post',
    data: data
  })
}

后端：

核心方法：

1、根据用户id和他的部门获取需要填写的表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public List<VtsTemplateCodeVo> getForm() {
       //获取当前登录用户信息
       SysUser user = userMapper.selectUserById(getUserId());
       Long deptId = user.getDeptId();
       QueryWrapper<VtsTemplateCodeDept> query = Wrappers.query();
       //查看是否有部门
       List<Long> formIds = new ArrayList();
       if (deptId != null) {
           //有部门，查询当前部门的  自定义表单
           query.eq("dept_id", deptId);
           List<VtsTemplateCodeDept> vtsTemplateCodeDepts = baseMapper.selectList(query);
           //添加到结果
           for (VtsTemplateCodeDept vtsTemplateCodeDept : vtsTemplateCodeDepts) {
               formIds.add(vtsTemplateCodeDept.getFormId());
           }
       }
       return vtsTemplateCodeService.queryByFormIds(formIds);
   }

2、保存用户提交的调查

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
/**
    * 新增用户调查
    */
   @Override
   public Boolean insertByBo(TqQuestionsBo bo) {
       TqQuestions add = BeanUtil.toBean(bo, TqQuestions.class);
       validEntityBeforeSave(add);
       boolean flag = baseMapper.insert(add) > 0;
       //将数据填写到vts_template_form_data表里
       Long formId = bo.getTemplateId();
       Map<String, Object> formData = JsonUtils.parseObject(bo.getFormData(), Map.class);
       Map<String, Object> content = JsonUtils.parseObject(bo.getContent(), Map.class);
       List<Map<String, Object>> list = MapUtil.get(content, "list", List.class);
       saveFormData(formId, formData, list);

       //将数据填写到vts_template_field_data表里
       saveFieldData(add, list, formData, formId);
       if (flag) {
           bo.setId(add.getId());
       }
       return flag;
   }

private void saveFieldData(TqQuestions add, List<Map<String, Object>> list, Map<String, Object> formData, Long formId) {
       //统计单选  下拉框  多选
       List<String> requestTypeList = CollUtil.newArrayList(
           ComponentType.RADIO,
           ComponentType.CHECK_BOX,
           ComponentType.SELECT
       );
       List<VtsTemplateFieldData> data = new ArrayList<>();
       Long dataId = add.getId();
       for (Map<String, Object> item : list) {
           String fieldId = item.get("id").toString();  //表单项id

           String fieldName = item.get("label").toString();
           Object value = formData.get(fieldId);    //填写的值
           if (requestTypeList.contains(item.get("compType").toString())) {
               //多选、单选、下拉框需要添加字段label
               List<Map<String, Object>> options = (List) item.get("options");
               //复选框
               if (value instanceof Collection) {
                   List values = (List) value;
                   //选了多是歌选项就保存多少条实体类
                   for (Map<String, Object> option : options) {
                       if (values.contains(option.get("value"))) {
                           VtsTemplateFieldData vtsTemplateFieldData = new VtsTemplateFieldData();
                           setBaseData(vtsTemplateFieldData, fieldName, dataId, formId, fieldId);
                           //设置value和标签label
                           vtsTemplateFieldData.setFieldValue(option.get("value").toString());
                           vtsTemplateFieldData.setFieldLabel(option.get("label").toString());
                           //加入dat
                           
                           data.add(vtsTemplateFieldData);
                       }
                   }
               } else {
                   //单选、下拉框 只保存一个
                   //选了多是歌选项就保存多少条实体类
                   for (Map<String, Object> option : options) {
                       if (ObjectUtil.equals(option.get("value"), value)) {
                           VtsTemplateFieldData vtsTemplateFieldData = new VtsTemplateFieldData();
                           setBaseData(vtsTemplateFieldData, fieldName, dataId, formId, fieldId);
                           //设置value和标签label
                           vtsTemplateFieldData.setFieldValue(option.get("value").toString());
                           vtsTemplateFieldData.setFieldLabel(option.get("label").toString());
                           //加入data
                           data.add(vtsTemplateFieldData);
                           break;
                       }
                   }
               }
           } else {
               VtsTemplateFieldData vtsTemplateFieldData = new VtsTemplateFieldData();
               setBaseData(vtsTemplateFieldData, fieldName, dataId, formId, fieldId);
               vtsTemplateFieldData.setFieldValue(value.toString());
               data.add(vtsTemplateFieldData);
           }
       }
       //批量存入数据库
       vtsTemplateFieldDataService.addList(data);
   }

/**
    * 给vtsTemplateFieldData设置基本信息
    *
    * @param vtsTemplateFieldData 要填写的对象
    * @param fieldName            表单项名称
    * @param dataId               提交id
    * @param formId               表单id
    * @param fieldId              表单项id
    */
   private static void setBaseData(VtsTemplateFieldData vtsTemplateFieldData, String fieldName, Long dataId, Long formId, String fieldId) {
       vtsTemplateFieldData.setDataId(dataId);
       vtsTemplateFieldData.setFormId(formId);
       vtsTemplateFieldData.setFieldId(fieldId);
       vtsTemplateFieldData.setFieldName(fieldName);
   }

/**
    * 填写vts_template_form_data表里
    * formId
    */
   private void saveFormData(Long formId, Map<String, Object> formData, List<Map<String, Object>> list) {

       //加入数据库
       VtsTemplateFormData vtsTemplateFormData = new VtsTemplateFormData();
       vtsTemplateFormData.setFormId(formId);
       vtsTemplateFormData.setCreateUserId(getUserId());
       addLabel(formData, list);
       vtsTemplateFormData.setFormData(JsonUtils.toJsonString(formData));

       //存放
       vtsTemplateFormDataService.insert(vtsTemplateFormData);

   }

   private static void addLabel(Map<String, Object> formData, List<Map<String, Object>> list) {
       //统计单选  下拉框  多选
       List<String> requestTypeList = CollUtil.newArrayList(
           ComponentType.RADIO,
           ComponentType.CHECK_BOX,
           ComponentType.SELECT
       );


       //存放每个多选、单选、拉下的options  key为表单项id
       Map<String, List<Map<String, Object>>> options = new HashMap<>();
       //统计每个多选、单选、拉下的option
       for (Map<String, Object> stringObjectMap : list) {
           String compType = stringObjectMap.get("compType").toString();
           //判断是否为需要统计的类型
           if (requestTypeList.contains(compType)) {
               List<Map<String, Object>> labelValue = (List) stringObjectMap.get("options");
               String itemId = stringObjectMap.get("id").toString();
               options.put(itemId, labelValue);
           }
       }
       //开始添加标题数据
       for (String itemId : options.keySet()) {
           Object value = formData.get(itemId);
           List<Map<String, Object>> labels = options.get(itemId);
           if (value instanceof Collection) {
               List values = (List) value;
               //多选
               List<String> label = new ArrayList<>();
               for (int i = 0; i < labels.size(); i++) {
                   Map<String, Object> labelAndValue = labels.get(i);
                   if (values.contains(labelAndValue.get("value"))) {
                       //找到对应的标签
                       String itemLabel = labelAndValue.get("label").toString();
                       //加入缓存
                       label.add(itemLabel);
                   }
               }
               //加入数据
               formData.put(itemId + "label", label);
           } else {
               //单选
               for (int i = 0; i < labels.size(); i++) {
                   Map<String, Object> labelAndValue = labels.get(i);
                   if (ObjectUtil.equal(labelAndValue.get("value"), value)) {
                       //找到对应的标签
                       String label = labelAndValue.get("label").toString();
                       //加入数据
                       formData.put(itemId + "label", label);
                       break;
                   }
               }
           }
       }
   }