@idooel/components 0.0.1-beta.28 → 0.0.1-beta.30
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.
|
@@ -2898,7 +2898,7 @@ var script$h = {
|
|
|
2898
2898
|
props: {
|
|
2899
2899
|
url: {
|
|
2900
2900
|
type: String,
|
|
2901
|
-
default: `${window.prefixPath}/zuul/api-file/workbench/file`
|
|
2901
|
+
default: `${window.prefixPath || ''}/zuul/api-file/workbench/file`
|
|
2902
2902
|
},
|
|
2903
2903
|
icon: {
|
|
2904
2904
|
type: String,
|
|
@@ -3285,11 +3285,11 @@ __vue_render__$h._withStripped = true;
|
|
|
3285
3285
|
/* style */
|
|
3286
3286
|
const __vue_inject_styles__$h = function (inject) {
|
|
3287
3287
|
if (!inject) return
|
|
3288
|
-
inject("data-v-30d170dc_0", { source: "[data-v-30d170dc] .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-30d170dc] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-30d170dc] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-30d170dc] {\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 .anticon-cloud-upload[data-v-30d170dc] {\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-30d170dc] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-30d170dc] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-30d170dc] {\n font-size: 16px;\n color: var(--idoole-black-008);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-30d170dc] {\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-30d170dc] {\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-30d170dc] {\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-30d170dc] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-30d170dc] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-30d170dc] {\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":"AAuSA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzSA;ADsSA;EACA,0DAAA;ACpSA;ADwSA;EACA,WAAA;ACrSA;ADsSA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpSA;ADsSA;EACA,eAAA;EACA,kCAAA;ACpSA;ADsSA;EACA,eAAA;EACA,kCAAA;ACpSA;ADuSA;EACA,iBAAA;ACrSA;ADsSA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACpSA;ADsSA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACpSA;ADySA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACvSA;ADySA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACvSA;ADwSA;EACA,gBAAA;EACA,uBAAA;ACtSA;ADySA;EACA,gBAAA;ACvSA;ADwSA;EACA,gBAAA;EACA,eAAA;ACtSA;;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 :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 <ele-icon :type=\"icon\"></ele-icon>\n </div>\n <div class=\"ele-upload__area--text\">\n <div class=\"ele-upload__message\">单击或拖动文件到该区域以上传</div>\n <div class=\"ele-upload__ext\">文件小于{{ 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 files\" :key=\"idx\">\n <div class=\"ele-file__suffix--icon\">\n <ele-icon type=\"icon-doc\"></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\" 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\">\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'\nimport EleIcon from '../../icon/src/index.vue'\nexport default {\n name: 'ele-upload',\n components: {\n FileUpload,\n EleIcon\n },\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n url: {\n type: String,\n default: `${window.prefixPath}/zuul/api-file/workbench/file`\n },\n icon: {\n type: String,\n default: 'cloud-upload'\n },\n size: {\n type: Number,\n default: 100\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: [Object, 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 saveToServerAsyncPageTimer: null\n }\n },\n watch: {\n value: {\n handler (value) {\n this.files = type.isArray(value) ? value : type.isEmpty(value) ? [] : [value]\n },\n immediate: true\n }\n },\n computed: {\n getPayloads () {\n return {\n override: false\n }\n },\n chunkConfig () {\n const ret = route.toQueryString(this.querys)\n return {\n action: `${window.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.files.length >= this.maximum) {\n return false\n } else {\n return true\n }\n } else {\n if (this.isFileUploadSuccessed && this.files.length >= 1) {\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 `${window.prefixPath}${this.url}?${ret}`\n },\n uploadRef () {\n return uuidv4()\n },\n fileSuffixIcon () {\n return {\n 'doc': { name: 'icon-doc' },\n }\n },\n fileIds () {\n const fileIds = this.files.map(file => {\n return file.response.data.fileID\n })\n return this.multiple ? fileIds : fileIds[0]\n },\n fileResponseData () {\n return this.multiple ? this.files : this.files[0]\n }\n },\n methods: {\n handleClickDownload (file) {\n console.log('download file', file)\n },\n handleClickDelete (file) {\n this.$refs[this.uploadRef].remove(file)\n this.$emit('change', this.fileResponseData)\n },\n onWatchFiles (files) {\n this.files = files\n if (this.isFileUploadSuccessed) {\n this.$emit('change', this.fileResponseData)\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': 'multipart/form-data'\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 .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-008);\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 .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-008);\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 });
|
|
3288
|
+
inject("data-v-d910641c_0", { source: "[data-v-d910641c] .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-d910641c] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-d910641c] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-d910641c] {\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 .anticon-cloud-upload[data-v-d910641c] {\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-d910641c] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-d910641c] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-d910641c] {\n font-size: 16px;\n color: var(--idoole-black-008);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-d910641c] {\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-d910641c] {\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-d910641c] {\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-d910641c] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-d910641c] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-d910641c] {\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":"AAuSA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzSA;ADsSA;EACA,0DAAA;ACpSA;ADwSA;EACA,WAAA;ACrSA;ADsSA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpSA;ADsSA;EACA,eAAA;EACA,kCAAA;ACpSA;ADsSA;EACA,eAAA;EACA,kCAAA;ACpSA;ADuSA;EACA,iBAAA;ACrSA;ADsSA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACpSA;ADsSA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACpSA;ADySA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACvSA;ADySA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACvSA;ADwSA;EACA,gBAAA;EACA,uBAAA;ACtSA;ADySA;EACA,gBAAA;ACvSA;ADwSA;EACA,gBAAA;EACA,eAAA;ACtSA;;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 :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 <ele-icon :type=\"icon\"></ele-icon>\n </div>\n <div class=\"ele-upload__area--text\">\n <div class=\"ele-upload__message\">单击或拖动文件到该区域以上传</div>\n <div class=\"ele-upload__ext\">文件小于{{ 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 files\" :key=\"idx\">\n <div class=\"ele-file__suffix--icon\">\n <ele-icon type=\"icon-doc\"></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\" 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\">\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'\nimport EleIcon from '../../icon/src/index.vue'\nexport default {\n name: 'ele-upload',\n components: {\n FileUpload,\n EleIcon\n },\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n url: {\n type: String,\n default: `${window.prefixPath || ''}/zuul/api-file/workbench/file`\n },\n icon: {\n type: String,\n default: 'cloud-upload'\n },\n size: {\n type: Number,\n default: 100\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: [Object, 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 saveToServerAsyncPageTimer: null\n }\n },\n watch: {\n value: {\n handler (value) {\n this.files = type.isArray(value) ? value : type.isEmpty(value) ? [] : [value]\n },\n immediate: true\n }\n },\n computed: {\n getPayloads () {\n return {\n override: false\n }\n },\n chunkConfig () {\n const ret = route.toQueryString(this.querys)\n return {\n action: `${window.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.files.length >= this.maximum) {\n return false\n } else {\n return true\n }\n } else {\n if (this.isFileUploadSuccessed && this.files.length >= 1) {\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 `${window.prefixPath}${this.url}?${ret}`\n },\n uploadRef () {\n return uuidv4()\n },\n fileSuffixIcon () {\n return {\n 'doc': { name: 'icon-doc' },\n }\n },\n fileIds () {\n const fileIds = this.files.map(file => {\n return file.response.data.fileID\n })\n return this.multiple ? fileIds : fileIds[0]\n },\n fileResponseData () {\n return this.multiple ? this.files : this.files[0]\n }\n },\n methods: {\n handleClickDownload (file) {\n console.log('download file', file)\n },\n handleClickDelete (file) {\n this.$refs[this.uploadRef].remove(file)\n this.$emit('change', this.fileResponseData)\n },\n onWatchFiles (files) {\n this.files = files\n if (this.isFileUploadSuccessed) {\n this.$emit('change', this.fileResponseData)\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': 'multipart/form-data'\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 .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-008);\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 .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-008);\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 });
|
|
3289
3289
|
|
|
3290
3290
|
};
|
|
3291
3291
|
/* scoped */
|
|
3292
|
-
const __vue_scope_id__$h = "data-v-
|
|
3292
|
+
const __vue_scope_id__$h = "data-v-d910641c";
|
|
3293
3293
|
/* module identifier */
|
|
3294
3294
|
const __vue_module_identifier__$h = undefined;
|
|
3295
3295
|
/* functional template */
|
|
@@ -5615,7 +5615,7 @@ var __vue_render__$6 = function () {
|
|
|
5615
5615
|
},
|
|
5616
5616
|
},
|
|
5617
5617
|
[
|
|
5618
|
-
_vm._t("default"),
|
|
5618
|
+
_vm.showModal ? _vm._t("default") : _vm._e(),
|
|
5619
5619
|
_vm._v(" "),
|
|
5620
5620
|
!_vm.showDefaultFooter
|
|
5621
5621
|
? _c("template", { slot: "footer" }, [
|
|
@@ -5999,7 +5999,11 @@ var script$3 = {
|
|
|
5999
5999
|
action: 'download'
|
|
6000
6000
|
});
|
|
6001
6001
|
},
|
|
6002
|
+
cleanFile() {
|
|
6003
|
+
this.file = [];
|
|
6004
|
+
},
|
|
6002
6005
|
handleClose() {
|
|
6006
|
+
this.cleanFile();
|
|
6003
6007
|
this.innerValue = false;
|
|
6004
6008
|
this.$emit('change', false);
|
|
6005
6009
|
}
|
|
@@ -6097,12 +6101,12 @@ __vue_render__$3._withStripped = true;
|
|
|
6097
6101
|
/* style */
|
|
6098
6102
|
const __vue_inject_styles__$3 = function (inject) {
|
|
6099
6103
|
if (!inject) return
|
|
6100
|
-
inject("data-v-
|
|
6101
|
-
,inject("data-v-
|
|
6104
|
+
inject("data-v-71791957_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-008: rgba(0, 0, 0, 0.88);\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-008: rgba(0, 0, 0, 0.88);\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
6105
|
+
,inject("data-v-71791957_1", { source: ".import-download__link[data-v-71791957] {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n.ele-modal-import__hint .import-hint__content[data-v-71791957] {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__left .anticon-upload[data-v-71791957] {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right[data-v-71791957] {\n margin-left: 16px;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__title[data-v-71791957] {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__sub-title[data-v-71791957] {\n font-size: 14px;\n color: var(--idooel-link-03);\n}\n.ele-modal-import__hint .import-footer__hint--text[data-v-71791957] {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\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-import/src/index.vue","index.vue"],"names":[],"mappings":"AAwGA;EACA,4BAAA;EACA,eAAA;EACA,eAAA;EACA,iBAAA;ACvGA;AD0GA;EACA,aAAA;EACA,kBAAA;EACA,YAAA;EACA,wCAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACvGA;ADyGA;EACA,eAAA;EACA,4BAAA;ACvGA;AD0GA;EACA,iBAAA;ACxGA;ADyGA;EACA,eAAA;EACA,4BAAA;EACA,eAAA;ACvGA;ADyGA;EACA,eAAA;EACA,4BAAA;ACvGA;AD2GA;EACA,eAAA;EACA,4BAAA;EACA,iBAAA;ACzGA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <ele-modal :value=\"innerValue\" :buttonGroupMeta=\"buttonGroupMeta\" @cancel=\"onCancel\" @handleClose=\"handleClose\" title=\"导入\">\n <div class=\"ele-modal-import__upload\" v-if=\"isFileEmpty\">\n <div class=\"import-download__link\" @click=\"handleClickDownloadTpl\">点击此链接下载导入模板</div>\n <ele-upload v-model=\"file\" icon=\"upload\" @on-success=\"uploadFileSuccess\"></ele-upload>\n </div>\n <div v-else class=\"ele-modal-import__hint\">\n <div class=\"import-hint__content\">\n <div class=\"import-hint__left\">\n <ele-icon type=\"upload\"></ele-icon>\n </div>\n <div class=\"import-hint__right\">\n <div class=\"hint-right__title\" @click=\"handleClickJump\">文件上传成功，任务处理中..... 请点击此按钮跳转到“批处理管理”菜单查看任务进度</div>\n <div class=\"hint-right__sub-title\">批处理任务的准备工作会在后台运行</div>\n </div>\n </div>\n <div class=\"import-footer__hint--text\">\n 您可以请点击上方按钮查看任务进度或关闭弹框\n </div>\n </div>\n </ele-modal>\n</template>\n\n<script>\nimport EleUpload from '../../../upload/src/index.vue'\nimport ELeIcon from '../../../icon/src/index.vue'\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-modal-import',\n components: {\n EleUpload,\n ELeIcon\n },\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n value: {\n type: Boolean,\n default: false\n }\n },\n data() {\n return {\n innerValue: false,\n file: [],\n buttonGroupMeta: {\n elements: [\n {\n label: '关闭',\n key: 'close',\n type: 'default',\n eventName: 'handleClose'\n }\n ]\n }\n }\n },\n computed: {\n isFileEmpty () {\n return type.isEmpty(this.file)\n }\n },\n watch: {\n value: {\n handler (value) {\n this.innerValue = value\n },\n immediate: true\n }\n },\n methods: {\n emitEvent (props = {}) {\n this.$emit('on-actions', { ...props })\n },\n onCancel () {\n this.innerValue = false\n this.$emit('change', false)\n },\n handleClickJump () {\n this.emitEvent({ action: 'jump' })\n },\n uploadFileSuccess (props) {\n this.emitEvent({ action: 'uploaded', file: props })\n },\n handleClickDownloadTpl () {\n this.emitEvent({ action: 'download' })\n },\n cleanFile () {\n this.file = []\n },\n handleClose () {\n this.cleanFile()\n this.innerValue = false\n this.$emit('change', false)\n }\n }\n}\n</script>\n<style lang=\"scss\">\n@import '../../../theme/index.scss';\n</style>\n<style lang=\"scss\" scoped>\n.import-download__link {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n.ele-modal-import__hint {\n .import-hint__content {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n .import-hint__left {\n .anticon-upload {\n font-size: 48px;\n color: var(--idooel-link-06);\n }\n }\n .import-hint__right {\n margin-left: 16px;\n .hint-right__title {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n }\n .hint-right__sub-title {\n font-size: 14px;\n color: var(--idooel-link-03);\n }\n }\n }\n .import-footer__hint--text {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\n }\n}\n</style>",".import-download__link {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n\n.ele-modal-import__hint .import-hint__content {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__left .anticon-upload {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right {\n margin-left: 16px;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__title {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__sub-title {\n font-size: 14px;\n color: var(--idooel-link-03);\n}\n.ele-modal-import__hint .import-footer__hint--text {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
6102
6106
|
|
|
6103
6107
|
};
|
|
6104
6108
|
/* scoped */
|
|
6105
|
-
const __vue_scope_id__$3 = "data-v-
|
|
6109
|
+
const __vue_scope_id__$3 = "data-v-71791957";
|
|
6106
6110
|
/* module identifier */
|
|
6107
6111
|
const __vue_module_identifier__$3 = undefined;
|
|
6108
6112
|
/* functional template */
|
|
@@ -2905,7 +2905,7 @@
|
|
|
2905
2905
|
props: {
|
|
2906
2906
|
url: {
|
|
2907
2907
|
type: String,
|
|
2908
|
-
default: `${window.prefixPath}/zuul/api-file/workbench/file`
|
|
2908
|
+
default: `${window.prefixPath || ''}/zuul/api-file/workbench/file`
|
|
2909
2909
|
},
|
|
2910
2910
|
icon: {
|
|
2911
2911
|
type: String,
|
|
@@ -3292,11 +3292,11 @@
|
|
|
3292
3292
|
/* style */
|
|
3293
3293
|
const __vue_inject_styles__$h = function (inject) {
|
|
3294
3294
|
if (!inject) return
|
|
3295
|
-
inject("data-v-30d170dc_0", { source: "[data-v-30d170dc] .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-30d170dc] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-30d170dc] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-30d170dc] {\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 .anticon-cloud-upload[data-v-30d170dc] {\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-30d170dc] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-30d170dc] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-30d170dc] {\n font-size: 16px;\n color: var(--idoole-black-008);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-30d170dc] {\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-30d170dc] {\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-30d170dc] {\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-30d170dc] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-30d170dc] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-30d170dc] {\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":"AAuSA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzSA;ADsSA;EACA,0DAAA;ACpSA;ADwSA;EACA,WAAA;ACrSA;ADsSA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpSA;ADsSA;EACA,eAAA;EACA,kCAAA;ACpSA;ADsSA;EACA,eAAA;EACA,kCAAA;ACpSA;ADuSA;EACA,iBAAA;ACrSA;ADsSA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACpSA;ADsSA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACpSA;ADySA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACvSA;ADySA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACvSA;ADwSA;EACA,gBAAA;EACA,uBAAA;ACtSA;ADySA;EACA,gBAAA;ACvSA;ADwSA;EACA,gBAAA;EACA,eAAA;ACtSA;;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 :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 <ele-icon :type=\"icon\"></ele-icon>\n </div>\n <div class=\"ele-upload__area--text\">\n <div class=\"ele-upload__message\">单击或拖动文件到该区域以上传</div>\n <div class=\"ele-upload__ext\">文件小于{{ 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 files\" :key=\"idx\">\n <div class=\"ele-file__suffix--icon\">\n <ele-icon type=\"icon-doc\"></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\" 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\">\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'\nimport EleIcon from '../../icon/src/index.vue'\nexport default {\n name: 'ele-upload',\n components: {\n FileUpload,\n EleIcon\n },\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n url: {\n type: String,\n default: `${window.prefixPath}/zuul/api-file/workbench/file`\n },\n icon: {\n type: String,\n default: 'cloud-upload'\n },\n size: {\n type: Number,\n default: 100\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: [Object, 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 saveToServerAsyncPageTimer: null\n }\n },\n watch: {\n value: {\n handler (value) {\n this.files = type.isArray(value) ? value : type.isEmpty(value) ? [] : [value]\n },\n immediate: true\n }\n },\n computed: {\n getPayloads () {\n return {\n override: false\n }\n },\n chunkConfig () {\n const ret = route.toQueryString(this.querys)\n return {\n action: `${window.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.files.length >= this.maximum) {\n return false\n } else {\n return true\n }\n } else {\n if (this.isFileUploadSuccessed && this.files.length >= 1) {\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 `${window.prefixPath}${this.url}?${ret}`\n },\n uploadRef () {\n return uuidv4()\n },\n fileSuffixIcon () {\n return {\n 'doc': { name: 'icon-doc' },\n }\n },\n fileIds () {\n const fileIds = this.files.map(file => {\n return file.response.data.fileID\n })\n return this.multiple ? fileIds : fileIds[0]\n },\n fileResponseData () {\n return this.multiple ? this.files : this.files[0]\n }\n },\n methods: {\n handleClickDownload (file) {\n console.log('download file', file)\n },\n handleClickDelete (file) {\n this.$refs[this.uploadRef].remove(file)\n this.$emit('change', this.fileResponseData)\n },\n onWatchFiles (files) {\n this.files = files\n if (this.isFileUploadSuccessed) {\n this.$emit('change', this.fileResponseData)\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': 'multipart/form-data'\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 .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-008);\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 .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-008);\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 });
|
|
3295
|
+
inject("data-v-d910641c_0", { source: "[data-v-d910641c] .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-d910641c] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-d910641c] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-d910641c] {\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 .anticon-cloud-upload[data-v-d910641c] {\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-d910641c] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-d910641c] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-d910641c] {\n font-size: 16px;\n color: var(--idoole-black-008);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-d910641c] {\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-d910641c] {\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-d910641c] {\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-d910641c] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-d910641c] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-d910641c] {\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":"AAuSA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzSA;ADsSA;EACA,0DAAA;ACpSA;ADwSA;EACA,WAAA;ACrSA;ADsSA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpSA;ADsSA;EACA,eAAA;EACA,kCAAA;ACpSA;ADsSA;EACA,eAAA;EACA,kCAAA;ACpSA;ADuSA;EACA,iBAAA;ACrSA;ADsSA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACpSA;ADsSA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACpSA;ADySA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACvSA;ADySA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACvSA;ADwSA;EACA,gBAAA;EACA,uBAAA;ACtSA;ADySA;EACA,gBAAA;ACvSA;ADwSA;EACA,gBAAA;EACA,eAAA;ACtSA;;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 :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 <ele-icon :type=\"icon\"></ele-icon>\n </div>\n <div class=\"ele-upload__area--text\">\n <div class=\"ele-upload__message\">单击或拖动文件到该区域以上传</div>\n <div class=\"ele-upload__ext\">文件小于{{ 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 files\" :key=\"idx\">\n <div class=\"ele-file__suffix--icon\">\n <ele-icon type=\"icon-doc\"></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\" 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\">\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'\nimport EleIcon from '../../icon/src/index.vue'\nexport default {\n name: 'ele-upload',\n components: {\n FileUpload,\n EleIcon\n },\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n url: {\n type: String,\n default: `${window.prefixPath || ''}/zuul/api-file/workbench/file`\n },\n icon: {\n type: String,\n default: 'cloud-upload'\n },\n size: {\n type: Number,\n default: 100\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: [Object, 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 saveToServerAsyncPageTimer: null\n }\n },\n watch: {\n value: {\n handler (value) {\n this.files = type.isArray(value) ? value : type.isEmpty(value) ? [] : [value]\n },\n immediate: true\n }\n },\n computed: {\n getPayloads () {\n return {\n override: false\n }\n },\n chunkConfig () {\n const ret = route.toQueryString(this.querys)\n return {\n action: `${window.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.files.length >= this.maximum) {\n return false\n } else {\n return true\n }\n } else {\n if (this.isFileUploadSuccessed && this.files.length >= 1) {\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 `${window.prefixPath}${this.url}?${ret}`\n },\n uploadRef () {\n return uuidv4()\n },\n fileSuffixIcon () {\n return {\n 'doc': { name: 'icon-doc' },\n }\n },\n fileIds () {\n const fileIds = this.files.map(file => {\n return file.response.data.fileID\n })\n return this.multiple ? fileIds : fileIds[0]\n },\n fileResponseData () {\n return this.multiple ? this.files : this.files[0]\n }\n },\n methods: {\n handleClickDownload (file) {\n console.log('download file', file)\n },\n handleClickDelete (file) {\n this.$refs[this.uploadRef].remove(file)\n this.$emit('change', this.fileResponseData)\n },\n onWatchFiles (files) {\n this.files = files\n if (this.isFileUploadSuccessed) {\n this.$emit('change', this.fileResponseData)\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': 'multipart/form-data'\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 .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-008);\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 .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-008);\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 });
|
|
3296
3296
|
|
|
3297
3297
|
};
|
|
3298
3298
|
/* scoped */
|
|
3299
|
-
const __vue_scope_id__$h = "data-v-
|
|
3299
|
+
const __vue_scope_id__$h = "data-v-d910641c";
|
|
3300
3300
|
/* module identifier */
|
|
3301
3301
|
const __vue_module_identifier__$h = undefined;
|
|
3302
3302
|
/* functional template */
|
|
@@ -5622,7 +5622,7 @@
|
|
|
5622
5622
|
},
|
|
5623
5623
|
},
|
|
5624
5624
|
[
|
|
5625
|
-
_vm._t("default"),
|
|
5625
|
+
_vm.showModal ? _vm._t("default") : _vm._e(),
|
|
5626
5626
|
_vm._v(" "),
|
|
5627
5627
|
!_vm.showDefaultFooter
|
|
5628
5628
|
? _c("template", { slot: "footer" }, [
|
|
@@ -6006,7 +6006,11 @@
|
|
|
6006
6006
|
action: 'download'
|
|
6007
6007
|
});
|
|
6008
6008
|
},
|
|
6009
|
+
cleanFile() {
|
|
6010
|
+
this.file = [];
|
|
6011
|
+
},
|
|
6009
6012
|
handleClose() {
|
|
6013
|
+
this.cleanFile();
|
|
6010
6014
|
this.innerValue = false;
|
|
6011
6015
|
this.$emit('change', false);
|
|
6012
6016
|
}
|
|
@@ -6104,12 +6108,12 @@
|
|
|
6104
6108
|
/* style */
|
|
6105
6109
|
const __vue_inject_styles__$3 = function (inject) {
|
|
6106
6110
|
if (!inject) return
|
|
6107
|
-
inject("data-v-
|
|
6108
|
-
,inject("data-v-
|
|
6111
|
+
inject("data-v-71791957_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-008: rgba(0, 0, 0, 0.88);\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-008: rgba(0, 0, 0, 0.88);\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
6112
|
+
,inject("data-v-71791957_1", { source: ".import-download__link[data-v-71791957] {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n.ele-modal-import__hint .import-hint__content[data-v-71791957] {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__left .anticon-upload[data-v-71791957] {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right[data-v-71791957] {\n margin-left: 16px;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__title[data-v-71791957] {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__sub-title[data-v-71791957] {\n font-size: 14px;\n color: var(--idooel-link-03);\n}\n.ele-modal-import__hint .import-footer__hint--text[data-v-71791957] {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\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-import/src/index.vue","index.vue"],"names":[],"mappings":"AAwGA;EACA,4BAAA;EACA,eAAA;EACA,eAAA;EACA,iBAAA;ACvGA;AD0GA;EACA,aAAA;EACA,kBAAA;EACA,YAAA;EACA,wCAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACvGA;ADyGA;EACA,eAAA;EACA,4BAAA;ACvGA;AD0GA;EACA,iBAAA;ACxGA;ADyGA;EACA,eAAA;EACA,4BAAA;EACA,eAAA;ACvGA;ADyGA;EACA,eAAA;EACA,4BAAA;ACvGA;AD2GA;EACA,eAAA;EACA,4BAAA;EACA,iBAAA;ACzGA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <ele-modal :value=\"innerValue\" :buttonGroupMeta=\"buttonGroupMeta\" @cancel=\"onCancel\" @handleClose=\"handleClose\" title=\"导入\">\n <div class=\"ele-modal-import__upload\" v-if=\"isFileEmpty\">\n <div class=\"import-download__link\" @click=\"handleClickDownloadTpl\">点击此链接下载导入模板</div>\n <ele-upload v-model=\"file\" icon=\"upload\" @on-success=\"uploadFileSuccess\"></ele-upload>\n </div>\n <div v-else class=\"ele-modal-import__hint\">\n <div class=\"import-hint__content\">\n <div class=\"import-hint__left\">\n <ele-icon type=\"upload\"></ele-icon>\n </div>\n <div class=\"import-hint__right\">\n <div class=\"hint-right__title\" @click=\"handleClickJump\">文件上传成功，任务处理中..... 请点击此按钮跳转到“批处理管理”菜单查看任务进度</div>\n <div class=\"hint-right__sub-title\">批处理任务的准备工作会在后台运行</div>\n </div>\n </div>\n <div class=\"import-footer__hint--text\">\n 您可以请点击上方按钮查看任务进度或关闭弹框\n </div>\n </div>\n </ele-modal>\n</template>\n\n<script>\nimport EleUpload from '../../../upload/src/index.vue'\nimport ELeIcon from '../../../icon/src/index.vue'\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-modal-import',\n components: {\n EleUpload,\n ELeIcon\n },\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n value: {\n type: Boolean,\n default: false\n }\n },\n data() {\n return {\n innerValue: false,\n file: [],\n buttonGroupMeta: {\n elements: [\n {\n label: '关闭',\n key: 'close',\n type: 'default',\n eventName: 'handleClose'\n }\n ]\n }\n }\n },\n computed: {\n isFileEmpty () {\n return type.isEmpty(this.file)\n }\n },\n watch: {\n value: {\n handler (value) {\n this.innerValue = value\n },\n immediate: true\n }\n },\n methods: {\n emitEvent (props = {}) {\n this.$emit('on-actions', { ...props })\n },\n onCancel () {\n this.innerValue = false\n this.$emit('change', false)\n },\n handleClickJump () {\n this.emitEvent({ action: 'jump' })\n },\n uploadFileSuccess (props) {\n this.emitEvent({ action: 'uploaded', file: props })\n },\n handleClickDownloadTpl () {\n this.emitEvent({ action: 'download' })\n },\n cleanFile () {\n this.file = []\n },\n handleClose () {\n this.cleanFile()\n this.innerValue = false\n this.$emit('change', false)\n }\n }\n}\n</script>\n<style lang=\"scss\">\n@import '../../../theme/index.scss';\n</style>\n<style lang=\"scss\" scoped>\n.import-download__link {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n.ele-modal-import__hint {\n .import-hint__content {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n .import-hint__left {\n .anticon-upload {\n font-size: 48px;\n color: var(--idooel-link-06);\n }\n }\n .import-hint__right {\n margin-left: 16px;\n .hint-right__title {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n }\n .hint-right__sub-title {\n font-size: 14px;\n color: var(--idooel-link-03);\n }\n }\n }\n .import-footer__hint--text {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\n }\n}\n</style>",".import-download__link {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n\n.ele-modal-import__hint .import-hint__content {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__left .anticon-upload {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right {\n margin-left: 16px;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__title {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__sub-title {\n font-size: 14px;\n color: var(--idooel-link-03);\n}\n.ele-modal-import__hint .import-footer__hint--text {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
6109
6113
|
|
|
6110
6114
|
};
|
|
6111
6115
|
/* scoped */
|
|
6112
|
-
const __vue_scope_id__$3 = "data-v-
|
|
6116
|
+
const __vue_scope_id__$3 = "data-v-71791957";
|
|
6113
6117
|
/* module identifier */
|
|
6114
6118
|
const __vue_module_identifier__$3 = undefined;
|
|
6115
6119
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@idooel/components",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.30",
|
|
4
4
|
"description": "",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/@idooel/components.umd.js",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"license": "ISC",
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"@idooel/expression": "0.0.1-beta.1",
|
|
20
|
-
"@idooel/shared": "0.0.1-beta.
|
|
20
|
+
"@idooel/shared": "0.0.1-beta.3",
|
|
21
21
|
"ant-design-vue": "1.7.8",
|
|
22
22
|
"moment": "^2.30.1",
|
|
23
23
|
"vue-upload-component": "<=2.8.11",
|