questionnaire-template v1.10.15

v#### 引入依赖

npm i element-ui -S

npm install vue-router@3.1.3

npm install axios

npm install default-passive-events

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'default-passive-events'
import questionnaire from 'questionnaire-template'
import 'questionnaire-template/questionnaire-template.css'

Vue.use(questionnaire)
Vue.use(ElementUI)

Vue.config.productionTip = false
Vue.prototype.$ELEMENT = {size: 'mini'}

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
}).$mount('#app')

questionnaire-manage的引用

<questionnaire-manage :parameters="parameters" :callback="callbackMethod"></questionnaire-manage>

data () {
    // const ip = 'http://101.42.243.79:8180'
    const ip = 'http://127.0.0.1:4201'
    return {
      parameters: {
        userNow: {userid: '1', username: 'ranger'},
        pathToGetUsers: ip + '/office/getUserListPage',
        updateSelectedUsersPath: ip + '/questionnaire/questionnaireManage/updateSelectedUsers',
        getSelectedUsersByIdPath: ip + '/questionnaire/questionnaireManage/getSelectedUsersById',
        publishQuestionnaire: ip + '/questionnaire/questionnaireManage/publishQuestionnaire',
        deleteQuestionnaireById: ip + '/questionnaire/questionnaireManage/deleteQuestionnaireById',
        queryByUserIdPage: ip + '/questionnaire/questionnaireManage/queryByUserIdPage',
        insertQuestionnairePath: ip + '/questionnaire/questionnaireManage/insertQuestionnaire',
        setEndTimePath: ip + '/questionnaire/questionnaireManage/setEndTime',
        // settings
        updateQuestionnaireJsonPath: ip + '/questionnaire/questionnaireManage/updateQuestionnaireJson',
        getQuestionnaireByIdPath: ip + '/questionnaire/questionnaireManage/getQuestionnaireById',
        updateQuestionInfoPath: ip + '/questionnaire/questionnaireManage/updateQuestionInfo',
        // result
        deleteCollectionByIdPath: ip + '/questionnaire/questionnaireCollection/deleteCollectionById',
        getCollectionByQidPagePath: ip + '/questionnaire/questionnaireCollection/getCollectionByQidPage',
        // statistics
        getAllResultsByIdPath: ip + '/questionnaire/questionnaireCollection/getAllResultsById',
        regexs: [
            // 示例：手机号码的正则表达式本是： ^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
            // 但是这里需要的是（必须是）一个字符串，所以需要你将两边的 / 去掉，然后里面的\前面要加一个 \转义
            {name: '手机号码', regex: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$'},
            {name: '固定电话', regex: '/^((d{3,4})|d{3,4}-|s)?d{7,14}$/'},
            {name: '身份证号（18位）', regex: '/^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{4}$/'},
            {name: '身份证号（15位）', regex: '/^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$/'}
        ]
      }
    }
  },
  methods: {
    callbackMethod (id, questionnaire, selected) {
      // id：问卷id
      // selected：指定要做这个问卷的用户
      return 'callback method'
    }
  }

questionnaire-users-list组件的使用

<questionnaire-users-list :parameters="parameters" :callbackMethod="callbackMethod"></questionnaire-users-list>

data () {
    // const ip = 'http://101.42.243.79:8180'
    const ip = 'http://127.0.0.1:4201'
    return {
      parameters: {
        userNow: {userid:'9c440e647bc84b308494f842a93da221', username: 'zhy'},
        questionDetailPath: ip + '/questionnaire/questionnaireCollection/questionnaireAnswer',
        getAllQuestionnaireByUserPath: ip + '/questionnaire/questionnaireCollection/getAllQuestionnaireByUser',
        insertQuestionnaireCollectionPath: ip + '/questionnaire/questionnaireCollection/insertQuestionnaireCollection',
        getQuestionnaireByIdPath: ip + '/questionnaire/questionnaireManage/getQuestionnaireById',
        getAnswersBeforeByIdPath: ip + '/questionnaire/questionnaireCollection/getAnswersBeforeById'
      }
    }
  },
  methods: {
    callbackMethod (questionnaireId, userId) {
      console.log(questionnaireId, userId)
      return 'callback method'
    }
  }