<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/css.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-select.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-2.4.0.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/bootstrap-select_new.js"></script>

    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- navbar-default这个类是设置导航栏 -->
        <div class="navbar navbar-default">
            <div class="container">
                <!-- navbar-header用于设置内容横向显示 -->
                <div class="navbar-header">
                    <a href="/index" class="navbar-brand"></a>
                </div>
                <!-- navbar-nav用来设置横向显示 -->
                <!-- navbar-right用来设置右浮动 -->
                <!-- hidden-xs用于当屏幕很小的情况下隐藏div里面的内容 -->
                <div class="hidden-xs">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <!--订单一览表-->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                订单一览表
                                <b class="caret"></b>
                            </a>
                            <ul class="nav dropdown-menu">
                                <li><a href="/index">订单一览表</a></li>
                                <li><a href="#">已结案订单</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <!--月度产能评估表-->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                月度产能评估表
                                <b class="caret"></b>
                            </a>
                            <ul class="nav dropdown-menu">
                                <li><a href="#">汇总分析</a></li>
                                <li><a href="#">订单完成情况</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <!--月度主排程计划-->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                月度主排程计划
                                <b class="caret"></b>
                            </a>
                            <ul class="nav dropdown-menu">
                                <li><a href="/depps">计划主交期</a></li>
                                <li><a href="#">计划部门交期</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--搜索-->
        <div class="filter">
            <div class="container ">
                <label>
                    <div class="navbar-nav">开始时间：</div>

                    <div class="navbar-nav"><input type='date' class="input form-control" v-model="st_time" /></div>
                </label>
                <label>
                    <div class="navbar-nav">结束时间：</div>
                    <div class="navbar-nav"><input type='date' class="input form-control" v-model="sh_time" /></div>
                </label>
                <label>
                    <div class="navbar-nav">客户：</div>
                    <div class="navbar-nav"><select class="selectpicker form-control" data-live-search="true"
                            v-model="DEP_DEP" id="field"></select></div>
                </label>
                <label>
                    <div class="navbar-nav">结案否：</div>
                    <div class="navbar-nav">
                        <select class="input form-control" v-model="cls_id">
                            <option value="1" selected="selected">全部</option>
                            <option value="2">结案</option>
                            <option value="3">未结案</option>
                        </select>
                    </div>
                </label>
                <label>
                    <div class="navbar-nav">是否回复：</div>
                    <div class="navbar-nav">
                        <select class="input form-control" v-model="pmc_ok">
                            <option value="1">全部</option>
                            <option value="2">已回复</option>
                            <option value="3">未回复</option>
                        </select>
                    </div>
                </label>
                <label>
                    <div class="navbar-nav">排序：</div>
                    <div class="navbar-nav">
                        <select class="input form-control" v-model="sort">
                            <option value="1">类别</option>
                            <option value="2">客户</option>
                            <option value="3">回复交期</option>
                        </select>
                    </div>
                </label>
                <!-- <label class="save" @click="seek()">确定查询</label> -->
                <label class="save def" id="def" @click="seek()">
                    <div class="btn btn-primary navbar-nav">确定查询</div>
                </label>
            </div>
        </div>
        <!-- 内容 -->
        <!-- container这个类是设置居中对齐 -->
        <div class="container">
            <!-- row这个类是用于设置取消内边距 -->
            <table class="table table-bordered table-hover table-striped">
                <tbody>
                    <!-- <tr v-for="(item,i) in list" :key="item.OS_NO" style="background-color: yellowgreen;"> -->
                    <tr v-for="(item,i) in list" :key="item.OS_NO" :class="i === activeIndex?'tr_active':''">
                        <td v-if="i >0" width="50px" v-text="i"></td>
                        <td v-else width="50px" v-text="'行号'"></td>
                        <td v-if="i >0" width="50px"><input type='text' class="input itm" v-model="item.ITM"
                                disabled="disabled" /></td>
                        <td v-else width="50px" v-text="item.ITM"></td>
                        <td width="50px" v-text="item.ORDER0"></td>
                        <td width="100px" v-text="item.OS_DD"></td>
                        <td width="100px" v-text="item.CUS_SNM"></td>
                        <td width="120px" v-text="item.OS_NO"></td>
                        <td width="120px" v-text="item.PRD_NO"></td>
                        <td width="100px" v-text="item.DZRL"></td>
                        <td width="80px" v-text="item.QY"></td>
                        <td width="90px" v-text="item.YSSL"></td>
                        <td width="90px" v-text="item.YMXH"></td>
                        <td width="90px" v-text="item.QTY"></td>
                        <td width="90px" v-text="item.GZSL"></td>
                        <td width="90px" v-text="item.EST_DD"></td>
                        <td width="90px" v-text="item.PD_DEP"></td>
                        <td width="90px" v-text="item.REM"></td>
                        <td v-if="i >0" width="120px"><input type='date' class="input" v-model="item.PMC_DD" /></td>
                        <td v-else width="120px" v-text="item.PMC_DD"></td>
                        <td v-if="i >0" width="110px"><input type='text' class="input" style="width: 100px !important;"
                                v-model="item.WH_REM" /></td>
                        <td v-else width="110px" v-text="item.WH_REM"></td>
                        <td v-if="i >0" width="50px"><input type='submit' class="save"
                                @click="ok_save(item.OS_NO,item.PMC_DD,item.WH_REM,item.ITM,i)" value="保存" /></td>
                        <td v-else width="50px" v-text="item.operation"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="footer">
            <div class="load">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <style>
        .load {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
        }

        .load span {
            display: inline-block;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: #b6b3b5;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }

        @-webkit-keyframes load {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0.2;
            }
        }

        .load span:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: -8px;
            -webkit-animation-delay: 0.13s;
        }

        .load span:nth-child(2) {
            left: 15px;
            top: 15px;
            -webkit-animation-delay: 0.26s;
        }

        .load span:nth-child(3) {
            left: 50%;
            top: 0;
            margin-left: -8px;
            -webkit-animation-delay: 0.39s;
        }

        .load span:nth-child(4) {
            top: 15px;
            right: 15px;
            -webkit-animation-delay: 0.52s;
        }

        .load span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -8px;
            -webkit-animation-delay: 0.65s;
        }

        .load span:nth-child(6) {
            right: 15px;
            bottom: 15px;
            -webkit-animation-delay: 0.78s;
        }

        .load span:nth-child(7) {
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            -webkit-animation-delay: 0.91s;
        }

        .load span:nth-child(8) {
            bottom: 15px;
            left: 15px;
            -webkit-animation-delay: 1.04s;
        }
    </style>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                st_time: '',
                sh_time: '',
                cus_no: '',
                cls_id: '1',
                pmc_ok: '1',
                activeIndex: 0,
                list: [],
                DEP_DEP: '',
                list_cust: [],
                cust_cus_no: '',
                sort: '1',
                cust_cus_no_aa:''
            },
            methods: {
                seek() { // 添加的方法
                    // console.log('ok')
                    // 添加一个对象用于增加数据
                    if($("#field").selectpicker('val') !=''){
                        this.cust_cus_no_aa = $("#field").selectpicker('val')
                        this.cust_cus_no = $("#field").selectpicker('val')
                    }

                    if ($("#field").selectpicker('val')==''){
                        this.cust_cus_no = this.cust_cus_no_aa
                    }
                    this.list=''
                    $(".footer").show();
                    // console.log($("#field").selectpicker('val'))
                    var seek = { st_time: this.st_time, sh_time: this.sh_time, cus_no: this.cust_cus_no, cls_id: this.cls_id, pmc_ok: this.pmc_ok, sort: this.sort }
                    // console.log(seek)
                    axios.get('/listtb', {
                        params: {
                            st_time: this.st_time,
                            sh_time: this.sh_time,
                            cus_no: this.cust_cus_no,
                            cls_id: this.cls_id,
                            pmc_ok: this.pmc_ok,
                            sort: this.sort
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data.data
                            this.list = data1
                            $(".footer").hide();
                        })
                        .catch(err => {
                            console.log('error:' + err)
                        })
                },
                ok_save(OS_NO, PMC_DD, WH_REM, ITM, i) {
                    // console.log('ok1')
                    // console.log(OS_NO, PMC_DD, WH_REM, ITM)
                    this.activeIndex = i
                    var OS_NO = OS_NO
                    var PMC_DD = PMC_DD
                    var WH_REM = WH_REM
                    var ITM = ITM

                    axios.put('/listtb/', {
                        params: {
                            OS_NO: OS_NO,
                            PMC_DD: PMC_DD,
                            WH_REM: WH_REM,
                            ITM: ITM
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data.data
                        })
                        .catch(err => {
                            console.log('error:' + err)
                        })

                },
                // 修改list数据
                uplist() {
                    // console.log('ok2')
                    axios.get('/listtb', {
                        params: {
                            st_time: '',
                            sh_time: '',
                            cus_no: '',
                            cls_id: '',
                            pmc_ok: '',
                            sort:''
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data.data
                            // console.log(typeof(data1))
                            // console.log(typeof(list))

                            this.list = data1
                            $(".footer").hide();
                            // console.log(this.list)
                        })
                        .catch(err => {
                            console.log('error:' + err)
                        })
                },
                //获取当前日期
                addDate() {
                    var date = new Date();
                    var seperator1 = "-";
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var strDate = date.getDate();
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    if (strDate >= 0 && strDate <= 9) {
                        strDate = "0" + strDate;
                    }
                    var currentdate = year + seperator1 + month + seperator1 + strDate;
                    // console.log(currentdate)
                    this.st_time = this.sh_time = currentdate
                },
                //获取客户资料
                select_cust() {
                    axios.get('/cust/', {
                        // params: {
                        //     st_time: '',
                        //     sh_time: '',
                        //     cus_no: '',
                        //     cls_id: '',
                        //     pmc_ok: '',
                        // }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data.data
                            this.list_cust = data1
                            // console.log(this.list_cust)
                            // 设置下拉搜索
                            var tempIdStr = '<option  value="">选择客户</option>';
                            // var tempIdStr = '<option  value="' + this.list[0]['DEP'] + '" v-bind:value="DEP_DEP">' + this.list[0]['DEP'] + '---' + this.list[0]['DEP'] + '</option>';
                            $("#field").append(tempIdStr);
                            $.each(this.list_cust, function (i, item) {
                                var tempId = '<option  value="' + item.CUS_NO + '" v-bind:value="cust_cus_no">' + item.CUS_NO + '---' + item.NAME + '</option>';
                                $("#field").append(tempId);
                                // alert(tempId)
                            });
                            // 更新 。 这一步很重要
                            $('#field').selectpicker('refresh');

                            //  $('#field').selectpicker('refresh');

                        })
                        .catch(err => {
                            console.log('error:' + err)
                        })
                }
            },
            created() {
                // this.uplist()
                setTimeout(() => {
                    this.uplist()
                }, 0)
                this.addDate()
                // this.select_cust()
                setTimeout(() => {
                    this.select_cust()
                }, 0)
 

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

</html>