lzxt/app/admin/view/store/device_repair/index.php

{extend name="public/container"}
{block name="content"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15" id="app">
        <!-- 搜索条件（状态筛选，无名称搜索） -->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">搜索条件</div>
                <div class="layui-card-body">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">处理状态</label>
                                <div class="layui-input-block">
                                    <select name="status">
                                        <option value="-1" {if $status == -1}selected{/if}>全部状态</option>
                                        <option value="0" {if $status == 0}selected{/if}>未处理</option>
                                        <option value="1" {if $status == 1}selected{/if}>已处理</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="search" lay-filter="search">
                                        <i class="layui-icon layui-icon-search"></i>筛选</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 报修列表 -->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">设备报修列表</div>
                <div class="layui-card-body">
                    <!-- 无添加按钮（报修由用户提交，后台仅管理） -->
                    <table class="layui-hide" id="List" lay-filter="List"></table>

                    <!-- 状态列模板（同步status字段） -->
                    <script type="text/html" id="status">
                        {{#  if(d.status == 0) { }}
                        <span class="layui-badge layui-badge-danger">未处理</span>
                        {{#  } else { }}
                        <span class="layui-badge layui-badge-normal">已处理</span>
                        {{#  } }}
                    </script>

                    <!-- 操作列模板（下拉框，包含下载、标记处理、删除） -->
                    <script type="text/html" id="act">
                        <button type="button" class="layui-btn layui-btn-xs" onclick="dropdown(this)">操作 <span class="caret"></span></button>
                        <ul class="layui-nav-child layui-anim layui-anim-upbit">
                            <li>
                                <a href="javascript:void(0)" lay-event="download">
                                    <i class="fa fa-download"></i> 下载表单
                                </a>
                            </li>
                            {{#  if(d.status == 0) { }}
                            <li>
                                <a href="javascript:void(0)" lay-event="mark_handle">
                                    <i class="fa fa-check"></i> 标记已处理
                                </a>
                            </li>
                            {{#  } }}
                            <li>
                                <a href="javascript:void(0)" lay-event="delete">
                                    <i class="fa fa-times"></i> 删除报修单
                                </a>
                            </li>
                        </ul>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}

{block name="script"}
<script>
    // 实例化form（渲染下拉框）
    layList.form.render();

    // 加载报修列表（接口对应后台repair_list方法）
    layList.tableList('List', "{:Url('repair_list')}", function () {
        return [
            {field: 'id', title: '编号', sort: true, event: 'id', width: '6%', align: "center"},
            {field: 'repair_sn', title: '报修单号', width: '15%', align: "center"},
            {field: 'device_name', title: '设备名称', width: '12%', align: "center"},
            {field: 'device_number', title: '数量', width: '6%', align: "center"},
            {field: 'contact_name', title: '联系人', width: '8%', align: "center"},
            {field: 'contact_phone', title: '联系电话', width: '10%', align: "center"},
            {field: 'create_time', title: '提交时间', width: '15%', align: "center",
                templet: function(d) { return layList.date(d.create_time); }}, // 用layList自带时间格式化
            {field: 'status', title: '处理状态', templet: '#status', width: '10%', align: "center"},
            {field: 'right', title: '操作', align: 'center', toolbar: '#act', width: '12%'},
        ];
    });

    // 状态筛选回调（传递status参数）
    layList.search('search', function (where) {
        // 处理筛选参数：默认-1为全部，0=未处理，1=已处理
        where.status = where.status || -1;
        layList.reload(where, true);
    });

    // 行工具事件（下载、标记处理、删除）
    layList.tool(function (event, data, obj) {
        switch (event) {
            // 下载表单
            case 'download':
                window.location.href = "{:Url('download')}?id=" + data.id;
                break;

            // 标记为已处理（调用set_status接口）
            case 'mark_handle':
                $eb.$swal('confirm', '确定标记为已处理吗？', function () {
                    layList.baseGet(layList.Url({
                        a: 'set_status',
                        q: {status: 1, id: data.id} // 传递status=1（已处理）和报修单ID
                    }), function (res) {
                        if (res.code == 200) {
                            $eb.$swal('success', res.msg);
                            layList.reload(); // 刷新列表
                        } else {
                            $eb.$swal('error', res.msg);
                        }
                    });
                });
                break;

            // 删除报修单
            case 'delete':
                $eb.$swal('delete', function () {
                    layList.baseGet(layList.Url({
                        a: 'delete',
                        q: {id: data.id}
                    }), function (res) {
                        if (res.code == 200) {
                            $eb.$swal('success', res.msg);
                            obj.del(); // 删除当前行
                        } else {
                            $eb.$swal('error', res.msg);
                        }
                    });
                });
                break;
        }
    });

    // 下拉操作框-点击收起（完全复用参考样式逻辑）
    $(document).click(function (e) {
        $('.layui-nav-child').hide();
    });

    // 下拉操作框-位置计算（完全复用参考样式逻辑）
    function dropdown(that) {
        var oEvent = arguments.callee.caller.arguments[0] || event;
        oEvent.stopPropagation();
        var offset = $(that).offset();
        var top = offset.top - $(window).scrollTop();
        var index = $(that).parents('tr').data('index');
        $('.layui-nav-child').each(function (key) {
            if (key != index) {
                $(this).hide();
            }
        });
        if ($(document).height() < top + $(that).next('ul').height()) {
            $(that).next('ul').css({
                'padding': 10,
                'top': -($(that).parent('td').height() / 2 + $(that).height() + $(that).next('ul').height() / 2),
                'min-width': 'inherit',
                'position': 'absolute'
            }).toggle();
        } else {
            $(that).next('ul').css({
                'padding': 10,
                'top': $(that).parent('td').height() / 2 + $(that).height(),
                'min-width': 'inherit',
                'position': 'absolute'
            }).toggle();
        }
    }
</script>
{/block}