zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
							<!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>