【XIAOJUSURVEY& 北大】如何扩展设置器 - setters 源码分析-CSDN博客

本文链接：https://blog.csdn.net/XIAOJUSURVEY/article/details/140379294

导读：本专栏主要分享同学们在XIAOJUSURVEY&北大开源实践课程的学习成果。

专栏背景：2024滴滴开源XIAOJUSURVEY北大软微开源实践课

文内项目Github：XIAOJUSURVEY

作者：yiyeah

背景

在xioaju-survey中，问卷的设置器是关键的一个特性，它控制着问卷本身以及各个题型的属性，是问卷平台的重点需求之一。

一套问卷有多种题型，而各题型又有不同的设置，每个设置都有着自己的组件和字段。如何组织和管理这些繁琐的设置项，做到性能出色、复用性好、可拓展性强。

本文将通过一个实例来进行说明xiaoju-survey项目中问卷的设置器的架构，以及增加一个设置的全流程。

该实例是对单选和多选类题型，增加“选项配额”的设置，对每个选项需要配置配额数，并对于该题配置“是否展示剩余数量”，以及“删除后恢复选项配额”两个选项，前端配置页面如图所示：
在这里插入图片描述

题型与设置器的关系

很显然，该设置器应当做成对话框形式，在点击设置面板上的“选项配额”按钮时开启编辑。
在这里插入图片描述

题型获取设置

我们希望增加的“选项配额”设置只在单选和多选题型上生效，应当只在单选和多选题模块上配置该设置，因此首先应当了解各个题型是如何获取对应的设置。

通过浏览器Vue插件查看页面组织，在设置器部分是SetterField模块，查看SetterField.vue文件，得知其渲染配置项，是根据formFieldData中的数据，而formFieldData中的数据，则是从formConfigList得到的，而formConfigList又是其父组件从store中通过'edit/formConfigList'getter得到。

继续追踪'edit/formConfigList'，发现是'edit/currentEditMeta'得到的，也就是正在编辑题型的meta信息，而meta信息又是通过questionLoader得到，查看questionLoader可以发现在loadMeta()方法中，获取到了我们的目标：以下一行代码加载了题型的配置meta信息：

const res = await import(`./widgets/${path}/meta.js`)

因此，我们需要在该目录下单选和多选的meta中增加新的设置项：

{
      key: "quotaConfig",
      name: "quotaConfig",
      type: "QuotaConfig",
}

设置器组件引入

在meta中增加了新的设置type之后，需要查看设置组件是怎样引入的。 仍然在SetterField模块，其handleComponentRegister方法中，有这样一行代码：

const comps = await setterLoader.loadComponents(allSetters)

查看setterLoader，其重写了父类dynamicImport方法，通过如下path引入设置器组件：

return import(`@/materials/setters/widgets/${path}.vue`)

因此，要在web\src\materials\setters\widgets目录下新增QuotaConfig.vue组件。

设置器组件编写

我们对新增加的组件应当如下了解。

输入为：单选，多选题目以及选项信息，输出为：对于题目配置了“删除后恢复配额(deleteRecover)”，“不展示配额信息(noDisplay)”两个字段，对于每个选项配置了配额(quota)字段。查看父组件SetterField.vue传入的属性：moduleConfig正是题目以及选项信息，并监听form-change事件，作为设置改变的处理。

页面设计

该组件获取到moduleConfig信息，并获取到了其中的options字段的信息。因此使用el-table将各个选项的名称以及配额数进行展示，并设置点击事件，使得能通过直接点击配额栏的单元格来改变某个选项的配额数。同时el-table下方则是两个设置选项的checkbox。
在这里插入图片描述

数据流

这里我们需要思考，如何保存配额数，以及两个额外的选项？
最好是保存在全局的已有关于题目的数据中，也就是state.schema.questionDataList。

我们查看父组件提供的监听事件form-change，跟踪到SetterPanel，其调用了action:edit/changeSchema，改变了state.schema。而在savePanel中则是监听SchemaUpdateTime，自动调用了接口saveSurvey来将问卷的改动同步到后端。因此，该数据流可行，示意图如下：

在这里插入图片描述

因此我们直接在组件中emitform-change事件，就能达到修改schema字段并传回给后端的目的

最后传回的quesionDataList数据结构如下：

questionDataList:[
 {
    ...
    deleteRecover: false,
    noDisplay: false,
    options:[
    {
        ...
        quota: 5,
    },
    {
        ...
        quota: 7
    }
    ]
},
{
    ...
},
]

为了同步对schema的更改，还需要在前端questionConfig.js以及后端的normal.json这两个配置题目schema的文档中加入这些字段。这样在创建题目时就能得到这些字段，并进行相关操作。