hi-ucs/front/src/views/personalCenter/VueTemplateDemo.vue

<!--
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-19 17:18:48
 * @LastEditors: hisense.wuhongjian
 * @LastEditTime: 2022-07-16 15:01:48
 * @Description: markdown编辑器
-->
<template>
  <editor
    v-model="text"
    :iconfontJs="iconfontJs"
    pageFullScreen
    @save="saveText"
  ></editor>
</template>

<script>
  import { defineComponent } from 'vue'
  import mybus from '@/myplugins/mybus'
  import { message } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  import { getDevelopmentFile, updateDevelopmentFile } from '@/api/file'
  import Editor from 'md-editor-v3'
  import { pinyin } from 'pinyin-pro'
  // import FileSaver from 'file-saver'
  import 'md-editor-v3/lib/style.css'
  import * as fontJs from '/public/static/js/font.js'
  export default defineComponent({
    name: 'VueTemplateDemo',
    components: { Editor },
    props: {
      dataFrom: {
        type: Object,
      },
    },
    data() {
      return {
        text: '',
        route: useRouter(),
        iconfontJs: fontJs,
        uuidOne: '',
        uuidTwo: '',
        uuidSnum: '',
      }
    },
    created() {
      // this.uuidSplice()
      this.getDevelopmentFile()
    },
    methods: {
      uuid(len, radix) {
        var chars =
          '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
        var uuid = [],
          i
        radix = radix || chars.length

        if (len) {
          // Compact form
          for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
        } else {
          // rfc4122, version 4 form
          var r

          // rfc4122 requires these characters
          uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
          uuid[14] = '4'

          // Fill in random data.  At i==19 set the high bits of clock sequence as
          // per rfc4122, sec. 4.1.5
          for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
              r = 0 | (Math.random() * 16)
              uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r]
            }
          }
        }

        return uuid.join('')
      },

      uuidSplice() {
        this.uuidOne = this.uuid(13, 16)
        this.uuidTwo = this.uuid(13, 16)
        this.uuidSnum = this.uuidOne + this.uuidTwo
        this.uuidSnum = this.uuidSnum.replace(/\s+/g, '')
        console.log('this.uuidOne', this.uuidSnum)
      },
      async saveText(file) {
        // console.log('保存成功', e)
        // const jsonStr = JSON.stringify(e)
        const blob = new Blob([file], {
          type: 'md',
        })
        if (this.uuidSnum === '') {
          this.uuidSplice()
        }
        let myfile = new File([blob], this.uuidSnum)
        var formData = new FormData()
        const type = pinyin(this.dataFrom.type, {
          pattern: 'initial',
        }).replace(/\s*/g, '')
        formData.append('fileName', this.uuidSnum)
        formData.append('type', type)
        formData.append('file', myfile) // 'file' 为HTTP Post里的字段名, file 对浏览器里的File对象
        // formData.append('name', this.route.currentRoute.query.id + '.md')
        // FileSaver.saveAs(blob, '开发指南.md')
        const res = await updateDevelopmentFile(formData)
        let infoList = {
          attrType: '技术文档',
          attrValue: res.data.data,
          delFlag: 0,
        }
        mybus.emit('chageDataFrom', infoList)
        mybus.emit('showTextFunctionEmit', false)
        console.log('res', res)
        if (res.data.code === 0) {
          message.success('保存成功')
        } else {
          message.error('保存失败')
        }
      },
      async getDevelopmentFile() {
        debugger
        const uuidParam = this.dataFrom.infoList.filter((item) => {
          if (item.attrType === '技术文档') {
            return item
          }
        })
        let uuid = ''
        if (uuidParam[0].attrValue) {
          uuid = uuidParam[0].attrValue.split('/')[1].split('.')[0]
        }
        this.uuidSnum = uuid
        const type = pinyin(this.dataFrom.type, {
          pattern: 'initial',
        }).replace(/\s*/g, '')
        console.log(type)
        const param = {
          type: type,
          resourceId: uuid,
        }
        const res = await getDevelopmentFile(param)
        this.text = res.data
        // let infoList = {
        //   attrType: '技术文档',
        //   attrValue: this.text.data,
        //   delFlag: 0,
        // }
        // mybus.emit('chageDataFrom', infoList)
        console.log('res', res)
      },
    },
  })
</script>
<style scoped>
  .md-fullscreen {
    z-index: 10;
  }
</style>