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

<template>
  <div class="workPage" v-loading="loading">
    <questionsAndAnswers ref="questionsAndAnswersRef" v-if="workData.type === '15'" :workData="workData"
      @changeWorkData="changeWorkData" />
    <choiceQuestion ref="choiceQuestionRef" v-if="workData.type === '45'" :workData="workData"
      @changeWorkData="changeWorkData" />
    <voteQuestion ref="voteQuestionRef" v-if="workData.type === '78'" :workData="workData"
      @changeWorkData="changeWorkData" />
    <photo ref="photoRef" v-if="workData.type === '79'" :workData="workData"
      @changeWorkData="changeWorkData" />
    <kwlPage ref="kwlPageRef" v-if="workData.type === '831'" :workData="workData"
      @changeWorkData="changeWorkData" />
    <sixHatPage ref="sixHatPageRef" v-if="workData.type === '832'" :workData="workData"
      @changeWorkData="changeWorkData" />
    <file ref="fileRef" v-if="workData.type === '84'" :workData="workData"
      @changeWorkData="changeWorkData" />
  </div>
</template>

<script>
import katex from "katex";
import "katex/dist/katex.min.css";
import questionsAndAnswers from "./components/questionsAndAnswers.vue";
import choiceQuestion from "./components/choiceQuestion.vue";
import voteQuestion from "./components/voteQuestion.vue";
import photo from "./components/photo.vue";
import kwlPage from "./components/kwlPage.vue";
import sixHatPage from "./components/sixHatPage.vue";
import file from "./components/file.vue";
export default {
  components: {
    questionsAndAnswers,
    choiceQuestion,
    voteQuestion,
    photo,
    kwlPage,
    sixHatPage,
    file,
  },
  data() {
    return {
      id: this.$route.query.id,
      courseid: this.$route.query.courseid,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      stage: this.$route.query.stage,
      task: this.$route.query.task,
      tool: this.$route.query.tool,
      type: "",
      cid: this.$route.query.cid,
      workData: {},
      loadingUploadFile: false,
      studentWork: null,
      loading: false
    };
  },
  watch: {
    workData: {
      deep: true,
      handler(newValue) {
        if (newValue) {
          this.setWorkDataToWindow();
        }
      }
    }
  },
  computed: {
    renderedFormula() {
      return function (val) {
        try {
          // 判断是否含有HTML标签，<tag ...>...</tag>
          const hasTag = /<([a-zA-Z][\w\-]*)([^>]*)>([\s\S]*?)<\/\1>/g.test(
            val
          );
          if (!hasTag) {
            val = val.trim().replace(/[\u200B-\u200D\uFEFF]/g, "");

            // 纯文本，整体渲染
            try {
              return katex.renderToString(val.trim(), {
                throwOnError: false,
                strict: false,
                output: "htmlAndMathml"
              });
            } catch (e) {
              return val; // 渲染失败原样输出
            }
          } else {
            // 有标签，对每个标签内容渲染
            return val.replace(
              /<([a-zA-Z][\w\-]*)([^>]*)>([\s\S]*?)<\/\1>/g,
              (match, tag, attrs, inner) => {
                let html;
                val = val.trim().replace(/[\u200B-\u200D\uFEFF]/g, "");
                try {
                  html = katex.renderToString(inner.trim(), {
                    throwOnError: false,
                    strict: false,
                    output: "htmlAndMathml"
                  });
                } catch (e) {
                  html = inner;
                }
                return `<${tag}${attrs}>${html}</${tag}>`;
              }
            );
          }
        } catch (e) {
          console.error("KaTeX渲染错误:", e);
          return val;
        }
      };
    }
  },
  methods: {
    getWorkData() {
      if (!this.id) return console.log("无作业id");
      let params = {
        id: this.id
      };
      this.ajax
        .get(this.$store.state.api + "select_workPageById", params)
        .then(res => {
          let _data = res.data[0];
          if (_data.length) {
            _data = _data[0];
            _data.json = JSON.parse(_data.json);
            if (_data.type == 15) {
              _data.json.answer = "";
              _data.json.fileList = [];
            } else if (_data.type == 45) {
              _data.json.testJson.forEach(item => {
                if (item.type == "2") {
                  item.userAnswer = [];
                } else if (item.type == "1") {
                  item.userAnswer = "";
                }
              });
            }else if(_data.type == 79){
              _data.json.fileList = [];
            }else if(_data.type == 84){
              _data.json.fileList = [];
            }

            this.workData = _data;
            this.studentWorkToWorkData();
            this.getSubmitWork();
          }
        });
    },
    setWorkDataToWindow() {
      if (this.workData.json) {
        window.workData = JSON.parse(JSON.stringify(this.workData));
      }
    },
    uploadImage() {
      if (this.loadingUploadFile) return;
      let input = document.createElement("input");
      input.type = "file";
      input.accept = "image/jpeg,image/png";
      input.click();
      input.onchange = e => {
        let file = e.target.files[0];
        if (file) {
          if (file.size > 5 * 1024 * 1024) {
            // 5MB
            return this.$message.error(this.lang.ssImgTooBig);
          }
          let _type = file.type;
          let _size = file.size;
          this.loadingUploadFile = true;
          this.uploadFile(file).then(res => {
            let _file = {
              name: file.name,
              url: res.Location,
              type: _type,
              size: _size,
              uploadTime: new Date().getTime()
            };
            if (["15"].includes(this.workData.type)) {
              this.workData.json.fileList.push(_file);
            }
            this.$forceUpdate();
            this.loadingUploadFile = false;
          });
        }
      };
    },
    uploadFile(file) {
      return new Promise(resolve => {
        var credentials = {
          accessKeyId: "AKIATLPEDU37QV5CHLMH",
          secretAccessKey: "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"
        }; //秘钥形式的登录上传
        window.AWS.config.update(credentials);
        window.AWS.config.region = "cn-northwest-1"; //设置区域

        var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
        var _this = this;

        if (file) {
          var params = {
            Key:
              file.name.split(".")[0] +
              new Date().getTime() +
              "." +
              file.name.split(".")[file.name.split(".").length - 1],
            ContentType: file.type,
            Body: file,
            "Access-Control-Allow-Credentials": "*",
            ACL: "public-read"
          }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
          var options = {
            partSize: 2048 * 1024 * 1024,
            queueSize: 2,
            leavePartsOnError: true
          };
          bucket
            .upload(params, options)
            .on("httpUploadProgress", function (evt) {
              //这里可以写进度条
              // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            })
            .send(function (err, data) {
              if (err) {
                _this.$message.error(_this.lang.ssUploadFail);
                resolve(null);
              } else {
                resolve(data);
              }
            });
        }
      });
    },
    //预览图片
    previewImage(url) {
      this.$hevueImgPreview(url);
    },
    deleteFile(index) {
      this.workData.json.fileList.splice(index, 1);
      this.$forceUpdate();
    },
    submitWork(task) {
      return new Promise(resolve => {
        let params = [];
        if (this.workData.type == "15") {
          //问答题
          params.push({
            uid: this.userid,
            cid: this.courseid,
            stage: 0,
            task: task,
            tool: 0,
            atool: "15",
            content: encodeURIComponent(JSON.stringify(this.workData.json)),
            type: "3"
          });
        } else if (this.workData.type == "45") {
          //选择题
          params.push({
            uid: this.userid,
            cid: this.courseid,
            stage: 0,
            task: task,
            tool: 0,
            atool: "45",
            content: encodeURIComponent(JSON.stringify(this.workData.json)),
            type: "8"
          });
        } else if (this.workData.type == "78") {
          //投票题
          params.push({
            uid: this.userid,
            cid: this.courseid,
            stage: 0,
            task: task,
            tool: 0,
            atool: "78",
            content: encodeURIComponent(JSON.stringify(this.workData.json)),
            type: "22"
          });
        } else if (this.workData.type == "79") {
          //照片题
          params.push({
            uid: this.userid,
            cid: this.courseid,
            stage: 0,
            task: task,
            tool: 0,
            atool: "79",
            content: encodeURIComponent(JSON.stringify(this.workData.json)),
            type: "23"
          });
        } else if (this.workData.type == "831") {
          //跨学科kwl题
          params.push({
            uid: this.userid,
            cid: this.courseid,
            stage: 0,
            task: task,
            tool: 0,
            atool: "831",
            content: encodeURIComponent(JSON.stringify(this.workData.json)),
            type: "831"
          });
        } else if (this.workData.type == "832") {
          //跨学科kwl题
          params.push({
            uid: this.userid,
            cid: this.courseid,
            stage: 0,
            task: task,
            tool: 0,
            atool: "832",
            content: encodeURIComponent(JSON.stringify(this.workData.json)),
            type: "832"
          });
        } else if (this.workData.type == "84") {
          //文件题
          params.push({
            uid: this.userid,
            cid: this.courseid,
            stage: 0,
            task: task,
            tool: 0,
            atool: "84",
            content: encodeURIComponent(JSON.stringify(this.workData.json)),
            type: "84"
          });
        }

        if (
          ["3", "8", "22", "23", "831", "832", "84"].includes(params[0].type) &&
          params[0].uid &&
          params[0].cid
        ) {
          this.loading = true;
          this.ajax
            .post(this.$store.state.api + "addCourseWorks_workPage", params)
            .then(res => {
              let _data = res.data[0];
              this.loading = false;
              if (_data.length > 0) {
                let _id = _data[0].id;
                resolve(_id);
              } else {
                resolve("");
              }
            })
            .catch(err => {
              console.log(err);
              resolve("");
              this.loading = false;
            });
        }
      });
    },
    //选择题选择
    chooseAnswer(index, index2) {
      if (this.workData.json.testJson[index].type == "1") {
        this.workData.json.testJson[index].userAnswer = index2;
      } else if (this.workData.json.testJson[index].type == "2") {
        if (this.workData.json.testJson[index].userAnswer.includes(index2)) {
          this.workData.json.testJson[index].userAnswer.splice(
            this.workData.json.testJson[index].userAnswer.indexOf(index2),
            1
          );
        } else {
          this.workData.json.testJson[index].userAnswer.push(index2);
        }
      }
    },
    //获取已经提交的作业
    getSubmitWork() {
      if (
        this.userid &&
        this.courseid &&
        this.stage &&
        this.task &&
        this.tool
      ) {
        let params = {
          uid: this.userid,
          cid: this.courseid,
          stage: this.stage,
          task: this.task,
          tool: this.tool
        };
        this.loading = true;
        this.ajax
          .get(
            this.$store.state.api + "select_courseWorks_workPageData",
            params
          )
          .then(res => {
            let _data = res.data[0];
            this.loading = false;
            if (_data.length) {
              _data = _data[0];
              console.log("select_courseWorks_workPageData",_data);
              if (["15", "45", "78", "79", "831", "832", "84"].includes(_data.atool)) {
                let _work = JSON.parse(decodeURIComponent(_data.content));

                this.studentWork = _work;
                this.studentWorkToWorkData();
              } else {
                console.log("工具不一致")
              }
            }
          })
          .catch(err => {
            this.loading = false;
            console.error(err);
          });
      }
    },
    studentWorkToWorkData() {
      if (this.studentWork && this.workData) {
        console.log("studentWork", this.studentWork);
        console.log("workData", this.workData);

        let _work = JSON.parse(JSON.stringify(this.studentWork));
        if (this.workData.type == "15") {
          this.workData.json = {...this.workData.json,..._work}
          console.log("this.workData.json", this.workData.json);
          this.$refs.questionsAndAnswersRef.setWork(this.workData.json);
          this.$forceUpdate();
        } else if (this.workData.type == "45") {

          this.workData.json.testJson.forEach((item, index) => {
            if (
              item.type == _work.testJson[index].type &&
              item.teststitle == _work.testJson[index].teststitle &&
              JSON.stringify(item.checkList) ==
              JSON.stringify(_work.testJson[index].checkList)
            ) {
              this.workData.json.testJson[index].userAnswer =
                _work.testJson[index].userAnswer;
            }
          });
        } else if (this.workData.type == "78") {
          this.workData.json.testJson.forEach((item, index) => {
            if (
              item.type == _work.testJson[index].type &&
              item.teststitle == _work.testJson[index].teststitle &&
              JSON.stringify(item.checkList) ==
              JSON.stringify(_work.testJson[index].checkList)
            ) {
              this.workData.json.testJson[index].userAnswer =
                _work.testJson[index].userAnswer;
            }
          });
        }else if(this.workData.type == "79"){
          this.workData.json.fileList = _work.fileList;
        }else if(this.workData.type == "831"){
          this.workData.json = _work;
        }else if(this.workData.type == "832"){
          this.workData.json = _work;
        }else if(this.workData.type == "84"){
          //文件题
          this.workData.json.fileList = _work.fileList;
        }
        this.$forceUpdate();
      }
    },

    //更新workData
    changeWorkData(newValue) {

      if(JSON.stringify(newValue) == JSON.stringify(this.workData.json)) return
      console.log("changeWorkData", newValue)
      this.workData.json = JSON.parse(newValue)
    }
  },
  mounted() {
    this.getWorkData();
    window.submitWork = this.submitWork;
  }
};
</script>

<style scoped>
.workPage {
  width: 100%;
  height: 100%;
  min-height: 100%;

  background-color: #fff;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wp_tool {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.wp_t15_title {
  font-size: 40px;
  font-weight: 300;
  margin: 20px 0;
  max-width: 50%;
  min-width: 300px;
  text-align: left;
}

.wp_type {
  margin: 20px 0;
  font-size: 1em;
  color: #7b7b7b;
}

.wp_tl15_inputArea {
  width: 50%;
  min-width: 300px;
  margin: 20px 0;
}

.wp_tl15_inputArea>>>textarea {
  border-color: #ececec;
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: 0 0 10px #ececec;
}

.wp_tl15_inputArea>>>textarea::placeholder {
  color: #7f7f7f;
}

.wp_tl15_uploadFileArea {
  width: 50%;
  min-width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.wp_tl_btn {
  width: auto;
  height: auto;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-radius: 10px;
  border: 1px dashed #e5e5e5;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #474747;
  cursor: pointer;
  margin-right: 10px;
  transition: 0.3s;
}

.wp_tl_btn:hover {
  background-color: #ececec;
}

.wp_tl_btn>svg {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.wp_tl15_uploadFileArea>span {
  font-size: 14px;
  color: #686868;
}

.wp_tl15_fileList {
  width: 50%;
  min-width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.wp_tl15_fileList_item {
  width: 150px;
  height: 100px;
  border-radius: 10px;
  position: relative;
  margin-right: 20px;
}

.wp_tl15_fileList_item:hover>svg {
  display: block;
}

.wp_tl15_fileList_item>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 10px #ececec;
  margin: 10px;
  cursor: pointer;
}

.wp_tl15_fileList_item>svg {
  width: 20px;
  height: 20px;
  position: absolute;
  right: -20px;
  top: 1px;
  cursor: pointer;
  display: none;
}

/* 选择题 */

.wp_tool45 {
  width: 60%;
  height: auto;
}

.wp_t45_title {
  font-size: 3em;
  font-weight: 300;
  margin: 20px 0 40px 0;
}

.s_b_m_toolItem {
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.s_b_m_ti_option {
  width: 100%;
  height: auto;
  padding: 15px 15px 15px 15px;
  display: flex;
  /* flex-wrap: wrap; */
  background-color: #f3f7fd;
  border-radius: 30px;
  margin: 10px 0 10px 0px;
  box-sizing: border-box;
  cursor: pointer;
}

.s_b_m_ti_option>span>img {
  max-height: 150px;
  border-radius: 2px;
  cursor: pointer;
}

.s_b_m_ti_o_btn {
  width: 20px;
  height: 100%;
  min-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.s_b_m_ti_o_btn>span {
  width: 20px;
  height: 20px;
  display: block;
  box-sizing: border-box;
  border: solid 1px #3681fc;
  overflow: hidden;
}

.s_b_m_ti_o_btn>span>span {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3681fc;
  position: relative;
}

.s_b_m_ti_o_btn1 {
  border-radius: 50%;
}

.s_b_m_ti_o_btn1>span::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
}

.s_b_m_ti_o_btn2 {
  border-radius: 2px;
}

.s_b_m_ti_o_btn2>span::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  background-color: #fff;
}

.s_b_m_ti_o_choice {
  border: solid 1px #3681fc;
}

.s_b_m_ti_title {
  display: flex;
  align-items: flex-start;
}

.s_b_m_ti_title>span:nth-of-type(1) {
  font-size: 30px;
  font-weight: bold;
  color: #3681fc;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -3px;
}

.s_b_m_ti_title>svg {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  margin: 0 10px 0 0px;
}

.s_b_m_ti_title>span:nth-of-type(2) {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 30px;
  line-height: 30px;
  color: #1f1f1f;
}

.s_b_m_ti_title>div {
  font-size: 30px;
  font-weight: bold;
}

/* 选择题 */
</style>