<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>备件申请-待出库</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/lib/font/iconfont.css" />
</head>
<body>

<div class="layui-fluid">
    <div class="layui-form layui-card">
      <div class="layui-tab layui-tab-brief">
          <ul class="layui-tab-title">
              <sfTags:pagePermission authFlag="WDGD_DPD_DPD_T" html='<a href="${ctx}/order/tobesentOrderList"><li class="layui-this">待指派工单</li></a>'/>
              <button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10"  lay-submit lay-filter="resetButton" >
                  <i class="layui-icon fs-12">&#xe615;</i>
                  重置
              </button>
              <button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10" id="searchBtn" lay-submit lay-filter="LAY-user-back-search">
                  <i class="layui-icon fs-12">&#xe615;</i>
                  查询
              </button>
          </ul>
      </div>
      <div class="layui-card-body layuiadmin-card-header-auto" >
          <form class="layui-form layui-card" action="" id="searchForm">
          <div class="layui-form-item">
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">工单编号：</label>
                  <div class="layui-input-block">
                      <input type="text" name="number" class="layui-input" >
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">标记类型：</label>
                  <div class="layui-input-block" >
                      <select name="flag" id="flag">
                          <option value="">请选择</option>
                          <c:forEach var="mark" items="${typeList}">
                              <option value="${mark.columns.id}">${mark.columns.name}</option>
                          </c:forEach>
                      </select>
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">服务类型：</label>
                  <div class="layui-input-block" >
                      <select name="service_type" lay-filter="aihao" lay-search>
                          <option value="">请选择</option>
                          <option value="安装" >安装</option>
                          <option value="维修" >维修</option>
                          <option value="咨询" >咨询</option>
                      </select>
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">保修类型：</label>
                  <div class="layui-input-block" >
                      <select name="warranty_type" lay-filter="aihao">
                          <option value="">请选择</option>
                          <option value="1" >保内</option>
                          <option value="2" >保外</option>
                      </select>
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">设备类型：</label>
                  <div class="layui-input-block" >
                      <select name="appliance_category" lay-search>
                          <option value="">请选择</option>
                          <option value="光伏组件">光伏组件</option>
                          <option value="逆变器">逆变器</option>
                          <option value="通讯模块">通讯模块</option>
                          <option value="并网箱">并网箱</option>
                          <option value="线缆">线缆</option>
                          <option value="配件">配件</option>
                      </select>
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">服务措施：</label>
                  <div class="layui-input-block">
                      <select name="service_measures" lay-search>
                          <option value="">请选择</option>
                          <c:forEach var="measures" items="${measures}">
                              <option value="${measures.columns.service_measures}">${measures.columns.service_measures}</option>
                          </c:forEach>
                      </select>
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">设备型号：</label>
                  <div class="layui-input-block">
                      <input type="text" name="appliance_model" class="layui-input" >
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">用户姓名：</label>
                  <div class="layui-input-block">
                      <input type="text" name="customer_name" class="layui-input" >
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">用户电话：</label>
                  <div class="layui-input-block">
                      <input type="text" name="customer_mobile" class="layui-input" >
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">用户地址：</label>
                  <div class="layui-input-block">
                      <input type="text" name="customer_address" class="layui-input" >
                  </div>
              </div>

              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">电站名称：</label>
                  <div class="layui-input-block">
                      <input type="text" name="power_station_name" class="layui-input" >
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">设备序列号：</label>
                  <div class="layui-input-block">
                      <input type="text" name="appliance_machine_code" class="layui-input" >
                  </div>
              </div>
              <div class="layui-col-lg2 layui-col-sm3">
                  <label class="layui-form-label">工单描述：</label>
                  <div class="layui-input-block">
                      <input type="text" name="remarks" class="layui-input" >
                  </div>
              </div>
              <div class="layui-col-lg4 layui-col-sm6">
                  <label class="layui-form-label">报单时间：</label>
                  <div class="layui-input-block">
                      <div class="layui-col-xs5">
                          <input type="text" name="repairTimeSta" class="layui-input" id="repairTime" placeholder="开始日期">
                      </div>
                      <div class="layui-col-xs2 text-c lh-30">
                          —
                      </div>
                      <div class="layui-col-xs5">
                          <input type="text" name="repairTimeEnd" class="layui-input" id="endTime" placeholder="结束日期">
                      </div>
                  </div>
              </div>
      </div>
          </form>
      </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" lay-skin="row" id="test" lay-filter="test"></table>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <sfTags:pagePermission authFlag="DPD_XJ_B" html='<button class="layui-btn layui-btn-sm" lay-event="addOrder"><i class="layui-icon layui-icon-export"></i>新建</button>'/>
                    <sfTags:pagePermission authFlag="DPD_ZP_B" html='<button class="layui-btn layui-btn-sm" lay-event="assign"><i class="layui-icon layui-icon-export"></i>指派</button>'/>
                    <sfTags:pagePermission authFlag="DPD_WX_B" html='<button class="layui-btn layui-btn-sm" lay-event="invalid"><i class="layui-icon layui-icon-export"></i>无效</button>'/>
                    <sfTags:pagePermission authFlag="DPD_DC_B" html='<button class="layui-btn layui-btn-sm" lay-event="export" id="exportBtn"><i class="layui-icon layui-icon-export"></i>导出</button>'/>
                </div>
            </script>
        </div>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var table;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'tableExt', 'jquery', 'layer','laypage','laydate','form'], function(){
        $ = layui.$,
        tableExt = layui.tableExt,
        layer = layui.layer,
        laydate = layui.laydate,
        form = layui.form;
        table = tableExt.getLayTable();

        //开始日期
        var insStart = laydate.render({
            elem: '#repairTime'
            ,type: 'datetime'
            ,done: function(value, date){
                //更新结束日期的最小日期
                insEnd.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });

                //自动弹出结束日期的选择器
                insEnd.config.elem[0].focus();
            }
        });

        //结束日期
        var insEnd = laydate.render({
            elem: '#endTime'
            ,type: 'datetime'
            ,done: function(value, date){
                //更新开始日期的最大日期
                insStart.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });

        tableExt.render({
            elem: '#test'
            , height: 'full-240'
            , toolbar: '#toolbarDemo'
            , defaultToolbar: false
            , limits : [ 20, 50, 100 ]
            , limit:20
            , page : true //开启分页
            , url: '${ctx}/order/platform/getPlatformOrderStatus?status=1'
            , cols: [[
                {type: 'numbers',title: '序号',fixed:'left'}
                , {field: 'id', type: 'checkbox',fixed: 'left'}
                , {field: 'number', title: '工单编号',minWidth:'200',sort: false, fixed: 'left', align: 'center',exportable:true,templet:function(d){
                    var flag = d.flag;
                    var html;
                    if(isBlank(flag)){//
                        html ="<i class=\"icon iconfont\" style=\"color: #8D8D8D\" onclick=\"orderFlag('"+d.id+"')\">&#xe6b0;</i>";
                    }else{
                        html ="<i class=\"icon iconfont \" style=\"color: "+d.flag_type+";\" onclick=\"orderFlag('"+d.id+"')\">&#xe6b0;</i>";
                    }
                    return html + "&nbsp;&nbsp;<a href=\"#\" class=\"layui-table-link\" onclick=\"orderDetail('"+d.id+"')\">"+d.number+"</a>";
                }}
                , {field: 'power_station_name', title: '电站名称', sort: false, fixed: 'left', align: 'center',width:200,exportable:true}
                , {field: 'customer_name', title: '用户姓名', sort: false, align: 'center',exportable:true,width:150}
                , {field: 'customer_mobile', title: '用户电话', sort: false, align: 'center',exportable:true,width:150}
                , {field: 'customer_address', title: '用户地址',minWidth:'200', sort: false, align: 'center',exportable:true,templet:function(d){
                            return d.province+d.city+d.area+d.customer_address;
                    }
                    , expFormat: function (d) {
                        return d.province+d.city+d.area+d.customer_address;
                    }
                    }
                , {field: 'service_type', title: '服务类型', sort: false, align: 'center',exportable:true,width:150}
                , {field: 'service_measures', title: '服务措施', sort: false, align: 'center',exportable:true,width:150}
                , {field: 'appliance_capacity', title: '容量(KW)', sort: false, align: 'center',width:150,exportable:true}
                , {field: 'warranty_type', title: '保修类型', sort: false, align: 'center',width:100,exportable:true,templet:function(d){
                    if(d.warranty_type == 1){
                        return "保内";
                    }if(d.warranty_type == 2){
                        return "保外";
                    }else{
                        return " ";
                    }                }
                    ,
                    expFormat: function (d) {  //格式导出的化字段
                        if(d.warranty_type == 1){
                            return "保内";
                        }if(d.warranty_type == 2){
                            return "保外";
                        }else{
                            return " ";
                        }
                    }}
                , {field: 'appliance_model', title: '设备型号', minWidth:'150',sort: false, align: 'center',exportable:true}
                , {field: 'appliance_category', title: '设备类型', sort: false, align: 'center',exportable:true,width:150}
                , {field: 'appliance_machine_code', title: '设备序列号', sort: false, align: 'center',exportable:true, minWidth:'150'}
                , {field: 'remarks', title: '工单描述', sort: false, align: 'center',exportable:true,minWidth:'180'}
                , {field: 'appliance_brand', title: '设备品牌', sort: false, align: 'center',exportable:true,width:150}
                , {field: 'appliance_buy_time', title: '投运时间', sort: false, align: 'center',exportable:true,width:180}
                , {field: 'createName', title: '报单人', sort: false, align: 'center',exportable:true,width:150}
                , {field: 'repair_time', title: '报单时间',minWidth:'200', sort: false, align: 'center',exportable:true,width:180}
                , {field: 'order_type', title: '信息来源', sort: false, align: 'center',width:180,exportable:true,templet:function(d){
                    if(d.order_type == 1){
                      return "用户在线报修";
                    }else if(d.order_type == 2){
                        return "平台录入";
                    }else if (d.order_type == 4) {
                        return "电子商务";
                    } else{
                        return "其他";
                    }
                },expFormat:function(d){
                    if(d.order_type == 1){
                        return "用户在线报修";
                    }else if(d.order_type == 2){
                        return "平台录入";
                    }else if (d.order_type == 4) {
                        return "电子商务";
                    } else{
                        return "其他";
                    }
                }}
                , {field: 'level', title: '重要程度', sort: false, align: 'center',width:150,exportable:true, templet:function(d){
                    if(d.level== 1){
                        return "紧急";
                    }if(d.level== 2){
                        return "一般";
                    }else{
                        return " ";
                    }
                   },expFormat:function(d){
                    if(d.level== 1){
                        return "紧急";
                    }if(d.level== 2){
                        return "一般";
                    }else{
                        return " ";
                    }
                }}
                , {field: 'please_refer_mall', title: '销售商',minWidth:'200', sort: false, align: 'center',exportable:true}
                , {field: 'invoice', title: '发票号码',minWidth:'200', sort: false, align: 'center',exportable:true}
            ]]  ,done:function(res,cuss,count){
                $('.layui-table-header .laytable-cell-checkbox input').attr('disabled','disabled');
              /*  $('.layui-table-header .laytable-cell-checkbox input').attr('disabled','disabled');
                $('.layui-table-header .laytable-cell-checkbox div').hide();*/
            },exportOpt: {                           //导出选项配置
                ele: '#exportBtn',                   //导出的Dom元素
                headerTitle: '工单管理-待派单',             //excel表格的标题
                pageData: false,                     //true:导出的数据为页面数据，false:最大导出maxAmount条数据
                maxAmount: 1000,                    //当pageData为false生效
                fileName: '工单管理-待派单',
                where: function () {
                    //当pageData为false时生效，过滤的条件
                    return _serializeJson($("#searchForm"));
                }
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){

            switch(obj.event){
                case 'assign':        //指派
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    if (data.length != 1) {
                        layer.msg("请选择一条数据",{icon:5,anim:6});
                        return;
                    }
                    var status = data[0].status;
                    if(status != 1){
                        layer.msg("该工单状态不可派工",{icon:5,anim:6});
                        return;
                    }
                    var service_type = data[0].service_type;
                    if(service_type == '咨询'){
                        layer.msg("该为咨询单不可派工",{icon:5,anim:6});
                        return;
                    }
                    var orderId = data[0].id;
                    layer.open({
                        type: 2,
                        content: "${ctx}/dispatch/getOrderSite?orderId="+data[0].id  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        ,title: "指派"
                    /*    ,btn:['确认指派']*/
                        ,area:["800px","480px"],
                        end:function(){
                            //刷新表格
                            searchOrder(orderId)
                        }
                    });
                    break;
                case 'addOrder':                           //新建工单
                   layer.open({
                       type:2,
                       content:"${ctx}/order/platform/addNewOrder",
                       title:"新建工单",
                       area: ['1100px', '90%'],
                       end:function(){
                           //刷新表格
                           searchOrder(orderId)
                       }
                   })
                    break;
                case 'invalid':                              //无效工单
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    if (data.length != 1) {
                        layer.msg("请选择一条数据",{icon:5,anim:6});
                        return;
                    }
                    var orderId = data[0].id;
                    var status = data[0].status;
                    if(status !=1 && status!=2 && status!=3 && status!=4){
                        layer.msg("当前状态不可操作无效",{icon:5,anim:6});
                        return;
                    }else{
                        var indexla = layer.confirm('您确定要操作无效工单吗？', {
                            icon:3,
                            btn: ['确定','取消'] //按钮
                        }, function(){
                            layer.close(indexla);
                              layer.open({
                                type: 2,
                                content: "${ctx}/order/lookNOUse?orderId="+orderId  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                                ,title: "无效工单"
                                ,area:["600px","220px"]
                            })
                        }, function(){
                            layer.close(indexla)
                        });
                    }
                    break;
            };
        });

        //监听行单击事件
        table.on('row(test)', function(obj){
            var data = obj.data;
            var oldData = table.cache["test"];
            var checkCell=obj.tr.find(".layui-form-checkbox");
            var CHECKED;
            if(obj.tr.hasClass("xuanzhong-special")){
                CHECKED = false;
                obj.tr.removeAttr("style");
                obj.tr.removeClass("xuanzhong-special");
                obj.tr.removeClass('layui-table-click');
                checkCell.removeClass('layui-form-checked');
            }else{
                CHECKED=true
                $(obj.tr).css('background-color','#CCEAEA');
                $(obj.tr).addClass("xuanzhong-special");
                obj.tr.addClass('layui-table-click');
                checkCell.addClass('layui-form-checked');
            }
         $.each(oldData,function(i,val){
                if(val.id == data.id){
                    oldData[i].LAY_CHECKED=CHECKED
                }
            })

        });
        //监听搜索
        form.on('submit(LAY-user-back-search)', function(data){
            var field = data.field;
            //执行重载
            table.reload('test', {
                where: field,
                page:{
                    curr:1
                }
            });
        });

        //重置
        form.on('submit(resetButton)', function(data){
            $("#searchForm")[0].reset();
            layui.form.render();

        });


        function searchOrder(orderId) {
            //执行重载
            table.reload('test', {
                page: {
                    curr: 1
                }
            });
        }

    });


    //标记工单
    function orderFlag(id){
        layer.open({
            type: 2,
            content: "${ctx}/order/getFlagOrder?orderId="+id //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            ,title: "标记工单"
            ,area:["300px","260px"]
            ,closeBtn: 0
            ,shadeClose:true
        });
    }

    /*工单详情*/
    function orderDetail(id) {
        layer.open({
            type: 2,
            title:" 工单信息",
            area: ['1100px', '92%'],
            resize:false,
            content: '${ctx}/order/getplatformOrderForm?orderId='+id
           ,cancel:function(){
              /*  table.reload('test');*/ //数据刷新
            }
        });
    }

    //备件详情
    function fittingDetail(id){
        layer.open({
            type: 2
            , title: '备件信息'
            , content: '${ctx}/platform/fitting/toFittingDetailNo?id=' + id
            , area: ['1000px', '50%']
            , yes: function(index, layero){

            }
        });
    }

    function reset(){
        $("#searchForm").find("select").val("");
        $("#searchForm").find("input").val("");
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
</script>
</body>
</html>

