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

详细介绍请查看：https://xie.infoq.cn/article/6c578033dfb1eac5f21b7994f

作者：@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 的文档中加入这些字段。这样在创建题目时就能得到这些字段，并进行相关操作。

总结

本文讲解了 xiaoju-survey 项目中增加设置器的实现方式，简要介绍了项目中设置器是如何获取、引入，以及设置的数据流的逻辑，希望能给大家梳理清设置器部分的项目结构。本人熟悉该项目不久，难免有理解不深入或是错误的部分，敬请指正和批评。