<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">
    <link rel="stylesheet" type="text/css" href="/static/css/macf.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>
            <label>
                <div class="input">
                    单号：<input type="text" v-model="monthly_odd_new" disabled="disabled">
                </div>
            </label>
            <table class="table table-bordered table-hover table-striped">
                <tbody>
                    <tr>
                        <td class="macf_01">序号</td>
                        <td class="macf_02">产线</td>
                        <td class="macf_03">产线名称</td>
                        <td class="macf_04">未完工数量</td>
                        <td class="macf_05">标准/满线日产能</td>
                        <td class="macf_07">订单可维持天数</td>
                        <td class="macf_06">标准直接人员配置</td>
                        <td class="macf_08">现有产能</td>
                        <td class="macf_09">现有生产线/人员</td>
                        <td class="macf_10">现有配置可生产天数</td>
                        <td class="macf_11">现有辅助工人</td>
                        <td class="macf_18">现有直接工人</td>
                        <td class="macf_12">现有出勤人员合计</td>
                        <td class="macf_13">直接工人274小时/25天</td>
                        <td class="macf_14">按274小时/25天</td>
                        <td class="macf_15">计划新增人员配置</td>
                        <td class="macf_16">需求工时</td>
                        <td class="macf_17">按25个工作日计算人员需求</td>
                        <td class="macf_19">人员缺口</td>
                        <td class="macf_20">编制</td>
                        <td class="macf_21">备注</td>
                        <td class="macf_22">操作</td>
                    </tr>
                    <!-- <tr v-for="(item,i) in data_list" :key="item.DEP_DEP" class="itm_tr" > -->
                    <tr class="save" v-for="(item,i) in data_list" :key="item.DEP_DEP" :class="i == activeIndex?'tr_active':''">
                        <!--这里是序号-->
                        <td class="macf_01" v-text="i+1"></td>
                        <!--产线-->
                        <td class="macf_02" v-text="item.dep"></td>
                        <!--产线名称-->
                        <td class="macf_03" v-text="item.dep_name"></td>
                        <!--未完工数量-->
                        <td class="macf_04"><input class="macf_04 macf_td" type="number" v-model="item.un_qty"
                                disabled="disabled"></td>
                        <!--标准/满线日产能-->
                        <td class="macf_05"><input class="macf_05 macf_td" type="number" v-model="item.s_capacity"></td>
                        <!--订单可维持天数-->
                        <td class="macf_07"><input class="macf_07 macf_td" type="number"
                                v-bind:value="Number(item.un_qty)/Number(item.s_capacity) | rounding"
                                disabled="disabled"></td>
                        <!--标准直接人员配置-->
                        <td class="macf_06"><input class="macf_06 macf_td" type="number" v-model="item.s_d_staffing"></td>
                        <!--现有产能-->
                        <td class="macf_08"><input class="macf_08 macf_td" type="number" v-model="item.e_capacity"></td>
                        <!--现有生产线/人员-->
                        <td class="macf_09"><input class="macf_09 macf_td" type="number" v-model="item.epl_personnel"></td>
                        <!--现有配置可生产天数-->
                        <td class="macf_10"><input class="macf_10 macf_td" type="number"
                                v-bind:value="Number(item.un_qty)/Number(item.e_capacity) | rounding"
                                disabled="disabled"></td>
                        <!--现有辅助工人-->
                        <td class="macf_11"><input class="macf_11 macf_td" type="number" v-model="item.e_a_workers"></td>
                        <!--现有直接工人-->
                        <td class="macf_18"><input class="macf_18 macf_td" type="number" v-model="item.e_d_workers"></td>
                        <!--现有出勤人员合计-->
                        <td class="macf_12"><input class="macf_12 macf_td" type="number"
                                v-bind:value="Number(item.e_a_workers)+Number(item.e_d_workers) | rounding"
                                disabled="disabled"></td>
                        <!--直接工人274小时/25天-->
                        <td class="macf_13"><input class="macf_13 macf_td" type="number"
                                v-bind:value="(Number(item.ok_qty)/(Number(item.s_capacity)+Number(item.s_d_staffing)))/25 | rounding"
                                disabled="disabled"></td>
                        <!--按274小时/25天-->
                        <td class="macf_14"><input class="macf_14 macf_td" type="number"
                                v-bind:value="(Number(item.ok_qty)/(Number(item.s_capacity)+Number(item.s_d_staffing)))/25+Number(item.e_a_workers) | rounding"
                                disabled="disabled"></td>
                        <!--计划新增人员配置-->
                        <td class="macf_15"><input class="macf_15 macf_td" type="number"
                                v-bind:value="(Number(item.ok_qty)/(Number(item.s_capacity)+Number(item.s_d_staffing)))/25-Number(item.e_d_workers) | rounding"
                                disabled="disabled"></td>
                        <!--需求工时-->
                        <td class="macf_16"><input class="macf_16 macf_td" type="number"
                                v-bind:value="Number(item.s_d_staffing)*(Number(item.un_qty)/Number(item.s_capacity))*11 | rounding"
                                disabled="disabled"></td>
                        <!--按25个工作日计算人员需求-->
                        <td class="macf_17"><input class="macf_17 macf_td" type="number"
                                v-bind:value="Number(item.s_d_staffing)*(Number(item.un_qty)/Number(item.s_capacity))*11/274*1.2 | rounding"
                                disabled="disabled"></td>
                        <!--人员缺口-->
                        <td class="macf_19"><input class="macf_19 macf_td" type="number"
                                v-bind:value="Number(item.s_d_staffing)*(Number(item.un_qty)/Number(item.s_capacity))*11/274*1.2-item.e_d_workers | rounding"
                                disabled="disabled"></td>
                        <!--编制-->
                        <td class="macf_20"><input class="macf_20 macf_td" type="text" v-model="item.a_strength"></td>
                        <!--备注-->
                        <td class="macf_21"><textarea class="macf_21 macf_td" rows="1" cols="10"
                                v-model="item.rem"></textarea></td>
                        <!--操作-->
                        <td class="macf_22"><button class="btn btn-primary row_del" @click="del()">删除</button></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: [],
                data_list: [],
                test: [{ "DEP": "1", "DEP_NAME": "2" }, { "DEP": "1", "DEP_NAME": "2" }],
                monthly_odd_new: '保存显示',
                list_no: [],
                list_dep: [],
                activeIndex: 0,  //激活选中tr的颜色变化
                mo_no: '',  //重构开始
                dep: '',  //车间部门
                dep_name: '',  //车间部门名称
                no: '',   //  单号
                dd: '',   //单据日期
                un_qty: 0,   //未完工数量
                s_capacity: 0,  //标准/满线日产能
                s_d_staffing: 0,   //标准直接人员配置
                tolf_days: 0,  //订单可维持天数
                e_capacity: 0,   //现有产能  
                epl_personnel: 0,  //现有生产线/人员
                p_d_f_e_configurations: 1,   //现有配置可生产天数 
                a_strength: '',  //编制
                e_a_workers: 0,   //现在有辅助工人
                work_sum: 0,   //现有出勤人员合计 
                zj_274_24: 0,   //直接工人按按274小时/25天配置人员
                a_274_24: 0,   //按274小时/25天配置人员
                new_personnel: 0,   //计划新增人员配置
                rem: '',   //备注
                need_hours: 0,    //需求工时
                a_25: 0,    //按25个工作日计算人员需求
                e_d_workers: 0,   //现有直接工人
                p_gap: 0,  //人员缺口
            },
            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
                    if (this.DEP_DEP == '') {
                        alert("部门没选择上")
                        return
                    }
                    axios.get('/depmacfdepdata/', {
                        params: {
                            dep: this.DEP_DEP
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var itm = res.data.data
                            this.data_list.push(itm)
                            // this.data_list = res.data.data
                            console.log(this.data_list)
                        })
                        .catch(err => {
                            console.log('error:' + err)
                        })
                },

                // 保存单据
                add_no() {

                    //获取单号
                    // 判断有没有数据
                    if(this.data_list.length==0){
                        alert('表身没有数据可保存');
                        return
                    }
                    if (this.monthly_odd_new !== '') {
                        {
                            axios.post('/depmacf/', {
                                params: {
                                    data_list: this.data_list,
                                }
                            })
                                .then(res => {
                                    // alert(res.data)
                                    var data1 = res.data.data
                                    this.monthly_odd_new = data1
                                    $(".abc").attr("disabled", "disabled");
                                    //移除修改按钮禁止效果disabled
                                    $('.update').removeAttr('disabled')
                                    //移除删除按钮禁止效果disabled
                                    $('.del').removeAttr('disabled')
                                    alert("保存成功")
                                })
                                .catch(err => {
                                    console.log('error:' + err)
                                })
                        }
                    }
                    console.log(this.add_date)
                    //设置保存按钮为禁止
                    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.data_list.splice(i, 1);
                    console.log(this.data_list)
                },

                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');
                    }
                    // 如果是新增另外一张单的话那么清空数据
                    if($(".abc").prop("disabled")==true){
                        this.data_list=[];
                        this.monthly_odd_new = '保存显示'
                    }
                    // 移除保存按钮禁止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)
                        })
                },
            },
            filters: {
                rounding(value) {
                    if (typeof value == "number") {
                        return value.toFixed(2)
                    }
                    else {
                        return "No Number！！！"
                    }
                }
            },
            created() {
                this.select_dep()
                this.select_odd()

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

                }
            },

        });
    </script>

</body>

</html>