升级 area 省市级联组件, 修复多实例数据隔离问题, 优化级联策略
就眠仪式
parent
ff9f5622b3
commit
808198f15c
|
|
@ -22,11 +22,23 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
that.layarea.call(that, files);
|
||||
}
|
||||
, config: that.config
|
||||
, reload: that.reload
|
||||
, events: that.events
|
||||
}
|
||||
}
|
||||
, Class = function (options) {
|
||||
let that = this;
|
||||
that.config = $.extend({}, that.config, layarea.config, options);
|
||||
that.config = $.extend({}, {
|
||||
elem: '',
|
||||
data: {
|
||||
province: '',
|
||||
city: '',
|
||||
county: '',
|
||||
provinceCode: 0,
|
||||
cityCode: 0,
|
||||
countyCode: 0,
|
||||
}
|
||||
}, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
|
|
@ -3819,9 +3831,12 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
Class.prototype.config = {
|
||||
elem: '',
|
||||
data: {
|
||||
province: '--选择省--',
|
||||
city: '--选择市--',
|
||||
county: '--选择区--',
|
||||
province: '',
|
||||
city: '',
|
||||
county: '',
|
||||
provinceCode: 0,
|
||||
cityCode: 0,
|
||||
countyCode: 0,
|
||||
},
|
||||
change: function(result){}
|
||||
};
|
||||
|
|
@ -3831,13 +3846,18 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
Class.prototype.render = function () {
|
||||
let that = this, options = that.config;
|
||||
options.elem = $(options.elem);
|
||||
options.bindAction = $(options.bindAction);
|
||||
|
||||
that.events();
|
||||
};
|
||||
|
||||
Class.prototype.reload = function (op) {
|
||||
let options = this.config;
|
||||
options.data = $.extend(options.data, op.data || {});
|
||||
this.events(true);
|
||||
};
|
||||
|
||||
Class.prototype.events = function () {
|
||||
let that = this, options = that.config, index;
|
||||
Class.prototype.events = function (reload = false) {
|
||||
let that = this, options = that.config;
|
||||
let provinceFilter = 'province-' + layarea._id;
|
||||
let cityFilter = 'city-' + layarea._id;
|
||||
let countyFilter = 'county-' + layarea._id;
|
||||
|
|
@ -3845,7 +3865,15 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
let provinceEl = options.elem.find('.province-selector');
|
||||
let cityEl = options.elem.find('.city-selector');
|
||||
let countyEl = options.elem.find('.county-selector');
|
||||
|
||||
|
||||
if (reload){
|
||||
options.data.provinceCode = getCode('province', options.data.province);
|
||||
let code = getCode('city', options.data.city, options.data.provinceCode.slice(0, 2));
|
||||
options.data.cityCode = code;
|
||||
options.data.countyCode = getCode('county', options.data.county, options.data.cityCode.slice(0, 4));
|
||||
renderProvince();
|
||||
return;
|
||||
}
|
||||
//filter
|
||||
if(provinceEl.attr('lay-filter')){
|
||||
provinceFilter = provinceEl.attr('lay-filter');
|
||||
|
|
@ -3863,35 +3891,49 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
//获取默认值
|
||||
if(provinceEl.data('value')){
|
||||
options.data.province = provinceEl.data('value');
|
||||
options.data.provinceCode = getCode('province', options.data.province);
|
||||
} else if (!options.data.province) {
|
||||
options.data.province = '';
|
||||
}
|
||||
if(cityEl.data('value')){
|
||||
options.data.city = cityEl.data('value');
|
||||
let code = getCode('city', options.data.city, options.data.provinceCode.slice(0, 2));
|
||||
options.data.cityCode = code;
|
||||
} else if (!options.data.city) {
|
||||
options.data.city = '';
|
||||
}
|
||||
if(countyEl.data('value')){
|
||||
options.data.county = countyEl.data('value');
|
||||
options.data.countyCode = getCode('county', options.data.county, options.data.cityCode.slice(0, 4));
|
||||
} else if (!options.data.county) {
|
||||
options.data.county = '';
|
||||
}
|
||||
provinceEl.attr('lay-filter', provinceFilter);
|
||||
cityEl.attr('lay-filter', cityFilter);
|
||||
countyEl.attr('lay-filter', countyFilter);
|
||||
|
||||
|
||||
//监听结果
|
||||
form.on('select('+provinceFilter+')', function(data){
|
||||
options.data.province = data.value;
|
||||
let code = getCode('province', data.value);
|
||||
renderCity(code);
|
||||
options.data.provinceCode = getCode('province', data.value);
|
||||
renderCity(options.data.provinceCode);
|
||||
|
||||
options.change(options.data);
|
||||
});
|
||||
form.on('select('+cityFilter+')', function(data){
|
||||
options.data.city = data.value;
|
||||
let code = getCode('city', data.value);
|
||||
renderCounty(code);
|
||||
if(options.data.provinceCode){
|
||||
options.data.cityCode = getCode('city', data.value, options.data.provinceCode.slice(0, 2));
|
||||
renderCounty(options.data.cityCode);
|
||||
}
|
||||
|
||||
options.change(options.data);
|
||||
});
|
||||
form.on('select('+countyFilter+')', function(data){
|
||||
options.data.county = data.value;
|
||||
|
||||
if(options.data.cityCode){
|
||||
options.data.countyCode = getCode('county', data.value, options.data.cityCode.slice(0, 4));
|
||||
}
|
||||
options.change(options.data);
|
||||
});
|
||||
|
||||
|
|
@ -3899,22 +3941,21 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
|
||||
//查找province
|
||||
function renderProvince(){
|
||||
let tpl = '';
|
||||
let tpl = '<option value="">--选择省--</option>';
|
||||
let provinceList = getList("province");
|
||||
let currentCode = '';
|
||||
let currentName = '';
|
||||
provinceList.forEach(function(_item){
|
||||
if (!currentCode){
|
||||
currentCode = _item.code;
|
||||
currentName = _item.name;
|
||||
}
|
||||
// if (!currentCode){
|
||||
// currentCode = _item.code;
|
||||
// currentName = _item.name;
|
||||
// }
|
||||
if(_item.name === options.data.province){
|
||||
currentCode = _item.code;
|
||||
currentName = _item.name;
|
||||
}
|
||||
tpl += '<option value="'+_item.name+'">'+_item.name+'</option>';
|
||||
});
|
||||
options.data.province = currentName;
|
||||
provinceEl.html(tpl);
|
||||
provinceEl.val(options.data.province);
|
||||
form.render('select');
|
||||
|
|
@ -3922,15 +3963,15 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
}
|
||||
|
||||
function renderCity(provinceCode){
|
||||
let tpl = '';
|
||||
let tpl = '<option value="">--选择市--</option>';
|
||||
let cityList = getList('city', provinceCode.slice(0, 2));
|
||||
let currentCode = '';
|
||||
let currentName = '';
|
||||
cityList.forEach(function(_item){
|
||||
if (!currentCode){
|
||||
currentCode = _item.code;
|
||||
currentName = _item.name;
|
||||
}
|
||||
// if (!currentCode){
|
||||
// currentCode = _item.code;
|
||||
// currentName = _item.name;
|
||||
// }
|
||||
if(_item.name === options.data.city){
|
||||
currentCode = _item.code;
|
||||
currentName = _item.name;
|
||||
|
|
@ -3945,15 +3986,15 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
}
|
||||
|
||||
function renderCounty(cityCode){
|
||||
let tpl = '';
|
||||
let tpl = '<option value="">--选择区--</option>';
|
||||
let countyList = getList('county', cityCode.slice(0, 4));
|
||||
let currentCode = '';
|
||||
let currentName = '';
|
||||
countyList.forEach(function(_item){
|
||||
if (!currentCode){
|
||||
currentCode = _item.code;
|
||||
currentName = _item.name;
|
||||
}
|
||||
// if (!currentCode){
|
||||
// currentCode = _item.code;
|
||||
// currentName = _item.name;
|
||||
// }
|
||||
if(_item.name === options.data.county){
|
||||
currentCode = _item.code;
|
||||
currentName = _item.name;
|
||||
|
|
@ -3996,15 +4037,25 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
return result;
|
||||
}
|
||||
|
||||
function getCode(type, name){
|
||||
function getCode(type, name, parentCode = 0){
|
||||
let code = '';
|
||||
let list = areaList[type + "_list"] || {};
|
||||
layui.each(list, function(_code, _name){
|
||||
let result = {};
|
||||
Object.keys(list).map(function (_code) {
|
||||
if(parentCode){
|
||||
if(_code.indexOf(parentCode) === 0){
|
||||
result[_code] = list[_code];
|
||||
}
|
||||
}else{
|
||||
result[_code] = list[_code];
|
||||
}
|
||||
});
|
||||
layui.each(result, function(_code, _name){
|
||||
if(_name === name){
|
||||
code = _code;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return code;
|
||||
}
|
||||
};
|
||||
|
|
@ -4015,6 +4066,5 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
|
|||
return thisArea.call(inst);
|
||||
};
|
||||
|
||||
//暴露接口
|
||||
exports('area', layarea);
|
||||
});
|
||||
|
|
@ -45,7 +45,7 @@ colors:
|
|||
- id: "1"
|
||||
color: "#2d8cf0"
|
||||
- id: "2"
|
||||
color: "#5FB878"
|
||||
color: "#36b368"
|
||||
- id: "3"
|
||||
color: "#f6ad55"
|
||||
- id: "4"
|
||||
|
|
|
|||
|
|
@ -41,17 +41,17 @@
|
|||
<div class="layui-form-item" id="area-picker">
|
||||
<div class="layui-form-label">网点地址</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
|
||||
<select name="province" class="province-selector" data-value="广东省">
|
||||
<option value="">请选择省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
|
||||
<select name="city" class="city-selector" data-value="深圳市">
|
||||
<option value="">请选择市</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
|
||||
<select name="county" class="county-selector" data-value="龙岗区">
|
||||
<option value="">请选择区</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -70,17 +70,17 @@
|
|||
<div class="layui-form-item" id="area-picker-copy">
|
||||
<div class="layui-form-label">网点地址</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
|
||||
<select name="province" class="province-selector" data-value="广东省">
|
||||
<option value="">请选择省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
|
||||
<select name="city" class="city-selector" data-value="深圳市">
|
||||
<option value="">请选择市</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 200px;">
|
||||
<select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
|
||||
<select name="county" class="county-selector" data-value="龙岗区">
|
||||
<option value="">请选择区</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue