zhaobao
/
scyf


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>知识库</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=312"/>
    <link rel="stylesheet" href="../../../assets/module/dtree/dtree.css"/>
    <link rel="stylesheet" href="../../../assets/module/dtree/font/dtreefont.css"/>
    <style>

        .layui-table-cell {
            height: auto;
        }

        ::-webkit-scrollbar {
            display: none
        }

        /*公共样式*/
        a,
        a:hover,
        a:link,
        a:visited,
        a:active {
            text-decoration: none;
        }

        /*列表展示*/
        .left-menu ul {
            border-right: 1px solid #ddd;
            padding-right: 20px;
        }

        .left-menu ul > li > a {
            display: block;
            padding: 10px 15px;
        }

        .menu-active > a {
            background: #25afe5;
            border-radius: 6px;
            color: #fff;
        }

        .time-box{
            overflow: hidden;
            padding-top: 20px;
        }

        .time1{
            float: left;
            margin-right: 50px;
        }

        .fu{
            display: inline-block;
            font-size: 22px;
            color: #fff;
            margin-bottom: 10px;
            margin-top: 10px;
            padding: 10px 20px;
            background: #3a98ff;
        }
        .line{
            margin-top: -10px;
            border-bottom: 2px solid #3a98ff;
            margin-bottom: 25px;
        }
    </style>
</head>
<body>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-card-header">
                选择指导书
            </div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="demo">
                    <ul class="layui-tab-title">
                        <li class="layui-this"  lay-id="already">已选择的指导书</li>
                        <li  lay-id="select">选择指导书</li>
                    </ul>
                    <div class="layui-tab-content" style="min-height: 500px">
                        <div class="layui-tab-item layui-show" style="overflow: hidden;">
                            <div class="text-center" id="emptyMsg" style="min-height:220px;padding-top: 30px;">
                                <span style="font-size: 14px">暂无数据</span>
                            </div>
                            <div class="layui-col-sm3 layui-col-md1 layui-col-lg3" id="dataShow">
                                    <div class="layui-card">
                                        <div class="layui-card-body mini-bar" id="menuDiv">
                                            <div class="left-menu">
                                                <ul id="menuListL" style="background-color: #fff"></ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <div class="layui-col-sm9 layui-col-md1 layui-col-lg9" id="dataShow2">
                                    <div class="layui-card">
                                        <div class="layui-card-body">
                                            <div style="word-wrap: break-word;border: 0px" class="panel-body" id="postContent">

                                            </div>
                                            <div class="time-box">
                                                <h4><span class="time1" style="font-size: 12px;" id="postAuthor">发布人：</span></h4>
                                                <h4><span class="time1" style="font-size: 12px;" id="createdTime">发布时间：</span></h4>
                                            </div>
                                            <div style="margin-bottom: 30px;" id="fujianDiv">
                                                <span style="font-size: 16px;" class="fu">附件</span>
                                                <div class="line"></div>
                                                <p style="color: indianred;">
                                                    温馨提示：图片可直接点击查看大图，文件可点击下载
                                                </p>
                                                <div id="attachment">

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form toolbar">
                                <div class="layui-form-item text-right">
                                    <div class="layui-inline pull-left">
                                        <label class="layui-form-label w-auto w-padding">搜索：</label>
                                        <div class="layui-input-inline mr0">
                                            <input name="keyword" class="layui-input" type="text" placeholder="输入关键字"/>
                                        </div>
                                    </div>
                                    <div class="layui-inline pull-left">
                                        <button class="layui-btn icon-btn" lay-filter="formSubSearch" lay-submit>
                                            <i class="layui-icon">&#xe615;</i>搜索
                                        </button>
                                    </div>
                                    <div class="layui-inline pull-right">
                                        <button type="button" class="layui-btn" id="saveBtn" >保存</button>
                                    </div>
                                </div>
                            </div>


                            <table class="layui-table" id="datatable" lay-filter="datatable"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 表格照片列 -->
<script type="text/html" id="imgTpl">
    {{#  if(d.postPicUrl != null && d.postPicUrl != ''){ }}
    <img class="media-object" width="50px" height="50px" src="{{d.postPicUrl}}">
    {{#  } else { }}
    <img class="media-object" width="50px" height="50px" src="/assets/images/error.jpg">
    {{#  } }}
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=312"></script>
<script type="text/javascript" src="../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    var baseUrl2 = '';
    var riskPointId = '';
    layui.use(['layer','element', 'table', 'admin','form', 'uParas', 'util','element'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;
        var form   = layui.form;
        var uParas= layui.uParas;
        baseUrl2 = uParas.baseUrl;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        riskPointId = uParas.getUrlParam("riskPointId");
        //console.log("riskPointId_________________"+riskPointId);
        //riskPointId = "1265";
        var postId = '';
        var insTb ;

        //已选择的指导书初始化
        function initPage(){
            $.ajax({
                type: "post",
                url: baseUrl2 + "/ent/post/selectWorkInstruction",
                data: {riskPointId: riskPointId, showType:"already"},
                dataType: "json",
                success: function (resp) {
                    if (resp.code == 0) {
                        if (resp.count > 0 && resp.data.length > 0){
                            $("#emptyMsg").hide();
                            $("#dataShow").show();
                            $("#dataShow2").show();
                            contentMeun(resp.data);
                        }else{
                            $("#dataShow").hide();
                            $("#dataShow2").hide();
                            $("#emptyMsg").show();
                        }
                    } else {
                        layer.msg(resp.msg);
                        $("#emptyMsg").show();
                        $("#dataShow").hide();
                        $("#dataShow2").hide();
                    }
                }
            });
        }


        //内容函数
        function contentMeun(data) {
            var media = '';
            $.each(data, function (index, item) {
                if (index == 0){
                    postId = item.postId;
                    media += '<li class="nav-item" style= "display: flex;height: 30px">';
                }else{
                    media += '<li class="nav-item" style= "display: flex;height: 30px">' ;
                }
                media += '  <a href="#" style="display:block;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;width: 80%;padding : 5px  5px" onclick="viewDetail(\''+item.postId+'\',\''+index+'\')" title="'+ item.postTitle +'">' + item.postTitle + '</a>' +
                    //'<p style="margin-top: 5px;" onclick="delRelation(\''+item.postId+'\')"><i class="layui-icon layui-icon-close"></i></p>'+
                    '<p style="margin-top: 5px;" class="delClick" data-val="'+item.postId+'"><i class="layui-icon layui-icon-close"></i></p>'+
                    '</li>'
            });
            $("#menuListL").html('');
            $("#menuListL").append(media);
            viewDetail(postId,0);
        }

        //渲染表格
        function renderTable() {
            var url    = uParas.baseUrl+'/ent/post/selectWorkInstruction';
            insTb = table.render({
                elem : '#datatable',
                url  : url,
                page : true,
                where :{"riskPointId":riskPointId,showType:"select"},
                cellMinWidth: 100,
                method:"post",
                cols : [[
                    {type : 'checkbox'} ,
                    {field: 'postPicUrl'  , sort:false  , event:'view',title:'图片'  , width:100,templet:'#imgTpl'},
                    {field: 'postTitle'   , sort:false  , title:'标题'  , width:200},
                    {field: 'postAuthor'  , sort:false  , title:'作者'  },
                    {field: 'createdTime' , sort:false  , title:'创建时间'  },
                ]]
            });
        }

        //一些事件监听
        element.on('tab(demo)', function(data){
            if (data.index == 0){
                initPage();
            } else if(data.index == 1){
                renderTable();
            }
        });

        initPage();

        //保存选择
        $("#saveBtn").click(function () {
            var ids = [];
            var checkStatus = table.checkStatus('datatable');
            var checkData = checkStatus.data;
            if (checkData.length < 1){
                layer.msg("请选择指导书!");
                return ;
            }
            checkData.forEach(function (val, index, arr) {
                ids.push(val.postId);
            });
             $.ajax({
                 type: "post",
                 url: uParas.baseUrl+"/ent/riskPoint/saveWorkInstruction",
                 data: {riskPointId: riskPointId, ids: ids.join(",")},
                 dataType: "json",
                 success: function (result) {
                     if (result.code === 1) {
                         layer.closeAll();
                         element.tabChange('demo', "already");
                         initPage();
                     } else {
                         layer.msg(result.msg);
                     }
                 }
             });
        });

        // 搜索
        form.on('submit(formSubSearch)', function(data) {
            insTb.reload({where: data.field}, 'data');
        });

        //绑定事件
        $(document).on('click', '.delClick', function(e) {
            //防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
            e.stopPropagation();
            var postId = $(this).attr('data-val');
            $.ajax({
                type: "post",
                url: baseUrl2 + "/ent/riskPoint/delWorkInstruction",
                data: {riskPointId: riskPointId, postId: postId},
                dataType: "json",
                success: function (result) {
                    if (result.code === 1) {
                        initPage();
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
        });
    });
    //展示指导书详情
    function viewDetail(postId,index){
        $('#menuListL li').removeClass('menu-active');
        $('#menuListL li').eq(index).addClass('menu-active');
        $.ajax({
            type: "get",
            url: baseUrl2 + "/ent/post/get/"+postId,
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {
                    var post = res.data.post;
                    if (post != null && post != ''){
                        var attachmentList = res.data.attachList;
                        $("#postAuthor").html("发布人："+post.postAuthor);
                        $("#createdTime").html("时间："+post.createdTime);
                        $("#postContent").html(post.postContent);
                        var attachDetail = '';
                        if (attachmentList != null && attachmentList.length > 0){
                            $.each(attachmentList, function (index, item) {
                                attachDetail += '<p>'
                                    + '<a target="_blank" style="color: #5b9bd1" href="'+item.savePath+'" download="'+item.attName+'">'
                                    + item.attName + '</a></p>';
                            });
                        }
                        $("#attachment").html(attachDetail);
                    }
                }
            }
        });
    }

</script>
</body>
</html>