pptList/src/store/pptWork.ts

import { defineStore } from "pinia"
import { store } from "./index"
import { getTeacherChapterKnowledgeMaterial, putTeacherChapterKnowledgeMaterial } from "@/api/pptOperate"
import { httpAjaxErrMsg } from "@/plugins/httpAjax"
import { useRoute } from "vue-router"
import LoadingBar from "@/plugins/loadingBar"
import { getHttpJson, jsonToPpt, getJsonToBlob } from "@/libs/jsonTool"
import fileUpload from "@/utils/oss-file-upload"
import { ElMessage } from "element-plus"
import { toBlob } from "html-to-image"
import { useSlidesStore } from "@/store"

type pptWork = { id: string; coverImg: string; jsonUrl: string; isSave: boolean }
const useStore = defineStore("pptWork", {
  state: (): pptWork => {
    return {
      id: "",
      coverImg: "",
      jsonUrl: "",
      isSave: false // 当前是否保存，用来关闭页面时候判断 提不提示
    }
  },
  actions: {
    /** 初始化 */
    async initPPTData() {
      const route = useRoute()
      const id = route.query.id as string | undefined
      if (id) {
        LoadingBar.loading(true, "资源加载中,请稍等...")
        const res = await httpAjaxErrMsg(getTeacherChapterKnowledgeMaterial, id)
        if (res.code === 200) {
          const { id, dataJson, chapterLessonCoursewareName } = res.data || {}
          const { coverImg, jsonUrl } = JSON.parse(dataJson)
          this.id = id
          this.coverImg = coverImg || ""
          const slidesStore = useSlidesStore()
          slidesStore.setTitle(chapterLessonCoursewareName)
          if (jsonUrl) {
            const jsonRes = await getHttpJson(jsonUrl)
            if (jsonRes.code === 200) {
              jsonToPpt(jsonRes.data)
            }
          }
        }
        LoadingBar.loading(false)
      }
    },
    async updatePPT() {
      await this.updateCoverImg()
      const { blob, title } = getJsonToBlob()
      fileUpload(title, blob)
        .then(url => {
          LoadingBar.loading(true, "课件保存中,请稍等...")
          httpAjaxErrMsg(putTeacherChapterKnowledgeMaterial, {
            id: this.id,
            dataJson: JSON.stringify({
              coverImg: this.coverImg,
              jsonUrl: url
            })
          }).then(res => {
            if (res.code === 200) {
              this.isSave = true
              ElMessage({
                showClose: true,
                message: "保存成功!",
                type: "success"
              })
            }
            LoadingBar.loading(false)
          })
        })
        .catch(() => {
          ElMessage({
            showClose: true,
            message: "保存失败!",
            type: "error"
          })
        })
    },
    async updateCoverImg() {
      LoadingBar.loading(true, "资源上传中")
      try {
        const coverImgDom = document.querySelector("#thumbnailSlide_0") as HTMLElement
        if (coverImgDom) {
          const dataBlob = await toBlob(coverImgDom)
          if (dataBlob) {
            const url = await fileUpload("coverImg", dataBlob)
            url && (this.coverImg = url)
          }
        }
        LoadingBar.loading(false)
      } catch (err) {
        LoadingBar.loading(false)
        console.log(err, "上传coverImg错误")
      }
    }
  }
})
export default () => {
  return useStore(store)
}