RailwayTwo/resources/views/admin/specs/index.blade.php

@extends('admin.layout-content')

@section('header')
    <style>
        .sg-search-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sg-import-box {
            display: none;
        }
        .sg-import-box.sg-show {
            display: block;
        }
        .sg-import-box .layui-col-sm8 {
            float: none;
        }
        .layui-card .layui-form-item .layui-inline {
            margin-bottom: 0;
        }
        .sg-export-list {
            margin: 50px 0;
        }
        .sg-export-list .sg-item {
            margin: 20px 0;
        }
        .sg-export-list .sg-item .sg-title {
            margin: 20px 0;
        }
        .sg-export-list .sg-item .sg-desc,
        .sg-export-list .sg-item ul {
            color: rgb(140, 140, 140);
            margin-left: 30px;
        }
        .sg-down-link {
            color: blue;
            text-decoration: underline;
        }
        .sg-down-link:hover {
            color: blue;
        }
        #sg-import-all{

        }
    </style>
@endsection

@section('content')
    <div class="layui-card">
        <div class="layui-card-header sg-card-header">
            {{ $model_name }}管理
            <div class="sg-card-create">
                <button id="sg-create-btn" class="layui-btn layui-btn-sm">创建</button>
            </div>
        </div>
        <div class="layui-card-body">
                <form class="layui-form layui-inline" id="sg-search-form">
                    <div class="layui-form-item layui-row">
                        @include('share.device-select', ['device_id' => '', 'device_name_id' => '', 'spec_id' => '', 'options' => $options, 'hide_spec' => true])
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="请输入规格型号" autocomplete="off" class="layui-input" value="{{ request('name') }}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-btn" id="sg-search-btn">搜索</div>
                        </div>
                    </div>
                </form>
                <div>
                    <button id="sg-import-all" class="layui-btn layui-btn-normal">导入</button>
                </div>
            <table id="sg-main-table" class="layui-hide" lay-filter="tableEvent"></table>
            <script type="text/html" id="sg-table-bar">
                <div class="layui-btn-group">
                    <div class="layui-btn-group">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                    </div>
                </div>
            </script>
        </div>
    </div>

    <div id="sg-import-box" class="sg-import-box">
        <div class="layui-row">
            {{--<input type="file" id="sg-upload-file">--}}
            <div class="layui-col-sm8 layui-col-sm-offset2">
                <div class="sg-export-list">
                    <div class="sg-item">
                        <h3 class="sg-title">一、请按照数据模板的格式准备要导入的数据。<a href="{{ $pre_uri . 'exportTemplate?t=' . time() }}" class="sg-down-link">点击下载</a>《设备导入模板》</h3>
                        <ul>
                            <li>注意事项</li>
                            <li>1、模板中的表头名称不能更改，表头行不能删除</li>
                            <li>2、导入文件请勿超过 20 MB</li>
                        </ul>
                    </div>
                    <div class="sg-item">
                        <h3 class="sg-title">二、请选择需要导入的文件</h3>
                        <div class="sg-desc"><input type="file" id="sg-upload-file"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(function () {

            layui.use(['table', 'layer'], function(){
                var table = layui.table,
                    layer = layui.layer,
                    form = layui.form,
                    laydate = layui.laydate,
                    top_window = window;


                $('#sg-import-all').click(function() {
                    layer.open({
                        title: '导入设备',
                        type: 1,
                        area: ['90%', '90%'],
                        content: $('#sg-import-box'),
                        btn: ['导入', '取消'],
                        yes: function () {
                            importFile();
                        }
                    });
                    // $('#sg-upload-file').click();
                });


                function importFile() {
                    var file = $('#sg-upload-file')[0].files[0];
                    if(file) {
                        var name = file['name'];
                        var ext = name.split('.').pop();
                        if(['xls', 'xlsx'].indexOf(ext) !== -1) {
                            var formData = new FormData();
                            formData.append('file', file);
                            $.ajax({
                                method: 'POST',
                                url: '{{ $pre_uri }}' + 'import',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                data: formData,
                                contentType: false,
                                cache: false,
                                processData: false,
                                success: function (data) {
                                    if(data.status === 'success') {
                                        layer.msg('上传成功', {
                                            icon: 1
                                        });
                                        setTimeout(function() {
                                            top_window.location.reload();
                                        }, 1000)
                                    } else {
                                        layer.alert(data.info, {
                                            icon: 2
                                        });
                                    }
                                },
                                error: function () {
                                    layer.msg('导入失败', {
                                        icon: 2
                                    });
                                }
                            });
                        }
                    } else {
                        layer.msg('只支持xls，xlsx格式的文件', {
                            icon: 2
                        });
                    }
                    this.value = '';
                }

                table.render({
                    elem: '#sg-main-table',
                    url: '{{ $pre_uri }}' + 'get',
                    cellMinWidth: 80,
                    cols: [[
                        { field: 'id', title: 'ID', align: 'center' },
                        { field: 'device_type', title: '租赁设备类型', align: 'center' },
                        { field: 'device_name_name', title: '租赁设备名称', align: 'center' },
                        { field: 'name', title: '设备规格型号', align: 'center' },
                        { field: 'sort', title: '排序', align: 'center' },
                        { title: '操作', align:'center', toolbar: '#sg-table-bar' }
                    ]],
                    page: {
                        layout: ['count', 'prev', 'page', 'next', 'skip', 'refresh'],
                        limit: 15
                    },
                    even: true,
                    where: transformToJson($('#sg-search-form').serializeArray()),
                    done: function(res, curr, count) {

                    }
                });
                table.on('tool(tableEvent)', function(obj){
                    var data = obj.data;
                    if(obj.event === 'delete'){
                        layer.confirm('确定要删除吗？', function(index) {
                            $.ajax({
                                method: 'POST',
                                url: '{{ $pre_uri }}' + 'delete',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                data: {
                                    id: data.id
                                },
                                success: function (data) {
                                    if(data.status === 'success') {
                                        obj.del();
                                    } else {
                                        layer.msg(data.info, {
                                            icon: 2
                                        });
                                    }
                                    layer.close(index);
                                },
                                error: function () {
                                    layer.close(index);
                                    layer.msg('删除失败', {
                                        icon: 2
                                    });
                                }
                            });
                        });
                    } else if(obj.event === 'edit') {
                        layer.open({
                            title: '编辑成员',
                            type: 2,
                            area: ['90%', '90%'],
                            content: '{{ $pre_uri }}' + 'edit?id=' + data.id,
                            end: function () {
                                top_window.location.reload();
                            }
                        });
                    }
                });

                if($('#search-begin-date').length > 0) {
                    laydate.render({
                        elem: '#search-begin-date',
                        done: function () {
                            updateTableBySearch();
                        }
                    });
                }

                if($('#search-end-date').length > 0) {
                    laydate.render({
                        elem: '#search-end-date',
                        done: function () {
                            updateTableBySearch();
                        }
                    });
                }

                function transformToJson(formData){
                    var obj={};
                    for (var i in formData) {
                        obj[formData[i].name]=formData[i]['value'];
                    }
                    return obj;
                }

                function updateTableBySearch() {
                    table.reload('sg-main-table', {
                        where: transformToJson($('#sg-search-form').serializeArray()),
                        page: {
                            curr: 1
                        }
                    });
                }

                $('#sg-search-btn').click(function() {
                    updateTableBySearch();
                });
                // $('#sg-search-form').change(function () {
                //     updateTableBySearch();
                // });
                //
                // form.on('select()', function(){
                //     updateTableBySearch();
                // });

                $('#sg-create-btn').on('click', function () {
                    layer.open({
                        title: '创建' + '{{ $model_name }}',
                        type: 2,
                        area: ['90%', '90%'],
                        content: '{{ $pre_uri }}' + 'create',
                        end: function () {
                            top_window.location.reload();
                        }
                    });
                });

                $('#sg-table-top-container').on('click', '.btn-delete-many', function () {
                    layer.confirm('确定要删除所有选中行吗？', function () {
                        var data = table.checkStatus('sg-main-table').data;
                        if(data.length <= 0) {
                            layer.msg('选择不能为空', {
                                icon: 2
                            });
                            return false;
                        }
                        var ids = [];
                        for(var i = 0; i < data.length; ++i) {
                            ids.push(data[i]['id']);
                        }
                        $.ajax({
                            method: 'POST',
                            url: '{{ $pre_uri }}' + 'deleteMany',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                                ids: JSON.stringify(ids)
                            },
                            success: function (data) {
                                if(data.status === 'success') {
                                    top_window.location.reload();
                                } else {
                                    layer.msg(data.info, {
                                        icon: 2
                                    });
                                }

                            },
                            error: function () {
                                layer.msg('删除失败', {
                                    icon: 2
                                });
                            }
                        });
                    })
                });
            });
        })
    </script>
@endsection