diff --git a/src/js/components/form/JRUpload/components/FileUnit/index.html b/src/js/components/form/JRUpload/components/FileUnit/index.html index 31837d35..72648e80 100644 --- a/src/js/components/form/JRUpload/components/FileUnit/index.html +++ b/src/js/components/form/JRUpload/components/FileUnit/index.html @@ -1,7 +1,7 @@
{#if type === 'image'} -
+
{#elseif type === 'unknown'} @@ -24,7 +24,7 @@ - {#elseif status === 'success'} + {#elseif status === 'success' && url && !closeonly} {this.$trans('DOWNLOAD_FILE')} diff --git a/src/js/components/form/JRUpload/components/FileUnit/index.js b/src/js/components/form/JRUpload/components/FileUnit/index.js index 08e292c9..f9089576 100644 --- a/src/js/components/form/JRUpload/components/FileUnit/index.js +++ b/src/js/components/form/JRUpload/components/FileUnit/index.js @@ -19,6 +19,7 @@ const FileUnit = Component.extend({ name: '', readonly: false, data: {}, + closeonly: false, }); _.extend(data, { @@ -170,13 +171,16 @@ const FileUnit = Component.extend({ onPreview(e) { const data = this.data; - const emitItem = { - sender: this, - event: e, - file: data.file, - status: data.status, - }; - this.$emit('preview', emitItem); + // 如果url不存在,或closeonly为true,则不允许预览 + if (data.url && !data.closeonly) { + const emitItem = { + sender: this, + event: e, + file: data.file, + status: data.status, + }; + this.$emit('preview', emitItem); + } }, }); diff --git a/src/js/components/form/JRUpload/components/UploadBase/index.js b/src/js/components/form/JRUpload/components/UploadBase/index.js index 86b56695..ed93d49b 100644 --- a/src/js/components/form/JRUpload/components/UploadBase/index.js +++ b/src/js/components/form/JRUpload/components/UploadBase/index.js @@ -22,6 +22,8 @@ const JRImagePreview = require('../../../../widget/JRImagePreview'); * url: 文件的路径 * flag: 0, 新增的文件; 1, 已经上传未被删除的文件,2,已经上传被删除的文件 * @param {string} [options.data.name] => 可选,上传的文件字段名, 默认为'file' + * @param {object} [options.data.headers] => 可选,设置上传的请求头部 + * @param {object} [options.data.with-credentials=false] => 可选,支持发送 cookie 凭证信息, 默认false * @param {boolean} [options.data.multiple] => 可选,是否支持多选, 可选值true/false,默认false单选 * @param {object} [options.data.data] => 可选,上传时附带的额外参数 * @param {boolean} [options.data.drag] => 可选,是否支持拖拽上传,可选值true/false,默认false不支持拖拽 @@ -34,6 +36,7 @@ const JRImagePreview = require('../../../../widget/JRImagePreview'); * @param {number} [options.data.max-size] => 可选,上传文件大小的最大允许值, 支持数值大小以及KB,MB,GB为单元的指定 * @param {boolean} [options.data.readonly] => 可选,是否开启预览模式,可选值true/false,true预览模式,只能预览和下载图片, * 默认false,允许上传和删除图片 + * @param {boolean} [options.data.closeonly=false] => 可选,是否不允许放大预览和下载 * @param {number} [options.data.image-width] => 可选,指定上传图片文件的宽度, 值为数值,单位为px,如800 * @param {number} [options.data.image-height] => 可选,指定上传图片文件的高度, 值为数值,单位为px, 如600 * @param {string} [options.data.image-scale] => 可选,指定上传图片文件的宽高比, 值为冒号分隔的宽高比例字符串,如'4:3' @@ -46,6 +49,8 @@ const UploadBase = Component.extend({ _.extend(data, { action: '', name: 'file', + headers: {}, + withCredentials: false, multiple: false, data: {}, drag: false, @@ -57,6 +62,7 @@ const UploadBase = Component.extend({ numPerline: Infinity, maxSize: Config.sizeMap.GB, readonly: false, + closeonly: false, imageWidth: Infinity, imageHeight: Infinity, imageScale: '', @@ -170,6 +176,7 @@ const UploadBase = Component.extend({ flag: file.flag, uid: file.uid, status: 'success', + class: file.class || '', }; if (fileunit.flag !== Config.flagMap.DELETED) { @@ -187,8 +194,9 @@ const UploadBase = Component.extend({ updateFileList(info) { const data = this.data; const uid = info.file.uid; - const { fileList, fileUnitList } = data; + const { fileUnitList } = data; + const fileList = JSON.parse(JSON.stringify(data.fileList)); // 找到触发更新的unit单元 const unitIndex = fileUnitList.findIndex(item => uid === item.uid); const unit = fileUnitList[unitIndex]; @@ -196,16 +204,22 @@ const UploadBase = Component.extend({ // 找到该unit单元在fileList中的位置 const fileIndex = fileList.findIndex(item => uid === item.uid); - if (fileIndex === -1) { + if (fileIndex === -1 && (unit.status === 'success' || unit.status === 'wait')) { // fileList中不存在该单元数据,新增数据 + // 只有当上传成功时才更新fileList fileList.push({ name, url, flag, uid }); } else if (flag === Config.flagMap.DELETED) { - fileList[fileIndex].flag = Config.flagMap.DELETED; + if (fileIndex !== -1) { + fileList[fileIndex].flag = Config.flagMap.DELETED; + } fileUnitList.splice(unitIndex, 1); } else if (destroyed) { - fileList.splice(fileIndex, 1); + if (fileIndex !== -1) { + fileList.splice(fileIndex, 1); + } fileUnitList.splice(unitIndex, 1); } + data.fileList = fileList; if (!data.autoUpload) { this.initFormData(); } @@ -313,7 +327,10 @@ const UploadBase = Component.extend({ onPreview(info) { const current = info.file; - + this.$emit('preview', info); + if (current.type !== 'image') { + return; + } function filterImgFile(file) { return file.type === 'image'; } @@ -429,6 +446,7 @@ const UploadBase = Component.extend({ url: opts.action, name: opts.name, readonly: opts.readonly, + closeonly: opts.closeonly, data: opts.data, }; }, @@ -546,7 +564,8 @@ const UploadBase = Component.extend({ Object.keys(typeMap).forEach((key) => { const reg = new RegExp(`${key}$`); - if (reg.test(type) || (!type && reg.test(name))) { + // 名称后缀不区分大小写 + if (reg.test(type) || reg.test(`${name}`.toLowerCase())) { typeStr = typeMap[key]; } }); diff --git a/src/js/components/form/JRUpload/components/UploadCard/index.html b/src/js/components/form/JRUpload/components/UploadCard/index.html index d34d1649..10484933 100644 --- a/src/js/components/form/JRUpload/components/UploadCard/index.html +++ b/src/js/components/form/JRUpload/components/UploadCard/index.html @@ -43,6 +43,7 @@ name={name} status={fileunit.status} readonly={readonly} + closeonly={closeonly} data={data} onLoadInterceptor={onLoadInterceptor} onErrorInterceptor={onErrorInterceptor} diff --git a/src/js/components/form/JRUpload/components/UploadList/index.html b/src/js/components/form/JRUpload/components/UploadList/index.html index ea691a35..aa195610 100644 --- a/src/js/components/form/JRUpload/components/UploadList/index.html +++ b/src/js/components/form/JRUpload/components/UploadList/index.html @@ -15,6 +15,7 @@ name={name} status={fileunit.status} readonly={readonly} + closeonly={closeonly} data={data} autoUpload={autoUpload} onLoadInterceptor={onLoadInterceptor} diff --git a/src/js/components/form/JRUpload/index.html b/src/js/components/form/JRUpload/index.html index 7d09d9ec..8f955365 100644 --- a/src/js/components/form/JRUpload/index.html +++ b/src/js/components/form/JRUpload/index.html @@ -14,6 +14,7 @@ numPerline={numPerline} maxSize={maxSize} readonly={readonly} + closeonly={closeonly} imageWidth={imageWidth} imageHeight={imageHeight} imageScale={imageScale} diff --git a/src/js/components/form/JRUpload/index.js b/src/js/components/form/JRUpload/index.js index 075cff64..80c261ee 100644 --- a/src/js/components/form/JRUpload/index.js +++ b/src/js/components/form/JRUpload/index.js @@ -34,6 +34,7 @@ const tpl = require('./index.html'); * @param {string} [options.data.max-size=1GB] => 可选,上传文件大小的最大允许值, 支持数值大小以及KB,MB,GB为单元的指定 * @param {boolean} [options.data.readonly=false] => 可选,是否开启预览模式,可选值true/false,true预览模式,只能预览和下载图片, * 默认false,允许上传和删除图片 + * @param {boolean} [options.data.closeonly=false] => 可选,是否不允许放大预览和下载 * @param {boolean} [options.data.hideTip=false] => 是否显示校验错误信息,默认false显示 * @param {number} [options.data.image-width] => 可选,指定上传图片文件的宽度, 值为数值,单位为px,如800 * @param {number} [options.data.image-height] => 可选,指定上传图片文件的高度, 值为数值,单位为px, 如600 @@ -69,6 +70,7 @@ const JRUpload = Component.extend({ numPerline: Infinity, maxSize: Config.sizeMap.GB, readonly: false, + closeonly: false, hideTip: false, imageWidth: Infinity, imageHeight: Infinity, diff --git a/src/js/components/form/JRUpload/index.md b/src/js/components/form/JRUpload/index.md index 34b58a4c..7b1f07e9 100644 --- a/src/js/components/form/JRUpload/index.md +++ b/src/js/components/form/JRUpload/index.md @@ -98,7 +98,16 @@ var component = new JRUI.Component({
```xml - + +``` + + + +### 文件上传后不提供放大和下载功能 +
+ +```xml + ```