修改区域选择方式

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>
html, body {height: 100%;}
.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>
</head>
<body>
@ -141,9 +145,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item">
<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="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>
@ -242,19 +254,21 @@
}
}
});
})
});
$('#departmentAreaName').on('click', function() {
// 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({
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',
height: '225px',
onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = '';
var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) {
@ -262,12 +276,18 @@
}
areaName += item.areaName;
}
}
$('#departmentAreaCode').val(departmentAreaCode);
$('#departmentAreaCode').val(areaCode);
$('#departmentAreaName').val(areaName);
}
}
})
});
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
$('.close').on('click', function() {
closeBox();

View File

@ -12,6 +12,10 @@
<style>
html, body {height: 100%;}
.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>
</head>
<body>
@ -147,9 +151,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item">
<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="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>
@ -245,17 +257,19 @@
closeBox();
});
$('#departmentAreaName').on('click', function() {
// 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({
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',
height: '225px',
onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = '';
var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) {
@ -263,12 +277,17 @@
}
areaName += item.areaName;
}
}
$('#departmentAreaCode').val(departmentAreaCode);
$('#departmentAreaCode').val(areaCode);
$('#departmentAreaName').val(areaName);
}
}
})
});
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
// 校验部门是否存在
var checkDepartmentNameTimeout;

View File

@ -12,6 +12,10 @@
<style>
html, body {height: 100%;}
.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>
</head>
<body>
@ -154,9 +158,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item">
<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="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>
@ -296,17 +308,19 @@
closeBox();
});
$('#departmentAreaName').on('click', function() {
// 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({
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',
height: '225px',
onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = '';
var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) {
@ -314,12 +328,17 @@
}
areaName += item.areaName;
}
}
$('#departmentAreaCode').val(areaCode);
$('#departmentAreaName').val(areaName);
}
}
})
});
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
var checkDepartmentNameTimeout;
$(document).on('keydown', '#departmentName', function() {

View File

@ -12,6 +12,10 @@
<style>
html, body {height: 100%;}
.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>
</head>
<body>
@ -137,9 +141,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item">
<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="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>
@ -267,19 +279,21 @@
}
}
});
})
});
$('#departmentAreaName').on('click', function() {
// 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({
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',
height: '225px',
onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = '';
var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) {
@ -287,12 +301,17 @@
}
areaName += item.areaName;
}
}
$('#departmentAreaCode').val(departmentAreaCode);
$('#departmentAreaCode').val(areaCode);
$('#departmentAreaName').val(areaName);
}
}
})
});
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
$('.close').on('click', function() {
closeBox();

View File

@ -12,6 +12,10 @@
<style>
html, body {height: 100%;}
.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>
</head>
<body>
@ -154,9 +158,17 @@
<div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
<div class="layui-form-item">
<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="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>
@ -271,17 +283,19 @@
});
});
$('#departmentAreaName').on('click', function() {
// 区域选择
(function() {
$('#areaSelectBtn').on('click', function() {
top.dialog.open({
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',
height: '225px',
onClose: function() {
var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
if(selectedAreaArray.length > 0) {
var areaCode = '';
var areaName = '';
if(selectedAreaArray.length > 0) {
areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
for(var i = 0, item; item = selectedAreaArray[i++];) {
if(areaName) {
@ -289,12 +303,17 @@
}
areaName += item.areaName;
}
}
$('#departmentAreaCode').val(areaCode);
$('#departmentAreaName').val(areaName);
}
}
})
});
$('#areaCleanBtn').on('click', function () {
$('#departmentAreaCode').val('');
$('#departmentAreaName').val('');
})
})();
// 提交表单
form.on('submit(submitForm)', function(formData) {