mkw-visit-web/src/views/resource/component/addStudy.vue

<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增资料' : '编辑资料'" :form="form"
      :rules="rules" @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>学习内容名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入学习内容名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:expire_day>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>学习测验有效期：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择类型" v-model="form.expire_day" style="width: 300px;">
              <el-option v-for="item in studyDates" :value="item.id" :key="item.id" :label="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:rate>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            测试通过标准正确率需要达到：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.rate" placeholder="请输入正确率" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:minute>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            至少需要学习：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.minute" placeholder="请输入" clearable style="width: 150px;margin-right:5px">
            </el-input>分钟
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            学习内容：
          </div>
          <!-- <div class="xy-table-item-content" style="width: 680px;">
            <xyTinymce v-if="isShow" :height="200" v-model="form.content"></xyTinymce>
          </div> -->
          <div class="xy-table-item-content">
            <el-input :autosize="{minRows:2}" type="textarea" v-model="form.content" placeholder="请输入学习内容" clearable
              style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            面向对象：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择类型" v-model="form.type" style="width: 300px;">
              <el-option v-for="item in types" :value="item.id" :key="item.id" :label="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:file>
        <div class="xy-table-item">
          <div class="xy-table-item-label">资料上传：</div>
          <div class="xy-table-item-content">
            <el-upload style="width: 620px" :multiple="true" class="upload-demo" :action="action"
              :before-upload="uploadBeforePic" :on-success="picListSuccessHandler" :on-remove="picListRemoveHandler"
              :file-list="fileList" list-type="picture" multiple>
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">
                只能上传jpg/png/mp4文件，且不超过10M
              </div> -->
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:ask_list>
        <div class="xy-table-item">
          <div class="xy-table-item-label">测试题库：</div>
          <div class="xy-table-item-content">
            <Button type="primary" icon="md-add" style="margin-bottom: 10px" @click="drawer=true">新增题目</Button>
            <xy-table style="width: 620px" :height="260" :is-page="false" :list="form.ask_list"
              :table-item="questionTable">
              <template v-slot:btns>
                <el-table-column label="操作" width="180" header-align="center" align="center">
                  <template v-slot:default="scope">
                    <Button size="small" type="primary" ghost @click="editQuestion(scope.row,scope.$index)">编辑</Button>
                    <Button style="margin-left:8px" size="small" type="primary" ghost
                      @click="form.ask_list.splice(scope.$index, 1)">删除</Button>
                  </template>
                </el-table-column>
              </template>
            </xy-table>
          </div>
        </div>
      </template>

    </xy-dialog>
    <!-- 题库 -->
    <el-drawer :title="drawerEdit?'编辑':'新增'" :visible.sync="drawer" direction="rtl" @close="closeDrawer">
      <el-form :model="questionForm" ref="questionForm" label-width="100px"
        style="padding:20px;height:100%;padding-bottom: 120px;overflow-y: auto;">
        <el-form-item label="题目名称" prop="title" :rules="[{ required: true, message: '请输入题目名称' }]">
          <el-input v-model="questionForm.title" placeholder="请输入题目名称"></el-input>
        </el-form-item>
        <el-form-item label="题目类型" prop="type" :rules="[{ required: true, message: '请选择题目类型' }]">
          <el-select clearable placeholder="请选择类型" v-model="questionForm.type" style="width:100%">
            <el-option v-for="item in questionType" :value="item.value" :key="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="答案数量" prop="ansnum" :rules="[{ required: true, message: '请输入答案数量' }]">
          <el-input type="number" v-model="questionForm.ansnum" placeholder="请输入答案数量"></el-input>
        </el-form-item>
        <div v-if="questionForm.ansnum>0">
          <template v-for="(item,index) in answerLabel">
            <el-form-item :label="`选项${item}`" :prop="questionForm['ans'][index]" v-if="index<questionForm.ansnum">
              <el-input v-model="questionForm['ans'][index]" placeholder="请输入答案"></el-input>
            </el-form-item>
          </template>
        </div>
        <el-form-item v-if="questionForm.type==2&&questionForm.ansnum>1" label="正确选项" prop="correctKeydouble">
          <el-select v-model="questionForm.correctKeydouble" style="width: 100%" multiple placeholder="请选择正确选项">
            <template v-for="(item,index) in answerLabel">
              <el-option v-if="index<questionForm.ansnum" :key="index" :label="item" :value="index">
              </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item v-else label="正确选项" prop="correctKey">
          <el-select v-model="questionForm.correctKey" style="width: 100%" placeholder="请选择正确选项">
            <template v-for="(item,index) in answerLabel">
              <el-option v-if="index<questionForm.ansnum" :key="index" :label="item" :value="index">
              </el-option>
            </template>
          </el-select>
        </el-form-item>
        <div style="text-align: right;">
          <Button ghost type="primary" @click="closeDrawer">取消</Button>
          <Button type="primary" @click="submitAnswer" style="margin-left:8px">确定</Button>
        </div>
      </el-form>


    </el-drawer>

  </div>
</template>

<script>
  import {
    show,
    save
  } from "@/api/resource/study.js"
  import {
    getparameter
  } from "@/api/system/dictionary";

// import xyTinymce from "@/components/XyTinymce/index.vue";
  export default {
    components: {
      // xyTinymce
    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        fileList: [],
        types: [{
            id: 1,
            value: "访客"
          },
          {
            id: 2,
            value: "施工"
          },
          {
            id: 3,
            value: "车辆"
          }
        ],
        form: {
          name: "",
          expire_day: "",
          type: "",
          rate: "",
          minute: "",
          content: "",
          file: [],
          ask_list: []
        },
        // 题库
        drawer: false,
        drawerIndex: 0,
        drawerEdit: false,
        questionForm: {
          title: "",
          type: "",
          ans: [],// 答案内容存储
          answer: [],// 传递的答案数组
          ansnum: "",// 答案数量
          correctKey: "",//单选答案index
          correctKeydouble: []//多选答案index
        },
        // questionRules:[

        // ]
        questionType: [{
          label: "单选",
          value: 1,
        }, {
          label: "多选",
          value: 2
        }],
        answerLabel: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', "K", "L"],
        questionTable: [{
            label: '序号',
            sortable: false,
            type: "index"
          }, {
            label: '题目名称',
            sortable: false,
            prop: 'title',
          },
          {
            label: '题目类型',
            sortable: false,
            prop: 'type',
            formatter: (cell, data, value) => {
              return value == 1 ? '单选' : '多选'
            }
          },
          {
            label: '答案选项',
            sortable: false,
            prop: 'isans'
          },
        ],
        rules: {},
        studyDates: [{
          id: 90,
          value: '三个月'
        }, {
          id: 180,
          value: '六个月'
        }, {
          id: 270,
          value: '九个月'
        }]

      }
    },
    created() {},
    methods: {
      // async getLabels() {
      //   const res = await getparameter({
      //     number: "studyDate",
      //   });
      //   this.studyDates = res?.detail;
      // },
      //上传
      uploadBeforePic(file) {
        if (file.size / 1000 > 2048) {
          this.$successMessage('上传图片大小超过2M！', '', 'warning')
          return false;
        }
      },
      picListSuccessHandler(res, file, fileList) {
        this.form.file = fileList.map((item) => {
          return item.response ? item.response.id : item.id
        });
      },
      picListRemoveHandler(file, fileList) {
        this.form.file = fileList.map((item) => {
          return item.response ? item.response.id : item.id
        });
      },


      async getDetail() {
        const res = await show({
          id: this.id
        })
        let answer = []
        for(var m of res.asks){
          let conArr = [] // 答案内容
          let result = '' // 单选答案index
          let resultdouble = [] // 多选答案index
          let _isans = ''
          m.answer.map((k,i)=>{
            conArr.push(k.content)
            if(k.result==1){
              m.type==1?result = i:resultdouble.push(i)
            }
          })
          if(m.type==1){
            _isans = this.answerLabel[result]
          }else{
            resultdouble.map(k => {
              _isans += this.answerLabel[k]
            })
          }
          answer.push({
              "title": m.title,
              "type": m.type,
              "ans": conArr,
              "answer": m.answer,
              "ansnum": m.answer.length,
              "correctKey": result,
              "correctKeydouble": resultdouble,
              "isans": _isans
          })
        }
        // this.questionForm = answer
        this.form = {
          name: res?.name,
          expire_day: res?.expire_day,
          type: res ? parseInt(res.type) : "",
          rate: res?.rate,
          minute: res?.minute,
          content: res?.content,
          file: res?.file,
          ask_list: answer
        }
        console.log("before",this.form.ask_list)
        this.fileList = res?.file_detail
      },
      // 题库
      closeDrawer() {
        this.questionForm = {
          title: "",
          type: "",
          ans: [],
          answer: [],
          ansnum: "",
          isans: '',
          correctKey: "",
          correctKeydouble: ""
        }
        this.drawer = false
      },
      editQuestion(row, index) {
        console.log(row, index)
        this.questionForm = row
        this.drawerIndex = index
        this.drawerEdit = true
        this.drawer = true
      },
      submitAnswer() {
        // return
        this.$refs['questionForm'].validate().then(res => {
          let answerArr = []
          let obj = this.questionForm
          obj.ans.map((item, index) => {
            answerArr.push({
              content: item,
              result: 0
            })
          })
          if (obj.type == 1) {
            answerArr[obj.correctKey]['result'] = 1
            obj.isans = this.answerLabel[obj.correctKey]
          } else {
            obj.isans = ""
            obj.correctKeydouble.map(k => {
              answerArr[k]['result'] = 1
              obj.isans += this.answerLabel[k]
            })
          }
          obj.answer = answerArr
          if (this.drawerEdit) {
            this.form.ask_list[this.drawerIndex] = obj
            this.drawerIndex = 0
            this.drawerEdit = false
          } else {
            this.form.ask_list.push(obj)
          }
          this.$nextTick(function() {
            this.questionForm = {
              title: "",
              type: "",
              ans: [],
              answer: [],
              ansnum: "",
              correctKey: "",
              correctKeydouble: ""
            }
            this.drawer = false
          })

        }).catch(err => {
          this.$successMessage('请填写完整信息！', '', 'warning')
        })
      },
      submit() {
        console.log(this.form)
        // return
        let that = this
        if (this.type === 'editor') {
          this.form.id = this.id
        }else{
          this.form.id = ""
        }
        save({
          ...that.form
        }).then(res => {
          this.$successMessage(this.type, '学习资料')
          this.isShow = false
          this.$emit('refresh')
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = ''
          this.fileList = []
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .xy-table-item-label {
    width: 160px !important;
  }
</style>