iTDM-web/itdmWeb/src/views/module-iTDM/moban/modules/wordEdit.vue

<template>

  <a-modal
    title="Title"
    width="80%"
    :visible="visible"
    @ok="handleOk"
  @cancel="handleOk"
  >


  <dev v-show="visible" id="monitorOffice" ></dev>

  </a-modal>
</template>

<script>


  import { getAction } from '@api/manage'

  export default {
    name: 'wordEdit',
    created () {
      //备份model原始值
      this.config.document.key=""
      this.config.document.fileType=""
      this.config.document.url=""
      this.config.document.title=""
      this.config.editorConfig.callbackUrl=""
    },
    data () {
      return {
        docEditor: null,
        visible: false,
        queryById: '/moban/itdmMoban/wordById',
        config: {
          document: {
            fileType: "",
            key: "",
            title: "",
            url: "",
          },
          documentType: "word",
          width: "100%",
          height: "600px",
          editorConfig: {
            lang:'zh',
            callbackUrl: ""
          }
        },

      }
    },
    methods: {
      edit (record) {
        if (this.docEditor) {
          this.docEditor.destroyEditor()
        }
        console.log(record)
        const select = { id: record.id }
        getAction(this.queryById, select).then((res) => {
          if (res.success) {


            this.config.document.key=res.result.key
            this.config.document.fileType=res.result.fileType
            this.config.document.url=process.env.VUE_APP_API_BASE_URL+"/"+res.result.url
            this.config.document.title=res.result.title
            this.config.editorConfig.callbackUrl=process.env.VUE_APP_API_BASE_URL+"/"+"word/save"

            console.log(this.config)
            this.docEditor = new DocsAPI.DocEditor("monitorOffice", this.config);


          } else {
            this.$message.warning(res.message)
          }
        })

      },
      handleOk(){
        this.visible=false
        this.config.document.key=""
        this.config.document.fileType=""
        this.config.document.url=""
        this.config.document.title=""
        this.config.editorConfig.callbackUrl=""
        if (this.docEditor) {
          this.docEditor.destroyEditor()
        }
        this.$emit("ok");

      }

    }
  }
</script>