xxyj · CodeLittlePrince · May 11, 2018 · May 11, 2018 · May 14, 2018 · May 14, 2018
diff --git a/src/js/components/form/JRUpload/components/FileUnit/index.html b/src/js/components/form/JRUpload/components/FileUnit/index.html
@@ -1,7 +1,7 @@
 <div class="m-file-unit">
     <div class="m-content">
         {#if type === 'image'}
-            <div class="m-img-wrapper" on-click={this.onPreview()}>
+            <div class="m-img-wrapper" on-click={this.onPreview()} r-style={ {cursor: url && !closeonly? 'zoom-in' : 'auto'} }>
                 <img class="u-img" src={url}/>
             </div>
         {#elseif type === 'unknown'}
@@ -24,7 +24,7 @@
                         </span>
                     </span>
                 </span>
-            {#elseif status === 'success'}
+            {#elseif status === 'success' && url && !closeonly}
                 <span class="u-uploaded">
                     <a class="u-uploaded-zone" href={url} download={filename}>{this.$trans('DOWNLOAD_FILE')}<i class="u-icon u-icon-export"></i></a>
                 </span>

diff --git 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
@@ -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,25 +194,32 @@ 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];
     const { name, url, flag, destroyed } = unit;
 
     // 找到该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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -98,7 +98,16 @@ var component = new JRUI.Component({
 <div class="m-example"></div>
 
 ```xml
-<jr-upload action='https://nos.kaolafed.com/upload' num-max={2}></jr-upload>
+<jr-upload action='https://nos.kaolafed.com/upload' num-max={1}></jr-upload>
+```
+<!-- demo_end -->
+
+<!-- demo_start -->
+### 文件上传后不提供放大和下载功能
+<div class="m-example"></div>
+
+```xml
+<jr-upload closeonly={true} action='https://nos.kaolafed.com/upload' num-max={2}></jr-upload>
 ```
 <!-- demo_end -->