@idooel/components 0.0.1-beta.106 → 0.0.1-beta.108

package/dist/@idooel/components.esm.js

@@ -5498,7 +5498,7 @@ var script$t = {
     async saveToServerAsyncPage(payloads = {}) {
       net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, {
         headers: {
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
         }
       }).then(resp => {
         const {
@@ -5748,11 +5748,11 @@ __vue_render__$t._withStripped = true;
   /* style */
   const __vue_inject_styles__$t = function (inject) {
     if (!inject) return
-    inject("data-v-4fa7ccb9_0", { source: "[data-v-4fa7ccb9] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-4fa7ccb9] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-4fa7ccb9] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-4fa7ccb9] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-4fa7ccb9] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-4fa7ccb9] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-4fa7ccb9] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-4fa7ccb9] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-4fa7ccb9] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-4fa7ccb9] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-4fa7ccb9] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-4fa7ccb9] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-4fa7ccb9] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-4fa7ccb9] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-4fa7ccb9] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :extensions=\"extensions\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      //TODO\n      default: `zuul/api-file/workbench/file`\n    },\n    icon: {\n      type: String,\n      default: '上传'\n    },\n    size: {\n      type: Number,\n      default: 100\n    },\n    message: {\n      type: String,\n      default: '单击或拖动文件到该区域以上传'\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: 10\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: 1024 * 1024\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      files: [],\n      buildedFiles: [],\n      saveToServerAsyncPageTimer: null\n    }\n  },\n  watch: {\n    value: {\n      async handler (value) {\n        if (type.isArray(value)) {\n          // multiple\n        } else if (type.isEmpty(value)) {\n          this.files = []\n          this.buildedFiles = []\n        } else {\n          // single\n          this.fetchFileWithFileId()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    prefixPath () {\n      return window.prefixPath\n    },\n    iconIsZhWrod () {\n      return type.isZhWord(this.icon)\n    },\n    getPayloads () {\n      return {\n        override: false\n      }\n    },\n    chunkConfig () {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: {\n          ...this.headers\n        },\n        minSize: 3 * this.byteConversion,\n        maxActive: 3,\n        maxRetries: 5,\n        startBody: {\n          override: true,\n          path: '/cw'\n        },\n        uploadBody: {\n          override: true,\n          path: '/cw'\n        },\n        finishBody: {\n          override: true,\n          path: '/cw'\n        }\n      }\n    },\n    isFileUploadSuccessed () {\n      return this.files.every(file => file.success)\n    },\n    isShowUploadContainer () {\n      if (this.multiple) {\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n          return false\n        } else {\n          return true\n        }\n      } else {\n        const [file = {}] = this.buildedFiles\n        if (this.buildedFiles.length < 1) {\n          return true\n        }\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n          return false\n        } else {\n          return true\n        }\n      }\n    },\n    getMaximum () {\n      return this.multiple ? this.maximum : 1\n    },\n    fileSizeLimit () {\n      return this.size * this.byteConversion\n    },\n    postAction () {\n      const ret = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${ret}`\n    },\n    uploadRef () {\n      return uuidv4()\n    },\n    fileSuffixIcon () {\n      return {\n        'doc': { name: 'icon-doc' },\n        'html': { name: 'icon-html' },\n        'mp4': { name: 'icon-mp' },\n        'pdf': { name: 'icon-pdf' },\n        'ppt': { name: 'icon-ppt' },\n        'psd': { name: 'icon-psd' },\n        'rtf': { name: 'icon-rtf' },\n        'txt': { name: 'icon-txt' },\n        'vis': { name: 'icon-vis' },\n        'xls': { name: 'icon-xls' },\n        'xml': { name: 'icon-xml' },\n        'zip': { name: 'icon-zip' },\n        'jpg': { name: 'icon-img' },\n        'mp3': { name: 'icon-mp1' },\n      }\n    },\n    fileIds () {\n      const fileIds = this.buildedFiles.map(file => {\n        return file.fileID\n      })\n      return this.multiple ? fileIds : fileIds[0]\n    },\n    fileResponseData () {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    async fetchFileWithFileId () {\n      if (!this.value) return\n      await net.get(\n        `/api-file/file/${this.value}`\n      ).then(resp => {\n        const { data } = resp\n        this.buildedFiles = [data]\n        this.files = [data]\n      })\n    },\n    handleClickDownload (file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    handleClickDelete (file) {\n      this.$refs[this.uploadRef].remove(file)\n      const { fileID } = file\n      this.files = this.files.filter(file => file.fileID !== fileID)\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n      this.$emit('change', this.fileIds)\n    },\n    onWatchFiles (files) {\n      this.files = files\n      this.buildedFiles = this.files.map(file => {\n        return {\n          ...file.response.data,\n          ...file\n        }\n      })\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    async saveToServerAsyncPage (payloads = {}) {\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n        headers: {\n          'Content-Type': 'application/json'\n        }\n      }).then(resp =>{\n        const { data } = resp\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      })\n      // const ret = await net.post({\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n      //   method: 'POST',\n      //   data: { ...payloads }\n      // }).then(resp => {\n      //   const { data: { data, code, message } } = resp\n      //   if (code !== '2000') {\n      //     this.$Message.error(message)\n      //     return\n      //   }\n      //   if (data !== 'saveToServerAsyncPage') {\n      //     clearInterval(timer)\n      //     const { fileID, size } = data\n      //     this.$emit('on-success', { ...data, fileId: fileID })\n      //     this.$Message.success('同步成功')\n      //     return { fileId: fileID, size }\n      //   }\n      // })\n      // return ret\n    },\n    onWatchInputFiles (newFile, oldFile) {\n      if (newFile && !oldFile) {\n        // add file\n        console.log('add', newFile)\n      }\n      if (newFile && oldFile) {\n        // update file\n        console.log('update', newFile)\n        const { success, active, chunk, response } = newFile\n        if (chunk && success && !active) {\n          console.log('chunk end')\n          const { data: { file, type } } = response\n          const payloads = {\n            filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n            asyncID: uuidv4(),\n            isDeleteOrigin: false,\n            toImage: type === 'pdf' ? true : false,\n            unzip: type === 'zip' ? true : false,\n            _csrf: localStorage.getItem('token')\n          }\n          this.saveToServerAsyncPageTimer = setInterval(() => {\n            this.saveToServerAsyncPage(payloads)\n          }, 2000)\n        }\n      }\n      if (!newFile && oldFile) {\n        // delete file\n        console.log('delete')\n      }\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {}\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-11828382_0", { source: "[data-v-11828382] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-11828382] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-11828382] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-11828382] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-11828382] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-11828382] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-11828382] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-11828382] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-11828382] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-11828382] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-11828382] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-11828382] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-11828382] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-11828382] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-11828382] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :extensions=\"extensions\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      //TODO\n      default: `zuul/api-file/workbench/file`\n    },\n    icon: {\n      type: String,\n      default: '上传'\n    },\n    size: {\n      type: Number,\n      default: 100\n    },\n    message: {\n      type: String,\n      default: '单击或拖动文件到该区域以上传'\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: 10\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: 1024 * 1024\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      files: [],\n      buildedFiles: [],\n      saveToServerAsyncPageTimer: null\n    }\n  },\n  watch: {\n    value: {\n      async handler (value) {\n        if (type.isArray(value)) {\n          // multiple\n        } else if (type.isEmpty(value)) {\n          this.files = []\n          this.buildedFiles = []\n        } else {\n          // single\n          this.fetchFileWithFileId()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    prefixPath () {\n      return window.prefixPath\n    },\n    iconIsZhWrod () {\n      return type.isZhWord(this.icon)\n    },\n    getPayloads () {\n      return {\n        override: false\n      }\n    },\n    chunkConfig () {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: {\n          ...this.headers\n        },\n        minSize: 3 * this.byteConversion,\n        maxActive: 3,\n        maxRetries: 5,\n        startBody: {\n          override: true,\n          path: '/cw'\n        },\n        uploadBody: {\n          override: true,\n          path: '/cw'\n        },\n        finishBody: {\n          override: true,\n          path: '/cw'\n        }\n      }\n    },\n    isFileUploadSuccessed () {\n      return this.files.every(file => file.success)\n    },\n    isShowUploadContainer () {\n      if (this.multiple) {\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n          return false\n        } else {\n          return true\n        }\n      } else {\n        const [file = {}] = this.buildedFiles\n        if (this.buildedFiles.length < 1) {\n          return true\n        }\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n          return false\n        } else {\n          return true\n        }\n      }\n    },\n    getMaximum () {\n      return this.multiple ? this.maximum : 1\n    },\n    fileSizeLimit () {\n      return this.size * this.byteConversion\n    },\n    postAction () {\n      const ret = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${ret}`\n    },\n    uploadRef () {\n      return uuidv4()\n    },\n    fileSuffixIcon () {\n      return {\n        'doc': { name: 'icon-doc' },\n        'html': { name: 'icon-html' },\n        'mp4': { name: 'icon-mp' },\n        'pdf': { name: 'icon-pdf' },\n        'ppt': { name: 'icon-ppt' },\n        'psd': { name: 'icon-psd' },\n        'rtf': { name: 'icon-rtf' },\n        'txt': { name: 'icon-txt' },\n        'vis': { name: 'icon-vis' },\n        'xls': { name: 'icon-xls' },\n        'xml': { name: 'icon-xml' },\n        'zip': { name: 'icon-zip' },\n        'jpg': { name: 'icon-img' },\n        'mp3': { name: 'icon-mp1' },\n      }\n    },\n    fileIds () {\n      const fileIds = this.buildedFiles.map(file => {\n        return file.fileID\n      })\n      return this.multiple ? fileIds : fileIds[0]\n    },\n    fileResponseData () {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    async fetchFileWithFileId () {\n      if (!this.value) return\n      await net.get(\n        `/api-file/file/${this.value}`\n      ).then(resp => {\n        const { data } = resp\n        this.buildedFiles = [data]\n        this.files = [data]\n      })\n    },\n    handleClickDownload (file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    handleClickDelete (file) {\n      this.$refs[this.uploadRef].remove(file)\n      const { fileID } = file\n      this.files = this.files.filter(file => file.fileID !== fileID)\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n      this.$emit('change', this.fileIds)\n    },\n    onWatchFiles (files) {\n      this.files = files\n      this.buildedFiles = this.files.map(file => {\n        return {\n          ...file.response.data,\n          ...file\n        }\n      })\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    async saveToServerAsyncPage (payloads = {}) {\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n        headers: {\n          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n        }\n      }).then(resp =>{\n        const { data } = resp\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      })\n      // const ret = await net.post({\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n      //   method: 'POST',\n      //   data: { ...payloads }\n      // }).then(resp => {\n      //   const { data: { data, code, message } } = resp\n      //   if (code !== '2000') {\n      //     this.$Message.error(message)\n      //     return\n      //   }\n      //   if (data !== 'saveToServerAsyncPage') {\n      //     clearInterval(timer)\n      //     const { fileID, size } = data\n      //     this.$emit('on-success', { ...data, fileId: fileID })\n      //     this.$Message.success('同步成功')\n      //     return { fileId: fileID, size }\n      //   }\n      // })\n      // return ret\n    },\n    onWatchInputFiles (newFile, oldFile) {\n      if (newFile && !oldFile) {\n        // add file\n        console.log('add', newFile)\n      }\n      if (newFile && oldFile) {\n        // update file\n        console.log('update', newFile)\n        const { success, active, chunk, response } = newFile\n        if (chunk && success && !active) {\n          console.log('chunk end')\n          const { data: { file, type } } = response\n          const payloads = {\n            filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n            asyncID: uuidv4(),\n            isDeleteOrigin: false,\n            toImage: type === 'pdf' ? true : false,\n            unzip: type === 'zip' ? true : false,\n            _csrf: localStorage.getItem('token')\n          }\n          this.saveToServerAsyncPageTimer = setInterval(() => {\n            this.saveToServerAsyncPage(payloads)\n          }, 2000)\n        }\n      }\n      if (!newFile && oldFile) {\n        // delete file\n        console.log('delete')\n      }\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {}\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$t = "data-v-4fa7ccb9";
+  const __vue_scope_id__$t = "data-v-11828382";
   /* module identifier */
   const __vue_module_identifier__$t = undefined;
   /* functional template */
@@ -11055,10 +11055,17 @@ var script$h = {
     handleClickDeleteFile() {
       this.fileId = null;
       this.fileName = null;
+      this.cropper && this.cropper.destroy();
+    },
+    blobToFile(blob, fileName = 'file.png') {
+      return new File([blob], fileName, {
+        type: blob.type,
+        lastModified: Date.now()
+      });
     },
     handleOk() {
-      this.cropper.getCroppedCanvas().toBlob(async blob => {
-        await this.uploadFile(blob);
+      this.cropper && this.cropper.getCroppedCanvas().toBlob(async blob => {
+        await this.uploadFile(this.blobToFile(blob, this.fileName));
         this.$emit('input', false);
         this.$emit('change', this.fileId);
       });
@@ -11068,11 +11075,17 @@ var script$h = {
       formData.append('serviceCode', 'cover-image');
       formData.append('_t', Math.random());
       formData.append('file', file);
-      await net.post('zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'), formData).then(() => {});
+      await net.post('zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'), formData).then(resp => {
+        const {
+          data: {
+            fileID
+          }
+        } = resp;
+        this.fileId = fileID;
+      });
     },
     initCropper() {
       let previewReady = false;
-      console.log('this.$refs[this.leftImage', this.$refs[this.leftImage]);
       this.cropper = new Cropper(this.$refs[this.leftImage], {
         aspectRatio: this.cropperConfig.aspectRatio,
         ready: () => {
@@ -11232,11 +11245,11 @@ __vue_render__$h._withStripped = true;
   /* style */
   const __vue_inject_styles__$h = function (inject) {
     if (!inject) return
-    inject("data-v-307ca7c2_0", { source: "[data-v-307ca7c2] .ant-modal-body {\n  padding: 16px;\n}\n[data-v-307ca7c2] .ant-modal-header {\n  padding: 16px;\n}\n.ele-imgCrop__wrapper[data-v-307ca7c2] {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg[data-v-307ca7c2] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image[data-v-307ca7c2] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-307ca7c2] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-307ca7c2]  .ele-upload__inner {\n  height: 100%;\n  border: unset;\n  background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-307ca7c2]  .ele-upload__inner .ele-upload__area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-307ca7c2]  .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1[data-v-307ca7c2] {\n  color: var(--idoole-black-088);\n  font-size: 16px;\n  line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2[data-v-307ca7c2] {\n  color: var(--idoole-black-06);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update[data-v-307ca7c2] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right[data-v-307ca7c2] {\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span[data-v-307ca7c2] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image[data-v-307ca7c2] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item[data-v-307ca7c2] {\n  width: 480px;\n  height: 300px;\n  border-radius: 2px;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color);\n}\n.ele-imgCrop__tips[data-v-307ca7c2] {\n  float: left;\n  width: 80%;\n}\n.ele-imgCrop__error[data-v-307ca7c2] {\n  color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2[data-v-307ca7c2] {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon[data-v-307ca7c2] {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/modal-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AA2LA;EACA,aAAA;AC1LA;AD4LA;EACA,aAAA;ACzLA;AD2LA;EACA,aAAA;EACA,SAAA;EACA,uBAAA;EACA,mBAAA;ACxLA;AD0LA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACxLA;ADyLA;EACA,WAAA;EACA,YAAA;ACvLA;ADyLA;EACA,WAAA;EACA,YAAA;ACvLA;ADwLA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;ACtLA;ADuLA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,mBAAA;EACA,uBAAA;ACrLA;ADsLA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;ACpLA;ADyLA;EACA,8BAAA;EACA,eAAA;EACA,4BAAA;ACvLA;ADyLA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;ACvLA;AD0LA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,eAAA;ACxLA;AD2LA;EACA,kBAAA;ACzLA;AD0LA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACxLA;AD0LA;EACA,WAAA;EACA,YAAA;ACxLA;AD2LA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,wDAAA;EACA,8CAAA;ACzLA;AD4LA;EACA,WAAA;EACA,UAAA;ACzLA;AD2LA;EACA,qDAAA;ACxLA;AD0LA;EACA,kDAAA;ACvLA;ADyLA;EACA,eAAA;EACA,4BAAA;ACtLA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div>\n    <ele-modal\n    :ref=\"getEleModal\"\n    :title=\"title\"\n    :cancelText=\"cancelText\"\n    :maskClosable=\"maskClosable\"\n    v-on=\"$listeners\"\n    :size=\"size\"\n    :value=\"value\"\n    @ok=\"handleOk\"\n    @cancel=\"handleCancel\"\n    :showDefaultFooter=\"true\"\n    >\n    <div class=\"ele-imgCrop__wrapper\">\n      <div class=\"ele-imgCrop__left ele-imgCrop__item\">\n        <div class=\"ele-imgCrop__noImg\">\n          <ele-upload v-if=\"!fileId\" v-bind=\"uploadFileConfig\" class=\"ele-img-crop__upload\" @on-success=\"onUploadFileSuccess\" icon=\"inbox\" url=\"api/zuul/api-file/workbench/file\"></ele-upload>\n          <template v-else>\n            <img :ref=\"leftImage\" class=\"img-crop-left__image\" :src=\"imageUrl\" alt=\"\">\n          </template>\n        </div>\n        <div class=\"margin-t-8\">\n          <span v-if=\"imgtips\" class=\"ele-imgCrop__font1 ele-imgCrop__tips\" :class=\"isFail? 'ele-imgCrop__error' : ''\">{{ imgtips }}</span>\n          <template v-else>\n            <span class=\"ele-imgCrop__font1\">{{ fileName }}</span>\n            <a-icon v-if=\"fileName\" @click=\"handleClickDeleteFile\" type=\"close\" style=\"cursor: pointer;float: right; line-height: 24px;\"/>\n          </template>\n        </div>\n      </div>\n      <div class=\"ele-imgCrop__right ele-imgCrop__item\">\n        <span v-if=\"!fileId\" class=\"ele-imgCrop__font2\">左侧上传图片后可预览</span>\n        <template v-else>\n          <img class=\"img-crop-right__image\" :src=\"previewBase\" alt=\"\">\n        </template>\n      </div>\n    </div>\n    </ele-modal>\n  </div>\n</template>\n\n<script>\nimport { v4 as uuidv4 } from 'uuid'\nimport Cropper from 'cropperjs'\nimport { util, net } from '@idooel/shared'\nexport default {\n  name: 'ele-modal-img-crop',\n  model: {\n    event: 'input',\n    prop: 'value'\n  },\n  props: {\n    title: {\n      type: String,\n      default: '图像裁剪'\n    },\n    uploadFileConfig: {\n      type: Object,\n      default: () => {\n        return {\n          size: 10,\n          accept: '*',\n          byteConversion: 1024 * 1024\n        }\n      }\n    },\n    imageId: {\n      type: String\n    },\n    maskClosable: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    },\n    size: {\n      type: String,\n      default () {\n        return 'big'\n      }\n    },\n    value: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    },\n    cropperConfig: {\n      type: Object,\n      default: () => {\n        return {\n          aspectRatio: 16 / 9\n        }\n      }\n    }\n  },\n  data () {\n    return {\n      haveImg: false,\n      imgtips: null,\n      isFail: false,\n      cancelText: '取消',\n      fileName: null,\n      fileId: null,\n      previewBase: null,\n      cropper: null\n    }\n  },\n  computed: {\n    leftImage () {\n      return uuidv4()\n    },\n    imageUrl () {\n      return `/api-file/workbench/file/stream/${this.fileId}?origin=true`\n    },\n    getEleModal () {\n      return uuidv4()\n    }\n  },\n  watch: {\n    value: {\n      handler (value) {\n        this.fileId = this.imageId\n        if (value && this.fileId) {\n          setTimeout(() => {\n            this.initCropper()\n          })\n        }\n      },\n      immediate: true\n    }\n  },\n  methods: {\n    handleCancel () {\n      this.$emit('input', false)\n      this.$emit('change', this.fileId)\n    },\n    handleClickDeleteFile () {\n      this.fileId = null\n      this.fileName = null\n    },\n    handleOk () {\n      this.cropper.getCroppedCanvas().toBlob(async (blob) => {\n        await this.uploadFile(blob)\n        this.$emit('input', false)\n        this.$emit('change', this.fileId)\n      })\n    },\n    async uploadFile (file) {\n      const formData = new FormData()\n      formData.append('serviceCode', 'cover-image')\n      formData.append('_t', Math.random())\n      formData.append('file', file)\n      await net.post(\n        'zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'),\n        formData\n      ).then(() => {})\n    },\n    initCropper () {\n      let previewReady = false\n      console.log('this.$refs[this.leftImage', this.$refs[this.leftImage])\n      this.cropper = new Cropper(this.$refs[this.leftImage], {\n        aspectRatio: this.cropperConfig.aspectRatio,\n        ready: () => {\n          previewReady = true\n        },\n        crop: util.debounce(() => {\n          if (!previewReady) {\n            return\n          }\n          this.previewBase = this.cropper.getCroppedCanvas().toDataURL()\n        }, 200)\n      })\n    },\n    onUploadFileSuccess (props) {\n      const { response: { data: { fileID } }, name } = props\n      this.fileId = fileID\n      this.fileName = name\n      this.$nextTick(() => {\n        this.initCropper()\n      })\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ant-modal-body {\n  padding: 16px;\n}\n::v-deep .ant-modal-header {\n  padding: 16px;\n}\n.ele-imgCrop__wrapper {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n  .ele-imgCrop__left {\n    .ele-imgCrop__noImg {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      width: 100%;\n      height: 100%;\n      position: relative;\n      .img-crop-left__image {\n        width: 100%;\n        height: 100%;\n      }\n      .ele-img-crop__upload {\n        width: 100%;\n        height: 100%;\n        ::v-deep .ele-upload__inner {\n          height: 100%;\n          border: unset;\n          background: transparent !important;\n          .ele-upload__area {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n            .ele-upload__area--text {\n              margin-top: 16px;\n              display: flex;\n              flex-direction: column;\n              align-items: center;\n            }\n          }\n        }\n      }\n      .ele-imgCrop__font1 {\n        color: var(--idoole-black-088);\n        font-size: 16px;\n        line-height: 24px !important;\n      }\n      .ele-imgCrop__font2 {\n        color: var(--idoole-black-06);\n        font-size: 14px;\n        line-height: 22px; \n      }\n    }\n    .ele-imgCrop__update {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      cursor: pointer;\n    }\n  }\n  .ele-imgCrop__right {\n    position: relative;\n    span {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n    .img-crop-right__image {\n      width: 100%;\n      height: 100%;\n    }\n  }\n  .ele-imgCrop__item {\n    width: 480px;\n    height: 300px;\n    border-radius: 2px;\n    border: 1px dashed var(--idooel-form-title-border-color);\n    background: var(--idooel-form-upload-bg-color);\n  }\n}\n.ele-imgCrop__tips {\n  float: left;\n  width: 80%;\n}\n.ele-imgCrop__error {\n  color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2 {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n</style>","::v-deep .ant-modal-body {\n  padding: 16px;\n}\n\n::v-deep .ant-modal-header {\n  padding: 16px;\n}\n\n.ele-imgCrop__wrapper {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner {\n  height: 100%;\n  border: unset;\n  background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1 {\n  color: var(--idoole-black-088);\n  font-size: 16px;\n  line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2 {\n  color: var(--idoole-black-06);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right {\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item {\n  width: 480px;\n  height: 300px;\n  border-radius: 2px;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color);\n}\n\n.ele-imgCrop__tips {\n  float: left;\n  width: 80%;\n}\n\n.ele-imgCrop__error {\n  color: var(--idooel-form-border-err-color) !important;\n}\n\n.ele-imgCrop__error2 {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n\n.ele-imgCrop__icon {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-54a0392d_0", { source: "[data-v-54a0392d] .ant-modal-body {\n  padding: 16px;\n}\n[data-v-54a0392d] .ant-modal-header {\n  padding: 16px;\n}\n.ele-imgCrop__wrapper[data-v-54a0392d] {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg[data-v-54a0392d] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image[data-v-54a0392d] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d]  .ele-upload__inner {\n  height: 100%;\n  border: unset;\n  background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d]  .ele-upload__inner .ele-upload__area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d]  .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1[data-v-54a0392d] {\n  color: var(--idoole-black-088);\n  font-size: 16px;\n  line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2[data-v-54a0392d] {\n  color: var(--idoole-black-06);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update[data-v-54a0392d] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right[data-v-54a0392d] {\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span[data-v-54a0392d] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image[data-v-54a0392d] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item[data-v-54a0392d] {\n  width: 480px;\n  height: 300px;\n  border-radius: 2px;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color);\n}\n.ele-imgCrop__tips[data-v-54a0392d] {\n  float: left;\n  width: 80%;\n}\n.ele-imgCrop__error[data-v-54a0392d] {\n  color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2[data-v-54a0392d] {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon[data-v-54a0392d] {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/modal-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AAoMA;EACA,aAAA;ACnMA;ADqMA;EACA,aAAA;AClMA;ADoMA;EACA,aAAA;EACA,SAAA;EACA,uBAAA;EACA,mBAAA;ACjMA;ADmMA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACjMA;ADkMA;EACA,WAAA;EACA,YAAA;AChMA;ADkMA;EACA,WAAA;EACA,YAAA;AChMA;ADiMA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;AC/LA;ADgMA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,mBAAA;EACA,uBAAA;AC9LA;AD+LA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;AC7LA;ADkMA;EACA,8BAAA;EACA,eAAA;EACA,4BAAA;AChMA;ADkMA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;AChMA;ADmMA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,eAAA;ACjMA;ADoMA;EACA,kBAAA;AClMA;ADmMA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACjMA;ADmMA;EACA,WAAA;EACA,YAAA;ACjMA;ADoMA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,wDAAA;EACA,8CAAA;AClMA;ADqMA;EACA,WAAA;EACA,UAAA;AClMA;ADoMA;EACA,qDAAA;ACjMA;ADmMA;EACA,kDAAA;AChMA;ADkMA;EACA,eAAA;EACA,4BAAA;AC/LA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div>\n    <ele-modal\n    :ref=\"getEleModal\"\n    :title=\"title\"\n    :cancelText=\"cancelText\"\n    :maskClosable=\"maskClosable\"\n    v-on=\"$listeners\"\n    :size=\"size\"\n    :value=\"value\"\n    @ok=\"handleOk\"\n    @cancel=\"handleCancel\"\n    :showDefaultFooter=\"true\"\n    >\n    <div class=\"ele-imgCrop__wrapper\">\n      <div class=\"ele-imgCrop__left ele-imgCrop__item\">\n        <div class=\"ele-imgCrop__noImg\">\n          <ele-upload v-if=\"!fileId\" v-bind=\"uploadFileConfig\" class=\"ele-img-crop__upload\" @on-success=\"onUploadFileSuccess\" icon=\"inbox\" url=\"api/zuul/api-file/workbench/file\"></ele-upload>\n          <template v-else>\n            <img :ref=\"leftImage\" class=\"img-crop-left__image\" :src=\"imageUrl\" alt=\"\">\n          </template>\n        </div>\n        <div class=\"margin-t-8\">\n          <span v-if=\"imgtips\" class=\"ele-imgCrop__font1 ele-imgCrop__tips\" :class=\"isFail? 'ele-imgCrop__error' : ''\">{{ imgtips }}</span>\n          <template v-else>\n            <span class=\"ele-imgCrop__font1\">{{ fileName }}</span>\n            <a-icon v-if=\"fileName\" @click=\"handleClickDeleteFile\" type=\"close\" style=\"cursor: pointer;float: right; line-height: 24px;\"/>\n          </template>\n        </div>\n      </div>\n      <div class=\"ele-imgCrop__right ele-imgCrop__item\">\n        <span v-if=\"!fileId\" class=\"ele-imgCrop__font2\">左侧上传图片后可预览</span>\n        <template v-else>\n          <img class=\"img-crop-right__image\" :src=\"previewBase\" alt=\"\">\n        </template>\n      </div>\n    </div>\n    </ele-modal>\n  </div>\n</template>\n\n<script>\nimport { v4 as uuidv4 } from 'uuid'\nimport Cropper from 'cropperjs'\nimport { util, net } from '@idooel/shared'\nexport default {\n  name: 'ele-modal-img-crop',\n  model: {\n    event: 'input',\n    prop: 'value'\n  },\n  props: {\n    title: {\n      type: String,\n      default: '图像裁剪'\n    },\n    uploadFileConfig: {\n      type: Object,\n      default: () => {\n        return {\n          size: 10,\n          accept: '*',\n          byteConversion: 1024 * 1024\n        }\n      }\n    },\n    imageId: {\n      type: String\n    },\n    maskClosable: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    },\n    size: {\n      type: String,\n      default () {\n        return 'big'\n      }\n    },\n    value: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    },\n    cropperConfig: {\n      type: Object,\n      default: () => {\n        return {\n          aspectRatio: 16 / 9\n        }\n      }\n    }\n  },\n  data () {\n    return {\n      haveImg: false,\n      imgtips: null,\n      isFail: false,\n      cancelText: '取消',\n      fileName: null,\n      fileId: null,\n      previewBase: null,\n      cropper: null\n    }\n  },\n  computed: {\n    leftImage () {\n      return uuidv4()\n    },\n    imageUrl () {\n      return `/api-file/workbench/file/stream/${this.fileId}?origin=true`\n    },\n    getEleModal () {\n      return uuidv4()\n    }\n  },\n  watch: {\n    value: {\n      handler (value) {\n        this.fileId = this.imageId\n        if (value && this.fileId) {\n          setTimeout(() => {\n            this.initCropper()\n          })\n        }\n      },\n      immediate: true\n    }\n  },\n  methods: {\n    handleCancel () {\n      this.$emit('input', false)\n      this.$emit('change', this.fileId)\n    },\n    handleClickDeleteFile () {\n      this.fileId = null\n      this.fileName = null\n      this.cropper && this.cropper.destroy()\n    },\n    blobToFile(blob, fileName = 'file.png') {\n      return new File([blob], fileName, {\n        type: blob.type,\n        lastModified: Date.now()\n      })\n    },\n    handleOk () {\n      this.cropper && this.cropper.getCroppedCanvas().toBlob(async (blob) => {\n        await this.uploadFile(this.blobToFile(blob, this.fileName))\n        this.$emit('input', false)\n        this.$emit('change', this.fileId)\n      })\n    },\n    async uploadFile (file) {\n      const formData = new FormData()\n      formData.append('serviceCode', 'cover-image')\n      formData.append('_t', Math.random())\n      formData.append('file', file)\n      await net.post(\n        'zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'),\n        formData\n      ).then((resp) => {\n        const { data: { fileID } } = resp\n        this.fileId = fileID\n      })\n    },\n    initCropper () {\n      let previewReady = false\n      this.cropper = new Cropper(this.$refs[this.leftImage], {\n        aspectRatio: this.cropperConfig.aspectRatio,\n        ready: () => {\n          previewReady = true\n        },\n        crop: util.debounce(() => {\n          if (!previewReady) {\n            return\n          }\n          this.previewBase = this.cropper.getCroppedCanvas().toDataURL()\n        }, 200)\n      })\n    },\n    onUploadFileSuccess (props) {\n      const { response: { data: { fileID } }, name } = props\n      this.fileId = fileID\n      this.fileName = name\n      this.$nextTick(() => {\n        this.initCropper()\n      })\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ant-modal-body {\n  padding: 16px;\n}\n::v-deep .ant-modal-header {\n  padding: 16px;\n}\n.ele-imgCrop__wrapper {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n  .ele-imgCrop__left {\n    .ele-imgCrop__noImg {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      width: 100%;\n      height: 100%;\n      position: relative;\n      .img-crop-left__image {\n        width: 100%;\n        height: 100%;\n      }\n      .ele-img-crop__upload {\n        width: 100%;\n        height: 100%;\n        ::v-deep .ele-upload__inner {\n          height: 100%;\n          border: unset;\n          background: transparent !important;\n          .ele-upload__area {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n            .ele-upload__area--text {\n              margin-top: 16px;\n              display: flex;\n              flex-direction: column;\n              align-items: center;\n            }\n          }\n        }\n      }\n      .ele-imgCrop__font1 {\n        color: var(--idoole-black-088);\n        font-size: 16px;\n        line-height: 24px !important;\n      }\n      .ele-imgCrop__font2 {\n        color: var(--idoole-black-06);\n        font-size: 14px;\n        line-height: 22px; \n      }\n    }\n    .ele-imgCrop__update {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      cursor: pointer;\n    }\n  }\n  .ele-imgCrop__right {\n    position: relative;\n    span {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n    .img-crop-right__image {\n      width: 100%;\n      height: 100%;\n    }\n  }\n  .ele-imgCrop__item {\n    width: 480px;\n    height: 300px;\n    border-radius: 2px;\n    border: 1px dashed var(--idooel-form-title-border-color);\n    background: var(--idooel-form-upload-bg-color);\n  }\n}\n.ele-imgCrop__tips {\n  float: left;\n  width: 80%;\n}\n.ele-imgCrop__error {\n  color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2 {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n</style>","::v-deep .ant-modal-body {\n  padding: 16px;\n}\n\n::v-deep .ant-modal-header {\n  padding: 16px;\n}\n\n.ele-imgCrop__wrapper {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner {\n  height: 100%;\n  border: unset;\n  background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1 {\n  color: var(--idoole-black-088);\n  font-size: 16px;\n  line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2 {\n  color: var(--idoole-black-06);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right {\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item {\n  width: 480px;\n  height: 300px;\n  border-radius: 2px;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color);\n}\n\n.ele-imgCrop__tips {\n  float: left;\n  width: 80%;\n}\n\n.ele-imgCrop__error {\n  color: var(--idooel-form-border-err-color) !important;\n}\n\n.ele-imgCrop__error2 {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n\n.ele-imgCrop__icon {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$h = "data-v-307ca7c2";
+  const __vue_scope_id__$h = "data-v-54a0392d";
   /* module identifier */
   const __vue_module_identifier__$h = undefined;
   /* functional template */

package/dist/@idooel/components.umd.js

@@ -5505,7 +5505,7 @@
       async saveToServerAsyncPage(payloads = {}) {
         shared.net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, {
           headers: {
-            'Content-Type': 'application/json'
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
           }
         }).then(resp => {
           const {
@@ -5755,11 +5755,11 @@
     /* style */
     const __vue_inject_styles__$t = function (inject) {
       if (!inject) return
-      inject("data-v-4fa7ccb9_0", { source: "[data-v-4fa7ccb9] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-4fa7ccb9] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-4fa7ccb9] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-4fa7ccb9] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-4fa7ccb9] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-4fa7ccb9] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-4fa7ccb9] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-4fa7ccb9] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-4fa7ccb9] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-4fa7ccb9] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-4fa7ccb9] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-4fa7ccb9] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-4fa7ccb9] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-4fa7ccb9] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-4fa7ccb9] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :extensions=\"extensions\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      //TODO\n      default: `zuul/api-file/workbench/file`\n    },\n    icon: {\n      type: String,\n      default: '上传'\n    },\n    size: {\n      type: Number,\n      default: 100\n    },\n    message: {\n      type: String,\n      default: '单击或拖动文件到该区域以上传'\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: 10\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: 1024 * 1024\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      files: [],\n      buildedFiles: [],\n      saveToServerAsyncPageTimer: null\n    }\n  },\n  watch: {\n    value: {\n      async handler (value) {\n        if (type.isArray(value)) {\n          // multiple\n        } else if (type.isEmpty(value)) {\n          this.files = []\n          this.buildedFiles = []\n        } else {\n          // single\n          this.fetchFileWithFileId()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    prefixPath () {\n      return window.prefixPath\n    },\n    iconIsZhWrod () {\n      return type.isZhWord(this.icon)\n    },\n    getPayloads () {\n      return {\n        override: false\n      }\n    },\n    chunkConfig () {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: {\n          ...this.headers\n        },\n        minSize: 3 * this.byteConversion,\n        maxActive: 3,\n        maxRetries: 5,\n        startBody: {\n          override: true,\n          path: '/cw'\n        },\n        uploadBody: {\n          override: true,\n          path: '/cw'\n        },\n        finishBody: {\n          override: true,\n          path: '/cw'\n        }\n      }\n    },\n    isFileUploadSuccessed () {\n      return this.files.every(file => file.success)\n    },\n    isShowUploadContainer () {\n      if (this.multiple) {\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n          return false\n        } else {\n          return true\n        }\n      } else {\n        const [file = {}] = this.buildedFiles\n        if (this.buildedFiles.length < 1) {\n          return true\n        }\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n          return false\n        } else {\n          return true\n        }\n      }\n    },\n    getMaximum () {\n      return this.multiple ? this.maximum : 1\n    },\n    fileSizeLimit () {\n      return this.size * this.byteConversion\n    },\n    postAction () {\n      const ret = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${ret}`\n    },\n    uploadRef () {\n      return uuidv4()\n    },\n    fileSuffixIcon () {\n      return {\n        'doc': { name: 'icon-doc' },\n        'html': { name: 'icon-html' },\n        'mp4': { name: 'icon-mp' },\n        'pdf': { name: 'icon-pdf' },\n        'ppt': { name: 'icon-ppt' },\n        'psd': { name: 'icon-psd' },\n        'rtf': { name: 'icon-rtf' },\n        'txt': { name: 'icon-txt' },\n        'vis': { name: 'icon-vis' },\n        'xls': { name: 'icon-xls' },\n        'xml': { name: 'icon-xml' },\n        'zip': { name: 'icon-zip' },\n        'jpg': { name: 'icon-img' },\n        'mp3': { name: 'icon-mp1' },\n      }\n    },\n    fileIds () {\n      const fileIds = this.buildedFiles.map(file => {\n        return file.fileID\n      })\n      return this.multiple ? fileIds : fileIds[0]\n    },\n    fileResponseData () {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    async fetchFileWithFileId () {\n      if (!this.value) return\n      await net.get(\n        `/api-file/file/${this.value}`\n      ).then(resp => {\n        const { data } = resp\n        this.buildedFiles = [data]\n        this.files = [data]\n      })\n    },\n    handleClickDownload (file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    handleClickDelete (file) {\n      this.$refs[this.uploadRef].remove(file)\n      const { fileID } = file\n      this.files = this.files.filter(file => file.fileID !== fileID)\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n      this.$emit('change', this.fileIds)\n    },\n    onWatchFiles (files) {\n      this.files = files\n      this.buildedFiles = this.files.map(file => {\n        return {\n          ...file.response.data,\n          ...file\n        }\n      })\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    async saveToServerAsyncPage (payloads = {}) {\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n        headers: {\n          'Content-Type': 'application/json'\n        }\n      }).then(resp =>{\n        const { data } = resp\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      })\n      // const ret = await net.post({\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n      //   method: 'POST',\n      //   data: { ...payloads }\n      // }).then(resp => {\n      //   const { data: { data, code, message } } = resp\n      //   if (code !== '2000') {\n      //     this.$Message.error(message)\n      //     return\n      //   }\n      //   if (data !== 'saveToServerAsyncPage') {\n      //     clearInterval(timer)\n      //     const { fileID, size } = data\n      //     this.$emit('on-success', { ...data, fileId: fileID })\n      //     this.$Message.success('同步成功')\n      //     return { fileId: fileID, size }\n      //   }\n      // })\n      // return ret\n    },\n    onWatchInputFiles (newFile, oldFile) {\n      if (newFile && !oldFile) {\n        // add file\n        console.log('add', newFile)\n      }\n      if (newFile && oldFile) {\n        // update file\n        console.log('update', newFile)\n        const { success, active, chunk, response } = newFile\n        if (chunk && success && !active) {\n          console.log('chunk end')\n          const { data: { file, type } } = response\n          const payloads = {\n            filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n            asyncID: uuidv4(),\n            isDeleteOrigin: false,\n            toImage: type === 'pdf' ? true : false,\n            unzip: type === 'zip' ? true : false,\n            _csrf: localStorage.getItem('token')\n          }\n          this.saveToServerAsyncPageTimer = setInterval(() => {\n            this.saveToServerAsyncPage(payloads)\n          }, 2000)\n        }\n      }\n      if (!newFile && oldFile) {\n        // delete file\n        console.log('delete')\n      }\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {}\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-11828382_0", { source: "[data-v-11828382] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-11828382] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-11828382] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-11828382] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-11828382] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-11828382] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-11828382] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-11828382] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-11828382] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-11828382] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-11828382] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-11828382] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-11828382] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-11828382] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-11828382] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :extensions=\"extensions\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      //TODO\n      default: `zuul/api-file/workbench/file`\n    },\n    icon: {\n      type: String,\n      default: '上传'\n    },\n    size: {\n      type: Number,\n      default: 100\n    },\n    message: {\n      type: String,\n      default: '单击或拖动文件到该区域以上传'\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: 10\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: 1024 * 1024\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      files: [],\n      buildedFiles: [],\n      saveToServerAsyncPageTimer: null\n    }\n  },\n  watch: {\n    value: {\n      async handler (value) {\n        if (type.isArray(value)) {\n          // multiple\n        } else if (type.isEmpty(value)) {\n          this.files = []\n          this.buildedFiles = []\n        } else {\n          // single\n          this.fetchFileWithFileId()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    prefixPath () {\n      return window.prefixPath\n    },\n    iconIsZhWrod () {\n      return type.isZhWord(this.icon)\n    },\n    getPayloads () {\n      return {\n        override: false\n      }\n    },\n    chunkConfig () {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: {\n          ...this.headers\n        },\n        minSize: 3 * this.byteConversion,\n        maxActive: 3,\n        maxRetries: 5,\n        startBody: {\n          override: true,\n          path: '/cw'\n        },\n        uploadBody: {\n          override: true,\n          path: '/cw'\n        },\n        finishBody: {\n          override: true,\n          path: '/cw'\n        }\n      }\n    },\n    isFileUploadSuccessed () {\n      return this.files.every(file => file.success)\n    },\n    isShowUploadContainer () {\n      if (this.multiple) {\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n          return false\n        } else {\n          return true\n        }\n      } else {\n        const [file = {}] = this.buildedFiles\n        if (this.buildedFiles.length < 1) {\n          return true\n        }\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n          return false\n        } else {\n          return true\n        }\n      }\n    },\n    getMaximum () {\n      return this.multiple ? this.maximum : 1\n    },\n    fileSizeLimit () {\n      return this.size * this.byteConversion\n    },\n    postAction () {\n      const ret = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${ret}`\n    },\n    uploadRef () {\n      return uuidv4()\n    },\n    fileSuffixIcon () {\n      return {\n        'doc': { name: 'icon-doc' },\n        'html': { name: 'icon-html' },\n        'mp4': { name: 'icon-mp' },\n        'pdf': { name: 'icon-pdf' },\n        'ppt': { name: 'icon-ppt' },\n        'psd': { name: 'icon-psd' },\n        'rtf': { name: 'icon-rtf' },\n        'txt': { name: 'icon-txt' },\n        'vis': { name: 'icon-vis' },\n        'xls': { name: 'icon-xls' },\n        'xml': { name: 'icon-xml' },\n        'zip': { name: 'icon-zip' },\n        'jpg': { name: 'icon-img' },\n        'mp3': { name: 'icon-mp1' },\n      }\n    },\n    fileIds () {\n      const fileIds = this.buildedFiles.map(file => {\n        return file.fileID\n      })\n      return this.multiple ? fileIds : fileIds[0]\n    },\n    fileResponseData () {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    async fetchFileWithFileId () {\n      if (!this.value) return\n      await net.get(\n        `/api-file/file/${this.value}`\n      ).then(resp => {\n        const { data } = resp\n        this.buildedFiles = [data]\n        this.files = [data]\n      })\n    },\n    handleClickDownload (file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    handleClickDelete (file) {\n      this.$refs[this.uploadRef].remove(file)\n      const { fileID } = file\n      this.files = this.files.filter(file => file.fileID !== fileID)\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n      this.$emit('change', this.fileIds)\n    },\n    onWatchFiles (files) {\n      this.files = files\n      this.buildedFiles = this.files.map(file => {\n        return {\n          ...file.response.data,\n          ...file\n        }\n      })\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    async saveToServerAsyncPage (payloads = {}) {\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n        headers: {\n          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n        }\n      }).then(resp =>{\n        const { data } = resp\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      })\n      // const ret = await net.post({\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n      //   method: 'POST',\n      //   data: { ...payloads }\n      // }).then(resp => {\n      //   const { data: { data, code, message } } = resp\n      //   if (code !== '2000') {\n      //     this.$Message.error(message)\n      //     return\n      //   }\n      //   if (data !== 'saveToServerAsyncPage') {\n      //     clearInterval(timer)\n      //     const { fileID, size } = data\n      //     this.$emit('on-success', { ...data, fileId: fileID })\n      //     this.$Message.success('同步成功')\n      //     return { fileId: fileID, size }\n      //   }\n      // })\n      // return ret\n    },\n    onWatchInputFiles (newFile, oldFile) {\n      if (newFile && !oldFile) {\n        // add file\n        console.log('add', newFile)\n      }\n      if (newFile && oldFile) {\n        // update file\n        console.log('update', newFile)\n        const { success, active, chunk, response } = newFile\n        if (chunk && success && !active) {\n          console.log('chunk end')\n          const { data: { file, type } } = response\n          const payloads = {\n            filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n            asyncID: uuidv4(),\n            isDeleteOrigin: false,\n            toImage: type === 'pdf' ? true : false,\n            unzip: type === 'zip' ? true : false,\n            _csrf: localStorage.getItem('token')\n          }\n          this.saveToServerAsyncPageTimer = setInterval(() => {\n            this.saveToServerAsyncPage(payloads)\n          }, 2000)\n        }\n      }\n      if (!newFile && oldFile) {\n        // delete file\n        console.log('delete')\n      }\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {}\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$t = "data-v-4fa7ccb9";
+    const __vue_scope_id__$t = "data-v-11828382";
     /* module identifier */
     const __vue_module_identifier__$t = undefined;
     /* functional template */
@@ -11062,10 +11062,17 @@
       handleClickDeleteFile() {
         this.fileId = null;
         this.fileName = null;
+        this.cropper && this.cropper.destroy();
+      },
+      blobToFile(blob, fileName = 'file.png') {
+        return new File([blob], fileName, {
+          type: blob.type,
+          lastModified: Date.now()
+        });
       },
       handleOk() {
-        this.cropper.getCroppedCanvas().toBlob(async blob => {
-          await this.uploadFile(blob);
+        this.cropper && this.cropper.getCroppedCanvas().toBlob(async blob => {
+          await this.uploadFile(this.blobToFile(blob, this.fileName));
           this.$emit('input', false);
           this.$emit('change', this.fileId);
         });
@@ -11075,11 +11082,17 @@
         formData.append('serviceCode', 'cover-image');
         formData.append('_t', Math.random());
         formData.append('file', file);
-        await shared.net.post('zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'), formData).then(() => {});
+        await shared.net.post('zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'), formData).then(resp => {
+          const {
+            data: {
+              fileID
+            }
+          } = resp;
+          this.fileId = fileID;
+        });
       },
       initCropper() {
         let previewReady = false;
-        console.log('this.$refs[this.leftImage', this.$refs[this.leftImage]);
         this.cropper = new Cropper(this.$refs[this.leftImage], {
           aspectRatio: this.cropperConfig.aspectRatio,
           ready: () => {
@@ -11239,11 +11252,11 @@
     /* style */
     const __vue_inject_styles__$h = function (inject) {
       if (!inject) return
-      inject("data-v-307ca7c2_0", { source: "[data-v-307ca7c2] .ant-modal-body {\n  padding: 16px;\n}\n[data-v-307ca7c2] .ant-modal-header {\n  padding: 16px;\n}\n.ele-imgCrop__wrapper[data-v-307ca7c2] {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg[data-v-307ca7c2] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image[data-v-307ca7c2] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-307ca7c2] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-307ca7c2]  .ele-upload__inner {\n  height: 100%;\n  border: unset;\n  background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-307ca7c2]  .ele-upload__inner .ele-upload__area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-307ca7c2]  .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1[data-v-307ca7c2] {\n  color: var(--idoole-black-088);\n  font-size: 16px;\n  line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2[data-v-307ca7c2] {\n  color: var(--idoole-black-06);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update[data-v-307ca7c2] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right[data-v-307ca7c2] {\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span[data-v-307ca7c2] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image[data-v-307ca7c2] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item[data-v-307ca7c2] {\n  width: 480px;\n  height: 300px;\n  border-radius: 2px;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color);\n}\n.ele-imgCrop__tips[data-v-307ca7c2] {\n  float: left;\n  width: 80%;\n}\n.ele-imgCrop__error[data-v-307ca7c2] {\n  color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2[data-v-307ca7c2] {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon[data-v-307ca7c2] {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/modal-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AA2LA;EACA,aAAA;AC1LA;AD4LA;EACA,aAAA;ACzLA;AD2LA;EACA,aAAA;EACA,SAAA;EACA,uBAAA;EACA,mBAAA;ACxLA;AD0LA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACxLA;ADyLA;EACA,WAAA;EACA,YAAA;ACvLA;ADyLA;EACA,WAAA;EACA,YAAA;ACvLA;ADwLA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;ACtLA;ADuLA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,mBAAA;EACA,uBAAA;ACrLA;ADsLA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;ACpLA;ADyLA;EACA,8BAAA;EACA,eAAA;EACA,4BAAA;ACvLA;ADyLA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;ACvLA;AD0LA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,eAAA;ACxLA;AD2LA;EACA,kBAAA;ACzLA;AD0LA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACxLA;AD0LA;EACA,WAAA;EACA,YAAA;ACxLA;AD2LA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,wDAAA;EACA,8CAAA;ACzLA;AD4LA;EACA,WAAA;EACA,UAAA;ACzLA;AD2LA;EACA,qDAAA;ACxLA;AD0LA;EACA,kDAAA;ACvLA;ADyLA;EACA,eAAA;EACA,4BAAA;ACtLA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div>\n    <ele-modal\n    :ref=\"getEleModal\"\n    :title=\"title\"\n    :cancelText=\"cancelText\"\n    :maskClosable=\"maskClosable\"\n    v-on=\"$listeners\"\n    :size=\"size\"\n    :value=\"value\"\n    @ok=\"handleOk\"\n    @cancel=\"handleCancel\"\n    :showDefaultFooter=\"true\"\n    >\n    <div class=\"ele-imgCrop__wrapper\">\n      <div class=\"ele-imgCrop__left ele-imgCrop__item\">\n        <div class=\"ele-imgCrop__noImg\">\n          <ele-upload v-if=\"!fileId\" v-bind=\"uploadFileConfig\" class=\"ele-img-crop__upload\" @on-success=\"onUploadFileSuccess\" icon=\"inbox\" url=\"api/zuul/api-file/workbench/file\"></ele-upload>\n          <template v-else>\n            <img :ref=\"leftImage\" class=\"img-crop-left__image\" :src=\"imageUrl\" alt=\"\">\n          </template>\n        </div>\n        <div class=\"margin-t-8\">\n          <span v-if=\"imgtips\" class=\"ele-imgCrop__font1 ele-imgCrop__tips\" :class=\"isFail? 'ele-imgCrop__error' : ''\">{{ imgtips }}</span>\n          <template v-else>\n            <span class=\"ele-imgCrop__font1\">{{ fileName }}</span>\n            <a-icon v-if=\"fileName\" @click=\"handleClickDeleteFile\" type=\"close\" style=\"cursor: pointer;float: right; line-height: 24px;\"/>\n          </template>\n        </div>\n      </div>\n      <div class=\"ele-imgCrop__right ele-imgCrop__item\">\n        <span v-if=\"!fileId\" class=\"ele-imgCrop__font2\">左侧上传图片后可预览</span>\n        <template v-else>\n          <img class=\"img-crop-right__image\" :src=\"previewBase\" alt=\"\">\n        </template>\n      </div>\n    </div>\n    </ele-modal>\n  </div>\n</template>\n\n<script>\nimport { v4 as uuidv4 } from 'uuid'\nimport Cropper from 'cropperjs'\nimport { util, net } from '@idooel/shared'\nexport default {\n  name: 'ele-modal-img-crop',\n  model: {\n    event: 'input',\n    prop: 'value'\n  },\n  props: {\n    title: {\n      type: String,\n      default: '图像裁剪'\n    },\n    uploadFileConfig: {\n      type: Object,\n      default: () => {\n        return {\n          size: 10,\n          accept: '*',\n          byteConversion: 1024 * 1024\n        }\n      }\n    },\n    imageId: {\n      type: String\n    },\n    maskClosable: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    },\n    size: {\n      type: String,\n      default () {\n        return 'big'\n      }\n    },\n    value: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    },\n    cropperConfig: {\n      type: Object,\n      default: () => {\n        return {\n          aspectRatio: 16 / 9\n        }\n      }\n    }\n  },\n  data () {\n    return {\n      haveImg: false,\n      imgtips: null,\n      isFail: false,\n      cancelText: '取消',\n      fileName: null,\n      fileId: null,\n      previewBase: null,\n      cropper: null\n    }\n  },\n  computed: {\n    leftImage () {\n      return uuidv4()\n    },\n    imageUrl () {\n      return `/api-file/workbench/file/stream/${this.fileId}?origin=true`\n    },\n    getEleModal () {\n      return uuidv4()\n    }\n  },\n  watch: {\n    value: {\n      handler (value) {\n        this.fileId = this.imageId\n        if (value && this.fileId) {\n          setTimeout(() => {\n            this.initCropper()\n          })\n        }\n      },\n      immediate: true\n    }\n  },\n  methods: {\n    handleCancel () {\n      this.$emit('input', false)\n      this.$emit('change', this.fileId)\n    },\n    handleClickDeleteFile () {\n      this.fileId = null\n      this.fileName = null\n    },\n    handleOk () {\n      this.cropper.getCroppedCanvas().toBlob(async (blob) => {\n        await this.uploadFile(blob)\n        this.$emit('input', false)\n        this.$emit('change', this.fileId)\n      })\n    },\n    async uploadFile (file) {\n      const formData = new FormData()\n      formData.append('serviceCode', 'cover-image')\n      formData.append('_t', Math.random())\n      formData.append('file', file)\n      await net.post(\n        'zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'),\n        formData\n      ).then(() => {})\n    },\n    initCropper () {\n      let previewReady = false\n      console.log('this.$refs[this.leftImage', this.$refs[this.leftImage])\n      this.cropper = new Cropper(this.$refs[this.leftImage], {\n        aspectRatio: this.cropperConfig.aspectRatio,\n        ready: () => {\n          previewReady = true\n        },\n        crop: util.debounce(() => {\n          if (!previewReady) {\n            return\n          }\n          this.previewBase = this.cropper.getCroppedCanvas().toDataURL()\n        }, 200)\n      })\n    },\n    onUploadFileSuccess (props) {\n      const { response: { data: { fileID } }, name } = props\n      this.fileId = fileID\n      this.fileName = name\n      this.$nextTick(() => {\n        this.initCropper()\n      })\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ant-modal-body {\n  padding: 16px;\n}\n::v-deep .ant-modal-header {\n  padding: 16px;\n}\n.ele-imgCrop__wrapper {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n  .ele-imgCrop__left {\n    .ele-imgCrop__noImg {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      width: 100%;\n      height: 100%;\n      position: relative;\n      .img-crop-left__image {\n        width: 100%;\n        height: 100%;\n      }\n      .ele-img-crop__upload {\n        width: 100%;\n        height: 100%;\n        ::v-deep .ele-upload__inner {\n          height: 100%;\n          border: unset;\n          background: transparent !important;\n          .ele-upload__area {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n            .ele-upload__area--text {\n              margin-top: 16px;\n              display: flex;\n              flex-direction: column;\n              align-items: center;\n            }\n          }\n        }\n      }\n      .ele-imgCrop__font1 {\n        color: var(--idoole-black-088);\n        font-size: 16px;\n        line-height: 24px !important;\n      }\n      .ele-imgCrop__font2 {\n        color: var(--idoole-black-06);\n        font-size: 14px;\n        line-height: 22px; \n      }\n    }\n    .ele-imgCrop__update {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      cursor: pointer;\n    }\n  }\n  .ele-imgCrop__right {\n    position: relative;\n    span {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n    .img-crop-right__image {\n      width: 100%;\n      height: 100%;\n    }\n  }\n  .ele-imgCrop__item {\n    width: 480px;\n    height: 300px;\n    border-radius: 2px;\n    border: 1px dashed var(--idooel-form-title-border-color);\n    background: var(--idooel-form-upload-bg-color);\n  }\n}\n.ele-imgCrop__tips {\n  float: left;\n  width: 80%;\n}\n.ele-imgCrop__error {\n  color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2 {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n</style>","::v-deep .ant-modal-body {\n  padding: 16px;\n}\n\n::v-deep .ant-modal-header {\n  padding: 16px;\n}\n\n.ele-imgCrop__wrapper {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner {\n  height: 100%;\n  border: unset;\n  background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1 {\n  color: var(--idoole-black-088);\n  font-size: 16px;\n  line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2 {\n  color: var(--idoole-black-06);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right {\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item {\n  width: 480px;\n  height: 300px;\n  border-radius: 2px;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color);\n}\n\n.ele-imgCrop__tips {\n  float: left;\n  width: 80%;\n}\n\n.ele-imgCrop__error {\n  color: var(--idooel-form-border-err-color) !important;\n}\n\n.ele-imgCrop__error2 {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n\n.ele-imgCrop__icon {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-54a0392d_0", { source: "[data-v-54a0392d] .ant-modal-body {\n  padding: 16px;\n}\n[data-v-54a0392d] .ant-modal-header {\n  padding: 16px;\n}\n.ele-imgCrop__wrapper[data-v-54a0392d] {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg[data-v-54a0392d] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image[data-v-54a0392d] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d]  .ele-upload__inner {\n  height: 100%;\n  border: unset;\n  background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d]  .ele-upload__inner .ele-upload__area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d]  .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1[data-v-54a0392d] {\n  color: var(--idoole-black-088);\n  font-size: 16px;\n  line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2[data-v-54a0392d] {\n  color: var(--idoole-black-06);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update[data-v-54a0392d] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right[data-v-54a0392d] {\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span[data-v-54a0392d] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image[data-v-54a0392d] {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item[data-v-54a0392d] {\n  width: 480px;\n  height: 300px;\n  border-radius: 2px;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color);\n}\n.ele-imgCrop__tips[data-v-54a0392d] {\n  float: left;\n  width: 80%;\n}\n.ele-imgCrop__error[data-v-54a0392d] {\n  color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2[data-v-54a0392d] {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon[data-v-54a0392d] {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/modal-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AAoMA;EACA,aAAA;ACnMA;ADqMA;EACA,aAAA;AClMA;ADoMA;EACA,aAAA;EACA,SAAA;EACA,uBAAA;EACA,mBAAA;ACjMA;ADmMA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACjMA;ADkMA;EACA,WAAA;EACA,YAAA;AChMA;ADkMA;EACA,WAAA;EACA,YAAA;AChMA;ADiMA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;AC/LA;ADgMA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,mBAAA;EACA,uBAAA;AC9LA;AD+LA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;AC7LA;ADkMA;EACA,8BAAA;EACA,eAAA;EACA,4BAAA;AChMA;ADkMA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;AChMA;ADmMA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,eAAA;ACjMA;ADoMA;EACA,kBAAA;AClMA;ADmMA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACjMA;ADmMA;EACA,WAAA;EACA,YAAA;ACjMA;ADoMA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,wDAAA;EACA,8CAAA;AClMA;ADqMA;EACA,WAAA;EACA,UAAA;AClMA;ADoMA;EACA,qDAAA;ACjMA;ADmMA;EACA,kDAAA;AChMA;ADkMA;EACA,eAAA;EACA,4BAAA;AC/LA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div>\n    <ele-modal\n    :ref=\"getEleModal\"\n    :title=\"title\"\n    :cancelText=\"cancelText\"\n    :maskClosable=\"maskClosable\"\n    v-on=\"$listeners\"\n    :size=\"size\"\n    :value=\"value\"\n    @ok=\"handleOk\"\n    @cancel=\"handleCancel\"\n    :showDefaultFooter=\"true\"\n    >\n    <div class=\"ele-imgCrop__wrapper\">\n      <div class=\"ele-imgCrop__left ele-imgCrop__item\">\n        <div class=\"ele-imgCrop__noImg\">\n          <ele-upload v-if=\"!fileId\" v-bind=\"uploadFileConfig\" class=\"ele-img-crop__upload\" @on-success=\"onUploadFileSuccess\" icon=\"inbox\" url=\"api/zuul/api-file/workbench/file\"></ele-upload>\n          <template v-else>\n            <img :ref=\"leftImage\" class=\"img-crop-left__image\" :src=\"imageUrl\" alt=\"\">\n          </template>\n        </div>\n        <div class=\"margin-t-8\">\n          <span v-if=\"imgtips\" class=\"ele-imgCrop__font1 ele-imgCrop__tips\" :class=\"isFail? 'ele-imgCrop__error' : ''\">{{ imgtips }}</span>\n          <template v-else>\n            <span class=\"ele-imgCrop__font1\">{{ fileName }}</span>\n            <a-icon v-if=\"fileName\" @click=\"handleClickDeleteFile\" type=\"close\" style=\"cursor: pointer;float: right; line-height: 24px;\"/>\n          </template>\n        </div>\n      </div>\n      <div class=\"ele-imgCrop__right ele-imgCrop__item\">\n        <span v-if=\"!fileId\" class=\"ele-imgCrop__font2\">左侧上传图片后可预览</span>\n        <template v-else>\n          <img class=\"img-crop-right__image\" :src=\"previewBase\" alt=\"\">\n        </template>\n      </div>\n    </div>\n    </ele-modal>\n  </div>\n</template>\n\n<script>\nimport { v4 as uuidv4 } from 'uuid'\nimport Cropper from 'cropperjs'\nimport { util, net } from '@idooel/shared'\nexport default {\n  name: 'ele-modal-img-crop',\n  model: {\n    event: 'input',\n    prop: 'value'\n  },\n  props: {\n    title: {\n      type: String,\n      default: '图像裁剪'\n    },\n    uploadFileConfig: {\n      type: Object,\n      default: () => {\n        return {\n          size: 10,\n          accept: '*',\n          byteConversion: 1024 * 1024\n        }\n      }\n    },\n    imageId: {\n      type: String\n    },\n    maskClosable: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    },\n    size: {\n      type: String,\n      default () {\n        return 'big'\n      }\n    },\n    value: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    },\n    cropperConfig: {\n      type: Object,\n      default: () => {\n        return {\n          aspectRatio: 16 / 9\n        }\n      }\n    }\n  },\n  data () {\n    return {\n      haveImg: false,\n      imgtips: null,\n      isFail: false,\n      cancelText: '取消',\n      fileName: null,\n      fileId: null,\n      previewBase: null,\n      cropper: null\n    }\n  },\n  computed: {\n    leftImage () {\n      return uuidv4()\n    },\n    imageUrl () {\n      return `/api-file/workbench/file/stream/${this.fileId}?origin=true`\n    },\n    getEleModal () {\n      return uuidv4()\n    }\n  },\n  watch: {\n    value: {\n      handler (value) {\n        this.fileId = this.imageId\n        if (value && this.fileId) {\n          setTimeout(() => {\n            this.initCropper()\n          })\n        }\n      },\n      immediate: true\n    }\n  },\n  methods: {\n    handleCancel () {\n      this.$emit('input', false)\n      this.$emit('change', this.fileId)\n    },\n    handleClickDeleteFile () {\n      this.fileId = null\n      this.fileName = null\n      this.cropper && this.cropper.destroy()\n    },\n    blobToFile(blob, fileName = 'file.png') {\n      return new File([blob], fileName, {\n        type: blob.type,\n        lastModified: Date.now()\n      })\n    },\n    handleOk () {\n      this.cropper && this.cropper.getCroppedCanvas().toBlob(async (blob) => {\n        await this.uploadFile(this.blobToFile(blob, this.fileName))\n        this.$emit('input', false)\n        this.$emit('change', this.fileId)\n      })\n    },\n    async uploadFile (file) {\n      const formData = new FormData()\n      formData.append('serviceCode', 'cover-image')\n      formData.append('_t', Math.random())\n      formData.append('file', file)\n      await net.post(\n        'zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'),\n        formData\n      ).then((resp) => {\n        const { data: { fileID } } = resp\n        this.fileId = fileID\n      })\n    },\n    initCropper () {\n      let previewReady = false\n      this.cropper = new Cropper(this.$refs[this.leftImage], {\n        aspectRatio: this.cropperConfig.aspectRatio,\n        ready: () => {\n          previewReady = true\n        },\n        crop: util.debounce(() => {\n          if (!previewReady) {\n            return\n          }\n          this.previewBase = this.cropper.getCroppedCanvas().toDataURL()\n        }, 200)\n      })\n    },\n    onUploadFileSuccess (props) {\n      const { response: { data: { fileID } }, name } = props\n      this.fileId = fileID\n      this.fileName = name\n      this.$nextTick(() => {\n        this.initCropper()\n      })\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ant-modal-body {\n  padding: 16px;\n}\n::v-deep .ant-modal-header {\n  padding: 16px;\n}\n.ele-imgCrop__wrapper {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n  .ele-imgCrop__left {\n    .ele-imgCrop__noImg {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      width: 100%;\n      height: 100%;\n      position: relative;\n      .img-crop-left__image {\n        width: 100%;\n        height: 100%;\n      }\n      .ele-img-crop__upload {\n        width: 100%;\n        height: 100%;\n        ::v-deep .ele-upload__inner {\n          height: 100%;\n          border: unset;\n          background: transparent !important;\n          .ele-upload__area {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            align-items: center;\n            justify-content: center;\n            .ele-upload__area--text {\n              margin-top: 16px;\n              display: flex;\n              flex-direction: column;\n              align-items: center;\n            }\n          }\n        }\n      }\n      .ele-imgCrop__font1 {\n        color: var(--idoole-black-088);\n        font-size: 16px;\n        line-height: 24px !important;\n      }\n      .ele-imgCrop__font2 {\n        color: var(--idoole-black-06);\n        font-size: 14px;\n        line-height: 22px; \n      }\n    }\n    .ele-imgCrop__update {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      cursor: pointer;\n    }\n  }\n  .ele-imgCrop__right {\n    position: relative;\n    span {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n    .img-crop-right__image {\n      width: 100%;\n      height: 100%;\n    }\n  }\n  .ele-imgCrop__item {\n    width: 480px;\n    height: 300px;\n    border-radius: 2px;\n    border: 1px dashed var(--idooel-form-title-border-color);\n    background: var(--idooel-form-upload-bg-color);\n  }\n}\n.ele-imgCrop__tips {\n  float: left;\n  width: 80%;\n}\n.ele-imgCrop__error {\n  color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2 {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n</style>","::v-deep .ant-modal-body {\n  padding: 16px;\n}\n\n::v-deep .ant-modal-header {\n  padding: 16px;\n}\n\n.ele-imgCrop__wrapper {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner {\n  height: 100%;\n  border: unset;\n  background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1 {\n  color: var(--idoole-black-088);\n  font-size: 16px;\n  line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2 {\n  color: var(--idoole-black-06);\n  font-size: 14px;\n  line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right {\n  position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image {\n  width: 100%;\n  height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item {\n  width: 480px;\n  height: 300px;\n  border-radius: 2px;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color);\n}\n\n.ele-imgCrop__tips {\n  float: left;\n  width: 80%;\n}\n\n.ele-imgCrop__error {\n  color: var(--idooel-form-border-err-color) !important;\n}\n\n.ele-imgCrop__error2 {\n  color: var(--idooel-img-crop-err-color) !important;\n}\n\n.ele-imgCrop__icon {\n  font-size: 48px;\n  color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$h = "data-v-307ca7c2";
+    const __vue_scope_id__$h = "data-v-54a0392d";
     /* module identifier */
     const __vue_module_identifier__$h = undefined;
     /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.1-beta.106",
+  "version": "0.0.1-beta.108",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

package/packages/composite-components/modal-img-crop/src/index.vue

@@ -138,10 +138,17 @@ export default {
     handleClickDeleteFile () {
       this.fileId = null
       this.fileName = null
+      this.cropper && this.cropper.destroy()
+    },
+    blobToFile(blob, fileName = 'file.png') {
+      return new File([blob], fileName, {
+        type: blob.type,
+        lastModified: Date.now()
+      })
     },
     handleOk () {
-      this.cropper.getCroppedCanvas().toBlob(async (blob) => {
-        await this.uploadFile(blob)
+      this.cropper && this.cropper.getCroppedCanvas().toBlob(async (blob) => {
+        await this.uploadFile(this.blobToFile(blob, this.fileName))
         this.$emit('input', false)
         this.$emit('change', this.fileId)
       })
@@ -154,11 +161,13 @@ export default {
       await net.post(
         'zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'),
         formData
-      ).then(() => {})
+      ).then((resp) => {
+        const { data: { fileID } } = resp
+        this.fileId = fileID
+      })
     },
     initCropper () {
       let previewReady = false
-      console.log('this.$refs[this.leftImage', this.$refs[this.leftImage])
       this.cropper = new Cropper(this.$refs[this.leftImage], {
         aspectRatio: this.cropperConfig.aspectRatio,
         ready: () => {

package/packages/upload/src/index.vue

@@ -293,7 +293,7 @@ export default {
     async saveToServerAsyncPage (payloads = {}) {
       net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
         headers: {
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
         }
       }).then(resp =>{
         const { data } = resp