scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
							{extend name="public/layout" /} {block name="title"}文章列表{/block} {block name="body"}
<style type="text/css">
	html,
	body {
		display: block;
		min-width: 1100px;
		height: 100%;
		overflow: hidden;
	}

	.layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1 !important;
	}

    .layui-table-sort {
        display: inline-block !important;
    }

	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
		height:92% !important;
	}

    .layui-form-label{
        width: auto;
    }
    .layui-btn-primary {
		color: #249EFB;
		border: 1px solid #249EFB;
	}
	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}
    .layui-table-page>div {
		display: flex;
		justify-content: flex-start;
	}
    .layui-btn-xs,.layui-btn-xs:hover {
		border: 1px solid #249EFB;
		background-color: #fff;
		color: #249EFB;
		padding: 0px 10px;
	}
    .layui-btn-danger,.layui-btn-danger:hover{
		color: #FF5722;
		background-color: #fff;
		border: 1px solid #FF5722;
		padding: 0px 10px;
	}
    .layui-inline {
        display: flex;
        align-items: center;
    }
    .flexBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .flex-sub {
        flex:1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .layui-input-inline {
        flex:1;
    }
    .layui-form-item .layui-input-inline {
        width: auto !important;
        max-width: 200px;
    }
    /* 手机端预览效果样式 */
    .page_article_mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0,0,0,0.5);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .page_article_phone {
        width: 410px;
		height: 95vh;
        max-height: 820px !important;
		background: url('__STATIC__/img/phoneModel.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
    }
    .page_article_box {
        width: 375px;
		height: 96%;
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px 5px 75px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 30px;
		margin-right: 4px;
    }
    /* 设置滚动条的样式 */
	.page_article_box::-webkit-scrollbar {
		width:2px;
	}
	/* 滚动槽 */
	.page_article_box::-webkit-scrollbar-track {
		-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
		border-radius:10px;
	}
	/* 滚动条滑块 */
	.page_article_box::-webkit-scrollbar-thumb {
		background:rgba(0,0,0,0.3);
		-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
	}
    .page_article_title {
        font-size: 20px;
        color: #222;
        font-weight: 700;
        text-align: center;
        margin: 0px 0px 14px;
    }
    .page_article_type {
        width: 100%;
        text-align: left;
        font-size: 13px;
        color: #384855;
        margin-top: 6px;
        margin-bottom: 20px;
    }
    .page_article_richText {
        width: 100%;
        height: auto;
        padding-top: 5px;
    }
    .page_article_richText img {
        width: 100% !important;
        margin: 0px !important;
        padding: 0px !important;
    }
    .page_article_richText video {
        width: 100% !important;
    }
    .lay-close {
		position: absolute;
		top: 30px;
		right: 25%;
		color: #fff;
		font-size: 38px !important;
		font-weight: 700;
		cursor: pointer;
	}
    .layui-tab-title .layui-this:after {
		width: 50px;
		height: 4px !important;
		background-color: #249EFB;
		top: 38px !important;
		left: 50%;
		transform: translateX(-50%);
		border: none;
		border:1px solid #249EFB !important;
	}
    .layui-card{box-shadow: none !important;}
</style>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief height100_">
				<ul class="layui-tab-title rst_box_top">
					<li data-index="1" class="font16 layui_video_list layui-this"><a href="{:url('article/index')}">图文列表</a></li>
				    <li data-index="2" class="font16 layui_video_tjss"><a href="{:url('article/statistics_data_list')}">数据统计</a></li>
				</ul>
                <div class="layui-tab-content pd0 mdt20" style="padding: 0;">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                            <div class="layui-form-item flexBox">
                                {auth:check name="article/add"}
                                <div class="layui-inline">
                                    <button class="layui-btn layuiadmin-btn-list layui-btn-primary" data-type="add">添加文章</button>
                                    <a type="button" class="layui-btn layui-btn-primary" id="cate_administration">分类管理</a>
                                    <a type="button" class="layui-btn layui-btn-primary" id="cate_administration_labels">标签管理</a>
                                </div>
                                {/auth:check}
                                <div class="flex-sub">
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <label class="layui-form-label">标题</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <label class="layui-form-label">分类</label>
                                        <div class="layui-input-inline">
                                            <select name="type" lay-filter="type" id="type" lay-search>
                                                <option value="">请选择分类</option>
                                                {volist name="type" id="t"}
                                                <option value="{$t.id}">{$t.name}</option>
                                                {/volist}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <label class="layui-form-label">标签</label>
                                        <div class="layui-input-inline">
                                            <select name="label" id="label" lay-search>
                                                <option value="">请选择标签</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <label class="layui-form-label">上传人</label>
                                        <div class="layui-input-inline">
                                            <select name="employee_id" id="employee" lay-search>
                                                <option value="">请选择人员</option>
                                                {volist name="employee" id="e"}
                                                <option value="{$e.id}">{$e.name}</option>
                                                {/volist}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">上传时间</label>
                                        <div class="layui-input-inline select-date">
                                            <input type="text" name="add_time" id="select_date" placeholder="开始时间 - 结束时间" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="margin-right: 0;">
                                        <button class="layui-btn layuiadmin-btn-list submitbtn" lay-submit lay-filter="LAY-app-contlist-search">
                                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-card-body" style="text-align: center;">
                            <table id="layui-table-article" lay-filter="layui-table-article"></table>
                            <script type="text/html" id="layui-tagsbar">
                                {auth:check name="article/add"}
                                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
                                        {/auth:check}
                                        {auth:check name="data/cluedata"}
                                <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="evidence-clue-list">线索记录</a>
                                {/auth:check}
                                {auth:check name="article/del"}
                                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
                                        {/auth:check}
                                {auth:check name="dailyTasks/assign_org"}
                                  <a class="layui-btn layui-btn-xs" lay-event="daily-tasks">设置任务</a>
                                {/auth:check}
                                <a class="layui-btn layui-btn-xs" lay-event="preview">预览</a>
                            </script>
                            <script type="text/html" id="show">
                                <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="show" {{ d.publish == 1 ? 'checked' : '' }}>
                            </script>
                            <script type="text/html" id="cover_img">
                              {{# if(d.cover_img){ }}
                                <img src="{{d.cover_img}}?x-oss-process=image/resize,w_50" style="width: 30px;height: 30px;"/>
                              {{# }else{ }}
                                <span style="color: #cccccc;">无</span>
                              {{# } }}
                                
                            </script>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <iframe class="data_lists layadmin-iframe" src="" style="width: 100%;height:100%;" scrolling="0" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <!-- 预览手机端效果 -->
    <div class="page_article_mask layui-hide">
        <div class="page_article_phone">
            
        </div>
        <i class="layui-icon layui-icon-close lay-close"></i>
    </div>
    {/block} {block name="js"}
    <script type="text/html" id="titletpl">
      {{# if(d.title){ }}
        <span>{{d.title}}</span>
      {{# }else{ }}
        <span style="color: #cccccc;">无</span>
      {{# } }}
    </script>
    <script type="text/html" id="contenttpl">
      {{# if(d.content){ }}
        <span>{{d.content}}</span>
      {{# }else{ }}
        <span style="color: #cccccc;">无</span>
      {{# } }}
    </script>
    <script type="text/html" id="typetpl">
      {{# if(d.type){ }}
        <span>{{d.type}}</span>
      {{# }else{ }}
        <span style="color: #cccccc;">无</span>
      {{# } }}
    </script>
    <script type="text/html" id="labeltpl">
      {{# if(d.label){ }}
        <span>{{d.label}}</span>
      {{# }else{ }}
        <span style="color: #cccccc;">无</span>
      {{# } }}
    </script>
    <script type="text/html" id="employee_name">
        {{# if(d.employee_name){ }}
        <span>{{d.employee_name}}</span>
        {{# }else{ }}
        <span style="color: #cccccc;">无</span>
        {{# } }}
    </script>
    <script>
        layui.config({
            base: '__LAYUI__/',
            urlbase: '/sys'
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form','laydate'], function () {
    
            var $ = layui.$,
                table = layui.table,
                form = layui.form,
                laydate = layui.laydate,
                scrollTopNum = 0;
                //日期范围
            laydate.render({
                elem: '#select_date'
                , type: 'date'
                , range: true
                , trigger: 'click'//呼出事件改成click
            });
			document.onkeydown=function(event){
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode==13){ 
					$(".submitbtn").trigger("click");
				}
			};
            $('.layui_video_tjss').on('click',function(){
                $('.layui-fluid').css({'height':'100%'})
                // $('.data_lists').attr('src',"{:url('article/statistics_data_list')}");
            })
			$('.layui_video_list').on('click',function(){
				$('.layui-fluid').css({'height':'auto'})
			})
            //监听搜索
            form.on('submit(LAY-app-contlist-search)', function (data) {
                var field = data.field;
                //执行重载
                table.reload('layui-table-article', {
                    where: field
                    ,page: {
                        curr: 1
                    }
                });
            });
            //分类管理
            $("#cate_administration").click(function(){
                layer.open({
                    type: 2,
                    title: ['分类管理', 'color:#333333;background-color:#D8E6F1;'],
                    content : '{:url("article/cate_article")}',
                    resize: false,
                    area: ['80%', '80%'],
                    end: function () {
                        location.reload();
                    }
                });
            })
            //标签管理
            $("#cate_administration_labels").click(function(){
                layer.open({
                    type: 2,
                    title: ['标签管理', 'color:#333333;background-color:#D8E6F1;'],
                    content : '{:url("article/cate_article_labels")}',
                    resize: false,
                    area: ['80%', '80%'],
                    end: function () {
                        location.reload();
                    }
                });
            })
            //下拉框关联
	         var typeData = JSON.parse('{$label|raw}');
	        form.on('select(type)', function (data) {
	            var typeJson = typeData[data.value];
	            var typeLabel = $('#label');
	            typeLabel.empty().append('<option value="">请选择标签</option>');
	            for (r in typeJson) {
	                typeLabel.append('<option value=' + r + '>' + typeJson[r] + '</option>');
	            }
	            form.render();
	        });

            var $ = layui.$,
                active = {
                    add: function () {
                        layer.open({
                            type: 2,
                            title: ['添加文章', 'color:#333333;background-color:#D8E6F1;'],
                            content: '{:url("article/add")}',
                            resize: false,
                            area: ['80%', '80%'],
                            // btn: ['确定', '取消'],
                            yes: function (index, layero) {
                                //点击确认触发 iframe 内容中的按钮提交
                                var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                                submit.click();
                            }
                        });
                    }
                };

            $('.layui-btn.layuiadmin-btn-list').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            table.render({
                elem: '#layui-table-article',
                url: '{:url("article/list")}',
                page: true,
                limit: 20,
                height: 'full-220',
                cols: [
                    [{
                        align:'center',
                        type: 'numbers',
                        field: 'id',
                        fixed: 'left',
                        title: '序号',
                    }, {
                        align:'center',
                        templet: '#cover_img',
                        width:100,
                        title: '封面图片',
                    }, {
                        align:'center',
                        field: 'title',
                        title: '标题',
                        minWidth: 150,

                        templet: '#titletpl',
                    }, {
                        align:'center',
                        field: 'type',
                        title: '分类',
                        maxWidth: 100,
                        templet: '#typetpl',

                    }, {
                        align:'center',
                        field: 'label',
                        title: '标签',
                        maxWidth: 100,
                        templet: '#labeltpl',
                    }, {
                        align:'center',
                        field: 'view_times',
                        title: '浏览次数',
                        sort: true,
                        minWidth: 110
                    }, {
                        align: 'center',
                        title: '转发次数',
                        sort: true,
                        field: 'shared_times',
                        minWidth: 110
                    }, {
                        align: 'center',
                        title: '浏览时长',
                        sort: true,
                        field: 'visit_due_time',
                        minWidth: 110
                    }, {
                        align:'center',
						title: '展示',
						minWidth: 100,
						templet:'#show'
					}, {
                        align:'center',
                        field: 'uploadtime',
                        title: '上传时间',
                        sort: true,
                        minWidth: 110
                    }, {
                        align:'center',
                        templet: '#employee_name',
                        title: '上传人',
                        sort: true,
                        minWidth: 110
                    }, {
                        title: '操作',
                        width: 380,
                        align: 'center',
                        fixed: 'right',
                        toolbar: '#layui-tagsbar'
                    }]
                ],
                text: '对不起，加载出现异常！'
            });

            table.on('sort(layui-table-article)', function (obj) {
                table.reload('layui-table-article', {
                    initSort: obj
                    , where: {
                        order: obj.field + ' ' + obj.type
                    }
                });
            });

            //监听工具条
            table.on('tool(layui-table-article)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('确定删除此文章？',{title: ['信息', 'color:#333333;background-color:#D8E6F1;'],}, function (index) {
                        $.ajax({
                            url: "{:url('article/del')}",
                            data: {
                                id: data.id
                            },
                            type: 'post'
                        });
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        title: ['编辑文章', 'color:#333333;background-color:#D8E6F1;'],
                        content: '{:url("article/edit")}?id=' + data.id,
                        resize: false,
                        area: ['80%', '80%'],
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var submit = layero.find('iframe').contents().find(
                                "#layuiadmin-app-form-submit");
                            submit.click();
                        },
                        end: function() {
                            scrollPostion(scrollTopNum);
                            setTimeout(() => {
                                $('.layui-table-main').scroll(function (e) {
                                    scrollTopNum = $(this).scrollTop();
                                    console.log(scrollTopNum, '<<<记录位置');
                                })
                            }, 800);
                        }
                    });
                }else if (obj.event === 'evidence-clue-list') {
					layer.open({
						type   : 2,
                        title: ['素材线索数据', 'color:#333333;background-color:#D8E6F1;'],
						content: "{:url('data/cluedata')}?type=article&id=" + data.id,
						resize: false,
						area   : ['80%', '80%']
					});
				} else if (obj.event === 'daily-tasks') {
                    layer.open({
                        type: 2,
                        title: ['设置任务', 'color:#333333;background-color:#D8E6F1;'],
                        content: "{:url('dailyTasks/assign_org')}?type=article&id=" + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                } else if (obj.event === 'preview') {
                    requestArticleDetail(data.id);
                }
            });

            setTimeout(() => {
                $('.layui-table-main').scroll(function (e) {
                    scrollTopNum = $(this).scrollTop();
                    console.log(scrollTopNum, '<<<记录位置');
                })
            }, 800)

            function scrollPostion(num) {
                $('.layui-table-main').scrollTop(num)
            }

            $('.lay-close').click(function(){
                $('.page_article_mask').addClass('layui-hide');
            })

            function requestArticleDetail(id) {
                $.ajax({
                    type: 'post',
                    url: '{:url("article/preview_read")}',
                    data: {
                        id: id
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            $('.page_article_mask').removeClass('layui-hide');
                            setArticleDetailHtml(res.data)
                        }
                    }
                })
            }

            function setArticleDetailHtml(data) {
                let htmls = `<div class="page_article_box">
                    <div class="page_article_title">
                        ${data.title}
                    </div>
                    <div class="page_article_richText">${data.content}</div>
                </div>`;
                $('.page_article_phone').html(htmls);
            }
            /**
             * ${data.type?`<div class="page_article_type">
                        #${data.type}#
                    </div>`:''}
             * */ 
            
	        form.on('switch(show)', function (obj) {
		      	var id = obj.value;
		      	$.ajax({
				        type: "post",
				        url: '{:url("article/publish")}',
				        data: {
				          id: id
				        },
				        success: function (res) {
				          layer.msg(res.msg, {time: 2000});
				        }
			    });
		    });

        });
    </script>
</body>
{/block}