wg-basic/common/src/main/resources/static/assets/js/common/layui-select.js

function LayuiSelect(layui) {
    let $ = layui.$;
    let form = layui.form;
    let ajax = top.restAjax;
    let dialog = top.dialog;
    let layuiSelectSelf = this;

    /**
     * 下拉选择
     */
    this.select = function (opt) {
        let self = this;
        let url = opt.url;
        let domId = opt.domId;
        let name = opt.name;
        let valueKey = opt.valueKey;
        let nameKey = opt.nameKey;
        let dataForm = opt.dataForm;
        let required = opt.required;
        let selectedValue = opt.selectedValue;
        let optionDataKeyArray = opt.optionDataKeyArray ? opt.optionDataKeyArray : [];
        let onInit = opt.onInit;
        let onSelect = opt.onSelect;

        $('#' + domId).empty();
        $('#' + domId).append(`<select id="${name}" name="${name}" lay-filter="${name}Filter" ${required ? 'lay-verify="required"' : ''}></select>`);

        /**
         * 初始化选项
         */
        function initOption() {
            $('#' + name).empty();
            ajax.get(url, {}, null, function (code, data) {
                let options = '<option value="">请选择</option>';
                $.each(data, function (i, item) {
                    let optionDatas = '';
                    $.each(optionDataKeyArray, function (j, optionDataKey) {
                        let optionDataValue = item[optionDataKey];
                        if (!optionDataValue) {
                            return;
                        }
                        optionDatas += ` data-data${j}="${item[optionDataKey]}"`;
                    });
                    options += `<option value="${item[valueKey]}" ${(selectedValue && selectedValue === item[valueKey]) ? 'selected' : ''} ${optionDatas}>${item[nameKey]}</option>`
                })
                $('#' + name).append(options)
                form.render(null, dataForm);

                if (selectedValue) {
                    // 监听初始化
                    onInit ? onInit(selectedValue, layuiSelectSelf.selectedOption('#' + name, selectedValue)) : null;
                }
            }, function (code, data) {
                dialog.msg(data.msg);
            });
        }

        /**
         * 初始化选择
         */
        function initSelectEvent() {
            form.on('select(' + name + 'Filter)', function (data) {
                let option = self.selectedOption('#' + name, data.value);
                onSelect ? onSelect(data, option) : null;
                // 联动
                if (data.value) {
                    onInit ? onInit(data.value) : null;
                }
            });
        }

        initOption();
        initSelectEvent();

    }

    /**
     * 下拉数据字典
     * @param opt
     */
    this.selectData = function (opt) {
        this.select({
            url: ajax.path('api/data/listbyparentid/{parentId}', [opt.parentId]),
            domId: opt.domId,
            name: opt.name,
            required: opt.required,
            dataForm: opt.dataForm,
            valueKey: 'dataId',
            nameKey: 'dataName',
            selectedValue: opt.selectedValue,
            optionDataKeyArray: opt.optionDataKeyArray,
            onInit: opt.onInit,
            onSelect: opt.onSelect
        })
    }

    /**
     * 获取选择的option
     *
     * @param selectId 下拉框ID
     * @param selectedValue 选择的值
     * @return {DOMStringMap|null}
     */
    this.selectedOption = function (selectId, selectedValue) {
        let options = $(selectId).children();
        for (let i = 0, option; option = options[i++];) {
            if (selectedValue === option.value) {
                return option;
            }
        }
        return null;
    }

    /**
     * 级联下拉
     * @param opt
     */
    this.selectLinkage = function (opt) {
        let self = this;
        // 级联url
        let url = opt.url;
        // option key
        let valueKey = opt.valueKey;
        // option text key
        let nameKey = opt.nameKey;
        let optionDataKeyArray = opt.optionDataKeyArray && (opt.optionDataKeyArray instanceof Array) ? opt.optionDataKeyArray : [];
        // 级联数量
        let linkageSize = opt.linkageSize ? opt.linkageSize : 1;
        // 选择ID
        let selectId = opt.selectId;
        let baseRootId = opt.baseRootId;
        let onSelect = opt.onSelect && typeof (opt.onSelect) === 'function' ? opt.onSelect : null;

        /**
         * 初始化
         * @param parentId 上级ID
         * @param selectIndex 选择下标
         */
        function initSelect(parentId, selectIndex) {
            if (parentId === '') {
                return;
            }
            let refreshSelectId = (selectId + parseInt(selectIndex));
            ajax.get(ajax.path(url, [parentId]), {}, null, function (code, data) {
                $('#' + refreshSelectId).append('<option value="">请选择</option>');
                $.each(data, function (index, item) {
                    // option携带的值
                    let optionDatas = '';
                    for (let i = 0, optionDataKey; optionDataKey = optionDataKeyArray[i++];) {
                        let optionDataValue = item[optionDataKey];
                        if (!optionDataValue) {
                            continue;
                        }
                        optionDatas += ` data-data${i}="${item[optionDataKey]}"`;
                    }
                    $('#' + refreshSelectId).append(`<option value="${item[valueKey]}"${optionDatas}>${item[nameKey]}</option>`);
                });
                // 渲染表单下拉框
                form.render('select');
            }, function (code, data) {
                dialog.msg(data.msg);
            })
        }

        /**
         * 初始化级联事件
         * @param selectId 选择ID
         * @param size 级联长度
         */
        function addLinkageEvent() {
            for (let i = 0; i < linkageSize; i++) {
                form.on('select(' + (selectId + i) + 'Select)', function (data) {
                    let index = parseInt(data.elem.id.replace(selectId, ''));
                    let nextIndex = index + 1;
                    // 级联清空
                    for (let j = nextIndex; j < linkageSize; j++) {
                        $('#' + (selectId + j)).empty();
                    }
                    form.render('select');
                    // 最后一个不触发初始化事件
                    if (index < (linkageSize - 1)) {
                        initSelect(data.value, nextIndex);
                    }

                    if (onSelect) {
                        let option = self.selectedOption('#' + data.elem.id, data.value);
                        onSelect(data, option, index);
                    }
                })
            }
        }

        initSelect(baseRootId, 0);
        addLinkageEvent();
    }

    /**
     * 地区级联下拉
     * @param opt
     */
    this.selectLinkageArea = function (opt) {
        this.selectLinkage({
            url: 'api/area/listbyparentid/{parentId}',
            valueKey: 'areaId',
            nameKey: 'areaName',
            linkageSize: opt.linkageSize ? opt.linkageSize : 5,
            baseRootId: opt.baseRootId,
            selectId: opt.selectId,
            optionDataKeyArray: opt.optionDataKeyArray,
            onSelect: opt.onSelect && typeof (opt.onSelect) === 'function' ? opt.onSelect : null
        })
    }

}