root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

升级 area 省市级联组件, 修复多实例数据隔离问题, 优化级联策略

develop
就眠仪式 2021-02-03 12:46:07 +08:00
parent ff9f5622b3
commit 808198f15c
3 changed files with 91 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
component/pear/modules/area.js
View File

@ -22,11 +22,23 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
that.layarea.call(that, files); that.layarea.call(that, files);
} }
, config: that.config , config: that.config
, reload: that.reload
, events: that.events
} }
} }
, Class = function (options) { , Class = function (options) {
let that = this; 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(); that.render();
}; };
@ -3819,9 +3831,12 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
Class.prototype.config = { Class.prototype.config = {
elem: '', elem: '',
data: { data: {
province: '--选择省--', province: '',
city: '--选择市--', city: '',
county: '--选择区--', county: '',
provinceCode: 0,
cityCode: 0,
countyCode: 0,
}, },
change: function(result){} change: function(result){}
}; };
@ -3831,13 +3846,18 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
Class.prototype.render = function () { Class.prototype.render = function () {
let that = this, options = that.config; let that = this, options = that.config;
options.elem = $(options.elem); options.elem = $(options.elem);
options.bindAction = $(options.bindAction);
that.events(); that.events();
}; };
Class.prototype.events = function () { Class.prototype.reload = function (op) {
let that = this, options = that.config, index; let options = this.config;
options.data = $.extend(options.data, op.data || {});
this.events(true);
};
Class.prototype.events = function (reload = false) {
let that = this, options = that.config;
let provinceFilter = 'province-' + layarea._id; let provinceFilter = 'province-' + layarea._id;
let cityFilter = 'city-' + layarea._id; let cityFilter = 'city-' + layarea._id;
let countyFilter = 'county-' + layarea._id; let countyFilter = 'county-' + layarea._id;
@ -3846,6 +3866,14 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
let cityEl = options.elem.find('.city-selector'); let cityEl = options.elem.find('.city-selector');
let countyEl = options.elem.find('.county-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 //filter
if(provinceEl.attr('lay-filter')){ if(provinceEl.attr('lay-filter')){
provinceFilter = provinceEl.attr('lay-filter'); provinceFilter = provinceEl.attr('lay-filter');
@ -3863,12 +3891,22 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
//获取默认值 //获取默认值
if(provinceEl.data('value')){ if(provinceEl.data('value')){
options.data.province = 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')){ if(cityEl.data('value')){
options.data.city = 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')){ if(countyEl.data('value')){
options.data.county = 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); provinceEl.attr('lay-filter', provinceFilter);
cityEl.attr('lay-filter', cityFilter); cityEl.attr('lay-filter', cityFilter);
@ -3877,21 +3915,25 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
//监听结果 //监听结果
form.on('select('+provinceFilter+')', function(data){ form.on('select('+provinceFilter+')', function(data){
options.data.province = data.value; options.data.province = data.value;
let code = getCode('province', data.value); options.data.provinceCode = getCode('province', data.value);
renderCity(code); renderCity(options.data.provinceCode);
options.change(options.data); options.change(options.data);
}); });
form.on('select('+cityFilter+')', function(data){ form.on('select('+cityFilter+')', function(data){
options.data.city = data.value; options.data.city = data.value;
let code = getCode('city', data.value); if(options.data.provinceCode){
renderCounty(code); options.data.cityCode = getCode('city', data.value, options.data.provinceCode.slice(0, 2));
renderCounty(options.data.cityCode);
}
options.change(options.data); options.change(options.data);
}); });
form.on('select('+countyFilter+')', function(data){ form.on('select('+countyFilter+')', function(data){
options.data.county = data.value; 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); options.change(options.data);
}); });
@ -3899,22 +3941,21 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
//查找province //查找province
function renderProvince(){ function renderProvince(){
let tpl = ''; let tpl = '<option value="">--选择省--</option>';
let provinceList = getList("province"); let provinceList = getList("province");
let currentCode = ''; let currentCode = '';
let currentName = ''; let currentName = '';
provinceList.forEach(function(_item){ provinceList.forEach(function(_item){
if (!currentCode){ // if (!currentCode){
currentCode = _item.code; // currentCode = _item.code;
currentName = _item.name; // currentName = _item.name;
} // }
if(_item.name === options.data.province){ if(_item.name === options.data.province){
currentCode = _item.code; currentCode = _item.code;
currentName = _item.name; currentName = _item.name;
} }
tpl += '<option value="'+_item.name+'">'+_item.name+'</option>'; tpl += '<option value="'+_item.name+'">'+_item.name+'</option>';
}); });
options.data.province = currentName;
provinceEl.html(tpl); provinceEl.html(tpl);
provinceEl.val(options.data.province); provinceEl.val(options.data.province);
form.render('select'); form.render('select');
@ -3922,15 +3963,15 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
} }
function renderCity(provinceCode){ function renderCity(provinceCode){
let tpl = ''; let tpl = '<option value="">--选择市--</option>';
let cityList = getList('city', provinceCode.slice(0, 2)); let cityList = getList('city', provinceCode.slice(0, 2));
let currentCode = ''; let currentCode = '';
let currentName = ''; let currentName = '';
cityList.forEach(function(_item){ cityList.forEach(function(_item){
if (!currentCode){ // if (!currentCode){
currentCode = _item.code; // currentCode = _item.code;
currentName = _item.name; // currentName = _item.name;
} // }
if(_item.name === options.data.city){ if(_item.name === options.data.city){
currentCode = _item.code; currentCode = _item.code;
currentName = _item.name; currentName = _item.name;
@ -3945,15 +3986,15 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
} }
function renderCounty(cityCode){ function renderCounty(cityCode){
let tpl = ''; let tpl = '<option value="">--选择区--</option>';
let countyList = getList('county', cityCode.slice(0, 4)); let countyList = getList('county', cityCode.slice(0, 4));
let currentCode = ''; let currentCode = '';
let currentName = ''; let currentName = '';
countyList.forEach(function(_item){ countyList.forEach(function(_item){
if (!currentCode){ // if (!currentCode){
currentCode = _item.code; // currentCode = _item.code;
currentName = _item.name; // currentName = _item.name;
} // }
if(_item.name === options.data.county){ if(_item.name === options.data.county){
currentCode = _item.code; currentCode = _item.code;
currentName = _item.name; currentName = _item.name;
@ -3996,10 +4037,20 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
return result; return result;
} }
function getCode(type, name){ function getCode(type, name, parentCode = 0){
let code = ''; let code = '';
let list = areaList[type + "_list"] || {}; 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){ if(_name === name){
code = _code; code = _code;
} }
@ -4015,6 +4066,5 @@ layui.define(['layer', 'form', 'laytpl'], function (exports) {
return thisArea.call(inst); return thisArea.call(inst);
}; };
//暴露接口
exports('area', layarea); exports('area', layarea);
}); });

2
config/pear.config.yml
View File

@ -45,7 +45,7 @@ colors:
- id: "1" - id: "1"
color: "#2d8cf0" color: "#2d8cf0"
- id: "2" - id: "2"
color: "#5FB878" color: "#36b368"
- id: "3" - id: "3"
color: "#f6ad55" color: "#f6ad55"
- id: "4" - id: "4"

12
view/document/area.html
View File

@ -41,17 +41,17 @@
<div class="layui-form-item" id="area-picker"> <div class="layui-form-item" id="area-picker">
<div class="layui-form-label">网点地址</div> <div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;"> <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> <option value="">请选择省</option>
</select> </select>
</div> </div>
<div class="layui-input-inline" style="width: 200px;"> <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> <option value="">请选择市</option>
</select> </select>
</div> </div>
<div class="layui-input-inline" style="width: 200px;"> <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> <option value="">请选择区</option>
</select> </select>
</div> </div>
@ -70,17 +70,17 @@
<div class="layui-form-item" id="area-picker-copy"> <div class="layui-form-item" id="area-picker-copy">
<div class="layui-form-label">网点地址</div> <div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;"> <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> <option value="">请选择省</option>
</select> </select>
</div> </div>
<div class="layui-input-inline" style="width: 200px;"> <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> <option value="">请选择市</option>
</select> </select>
</div> </div>
<div class="layui-input-inline" style="width: 200px;"> <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> <option value="">请选择区</option>
</select> </select>
</div> </div>