oa/app/home/view/currency/datalist.html

{extend name="../../base/view/common/base" /}
{block name="body"}
<div class="p-page">
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-form" lay-filter="form-search">
                <div class="layui-inline">
                    <input class="layui-input" name="keywords" id="keywords" placeholder="搜索币种代码/名称">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-sm" id="btnSearch">搜索</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal add-new">+ 添加币种</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="table_currency" lay-filter="table_currency"></table>
        </div>
    </div>
</div>
{/block}

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

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

        layui.pageTable = table.render({
            elem: '#table_currency',
            url: '/home/currency/datalist',
            page: false,
            limit: 9999,
            cellMinWidth: 80,
            cols: [[
                { field: 'id', width: 80, title: 'ID', align: 'center' },
                { field: 'code', width: 120, title: '币种代码', align: 'center' },
                { field: 'title', title: '币种名称' },
                { field: 'sort', width: 90, title: '排序', align: 'center' },
                { field: 'status', title: '状态', width: 90, align: 'center', templet: function (d) {
                    return d.status == 1 ? '<span class="green">启用</span>' : '<span class="yellow">禁用</span>';
                }},
                { width: 180, 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_currency)', function (obj) {
            if (obj.event === 'edit') {
                editCurrency(obj.data);
            }
            if (obj.event === 'disable') {
                layer.confirm('确定要禁用该币种吗？', { icon: 3 }, function (index) {
                    tool.post('/home/currency/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('/home/currency/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('/home/currency/del', { id: obj.data.id }, function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) layui.pageTable.reload();
                    });
                    layer.close(index);
                });
            }
        });

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

        $('#btnSearch').on('click', function () {
            layui.pageTable.reload({ where: { keywords: $('#keywords').val() } });
        });

        function editCurrency(row) {
            row = row || {};
            var isEdit = row.id > 0;
            var id     = row.id || 0;
            var code   = row.code || '';
            var title  = row.title || '';
            var sort   = row.sort || 0;
            layer.open({
                type: 1,
                title: isEdit ? '编辑币种' : '添加币种',
                area: ['360px', 'auto'],
                content: '<div style="padding:20px">'
                    + '<div class="layui-form-item"><label>币种代码（如 USD）</label>'
                    + '<input id="currency_code" class="layui-input" value="' + code + '" placeholder="ISO 4217 代码"></div>'
                    + '<div class="layui-form-item" style="margin-top:10px"><label>币种名称</label>'
                    + '<input id="currency_title" class="layui-input" value="' + title + '" placeholder="如 美元"></div>'
                    + '<div class="layui-form-item" style="margin-top:10px"><label>排序</label>'
                    + '<input id="currency_sort" class="layui-input" type="number" value="' + sort + '"></div>'
                    + '</div>',
                btn: ['确定', '取消'],
                yes: function (index) {
                    var cval = $.trim($('#currency_code').val());
                    var tval = $.trim($('#currency_title').val());
                    var sval = $('#currency_sort').val();
                    if (!cval) { layer.msg('请填写币种代码'); return; }
                    if (!tval) { layer.msg('请填写币种名称'); return; }
                    tool.post('/home/currency/add',
                        { id: id, code: cval, title: tval, sort: sval },
                        function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) { layer.close(index); layui.pageTable.reload(); }
                        }
                    );
                }
            });
        }
    }
</script>
{/block}