From 53a3ef2116e8e8db9fe7f4b54900bc1140aecc85 Mon Sep 17 00:00:00 2001
From: wanggeng <450292408@qq.com>
Date: Thu, 9 Sep 2021 23:25:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8C=BA=E5=9F=9F=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8=E9=80=89=E6=8B=A9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/route/AreaRouteController.java |   5 +
 .../resources/templates/area/get-select.html  | 288 ++++++++++++++++++
 2 files changed, 293 insertions(+)
 create mode 100644 module-dictionary/src/main/resources/templates/area/get-select.html
diff --git a/module-dictionary/src/main/java/ink/wgink/module/dictionary/controller/route/AreaRouteController.java b/module-dictionary/src/main/java/ink/wgink/module/dictionary/controller/route/AreaRouteController.java
index 3488e21a..158db370 100644
--- a/module-dictionary/src/main/java/ink/wgink/module/dictionary/controller/route/AreaRouteController.java
+++ b/module-dictionary/src/main/java/ink/wgink/module/dictionary/controller/route/AreaRouteController.java
@@ -42,4 +42,9 @@ public class AreaRouteController {
         return new ModelAndView("area/list");
     }
 
+    @GetMapping("get-select")
+    public ModelAndView getSelect() {
+        return new ModelAndView("area/get-select");
+    }
+
 }
diff --git a/module-dictionary/src/main/resources/templates/area/get-select.html b/module-dictionary/src/main/resources/templates/area/get-select.html
new file mode 100644
index 00000000..6c9e2b1b
--- /dev/null
+++ b/module-dictionary/src/main/resources/templates/area/get-select.html
@@ -0,0 +1,288 @@
+<!doctype html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base th:href="${#request.getContextPath() + '/'} ">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <style>
+        .layui-form-selected dl {max-height: 100px;}
+    </style>
+</head>
+<body>
+<div class="layui-fluid layui-anim layui-anim-fadein" style="padding: 0;">
+    <div class="layui-card">
+        <div class="layui-card-body" style="padding: 15px;">
+            <form class="layui-form" lay-filter="dataForm">
+                <div class="layui-row">
+                    <div class="layui-col-xs2">
+                        <div class="layui-form-item">
+                            <div id="area1IdSelectTemplateBox" lay-filter="area1IdSelectTemplateBox"></div>
+                            <script id="area1IdSelectTemplate" type="text/html">
+                                <select id="area1Id" name="area1Id" lay-filter="area1Id" lay-search>
+                                    <option value="">1级区域</option>
+                                    {{# for(var i = 0, item; item = d[i++];) { }}
+                                    <option value="{{item.areaId}}_{{item.areaCode}}_{{item.areaName}}">{{item.areaName}}</option>
+                                    {{# } }}
+                                </select>
+                            </script>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs2">
+                        <div class="layui-form-item">
+                            <div id="area2IdSelectTemplateBox" lay-filter="area2IdSelectTemplateBox"></div>
+                            <script id="area2IdSelectTemplate" type="text/html">
+                                <select id="area2Id" name="area2Id" lay-filter="area2Id" lay-search>
+                                    <option value="">2级区域</option>
+                                    {{# for(var i = 0, item; item = d[i++];) { }}
+                                    <option value="{{item.areaId}}_{{item.areaCode}}_{{item.areaName}}">{{item.areaName}}</option>
+                                    {{# } }}
+                                </select>
+                            </script>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs2">
+                        <div class="layui-form-item">
+                            <div id="area3IdSelectTemplateBox" lay-filter="area3IdSelectTemplateBox"></div>
+                            <script id="area3IdSelectTemplate" type="text/html">
+                                <select id="area3Id" name="area3Id" lay-filter="area3Id" lay-search>
+                                    <option value="">3级区域</option>
+                                    {{# for(var i = 0, item; item = d[i++];) { }}
+                                    <option value="{{item.areaId}}_{{item.areaCode}}_{{item.areaName}}">{{item.areaName}}</option>
+                                    {{# } }}
+                                </select>
+                            </script>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs2">
+                        <div class="layui-form-item">
+                            <div id="area4IdSelectTemplateBox" lay-filter="area4IdSelectTemplateBox"></div>
+                            <script id="area4IdSelectTemplate" type="text/html">
+                                <select id="area4Id" name="area4Id" lay-filter="area4Id" lay-search>
+                                    <option value="">4级区域</option>
+                                    {{# for(var i = 0, item; item = d[i++];) { }}
+                                    <option value="{{item.areaId}}_{{item.areaCode}}_{{item.areaName}}">{{item.areaName}}</option>
+                                    {{# } }}
+                                </select>
+                            </script>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs2">
+                        <div class="layui-form-item">
+                            <div id="area5IdSelectTemplateBox" lay-filter="area5IdSelectTemplateBox"></div>
+                            <script id="area5IdSelectTemplate" type="text/html">
+                                <select id="area5Id" name="area5Id" lay-filter="area5Id" lay-search>
+                                    <option value="">5级区域</option>
+                                    {{# for(var i = 0, item; item = d[i++];) { }}
+                                    <option value="{{item.areaId}}_{{item.areaCode}}_{{item.areaName}}">{{item.areaName}}</option>
+                                    {{# } }}
+                                </select>
+                            </script>
+                        </div>
+                    </div>
+                    <div class="layui-col-xs2">
+                        <button id="confirmBtn" type="button" class="layui-btn" style="width: 100%;">确定</button>
+                    </div>
+                </div>
+                <div class="layui-row">
+                    <div class="layui-col-xs12">
+                        <fieldset class="layui-elem-field layui-field-title">
+                            <legend>当前地区</legend>
+                            <div class="layui-field-box" id="currentAreaName"></div>
+                        </fieldset>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="assets/layuiadmin/layui/layui.js"></script>
+<script>
+    layui.config({
+        base: 'assets/layuiadmin/' //静态资源所在路径
+    }).extend({
+        index: 'lib/index' //主入口模块
+    }).use(['index', 'form', 'laytpl'], function(){
+        top.dialog.dialogData.selectedAreaArray = [];
+        var $ = layui.$;
+        var form = layui.form;
+        var laytpl = layui.laytpl;
+        var defaultAreaName = top.restAjax.params(window.location.href).areaName;
+
+        var selectedAreaArray = [];
+
+        function closeBox() {
+            top.dialog.dialogData.selectedAreaArray = selectedAreaArray;
+            parent.layer.close(parent.layer.getFrameIndex(window.name));
+        }
+
+        // 显示选择地区
+        function showAreaName() {
+            if(selectedAreaArray.length == 0) {
+                $('#currentAreaName').text(defaultAreaName ? decodeURI(defaultAreaName) : '无');
+                return;
+            }
+            var areaNames = '';
+            for(var i = 0, item; item = selectedAreaArray[i++];) {
+                if(areaNames.length > 0) {
+                    areaNames += ' / ';
+                }
+                areaNames += item.areaName;
+            }
+            $('#currentAreaName').text(areaNames);
+
+        }
+
+        // 初始化选择框、单选、复选模板
+        function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
+            laytpl(document.getElementById(templateId).innerHTML).render(data, function(html) {
+                document.getElementById(templateBoxId).innerHTML = html;
+            });
+            form.render('select');
+            if(callback) {
+                callback();
+            }
+        }
+
+        // 初始化1级区域下拉选择
+        function initArea1CodeSelect() {
+            top.restAjax.get(top.restAjax.path('api/area/listbyparentid/0', []), {}, null, function(code, data, args) {
+                initSelectRadioCheckboxTemplate('area1IdSelectTemplate', 'area1IdSelectTemplateBox', data);
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 初始化2级区域下拉选择
+        function initArea2CodeSelect(area1) {
+            if(!area1) {
+                initSelectRadioCheckboxTemplate('area2IdSelectTemplate', 'area2IdSelectTemplateBox', []);
+                return;
+            }
+            top.restAjax.get(top.restAjax.path('api/area/listbyparentid/{area1}', [area1]), {}, null, function(code, data, args) {
+                initSelectRadioCheckboxTemplate('area2IdSelectTemplate', 'area2IdSelectTemplateBox', data);
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 初始化3级区域下拉选择
+        function initArea3CodeSelect(area2) {
+            if(!area2) {
+                initSelectRadioCheckboxTemplate('area3IdSelectTemplate', 'area3IdSelectTemplateBox', []);
+                return;
+            }
+            top.restAjax.get(top.restAjax.path('api/area/listbyparentid/{area2}', [area2]), {}, null, function(code, data, args) {
+                initSelectRadioCheckboxTemplate('area3IdSelectTemplate', 'area3IdSelectTemplateBox', data);
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 初始化4级区域下拉选择
+        function initArea4CodeSelect(area3) {
+            if(!area3) {
+                initSelectRadioCheckboxTemplate('area4IdSelectTemplate', 'area4IdSelectTemplateBox', []);
+                return;
+            }
+            top.restAjax.get(top.restAjax.path('api/area/listbyparentid/{area3}', [area3]), {}, null, function(code, data, args) {
+                initSelectRadioCheckboxTemplate('area4IdSelectTemplate', 'area4IdSelectTemplateBox', data);
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 初始化5级区域下拉选择
+        function initArea5CodeSelect(area4) {
+            if(!area4) {
+                initSelectRadioCheckboxTemplate('area5IdSelectTemplate', 'area5IdSelectTemplateBox', []);
+                return;
+            }
+            top.restAjax.get(top.restAjax.path('api/area/listbyparentid/{area4}', [area4]), {}, null, function(code, data, args) {
+                initSelectRadioCheckboxTemplate('area5IdSelectTemplate', 'area5IdSelectTemplateBox', data);
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 初始化
+        function initData() {
+            initArea1CodeSelect();
+            initArea2CodeSelect();
+            initArea3CodeSelect();
+            initArea4CodeSelect();
+            initArea5CodeSelect();
+        }
+        initData();
+        showAreaName();
+
+        // 获取地区ID
+        function getAreaId(areaLevel, data) {
+            var areaId = data.value;
+            var index = areaLevel - 1;
+            if(areaId) {
+                var valueArray = data.value.split('_');
+                areaId = valueArray[0];
+                // 结果存在，替换，不存在新增
+                if(!selectedAreaArray[index]) {
+                    selectedAreaArray.push({
+                        areaId: valueArray[0],
+                        areaCode: valueArray[1],
+                        areaName: valueArray[2]
+                    });
+                } else {
+                    selectedAreaArray.splice(index, 1, {
+                        areaId: valueArray[0],
+                        areaCode: valueArray[1],
+                        areaName: valueArray[2]
+                    });
+                }
+            } else {
+                selectedAreaArray.splice(index, selectedAreaArray.length);
+            }
+            showAreaName();
+            return areaId;
+        }
+
+        // area1Id 选择事件
+        form.on('select(area1Id)', function(data) {
+            var areaId = getAreaId(1, data);
+            initArea2CodeSelect(areaId);
+            initArea3CodeSelect();
+            initArea4CodeSelect();
+            initArea5CodeSelect();
+        });
+        // area2Id 选择事件
+        form.on('select(area2Id)', function(data) {
+            var areaId = getAreaId(2, data);
+            initArea3CodeSelect(areaId);
+            initArea4CodeSelect();
+            initArea5CodeSelect();
+        });
+        // area3Id 选择事件
+        form.on('select(area3Id)', function(data) {
+            var areaId = getAreaId(3, data);
+            initArea4CodeSelect(areaId);
+            initArea5CodeSelect();
+        });
+        // area4Id 选择事件
+        form.on('select(area4Id)', function(data) {
+            var areaId = getAreaId(4, data);
+            initArea5CodeSelect(areaId);
+        });
+        // area5Id 选择事件
+        form.on('select(area5Id)', function(data) {
+            getAreaId(5, data);
+        });
+
+        $('#confirmBtn').on('click', function() {
+            closeBox();
+        });
+    });
+</script>
+</body>
+</html>
\ No newline at end of file
