<template>
  <basic-container>
    <avue-form ref="form" v-model="form" :option="option" @reset-change="emptytChange" @submit="submit"
      style="width: 50%;margin: 0 0;">
      <template slot="items" slot-scope="scope">
        <div>
          <div v-for="(item,index) in form.items" :key="index+'答案列表'"
            :style="{display: 'flex',alignItems: 'center',marginTop:index!=0?'10px':''}">
            <div style="width: 30px;">
              {{item.prefix}}66666
            </div>
            <el-input v-model="item.content" clearable :disabled="disabledSubmit"
              @focus="openUeditorAnswer(index,'items',item.content)"></el-input>
            <span style="display: inline-block;width: 80px;text-align: center;">分数：</span>
            <el-input-number v-model="item.score" :min="1" label="" style="width:40%"></el-input-number>
          </div>


        </div>
      </template>
      <template slot="correct" slot-scope="scope">
        <el-select v-model="form.correct">
          <el-option v-for="(item,index) in form.items" :key="index+'下拉选'" :label="answerList[index]"
            :value="answerList[index]"></el-option>
        </el-select>
      </template>

    </avue-form>


    <el-dialog :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false"
      style="width: 100%;height: 100%" :before-close="handleClose" :show-close="false" center>
      <Ueditor @ready="editorReady" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitUeditor()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
  import Ueditor from '@/components/Ueditor'
  import {
    getList as getCourseList
  } from "@/api/onlinelearn/course";
  import {
    getList as getListmlLazy
  } from "@/api/onlinelearn/components/kcml.js";
  import {
    add
  } from "@/api/examination/titleList.js";
  import {
    mapGetters,
    mapMutations
  } from 'vuex';
  export default {
    components: {
      Ueditor
    },
    data() {
      var _this = this
      return {
        fwbMain: {},
        tagList: [],
        disabledSubmit: false,
        answerList: {
          0: 'A',
          1: 'B',
          2: 'C',
          3: 'D',
          4: 'E',
          5: 'F',
          6: 'G',
          7: 'H',
          8: 'I',
          9: 'J',
          10: 'K',
          11: 'L',
          12: 'M',
          13: 'N',
          14: 'O',
          15: 'P',
          16: 'Q',
          17: 'R',
          18: 'S',
          19: 'T',
          20: 'U',
          21: 'V',
          22: 'W',
          23: 'X',
          24: 'Y',
          25: 'Z'
        },
        dialogVisible: false,
        courseId: '',
        text: '',
        questionType: '4',
        form: {
          items: []
        },
        sizeValue: 'small',
        options: {
          action: "/api/blade-resource/oss/endpoint/put-file",
          props: {
            res: "data",
            url: 'link'
          },
        },
        textSaveProp: '',
        option: {
          size: this.sizeValue,
          column: [{
              label: '课程名称',
              prop: 'courseName',
              display: true,
              span: 13,
              disabled: true
            },
            {
              label: '目录名称',
              prop: 'catalogueName',
              display: true,
              span: 13,
              disabled: true
            }, {
              label: "课程名称",
              prop: "courseId",
              display: true,
              type: 'tree',
              span: 13,
              dicData: [],
              props: {
                label: 'courseName',
                value: 'id'
              },

              rules: [{
                required: true,
                message: "请选择课程",
                trigger: "blur"
              }],
            },
            {
              label: "目录名称",
              type: 'tree',
              lazy: true,
              display: true,
              props: {
                label: 'catalogueName',
                value: 'id'
              },
              dicData: [],
              treeLoad: (node, resolve) => {
                if (_this.courseId) {
                  let stop_level = 1000000;
                  let level = node.level;
                  let data = node.data || {}
                  let code = data.id;
                  let list = [];

                  let callback = () => {
                    resolve((list || []).map(ele => {
                      return Object.assign(ele, {
                        leaf: level >= stop_level
                      })
                    }));
                  }
                  if (level == 0) {
                    getListmlLazy(0, {
                      courseId: _this.courseId
                    }).then(res => {
                      list = res.data.data;
                      callback()
                    })
                  } else {
                    getListmlLazy(code, {
                      courseId: _this.courseId
                    }).then(res => {
                      list = res.data.data;
                      callback()
                    })
                  }
                }
              },
              prop: "catalogueId",
              span: 13,
              rules: [{
                required: true,
                message: "请选择课程目录",
                trigger: "blur"
              }],
            },
            {
              label: '标题',
              span: 24,
              prop: 'title',
              rules: [{
                required: true,
                message: "请输入标题",
                trigger: "blur"
              }],
              click: function() {
                _this.dialogVisible = true
                _this.fwbMain = {
                  textSaveProp: 'title',
                  text: _this.form.title
                }
              },
            },
            // {
            //   label:'选项序号',
            //   prop:'itemOrder',
            //   type:'number',
            //   span: 24,
            // },
            {
              label: '答案列表',
              span: 24,
              prop: 'items',
              formslot: true,
              rules: [{
                required: true,
                message: "请输入答案列表",
                trigger: "change"
              }],
            },
            {
              label: '正确答案',
              span: 24,
              display: false,
              prop: 'correct',
              formslot: true,
            },
            {
              span: 24,
              label: '解析',
              rules: [{
                required: true,
                message: "请输入解析",
                trigger: "blur"
              }],
              click: function() {
                _this.dialogVisible = true
                _this.fwbMain = {
                  textSaveProp: 'analyze',
                  text: _this.form.analyze
                }
              },
              prop: 'analyze'
            },
            // {
            //   span: 24,
            //   label: '分数',
            //   type: 'number',
            //   controlsPosition: '',
            //   prop: 'score',
            //   disabled:true
            // },
            {
              span: 24,
              label: '题目难度',
              type: 'rate',
              prop: 'difficult'
            }
          ]
        }
      }
    },
    watch: {
      dialogVisible(val) {
        if (val) {
          this.$nextTick(() => {
            var ipt = document.getElementsByClassName('w-e-text')[0]
            ipt.focus()
          })
        }
      },

      'form.courseId': {
        handler(val) {
          const catalogueId = this.findObject(this.option.column, "catalogueId");
          if (val) {
            this.courseId = val
            getListmlLazy(0, {
              courseId: val
            }).then(res => {
              catalogueId.dicData = res.data.data;

            })
          } else {
            this.courseId = ''
            catalogueId.dicData = []
          }
        }
      },
      'form.catalogueId': {
        handler(val) {
          const catalogueId = this.findObject(this.option.column, "catalogueId");
          if (this.form.courseId) {
            if (val) {
              getListmlLazy(0, {
                courseId: val
              }).then(res => {
                catalogueId.dicData = res.data.data;

              })
            } else {
              getListmlLazy(0, {
                courseId: val
              }).then(res => {
                catalogueId.dicData = res.data.data;

              })
            }
          }

        }
      },
      // 'form.title': {
      //   handler(val) {
      //     if (val) {
      //       if (val.indexOf('gapfilling-span') == -1) {
      //         // this.$message.warning('请输入填空')
      //         // return
      //       } else {
      //         this.form.items = []
      //         var divs = document.createElement("div")
      //         divs.innerHTML = val
      //         var doms = divs.getElementsByClassName('gapfilling-span')
      //         for (var i = 0; i < doms.length; i++) {
      //           this.form.items.push({
      //             content: '',
      //             prefix: doms[i].innerText,
      //             score: ''
      //           })
      //         }

      //       }
      //     }
      //   }
      // },
      '$route.query': {
        handler() {
          var courseName = this.findObject(this.option.column, 'courseName'),
            catalogueName = this.findObject(this.option.column, 'catalogueName'),
            courseId = this.findObject(this.option.column, 'courseId'),
            catalogueId = this.findObject(this.option.column, 'catalogueId')
          courseName.display = catalogueName.display = false
          courseId.display = catalogueId.display = true
          this.tagList = this.$store.state.tags.tagList
          if (this.$route.query.data) {
            courseName.display = catalogueName.display = true
            courseId.display = catalogueId.display = false
            var data = JSON.parse(this.$route.query.data)
            this.$set(this.form, 'id', data.id)
            this.$set(this.form, 'difficult', data.difficult)
            this.$set(this.form, 'score', data.score)
            this.$set(this.form, 'correct', data.jtMsg.correct)
            this.$set(this.form, 'analyze', data.jtMsg.analyze)
            this.$set(this.form, 'courseId', data.courseId)
            this.$set(this.form, 'catalogueId', data.catalogueId)
            this.$set(this.form, 'title', data.jtMsg.titleContent)
            this.$set(this.form, 'courseName', data.courseName)
            this.$set(this.form, 'catalogueName', data.catalogueName)
            this.$set(this.form, 'items', data.jtMsg.questionItemObjects)

          } else {

            for (var key in this.form) {
              this.form[key] = ''
            }
            this.form.items = []
          }

        }
      }
    },
    mounted() {
      var courseName = this.findObject(this.option.column, 'courseName'),
        catalogueName = this.findObject(this.option.column, 'catalogueName'),
        courseId = this.findObject(this.option.column, 'courseId'),
        catalogueId = this.findObject(this.option.column, 'catalogueId')
      courseName.display = catalogueName.display = false
      courseId.display = catalogueId.display = true
      this.tagList = this.$store.state.tags.tagList
      if (this.$route.query.data) {
        courseName.display = catalogueName.display = true
        courseId.display = catalogueId.display = false
        var data = JSON.parse(this.$route.query.data)
        console.log(data, 'data')
        this.$set(this.form, 'id', data.id)
        this.$set(this.form, 'difficult', data.difficult)
        this.$set(this.form, 'score', data.score)
        this.$set(this.form, 'correct', data.jtMsg.correct)
        this.$set(this.form, 'analyze', data.jtMsg.analyze)
        this.$set(this.form, 'courseId', data.courseId)
        this.$set(this.form, 'catalogueId', data.catalogueId)
        this.$set(this.form, 'title', data.jtMsg.titleContent)
        this.$set(this.form, 'courseName', data.courseName)
        this.$set(this.form, 'catalogueName', data.catalogueName)
        this.$set(this.form, 'items', data.jtMsg.questionItemObjects)
        // this.form.items = []
        // var divs = document.createElement("div")
        // divs.innerHTML = val
        // var doms = divs.getElementsByClassName('gapfilling-span')
        // for (var i = 0; i < doms.length; i++) {
        //   this.form.items.push({
        //     content: '',
        //     prefix: doms[i].innerText,
        //     score: ''
        //   })
        // }
      }
      this.getCourseList()
    },
    methods: {
      handleback(url) {
        let {
          tag,
          key
        } = this.findTag(url);
        console.log(this.tagList)
        this.$store.commit('DEL_TAG', tag);

      },
      findTag(value) {
        let tag, key;
        this.tagList.map((item, index) => {
          if (item.value.indexOf(value) != -1) {
            tag = item;
            key = index;
          }
        });
        return {
          tag: tag,
          key: key
        };
      },
      ...mapMutations(['DEL_TAG']),
      editorReady(instance) {
        this.fwbMain.instance = instance
        this.fwbMain.instance.setContent(this.fwbMain.text)
        this.$nextTick(() => {
          this.fwbMain.instance.focus(true)
        })

      },
      emptytChange() {
        for (var key in this.form) {
          if (key == 'items') {
            this.form[key] = []
          } else {
            this.form[key] = ''
          }
        }
      },
      submit(form, done) {

        this.form.items.forEach((item, index) => {
          item.prefix = this.answerList[index]
        })
        var noEmpty = true
        this.form.items.forEach((item) => {
          if (item.content == '' || item.score == '') {
            noEmpty = false
          }
        })
        if (!noEmpty) {
          this.$message.warning('答案列表内容与分数不能为空')
          done();
          return
        }
        // score
        this.form.score = 0
        this.form.items.forEach((item) => {

          this.form.score += (item.score - 0)
        })
        this.disabledSubmit = true
        this.form.questionType = this.questionType



        // _this.form.items = newFormItem


        add(this.form).then(res => {
          this.emptytChange()
          this.disabledSubmit = false
          this.$message.success('操作成功')

          done();
          if (this.$route.query.data) {
            this.handleback(this.$route.fullPath)
            this.$router.go(-1)
          }
        }, () => {
          this.disabledSubmit = false
          // this.$message.error('提交失败')
          done()
        })
      },
      openUeditorAnswer(index, prop, content) {
        this.dialogVisible = true
        this.fwbMain = {
          textSaveProp: prop,
          text: content,
          itemsIndex: index
        }
      },
      delAnswer(index) {
        this.form.items.splice(index, 1)
        this.form.correct = ''
      },
      addAnswer() {
        this.form.correct = ''
        this.form.items.push({
          content: '',
          prefix: '',
          score: ''
        })
      },
      submitUeditor() {

        let text = this.fwbMain.instance.getContent()
        if (this.fwbMain.textSaveProp == 'items') {
          this.form[this.fwbMain.textSaveProp][this.fwbMain.itemsIndex].content = text
        } else if (this.fwbMain.textSaveProp == 'title') {
          if (text.indexOf('gapfilling-span') == -1) {
            this.$message.warning('请输入填空')
            return
          } else {
            this.form.items = []
            var divs = document.createElement("div")
            divs.innerHTML = text
            var doms = divs.getElementsByClassName('gapfilling-span')
            for (var i = 0; i < doms.length; i++) {
              this.form.items.push({
                content: '',
                prefix: doms[i].innerText,
                score: ''
              })
            }
            this.form[this.fwbMain.textSaveProp] = text
          }
        } else {
          this.form[this.fwbMain.textSaveProp] = text

        }
        this.handleClose()
      },

      handleClose() {
        this.dialogVisible = false
        this.text = ''
      },
      getCourseList() {
        getCourseList(1, 100000).then(res => {
          const courseId = this.findObject(this.option.column, "courseId");

          courseId.dicData = res.data.data.records
        })
      }
    },
  }
</script>

<style>
</style>

![在这里插入图片描述](https://img-blog.csdnimg.cn/667cf5044eed4f3785c40e08ee923fbc.png