问卷修改

1

src/views/setQuestions/components/answerList.vue

@@ -1,209 +1,472 @@
 <template>
-	<div>
-        <div class="questions" v-if="questionList.length > 0"  v-show="!resultStatus">
-            <div class="top-tips">{{ form.title }}</div>
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span class="questionName">{{ questionList[currentIndex - 1]['content'] }}</span>
-                </div>
-                <el-radio-group v-model="check" v-if="questionList[currentIndex - 1]['type'] == 'radio'">
-                    <div class="" v-for="(item) in questionList[currentIndex - 1]['questionnaireQuestionItemList']" :key="item.id">
-                        <el-radio :label="item.id">{{item.answerValue}}</el-radio>
-                    </div>
-                </el-radio-group>
-                <el-checkbox-group v-model="checkBox" v-if="questionList[currentIndex - 1]['type'] == 'checkbox'">
-                    <el-checkbox  v-for="(item) in questionList[currentIndex - 1]['questionnaireQuestionItemList']" :key="item.id" :label="item.id">{{ item.answerValue }}</el-checkbox>
-                </el-checkbox-group>
-                <el-input
-                    v-if="questionList[currentIndex - 1]['type'] == 'textarea'"
-                    type="textarea"
-                    style="border: 0;"
-                    :autosize="{ minRows: 3, maxRows: 6}"
-                    placeholder="请输入其它意见"
-                    v-model="textarea">
-                </el-input>
-            </el-card>
-            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'radio'" block round class="btn-submit" color="#01C1B5" :disabled="!check && !!isRequire" @click="onSubmit">提交</el-button>
-            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'checkbox'" block round class="btn-submit" color="#01C1B5" :disabled="checkBox.length <= 0 && !!isRequire" @click="onSubmit">提交</el-button>
-            <el-button size="large" type="primary" v-if="questionList[currentIndex - 1]['type'] == 'textarea'" block round class="btn-submit" color="#01C1B5" :disabled="!textarea && !!isRequire" @click="onSubmit">提交</el-button>
-        </div>
+  <div>
+    <div
+      class="questions"
+      v-if="questionList.length > 0"
+      v-show="!resultStatus"
+    >
+      <div class="top-tips">{{ form.title }}</div>
 
-        <div class="resultModel" v-show="resultStatus">
-            <img src="@/assets/images/pay_success.png" class="img" alt="">
-            <p class="content">感谢您的参与！</p>
-            <el-button size="large" type="primary" round class="btn-submit" @click="onSubmitClose">确认</el-button>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span class="questionName">{{
+            questionList[currentIndex - 1]["content"]
+          }}</span>
         </div>
+        <el-radio-group
+          v-model="check"
+          v-if="questionList[currentIndex - 1]['type'] == 'radio'"
+        >
+          <div
+            class=""
+            v-for="item in questionList[currentIndex - 1][
+              'questionnaireQuestionItemList'
+            ]"
+            :key="item.id"
+          >
+            <el-radio :label="item.id">{{ item.answerValue }}</el-radio>
+          </div>
+        </el-radio-group>
+        <el-checkbox-group
+          v-model="checkBox"
+          v-if="questionList[currentIndex - 1]['type'] == 'checkbox'"
+        >
+          <el-checkbox
+            v-for="item in questionList[currentIndex - 1][
+              'questionnaireQuestionItemList'
+            ]"
+            :key="item.id"
+            :label="item.id"
+            >{{ item.answerValue }}</el-checkbox
+          >
+        </el-checkbox-group>
+        <el-input
+          v-if="questionList[currentIndex - 1]['type'] == 'textarea'"
+          type="textarea"
+          style="border: 0"
+          :autosize="{ minRows: 3, maxRows: 6 }"
+          placeholder="请输入其它意见"
+          v-model="textarea"
+        >
+        </el-input>
+        <!-- 图片或者文件 -->
+        <el-upload
+          v-if="
+            questionList[currentIndex - 1]['type'] == 'image' ||
+            questionList[currentIndex - 1]['type'] == 'file'
+          "
+          class="ivu-upload"
+          :file-list="fileList"
+          :show-file-list="true"
+          :headers="headers"
+          :on-remove="handleRemove"
+          :accept="
+            questionList[currentIndex - 1]['type'] == 'image'
+              ? '.jpg, .jpeg, .png'
+              : '.XLSX,.XLS,.DOCX,.PDF,.TXT'
+          "
+          :before-upload="
+            (flie) => {
+              return beforeUpload(flie, questionList[currentIndex - 1]['type']);
+            }
+          "
+          :on-success="
+            (response, file, list) => {
+              handleUploadSuccess(
+                response,
+                file,
+                list,
+                questionList[currentIndex - 1]
+              );
+            }
+          "
+          :on-error="handleUploadError"
+          :max-size="2048"
+          multiple
+          action="/api-web/uploadFile"
+        >
+          <div slot="trigger" class="el-upload el-upload--picture-card">
+            <i class="el-icon-plus"></i>
+          </div>
+          <div
+            slot="tip"
+            v-if="questionList[currentIndex - 1]['type'] == 'image'"
+            class="el-upload__tip"
+          >
+            只能上传JPG、PNG、JPEG、GIF文件，且不超过5MB
+          </div>
+          <div slot="tip" v-else class="el-upload__tip">
+            只能上传XLSX、XLS、DOCX、PDF、TXT文件，且不超过5MB
+          </div>
+        </el-upload>
+      </el-card>
+      <el-button
+        size="large"
+        type="primary"
+        v-if="questionList[currentIndex - 1]['type'] == 'radio'"
+        block
+        round
+        class="btn-submit"
+        color="#01C1B5"
+        :disabled="!check && !!isRequire"
+        @click="onSubmit"
+        >提交</el-button
+      >
+      <el-button
+        size="large"
+        type="primary"
+        v-if="questionList[currentIndex - 1]['type'] == 'checkbox'"
+        block
+        round
+        class="btn-submit"
+        color="#01C1B5"
+        :disabled="checkBox.length <= 0 && !!isRequire"
+        @click="onSubmit"
+        >提交</el-button
+      >
+      <el-button
+        size="large"
+        type="primary"
+        v-if="questionList[currentIndex - 1]['type'] == 'textarea'"
+        block
+        round
+        class="btn-submit"
+        color="#01C1B5"
+        :disabled="!textarea && !!isRequire"
+        @click="onSubmit"
+        >提交</el-button
+      >
+            <el-button
+        size="large"
+        type="primary"
+        v-if="questionList[currentIndex - 1]['type'] == 'image'"
+        block
+        round
+        class="btn-submit"
+        color="#01C1B5"
+        :disabled="fileList.length <= 0 && !!isRequire"
+        @click="onSubmit"
+        >提交</el-button
+      >
+            <el-button
+        size="large"
+        type="primary"
+        v-if="questionList[currentIndex - 1]['type'] == 'file'"
+        block
+        round
+        class="btn-submit"
+        color="#01C1B5"
+        :disabled="fileList.length <= 0 && !!isRequire"
+        @click="onSubmit"
+        >提交</el-button
+      >
+    </div>
 
-	</div>
+    <div class="resultModel" v-show="resultStatus">
+      <img src="@/assets/images/pay_success.png" class="img" alt="" />
+      <p class="content">感谢您的参与！</p>
+      <el-button
+        size="large"
+        type="primary"
+        round
+        class="btn-submit"
+        @click="onSubmitClose"
+        >确认</el-button
+      >
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		name: 'question',
-        props: ['form', 'close'],
-		data() {
-			return {
-                currentIndex: 1,
-                questionList: [],
-                check: null,
-                isRequire: 1,
-                checkBox: [],
-                textarea: null,
-                checkList: [],
-                resultStatus: false
-			}
-		},
-		async mounted() {
-            try {
-                this.questionList = this.form.questionnaireQuestionList || []
-                console.log(this.questionList)
-                this.isRequire = this.questionList[this.currentIndex - 1].isRequire
-            } catch {
-                //
-            }
-		},
-		methods: {
-            toggle(index) {
-                let selectList = this.questionList[this.currentIndex - 1]
-                if(selectList.type == 'radio') {
-                    this.check = index
-                } else if(selectList.type == 'checkbox') {
-                    this.$refs.checkboxes[index].toggle()
-                }
-            },
-            onSubmit() {
-                let selectList = this.questionList[this.currentIndex - 1]
-                if(selectList.type == 'radio' && selectList.isRequire && !this.check) {
-                    this.$message.error('请回答当前问题')
-                    return
-                } else if(selectList.type == 'checkbox' && selectList.isRequire && this.checkBox.length <= 0) {
-                    this.$message.error('请回答当前问题')
-                    return
-                } else if(selectList.type == 'textarea' && selectList.isRequire && !this.textarea) {
-                    this.$message.error('请回答当前问题')
-                    return
-                }
+import { getToken } from "@/utils/auth";
+export default {
+  name: "question",
+  props: ["form", "close"],
+  data() {
+    return {
+      currentIndex: 1,
+      questionList: [],
+      check: null,
+      isRequire: 1,
+      checkBox: [],
+      textarea: null,
+      checkList: [],
+      fileList: [],
 
-                let answerList = selectList.questionnaireQuestionItemList || [] //当前题的选项
-                let currentIsOver = 0 // 是否终止答题
-                answerList.forEach(item => {
-                    if(selectList.type == 'radio' && this.check == item.id) {
-                        currentIsOver = item.isOver
-                    } else if(selectList.type == 'checkbox' && this.checkBox.includes(item.id) && !currentIsOver) {
-                        currentIsOver = item.isOver
-                    }
-                })
+      resultStatus: false,
+      headers: {
+        Authorization: getToken(),
+      },
+    };
+  },
+  async mounted() {
+    try {
+      this.questionList = this.form.questionnaireQuestionList || [];
+      console.log(this.questionList);
+      this.isRequire = this.questionList[this.currentIndex - 1].isRequire;
+    } catch {
+      //
+    }
+  },
+  methods: {
+    toggle(index) {
+      let selectList = this.questionList[this.currentIndex - 1];
+      if (selectList.type == "radio") {
+        this.check = index;
+      } else if (selectList.type == "checkbox") {
+        this.$refs.checkboxes[index].toggle();
+      }
+    },
+    onSubmit() {
+      let selectList = this.questionList[this.currentIndex - 1];
+      if (selectList.type == "radio" && selectList.isRequire && !this.check) {
+        this.$message.error("请回答当前问题");
+        return;
+      } else if (
+        selectList.type == "checkbox" &&
+        selectList.isRequire &&
+        this.checkBox.length <= 0
+      ) {
+        this.$message.error("请回答当前问题");
+        return;
+      } else if (
+        selectList.type == "textarea" &&
+        selectList.isRequire &&
+        !this.textarea
+      ) {
+        this.$message.error("请回答当前问题");
+        return;
+      } else if (
+        selectList.type == "image" &&
+        selectList.isRequire &&
+        this.fileList.length <= 0
+      ) {
+        this.$message.error("请回答当前问题");
+        return;
+      } else if (
+        selectList.type == "file" &&
+        selectList.isRequire &&
+        this.fileList.length <= 0
+      ) {
+        this.$message.error("请回答当前问题");
+        return;
+      }
 
-                // 判断是否在题目列表里面
-                if(this.currentIndex <= this.questionList.length) {
-                    if(selectList.type == 'radio') {
-                        this.checkList[this.currentIndex - 1] = {
-                            questionnaireQuestionId: selectList.id,
-                            questionnaireQuestionItemIdList: this.check
-                        }
-                        this.check = null
-                    } else if(selectList.type == 'checkbox') {
-                        this.checkList[this.currentIndex - 1] = {
-                            questionnaireQuestionId: selectList.id,
-                            questionnaireQuestionItemIdList: this.checkBox.join(',')
-                        }
-                        this.checkBox = []
-                    } else if(selectList.type == 'textarea') {
-                        this.checkList[this.currentIndex - 1] = {
-                            questionnaireQuestionId: selectList.id,
-                            additionalValue: this.textarea
-                        }
-                        this.textarea = null
-                    }
+      let answerList = selectList.questionnaireQuestionItemList || []; //当前题的选项
+      let currentIsOver = 0; // 是否终止答题
+      answerList.forEach((item) => {
+        if (selectList.type == "radio" && this.check == item.id) {
+          currentIsOver = item.isOver;
+        } else if (
+          selectList.type == "checkbox" &&
+          this.checkBox.includes(item.id) &&
+          !currentIsOver
+        ) {
+          currentIsOver = item.isOver;
+        }
+      });
 
-                    // 1 为终止答题
-                    if(currentIsOver) {
-                        this.onConfirm()
-                        return
-                    }
+      // 判断是否在题目列表里面
+      if (this.currentIndex <= this.questionList.length) {
+        if (selectList.type == "radio") {
+          this.checkList[this.currentIndex - 1] = {
+            questionnaireQuestionId: selectList.id,
+            questionnaireQuestionItemIdList: this.check,
+          };
+          this.check = null;
+        } else if (selectList.type == "checkbox") {
+          this.checkList[this.currentIndex - 1] = {
+            questionnaireQuestionId: selectList.id,
+            questionnaireQuestionItemIdList: this.checkBox.join(","),
+          };
+          this.checkBox = [];
+        } else if (selectList.type == "textarea") {
+          this.checkList[this.currentIndex - 1] = {
+            questionnaireQuestionId: selectList.id,
+            additionalValue: this.textarea,
+          };
+          this.textarea = null;
+        } else if (selectList.type == "image") {
+          this.checkList[this.currentIndex - 1] = {
+            questionnaireQuestionId: selectList.id,
+            additionalValue: JSON.stringify(
+              this.fileList.map((item) => {
+                return {
+                  name: item.name,
+                  url: item.response.data.url,
+                };
+              })
+            ),
+          };
+         this.fileList = [];
+        } else if (selectList.type == "file") {
+          this.checkList[this.currentIndex - 1] = {
+            questionnaireQuestionId: selectList.id,
+            additionalValue: JSON.stringify(
+              this.fileList.map((item) => {
+                return {
+                  name: item.name,
+                  url: item.response.data.url,
+                };
+              })
+            ),
+          };
+         this.fileList = [];
+        }
 
-                    this.check = null
-                    if(this.currentIndex == this.questionList.length) {
-                        this.saveKey()
-                        return
-                    }
+        // 1 为终止答题
+        if (currentIsOver) {
+          this.onConfirm();
+          return;
+        }
 
-                    this.currentIndex++
-                }
-            },
-            saveKey() {
-                // this.$message.info('谢谢参与')
-                this.resultStatus = true
-            },
-            async onConfirm() {
-                // this.$message.info('谢谢参与')
-                this.resultStatus = true
-            },
-            onSubmitClose() {
-                this.close()
-            }
-		}
-	}
+        this.check = null;
+        if (this.currentIndex == this.questionList.length) {
+          this.saveKey();
+          return;
+        }
+        this.currentIndex++;
+      }
+    },
+    saveKey() {
+      // this.$message.info('谢谢参与')
+      this.resultStatus = true;
+    },
+    async onConfirm() {
+      // this.$message.info('谢谢参与')
+      this.resultStatus = true;
+    },
+    onSubmitClose() {
+      this.close();
+    },
+    beforeUpload(file, type) {
+      // const isJPG = file.type === 'image/jpeg';
+      const isLt2M = file.size / 1024 / 1024 < 5;
+      const imgType = ["JPG", "PNG", "JPEG", "GIF"];
+      const testType = ["XLSX", "XLS", "DOCX", "PDF", "TXT"];
+      const fileExtension = file.name.split(".").pop().toUpperCase();
+      console.log(
+        type,
+        fileExtension,
+        testType,
+        testType.indexOf(fileExtension) != -1
+      );
+      let fileType = false;
+      if (type == "file") {
+        if (testType.indexOf(fileExtension) != -1) {
+          fileType = true;
+        } else {
+          this.$message.error("请上传正确的附件!");
+          return false;
+        }
+      } else if ((type = "image")) {
+        if (imgType.indexOf(fileExtension) != -1) {
+          fileType = true;
+        } else {
+          this.$message.error("请上传正确的附件!");
+          return false;
+        }
+      }
+      //   if (!isJPG) {
+      //     this.$message.error('上传头像图片只能是 JPG 格式!');
+      //   }
+      if (!isLt2M) {
+        this.$message.error("上传附件大小不能超过 5MB!");
+      }
+      this.uploadLoading = true;
+      return isLt2M && fileType;
+    },
+    handleUploadError(file) {
+      this.uploadLoading = false;
+      this.$message.error("上传附件失败");
+    },
+    handleUploadSuccess(response, file, list, question) {
+      this.uploadLoading = false;
+      this.$message.success("上传附件成功");
+      this.fileList = [...list];
+      console.log(this.fileList);
+      // this.fileList.push(file)
+    },
+    handleRemove(file, list) {
+      this.fileList = [...list];
+      console.log(this.fileList);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .top-tips {
-    color: #808080;
-    font-size: 14px;
-    padding: 0 0 10px;
+  color: #808080;
+  font-size: 14px;
+  padding: 0 0 10px;
 }
 
 .btn-submit {
-    width: 90%;
-    margin: 20px 5%;
+  width: 90%;
+  margin: 20px 5%;
 }
 
 .form-info {
-    margin: 10px;
-    width: auto;
-    border-radius: 5px;
+  margin: 10px;
+  width: auto;
+  border-radius: 5px;
 }
 .questionName {
-    padding-top: 5px;
-    font-size: 16px;
-    color: #444;
-    font-weight: 500;
-    line-height: 1.5;
+  padding-top: 5px;
+  font-size: 16px;
+  color: #444;
+  font-weight: 500;
+  line-height: 1.5;
 }
-/deep/.el-radio-group, /deep/.el-checkbox-group {
-    width: 100%;
+/deep/.el-radio-group,
+/deep/.el-checkbox-group {
+  width: 100%;
 }
-/deep/.el-radio__input.is-checked+.el-radio__label {
-    color: #606266;
+/deep/.el-radio__input.is-checked + .el-radio__label {
+  color: #606266;
 }
-/deep/.el-radio, /deep/.el-checkbox {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row-reverse;
-    padding: 10px 0;
-    .el-radio__label, .el-checkbox__label {
-        padding-left: 0;
-    }
+/deep/.el-radio,
+/deep/.el-checkbox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  padding: 10px 0;
+  .el-radio__label,
+  .el-checkbox__label {
+    padding-left: 0;
+  }
 }
 /deep/.el-button--primary {
-    background: #01c1b5 !important;
-    border-color: #01c1b5 !important;
+  background: #01c1b5 !important;
+  border-color: #01c1b5 !important;
+}
+/deep/.el-upload {
+  display: block;
+}
+/deep/.el-upload--picture-card {
+  width: 100%;
+  height: 100px;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 
 .resultModel {
-    .img {
-        width: 145px;
-        margin: 0 auto;
-        display: block;
-        // padding-top: 50px;
-    }
-    .content {
-        font-size: 20px;
-        color: #1A1A1A;
-        text-align: center;
-        font-weight: 500;
-        padding-bottom: 30px;
-    }
+  .img {
+    width: 145px;
+    margin: 0 auto;
+    display: block;
+    // padding-top: 50px;
+  }
+  .content {
+    font-size: 20px;
+    color: #1a1a1a;
+    text-align: center;
+    font-weight: 500;
+    padding-bottom: 30px;
+  }
 }
-</style>
+</style>

src/views/setQuestions/components/questionList.vue

@@ -1,103 +1,204 @@
 <template>
-<el-form :model="form" ref="form" label-width="100px" class="question">
+  <el-form :model="form" ref="form" label-width="100px" class="question">
     <el-row>
-        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-form-item label="题目类型" prop="type" :rules="[{ required: true, message: '请选择题目类型', trigger: 'change' }]">
-                <el-select v-model="form.type" placeholder="请选择题目类型" :disabled="disabled">
-                    <el-option label="单选" value="radio"></el-option>
-                    <el-option label="多选" value="checkbox"></el-option>
-                    <el-option label="问答" value="textarea"></el-option>
-                </el-select>
-            </el-form-item>
-        </el-col>
-        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-            <el-form-item label="是否必填" prop="isRequire" :rules="[{ required: true, message: '请选择是否必填', trigger: 'change' }]">
-                <el-select v-model="form.isRequire" placeholder="请选择是否必填" :disabled="disabled">
-                    <el-option label="是" :value="1"></el-option>
-                    <el-option label="否" :value="0"></el-option>
-                </el-select>
-            </el-form-item>
-        </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+        <el-form-item
+          label="题目类型"
+          prop="type"
+          :rules="[
+            { required: true, message: '请选择题目类型', trigger: 'change' },
+          ]"
+        >
+          <el-select
+            v-model="form.type"
+            placeholder="请选择题目类型"
+            :disabled="disabled"
+          >
+            <el-option label="单选" value="radio"></el-option>
+            <el-option label="多选" value="checkbox"></el-option>
+            <el-option label="问答" value="textarea"></el-option>
+            <el-option label="附件" value="file"></el-option>
+            <el-option label="图片" value="image"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+        <el-form-item
+          label="是否必填"
+          prop="isRequire"
+          :rules="[
+            { required: true, message: '请选择是否必填', trigger: 'change' },
+          ]"
+        >
+          <el-select
+            v-model="form.isRequire"
+            placeholder="请选择是否必填"
+            :disabled="disabled"
+          >
+            <el-option label="是" :value="1"></el-option>
+            <el-option label="否" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
     </el-row>
-    <el-form-item label="题目" prop="content" :rules="[{ required: true, message: '请输入题目', trigger: 'blur' }]">
-        <el-input type="textarea" placeholder="请输入题目" :disabled="disabled" v-model="form.content" show-word-limit maxlength="200" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
+    <el-form-item
+      label="题目"
+      prop="content"
+      :rules="[{ required: true, message: '请输入题目', trigger: 'blur' }]"
+    >
+      <el-input
+        type="textarea"
+        placeholder="请输入题目"
+        :disabled="disabled"
+        v-model="form.content"
+        show-word-limit
+        maxlength="200"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+      ></el-input>
     </el-form-item>
 
-    <template v-if="form.type != 'textarea'">
-        <div v-for="(questionnaireQuestionItemList, index) in form.questionnaireQuestionItemList" :key="index">
-            <el-form-item :label="'选项' + (index + 1)"
-                style="display: inline-block;"
-                :prop="'questionnaireQuestionItemList.' + index + '.answerValue'"
-                :rules="[{ required: true, message: '请输入选项内容', trigger: 'change' }]">
-                <el-input type="text" placeholder="请输入选项内容" :disabled="disabled" maxlength="100" v-model="questionnaireQuestionItemList.answerValue"></el-input>
-            </el-form-item>
-            <el-form-item label="是否终止答题"
-                style="display: inline-block;"
-                label-width="120px"
-                :prop="'questionnaireQuestionItemList.' + index + '.isOver'"
-                :rules="[{ required: true, message: '请选择是否终止答题', trigger: 'change' }]">
-                <el-radio-group v-model="questionnaireQuestionItemList.isOver" :disabled="disabled" style="margin-right: 20px">
-                    <el-radio :label="1">是</el-radio>
-                    <el-radio :label="0">否</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <div style="display: inline-block;">
-                <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
-                    <el-button icon="el-icon-top" circle size="small" @click="moveDown(form.questionnaireQuestionItemList, index)" :disabled="index == 0 || disabled"></el-button>
-                </el-tooltip>
-                <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
-                    <el-button icon="el-icon-bottom" circle size="small" @click="moveUp(form.questionnaireQuestionItemList, index)" :disabled="form.questionnaireQuestionItemList.length <= 1 || form.questionnaireQuestionItemList.length == (index + 1) || disabled"></el-button>
-                </el-tooltip>
-                <el-tooltip class="item" effect="dark" content="删除" placement="top">
-                    <el-button icon="el-icon-delete" circle size="small" @click="onDelete(form.questionnaireQuestionItemList, index)" :disabled="form.questionnaireQuestionItemList.length <= 1 || disabled"></el-button>
-                </el-tooltip>
-            </div>
-        </div>
-        <el-form-item>
-            <el-button style="width: 200px" type="default" icon="el-icon-plus" :disabled="form.questionnaireQuestionItemList.length >= 10 || disabled" @click="addQuestionItem(form.questionnaireQuestionItemList)">新增选项</el-button>
+    <template v-if="form.type == 'radio' || form.type == 'checkbox'">
+      <div
+        v-for="(
+          questionnaireQuestionItemList, index
+        ) in form.questionnaireQuestionItemList"
+        :key="index"
+      >
+        <el-form-item
+          :label="'选项' + (index + 1)"
+          style="display: inline-block"
+          :prop="'questionnaireQuestionItemList.' + index + '.answerValue'"
+          :rules="[
+            { required: true, message: '请输入选项内容', trigger: 'change' },
+          ]"
+        >
+          <el-input
+            type="text"
+            placeholder="请输入选项内容"
+            :disabled="disabled"
+            maxlength="100"
+            v-model="questionnaireQuestionItemList.answerValue"
+          ></el-input>
         </el-form-item>
+        <el-form-item
+          label="是否终止答题"
+          style="display: inline-block"
+          label-width="120px"
+          :prop="'questionnaireQuestionItemList.' + index + '.isOver'"
+          :rules="[
+            {
+              required: true,
+              message: '请选择是否终止答题',
+              trigger: 'change',
+            },
+          ]"
+        >
+          <el-radio-group
+            v-model="questionnaireQuestionItemList.isOver"
+            :disabled="disabled"
+            style="margin-right: 20px"
+          >
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div style="display: inline-block">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="向下移动"
+            placement="top"
+          >
+            <el-button
+              icon="el-icon-top"
+              circle
+              size="small"
+              @click="moveDown(form.questionnaireQuestionItemList, index)"
+              :disabled="index == 0 || disabled"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="向下移动"
+            placement="top"
+          >
+            <el-button
+              icon="el-icon-bottom"
+              circle
+              size="small"
+              @click="moveUp(form.questionnaireQuestionItemList, index)"
+              :disabled="
+                form.questionnaireQuestionItemList.length <= 1 ||
+                form.questionnaireQuestionItemList.length == index + 1 ||
+                disabled
+              "
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="删除" placement="top">
+            <el-button
+              icon="el-icon-delete"
+              circle
+              size="small"
+              @click="onDelete(form.questionnaireQuestionItemList, index)"
+              :disabled="
+                form.questionnaireQuestionItemList.length <= 1 || disabled
+              "
+            ></el-button>
+          </el-tooltip>
+        </div>
+      </div>
+      <el-form-item>
+        <el-button
+          style="width: 200px"
+          type="default"
+          icon="el-icon-plus"
+          :disabled="
+            form.questionnaireQuestionItemList.length >= 10 || disabled
+          "
+          @click="addQuestionItem(form.questionnaireQuestionItemList)"
+          >新增选项</el-button
+        >
+      </el-form-item>
     </template>
-</el-form>
+  </el-form>
 </template>
 <script>
 export default {
-    props: ['form', 'type', 'disabled'],
-    data () {
-        return {
-        }
+  props: ["form", "type", "disabled"],
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    // 添加题目选项
+    addQuestionItem(questionnaireQuestionItemLists) {
+      questionnaireQuestionItemLists.push({});
     },
-    mounted () {
+    // 向上移动
+    moveUp(arr, index) {
+      arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
     },
-    methods: {
-        // 添加题目选项
-        addQuestionItem(questionnaireQuestionItemLists) {
-            questionnaireQuestionItemLists.push({})
-        },
-        // 向上移动
-        moveUp(arr, index) {
-            arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
-        },
-        // 向下移动
-        moveDown(arr, index) {
-            arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
-
-        },
-        // 删除选项
-        onDelete(arr, index) {
-            if(this.type == 'update') {
-                if(this.form.delQuestionnaireQuestionItemIdList) {
-                    this.form.delQuestionnaireQuestionItemIdList.push(arr[index].id)
-                } else {
-                    this.form.delQuestionnaireQuestionItemIdList = [arr[index].id]
-                }
-            }
-            arr.splice(index, 1)
+    // 向下移动
+    moveDown(arr, index) {
+      arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
+    },
+    // 删除选项
+    onDelete(arr, index) {
+      if (this.type == "update") {
+        if (this.form.delQuestionnaireQuestionItemIdList) {
+          this.form.delQuestionnaireQuestionItemIdList.push(arr[index].id);
+        } else {
+          this.form.delQuestionnaireQuestionItemIdList = [arr[index].id];
         }
-    }
-}
+      }
+      arr.splice(index, 1);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .question .el-select {
-    width: 100% !important;
+  width: 100% !important;
 }
-</style>
+</style>