docs: update wg-basic/page-unit

wg-basic/page-unit.md

@@ -2,7 +2,7 @@
 title: 页面组件
 description: 页面上使用的组件
 published: true
-date: 2021-09-08T06:45:19.292Z
+date: 2021-09-08T06:46:18.128Z
 tags: wg-basic
 editor: markdown
 dateCreated: 2021-09-08T06:41:19.351Z
@@ -148,4 +148,69 @@ for(var i = 0, item = authorizedGrantTypes[i]; item = authorizedGrantTypes[i++];
     form.val('dataForm', formObj);
 }
 form.render(null, 'dataForm');
+```
+# 5. 表单下拉、单选、复选统一处理
+```javascript
+// 初始化选择框、单选、复选模板
+function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {   
+    laytpl(document.getElementById(templateId).innerHTML).render(data, function(html) {       
+        document.getElementById(templateBoxId).innerHTML = html;    
+    });    
+    form.render('select', templateBoxId);    
+    if(callback) {
+        callback();    
+    }
+}
+```
+
+# 6. viewer，具体是用参考官方API
+```html
+<link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
+<script src="assets/js/vendor/viewer/viewer.min.js"></script>
+<script>
+new Viewer(document.getElementById('boxId'), {navbar: true});
+</script>
+```
+
+# 7. 列表按钮
+```javascript
+// 列表模板
+templet: function(item) {
+    return '<button type="button" class="layui-btn layui-btn-sm" lay-event="resetPasswordEvent"><i class="fa fa-key"></i> 重置密码</button>';
+}
+// 事件处理
+table.on('tool(dataTable)', function(obj) {
+    var layEvent = obj.event;
+    var data = obj.data;
+    if(layEvent === 'resetPasswordEvent') {
+        top.dialog.open({
+            url: top.restAjax.path('route/system/user/update-rest-password.html?userId={userId}', [data.userId]),
+            title: '【'+ data.userName +'】重置密码',
+            width: '320px',
+            height: '280px',
+            onClose: function() {
+                reloadTable();
+            }
+        });
+    }
+});
+```
+
+# 8.选择人员（表格）
+```javascript
+top.dialog.dialogData.oldSelectedUserList = [{userId:''}];
+top.dialog.open({
+    url: 'route/common/listselectuser?selectType=checkbox(radio)',
+    title: '选择用户',
+    width: '1000px',
+    height: '500px',
+    onClose: function() {
+        var newSelectedUserList = top.dialog.dialogData.newSelectedUserList;
+        if(newSelectedUserList.length != 0) {
+             // newSelectedUserList[0].userId;
+             // newSelectedUserList[0].userName;
+        }
+        top.dialog.dialogData.oldSelectedUserList = [];    
+    }
+});
 ```