hemall.terabimsoft.com.cn/plugins/article/views/admin/list.blade.php

@extends('layouts.base')

@section('content')
    <div class="w1200 m0a">
        {{--<div class="ulleft-nav">--}}
            {{--<ul class="nav nav-tabs">--}}
                {{--<li><a href="{{ yzWebUrl('plugin.article.article.index') }}" style="cursor: pointer;">文章管理</a></li>--}}
                {{--<li><a href="" style="cursor: pointer;">添加文章</a></li>--}}
                {{--<li><a href="{{ yzWebUrl('plugin.article.category.index') }}" style="cursor: pointer;">分类管理</a></li>--}}
                {{--<li><a href="" style="cursor: pointer;">其他设置</a></li>--}}
                {{--<li><a href="" style="cursor: pointer;">举报记录</a></li>--}}

            {{--</ul>--}}
        {{--</div>--}}
        <div class="rightlist">
            {{--@include('Yunshop\Article::admin.tabs')--}}
            <div class="right-titpos">
                <ul class="add-snav">
                    <li class="active"><a href="#">文章管理</a></li>
                </ul>
            </div>

            <div class="panel panel-info">
                <div class="panel-body">
                    <form action="" method="post" class="form-horizontal" role="form" id="form1">
                        <div class="form-group">
                            <!--<label class="col-xs-12 col-sm-3 col-md-1 control-label">筛选</label>-->
                            <div class="col-sm-11 col-xs-12">
                                <div class="row row-fix tpl-category-container">
                                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                        <select class="form-control tpl-category-parent" name="search[category_id]">
                                            <option value="">全部分类</option>
                                            @foreach ($categorys as $category)
                                            <option value="{{ $category['id'] }}" @if ($search['category_id'] == $category['id']) selected="selected" @endif>{{ $category['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-lg-3">
                                        <input class="form-control" name="search[keyword]" id="" type="text" value="{{ $search['keyword'] }}" placeholder="文章标题">
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-lg-3">
                                        <input class="form-control" name="search[author]" id="" type="text" value="{{ $search['author'] }}" placeholder="发布作者">
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-lg-3">
                                        <select class="form-control tpl-category-parent" name="search[article_type]">
                                            <option value="0" @if (!$search['article_type']) selected="selected" @endif>文章类型</option>
                                            <option value="1" @if ($search['article_type'] == 1) selected="selected" @endif>普通文章</option>
                                            <option value="2" @if ($search['article_type'] == 2) selected="selected" @endif>音频文章</option>
                                        </select>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-lg-3">
                                        <select class="form-control tpl-category-parent" name="search[sort]">
                                            <option value="0" @if (!$search['sort'] == 0) selected="selected" @endif>排序</option>
                                            <option value="1" @if ($search['sort'] == 1) selected="selected" @endif>ID由大到小</option>
                                            <option value="2" @if ($search['sort'] == 2) selected="selected" @endif>ID由小到大</option>
                                            <option value="3" @if ($search['sort'] == 3) selected="selected" @endif>真实阅读量</option>
                                            <option value="4" @if ($search['sort'] == 4) selected="selected" @endif>真实点赞量</option>
                                        </select>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-lg-3">
                                        <select class="form-control tpl-category-parent" name="search[is_reward]">
                                            <option value="0" @if (!$search['is_reward']) selected="selected" @endif>是否设置营销奖励（分享一次设置非零）</option>
                                            <option value="1" @if ($search['is_reward'] == 1) selected="selected" @endif>是</option>
                                            <option value="2" @if ($search['is_reward'] == 2) selected="selected" @endif>否</option>
                                        </select>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-lg-3">
                                        <select class="form-control tpl-category-parent" name="search[is_enable_time]">
                                            <option value="0" @if (!$search['is_enable_time']) selected="selected" @endif>不搜索时间</option>
                                            <option value="1" @if ($search['is_enable_time'] == 1) selected="selected" @endif>搜索时间</option>
                                        </select>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-lg-3">
                                        {!! app\common\helpers\DateRange::tplFormFieldDateRange('search[time]', [
                                                                    'starttime'=>$search['time']['start'],
                                                                    'endtime'=>$search['time']['end'],
                                                                    'start'=>$search['time']['start'],
                                                                    'end'=>$search['time']['end']
                                                                    ], true) !!}
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <!--<label class="col-xs-12 col-sm-3 col-md-1 control-label"> </label>-->
                            <div class="col-xs-12 col-sm-2 col-lg-2">
                                <button class="btn btn-success" id="search"><i class="fa fa-search"></i> 搜索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <form  action="{{yzWebUrl('plugin.article.admin.article.deleted')}}" method="post" id="form2">
                <a style="color: #FFFFFF" class='btn btn-primary' href="{{ yzWebUrl('plugin.article.admin.article-vue.info') }}"><i class="fa fa-plus"></i> 添加文章</a>
                <button id="batch_del_sub" class="btn btn-primary" onclick="return batchDel()"><i class="fa fa-minus"></i>批量删除</button>
                <div class="panel-heading">
                    文章列表 (总数: <span id="$articlenum">{{ $articles['total'] }}</span>)
                </div>
                <div class="panel-body">
                    <table class="table" style="">
                        <thead>
                        <tr>
                            <td style="width:50px; text-align:center;"><input id='select_all' onclick="selectAll()" type="checkbox"> 全选</td>
                            <th style="width:40px; text-align:center;">ID</th>
                            <th style="width:40px; text-align:center;">排序</th>
                            <th style="width:100px;">文章标题</th>
                            <th style="width:80px;">文章分类</th>
                            <th style="width:50px;">文章关键字</th>
                            <th style="width:80px;">文章创建时间</th>
                            <th style="width:50px;">真实阅读量</th>
                            <th style="width:50px;">真实点赞量</th>
                            <th style="width:70px;">数据统计</th>
                            <th style="width:40px;">评论数量 <br> 查看详情</th>
                            <th style="width:50px;">状态</th>
                            <th style="width:100px; text-align:center;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if (empty($categorys))
                            <tr class="noarticle">
                                <td style="text-align: center; line-height: 100px;" colspan="8">亲~您还没有添加文章分类哦~您可以点击 “<a class="nav-add" href="{{ yzWebUrl('plugin.article.admin.category.add') }}">添加文章分类</a>”</td>
                            </tr>
                        @elseif (empty($articles['data']))
                            <tr class="noarticle">
                                <td style="text-align: center; line-height: 100px;" colspan="8">亲~您还没有添加文章哦~您可以尝试 ↙ 左下角的 “<a class="nav-add" href="{{ yzWebUrl('plugin.article.admin.article-vue.info') }}">添加文章</a>”</td>
                            </tr>
                        @else
                            @foreach ($articles['data'] as $key => $article)
                                <tr class="article-list" cid="{{ $article['id'] }}" cname="{{ $article['title'] }}">
                                    <td style="text-align:center;"><input class="ids_check" type="checkbox" name="ids[]" value="{{$article['id']}}"/></td>
                                    <td style="text-align:center;">{{ $article['id'] }}</td>
                                    <td style="text-align:center;" onmouseover="overShow()" onmouseout="outHide(`{{$key}}`)"><div class="bubble"><input onblur="hideForm()" class="input-text" type="text" value="{{ $article['display_order'] }}"><button onclick="changeSort(`{{$article['id']}}`,`{{$key}}`)" type="button">确定</button></div><i class= "el-icon-edit order"  style="color:#29ba9c;display:none" onclick="edit(`{{$key}}`)"></i><span style="width:15px; height:15px;display:inline-block" >{{ $article['display_order'] }}</span></td>                      
                                    <td>{{ $article['title'] }}</td>
                                    <td>{{ $article['belongs_to_category']['name'] }}</td>
                                    <td>{{ $article['keyword'] }}</td>
                                    <td>{{ $article['created_at'] }}</td>
                                    <td>{{ $article['read_num'] }}</td>
                                    <td>{{ $article['like_num'] }}</td>
                                    <td><a href="{{ yzWebUrl('plugin.article.admin.article.log', ['id' => $article['id']]) }}">查看记录</a></td>
                                    <td style="text-align: center">{{$article['comment_count']}} <br> <a href="{{ yzWebUrl('plugin.article.admin.comment.index', ['id' => $article['id']]) }}">查看详情</a></td>
                                    <td>@if ($article['state'] == 1) <span style="color: green;">开启</span> @else 关闭 @endif</td>


                                    <td style="text-align:center;">

                                        @if($article['type'] != 1)
                                        <a href="javascript:;" data-clipboard-text="{{yzAppFullUrl('articleContent/'.$article['id'])}}" data-url="{{yzAppFullUrl('articleContent/'.$article['id'])}}" title="复制连接" class="js-clip">复制链接</a>
                                        @else
                                            <a href="javascript:;" data-clipboard-text="{{yzAppFullUrl('voiceDetail/'.$article['id'])}}" data-url="{{yzAppFullUrl('voiceDetail/'.$article['id'])}}" title="复制连接" class="js-clip">复制链接</a>
                                        @endif
                                        <a class='btn btn-default nav-edit' href="{{ yzWebUrl('plugin.article.admin.article-vue.info',['id' => $article['id']]) }}"><i class="fa fa-edit"></i></a>
                                        <a class='btn btn-default nav-del' href="{{ yzWebUrl('plugin.article.admin.article.deleted',['ids' => [$article['id']]]) }}" onclick="return confirm('确认删除文章?');return false;"><i class="fa fa-trash-o"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                    {!! $pager !!}
                </div>
            </form>
        </div>

    </div>
<script language='javascript'>
    var flag = true
    window.history.replaceState(null, null, window.location.href);
    $(function () {
        $('#search').click(function () {
            $('#form1').attr('action', '{!! yzWebUrl('plugin.article.admin.article.index') !!}');
            $('#form1').submit();
        });
    });

    //触发批量删除文章
    function batchDeletion(){
        var input_ids = document.getElementsByClassName("ids_check");
    }
    //触发修改排序
    function changeSort (id,index){
        var sortNumber = $('.input-text')[index].value  //修改后的排序
        var id =id
            $.ajax({
                        url: "{!! yzWebUrl('plugin.article.admin.article.edit-sort') !!}",
                        type: "post",
                        data: {
                            article_id: id,
                            display_order:sortNumber
                        },
                        // cache: false,
                        success: function(result) {
                            console.log(result)
                            alert(result.msg);
                            window.location.reload();
                        }
                    })
                   
    }
    function selectAll(){
        var input_ids = document.getElementsByClassName("ids_check");
        var select_all = document.getElementById('select_all');

        if(select_all.checked){
            for (i=0;i<input_ids.length;i++) {
                input_ids[i].checked = 'checkbox';
            }
        }else{
            for (i=0;i<input_ids.length;i++) {
                input_ids[i].checked = '';
            }
        }
    }
    function batchDel(){
        var ids = document.getElementsByClassName('ids_check');
        for(let element of ids){
            if (element.checked){
                return true;
            }
        }
        alert('当前未选中文章ID');
        return false;
    }
    function overShow(){
      var tap = event.srcElement
       var rows = tap.parentElement.parentElement.rowIndex - 1
       if($('.article-list')[rows]){
         $('.article-list')[rows].children[2].childNodes[1].style.display = 'inline-block'
       }
    }
    function outHide(index){
        if(flag){
            var tap = event.srcElement
          if($('.article-list')[index]){
         $('.article-list')[index].children[2].childNodes[1].style.display = 'none'
       }
        }
    }
    //隐藏输入框
   function hideForm(){
       flag =true
       var box = event.srcElement.parentElement
       var icon =event.srcElement.parentElement.parentElement.childNodes[1]
        setTimeout(function(){
            box.style.display='none'
           icon.style.display='none';
        },200)
    }
    //编辑排序
    function edit(index){
        flag = false
        var tap = event.srcElement
       if($('.article-list')[index]){
        $('.bubble')[index].style.display = 'flex'
        var box = $('.input-text')[index]
        //input 获取焦点光标在最后面
        box.value =''
        box.focus()
        box.value = tap.parentElement.childNodes[2].innerHTML
       }
    }
    //提交修改后的排序
</script>
<style>
    .bubble{
        position: absolute;
        border-radius: 5px;
        top: -30px;
        background-color: #FFFFFF;
        width: 150px;
        height: 40px;
        border: 1px solid #fff ;
        z-index: 999;
        box-shadow: 0 2px 9px rgba(51, 51, 51, 0.5);
        /* display: flex; */
        justify-content: center;
        align-items: center;
        display: none;
    }
    .bubble input{
        width: 80px;
        margin-right: 10px;
        border: 1px solid #DCDFE6 ;
        border-radius: 5px;
    }
    .bubble button{
        font-size:12px;
        background-color:#fff; 
        border: 1px solid #DCDFE6
    }
    .bubble::after{
        display : block ;
        border-width : 17px ;  
        position : absolute ;  
        bottom : -30px ;  
        left : 0px ; 
        border-style : solid  dashed  dashed ;  
        border-color : #fff  transparent  transparent ; 
        font-size : 0 ;  
        line-height : 0 ;
        content: '';
    }
</style>
@endsection