Calculation/app/public/js/setting_s2b.js

'use strict';
$(() => {
    autoFlashHeight();

    const limitObj = (function(list){
        const limits = list;
        let curLimit;

        const getConditionHtml = function(condition) {
            const html = [];
            for (const c of condition) {
                if (html.length > 0) html.push('</br>');
                html.push(`${c.alias} ${c.operation} ${c.value}`);
            }
            return html.join('');
        };
        const getOptionHtml = function(option) {
            const html = [];
            html.push('<td>', option.limit ? '<i class="fa fa-check"></i>' : '','</td>');
            html.push(`<td>`, getConditionHtml(option.condition), '</td>');
            html.push(`<td>${ (!option.limit ? '--' : option.lower + '%') } </td>`);
            html.push(`<td>${ (!option.limit ? '--' : option.upper + '%') } </td>`);
            html.push(`<td>${option.hint}</td>`);
            html.push(`<td><a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="编辑" name="editLimitOption"><i class="fa fa-pencil fa-fw"></i></a>
                <a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="删除" name="delLimitOption"><i class="fa fa-trash-o fa-fw text-danger"></i></a></td>`);
            return html.join('');
        };
        const loadLimitOption = function(limit) {
            const html = [];
            for (const option of limit.options) {
                html.push(`<tr class="text-center" optionId = "${option.id}">`, getOptionHtml(option), '</tr>');
            }
            $('#limitOptions').html(html.join(''));
        };
        const refreshLimit = function() {
            if (!curLimit) {
                $('#limitOptions').html('');
            } else {
                loadLimitOption(curLimit);
                $('dd[limitId]').removeClass('bg-warning');
                $(`dd[limitId=${curLimit.limit_id}]`).addClass('bg-warning');
            }
        };
        const setCurLimit = function(limit) {
            curLimit = limit;
            refreshLimit();
        };
        const getCurLimit = function() {
            return curLimit;
        };
        const getLimitCaptionHtml = function(limit) {
            return `<div class="d-flex justify-content-between align-items-center table-file" limitId="${limit.limit_id}"><div>${limit.name}</div>` +
                '    <div class="btn-group-table" style="display: none;">\n' +
                '    <a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="编辑" name="renameLimit"><i class="fa fa-pencil fa-fw"></i></a>\n' +
                '    <a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="删除" name="delLimit"><i class="fa fa-trash-o fa-fw text-danger"></i></a>\n' +
                '</div></div>';
        };
        const getLimitHtml = function(limit) {
            const html = [];
            html.push(`<dd class="list-group-item" limitId="${limit.limit_id}">`, getLimitCaptionHtml(limit), '</dd>');
            return html.join('');
        };

        const addLimit = function() {
            postData('/setting/limit/save', {add: 1}, function(result) {
                limits.push(result.add);
                $('#limit-list').append(getLimitHtml(result.add));
            });
        };
        const renameLimit = function(limit_id, name) {
            postData('/setting/limit/save', { update: { limit_id, name }}, function(result){
                const limit = limits.find(x => { return x.limit_id === result.update.limit_id; });
                limit.name = result.update.name;
                limit.options.forEach(x => { x.name === limit.name; });
                $(`dd[limitId=${limit.limit_id}]`).html(getLimitCaptionHtml(limit));
            });
        };
        const delLimit = function(limit_id){
            postData('/setting/limit/save', {del: limit_id}, function(result) {
                $(`dd[limitId=${result.del}]`).remove();
                const limitIndex = limits.findIndex(x => { return x.limit_id === limit_id; });
                limits.splice(limitIndex, 1);
                if (curLimit.limit_id === limit_id) {
                    curLimit = null;
                    refreshLimit();
                }
            });
        };

        const addOption = function(option) {
            const limit = limits.find(x => { return x.limit_id === option.limit_id; });
            limit.options.push(option);
            loadLimitOption(curLimit);
        };
        const updateOption = function(option) {
            const limit = limits.find(x => { return x.limit_id === option.limit_id; });
            const orgOption = limit.options.find(x => { return x.id === option.id; });
            if (!orgOption) return;
            _.assignIn(orgOption, option);
            loadLimitOption(curLimit);
        };
        const delOption = function (option) {
            const limit = limits.find(x => { return x.limit_id === option.limit_id; });
            const index = limit.options.findIndex(x => { return x.id === option.id; });
            limit.options.splice(index, 1);
            loadLimitOption(curLimit);
        };

        if (limits.length > 0) setCurLimit(limits[0]);
        return { setCurLimit, getCurLimit, addLimit, delLimit, renameLimit, addOption, updateOption, delOption, }
    })(limitList);


    const optionSaveObj = (function(){
        let limit_id, limit_name;
        const addCheckHtml = function(check) {
            const html = [];
            html.push('<tr>', `<td locInfo="${check.alias}&^&${check.field}&^&${check.check}&^&${check.operation}&^&${check.value}&^&${check.source}">${check.alias} ${check.operation} ${check.value}</td>`,
                '<td><a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="删除" name="loc-del"><i class="fa fa-trash-o fa-fw text-danger"></i></a></td>', '</tr>');
            $('#loc-list').append(html.join(''));
        };

        $('#loc-add').click(() => {
            const field = $('#loc-field').val();
            const locType = locInfo[field];
            if (!locType) {
                toastr.warning('未知判断条件');
                return;
            }

            const data = JSON.parse(JSON.stringify(locType));
            data.operation = $('#loc-operation').val();
            data.value = $('#loc-value').val();
            if (!data.value) {
                toastr.warning('请输入判断值');
                return;
            }
            data.value = _.toInteger(data.value);
            if (_.isNil(data.value) || data.value < 0) {
                toastr.warning('判断值仅限0、正整数');
                return;
            }
            addCheckHtml(data);
        });

        $('body').on('click', 'a[name=loc-del]', function() {
            $(this).parent().parent().remove();
        });

        const showOptionModal = function(option, limit) {
            if (!option && !limit) {
                toastr.warning('请先新增或选择配置后，再新增判断');
                return;
            }

            limit_id = option ? option.limit_id : limit.limit_id;
            limit_name = option ? option.name : limit.name;
            $('#lo-id').val(option ? option.id : '');
            $('#lo-limit')[0].checked = option && option.limit;
            $('#lo-lower').val(option ? option.lower : 0);
            $('#lo-upper').val(option ? option.upper : 100);
            $('#lo-hint').val(option ? option.hint : '');
            $('#loc-list').html('');
            if (option) {
                for (const c of option.condition) {
                    if (!c.source) c.source = '3f';
                    addCheckHtml(c);
                }
            }
            $('#save-limit-option').modal('show');
        };

        const getOptionData = function() {
            const data = {};
            try {
                data.limit = $('#lo-limit')[0].checked;
                data.lower = parseInt($('#lo-lower').val());
                data.upper = parseInt($('#lo-upper').val());
                data.hint = $('#lo-hint').val();
                data.condition = [];
                const clist = $('td[locinfo]');
                for (const c of clist) {
                    const info = c.getAttribute('locinfo').split('&^&');
                    data.condition.push({
                        alias: info[0],
                        field: info[1],
                        check: info[2],
                        operation: info[3],
                        value: parseInt(info[4]),
                        source: info[5],
                    });
                }
                const id = $('#lo-id').val();
                if (id) {
                    data.id = id;
                } else {
                    data.limit_id = limit_id;
                }
                return data;
            } catch(err) {
                if (!data.lower) {
                    toastr.warning('计量下限请输入0-100的整数');
                    return;
                }
                if (!data.upper) {
                    toastr.warning('计量上限请输入0-100的整数');
                    return;
                }
                if (data.hint.length > 20) {
                    toastr.warning('超限提示过长，请再精简');
                    return;
                }
                toastr.warning('判断条件错误');
                return;
            }
        };

        return { show: showOptionModal, data: getOptionData, }
    })();
    $('#add-lo').click(() => {
        optionSaveObj.show(null, limitObj.getCurLimit());
    });
    $('body').on('click', 'a[name=editLimitOption]', function() {
        const optionId = $(this).parent().parent().attr('optionId');
        const curLimit = limitObj.getCurLimit();
        if (!curLimit) return;
        const option = curLimit.options.find(x => { return x.id == optionId; });
        optionSaveObj.show(option, curLimit);
    });
    $('body').on('click', 'a[name=delLimitOption]', function() {
        const optionId = $(this).parent().parent().attr('optionId');
        const curLimit = limitObj.getCurLimit();
        if (!curLimit) return;
        const option = curLimit.options.find(x => { return x.id == optionId; });
        if (curLimit.options.length === 1) {
            toastr.warning('当前配置，仅剩最后一个判断，如需删除，请直接删除配置');
            return;
        }

        postData('/setting/limit/saveOption', { del: option }, function (result) {
            if (result.del) limitObj.delOption(result.del);
            $('#save-limit-option').modal('hide');
        });
    });

    $('#save-lo-ok').click(function() {
        const loData = optionSaveObj.data();
        const updateData = {};
        if (loData.id) {
            updateData.update = loData;
        } else {
            updateData.add = loData;
        }
        postData('/setting/limit/saveOption', updateData, function (result) {
            if (result.add) limitObj.addOption(result.add);
            if (result.update) limitObj.updateOption(result.update);
            $('#save-limit-option').modal('hide');
        })
    });

    $('body').on('click', '.table-file', function(e) {
        if (this.getAttribute('renaming') === '1') return;
        if (e.target.tagName === 'A' || e.target.tagName === 'I' || e.target.tagName === 'INPUT') return;
        const limitId = this.getAttribute('limitId');
        const limit = limitList.find(x => { return x.limit_id === limitId; });
        limitObj.setCurLimit(limit);
    });
    $('body').on('mouseenter', ".table-file", function(){
        $(this).children(".btn-group-table").css("display","block");
    });
    $('body').on('mouseleave', ".table-file", function(){
        $(this).children(".btn-group-table").css("display","none");
    });

    $('body').on('click', 'a[name=renameLimit]', function(e){
        $(this).parents('.table-file').attr('renaming', '1');
        $(`#${this.getAttribute('aria-describedby')}`).remove();
        const limitId = $(this).parents('.table-file').attr('limitId');
        const limit = limitList.find(x => { return x.limit_id === limitId; });
        if (!limit) return;

        const html = [];
        html.push(`<div><input type="text" class="form-control form-control-sm" style="width: 160px" value="${limit.name}"/></div>`);
        html.push('<div class="btn-group-table" style="display: none;">',
            `<a href="javascript: void(0)" name="renameOk" class="mr-1"><i class="fa fa-check fa-fw"></i></a>`,
            `<a href="javascript: void(0)" class="mr-1" name="renameCancel"><i class="fa fa-remove fa-fw text-danger"></i></a>`, '</div>');
        $(`.table-file[limitId=${limitId}]`).html(html.join(''));
        e.stopPropagation();
    });
    $('body').on('click', 'a[name=renameOk]', function(){
        const limitId = $(this).parents('.table-file').attr('limitId');
        const newName = $(this).parents('.table-file').find('input').val();
        limitObj.renameLimit(limitId, newName);
        $(this).parents('.table-file').attr('renaming', '0');
    });
    $('body').on('click', 'a[name=renameCancel]', function() {
        $(this).parents('.table-file').attr('renaming', '0');
        const limitId = $(this).parents('.table-file').attr('limitId');
        const limit = limitList.find(x => { return x.limit_id === limitId; });
        if (!limit) return;

        const html = [];
        html.push(`<div>${limit.name}</div>`);
        html.push('<div class="btn-group-table" style="display: none;">',
            '<a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="编辑" name="renameLimit"><i class="fa fa-pencil fa-fw"></i></a>',
            '<a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="删除" name="delLimit"><i class="fa fa-trash-o fa-fw text-danger"></i></a>',
            '</div>');
        $(`.table-file[limitId=${limitId}]`).html(html.join(''));
    });
    $('body').on('click', 'a[name=delLimit]', function(e){
        e.stopPropagation();
        const limitId = $(this).parents('.table-file').attr('limitId');
        limitObj.delLimit(limitId);
    });
    $('#addLimit').click(function() {
        limitObj.addLimit();
    });
});