From 6090015aafa1058da8e1d0cf13988e2d70298752 Mon Sep 17 00:00:00 2001
From: Administrator <450292408@qq.com>
Date: Mon, 1 Nov 2021 03:38:26 +0000
Subject: [PATCH] docs: update wg-basic/page-unit

---
 wg-basic/page-unit.md | 59 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/wg-basic/page-unit.md b/wg-basic/page-unit.md
index 6626a7b..1607b19 100644
--- a/wg-basic/page-unit.md
+++ b/wg-basic/page-unit.md
@@ -2,7 +2,7 @@
 title: 页面组件
 description: 页面上使用的组件
 published: true
-date: 2021-10-21T12:07:28.001Z
+date: 2021-11-01T03:38:24.581Z
 tags: wg-basic
 editor: markdown
 dateCreated: 2021-09-08T06:41:19.351Z
@@ -237,7 +237,7 @@ table.on('tool(dataTable)', function(obj) {
             {{# } }}
             {{# 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">
+                <a href="javascript:void(0);" id="factoryGateUploadFile" 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>
@@ -340,6 +340,61 @@ function initFactoryGateUploadFile() {
 
 代码以厂区图片为例，实际只需要替换对应的内容即可：模板名称、模板BOX名称
 
+使用layui
+```js
+// 初始化健康码图片上传
+function initHealthCodeUploadFile() {
+  var files = $('#healthCode').val();
+  initFileList('healthCode', files, function(fileName) {
+    var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
+    viewerObj[fileName] = viewer;
+  });
+
+  // 这部分注意，与上面代码不同
+  function initUpload() {
+    upload.render({
+      elem: '#healthCodeUploadFile',
+      url: restAjax.path('app/file/upload-image-release/{userId}', [userId]),
+      field: 'image',
+      done: function(res) {
+        var dataset = this.item[0].dataset;
+        var name = dataset.name;
+        var files = $('#'+ name).val();
+        if(files.length > 0) {
+          files += ',';
+        }
+        files += res.data;
+        initFileList(name, files, function(fileName) {
+          viewerObj[fileName].update();
+        });
+      },
+      error: function() {
+        dialog.msg('图片上传异常')
+      }
+    });
+  }
+  initUpload();
+
+  form.on('button(healthCodeRemoveFile)', 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();
+      // 这里需要重新关联
+      initUpload();
+    });
+  });
+}
+```
+
 # 10. 选择用户
 ```javascript
 top.dialog.dialogData.selectedUserIds = $('#selectedUserIds').val();