Calculation/app/public/js/category.js

'use strict';

/**
 *
 *
 * @author Mai
 * @date 2018/9/26
 * @version
 */

function InitCategoryData(category) {
    const data = category instanceof Array ? category : [category];
    for (const d of data) {
       // d.valueArr = d.value && d.value !== '' ? JSON.parse(d.value) : [];
        d.typeStr = cType.text[d.type];
    }
}

function getTypeHtml() {
    const html = [];
    for (const k in cType.key) {
        const value = cType.key[k];
        html.push('<div class="form-check form-check-inline">');
        html.push('<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio' + value + '" value="' + value + '">');
        html.push('<label class="form-check-label" for="inlineRadio' + value + '">', cType.text[value], '</label>');
        html.push('</div>');
    }
    return html.join('');
}

function getCategoryHtml(category) {
    const data = category instanceof Array ? category : [category];
    const html = [];
    for (const d of data) {
        html.push('<tr ', d.value && d.value.length > 0 ? '' : 'class="table-warning"', 'cid="' + d.id + '">');
        html.push('<td>', d.name, '</td>');
        html.push('<td>', d.typeStr, '</td>');
        html.push('<td>');
        for (const v of d.value) {
            html.push('<span class="h5"><span class="badge badge-secondary">', v, '</span></span>\n');
        }
        html.push('</td>');
        html.push('<td>');
        html.push('<a href="javasrcipt: void(0);" name="add" class="btn btn-sm btn-outline-primary"', 'cid="' + d.id, '">添加值</a>\n');
        html.push('<a href="javasrcipt: void(0);" name="edit-cate" class="btn btn-sm btn-outline-primary"', 'cid="' + d.id + '">编辑</a>\n');
        html.push('<a href="javasrcipt: void(0);" name="del" class="btn btn-sm btn-outline-danger"', 'cid="' + d.id + '">删除</a> ');
        html.push('</td>');
        html.push('<tr>');
    }
    return html.join('');
}

function getValueHtml(value) {
    const html = [];
    for (const v of value) {
        html.push('<tr name="value">');
        html.push('<td><input class="form-control form-control-sm" name="value" placeholder="请输入值" value="' + v + '"></td>');
        html.push('<td><a href="javasrcipt: void(0);" class="text-danger">删除</a></td>');
        html.push('</tr>');
    }
    return html.join('');
}

function findCategory(cid) {
    for (const c of cData) {
        if (c.id === cid) {
            return c;
        }
    }
}

function bindCategoryControl() {
    // 弹出添加值
    $('a[name=add]').bind('click', function () {
        const id = parseInt($(this).attr('cid'));
        const category = findCategory(id);
        $('#add-ok').attr('cid', id);
        if (category) {
            const list = $('#value-list');
            list.html(getValueHtml(category.value) + '<tr id="add-value-row"><td colspan="2"><a href="javascript: void(0);">添加新值</a></td></tr>');
            $('#add-value-row').click(function () {
                $(this).before('<tr><td><input class="form-control form-control-sm" name="value" placeholder="请输入值"></td><td><a href="javasrcipt: void(0);" class="text-danger">删除</a></td></tr>');
            });
            $('#add').modal('show');
        }
    });
    // 弹出 编辑
    $('a[name=edit-cate]').bind('click', function () {
        const id = parseInt($(this).attr('cid'));
        const category = findCategory(id);
        $('input[name=name]', '#edit-cate').val(category.name);
        $('div[name=type]', '#edit-cate').html(getTypeHtml());
        $('#inlineRadio' + category.type, '#edit-cate')[0].checked = true;
        $('#edit-cate-ok').attr('cid', $(this).attr('cid'));
        $('#edit-cate').modal('show');
    });
    // 弹出 删除类别
    $('a[name=del]').bind('click', function () {
        $('#del-cate-ok').attr('cid', $(this).attr('cid'));
        $('#del-cate').modal('show');
    });
}

$(document).ready(() => {
    InitCategoryData(cData);
    $('#categoryList').html(getCategoryHtml(cData));
    bindCategoryControl();
    $('div[name=type]', '#add-cate').html(getTypeHtml());
    // 新增分类
    $('#add-cate-ok').click(function () {
        const name = $('input[name=name]', '#add-cate');
        const type = $('input[type=radio]:checked', '#add-cate');
        const data = {
            name: name.val(),
            type: parseInt(type.val()),
        };
        postData('/setting/category/add', data, function (data) {
            InitCategoryData(data);
            $('#categoryList').append(getCategoryHtml(data));
            bindCategoryControl();
            cData.push(data);
            $('#add-cate').modal('hide');
            name.val('');
            type[0].checked = false;
        }, function (msg) {
            $('#add-cate').modal('hide');
        });
    });
    // 添加值
    $('#add-ok').click(function () {
        const valueArr = [];
        const value = $('input[name=value]');
        for (const v of value) {
            if (v.value !== '') {
                valueArr.push(v.value);
            }
        }
        const data = {
            id: $(this).attr('cid'),
            value: valueArr,
        }
        postData('/setting/category/update', data, function (data) {
            const category = findCategory(data.id);
            for (const c in data) {
                category[c] = data[c];
            }
            InitCategoryData(category);
            $('tr[cid=' + data.id + ']')[0].outerHTML = getCategoryHtml(category);
            $('#add').modal('hide');
        }, function () {
            $('#add').modal('hide');
        });
    });
    // 编辑
    $('#edit-cate-ok').click(function () {
        const name = $('input[name=name]', '#edit-cate');
        const type = $('input[type=radio]:checked', '#edit-cate');
        const data = {
            id: parseInt($(this).attr('cid')),
            name: name.val(),
            type: parseInt(type.val()),
        }
        postData('/setting/category/update', data, function (data) {
            const category = findCategory(data.id);
            for (const c in data) {
                category[c] = data[c];
            }
            InitCategoryData(category);
            $('tr[cid=' + data.id + ']')[0].outerHTML = getCategoryHtml(category);
            $('#edit-cate').modal('hide');
        }, function () {
            $('#edit-cate').modal('hide');
        });
    });
    // 删除类别
    $('#del-cate-ok').click(function () {
        const data = {
            id: parseInt($(this).attr('cid')),
        }
        postData('/setting/category/del', data, function () {
            $('tr[cid=' + data.id + ']').remove();
            $('#del-cate').modal('hide');
        }, function () {
            $('#del-cate').modal('hide');
        });
    });
});