前言
距离上一次记录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', // name
templatesPlugin,
'基本信息', // title
'info-tab-template', // componentContent
0 // 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.property
if (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 // 不允许 修改问题变量名
} = config
creatorOptions.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.property
if (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')。
代码比较乱，大家挑着看🙂🙂🙂
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。