增加表单上传文件下载功能

resources/assets/dcat/extra/Upload/AddFile.js

@@ -42,8 +42,9 @@ export default class AddFile {
                 `);
 
             $btns = $(`
-<span style="right: 45px;" class="file-action d-none" data-file-act='order' data-order="1"><i class='feather icon-arrow-up'></i></span>
-<span style="right: 25px;" class="file-action d-none" data-file-act='order' data-order="0"><i class='feather icon-arrow-down'></i></span>
+<span style="right: 65px;" class="file-action d-none" data-file-act='order' data-order="1"><i class='feather icon-arrow-up'></i></span>
+<span style="right: 45px;" class="file-action d-none" data-file-act='order' data-order="0"><i class='feather icon-arrow-down'></i></span>
+<span style="right: 25px;" class="file-action d-none" data-file-act='download' data-id=''><i class='feather icon-download-cloud'></i></span>
 <span data-file-act="cancel" class="file-action" style="font-size:13px">
     <i class="feather icon-x red-dark"></i>
 </span>
@@ -236,6 +237,10 @@ export default class AddFile {
 
                     helper.orderFiles($(this));
 
+                    break;
+                case 'download':
+                    window.open($(this).attr('data-id'));
+
                     break;
             }
 

resources/assets/dcat/extra/Upload/AddUploadedFile.js

@@ -1,167 +1,180 @@
-
-export default class AddUploadedFile {
-    constructor(Uploder) {
-        this.uploader = Uploder;
-
-        // 已上传的文件
-        this.uploadedFiles = [];
-
-        this.init = false;
-    }
-
-    // 渲染已上传文件
-    render(file) {
-        let _this = this,
-            parent =  _this.uploader,
-            options = parent.options,
-            showImg = parent.isImage(),
-            html = "";
-
-        html += "<li title='" + file.serverPath + "'>";
-
-        if (! showImg && options.sortable) {
-            // 文件排序
-            html += `
-<p style="right: 45px" class="file-action" data-file-act='order' data-order="1" data-id='${file.serverId}'><i class='feather icon-arrow-up'></i></p>
-<p style="right: 25px" class="file-action" data-file-act='order' data-order="0" data-id='${file.serverId}'><i class='feather icon-arrow-down'></i></p>
-`;
-        }
-
-        if (showImg) {
-            html += `<p class='imgWrap'><img src='${file.serverUrl}'></p>`
-        } else if (!options.disabled) {
-            html += `<p class="file-action" data-file-act="delete" data-id="${file.serverId}"><i class="feather icon-trash red-dark"></i></p>`;
-        }
-
-        html += "<p class='title' style=''><i class='feather icon-check text-white icon-success text-white'></i>";
-        html += file.serverPath;
-        html += "</p>";
-
-        if (showImg) {
-            html += "<p class='title' style='margin-bottom:20px;'>&nbsp;</p>";
-            html += "<div class='file-panel' >";
-
-            if (!options.disabled) {
-                html += `<a class='btn btn-sm btn-white' data-file-act='deleteurl' data-id='${file.serverId}'><i class='feather icon-trash red-dark' style='font-size:13px'></i></a>`;
-            }
-            html += `<a class='btn btn-sm btn-white' data-file-act='preview' data-url='${file.serverUrl}' ><i class='feather icon-zoom-in'></i></a>`;
-
-            if (options.sortable) {
-                // 文件排序
-                html += `
-<a class='btn btn-sm btn-white' data-file-act='order' data-order="1" data-id='${file.serverId}'><i class='feather icon-arrow-up'></i></a>
-<a class='btn btn-sm btn-white' data-file-act='order' data-order="0" data-id='${file.serverId}'><i class='feather icon-arrow-down'></i></a>
-`;
-            }
-
-            html += "</div>";
-        } else {
-
-        }
-
-        html += "</li>";
-        html = $(html);
-
-        if (!showImg) {
-            html.find('.file-type').show();
-            html.find('.title').show();
-            parent.$wrapper.css('background', 'transparent');
-        }
-
-        // 删除操作
-        let deleteFile = function () {
-            var fileId = $(this).data('id');
-
-            // 本地删除
-            if (options.removable) {
-                html.remove();
-
-                return _this.removeFormFile(fileId);
-            }
-
-            // 发起删除请求
-            parent.request.delete({serverId: fileId}, function () {
-                // 移除
-                html.remove();
-
-                _this.removeFormFile(fileId);
-            });
-        };
-
-        // 删除按钮点击事件
-        html.find('[data-file-act="deleteurl"]').click(deleteFile);
-        html.find('[data-file-act="delete"]').click(deleteFile);
-
-        // 文件排序
-        if (options.sortable) {
-            html.find('[data-file-act="order"').click(function () {
-                parent.helper.orderFiles($(this));
-            });
-        }
-
-        // 图片预览
-        html.find('[data-file-act="preview"]').click(function () {
-            var url = $(this).data('url');
-
-            Dcat.helpers.previewImage(url);
-        });
-
-        parent.formFiles[file.serverId] = file;
-
-        parent.input.add(file.serverId);
-
-        parent.$files.append(html);
-
-        if (showImg) {
-            setTimeout(function () {
-                html.css('margin', '5px');
-            }, _this.init ? 0 : 400);
-
-            _this.init = 1;
-        }
-    }
-
-    // 重新渲染已上传的文件
-    reRender() {
-        for (let i in this.uploadedFiles) {
-            if (this.uploadedFiles[i]) {
-                this.render(this.uploadedFiles[i])
-            }
-        }
-    }
-
-    // 移除已上传文件
-    removeFormFile(fileId) {
-        if (!fileId) {
-            return;
-        }
-
-        let _this = this,
-            parent = _this.uploader,
-            uploader = _this.uploader,
-            file = parent.formFiles[fileId];
-
-        parent.input.delete(fileId);
-
-        delete parent.formFiles[fileId];
-
-        if (uploader && !file.fake) {
-            uploader.removeFile(file);
-        }
-
-        parent.status.switch('decrOriginalFileNum');
-        parent.status.switch('incrFileNumLimit');
-
-        if (! Dcat.helpers.len(parent.formFiles) && ! Dcat.helpers.len(parent.percentages)) {
-            parent.status.switch('pending');
-        }
-    }
-
-    add(file) {
-        if (!file.serverId || this.uploader.helper.searchUploadedFile(file.serverId) !== -1) {
-            return;
-        }
-
-        this.uploadedFiles.push(file)
-    }
-}
+
+export default class AddUploadedFile {
+    constructor(Uploder) {
+        this.uploader = Uploder;
+
+        // 已上传的文件
+        this.uploadedFiles = [];
+
+        this.init = false;
+    }
+
+    // 渲染已上传文件
+    render(file) {
+        let _this = this,
+            parent =  _this.uploader,
+            options = parent.options,
+            showImg = parent.isImage(),
+            html = "";
+
+        html += "<li title='" + file.serverPath + "'>";
+
+        if (! showImg && options.sortable) {
+            // 文件排序
+            html += `
+<p style="right: 65px" class="file-action" data-file-act='order' data-order="1" data-id='${file.serverId}'><i class='feather icon-arrow-up'></i></p>
+<p style="right: 45px" class="file-action" data-file-act='order' data-order="0" data-id='${file.serverId}'><i class='feather icon-arrow-down'></i></p>
+`;
+        }
+
+        // 下载
+        if (! showImg && options.downloadable) {
+            html += `
+<p style="right: 25px" class="file-action" data-file-act='download' data-id='${file.serverUrl}'><i class='feather icon-download-cloud'></i></p>
+`;
+        }
+
+        if (showImg) {
+            html += `<p class='imgWrap'><img src='${file.serverUrl}'></p>`
+        } else if (!options.disabled) {
+            html += `<p class="file-action" data-file-act="delete" data-id="${file.serverId}"><i class="feather icon-trash red-dark"></i></p>`;
+        }
+
+        html += "<p class='title' style=''><i class='feather icon-check text-white icon-success text-white'></i>";
+        html += file.serverPath;
+        html += "</p>";
+
+        if (showImg) {
+            html += "<p class='title' style='margin-bottom:20px;'>&nbsp;</p>";
+            html += "<div class='file-panel' >";
+
+            if (!options.disabled) {
+                html += `<a class='btn btn-sm btn-white' data-file-act='deleteurl' data-id='${file.serverId}'><i class='feather icon-trash red-dark' style='font-size:13px'></i></a>`;
+            }
+            html += `<a class='btn btn-sm btn-white' data-file-act='preview' data-url='${file.serverUrl}' ><i class='feather icon-zoom-in'></i></a>`;
+
+            if (options.sortable) {
+                // 文件排序
+                html += `
+<a class='btn btn-sm btn-white' data-file-act='order' data-order="1" data-id='${file.serverId}'><i class='feather icon-arrow-up'></i></a>
+<a class='btn btn-sm btn-white' data-file-act='order' data-order="0" data-id='${file.serverId}'><i class='feather icon-arrow-down'></i></a>
+`;
+            }
+
+            html += "</div>";
+        } else {
+
+        }
+
+        html += "</li>";
+        html = $(html);
+
+        if (!showImg) {
+            html.find('.file-type').show();
+            html.find('.title').show();
+            parent.$wrapper.css('background', 'transparent');
+        }
+
+        // 删除操作
+        let deleteFile = function () {
+            var fileId = $(this).data('id');
+
+            // 本地删除
+            if (options.removable) {
+                html.remove();
+
+                return _this.removeFormFile(fileId);
+            }
+
+            // 发起删除请求
+            parent.request.delete({serverId: fileId}, function () {
+                // 移除
+                html.remove();
+
+                _this.removeFormFile(fileId);
+            });
+        };
+
+        // 删除按钮点击事件
+        html.find('[data-file-act="deleteurl"]').click(deleteFile);
+        html.find('[data-file-act="delete"]').click(deleteFile);
+
+        // 文件排序
+        if (options.sortable) {
+            html.find('[data-file-act="order"]').click(function () {
+                parent.helper.orderFiles($(this));
+            });
+        }
+
+        if (options.downloadable) {
+            html.find('[data-file-act="download"]').click(function () {
+                window.open($(this).attr('data-id'));
+            });
+        }
+
+        // 图片预览
+        html.find('[data-file-act="preview"]').click(function () {
+            var url = $(this).data('url');
+
+            Dcat.helpers.previewImage(url);
+        });
+
+        parent.formFiles[file.serverId] = file;
+
+        parent.input.add(file.serverId);
+
+        parent.$files.append(html);
+
+        if (showImg) {
+            setTimeout(function () {
+                html.css('margin', '5px');
+            }, _this.init ? 0 : 400);
+
+            _this.init = 1;
+        }
+    }
+
+    // 重新渲染已上传的文件
+    reRender() {
+        for (let i in this.uploadedFiles) {
+            if (this.uploadedFiles[i]) {
+                this.render(this.uploadedFiles[i])
+            }
+        }
+    }
+
+    // 移除已上传文件
+    removeFormFile(fileId) {
+        if (!fileId) {
+            return;
+        }
+
+        let _this = this,
+            parent = _this.uploader,
+            uploader = _this.uploader,
+            file = parent.formFiles[fileId];
+
+        parent.input.delete(fileId);
+
+        delete parent.formFiles[fileId];
+
+        if (uploader && !file.fake) {
+            uploader.removeFile(file);
+        }
+
+        parent.status.switch('decrOriginalFileNum');
+        parent.status.switch('incrFileNumLimit');
+
+        if (! Dcat.helpers.len(parent.formFiles) && ! Dcat.helpers.len(parent.percentages)) {
+            parent.status.switch('pending');
+        }
+    }
+
+    add(file) {
+        if (!file.serverId || this.uploader.helper.searchUploadedFile(file.serverId) !== -1) {
+            return;
+        }
+
+        this.uploadedFiles.push(file)
+    }
+}

resources/assets/dcat/extra/upload.js

@@ -33,6 +33,7 @@ import AddUploadedFile from './Upload/AddUploadedFile'
                 disabled: false, // 禁止任何上传编辑
                 autoUpdateColumn: false,
                 removable: false, // 是否允许直接删除服务器图片
+                downloadable: false, // 是否允许下载文件
                 dimensions: {
                     // width: 100, // 图片宽限制
                     // height: 100, // 图片高限制
@@ -351,6 +352,11 @@ import AddUploadedFile from './Upload/AddUploadedFile'
             if (options.sortable) {
                 $li.find('[data-file-act="order"]').removeClass('d-none').show();
             }
+            if (options.downloadable) {
+                let $download = $li.find('[data-file-act="downloadable"]');
+                $download.removeClass('d-none').show();
+                $download.attr('data-id', obj.file.serverUrl);
+            }
         }
 
         // 预览

src/Admin.php

@@ -31,7 +31,7 @@ class Admin
     use HasAssets;
     use HasHtml;
 
-    const VERSION = '2.1.0-beta';
+    const VERSION = '2.1.1-beta';
 
     const SECTION = [
         // 往 <head> 标签内输入内容

src/Form/Field/WebUploader.php

@@ -196,6 +196,20 @@ trait WebUploader
         return $this;
     }
 
+    /**
+     * 是否允许下载文件.
+     *
+     * @param bool $value
+     *
+     * @return $this
+     */
+    public function downloadable(bool $value = true)
+    {
+        $this->options['downloadable'] = $value;
+
+        return $this;
+    }
+
     /**
      * 默认上传配置.
      *