问卷调查设计-SurveyJS的使用（定制）

前言

距离上一次记录SurveyJS的文章已经过去大半个月了，也该完结一下子了，正好项目结束，抽出时间记录一下使用SurveyJS过程中的做的一些自定义配置需要哪些方法及属性（这里根据个人项目需要做的一些方法总结，不包含全部，如有遗漏，大家可参考官方文档进行定制）

定制

1. Tab栏新增选项卡

当我们需要新增一个选项卡

ko.components.register('info-tab-template', {template: `<div style="width:100%"> <iframe src="/template_info/" frameborder="0" scrolling="no" width="100%" height="800px"></iframe></div>`
})
const templatesPlugin: any = {activate: () => {}, // 激活时deactivate: () => {return true}
}creator.addPluginTab('templates', // nametemplatesPlugin,'基本信息', // title'info-tab-template',// componentContent0 // index
)

2. 控制Tab栏默认选项卡显示隐藏

creatorOptions.value = {showPreviewTab: true,showJSONEditorTab: true,showLogicTab: true,showDesignerTab: true
}

3. 问题装饰器显示隐藏

creator.onElementAllowOperations.add(function (_, options) {options.allowAddToToolbox = false // 显示或隐藏将当前调查元素配置保存在工具箱中的装饰器。options.allowChangeType = false // 显示或隐藏更改调查元素类型的装饰器options.allowChangeRequired = false // 显示或隐藏使问题成为必需的装饰器。options.allowCopy = false //显示或隐藏复制调查元素的装饰器。options.allowDelete = false // 显示或隐藏删除调查元素的装饰器options.allowDragging = false // 显示或隐藏允许用户拖放调查元素的装饰器options.allowEdit = false; // 显示或隐藏允许用户在设计图面上编辑调查元素属性的装饰器。如果禁用此属性，用户只能在属性网格中编辑调查元素属性。
})

4. 工具栏新增按钮

creator.toolbarItems.push(new Action({id: 'custom-back',title: '返回',visible: true,// enabled: true,action: function () {window.location.href = '/question/index'}})
)
creator.toolbarItems.push(new Action({id: 'custom-save',title: '保存',visible: true,// enabled: true,action: function () {updateFun(id, creator)}})
)

5. 配置问卷只读

/* 整套问卷只读 */
creatorOptions.value = {readOnly: false, //整套问卷是否设置为只读模式
}/* 单独配置问题属性只读*/
creator.onGetPropertyReadOnly.add(function (_, options) {const arr = ['title', 'description', 'text']const data = options.propertyif (arr.indexOf(data.name) === -1 && mode === 'READ_ONLY') {options.readOnly = true}
})

6. 单项选择为每一项配置单独的分数

Serializer.addProperty('itemvalue', {name: 'score',type: 'number',category: 'general',default: 0,visibleIndex: 0,onSetValue: (survey: any, value: any) => {survey.setPropertyValue('score', value)}
})

7. CSS设置显示隐藏

/* css v-bind绑定变量设置dom元素显示隐藏 */
// 是否允许新增问题
::v-deep(.svc-page__add-new-question) {display: v-bind(isAddItem);
}
// 工具栏显示隐藏
::v-deep(svc-adaptive-toolbox) {display: v-bind(isShowToolbox);
}
//tabs 设置按钮显示隐藏
::v-deep(#svd-settings) {display: v-bind(isShowToolbox);
}
//tabs 属性表格展开收缩按钮显示隐藏
::v-deep(#svd-grid-expand) {display: v-bind(isShowToolbox);
}
// 隐藏保存按钮
::v-deep(#svd-save) {display: none;
}

8. 更多配置前往官方文档

补充1： 当文档中仍然找不到自己想要的答案时，可前往演示板块查找，说不定有用的藏在这里

补充2： 当官网没有记录时，我们可前往支持中心，看看其他人是否有遇到类似的问题，官方有没有提供相应的解决方案

参考

这里放上项目代码以供参考

<template><div class="surveyCreator_box"><div id="surveyCreator"></div></div>
</template>
<script setup lang="ts"> import { onMounted, ref, reactive, watch, nextTick } from 'vue'
import '@/utils/custom-locale.ts'
import * as ko from 'knockout'
import { SurveyCreator } from 'survey-creator-knockout'
import { Serializer, Action } from 'survey-core'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import {apiCreatorSurvey,apiSurveyId,apiUpdateSurveyInfo
} from '@/service/api/survey'
import LocalCache from '@/utils/cache'
const router = useRouter()
const id = ref(LocalCache.getCache('paperId') || '')
let question_text = ref('')
// 添加问题按钮是否需要隐藏
let isAddItem = ref('flex')
// 工具箱面板是否需要隐藏
let isShowToolbox = ref('flex')
// 问卷初始设置
let creator = new SurveyCreator()
let creatorOptions = ref({})
ko.components.register('info-tab-template', {template: `<div style="width:100%"> <iframe src="/survey_info/" frameborder="0" scrolling="no" width="100%" height="800px"></iframe></div>`
})
const templatesPlugin: any = {activate: () => {},deactivate: () => {return true}
}
// 新增基本信息面板
onMounted(async () => {document.documentElement.style.setProperty('--primary', '#6793ff')id.value ? surveyEdit(id.value) : surveyCreate()
})
// Survey相关配置
// 创建问卷
const surveyCreate = () => {creatorOptions.value = {isAutoSave: false,haveCommercialLicense: true,readOnly: false, //整套问卷是否设置为只读模式showSurveyTitle: false,maximumChoicesCount: 4,showSidebar: false,allowModifyPages: false,// 根据问卷是否已创建控制显示隐藏showPreviewTab: true,showJSONEditorTab: true,showLogicTab: true,showDesignerTab: true}creator = new SurveyCreator(creatorOptions.value)creator.makeNewViewActive('templates')// 工具栏自定义creator.toolbarItems.push(new Action({id: 'custom-back',title: '返回',visible: true,// enabled: true,action: function () {window.location.href = '/question/index'}}))creator.toolbarItems.push(new Action({id: 'custom-save',title: '保存',visible: true,// enabled: true,action: function () {createFun(creator)}}))creator.addPluginTab('templates',templatesPlugin,'基本信息','info-tab-template',0)creator.render('surveyCreator')
}
// 创建问卷
const createFun = (creator: any) => {const formState = LocalCache.getCache('formState')if (formState.title == null ||formState.mode == null ||formState.quTypes == []) {message.warn('请检查基本信息中是否有必填选项未填写')} else {apiCreatorSurvey({ ...formState, surveyJson: creator.text }).then((res) => {LocalCache.setCache('paperId', res)message.success('保存成功')})}
}
// 更新问卷
const surveyEdit = async (id: any) => {const json = await apiSurveyId(id)const { mode } = json || 'DEFAULT'const config = {readOnly: false,textModifyOnly: false,notAllowQuDelete: false,notAllowQuTypeChange: false,notAllowQuAdd: false,notAllowQuKeyModify: false}const {readOnly, // 整篇只读textModifyOnly, // 只允许文案修改信息notAllowQuDelete, // 不允许 删除题目notAllowQuTypeChange, // 不允许 改变题型notAllowQuAdd, // 不允许 新增问题notAllowQuKeyModify // 不允许 修改问题变量名} = configcreatorOptions.value = {isAutoSave: false,haveCommercialLicense: true,readOnly: mode === 'READ_ONLY', //整套问卷是否设置为只读模式showSurveyTitle: false,maximumChoicesCount: 4,showSidebar: !(mode === 'BUILD_IN'),allowModifyPages: !(mode === 'BUILD_IN'),// 根据问卷是否已创建控制显示隐藏showPreviewTab: true,showJSONEditorTab: true,showLogicTab: true,showDesignerTab: true}creator = new SurveyCreator(creatorOptions.value)// 回显问卷creator.text = json.surveyJson// 保存问卷// creator.saveSurveyFunc = (saveNo: number, callback: any) => {// question_text.value = creator.text// apiUpdateJson(id, { surveyJson: question_text.value }).then(() => {// message.success('问卷保存成功')// window.history.back()// callback(saveNo, true)// })// }// 针对单项添加分数Serializer.addProperty('itemvalue', {name: 'score',type: 'number',category: 'general',default: 0,visibleIndex: 0,onSetValue: (survey: any, value: any) => {survey.setPropertyValue('score', value)}})// 不允许修改问题变量名（删除数据tab）creator.onPropertyGridSurveyCreated.add(function (_, options) {const dataTab = options.survey.getPanelByName('data')if (dataTab && notAllowQuKeyModify) {dataTab.delete()}})// 活动选项卡更改时调用creator.onActiveTabChanged.add(function (_, options) {})/* 单独配置*/creator.onGetPropertyReadOnly.add(function (_, options) {const arr = ['title', 'description', 'text']const data = options.propertyif (arr.indexOf(data.name) === -1 && mode === 'READ_ONLY') {options.readOnly = true}})// 指定装饰器可用性creator.onElementAllowOperations.add(function (_, options) {// 整套问卷只允许修改文案信息if (mode === 'BUILD_IN') {options.allowAddToToolbox = false // 显示或隐藏将当前调查元素配置保存在工具箱中的装饰器。options.allowChangeType = false // 显示或隐藏更改调查元素类型的装饰器options.allowChangeRequired = false // 显示或隐藏使问题成为必需的装饰器。options.allowCopy = false //显示或隐藏复制调查元素的装饰器。options.allowDelete = false // 显示或隐藏删除调查元素的装饰器options.allowDragging = false // 显示或隐藏允许用户拖放调查元素的装饰器// options.allowEdit = false; // 显示或隐藏允许用户在设计图面上编辑调查元素属性的装饰器。如果禁用此属性，用户只能在属性网格中编辑调查元素属性。}notAllowQuDelete && (options.allowDelete = false) // 不允许删除题目notAllowQuTypeChange && (options.allowChangeType = false) // 不允许改变题型options.allowCopy = false // 显示或隐藏允许用户复制元素的装饰器})// 是否允许新增问题isAddItem.value = notAllowQuAdd || mode === 'BUILD_IN' ? 'none' : 'flex'isShowToolbox.value = notAllowQuAdd || mode === 'BUILD_IN' ? 'none' : 'flex'// 默认显示面板// creator.makeNewViewActive('templates')// 工具栏自定义creator.toolbarItems.push(new Action({id: 'custom-back',title: '返回',visible: true,// enabled: true,action: function () {window.location.href = '/question/index'}}))creator.toolbarItems.push(new Action({id: 'custom-save',title: '保存',visible: true,// enabled: true,action: function () {updateFun(id, creator)}}))creator.addPluginTab('templates',templatesPlugin,'基本信息','info-tab-template',0)creator.render('surveyCreator')
}
// 更新问卷
const updateFun = (id: string, creator: any) => {const formState = LocalCache.getCache('formState')if (formState.title == null ||formState.mode == null ||formState.quTypes == []) {message.warn('请检查基本信息中是否有必填选项未填写')} else {apiUpdateSurveyInfo(id, { ...formState, surveyJson: creator.text }).then(() => {message.success('保存成功')surveyEdit(id)})}
} </script>
<style lang="less" scoped> .surveyCreator_box {width: 100%;height: 100%;.button_class {margin-left: 93.5%;// margin-top: 10px;margin-bottom: 10px;}#surveyCreator {width: 100%;height: 100%;}
}
//是否允许新增问题
::v-deep(.svc-page__add-new-question) {display: v-bind(isAddItem);
}
// 工具栏显示隐藏
::v-deep(svc-adaptive-toolbox) {display: v-bind(isShowToolbox);
}
//tabs 设置按钮显示隐藏
::v-deep(#svd-settings) {display: v-bind(isShowToolbox);
}
//tabs 属性表格展开收缩按钮显示隐藏
::v-deep(#svd-grid-expand) {display: v-bind(isShowToolbox);
}
::v-deep(.svc-creator-tab__content) {min-height: 80vh;
}
::v-deep(.svc-flex-row) {background: none;
}
// 隐藏保存按钮
::v-deep(#svd-save) {display: none;
} </style>

注：创建问卷和编辑问卷两个函数中有很大一部分重复代码，这是因为我在应用过程中发现当问卷创建后，再对问卷的个别属性进行单独的修改，并不会发生变化，说明其不支持Vue3下的响应式，所以每修改一次需要我们重新赋值并执行 creator.render('surveyCreator')。

代码比较乱，大家挑着看🙂🙂🙂