<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/layer.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>
    <script src="/static/js/layer.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="/dep_sp">计划主交期</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="data_time" /></div>
                </label>
                <label>
                    <div class="navbar-nav">部门：</div>
                    <!-- <input type='text' class="input" v-model="DEPT" /> -->
                    <div class="navbar-nav"><select class="selectpicker form-control" data-live-search="true"
                            v-model="DEP_DEP" id="field1"></select>
                    </div>
                </label>
                <label>

                    <div class="navbar-nav">单号：</div>
                    <div class="navbar-nav"><select class="selectpicker form-control" data-live-search="true"
                            v-model="mo_no" id="field2"></select></div>
                </label>
                <label class="save def" id="def" @click="seek()">
                    <div class="btn btn-primary navbar-nav">确定查询</div>
                </label>
            </div>
        </div>
        <!-- 内容 -->
        <!-- container这个类是设置居中对齐 -->
        <div class="container">
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="zengjia()">新增</button>
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content" style="width: 300px;">
                        <!-- 这里是标题 -->
                        <div class="modal-header">
                            <div class="modal-title">新增月度排产</div>
                        </div>
                        <!-- 这里是内容 -->
                        <div class="modal-body">
                            <table>
                                <tr>
                                    <td>灌装生产线：
                                        <select class="selectpicker form-control" data-live-search="true"
                                            v-model="DEP_DEP" id="field">
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!-- 这里是确定否 -->
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-dismiss="modal" @click="add_dep_data()">确定</button>
                            <button class="btn btn-primary" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-primary abc" @click="add_no()" disabled="disabled">保存</button>
            <button class="btn btn-primary update" @click="add_no()" disabled="disabled">修改</button>
            <button class="btn btn-primary del" @click="add_no()" disabled="disabled">删除</button>
            <!-- 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>
                        <td>序号</td>
                        <td>单号</td>
                        <td>灌装生产线</td>
                        <td>灌装未完工数量</td>
                        <td>标准/满线日产能</td>
                        <td>标准直接人员配置</td>
                        <td>订单可维持天数</td>
                        <td>编制</td>
                        <td>需求工时</td>
                        <td>按25个工作日计算人员需求</td>
                        <td>现有直接工人11.25</td>
                        <td>人员缺口</td>
                        <td>数量</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="(item,i) in add_date" :key="item.DEP_DEP">
                        <td width="50px" v-text="i+1"></td>
                        <td width="110px" v-text="item.monthly_odd_new"></td>
                        <td width="50px" v-text="item.DEP_DEP"></td>
                        <td width="100px"><input type="number" v-model="item.DEP_QTY" @click="qty_sum(i)"
                                @keyup="qty_sum(i)"></td>
                        <td width="100px"><input type="number" v-model="item.DEP_CN" @click="qty_sum(i)"
                                @keyup="qty_sum(i)"></td>
                        <td width="120px" v-text="item.DEP_RY"></td>
                        <td width="120px" v-text="item.DEP_WCTS"></td>
                        <td width="100px" v-text="item.DEP_BZ"></td>
                        <td width="80px" v-text="item.DEP_SJGS"></td>
                        <td width="90px" v-text="item.DEP_RS"></td>
                        <td width="90px" v-text="item.DEP_ZJRG"></td>
                        <td width="90px" v-text="item.DEP_RYQK"></td>
                        <td width="90px"><input type="text" v-bind:value="Number(item.DEP_QTY)+Number(item.DEP_CN)">
                        </td>
                        <!-- v-bind:value="Number(item.DEP_QTY)+Number(item.DEP_CN)" -->
                        <td class="btn btn-primary row_del" @click="del()">删除</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="footer">
            分页
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                data_time: '',
                DEPT: '',
                ODD: '',
                activeIndex: 0,
                list: [],
                DEP_DEP: '',
                DEP_QTY: 0,
                DEP_CN: 0,
                DEP_RY: '',
                DEP_WCTS: '',
                DEP_BZ: '',
                DEP_SJGS: '',
                DEP_RS: '',
                DEP_ZJRG: '',
                DEP_RYQK: '',
                qty: 0,
                add_date: [],
                test: [{ "DEP": "1", "DEP_NAME": "2" }, { "DEP": "1", "DEP_NAME": "2" }],
                monthly_odd_new: '保存显示',
                list_no: [],
                list_dep:[],
                mo_no:''
            },
            // 部门选项失去焦点刷新数据

            methods: {
                // 增加部门数据
                add_dep_data() {
                    // 获取搜索框的值
                    var serch_var = $("#field").selectpicker('val')
                    // alert('qq')
                    if (serch_var == '' | typeof serch_var === 'undefined') {
                        alert("请选择部门")
                        return
                    }
                    this.DEP_DEP = serch_var
                    var add_dep_date = {
                        DEP_DEP: this.DEP_DEP, DEP_QTY: this.DEP_QTY, DEP_CN: this.DEP_CN, DEP_RY: this.DEP_RY,
                        DEP_WCTS: this.DEP_WCTS, DEP_BZ: this.DEP_BZ, DEP_SJGS: this.DEP_SJGS, DEP_RS: this.DEP_RS, DEP_ZJRG: this.DEP_ZJRG, DEP_RYQK: this.DEP_RYQK, qty: this.qty,
                        monthly_odd_new: this.monthly_odd_new
                    }
                    // console.log(this.DEP_DEP)
                    // console.log(1111)
                    // console.log(this.DEP_DEP)

                    this.add_date.push(add_dep_date)
                    this.DEP_DEP = this.DEP_RY = this.DEP_WCTS = this.DEP_BZ = this.DEP_SJGS = this.DEP_RS = this.DEP_ZJRG = this.DEP_RYQK = ''
                    this.DEP_CN = this.DEP_QTY = 0

                    // $("#field").selectpicker('val')
                },

                // 保存单据
                add_no() {

                    //获取单号
                    if (this.monthly_odd_new == '保存显示') {
                        {
                            axios.get('/odd/', {
                                // params: {
                                //     st_time: '',
                                //     sh_time: '',
                                //     cus_no: '',
                                //     cls_id: '',
                                //     pmc_ok: '',
                                // }
                            })
                                .then(res => {
                                    // alert(res.data)
                                    var data1 = res.data.data
                                    this.monthly_odd_new = data1
                                    // this.add_date.monthly_odd_new = this.monthly_odd_new
                                    this.add_date.forEach((val, index) => {
                                        val["monthly_odd_new"] = this.monthly_odd_new;// 修改 把IsLimit修改成1
                                        // val["LimitAccount"] = 188.0;//增加
                                        // delete val["CustName"];// 删除
                                    })

                                })
                                .catch(err => {
                                    console.log('error:' + err)
                                })
                        }
                    }
                    console.log(this.add_date)
                    //设置保存按钮为禁止
                    $(".abc").attr("disabled", "disabled");
                    //移除修改按钮禁止效果disabled
                    $('.update').removeAttr('disabled')
                    //移除删除按钮禁止效果disabled
                    $('.del').removeAttr('disabled')
                    this.monthly_odd_new = '保存显示'
                    // 
                },

                // 获取每一行的计算栏位qty
                qty_sum(i) {
                    this.add_date[i]["qty"] = Number(this.add_date[i]["DEP_QTY"]) + Number(this.add_date[i]["DEP_CN"])
                    console.log(this.add_date[i]["qty"])
                },
                // 删除ni zhaod每一行
                del(i) {
                    // this.add_date.$remove(i);
                    this.add_date.splice(i, 1);
                    console.log(this.add_date)
                },

                zengjia() {
                    // 点击新增的时候渲染下来列表
                    // 1、获取下拉列表的元素直接赋值tempIdStr
                    // 2、如果tempIdStr值为空的话则走if流程
                    $('#field').selectpicker('refresh');
                    var tempIdStr = $("#field").html();
                    $("#field").html(tempIdStr)
                    if (tempIdStr == '') {
                        var tempIdStr = '<option  value="">选择1111</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_dep, function (i, item) {
                            var tempId = '<option  value="' + item.DEP + '" v-bind:value="DEP_DEP">' + item.DEP + '---' + item.DEP_NAME + '</option>';
                            $("#field").append(tempId);
                            // alert(tempId)
                        });
                        // 更新 。 这一步很重要
                        $('#field').selectpicker('refresh');
                    }
                    // 移除保存按钮禁止disabled效果
                    $('.abc').removeAttr('disabled')
                    //设置修改按钮为禁止效果
                    $(".update").attr("disabled", "disabled");
                    //设置删除按钮为禁止效果
                    $(".del").attr("disabled", "disabled");


                },
                // 查询单据
                seek() {
                    console.log('查询单据')
                    //设置保存按钮为禁止效果
                    $(".abc").attr("disabled", "disabled");
                    //移除修改按钮禁止效果disabled
                    $('.update').removeAttr('disabled')
                    //移除删除按钮禁止效果disabled
                    $('.del').removeAttr('disabled')
                    //设置删除行按钮为禁止效果
                    $(".row_del").attr("disabled", "disabled");
                    // 获取搜索框的部门
                    var serch_var1 = $("#field1").selectpicker('val')
                    // 获取搜索框的单号
                    var serch_var2 = $("#field2").selectpicker('val')
                    if (serch_var1 == '' & serch_var2 == '') {
                        alert('请选择赛选条件')
                    }
                    console.log(serch_var1)
                    console.log(serch_var2)
                },
                // 查询部门
                select_dep() {
                    axios.get('/dept/', {
                        // params: {
                        //     st_time: '',
                        //     sh_time: '',
                        //     cus_no: '',
                        //     cls_id: '',
                        //     pmc_ok: '',
                        // }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data.data
                            this.list_dep = data1
                            // console.log(this.list)
                            // 设置下拉搜索
                            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>';
                            $("#field1").append(tempIdStr);
                            $.each(this.list_dep, function (i, item) {
                                var tempId = '<option  value="' + item.DEP + '" v-bind:value="DEP_DEP">' + item.DEP + '---' + item.DEP_NAME + '</option>';
                                $("#field1").append(tempId);
                                // alert(tempId)
                            });
                            // 更新 。 这一步很重要
                            $('#field1').selectpicker('refresh');

                        })
                        .catch(err => {
                            console.log('error:' + err)
                        })
                },
                // 查询单号
                select_odd() {
                    axios.get('/oddno/', {
                        // params: {
                        //     st_time: '',
                        //     sh_time: '',
                        //     cus_no: '',
                        //     cls_id: '',
                        //     pmc_ok: '',
                        // }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data.data
                            this.list_no = data1
                            // 设置下拉搜索
                            var tempIdStr = '<option  value="">选择单号</option>';
                            $("#field2").append(tempIdStr);
                            $.each(this.list_no, function (i, item) {
                                var tempId = '<option  value="' + item.MO_NO + '" v-bind:value="mo_no">' + item.MO_NO + '---' + item.MO_NO + '</option>';
                                $("#field2").append(tempId);
                            });
                            // 更新 。 这一步很重要
                            $('#field2').selectpicker('refresh');

                        })
                        .catch(err => {
                            console.log('error:' + err)
                        })
                }
            },
            created() {
                // $(".abc").attr("disabled", "disabled");
                this.select_dep()
                this.select_odd()

            },
            watch: {
                add_date(news, olds) {
                    // console.log(news)
                    // console.log(olds)

                }
            },

        });
    </script>

</body>

</html>