关于javascript:问卷调查设计SurveyJS的使用定制

38次阅读

共计 8638 个字符，预计需要花费 22 分钟才能阅读完成。

前言

间隔上一次记录 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')。

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

正文完
javascript
发表至： javascript
2022-12-15
 0
前端工程师通过nodejs链接linux并上传代码进行半自动化更新省去sshftp的链接工具
前端进击的巨人（四）：略知函数式编程
关于javascript:JavaScript-混淆与反混淆
从搭建脚手架到在npm上发布react组件