pbl-teacher-table/src/components/pages/workPage/components/setQuestionsAndAnswers.vue

<template>
  <div class="setChoiceQuestion">
    <div class="testItem">
      <div class="ti_header">
        <span>{{ lang.ssTopic }}{{ 1 }}</span>
      </div>

      <div class="ti_title">
        <el-input class="ti_t_input" type="textarea" v-model="jsonData.answerQ" @input="setTestTitle"></el-input>
        <div class="uploadImage" @click="uploadImage()">
          <svg viewBox="0 0 1024 1024" version="1.1" p-id="15953" width="200" height="200">
            <path
              d="M368 480c-62.4 0-112-49.6-112-112s49.6-112 112-112 112 49.6 112 112-49.6 112-112 112z m0-160c-27.2 0-48 20.8-48 48s20.8 48 48 48 48-20.8 48-48-20.8-48-48-48z m464 608H192c-52.8 0-96-43.2-96-96V192c0-52.8 43.2-96 96-96h640c52.8 0 96 43.2 96 96v640c0 52.8-43.2 96-96 96zM192 160c-17.6 0-32 14.4-32 32v640c0 17.6 14.4 32 32 32h640c17.6 0 32-14.4 32-32V192c0-17.6-14.4-32-32-32H192z m259.2 556.8c-25.6 0-51.2-11.2-70.4-30.4l-38.4-40c-12.8-12.8-33.6-12.8-46.4 0l-49.6 52.8c-12.8 12.8-32 12.8-44.8 1.6s-12.8-32-1.6-44.8l49.6-52.8c17.6-19.2 43.2-30.4 68.8-30.4s51.2 11.2 70.4 30.4l38.4 40c12.8 12.8 33.6 12.8 46.4 0l160-168c17.6-19.2 43.2-30.4 70.4-30.4s51.2 11.2 70.4 30.4L920 628.8c12.8 12.8 11.2 33.6-1.6 44.8-12.8 12.8-33.6 11.2-44.8-1.6L728 518.4c-12.8-12.8-33.6-12.8-46.4 0L521.6 688c-19.2 17.6-44.8 28.8-70.4 28.8z"
              fill="#333333" p-id="15954"></path>
          </svg>
        </div>
      </div>
      <!-- 图片 -->
      <div class="imageList">
        <div v-for="(image, imageIndex) in jsonData.imageList" :key="imageIndex">
          <el-image style="width: 100px; height: 100px" :src="image.url" :preview-src-list="[image.url]"
            fit="cover"></el-image>
            <svg @click="delImage(imageIndex)" t="1774237005199" viewBox="0 0 1024 1024" width="200" height="200"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM305.956571 370.395429L447.488 512 305.956571 653.604571a45.568 45.568 0 1 0 64.438858 64.438858L512 576.512l141.604571 141.531429a45.568 45.568 0 0 0 64.438858-64.438858L576.512 512l141.531429-141.604571a45.568 45.568 0 1 0-64.438858-64.438858L512 447.488 370.395429 305.956571a45.568 45.568 0 0 0-64.438858 64.438858z" fill="#FF2525" p-id="4716"></path></svg>
        </div>
      </div>

      <!-- 选择题 -->
      <!-- <div class="checkList">
        <div class="checkItem" v-for="(check, checkIndex) in item.checkList" :key="checkIndex">
          <div class="check" :class="{ 'checked': item.answer.includes(checkIndex) }"
            @click="checkClick(item.id, checkIndex)">
            <svg v-if="item.answer.includes(checkIndex)" t="1773996159000" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5894" width="200" height="200">
              <path
                d="M404.352 685.354667L789.632 213.333333 853.333333 267.52 409.941333 810.666667 170.666667 566.4l58.581333-59.818667z"
                p-id="5895"></path>
            </svg>
          </div>
          <el-input v-model="item.checkList[checkIndex]" placeholder="请输入选项" @blur="setTestJson()"></el-input>
          <div class="btn">
            <div @click="delCheck(item.id, checkIndex)">
              <svg viewBox="0 0 1024 1024" version="1.1" p-id="12415" width="200" height="200">
                <path
                  d="M902.4 282.1H117.7c-13.4 0-23.5-10.1-23.5-23.5v-3.4c0-13.4 10.1-23.5 23.5-23.5h788.1c13.4 0 23.5 10.1 23.5 23.5v3.4c0 13.4-10.1 23.5-26.9 23.5zM634.1 151.3H386c-13.4 0-26.8-10.1-23.5-23.5v-6.7c0-13.4 10.1-23.5 23.5-23.5h248.2c13.4 0 23.5 10.1 23.5 23.5v3.4c3.3 13.3-10.1 26.8-23.6 26.8z m228.1 238.1c0-13.4-10.1-26.8-26.8-26.8-16.8 0-26.8 10.1-26.8 26.8L775 798.5v13.4c0 23.5-10.1 43.6-30.2 53.7-13.4 6.7-30.2 10.1-50.3 10.1H332.3c-33.5 3.4-60.4 0-70.4-33.5-3.4-6.7-6.7-16.8-6.7-26.8l-10.1-104-36.9-322c0-13.4-10.1-23.5-23.5-23.5s-26.8 10.1-26.8 23.5l47 462.8c0 40.2 40.2 73.8 80.5 73.8h459.5c40.2 0 80.5-33.5 80.5-73.8l36.8-462.8c0 3.3 0 0 0 0z m0 0"
                  p-id="12416"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="addCheck" @click="addCheck(item.id)">
          <svg viewBox="0 0 1024 1024" version="1.1" p-id="2732" width="200" height="200">
            <path
              d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
              p-id="2733"></path>
          </svg>
          <span>选项</span>
        </div>
      </div> -->

      <!-- 解释说明 -->
      <div class="explanation">
        <div class="e_header">
          <span>{{ lang.ssEvaluationStandard }}</span>
          <div @click="generateExplanation()" :disabled="chatLoading" v-loading="messagesloading">
            <svg t="1774233113566" viewBox="0 0 1027 1024" width="200" height="200">
              <path
                d="M511.979521 544.586217a54.525819 54.525819 0 0 1-23.359066-5.247791L31.038758 321.427143a54.397824 54.397824 0 0 1 0-98.236071L488.620455 5.279789c14.719411-7.039718 31.99872-7.039718 46.718131 0l457.581697 217.911283a54.397824 54.397824 0 0 1 0 98.236071l-457.581697 217.911283A54.525819 54.525819 0 0 1 511.979521 544.586217zM180.984761 272.341106L511.979521 429.966801l331.058757-157.625695L511.979521 114.587417 180.984761 272.341106z m354.417823 746.402144l457.517699-217.911283a54.397824 54.397824 0 1 0-46.718131-98.236071L511.979521 909.371625l-434.158634-206.775729a54.397824 54.397824 0 0 0-46.718131 98.300068l457.581697 217.847286a54.525819 54.525819 0 0 0 46.718131 0z m0-239.73441l457.517699-217.847286a54.397824 54.397824 0 1 0-46.718131-98.300068L511.979521 669.573217l-434.158634-206.711731a54.397824 54.397824 0 0 0-46.718131 98.300068l457.581697 217.847286a54.525819 54.525819 0 0 0 46.718131 0z"
                p-id="9073"></path>
            </svg>
            <span>{{ chatLoading ? lang.ssGenerating : lang.ssAIGenerate }}</span>
          </div>
        </div>
        <el-input class="explain_textarea" type="textarea" rows="10" resize="none" v-model="jsonData.evaluationCriteria" :placeholder="lang.ssEnterEvaluationStandard"
          @input="setTestJson()" v-loading="messagesloading" :disabled="chatLoading"></el-input>
      </div>
    </div>

  </div>
</template>

<script>
import { uploadOneFile } from '@/components/tools/uploadFile'
import { myMixin } from '@/mixins/mixin'
export default {
  mixins: [myMixin],
  emits: ['setTestJson', 'save'],
  props: {
    workData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      jsonData: {},
      streamController: [],
      chatLoading: false,
      messagesloading: false,
      userid: this.$route.query.userid,
    }
  },
  watch: {
    workData: {
      handler(newVal, oldVal) {
        if (newVal.type == 15) {
          if (JSON.stringify(newVal.json) != JSON.stringify(this.jsonData)) {
            let _data = JSON.parse(JSON.stringify(newVal.json))

            if(!_data.imageList){
              _data.imageList = [];
            }
            if(!_data.evaluationCriteria){
              _data.evaluationCriteria = '';
            }

            this.jsonData = _data;
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 更新题目
    setTestJson() {
      // console.log(this.jsonData)
      // this.jsonData.testCount = this.jsonData.testJson.length;
      this.$emit('setTestJson', this.jsonData);
    },
    //修改标题
    setTestTitle( title) {
      console.log('修改标题', title)
      this.jsonData.answerQ = title;
      // let test = this.jsonData..find(item => item.id == id);
      // if (test) {
      //   test.teststitle = title;
      // }
      this.setTestJson();
    },
    // 上传图片
    uploadImage(id) {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.click();
      input.onchange = (e) => {
        if (e.target.files[0]) {
          uploadOneFile(e.target.files[0]).then(res => {
            res.src = res.url
            this.jsonData.imageList = [res];
            // this.jsonData.testJson.find(item => item.id == id).timuList = [res];
            this.setTestJson();
          })
        }
      }
    },
    // 删除图片
    delImage(index) {
      this.jsonData.imageList.splice(index, 1);
      // let test = this.jsonData.testJson.find(item => item.id == id);
      // if (test) {
      //   test.timuList.splice(index, 1);
      // }
      this.setTestJson();
    },
    // 生成解释
    async generateExplanation() {
      if (this.chatLoading) {
        this.$message.warning(this.lang.ssPleaseWait);
        return
      }
      if (this.messagesloading) {
        this.$message.warning(this.lang.ssPleaseWait);
        return
      }
      let prompt = `- 题干：${this.jsonData.answerQ}`
      this.chatLoading = true
      this.messagesloading = true
      this.chat_stream(prompt, '5edc10d5-8635-4fe6-9670-8b2d9e8005aa', this.userid || this.workData.userid, this.lang.lang, (event) => {
        if (event.type === 'message') {
          this.jsonData.evaluationCriteria = event.data
          this.messagesloading = false
        }
        else if (event.type === 'messageEnd') {
          this.jsonData.evaluationCriteria = event.data
          this.messagesloading = false
          this.chatLoading = false
          this.setTestJson()
        }else if (event.type === 'error') {
          this.chatLoading = false
          this.messagesloading = false
          this.$message.error(event.data)
        }
      }).then(controller => {
        this.streamController = controller
      }).catch(err => {
        this.chatLoading = false
        this.messagesloading = false
        console.log('err', err)
        this.stopMessage()
      })
    },
    stopMessage() {
      if (this.streamController) {
        this.streamController.abort()
        this.streamController = null
      }
      this.chatLoading = false
      this.messagesloading = false
    }
  },
}
</script>

<style scoped>
.setChoiceQuestion {
  width: 100%;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 4rem;
  box-sizing: border-box;
  gap: 2rem;
}

.addTest {
  border-radius: 5px;
  border: 1px dashed #d1d5db;
  padding: .5rem 1rem;
  height: fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

.addTest>svg {
  width: .7rem;
  height: .7rem;
  fill: #6E7583;
}

.addTest>span {
  font-weight: bold;
  font-size: .9rem;
  color: #6b7280;
}

.testItem {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: column;
}

.ti_header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.ti_header>span {
  font-size: 1rem;
  font-weight: 600;
  color: #ff9300;
}

.ti_h_edit {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ti_h_edit>span {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F9FAFB;
  border-radius: 4px;
  cursor: pointer;
}

.ti_h_edit>span>svg {
  width: 1rem;
  height: 1rem;
  fill: #6B7280;
}

.ti_title {
  width: 100%;
  height: fit-content;
  padding-bottom: 2rem;
  min-height: 4rem;
  background: #FAFBFC;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  position: relative;
}

.ti_t_input {
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: none;
  font-size: 1.2rem;
  resize: none;
  /* max-height: 10rem; */
  overflow: auto;
  /* padding-right: 2rem; */
}

.ti_t_input /deep/ .el-textarea__inner {
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: none;
  font-size: 1.2rem;
  resize: none;
  /* max-height: 10rem; */
  overflow: auto;
}

.uploadImage {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: #fff;
  border-radius: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  padding: .5rem;
}

.uploadImage>svg {
  width: 1rem;
  height: 1rem;
}

.checkList {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 4rem;
}

.checkItem {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;

}

.check {
  width: 1.1rem;
  height: 1.1rem;
  border: solid 1px #D1D5DB;
  border-radius: .25rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checked {
  background: #FF9300;
}

.checked>svg {
  width: .7rem;
  height: .7rem;
  fill: #fff;
}

.checkItem>.el-input {
  width: calc(100% - 10rem);
}

.addCheck {
  border-radius: 5px;
  border: 1px dashed #d1d5db;
  padding: .3rem .8rem;
  height: fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  margin-left: 2.2rem;
}

.addCheck>svg {
  width: .5rem;
  height: .5rem;
  fill: #6E7583;
}

.addCheck>span {
  font-weight: bold;
  font-size: .8rem;
  color: #6b7280;
}

.btn {
  display: flex;
  align-items: center;
  gap: .25em;
}

.btn>div {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F9FAFB;
  border-radius: .4px;
  cursor: pointer;
}

.btn>div>svg {
  width: 1rem;
  height: 1rem;
  fill: #6B7280;
}

.explanation {
  width: 100%;
  height: auto;
  padding: 1rem;
  background: #FAFBFC;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: .8rem;
}

.e_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.e_header>span {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
}

.e_header>div {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #ff9300;
  color: #fff;
  padding: .3rem .8rem;
  font-size: .8rem;
  font-weight: 500;
  border-radius: .5rem;
  cursor: pointer;
}

.e_header>div>svg {
  width: .8rem;
  height: .8rem;
  fill: #fff;
}

.explain_textarea {
  font-size: 1.2rem;
}

.imageList {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.imageList>div{
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
  border-radius: .5rem;
  position: relative;

}

.imageList>div:hover>svg{
  display: flex;
}

.imageList>div>svg{
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: -.3rem;
  right: -.3rem;
  font-weight: 500;
  border-radius: .5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

</style>