RailwayTwo/resources/views/admin/inner-devices/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;
        }
    </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-import-all" class="layui-btn layui-btn-sm layui-btn-normal">批量导入</button>
            </div>
            <div class="sg-card-create" style="margin-right: 10px">
                <button id="sg-create-btn" class="layui-btn layui-btn-sm">设备新增</button>
            </div >
        </div>
        <div class="layui-card-body">
            <div class="sg-search-box">
                <form class="layui-form" id="sg-search-form">
                    <div class="layui-form-item layui-row" style="margin-bottom: 0">
                        @include('share.name-select', ['device_name_id' => '', 'options' => $options])
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="0">状态</option>
                                    @foreach($statuses as $option)
                                        <option value="{{ $option['id'] }}" {{ request('status') == $option['id'] ? 'selected' : ''  }}>{{ $option['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select name="project_id">
                                    <option value="0">在用项目</option>
                                    @foreach($project_id as $option)
                                        <option value="{{ $option['id'] }}" {{ request('project_id') == $option['id'] ? 'selected' : ''  }}>{{ $option['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="number" placeholder="请输入固定资产编号" autocomplete="off" class="layui-input" value="{{ request('number') }}">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" name="spec_name" placeholder="请输入规格型号" autocomplete="off" class="layui-input" value="{{ request('spec_name') }}">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="layui-btn" id="sg-search-btn">搜索</div>
                        </div>
                    </div>
                </form>

            </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-normal layui-btn-xs" lay-event="apply">调用记录</a>
                        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="repair">维修记录</a>
                        <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: 'number', title: '固定资产编号', align: 'center' },
                        { field: 'device_name_name', title: '设备名称', align: 'center' },
                        { field: 'spec_name', title: '规格型号', align: 'center' },
                        { field: 'produce_date', title: '出厂日期', align: 'center' },
                        { field: 'buy_origin', title: '采购原值', align: 'center' },
                        { field: 'manufacturer', title: '生产厂家', align: 'center' },
                        { field: 'shape', title: '外形尺寸', align: 'center' },
                        // { field: 'quantity', title: '数量', align: 'center' },
                        { field: 'project_name', title: '在用项目', align: 'center' },
                        // { field: 'work_point_name', title: '目前工点', align: 'center' },
                        { field: 'status', title: '状态', align: 'center' },
                        { title: '操作', align:'center', toolbar: '#sg-table-bar', width: '200' },
                    ]],
                    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') {
                        window.location = '{{ $pre_uri }}' + 'edit?id=' + data.id;
                        {{--layer.open({--}}
                            {{--title: '编辑成员',--}}
                            {{--type: 2,--}}
                            {{--area: ['90%', '90%'],--}}
                            {{--content: '{{ $pre_uri }}' + 'edit?id=' + data.id,--}}
                            {{--end: function () {--}}
                                {{--top_window.location.reload();--}}
                            {{--}--}}
                        {{--});--}}
                    } else if(obj.event === 'apply') {
                        window.location = '/admin/OrderDevice/index?inner_device_id=' + data.id;
                    } else if(obj.event === 'repair') {
                        window.location = '/admin/RepairDevice/index?inner_device_id=' + data.id;
                    }
                });

                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 () {
                    window.location = '{{ $pre_uri }}' + 'create';
                    {{--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