docs: update wg-basic/page-unit

wg-basic/page-unit.md

@@ -2,13 +2,13 @@
 title: 页面组件
 description: 页面上使用的组件
 published: true
-date: 2021-09-08T06:41:19.351Z
+date: 2021-09-08T06:42:51.639Z
 tags: wg-basic
 editor: markdown
 dateCreated: 2021-09-08T06:41:19.351Z
 ---
 
-# 1. 表单下来列表
+# 1. 表单下拉列表
 ```html
 <div class="layui-form-item">    
     <label class="layui-form-label">类型</label>    
@@ -22,3 +22,80 @@ dateCreated: 2021-09-08T06:41:19.351Z
 </div>
 ```
 
+# 2. 表单下拉联动
+```html
+<div class="layui-form-item">    
+    <label class="layui-form-label">1级区域</label>    
+    <div class="layui-input-block layui-form" id="area1SelectTemplateBox" lay-filter="area1SelectTemplateBox"></div>
+    <script id="area1SelectTemplate" type="text/html">        
+        <select id="area1" name="area1" lay-filter="area1" disabled>            
+            <option value="">暂无1级区域</option>            
+            {{# for(var i = 0, item; item = d[i++];) { }}            
+            <option value="{{item.dictionaryId}}">{{item.dictionaryName}}</option>            
+            {{# } }}        
+        </select>    
+    </script>
+</div>
+
+<div class="layui-form-item">    
+    <label class="layui-form-label">2级区域</label>    
+    <div class="layui-input-block layui-form" id="area2SelectTemplateBox" lay-filter="area2SelectTemplateBox"></div>    
+    <script id="area2SelectTemplate" type="text/html">        
+        <select id="area2" name="area2" lay-filter="area2" disabled>            
+            <option value="">暂无2级区域</option>            
+            {{# for(var i = 0, item; item = d[i++];) { }}            
+            <option value="{{item.dictionaryId}}">{{item.dictionaryName}}</option>            
+            {{# } }}        
+        </select>    
+    </script>
+</div>
+```
+初始化
+```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();
+    }
+}
+
+// 初始化1级区域下拉选择
+function initArea1Select(selectValue) {    
+    top.restAjax.get(top.restAjax.path('api/datadictionary/listdictionarybyparentid/81583ade-5466-49aa-b7b6-c643c131ea34', []), {
+    }, null, function(code, data, args) {        
+        initSelectRadioCheckboxTemplate('area1SelectTemplate', 'area1SelectTemplateBox', data, function() {
+            var selectObj = {};            
+            selectObj['area1'] = selectValue;            
+            form.val('dataForm', selectObj);        
+        });    
+    }, function(code, data) {        
+        top.dialog.msg(data.msg);    
+    });
+}
+
+// 初始化2级区域下拉选择
+function initArea2Select(area1, selectValue) {
+    if(!area1) {        
+        initSelectRadioCheckboxTemplate('area2SelectTemplate', 'area2SelectTemplateBox', [], function() {
+            var selectObj = {};            
+            selectObj['area2'] = selectValue;            
+            form.val('dataForm', selectObj);        
+        });        
+        return;    
+    }    
+    top.restAjax.get(top.restAjax.path('api/datadictionary/listdictionarybyparentid/{area1}', [area1]), {
+    }, null, function(code, data, args) {
+        initSelectRadioCheckboxTemplate('area2SelectTemplate', 'area2SelectTemplateBox', data, function() {
+            var selectObj = {};
+            selectObj['area2'] = selectValue;
+            form.val('dataForm', selectObj);
+        });    
+    }, function(code, data) {
+        top.dialog.msg(data.msg);    
+    });
+}
+```