207 lines
7.5 KiB
JavaScript
207 lines
7.5 KiB
JavaScript
|
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
|
|||
|
});
|
|||
|
});
|