oa/app/finance/view/vccpaymentcate/datalist.html

{extend name="../../base/view/common/base" /}
{block name="body"}
<div class="p-page">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this" data-type="1">付款方式</li>
        </ul>
    </div>
    <table class="layui-hide" id="table_vcc_payment_cate" lay-filter="table_vcc_payment_cate"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm add-new" type="button">+ 添加</button>
    </div>
</script>
{/block}

{block name="script"}
<script>
    const moduleInit = ['tool'];
    var currentType = 1;

    function gouguInit() {
        var table = layui.table, tool = layui.tool;

        layui.pageTable = table.render({
            elem: '#table_vcc_payment_cate',
            toolbar: '#toolbarDemo',
            url: '/finance/vccpaymentcate/datalist',
            where: { type: currentType },
            page: false,
            limit: 999,
            cellMinWidth: 80,
            cols: [[
                { field: 'id', width: 80, title: 'ID', align: 'center' },
                { field: 'title', title: '名称' },
                { field: 'value', width: 80, title: '值', align: 'center' },
                { field: 'is_other', width: 90, title: '其他项', align: 'center', templet: function (d) {
                    return d.is_other == 1 ? '<span class="layui-badge layui-bg-blue">是</span>' : '-';
                }},
                { field: 'sort', width: 80, title: '排序', align: 'center' },
                { field: 'status', title: '状态', width: 80, align: 'center', templet: function (d) {
                    return d.status == 1 ? '<span class="green">启用</span>' : '<span class="yellow">禁用</span>';
                }},
                { width: 160, title: '操作', align: 'center', templet: function (d) {
                    var edit = '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>';
                    var disable = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable">禁用</a>';
                    var enable = '<a class="layui-btn layui-btn-xs" lay-event="open">启用</a>';
                    var del = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                    var toggle = d.status == 1 ? disable : enable;
                    return '<div class="layui-btn-group">' + edit + toggle + del + '</div>';
                }}
            ]]
        });

        table.on('tool(table_vcc_payment_cate)', function (obj) {
            if (obj.event === 'edit') {
                editCate(obj.data);
            }
            if (obj.event === 'disable') {
                layer.confirm('确定要禁用该记录吗？', { icon: 3 }, function (index) {
                    tool.post('/finance/vccpaymentcate/set', { id: obj.data.id, status: 0 }, function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) layui.pageTable.reload();
                    });
                    layer.close(index);
                });
            }
            if (obj.event === 'open') {
                layer.confirm('确定要启用该记录吗？', { icon: 3 }, function (index) {
                    tool.post('/finance/vccpaymentcate/set', { id: obj.data.id, status: 1 }, function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) layui.pageTable.reload();
                    });
                    layer.close(index);
                });
            }
            if (obj.event === 'del') {
                layer.confirm('确定要删除该记录吗？', { icon: 3 }, function (index) {
                    tool.delete('/finance/vccpaymentcate/del', { id: obj.data.id }, function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) layui.pageTable.reload();
                    });
                    layer.close(index);
                });
            }
        });

        // Tab 切换
        $('body').on('click', '.layui-tab-title li', function () {
            currentType = $(this).data('type');
            layui.pageTable.reload({ where: { type: currentType }, page: { curr: 1 } });
        });

        $('body').on('click', '.add-new', function () {
            editCate();
        });

        function editCate(row) {
            row = row || {};
            var isEdit  = row.id > 0;
            var id      = row.id || 0;
            var title   = row.title || '';
            var value   = (row.value === undefined || row.value === null) ? '' : row.value;
            var sort    = row.sort || 0;
            var isOther = row.is_other == 1;
            layer.open({
                type: 1,
                title: isEdit ? '编辑' : '添加',
                area: ['360px', 'auto'],
                content: '<div style="padding:20px">'
                    + '<div class="layui-form-item"><label>名称</label>'
                    + '<input id="cate_title" class="layui-input" value="' + title + '" placeholder="请输入名称"></div>'
                    + '<div class="layui-form-item" style="margin-top:10px"><label>值（同类型内唯一）</label>'
                    + '<input id="cate_value" class="layui-input" type="number" value="' + value + '" placeholder="请输入数字值"></div>'
                    + '<div class="layui-form-item" style="margin-top:10px"><label>排序</label>'
                    + '<input id="cate_sort" class="layui-input" type="number" value="' + sort + '"></div>'
                    + '<div class="layui-form-item" style="margin-top:10px"><label><input id="cate_is_other" type="checkbox"' + (isOther ? ' checked' : '') + '> 标记为「其他」项（选中后申请时需填备注）</label></div>'
                    + '</div>',
                btn: ['确定', '取消'],
                yes: function (index) {
                    var val   = $('#cate_title').val();
                    var vval  = $('#cate_value').val();
                    var sval  = $('#cate_sort').val();
                    var other = $('#cate_is_other').prop('checked') ? 1 : 0;
                    if (!val) { layer.msg('请填写名称'); return; }
                    if (vval === '' || isNaN(vval)) { layer.msg('请填写数字值'); return; }
                    tool.post('/finance/vccpaymentcate/add',
                        { id: id, type: currentType, title: val, value: vval, sort: sval, is_other: other },
                        function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) { layer.close(index); layui.pageTable.reload(); }
                        }
                    );
                }
            });
        }
    }
</script>
{/block}