<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/iefile.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/vue-Cookies.js"></script>
    <script type="text/javascript" src="/static/js/jquery.select.js"></script>

    <script src="/static/js/bootstrap-select_new.js"></script>
    <!-- 图标js -->
    <!-- <script src="/static/js/ionicons.js"></script> -->

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

<body>
    <div id="app">
        <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="#">IE效率明细表</a></li>
                                <li><a href="#">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="/logout/" @click="logout()">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--表头-->
        <div class="filter">
            <div class="container ">
                <table class="table">
                    <tbody>
                        <tr>
                            <td class="align_right">收件日期：</td>
                            <td class="align_left"><input type="date" v-model="da_date"></td>
                            <td class="align_right">IE工艺文件编号：</td>
                            <td class="align_left"><input type="text" v-model="file_serial" autocomplete="off"></td>
                            <td class="align_right">工段名称：</td>
                            <td class="align_left"><input type="text" v-model="workshop_name" autocomplete="off"></td>
                            <td class="align_right">系统输单号：</td>
                            <td class="align_left"><input type="text" v-model="iefile_no" disabled="disabled"></td>
                        </tr>
                        <tr>
                            <td class="align_right">1小时管理费用（元/小时）：</td>
                            <td class="align_left"><input type="number" v-model="hr_up" min="0"></td>
                            <td class="align_right">标准总人力（人）：</td>
                            <td class="align_left"><input type="number" v-model="total_manpower" min="0"></td>
                            <td class="align_right">瓶颈时间（秒）：</td>
                            <td class="align_left"><input type="number" v-model="point" min="0"></td>
                            <td class="align_right">输单电脑：</td>
                            <td class="align_left"><input type="text" v-model="username" disabled="disabled"></td>

                        </tr>
                        <tr>
                            <td class="align_right">文件标注单价：</td>
                            <td class="align_left"><input type="number" v-model="postil_up" min="0"></td>
                            <td class="align_right zyxt">作业线体：</td>
                            <td class="align_left"><input type="text" id="dept" autocomplete="off"></td>
                            <td class="align_right">作业时间（秒）：</td>
                            <td class="align_left"><input type="number" v-model="job_time" min="0"></td>
                            <td class="align_right">输单日期：</td>
                            <td colspan="3" class="align_left"><input type="data" v-model="sys_date"
                                    disabled="disabled"></td>
                        </tr>
                        <tr>
                            <td class="align_right">文件备注：</td>
                            <td colspan="5" class="align_left">
                                <textarea rows="2" cols="150" v-model="rem"></textarea>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 内容 -->
        <!-- container这个类是设置居中对齐 -->
        <div class="container">
            <div class="Watch_body">
                <div class="navbar-left container_left">
                    <ul class="list-unstyled">
                        <li>
                            <p class="itm_left left_float">BOM配方号</p>
                            <p class="itm_right left_float">
                                <button class="btn btn-primary navbar-nav" data-toggle="modal"
                                    data-target="#myModal">新增</button>
                            </p>
                        </li>
                        <li v-for="(item,i) in list_bom" :key="i">
                            <p class="itm_left left_float"><input type="text" v-model="item.bom_no"></p>
                            <p class="itm_right left_float"><button class="btn btn-primary navbar-nav"
                                    @click="tf_iefile(i,item.iefile_no,item.bom_no,item.itm)">删除</button></p>
                        </li>
                    </ul>
                </div>
                <div class="navbar-left container_right">
                    <ul class="list-unstyled">
                        <li>
                            <p class="itm_left left_float text-center">文本标注阶梯单价（元）</p>
                            <p class="itm_right left_float text-center"><button class="btn btn-primary navbar-nav"
                                    @click=confirmqty()>新增</button></p>
                        </li>
                        <li v-for="(item,i) in list_qty" :key="i">
                            <p class="itm_left left_float text-center"><input type="number" min="0" v-model="item.qty">
                            </p>
                            <p class="itm_right left_float text-center"><input type="number" min="0" v-model="item.up">
                            </p>
                            <p class="itm_del left_float text-center"><button class="btn btn-primary navbar-nav"
                                    @click="tf_iefile(i,item.iefile_no,'',item.itm)">删除</button></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer container footer_base">
            <div class="hidden-xs">
                <button class="btn btn-primary navbar-nav" @click="newly_empty()">新增</button>
                <button class="btn btn-primary navbar-nav save_ok" @click=newly()>保存</button>
                <button class="btn btn-primary navbar-nav update" @click="update_data()">修改</button>
                <button class="btn btn-primary navbar-nav" data-toggle="modal" data-target="#select">查询</button>
                <button class="btn btn-primary navbar-nav delete" @click="delete_odd()">删除</button>
            </div>
        </div>
        <!-- 这里是新增bom -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 50%;">
                    <div class="modal-header">
                        <div class="modal-title" id="uppswd">选择BOM配方号</div>
                    </div>
                    <div class="modal-body" style="height: 150px;">
                        <div class="form-group">
                            <div style="height: 60px;background-color: #dff0d8;">
                                <div class="alert alert-success sousuo" id="sousuo">成功提交！数据搜索中。</div>
                            </div>
                            <label for="bom">BOM配方号</label>
                            <input type="text" class="form-control" id="bom" autocomplete="off">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-dismiss="modal" id="bom_ok"
                            @click="confirmbom()">确定</button>
                        <button class="btn btn-primary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 这里是查询 -->
        <div class="modal fade" id="select">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 900px;">
                    <div class="modal-header">
                        <div class="modal-title">查询IE文件编号</div>
                    </div>
                    <div class="modal-body" style="height: 400px;">
                        <div class="form-group">
                            <div style="height: 15%;background-color: #dff0d8;">
                                <div class="alert alert-success sousuo" id="iesousuo">成功提交！数据搜索中。</div>
                            </div>
                            <div class="slect_content">
                                <div class="left_float select_file_right">
                                    <p>
                                        <label for="date_qi" class="text-center">收件日期起</label>
                                        <input type="date" class="form-control" v-model="date_qi" id="date_qi"
                                            autocomplete="off">
                                    </p>
                                    <p>
                                        <label for="date_zhi" class="text-center">收件日期止</label>
                                        <input type="date" class="form-control" v-model="date_zhi" id="date_zhi"
                                            autocomplete="off">
                                    </p>
                                    <p>
                                        <label for="ie_file" class="text-center">IE工艺文件编号</label>
                                        <input type="text" class="form-control" v-model="select_file_serial"
                                            id="ie_file" autocomplete="off">
                                    </p>
                                    <p>
                                        <label for="select_dep" class="text-center">作业线体</label>
                                        <input type="text" class="form-control" v-model="select_dep" id="select_dep"
                                            autocomplete="off">
                                    </p>
                                    <p>
                                        <label for="ie_file_no" class="text-center">ie文件单号</label>
                                        <input type="text" class="form-control" v-model="select_iefile_no"
                                            id="select_dep" autocomplete="off">
                                    </p>
                                    <p><button class="btn btn-primary navbar-nav" @click="select_data()">查找</button></p>
                                </div>
                                <div class="right_float select_file_left">

                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th class="slet_01">收件日期</th>
                                                <th class="slet_02">IE工艺文件编号</th>
                                                <th class="slet_03">作业线体</th>
                                                <th class="slet_04">输单电脑</th>
                                                <th class="slet_05">工段名称</th>
                                                <th class="slet_06">系统输单号</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,i) in select_data_list" :key="i"
                                                v-bind:class='{active:i==activeIndex}'
                                                @click="pitch_on(i,item.iefile_no)">
                                                <td class="slet_01" v-text="item.ae_date"></td>
                                                <td class="slet_02" v-text="item.file_serial"></td>
                                                <td class="slet_03" v-text="item.dep_name"></td>
                                                <td class="slet_04" v-text="item.user_no"></td>
                                                <td class="slet_05" v-text="item.workshop_name"></td>
                                                <td class="slet_06" v-text="item.iefile_no"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-dismiss="modal" @click="select_data_ok()">确定</button>
                        <button class="btn btn-primary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                select_data_list: [],  //查询得到的数据
                date_qi: '',  //查询开始日期
                date_zhi: '',  //查询结束日期
                select_file_serial: '',  //查询的时候用的ie文件编号
                select_dep: '',    //查询的时候用作业线体
                select_iefile_no: '',   //查询的时候用单号   
                activeIndex: -1,   //用于查询选中行改变颜色
                list_bom: [],  //BOM配方
                list_qty: [],  //阶梯单价
                iefile_no: '',  //系统输单号
                hr_up: 0,  //1小时管理费用（元/小时）
                da_date: '',  //收件日期
                postil_up: 0,  //文件批注单价
                rem: '',  //文件备注
                file_serial: '', //IE工艺文件编号
                total_manpower: 0, //标准总人力(人)
                workshop_name: '', //工段名称
                point: 0,  //瓶颈时间（秒）
                dep: '',  //作业线体
                dep_name: '',  //部门名称
                job_time: 0,  //作业时间（秒）
                username: '',  //输单电脑
                sys_date: '',  //输单日期
            },
            mounted() {
                // 获取登录名
                // this.username=getCookie('username');
                this.username = $cookies.get('username')
                console.log($cookies.get('username'))
            },
            methods: {
                // 新增单据
                newly() {
                    // 获取作业线体
                    this.dep = $("#dept").val()
                    if (this.dep == '') {
                        alert('请选择作业线体')
                        return
                    }
                    axios.post('/iefile/', {
                        data: {
                            hr_up: this.hr_up, //1小时管理费用（元/小时）
                            da_date: this.da_date,  //收件日期
                            postil_up: this.postil_up,  //文件批注单价
                            rem: this.rem,  //文件备注
                            file_serial: this.file_serial, //IE工艺文件编号
                            total_manpower: this.total_manpower, //标准总人力(人)
                            workshop_name: this.workshop_name, //工段名称
                            point: this.point,  //瓶颈时间（秒）
                            dep: this.dep,  //作业线体
                            job_time: this.job_time,  //作业时间（秒）
                            username: this.username,  //输单电脑
                            sys_date: this.sys_date,  //输单日期
                            list_bom: this.list_bom,   //bom配方号
                            list_qty: this.list_qty  //阶梯单价
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data
                            this.iefile_no = data1.data
                            // 设置保存按钮为禁止
                            $(".save_ok").attr("disabled", "disabled");
                        })
                        .catch(err => {
                            alert(err.response["data"] + err.response["status"])
                        })
                },
                // 新增清空数据
                newly_empty() {
                    $("#dept").val('')
                    this.list_bom = []
                    this.list_qty = []
                    this.hr_up = this.postil_up = this.total_manpower = this.point = this.job_time = 0
                    this.iefile_no = this.da_date = this.rem = this.file_serial = this.workshop_name = this.dep = this.dep_name = ''
                    this.addDate()
                    // 移除保存按钮禁止
                    $('.save_ok').removeAttr('disabled')
                },
                // 删除表身
                tf_iefile(i, iefile_no, bom, itm) {
                    // console.log(this.iefile_no)
                    if(this.iefile_no==''){
                        if (bom != '' & bom != undefined) {
                                this.list_bom.splice(i, 1);
                            }
                            else {
                                this.list_qty.splice(i, 1);
                            }
                        return
                    }
                    if (iefile_no == '' || iefile_no == undefined) {
                        alert("参数不全")
                        return
                    }
                    if (itm <= 0 || itm == undefined) {
                        alert("参数不全")
                        return
                    }
                    axios.delete('/mfiefile/', {
                        data: {
                            iefile_no: iefile_no,
                            bom: bom,
                            itm: itm
                        }
                    })
                        .then(res => {
                            if (bom != '' & bom != undefined) {
                                this.list_bom.splice(i, 1);
                            }
                            else {
                                this.list_qty.splice(i, 1);
                            }
                        })
                        .catch(err => {
                            // console.log(err.response)
                            alert(err.response["data"] + err.response["status"])
                        })
                },
                // 单据查找
                select_data() {
                    $("#iesousuo").show();
                    axios.get('/mfiefile/', {
                        params: {
                            date_qi: this.date_qi,
                            date_zhi: this.date_zhi,
                            select_file_serial: this.select_file_serial,
                            select_dep: this.select_dep,
                            select_iefile_no: this.select_iefile_no
                        }
                    }).then(res => {
                        var data = res.data.data
                        this.select_data_list = data
                        $("#iesousuo").html("数据查询成功请选择！！！")
                    }).catch(err => {
                        alert(err.response["data"] + err.response["status"])
                    })

                },
                // 查询单据ok
                select_data_ok() {
                    this.activeIndex = -1
                    // console.log(this.iefile_no)
                    if (this.iefile_no == '' || this.iefile_no == undefined) {
                        alert("没有选择单据")
                        return
                    }
                    axios.get('/iefile/', {
                        params: {
                            iefile_no: this.iefile_no
                        }
                    }).then(res => {
                        var data = res.data
                        this.list_bom = []
                        this.list_qty = []
                        this.iefile_no = res.data.datamf[0]["iefile_no"]
                        this.hr_up = res.data.datamf[0]["hr_up"]
                        this.da_date = res.data.datamf[0]["ae_date"]
                        this.rem = res.data.datamf[0]["rem"]
                        this.file_serial = res.data.datamf[0]["file_serial"]
                        this.total_manpower = res.data.datamf[0]["total_manpower"]
                        this.workshop_name = res.data.datamf[0]["workshop_name"]
                        this.point = res.data.datamf[0]["point"]
                        this.dep = res.data.datamf[0]["dep"]
                        var dep_name = res.data.datamf[0]["dep_name"]
                        $("#dept").val(this.dep+'->'+dep_name)   //设置部门
                        this.postil_up = res.data.datamf[0]["postil_up"]
                        this.job_time = res.data.datamf[0]["job_time"]
                        this.username = res.data.datamf[0]["user_no"]
                        this.sys_date = res.data.datamf[0]["sys_date"]
                        this.list_bom = (res.data.tfiefilebom)
                        this.list_qty = res.data.tfiefileqty
                        // 设置保存按钮为禁止
                        $(".save_ok").attr("disabled", "disabled");
                        // 移除禁止
                        $('.delete').removeAttr('disabled')
                        $('.update').removeAttr('disabled')
                    }).catch(err => {
                        alert(err.response["data"] + err.response["status"])
                    })
                },
                //点击查询含改变颜色
                pitch_on(i, iefile_no) {
                    this.activeIndex = i
                    this.iefile_no = ''
                    this.iefile_no = iefile_no

                },
                // 新增一行BOM
                confirmbom() {
                    var bom = $("#bom").val().split("--")[0];
                    var bom_itm = { "bom_no": bom }
                    this.list_bom.push(bom_itm)
                },
                // 新增阶梯单价一行
                confirmqty() {
                    this.list_qty.push({ "QTY": 0, "UP": 0 })
                },
                // 修改单据
                update_data() {
                    // 获取作业线体
                    this.dep = $("#dept").val()
                    if (this.dep == '') {
                        alert('请选择作业线体')
                        return
                    }
                    axios.put('/iefile/', {
                        data: {
                            iefile_no:this.iefile_no,
                            hr_up: this.hr_up, //1小时管理费用（元/小时）
                            da_date: this.da_date,  //收件日期
                            postil_up: this.postil_up,  //文件批注单价
                            rem: this.rem,  //文件备注
                            file_serial: this.file_serial, //IE工艺文件编号
                            total_manpower: this.total_manpower, //标准总人力(人)
                            workshop_name: this.workshop_name, //工段名称
                            point: this.point,  //瓶颈时间（秒）
                            dep: this.dep,  //作业线体
                            job_time: this.job_time,  //作业时间（秒）
                            username: this.username,  //输单电脑
                            sys_date: this.sys_date,  //输单日期
                            list_bom: this.list_bom,   //bom配方号
                            list_qty: this.list_qty  //阶梯单价
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data
                            this.list_qty = data1.list_qty
                            this.list_bom = data1.list_bom
                            alert("修改成功")
                            // 设置保存按钮为禁止
                            $(".save_ok").attr("disabled", "disabled");
                        })
                        .catch(err => {
                            alert(err.response["data"] + err.response["status"])
                        })
                },
                // 删除单据
                delete_odd(){
                    axios.delete('/iefile/',{
                        data:{
                            iefile_no:this.iefile_no
                        }
                    }).then(res =>{
                        // console.log(this.iefile_no)
                        alert("删除成功")
                    }).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.date_qi = this.date_zhi = this.da_date = this.sys_date = currentdate
                },
                //退出登录
                logout() {
                    console.log("qweq")
                    axios.delete('/login/', {
                        params: {
                            user_1: this.user_1,
                            pswd: this.pswd,
                        }
                    })
                        .then(res => {

                        })
                        .catch(err => {
                        })

                },

            },
            created() {
                this.addDate()
            }
        });

        $(function () {
            // 开始写 jQuery 代码...
            // 设置隐藏
            $("#sousuo").hide();
            $("#iesousuo").hide();
            // 设置禁用
            $("#bom_ok").attr("disabled", "disabled");
            $(".update").attr("disabled", "disabled");
            $(".delete").attr("disabled", "disabled");
            var timer = null;
            // 定义一个公用的搜索接口
            // console.log(vm.$data.list)
            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);
                        // $("#sousuo").hide();
                        if (url == '/bom/') {
                            $("#sousuo").html("数据查询成功请选择！！！");
                            $('#bom_ok').removeAttr('disabled')
                        }

                        // console.log("ok")
                        // setTimeout(function () {
                        //     $.selectSuggest(field, datas);
                        // }, 1000);
                        // 是否第一次进入
                        if (clickif !== 1) {
                            $("#" + field).trigger("click");
                        }
                    })
                    .catch(err => {
                        alert(err.response["data"] + err.response["status"])
                    })
            };
            //查询BOM资料调用
            $("#bom").bind("input propertychange", function (event) {
                var search = $("#bom").val()
                // console.log($("#testInput").val())
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    // $("#sousuo").hide();
                    $("#sousuo").show();
                    getStr(search, '/bom/', 'bom');
                }, 1000);
            });
            //查询部门资料调用
            $("#dept").bind("input propertychange", function (event) {
                var search = $("#dept").val()
                // console.log($("#testInput").val())
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    getStr(search, '/dept/', 'dept');

                }, 1000);
            });
            getStr('', '/dept/', 'dept', 1);
        });
    </script>
    <!-- <script type="text/javascript" src="/static/js/export/jquery-1.8.2.js"></script> -->

</body>

</html>