btxtgxq-system-population/target/classes/static/assets/layuiadmin/modules/select.js

207 lines
7.5 KiB
JavaScript
Raw Normal View History

2023-10-25 10:04:28 +08:00
layui.define(['form', 'common', 'ajax'], function (exports) {
let $ = layui.$;
let form = layui.form;
let layer = layui.layer;
let common = layui.common;
let ajax = layui.ajax;
/**
* 获取选择的option
*
* @param selectId 下拉框ID
* @param selectedValue 选择的值
* @return {DOMStringMap|null}
*/
function getSelectedOption(selectId, selectedValue) {
let options = $(selectId).children();
for (let i = 0; i < options.length; i++) {
let option = options[i];
if (selectedValue === option.value) {
return option;
}
}
return null;
}
/**
* 正常
* @param opt
*/
function dataDynamic(opt) {
let url = opt.url;
let name = opt.name;
let valueKey = opt.valueKey ? opt.valueKey : '';
let nameKey = opt.nameKey ? opt.nameKey : '';
let where = opt.where ? opt.where : {};
let formFilter = opt.formFilter;
let selectedValue = opt.selectedValue;
// 请求得到的列表Key格式'a.b.c'
let dataListKey = opt.dataListKey ? opt.dataListKey : '';
let required = typeof (opt.required) !== 'undefined' && opt.required !== null ? opt.required : false;
let optionDatasetKeyArray = opt.optionDatasetKeyArray && $.isArray(opt.optionDatasetKeyArray) ? opt.optionDatasetKeyArray : [];
let onInit = opt.onInit && $.isFunction(opt.onInit) ? opt.onInit : null;
let onSelect = opt.onSelect && $.isFunction(opt.onSelect) ? opt.onSelect : null;
let elemContainer = $(`#${name}Container`);
/**
* 初始化容器
*/
function initContainer() {
elemContainer.empty();
elemContainer.append(`
<select id="${name}" name="${name}" lay-filter="${name}Select" ${required ? 'lay-verify="required"' : ''}></select>
`);
}
/**
* 初始化选项
*/
function initOption() {
let elem = $(`#${name}`);
elem.empty();
ajax.get(url, where, null, function (code, data) {
let optionArray = ['<option value="">请选择</option>'];
let dataList = data;
if (dataListKey) {
let dataListKeyArray = dataListKey.split('.');
$.each(dataListKeyArray, function (i, key) {
dataList = dataList[key];
})
}
$.each(dataList, function (i, item) {
let optionValue = valueKey ? item[valueKey] : item;
let optionName = nameKey ? item[nameKey] : item;
let optionDatasetArray = [];
$.each(optionDatasetKeyArray, function (j, optionDatasetKey) {
let optionDatasetValue = item[optionDatasetKey];
if (!optionDatasetValue) {
return;
}
optionDatasetArray.push(`data-${common.camelCase2lineCase(optionDatasetKey)}="${optionDatasetValue}"`);
});
optionArray.push(`<option value="${optionValue}" ${(selectedValue && selectedValue === optionValue) ? 'selected' : ''} ${optionDatasetArray.join(' ')}>${optionName}</option>`);
});
elem.append(optionArray.join(''));
// 赋值
if (selectedValue) {
let formData = {};
formData[`${name}`] = selectedValue;
form.val(formFilter, formData);
onInit ? onInit(selectedValue, getSelectedOption(`#${name}`, selectedValue)) : null;
}
form.render('select', formFilter);
}, function (code, data) {
layer.msg(data.msg);
});
}
/**
* 添加事件
*/
function addEvent() {
form.on(`select(${name}Select)`, function (data) {
let selectedOption = getSelectedOption(`#${name}`, data.value);
onSelect ? onSelect(data, selectedOption) : null;
});
}
initContainer();
initOption();
addEvent();
}
/**
* 静态数据
* @param opt
*/
function dataStatic(opt) {
let name = opt.name;
let options = opt.options;
let formFilter = opt.formFilter;
let selectedValue = opt.selectedValue;
let required = typeof (opt.required) !== 'undefined' && opt.required !== null ? opt.required : false;
let onInit = opt.onInit && $.isFunction(opt.onInit) ? opt.onInit : null;
let onSelect = opt.onSelect && $.isFunction(opt.onSelect) ? opt.onSelect : null;
let elemContainer = $(`#${name}Container`);
/**
* 初始化容器
*/
function initContainer() {
elemContainer.empty();
elemContainer.append(`
<select id="${name}" name="${name}" lay-filter="${name}Select" ${required ? 'lay-verify="required"' : ''}></select>
`);
}
/**
* 初始化选项
*/
function initOption() {
let elem = $(`#${name}`);
elem.empty();
let optionArray = ['<option value="">请选择</option>'];
$.each(options, function (i, option) {
let value = option['value'];
let title = option['title'];
let optionDatasetArray = [];
for (let key in option) {
if (key === 'value' || key === 'title') {
continue;
}
optionDatasetArray.push(`data-${common.camelCase2lineCase(key)}="${option[key]}"`);
}
optionArray.push(`<option value="${value}" ${(selectedValue && selectedValue === value) ? 'selected' : ''} ${optionDatasetArray.join(' ')}>${title}</option>`);
});
elem.append(optionArray.join(''));
// 赋值
if (selectedValue) {
let formData = {};
formData[`${name}`] = selectedValue;
form.val(formFilter, formData);
onInit ? onInit(selectedValue, getSelectedOption(`#${name}`, selectedValue)) : null;
}
form.render('select', formFilter);
}
/**
* 添加事件
*/
function addEvent() {
form.on(`select(${name}Select)`, function (data) {
let selectedOption = getSelectedOption(`#${name}`, data.value);
onSelect ? onSelect(data, selectedOption) : null;
});
}
initContainer();
initOption();
addEvent();
}
/**
* 数据字典
* @param opt
*/
function dataDictionary(opt) {
dataDynamic({
url: ajax.path('api/data/list/parent-id/{parentId}', [opt.parentId]),
name: opt.name,
required: opt.required,
formFilter: opt.formFilter,
valueKey: 'dataId',
nameKey: 'dataName',
selectedValue: opt.selectedValue,
optionDatasetKeyArray: opt.optionDatasetKeyArray,
where: opt.where,
onInit: opt.onInit,
onSelect: opt.onSelect
})
}
exports('select', {
dataDynamic: dataDynamic,
dataStatic: dataStatic,
dataDictionary: dataDictionary
});
});