questionList.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <el-form :model="form" ref="form" label-width="100px" class="question">
  3. <el-row>
  4. <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
  5. <el-form-item label="题目类型" prop="type" :rules="[{ required: true, message: '请选择题目类型', trigger: 'change' }]">
  6. <el-select v-model="form.type" placeholder="请选择题目类型">
  7. <el-option label="单选" value="radio"></el-option>
  8. <el-option label="多选" value="checkbox"></el-option>
  9. <el-option label="问答" value="textarea"></el-option>
  10. </el-select>
  11. </el-form-item>
  12. </el-col>
  13. <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
  14. <el-form-item label="是否必填" prop="isRequire" :rules="[{ required: true, message: '请选择是否必填', trigger: 'change' }]">
  15. <el-select v-model="form.isRequire" placeholder="请选择是否必填">
  16. <el-option label="是" :value="1"></el-option>
  17. <el-option label="否" :value="0"></el-option>
  18. </el-select>
  19. </el-form-item>
  20. </el-col>
  21. </el-row>
  22. <el-form-item label="题目" prop="content" :rules="[{ required: true, message: '请输入题目', trigger: 'blur' }]">
  23. <el-input type="textarea" placeholder="请输入题目" v-model="form.content" show-word-limit maxlength="200" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
  24. </el-form-item>
  25. <template v-if="form.type != 'textarea'">
  26. <div v-for="(questionnaireQuestionItemList, index) in form.questionnaireQuestionItemList" :key="index">
  27. <el-form-item :label="'选项' + (index + 1)"
  28. style="display: inline-block;"
  29. :prop="'questionnaireQuestionItemList.' + index + '.answerValue'"
  30. :rules="[{ required: true, message: '请输入选项内容', trigger: 'change' }]">
  31. <el-input type="text" placeholder="请输入选项内容" v-model="questionnaireQuestionItemList.answerValue"></el-input>
  32. </el-form-item>
  33. <el-form-item label="是否终止答题"
  34. style="display: inline-block;"
  35. label-width="120px"
  36. :prop="'questionnaireQuestionItemList.' + index + '.isOver'"
  37. :rules="[{ required: true, message: '请选择是否终止答题', trigger: 'change' }]">
  38. <el-radio-group v-model="questionnaireQuestionItemList.isOver" style="margin-right: 20px">
  39. <el-radio :label="1">是</el-radio>
  40. <el-radio :label="0">否</el-radio>
  41. </el-radio-group>
  42. </el-form-item>
  43. <div style="display: inline-block;">
  44. <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
  45. <el-button icon="el-icon-top" circle size="small" @click="moveDown(form.questionnaireQuestionItemList, index)" :disabled="index == 0"></el-button>
  46. </el-tooltip>
  47. <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
  48. <el-button icon="el-icon-bottom" circle size="small" @click="moveUp(form.questionnaireQuestionItemList, index)" :disabled="form.questionnaireQuestionItemList.length <= 1 || form.questionnaireQuestionItemList.length == (index + 1)"></el-button>
  49. </el-tooltip>
  50. <el-tooltip class="item" effect="dark" content="删除" placement="top">
  51. <el-button icon="el-icon-delete" circle size="small" @click="onDelete(form.questionnaireQuestionItemList, index)" :disabled="form.questionnaireQuestionItemList.length <= 1"></el-button>
  52. </el-tooltip>
  53. </div>
  54. </div>
  55. <el-form-item>
  56. <el-button style="width: 200px" type="default" icon="el-icon-plus" :disabled="form.questionnaireQuestionItemList.length >= 10" @click="addQuestionItem(form.questionnaireQuestionItemList)">新增选项</el-button>
  57. </el-form-item>
  58. </template>
  59. </el-form>
  60. </template>
  61. <script>
  62. export default {
  63. props: ['form'],
  64. data () {
  65. return {
  66. }
  67. },
  68. mounted () {
  69. },
  70. methods: {
  71. // 添加题目选项
  72. addQuestionItem(questionnaireQuestionItemLists) {
  73. questionnaireQuestionItemLists.push({})
  74. },
  75. // 向上移动
  76. moveUp(arr, index) {
  77. arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
  78. },
  79. // 向下移动
  80. moveDown(arr, index) {
  81. arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
  82. },
  83. // 删除选项
  84. onDelete(arr, index) {
  85. arr.splice(index, 1)
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="scss" scoped>
  91. .question .el-select {
  92. width: 100% !important;
  93. }
  94. </style>