docs: update wg-basic/page-unit

wg-basic/page-unit.md

@@ -2,13 +2,14 @@
 title: 页面组件
 description: 页面上使用的组件
 published: true
-date: 2021-11-01T03:38:24.581Z
+date: 2021-11-11T07:02:04.098Z
 tags: wg-basic
 editor: markdown
 dateCreated: 2021-09-08T06:41:19.351Z
 ---
 
 # 1. 表单下拉列表
+
 ```html
 <div class="layui-form-item">    
     <label class="layui-form-label">类型</label>    
@@ -23,6 +24,7 @@ dateCreated: 2021-09-08T06:41:19.351Z
 ```
 
 # 2. 表单下拉联动
+
 ```html
 <div class="layui-form-item">    
     <label class="layui-form-label">1级区域</label>    
@@ -50,7 +52,9 @@ dateCreated: 2021-09-08T06:41:19.351Z
     </script>
 </div>
 ```
+
 初始化
+
 ```javascript
 // 统一渲染方法
 function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
@@ -99,19 +103,25 @@ function initArea2Select(area1, selectValue) {
     });
 }
 ```
+
 赋值初始化
+
 ```javascript
 initArea1Select(data['area1']);
 initArea2Select(data['area1'], data['area2']);
 ```
+
 联动
+
 ```javascript
 // area1 选择事件，多级联动继续添加
 form.on('select(area1)', function(data) {    
     initArea2Select(data.value);
 });
 ```
+
 # 3. 表单单选
+
 ```html
 <div class="layui-form-item" pane>    
     <label class="layui-form-label">名称</label>    
@@ -121,7 +131,9 @@ form.on('select(area1)', function(data) {
     </div>
 </div>
 ```
+
 # 4. 表单多选
+
 ```html
 <div class="layui-form-item" pane>    
     <label class="layui-form-label">授权模式 *</label>
@@ -134,12 +146,16 @@ form.on('select(area1)', function(data) {
     </div>
 </div>
 ```
+
 处理多选结果
+
 ```javascript
 var authorizedGrantTypes = top.restAjax.checkBoxToString(formData.field, 'authorizedGrantTypes');
 formData.field.authorizedGrantTypes = authorizedGrantTypes;
 ```
+
 赋值多选结果
+
 ```javascript
 var authorizedGrantTypes = data.authorizedGrantTypes.split(',');
 var formObj = {};
@@ -149,7 +165,9 @@ for(var i = 0, item = authorizedGrantTypes[i]; item = authorizedGrantTypes[i++];
 }
 form.render(null, 'dataForm');
 ```
+
 # 5. 表单下拉、单选、复选统一处理
+
 ```javascript
 // 初始化选择框、单选、复选模板
 function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {   
@@ -164,6 +182,7 @@ function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callba
 ```
 
 # 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>
@@ -173,6 +192,7 @@ new Viewer(document.getElementById('boxId'), {navbar: true});
 ```
 
 # 7. 列表按钮
+
 ```javascript
 // 单按钮
 templet: function(item) {
@@ -203,17 +223,22 @@ table.on('tool(dataTable)', function(obj) {
 ```
 
 # 8. 选择人员（表格）
+
 ```javascript
 
 ```
+
 # 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>
@@ -248,6 +273,7 @@ table.on('tool(dataTable)', function(obj) {
 ```
 
 js代码
+
 ```js
 var viewerObj = {};
 
@@ -341,6 +367,7 @@ function initFactoryGateUploadFile() {
 代码以厂区图片为例，实际只需要替换对应的内容即可：模板名称、模板BOX名称
 
 使用layui
+
 ```js
 // 初始化健康码图片上传
 function initHealthCodeUploadFile() {
@@ -396,6 +423,7 @@ function initHealthCodeUploadFile() {
 ```
 
 # 10. 选择用户
+
 ```javascript
 top.dialog.dialogData.selectedUserIds = $('#selectedUserIds').val();
 top.dialog.open({
@@ -411,11 +439,13 @@ top.dialog.open({
   }
 })
 ```
+
 说明：
 1. `top.dialog.dialogData.selectedUserIds` 的值为 **下划线** 分割的ID
 2. 返回的列表中可以获取：userId，userName
 
 # 11. 选择地区
+
 ```html
 <div class="layui-form-item">
   <label class="layui-form-label layui-form-label-up">选择地区</label>
@@ -425,6 +455,7 @@ top.dialog.open({
   </div>
 </div>
 ```
+
 ```javascript
 top.dialog.open({
   title: '选择地区',
@@ -449,6 +480,7 @@ top.dialog.open({
   }
 })
 ```
+
 说明：
 1. 打开页面时的参数 **areaName** 用于回显，可以不传。
 2. 返回的列表中可以获取：areaId，areaName，areaCode
@@ -460,6 +492,7 @@ top.dialog.open({
 引入：`var form = layui.form`
 
 1. 固定
+
 ```html
 <div class="layui-inline layui-form search-item">
   <select id="type" name="type" lay-filter="typeFilter">
@@ -486,6 +519,7 @@ top.dialog.open({
   </script>
 </div>
 ```
+
 ```javascript
 function initQuestionTypeSelect() {
   top.restAjax.get(top.restAjax.path('api/data/listbyparentid/a7d1ab3d-fbd2-48ca-bfb8-353cad9f3eba', []), {}, null, function(code, data, args) {
@@ -499,6 +533,7 @@ function initQuestionTypeSelect() {
 }
 ```
 3. 下拉选择事件
+
 ```javascript
 form.on('select(typeFilter)', function(data) {
   $('#choiceType').val('')
@@ -508,17 +543,21 @@ form.on('select(typeFilter)', function(data) {
   }
 });
 ```
+
 # 13.url中query参数集合对象
+
 ```javascript
 var params = top.restAjax.params(window.location.href);
 var xxx = params.xxx;
 ```
 
 # 14.列表选择
+
 > 这里只是示例，具体的参数、变量需根据实际情况修改
 {.is-warning}
 
 html：列表页面
+
 ```html
 <div class="layui-card">
   <div class="layui-card-body">
@@ -535,6 +574,7 @@ html：列表页面
   <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
 </div>
 ```
+
 ```javascript
 layui.config({
   base: 'assets/layuiadmin/'
@@ -734,7 +774,9 @@ layui.config({
   });
 });
 ```
+
 调用方式：其他页面
+
 ```javascript
 // 这里的列表数据格式根据实际情况变化
 top.dialog.dialogData.oldSelectedUserList = [{userId:''}];