修改区域选择方式

This commit is contained in:
WenG 2022-03-05 20:24:41 +08:00
parent 2cc11f5e67
commit 1308a27230
5 changed files with 203 additions and 107 deletions

View File

@ -12,6 +12,10 @@
<style> <style>
html, body {height: 100%;} html, body {height: 100%;}
.layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;} .layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;}
.select-area {position: relative;}
.select-area #departmentAreaName {width: 64%}
.select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
.select-area .select-btn button {height: 38px; width: 50%;}
</style> </style>
</head> </head>
<body> <body>
@ -141,9 +145,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12"> <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label layui-form-label-up">选择地区</label> <label class="layui-form-label layui-form-label-up">选择地区</label>
<div class="layui-input-block layui-input-block-down"> <div class="layui-input-block layui-input-block-down select-area">
<input type="hidden" id="departmentAreaCode" name="departmentAreaCode"> <input type="hidden" id="departmentAreaCode" name="departmentAreaCode">
<input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;"> <input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;">
<div class="layui-btn-group select-btn">
<button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="选择区域">
<i class="fa fa-circle-thin"></i>
</button>
<button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="删除区域">
<i class="fa fa-times-circle"></i>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -242,19 +254,21 @@
} }
} }
}); });
}) });
$('#departmentAreaName').on('click', function() { // 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({ top.dialog.open({
title: '选择地区', title: '选择地区',
url: top.restAjax.path('route/area/get-select?areaName={departmentAreaName}', [encodeURI($('#departmentAreaName').val())]), url: top.restAjax.path('route/area/get-select?areaName={areaName}', [encodeURI($('#departmentAreaName').val())]),
width: '600px', width: '600px',
height: '225px', height: '225px',
onClose: function() { onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray; var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = ''; var areaCode = '';
var areaName = ''; var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode; areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) { for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) { if(areaName) {
@ -262,12 +276,18 @@
} }
areaName += item.areaName; areaName += item.areaName;
} }
} $('#departmentAreaCode').val(areaCode);
$('#departmentAreaCode').val(departmentAreaCode);
$('#departmentAreaName').val(areaName); $('#departmentAreaName').val(areaName);
} }
}
}) })
}); });
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
$('.close').on('click', function() { $('.close').on('click', function() {
closeBox(); closeBox();

View File

@ -12,6 +12,10 @@
<style> <style>
html, body {height: 100%;} html, body {height: 100%;}
.layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;} .layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;}
.select-area {position: relative;}
.select-area #departmentAreaName {width: 64%}
.select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
.select-area .select-btn button {height: 38px; width: 50%;}
</style> </style>
</head> </head>
<body> <body>
@ -147,9 +151,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12"> <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label layui-form-label-up">选择地区</label> <label class="layui-form-label layui-form-label-up">选择地区</label>
<div class="layui-input-block layui-input-block-down"> <div class="layui-input-block layui-input-block-down select-area">
<input type="hidden" id="departmentAreaCode" name="departmentAreaCode"> <input type="hidden" id="departmentAreaCode" name="departmentAreaCode">
<input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;"> <input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;">
<div class="layui-btn-group select-btn">
<button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="选择区域">
<i class="fa fa-circle-thin"></i>
</button>
<button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="删除区域">
<i class="fa fa-times-circle"></i>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -245,17 +257,19 @@
closeBox(); closeBox();
}); });
$('#departmentAreaName').on('click', function() { // 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({ top.dialog.open({
title: '选择地区', title: '选择地区',
url: top.restAjax.path('route/area/get-select?areaName={departmentAreaName}', [encodeURI($('#departmentAreaName').val())]), url: top.restAjax.path('route/area/get-select?areaName={areaName}', [encodeURI($('#departmentAreaName').val())]),
width: '600px', width: '600px',
height: '225px', height: '225px',
onClose: function() { onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray; var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = ''; var areaCode = '';
var areaName = ''; var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode; areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) { for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) { if(areaName) {
@ -263,12 +277,17 @@
} }
areaName += item.areaName; areaName += item.areaName;
} }
} $('#departmentAreaCode').val(areaCode);
$('#departmentAreaCode').val(departmentAreaCode);
$('#departmentAreaName').val(areaName); $('#departmentAreaName').val(areaName);
} }
}
}) })
}); });
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
// 校验部门是否存在 // 校验部门是否存在
var checkDepartmentNameTimeout; var checkDepartmentNameTimeout;

View File

@ -12,6 +12,10 @@
<style> <style>
html, body {height: 100%;} html, body {height: 100%;}
.layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;} .layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;}
.select-area {position: relative;}
.select-area #departmentAreaName {width: 64%}
.select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
.select-area .select-btn button {height: 38px; width: 50%;}
</style> </style>
</head> </head>
<body> <body>
@ -154,9 +158,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12"> <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label layui-form-label-up">选择地区</label> <label class="layui-form-label layui-form-label-up">选择地区</label>
<div class="layui-input-block layui-input-block-down"> <div class="layui-input-block layui-input-block-down select-area">
<input type="hidden" id="departmentAreaCode" name="departmentAreaCode"> <input type="hidden" id="departmentAreaCode" name="departmentAreaCode">
<input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;"> <input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;">
<div class="layui-btn-group select-btn">
<button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="选择区域">
<i class="fa fa-circle-thin"></i>
</button>
<button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="删除区域">
<i class="fa fa-times-circle"></i>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -296,17 +308,19 @@
closeBox(); closeBox();
}); });
$('#departmentAreaName').on('click', function() { // 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({ top.dialog.open({
title: '选择地区', title: '选择地区',
url: top.restAjax.path('route/area/get-select?areaName={departmentAreaName}', [encodeURI($('#departmentAreaName').val())]), url: top.restAjax.path('route/area/get-select?areaName={areaName}', [encodeURI($('#departmentAreaName').val())]),
width: '600px', width: '600px',
height: '225px', height: '225px',
onClose: function() { onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray; var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = ''; var areaCode = '';
var areaName = ''; var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode; areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) { for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) { if(areaName) {
@ -314,12 +328,17 @@
} }
areaName += item.areaName; areaName += item.areaName;
} }
}
$('#departmentAreaCode').val(areaCode); $('#departmentAreaCode').val(areaCode);
$('#departmentAreaName').val(areaName); $('#departmentAreaName').val(areaName);
} }
}
}) })
}); });
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
var checkDepartmentNameTimeout; var checkDepartmentNameTimeout;
$(document).on('keydown', '#departmentName', function() { $(document).on('keydown', '#departmentName', function() {

View File

@ -12,6 +12,10 @@
<style> <style>
html, body {height: 100%;} html, body {height: 100%;}
.layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;} .layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;}
.select-area {position: relative;}
.select-area #departmentAreaName {width: 64%}
.select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
.select-area .select-btn button {height: 38px; width: 50%;}
</style> </style>
</head> </head>
<body> <body>
@ -137,9 +141,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12"> <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label layui-form-label-up">选择地区</label> <label class="layui-form-label layui-form-label-up">选择地区</label>
<div class="layui-input-block layui-input-block-down"> <div class="layui-input-block layui-input-block-down select-area">
<input type="hidden" id="departmentAreaCode" name="departmentAreaCode"> <input type="hidden" id="departmentAreaCode" name="departmentAreaCode">
<input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;"> <input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;">
<div class="layui-btn-group select-btn">
<button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="选择区域">
<i class="fa fa-circle-thin"></i>
</button>
<button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="删除区域">
<i class="fa fa-times-circle"></i>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -267,19 +279,21 @@
} }
} }
}); });
}) });
$('#departmentAreaName').on('click', function() { // 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({ top.dialog.open({
title: '选择地区', title: '选择地区',
url: top.restAjax.path('route/area/get-select?areaName={departmentAreaName}', [encodeURI($('#departmentAreaName').val())]), url: top.restAjax.path('route/area/get-select?areaName={areaName}', [encodeURI($('#departmentAreaName').val())]),
width: '600px', width: '600px',
height: '225px', height: '225px',
onClose: function() { onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray; var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = ''; var areaCode = '';
var areaName = ''; var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode; areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) { for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) { if(areaName) {
@ -287,12 +301,17 @@
} }
areaName += item.areaName; areaName += item.areaName;
} }
} $('#departmentAreaCode').val(areaCode);
$('#departmentAreaCode').val(departmentAreaCode);
$('#departmentAreaName').val(areaName); $('#departmentAreaName').val(areaName);
} }
}
}) })
}); });
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
$('.close').on('click', function() { $('.close').on('click', function() {
closeBox(); closeBox();

View File

@ -12,6 +12,10 @@
<style> <style>
html, body {height: 100%;} html, body {height: 100%;}
.layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;} .layui-form-select dl {max-height: 150px !important; z-index: 10010 !important;}
.select-area {position: relative;}
.select-area #departmentAreaName {width: 64%}
.select-area .select-btn {position: absolute; top: 0px; right: 0px; width: 36%; border-color: #e6e6e6;}
.select-area .select-btn button {height: 38px; width: 50%;}
</style> </style>
</head> </head>
<body> <body>
@ -154,9 +158,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12"> <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label layui-form-label-up">选择地区</label> <label class="layui-form-label layui-form-label-up">选择地区</label>
<div class="layui-input-block layui-input-block-down"> <div class="layui-input-block layui-input-block-down select-area">
<input type="hidden" id="departmentAreaCode" name="departmentAreaCode"> <input type="hidden" id="departmentAreaCode" name="departmentAreaCode">
<input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;"> <input type="text" id="departmentAreaName" name="departmentAreaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required" style="cursor:pointer;">
<div class="layui-btn-group select-btn">
<button type="button" id="areaSelectBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="选择区域">
<i class="fa fa-circle-thin"></i>
</button>
<button type="button" id="areaCleanBtn" class="layui-btn layui-btn-sm layui-btn-primary" title="删除区域">
<i class="fa fa-times-circle"></i>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -271,17 +283,19 @@
}); });
}); });
$('#departmentAreaName').on('click', function() { // 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({ top.dialog.open({
title: '选择地区', title: '选择地区',
url: top.restAjax.path('route/area/get-select?areaName={departmentAreaName}', [encodeURI($('#departmentAreaName').val())]), url: top.restAjax.path('route/area/get-select?areaName={areaName}', [encodeURI($('#departmentAreaName').val())]),
width: '600px', width: '600px',
height: '225px', height: '225px',
onClose: function() { onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray; var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = ''; var areaCode = '';
var areaName = ''; var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode; areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) { for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) { if(areaName) {
@ -289,12 +303,17 @@
} }
areaName += item.areaName; areaName += item.areaName;
} }
}
$('#departmentAreaCode').val(areaCode); $('#departmentAreaCode').val(areaCode);
$('#departmentAreaName').val(areaName); $('#departmentAreaName').val(areaName);
} }
}
}) })
}); });
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
// 提交表单 // 提交表单
form.on('submit(submitForm)', function(formData) { form.on('submit(submitForm)', function(formData) {