docs: update wg-basic/page-unit

wg-basic/page-unit.md

@@ -2,7 +2,7 @@
 title: 页面组件
 description: 页面上使用的组件
 published: true
-date: 2021-09-08T06:49:56.594Z
+date: 2021-09-08T06:50:38.758Z
 tags: wg-basic
 editor: markdown
 dateCreated: 2021-09-08T06:41:19.351Z
@@ -215,4 +215,135 @@ top.dialog.open({
 });
 ```
 # 9. 文件上传（图片示例）
+依赖
+```html
+<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
+<script src="assets/js/vendor/viewer/viewer.min.js"></script>
+```
 
+表单代码
+```html
+<div class="layui-form-item layui-form-text">
+    <label class="layui-form-label">厂区大门</label>
+    <div class="layui-input-block">
+        <input type="hidden" id="factoryGate" name="factoryGate">
+        <div class="layui-btn-container" id="factoryGateFileBox" style="border: 1px solid #e6e6e6;"></div>
+        <script id="factoryGateFileDownload" type="text/html">
+            {{# var fileName = 'factoryGate'; }}
+            {{# if(d[fileName].length > 0) { }}
+            {{#    var files = d[fileName];}}
+            {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
+            <div class="upload-image-box">
+                <span class="upload-image-span">
+                    <img src="route/file/downloadfile/true/{{item.fileId}}" align="加载失败">
+                </span>
+                <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="factoryGateRemoveFile">
+                    <i class="fa fa-trash-o"></i>
+                </a>
+            </div>
+            {{#    } }}
+            {{# } }}
+            {{# if(d[fileName].length < 9) { }}
+            <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
+                <a href="javascript:void(0);" lay-form-button data-explain="厂区大门" data-name="factoryGate" lay-filter="factoryGateUploadFile">
+                    <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
+                </a>
+            </div>
+            {{# } }}
+        </script>
+    </div>
+</div>
+```
+
+js代码
+```js
+var viewerObj = {};
+
+function refreshDownloadTemplet(fileName, file) {
+    var dataRander = {};
+    dataRander[fileName] = file;
+
+    laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
+        document.getElementById(fileName +'FileBox').innerHTML = html;
+    });
+}
+
+// 初始化文件列表
+function initFileList(fileName, ids, callback) {
+    var dataForm = {};
+    dataForm[fileName] = ids;
+    form.val('dataForm', dataForm);
+
+    if(!ids) {
+        refreshDownloadTemplet(fileName, []);
+        if(callback) {
+            callback(fileName, []);
+        }
+        return;
+    }
+
+    top.restAjax.get(top.restAjax.path('api/file/listfilebyfileid', []), {
+        ids: ids
+    }, null, function(code, data) {
+        refreshDownloadTemplet(fileName, data);
+        if(callback) {
+            callback(fileName, data);
+        }
+    }, function(code, data) {
+        top.dialog.msg(data.msg);
+    });
+}
+
+function initFactoryGateUploadFile() {
+    var files = $('#factoryGate').val();
+    initFileList('factoryGate', files, function(fileName) {
+        var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
+        viewerObj[fileName] = viewer;
+    });
+
+    form.on('button(factoryGateUploadFile)', function(obj) {
+        var name = this.dataset.name;
+        var explain = this.dataset.explain;
+        top.dialog.file({
+            type: 'image',
+            title: '上传'+ explain,
+            width: '400px',
+            height: '420px',
+            maxFileCount: '1',
+            onClose: function() {
+                var uploadFileArray = top.dialog.dialogData.uploadFileArray;
+                if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
+                    var files = $('#'+ name).val();
+                    for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
+                        if(files.length > 0) {
+                            files += ',';
+                        }
+                        files += file.data;
+                    }
+                    initFileList(name, files, function(fileName) {
+                        viewerObj[fileName].update();
+                    });
+                }
+            }
+        });
+    });
+
+    form.on('button(factoryGateRemoveFile)', function(obj) {
+        var name = this.dataset.name;
+        var id = this.dataset.id;
+        var files = $('#'+ name).val().replace(id, '');
+        files = files.replace(/\,+/g, ',');
+        if(files.charAt(0) == ',') {
+            files = files.substring(1);
+        }
+        if(files.charAt(files.length - 1) == ',') {
+            files = files.substring(0, files.length - 1);
+        }
+        initFileList(name, files, function(fileName) {
+            viewerObj[fileName].update();
+        });
+    });
+}
+```
+
+代码以厂区图片为例，实际只需要替换对应的内容即可：模板名称、模板BOX名称