@idooel/components 0.0.1-beta.105 → 0.0.1-beta.106
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5551,7 +5551,7 @@ var script$t = {
|
|
|
5551
5551
|
}
|
|
5552
5552
|
} = response;
|
|
5553
5553
|
const payloads = {
|
|
5554
|
-
filePath: file.match(/\/cw(.*)/)[0],
|
|
5554
|
+
filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
|
|
5555
5555
|
asyncID: v4(),
|
|
5556
5556
|
isDeleteOrigin: false,
|
|
5557
5557
|
toImage: type === 'pdf' ? true : false,
|
|
@@ -5748,11 +5748,11 @@ __vue_render__$t._withStripped = true;
|
|
|
5748
5748
|
/* style */
|
|
5749
5749
|
const __vue_inject_styles__$t = function (inject) {
|
|
5750
5750
|
if (!inject) return
|
|
5751
|
-
inject("data-v-3e301bd4_0", { source: "[data-v-3e301bd4] .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-3e301bd4] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-3e301bd4] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-3e301bd4] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-3e301bd4] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-3e301bd4] {\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(.*)/)[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 });
|
|
5751
|
+
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 });
|
|
5752
5752
|
|
|
5753
5753
|
};
|
|
5754
5754
|
/* scoped */
|
|
5755
|
-
const __vue_scope_id__$t = "data-v-
|
|
5755
|
+
const __vue_scope_id__$t = "data-v-4fa7ccb9";
|
|
5756
5756
|
/* module identifier */
|
|
5757
5757
|
const __vue_module_identifier__$t = undefined;
|
|
5758
5758
|
/* functional template */
|
|
@@ -13600,11 +13600,12 @@ var script$4 = {
|
|
|
13600
13600
|
watch: {
|
|
13601
13601
|
value: {
|
|
13602
13602
|
handler(innerValue) {
|
|
13603
|
+
const _innerValue = type.isArray(innerValue) ? innerValue : [innerValue];
|
|
13603
13604
|
const {
|
|
13604
13605
|
label,
|
|
13605
13606
|
value
|
|
13606
13607
|
} = this.replaceFields;
|
|
13607
|
-
this.entityValue =
|
|
13608
|
+
this.entityValue = _innerValue.map(item => {
|
|
13608
13609
|
return {
|
|
13609
13610
|
label: item[label],
|
|
13610
13611
|
value: item[value]
|
|
@@ -5558,7 +5558,7 @@
|
|
|
5558
5558
|
}
|
|
5559
5559
|
} = response;
|
|
5560
5560
|
const payloads = {
|
|
5561
|
-
filePath: file.match(/\/cw(.*)/)[0],
|
|
5561
|
+
filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
|
|
5562
5562
|
asyncID: v4(),
|
|
5563
5563
|
isDeleteOrigin: false,
|
|
5564
5564
|
toImage: type === 'pdf' ? true : false,
|
|
@@ -5755,11 +5755,11 @@
|
|
|
5755
5755
|
/* style */
|
|
5756
5756
|
const __vue_inject_styles__$t = function (inject) {
|
|
5757
5757
|
if (!inject) return
|
|
5758
|
-
inject("data-v-3e301bd4_0", { source: "[data-v-3e301bd4] .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-3e301bd4] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-3e301bd4] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-3e301bd4] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\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-3e301bd4] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-3e301bd4] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-3e301bd4] {\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(.*)/)[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 });
|
|
5758
|
+
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 });
|
|
5759
5759
|
|
|
5760
5760
|
};
|
|
5761
5761
|
/* scoped */
|
|
5762
|
-
const __vue_scope_id__$t = "data-v-
|
|
5762
|
+
const __vue_scope_id__$t = "data-v-4fa7ccb9";
|
|
5763
5763
|
/* module identifier */
|
|
5764
5764
|
const __vue_module_identifier__$t = undefined;
|
|
5765
5765
|
/* functional template */
|
|
@@ -13607,11 +13607,12 @@
|
|
|
13607
13607
|
watch: {
|
|
13608
13608
|
value: {
|
|
13609
13609
|
handler(innerValue) {
|
|
13610
|
+
const _innerValue = shared.type.isArray(innerValue) ? innerValue : [innerValue];
|
|
13610
13611
|
const {
|
|
13611
13612
|
label,
|
|
13612
13613
|
value
|
|
13613
13614
|
} = this.replaceFields;
|
|
13614
|
-
this.entityValue =
|
|
13615
|
+
this.entityValue = _innerValue.map(item => {
|
|
13615
13616
|
return {
|
|
13616
13617
|
label: item[label],
|
|
13617
13618
|
value: item[value]
|
package/package.json
CHANGED
|
@@ -55,8 +55,9 @@ export default {
|
|
|
55
55
|
watch: {
|
|
56
56
|
value: {
|
|
57
57
|
handler(innerValue) {
|
|
58
|
+
const _innerValue = type.isArray(innerValue) ? innerValue : [innerValue]
|
|
58
59
|
const { label, value } = this.replaceFields
|
|
59
|
-
this.entityValue =
|
|
60
|
+
this.entityValue = _innerValue.map(item => {
|
|
60
61
|
return {
|
|
61
62
|
label: item[label],
|
|
62
63
|
value: item[value]
|
|
@@ -334,7 +334,7 @@ export default {
|
|
|
334
334
|
console.log('chunk end')
|
|
335
335
|
const { data: { file, type } } = response
|
|
336
336
|
const payloads = {
|
|
337
|
-
filePath: file.match(/\/cw(.*)/)[0],
|
|
337
|
+
filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
|
|
338
338
|
asyncID: uuidv4(),
|
|
339
339
|
isDeleteOrigin: false,
|
|
340
340
|
toImage: type === 'pdf' ? true : false,
|