duhongyu
/
Yichuang12345_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>工单查询</title>
    <script src="../Script/Common/huayi.load.js"></script>
    <script src="../Script/Common/huayi.config.js"></script>
    <link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
    <link rel="stylesheet" href="../css/init.css" />
    <style>
        #sqzx th {
            padding: 5px 8px 5px 0;
            text-align: right;
        }

        .select {
            width: 150px;
            background-color: #FFF;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 1px;
            color: inherit;
            padding: 6px 12px;
        }

        #sex {
            background-color: #FFF;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 1px;
            color: inherit;
            padding: 6px 12px;
        }

        input {
            background-color: #FFF;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 1px;
            color: inherit;
            padding: 6px 12px;
        }

        #sqzx td {
            padding: 6px 0 5px 10px;
        }

        .lxr ul li {
            float: left;
            list-style: none;
            width: 30%;
            margin-bottom: 5px;
            padding-top: 10px;
        }

        .clearFix:after {
            content: "";
            display: block;
            clear: both;
        }

        .form-group {
            padding-left: 40px;
            margin-bottom: 0;
        }

        textarea {
            height: 70px;
            border: 1px solid #ccc;
            border-radius: 1px;
            width: 50%;
            resize: none;
        }

        .textarea_box {
            margin-top: 10px;
        }

        .box_content {
            border-bottom: 1px solid #ccc;
        }

        .tj_content {
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }
        .t-shade {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.48);
            z-index: 10004;
            display: none;
        }

        .lyxz .shade_k {
            z-index: 10005;
            width: 60%;
            margin: 10% auto;
            background-color: #fff;
            box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
            border-radius: 5px;
        }
        .shade_title {
            padding: 0 80px 0 20px;
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #eee;
            font-size: 16px;
            color: #FFFFFF;
            overflow: hidden;
            background-color: #1ab394;
            border-radius: 2px 2px 0 0;
            position: relative;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .cx {
            display: block;
        }
        .setwin {
            position: absolute;
            right: 15px;
            top: 5px;
            font-size: 0;
            line-height: initial;
        }
            .setwin a {
                position: relative;
                width: 16px;
                height: 16px;
                font-size: 20px;
                color: #fff;
            }
           
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="daoHang clearfix">
            <div class="dhLeft">
                <sapn>
                    <i class="syIcon"></i>位置：
                    <a href="javaScript:;" id="ReIndex">首页</a>&gt;
                    <a href="javaScript:;">工单管理</a>&gt;
                    <a href="" style="color: #000;">工单查询</a>
                </sapn>
            </div>
        </div>
        <div style="padding: 10px;" class="tj_content clearFix">
            <div>
                <span>【搜索信息】</span>
                <div class="box_content">
                    <table id="sqzx" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                    	<tr>
                            <th>登记时间：</th>
                            <td colspan="3">
                                <input type="text" id="startTime" class="laydate-icon" style="height: 32px;" />&nbsp;——&nbsp;<input type="text" id="endTime" class="laydate-icon" style="height: 32px;" />
                            </td>
                            <th>登记人：</th>
                            <td>
                                <select name="" id="djr" class="select">
                                    <option selected="selected" value="">请选择</option>
                                </select>
                            </td>
                            <th>状态：</th>
                            <td>
                                <select name="" id="zt" class="select">
                                    <option selected="selected" value="">请选择</option>
                                </select>
                            </td>
                       </tr>
                        <tr>
                            <th>信息分类：</th>
                            <td colspan="3">
                                形式分类：
                                <select name="" id="xxlb" class="select">
                                    <option selected="selected" value="">请选择</option>
                                </select>
                                内容大类：
                                <select name="" id="tsdl" class="select">
                                    <option selected="selected" value="">请选择</option>
                                </select>
                                内容小类：
                                <select name="" id="tsxl" class="select">
                                    <option selected="selected" value="">请选择</option>
                                </select>
                            </td>

                        </tr>
                        <tr>
                            <th>交办单位：</th>
                            <td colspan="5">
                                <span class="">
                                    区域：
                                    <select name="" id="JArea" class="select" style="width: 200px;">
                                        <option selected="selected" value="">请选择</option>
                                    </select>
                                </span>
                                <span class="">
                                    部门类别&nbsp;:
                                </span>
                                <span class="">
                                    <select name="" id="Jtype" class="select" style="width: 230px;">
                                        <option selected="selected" value="">请选择</option>
                                    </select>
                                </span>
                                <span class="">
                                    部门&nbsp;&nbsp;:
                                </span>
                                <span class="">
                                    <select name="" id="Department" class="select" style="width: 200px;">
                                        <option selected="selected" value="">请选择</option>
                                    </select>
                                </span>
                            </td>
                        </tr>
                        <tr>
                        	<th>反映地区：</th>
                            <td>
                                <select name="" id="FArea" class="select"></select>
                            </td>
                        	 <th>信息来源：</th>
                            <td>
                                <select name="" id="xxly" class="select">
                                    <option selected="selected" value="">请选择</option>
                                </select>
                            </td>
                            <th>登记编号：</th>
                            <td>
                                <input type="text" id="djbh" />
                            </td>
                            
                        </tr>
                        <tr>
                            <th>投诉人姓名：</th>
                            <td>
                                <input type="text" id="name" />
                            </td>
                            <th>投诉电话：</th>
                            <td>
                                <input type="text" id="tel" />
                            </td>
                            <th>内容关键：</th>
                            <td>
                                <input type="text" id="key" />
                                <a class="sc_btn btns db search">搜索</a>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
            <div>
                <div  style="width: 100%;padding: 10px;">
                    <table id="orderlist" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
                        <thead>
                            <tr>
                                <th data-field="F_WorkOrderId">登记编号</th>
                                <th data-field="F_RegDate">登记时间</th>
                                <!--<th data-field="UserName" data-align="center">登记人</th>-->
                                <th data-field="F_UserCode" data-align="center">登记人</th>
                                <th data-field="SourceName">信息来源</th>
                                <th data-field="TypeName">信息类别</th>
                                <th data-field="DeptName">交办单位</th>
                                <th data-field="WorkStateName">工单状态</th>
                                <th data-field="F_ComContent" data-formatter="GetCont">详细内容</th>
                                <th data-field="FilePath" data-formatter="setCode">录音文件</th>
                                <th data-field="jbcs">交办数</th>
                                <th data-field="fkcs">反馈数</th>
                                <th data-field="cbcs">催办数</th>
                                <th data-field="F_WorkOrderId" data-formatter="Dispose" data-align="center">操作</th>
                            </tr>
                        </thead>
                        <tbody class="list"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--下载框-->
    <div class="t-shade lyxz">
        <div class="shade_k">
            <div class="shade_title">
                <span>录音播放与下载<srong class="cknum"></srong></span>
                <span class="setwin gbly"><a>x</a></span>
            </div>
            <div class="shade_content">
                <div class="Ly_box audiojs">
                </div>
            </div>
        </div>
    </div>
    <script src="../css/laydate/laydate.js"></script>
    <script src="../My97DatePicker/WdatePicker.js"></script>
    <script>
        $(document).ready(function () {
            load();
            //坐席
            $.getJSON(huayi.config.callcenter_url + "UserAccount/GetSeatList", { "token": $.cookie("token") }, function (data) {
                if (data.state.toLowerCase() == "success") {
                    var content = data.data;
                    $(content).each(function (i, n) {
                        $("<option value='" + n.F_UserCode + "'>" + n.F_UserName + "</option>").appendTo($("#djr"));
                    })
                }
            })
            //状态
            $.getJSON(huayi.config.callcenter_url + "Dictionary/GetDicValueListById", { "token": $.cookie("token"), id: 5 }, function (data) {
                if (data.state.toLowerCase() == "success") {
                    var content = data.data;
                    $(content).each(function (i, n) {
                        $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo($("#zt"));
                    })
                }
            })
            //信息来源
            $("#xxly").empty();
            $("#xxly").append('<option selected="selected" value="">请选择</option>');
            $.getJSON(huayi.config.callcenter_url + "Dictionary/GetDicValueListById", {
                "token": $.cookie("token"),
                id: 6
            }, function (data) {
                if (data.state.toLowerCase() == "success") {
                    var content = data.data;
                    $(content).each(function (i, n) {
                        $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo($("#xxly"));
                    })
                }
            });
            //信息分类
            $("#xxlb").empty();
            $("#xxlb").append('<option selected="selected" value="">请选择</option>');
            $.getJSON(huayi.config.callcenter_url + "Dictionary/GetDicValueListById", {
                "token": $.cookie("token"),
                id: 2
            }, function (data) {
                if (data.state.toLowerCase() == "success") {
                    var content = data.data;
                    $(content).each(function (i, n) {
                        $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo($("#xxlb"));
                    })
                }
                $("#xxlb").change(function () {
                    $("#tsxl").empty();
                    $("#tsxl").append('<option selected="selected" value="">请选择</option>');
                    loadDic($("#tsdl"), $("#xxlb").val());
                });

                $("#tsdl").change(function () {
                    loadDic($("#tsxl"), $("#tsdl").val());
                });
            })
            loadArea($("#FArea"));
            loadArea($("#JArea"));
            $("#FArea").change(function () {
                $("#Twon").empty();
                $("#Twon").append('<option selected="selected" value="">请选择</option>');
                $.getJSON(huayi.config.callcenter_url + "Department/GetTownList", { "token": $.cookie("token"), aid: $("#FArea").val() }, function (data) {
                    if (data.state.toLowerCase() == "success") {
                        var content = data.data;
                        $(content).each(function (i, n) {
                            $("<option value='" + n.F_TownId + "'>" + n.F_TownName + "</option>").appendTo($("#Twon"));
                        })
                    }
                })
            })
            $("#JArea").change(function () {
                $("#Jtype").empty();
                $("#Jtype").append('<option selected="selected" value="">请选择</option>');
                $("#Department").empty();
                $("#Department").append('<option selected="selected" value="">请选择</option>');
                $.getJSON(huayi.config.callcenter_url + "Department/GetDeptTypeList", { "token": $.cookie("token"), aid: $("#JArea").val() }, function (data) {
                    if (data.state.toLowerCase() == "success") {
                        var content = data.data;
                        $(content).each(function (i, n) {
                            $("<option value='" + n.F_DeptTypeId + "'>" + n.F_DeptTypeName + "</option>").appendTo($("#Jtype"));
                        })
                    }
                })
            })
            $("#Jtype").change(function () {
                $("#Department").empty();
                $("#Department").append('<option selected="selected" value="">请选择</option>');
                $.getJSON(huayi.config.callcenter_url + "Department/GetDeptList", { "token": $.cookie("token"), tid: $("#Jtype").val() }, function (data) {
                    if (data.state.toLowerCase() == "success") {
                        var content = data.data;
                        $(content).each(function (i, n) {
                            $("<option value='" + n.F_DeptId + "'>" + n.F_DeptName + "</option>").appendTo($("#Department"));
                        })
                    }
                })
            })
            $("#FArea").change(function () {
                $("#sfdz").val($("#FArea").find("option:selected").text());
            })

            $(".min_select").each(function () {
                $(this).empty();
                for (var i = 1; i <= 10; i++) {
                    if (i == 5) {
                        $("<option selected='selected' value='5'>5</option>").appendTo($(this));
                    }
                    else {
                        $("<option value='" + i + "'>" + i + "</option>").appendTo($(this));
                    }
                }
            });

            laydate.skin('molv');

            laydate({
                elem: '#startTime',
                event: 'focus'
            });

            laydate({
                elem: '#endTime',
                event: 'focus'
            });

            $(".search").click(function () {
                load();
            })
            //关闭录音弹出
            $(".gbly").click(function () {
                $(".lyxz").removeClass("cx");
                $('audio')[0].pause();
            });
            var html = '<div >' +
                '<ul class="nav nav-tabs">' +
                '<li class="active">' +
                '<a href="#">参数信息</a>' +
                '</li>' +
                '</ul>' +
                '<div class="add_time">' +
                '<label for="">发布标题:</label>' +
                '<input type="text" id="title" class="photo"  />' +
                '</div>' +
                '<div class="add_time">' +
                '<label for="">是否有期限:</label>' +
                '<label style="font-weight:normal;width: 50px;"><input type="radio" value="1" name="limit" checked="checked" />无</label>' +
                '<label style="font-weight:normal;width: 50px;"><input type="radio" value="2" name="limit" />有</label>' +
                '</div>' +
                '<div class="add_time">' +
                '<label for="">发布期限:</label>' +
                '<input type="text" class="photo laydate-icon" id="limittime" onclick="WdatePicker({ dateFmt: \'yyyy-MM-dd\' })" />' +
                '</div>' +
                '<div class="add_time tc" style="text-align: center;">' +
                '<button type="button" class="btn sc_btn " id="tc" onclick="fbgd()">发&nbsp;&nbsp;布</button>' +
                '</div>' +
                '</div>';
            
            $(".release").click(function () {
                tc = layer.open({
                    type: 1,
                    content: html, //iframe的url，no代表不显示滚动条
                    title: '发布工单',
                    area: ['40%', '60%'], //宽高
                });
            })
            $(".print").click(function () {
                layer.open({
                    type: 2,
                    content: "PrintPreview.html?wid="+$(".hidWid").val(), //iframe的url，no代表不显示滚动条
                    title: '打印',
                    area: ['60%', '80%'], //宽高
                });
            })

            $("#orderlist").on("click-row.bs.table", function (e, row, ele) {
                $('.success').removeClass('success'); //去除之前选中的行的，选中样式
                $(ele).addClass('success'); //添加当前选中的 success样式用于区别
            });

            $("#sqzx").bind("keydown", function (event) {
                var keyCode = event.keyCode?event.keyCode:event.which?event.which:event.charCode;
                if (keyCode == 13) {
                    load();
                }
            })
        })
        var tc;
        function fbgd() {
            if (!$("#title").val()) {
                layer.confirm('请输入发布标题！', {
                    btn: ['确定']
                });
                return;
            }
            $.post(huayi.config.callcenter_url + 'WorkOrder/ReleaseWorkOrder', {
                workorderid: $(".hidWid").val(), title: $("#title").val(),
                islimit: $('input[name="limit"]:checked ').val(), limittime: $("#limittime").val(), "token": $.cookie("token")
            }, function (result) {
                result = JSON.parse(result);
                if (result.state.toLowerCase() == "success") {
                    layer.msg("发布成功");
                    layer.close(tc); //关闭弹层
                }
            })
        }
        //加载字典
        function loadDic(obj, pid) {
            obj.empty();
            obj.append('<option selected="selected" value="">请选择</option>');
            $.getJSON(huayi.config.callcenter_url + "Dictionary/GetDicValueListByParentId", {
                "token": $.cookie("token"),
                pid: pid
            }, function (data) {
                if (data.state.toLowerCase() == "success") {
                    var content = data.data;
                    $(content).each(function (i, n) {
                        $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo(obj);
                    })
                }
            })
        }
        //加载区域
        function loadArea(obj) {
            obj.empty();
            obj.append('<option selected="selected" value="">请选择</option>');
            $.getJSON(huayi.config.callcenter_url + "Department/GetAreaList", {
                "token": $.cookie("token")
            }, function (data) {
                if (data.state.toLowerCase() == "success") {
                    var content = data.data;
                    $(content).each(function (i, n) {
                        $("<option value='" + n.F_AreaId + "'>" + n.F_AreaName + "</option>").appendTo(obj);
                    })
                }
            })
        };
        //获取查询信息
        function load() {
            //先销毁表格
            $('#orderlist').bootstrapTable('destroy');
            //初始化表格,动态从服务器加载数据
            $("#orderlist").bootstrapTable({
                method: "get", //使用get请求到服务器获取数据
                url: huayi.config.callcenter_url + "WorkOrder/GetList", //获取数据的Servlet地址
                contentType: "application/x-www-form-urlencoded",striped: true, //表格显示条纹
                pagination: true, //启动分页
                pageSize: 10, //每页显示的记录数
                pageNumber: 1, //当前第几页
                pageList: [10, 20, 50, 100], //记录数可选列表
                search: false, //是否启用查询
                showColumns: false, //显示下拉框勾选要显示的列
                showRefresh: false, //显示刷新按钮
                sidePagination: "server", //表示服务端请求
                //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                //设置为limit可以获取limit, offset, search, sort, order
                queryParamsType: "undefined",
                queryParams: function queryParams(params) { //设置查询参数
                    var param = {
                        page: params.pageNumber,
                        pagesize: params.pageSize,
                        workid: $("#djbh").val(),
                        state: $("#zt").val(),
                        name: $("#name").val(),
                        tel: $("#tel").val(),
                        key: $("#key").val(),
                        usercode: $("#djr").val(),
                        type: $("#xxlb").val(),
                        bigtype: $("#tsdl").val(),
                        smalltype: $("#tsxl").val(),
                        source: $("#xxly").val(),
                        sourcearea: $("#FArea").val(),
                        starttime: $("#startTime").val(),
                        endtime: $("#endTime").val(),
                        areaid: $("#JArea").val(),
                        depttype: $("#Jtype").val(),
                        deptid: $("#Department").val(),
                        token: $.cookie("token")
                    };
                    return param;
                },
                onLoadSuccess: function (data) { //加载成功时执行
                    //layer.msg("加载成功");
                    //console.log(data);
                },
                onLoadError: function () { //加载失败时执行
                    //layer.msg("加载数据失败", { time: 1500, icon: 2 });
                }
            });
        }
        //音频
        function setCode(val) {
            if (val) {
                return '<div class="imgs" style="cursor: pointer;">' +
                    '<img src="../img/vice.png" alt="" onclick= ck(this) item="' + val + '" />' +
                    '</div>';
            } else {
                return '';
            }
        }
        //录音
        function ck(val) {
            var path = $(val).attr("item");
            $(".lyxz").addClass("cx");
            $(".Ly_box").empty();
            $(".down").attr("href", path);
            $('<audio style="width: 100%;"class=" " src="' + path + '" loop="loop" controls="controls" ></audio>').appendTo(".Ly_box");
        }
        function GetCont(val) {
            if (val) {
                var str = '<div '
                if (val.length > 10) {
                    str = str + ' title="' + val + '" ';
                    val = val.substr(0, 10) + "...";
                }
                return str + '>' + val + '</div>';
            }
            else {
                return '';
            }
        }
        //操作
        function Dispose(val) {
            return '<div class="imgs" >' +
            '<a class="xg" onclick="ckxq(' + val + ')"> 查看详情</a>' +
            '</div>';
        }
        //查看详情
        function ckxq(str) {
            layer.open({
                type: 2,
                content: "WorkOrderDetail.html?wid=" + str, //iframe的url，no代表不显示滚动条
                title: '工单详情',
                area: ['85%', '80%'], //宽高
            });
        }
        
    </script>
</body>

</html>