docs: update wg-basic/page-unit

wg-basic/page-unit.md

@@ -2,13 +2,13 @@
 title: 页面组件
 description: 页面上使用的组件
 published: true
-date: 2022-01-17T04:25:26.729Z
+date: 2022-02-11T03:00:14.821Z
 tags: wg-basic
 editor: markdown
 dateCreated: 2021-09-08T06:41:19.351Z
 ---
 
-# 1. 表单下拉列表
+# 表单下拉列表
 
 ```html
 <div class="layui-form-item">    
@@ -23,7 +23,7 @@ dateCreated: 2021-09-08T06:41:19.351Z
 </div>
 ```
 
-# 2. 表单下拉联动
+# 表单下拉联动
 
 ```html
 <div class="layui-form-item">    
@@ -120,7 +120,7 @@ form.on('select(area1)', function(data) {
 });
 ```
 
-# 3. 表单单选
+# 表单单选
 
 ```html
 <div class="layui-form-item" pane>    
@@ -132,7 +132,7 @@ form.on('select(area1)', function(data) {
 </div>
 ```
 
-# 4. 表单多选
+# 表单多选
 
 ```html
 <div class="layui-form-item" pane>    
@@ -166,7 +166,7 @@ for(var i = 0, item = authorizedGrantTypes[i]; item = authorizedGrantTypes[i++];
 form.render(null, 'dataForm');
 ```
 
-# 5. 表单下拉、单选、复选统一处理
+# 表单下拉、单选、复选统一处理
 
 ```javascript
 // 初始化选择框、单选、复选模板
@@ -181,7 +181,7 @@ function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callba
 }
 ```
 
-# 6. viewer，具体是用参考官方API
+# viewer，具体是用参考官方API
 
 ```html
 <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
@@ -191,7 +191,7 @@ new Viewer(document.getElementById('boxId'), {navbar: true});
 </script>
 ```
 
-# 7. 列表按钮
+# 列表按钮
 
 ```javascript
 // 单按钮
@@ -222,13 +222,13 @@ table.on('tool(dataTable)', function(obj) {
 });
 ```
 
-# 8. 选择人员（表格）
+# 选择人员（表格）
 
 ```javascript
 
 ```
 
-# 9. 文件上传（图片示例）
+# 文件上传（图片示例）
 
 依赖
 
@@ -422,7 +422,7 @@ function initHealthCodeUploadFile() {
 }
 ```
 
-# 10. 选择用户
+# 选择用户
 
 ```javascript
 top.dialog.dialogData.selectedUserIds = $('#selectedUserIds').val();
@@ -444,7 +444,7 @@ top.dialog.open({
 1. `top.dialog.dialogData.selectedUserIds` 的值为 **下划线** 分割的ID
 2. 返回的列表中可以获取：userId，userName
 
-# 11. 选择地区
+# 选择地区
 
 ```html
 <div class="layui-form-item">
@@ -485,7 +485,68 @@ top.dialog.open({
 1. 打开页面时的参数 **areaName** 用于回显，可以不传。
 2. 返回的列表中可以获取：areaId，areaName，areaCode
 
-# 12.列表下拉选择
+# 选择地区（带按钮）
+
+样式可根据实际情况调整
+
+```html
+<style>
+  .table-select-area {position: relative; width: 200px;}
+  .table-select-area #areaName {width: 64%}
+  .table-select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
+</style>
+```
+
+```html
+<div class="layui-inline table-select-area">
+  <input type="hidden" id="areaCode">
+  <input type="text" id="areaName" class="layui-input search-item search-item-width-300" placeholder="选择地区" readonly>
+  <div class="layui-btn-group select-btn">
+    <button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary">
+      <i class="fa fa-circle-thin"></i>
+    </button>
+    <button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary">
+      <i class="fa fa-times-circle"></i>
+    </button>
+  </div>
+</div>
+```
+
+```js
+(function() {
+  $(document).on('click', '#areaSelectBtn', function() {
+    top.dialog.open({
+      title: '选择地区',
+      url: top.restAjax.path('route/area/get-select', []),
+      width: '600px',
+      height: '225px',
+      onClose: function() {
+        var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
+        var areaCode = '';
+        var areaName = '';
+        if(selectedAreaArray.length > 0) {
+          areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
+          for(var i = 0, item; item = selectedAreaArray[i++];) {
+            if(areaName) {
+              areaName += ',';
+            }
+            areaName += item.areaName;
+          }
+          $('#areaCode').val(areaCode);
+          $('#areaName').val(areaName);
+        }
+      }
+    })
+  });
+  $(document).on('click', '#areaCleanBtn', function () {
+    $('#areaCode').val('');
+    $('#areaName').val('');
+  })
+})()
+```
+
+
+# 列表下拉选择
 
 位置：`<div class="test-table-reload-btn"></div>` 里
 
@@ -544,14 +605,14 @@ form.on('select(typeFilter)', function(data) {
 });
 ```
 
-# 13.url中query参数集合对象
+# url中query参数集合对象
 
 ```javascript
 var params = top.restAjax.params(window.location.href);
 var xxx = params.xxx;
 ```
 
-# 14.列表选择
+# 列表选择
 
 > 这里只是示例，具体的参数、变量需根据实际情况修改
 {.is-warning}