<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>
    <!-- 用户操作cookie -->
    <script src="/static/js/vue-Cookies.js"></script>
    <!-- 下拉搜索插件 -->
    <script type="text/javascript" src="/static/js/jquery.select.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>
                            </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="/dessettingtm">车间标准产能设置</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>
                        <li class="dropdown">
                            <!--ie文件号管理-->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                IE工艺文件号管理
                                <b class="caret"></b>
                            </a>
                            <ul class="nav dropdown-menu">
                                <li><a href="/iefiletm">新增IE工艺文件号</a></li>
                                <li><a href="/iefilemaintaintm">IE工艺文件号维护</a></li>
                                <li><a href="/iefilemaintaindetailtm">IE效率明细表</a></li>
                                <li><a href="/iefilemaintaininfotm">IE效率统计表</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li v-if="username !=''">
                            <a>{% verbatim %}{{ '欢迎'+username+'！！！' }} {% endverbatim %}</a>
                        </li>
                        <li v-else><a href="">请登录</a></li>
                        <li><a href="/login/" @click="logout()">退出登录</a></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_timeqi" /></div>
                </label>
                <label>
                    <div class="navbar-nav">查询日期止：</div>
                    <div class="navbar-nav"><input type='date' class="input form-control" v-model="data_timezhi" />
                    </div>
                </label>
                <label>
                    <div class="navbar-nav">部门：</div>
                    <div class="navbar-nav">
                        <input class="input form-control" id="testInput" type="text" autocomplete="off" />
                    </div>
                </label>
                <label>

                    <div class="navbar-nav">单号：</div>
                    <div class="navbar-nav">
                        <input class="input form-control" id="testInput2" type="text" autocomplete="off" />
                    </div>
                </label>
                <label class="save def" id="def">
                    <div class="btn btn-primary navbar-nav" @click="seek()">确定查询</div>
                </label>
            </div>
        </div>
        <!-- 内容 -->
        <!-- container这个类是设置居中对齐 -->
        <div class="container">
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="newly()">新增</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>灌装生产线：
                                        <input class="input form-control" id="testInput1" type="text"
                                            autocomplete="off" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>单据日期：
                                        <input type='date' class="input form-control" v-model="data_time_no" />
                                    </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="update()" disabled="disabled">修改</button>
            <button class="btn btn-primary del" @click=del('','','','',data_list) disabled="disabled">删除</button>
            <label>
                <div class="input">
                    单号：<input type="text" v-model="monthly_odd_new" disabled="disabled">
                </div>
            </label>
            <label>
                <div class="input">
                    做单日期：<input type='date' v-model="data_time_no" disabled="disabled">
                </div>
            </label>
            <table class="table table-bordered table-hover table-striped">
                <tbody>
                    <tr>
                        <td class="macf_01">序号</td>
                        <td class="macf_022">单号</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 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_022" v-text="item.no"></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" min="0"
                                v-model="item.s_capacity"></td>
                        <!--订单可维持天数-->
                        <td class="macf_07"><input class="macf_07 macf_td" type="number" min="0"
                                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" min="0"
                                v-model="item.s_d_staffing">
                        </td>
                        <!--现有产能-->
                        <td class="macf_08"><input class="macf_08 macf_td" type="number" min="0"
                                v-model="item.e_capacity"></td>
                        <!--现有生产线/人员-->
                        <td class="macf_09"><input class="macf_09 macf_td" type="number" min="0"
                                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" min="0"
                                v-model="item.e_a_workers">
                        </td>
                        <!--现有直接工人-->
                        <td class="macf_18"><input class="macf_18 macf_td" type="number" min="0"
                                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(i,item.dep,item.no,item.itm,'')">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="footer">
            分页
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                username: '',  //用户名
                data_timeqi: '',  //用户查询日期起
                data_timezhi: '',  //用户查询日期止
                activeIndex: 0, //用于设置选择表格行变化颜色
                DEP_QTY: 0,     //sum()函数测试计算用
                DEP_CN: 0,      //sum()函数测试计算用
                qty: 0,         //sum()函数测试计算用
                add_date: [],   //用于监控测试
                data_list: [],   //用户新增查询部门得到的数据保存
                monthly_odd_new: '保存显示',    //用于前台单号的显示与否
                data_time_no: '',   //单据日期
                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,  //人员缺口
            },
            mounted() {
                // 获取登录名
                // this.username=getCookie('username');
                this.username = $cookies.get('username')
                // console.log($cookies.get('username'))
            },
            methods: {
                // 根据部门查询后台数据
                add_dep_data() {
                    // 获取搜索框的值
                    var serch_var = $("#testInput1").val()
                    // alert('qq')
                    if (serch_var == '' | typeof serch_var === 'undefined') {
                        alert("请选择部门")
                        return
                    }
                    if (serch_var == '') {
                        alert("部门没选择上")
                        return
                    }
                    axios.get('/depmacfdepdata/', {
                        params: {
                            dep: serch_var
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var itm = res.data.data
                            for (let i in itm) {
                                this.data_list.push(itm[i])
                            };
                        })
                        .catch(err => {
                            alert(err.response["data"] + err.response["status"])
                        })
                },
                // 保存单据
                add_no() {
                    //获取单号
                    // 判断有没有数据
                    if (this.data_list.length == 0) {
                        alert('表身没有数据可保存');
                        return
                    }
                    if (this.monthly_odd_new !== '') {
                        {
                            axios.post('/depmacf/', {
                                data: {
                                    data_list: this.data_list,
                                    data_time_no: this.data_time_no
                                }
                            })
                                .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 => {
                                    alert(err.response["data"] + err.response["status"])
                                })
                        }
                    }
                    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"])
                },
                // 修改操作
                update() {
                    console.log(this.data_list)
                    axios.put('/depmacf/', {
                        data: {
                            data: this.data_list
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            console.log("修改成功")
                            // this.data_list='';
                        })
                        .catch(err => {
                            alert(err.response["data"] + err.response["status"])
                        })
                },
                // 删除操作
                del(i, dep, no, itm, data) {
                    // this.add_date.$remove(i);
                    console.log(no)
                    if (no == undefined) {
                        this.data_list.splice(i, 1);
                        return
                    }
                    axios.delete('/depmacf/', {
                        data: {
                            dep: dep,
                            no: no,
                            itm: itm,
                            data: data
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            console.log("删除成功")
                            if (data !== '') {
                                this.data_list = '';
                            }
                            else {
                                this.data_list.splice(i, 1);
                            }
                        })
                        .catch(err => {
                            alert(err.response["data"] + err.response["status"])
                        })
                },
                //新增
                newly() {
                    // 如果是新增另外一张单的话那么清空数据
                    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('查询单据')
                    // 获取搜索框的部门
                    var serch_dep = $("#testInput").val()
                    // 获取搜索框的单号
                    var serch_no = $("#testInput2").val()
                    console.log(serch_no)
                    if (this.data_timeqi == '' & this.data_timezhi == '') {
                        alert('请选择时间')
                        return
                    }
                    axios.get('/depmacf/', {
                        // params对象里面已键值对的形式放参数
                        params: {
                            "data_timeqi": this.data_timeqi,
                            "data_timezhi": this.data_timezhi,
                            "serch_dep": serch_dep,
                            "serch_no": serch_no
                        }
                    }).then(res => {
                        // 请求成功后的操作
                        //设置保存按钮为禁止效果
                        $(".abc").attr("disabled", "disabled");
                        if (serch_no !== '') {
                            //移除修改按钮禁止效果disabled
                            $('.update').removeAttr('disabled')
                            //移除删除按钮禁止效果disabled
                            $('.del').removeAttr('disabled')
                        }
                        //设置删除行按钮为禁止效果
                        // $(".row_del").attr("disabled", "disabled");
                        this.data_list = ''
                        var data = res.data.data
                        this.data_list = data
                        // console.log(this.data_list[0]["no"])
                        // console.log(this.data_list)
                        // console.log(res.data)
                    }).catch(err => {
                        //请求错误的处理
                        alert(err.response["data"] + err.response["status"])
                    })
                },
                //获取当前日期
                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.data_timezhi = this.data_timeqi = this.data_time_no = currentdate
                },
                //退出登录
                logout() {
                    console.log("qweq")
                    axios.delete('/login/', {
                        params: {
                            user_1: this.user_1,
                            pswd: this.pswd,
                        }
                    })
                        .then(res => {

                        })
                        .catch(err => {
                        })

                },
            },
            filters: {
                rounding(value) {
                    if (typeof value == "number") {
                        return value.toFixed(2)
                    }
                    else {
                        return "No Number！！！"
                    }
                }
            },
            created() {
                this.addDate()

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

                }
            },
        });
        $(function () {
            // 开始写 jQuery 代码...
            var timer = null;
            // 定义一个公用的搜索接口
            function getStr(n, url, field, clickif) {
                //n为搜索的参数 url为请求的路由，filed是定位表单的id,
                //clickif用于判断是否是第一次加载，如果不是第一次加载则需要模拟点击
                var search = n
                // 配置路由
                if (typeof search === 'undefined') {
                    search = ''
                };
                // console.log(search)
                axios.get(url, {
                    params: {
                        search_no: search
                    }
                })
                    .then(res => {
                        // alert(res.data)
                        var data1 = res.data.data
                        datas = data1
                        // console.log(datas)
                        if (datas.length == 0) {
                            alert("没有搜索到数据")
                            return
                        }
                        $.selectSuggest(field, datas);
                        // 是否第一次进入
                        if (clickif !== 1) {
                            $("#" + field).trigger("click");
                        }
                    })
                    .catch(err => {
                        console.log('error:' + err)
                    })
            };
            //查询部门资料
            $("#testInput").bind("input propertychange", function (event) {
                var search = $("#testInput").val()
                // console.log($("#testInput1").val())
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    getStr(search, '/dept/', 'testInput');

                }, 1000);
            });
            getStr('', '/dept/', 'testInput', 1);
            // 点击新增时候灌装生产线资料获取
            $("#testInput1").bind("input propertychange", function (event) {
                var search = $("#testInput1").val()
                // console.log($("#testInput1").val())
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    getStr(search, '/dept/', 'testInput1');

                }, 1000);
            });

            //查询单号
            $("#testInput2").bind("input propertychange", function (event) {
                var search = $("#testInput2").val()
                // console.log($("#testInput1").val())
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    getStr(search, '/oddno/', 'testInput2');

                }, 1000);
            });
            getStr('', '/oddno/', 'testInput2', 1);
        });
    </script>

</body>

</html>