liujiankang
/
iamberry-common-parent
forked from hexiugang/iamberry-common-parent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <#include "/base/add_base.ftl">
    <link href="${path}/common/lib/jquery.ui/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style>
        .my-title{font-weight: 500;padding-left: 15px;position: relative;}
        .my-title:after{content: '';position: absolute;left: 0;top:12%;width: 3px;height: 80%;background: #32a3d8;}
        .my-input{padding: 5px 10px;width: 60%;}
        .input-box{margin: 18px 0;}
        .input-dic{float: left;margin:5px 10px 0 0;font-size: 12px;}
        .add-list{list-style-type: none;padding: 10px;background-color: #f5f5f5;width: 60%;float: left;margin: 0;}
        .my-btn-edit{padding: 6px 20px;background-color: #fff;color: #32a3d8;border: 1px solid #32a3d8;cursor:pointer;margin: 10px 10px 0 10px;}
        .my-btn-reset{padding: 6px 20px;width: 150px; background-color: #fff;color: #32a3d8;border: 1px solid #32a3d8;cursor:pointer;margin: 10px 10px 0 10px;}
        .my-btn-submit{padding: 6px 20px;width: 150px; background-color: #32a3d8;color: #fff;border: 1px solid #32a3d8;cursor:pointer;margin: 10px 10px 0 10px;}
        .add-list>li{margin: 10px 0;}
        .cp-list{list-style-type: none;margin: 0;padding: 0;}
        .cp-list>li{position: relative;    cursor: pointer;clear: both;padding: 15px 0;}
        .my-select{border: 1px solid rgba(0,0,0,.1);padding:6px 50px 6px 15px;height: 34px;margin: 0 10px; -webkit-appearance:none;appearance:none;background: url(images/select-1.png) right center no-repeat;background-size:auto 100%;}
    </style>
    <title>添加生产产品- 生产产品管理 - RST</title>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-admin-addProduce">
        <div style="padding: 10px;width: 600px;margin: 0 auto;" class="">
            <div class="my-title">产品信息</div>
            <div class="input-box"><span class="input-dic">产品名称</span><input class="my-input" name="produceName" type="text" value="" placeholder="请输入产品名称"/> </div>
            <div class="input-box"><span class="input-dic">产品描述</span><input class="my-input" type="text" name="produceRemake" value="" placeholder="请输入产品描述"/> </div>
            <div class="input-box"><span class="input-dic">产品类型</span>
                <label><input type="radio" name="produceType" value="1">净水机</label>
                <label><input type="radio" name="produceType" value="2">冲奶机</label>
            </div>
            <div style="background-color:rgba(0,0,0,.1);height: 1px;margin: 15px 0;"></div>
            <div class="my-title">节点信息</div>

            <ul class="cp-list onrTheProcess" id="sortable">
                <li id="1" class="processList">
                    <input type="hidden" class="processNumber" value="1">
                    <div class="input-box"><span class="input-dic process-type">节点类型</span>
                        <label class=""><input type="radio" name="processType_p1" value="1">生产工序</label>
                        <label><input type="radio" name="processType_p1" value="2">修理工序</label>
                        <button type="button" class="my-btn-edit" onclick="delProcess(this)">删除节点</button>
                    </div>
                    <div class="input-box"><span class="input-dic">节点名称</span><input class="my-input" name="processName" type="text" value="" placeholder="请输入节点名称"/> </div>
                    <div class="input-box"><span class="input-dic">节点操作</span>
                        <ul class="add-list oneTheNode" >
                            <li class="nodeList">
                                <#--<select class="my-select"><option>1</option></select>-->
                                <label><input type="radio" name="nodeStatus_p1_n1" value="1">正常</label>
                                <label><input type="radio" name="nodeStatus_p1_n1" value="0">异常</label>
                                <input class="my-input" name="nodeDes" type="text" value="" placeholder="请输入节点操作描述，2-10位中文" maxlength="10"/>
                                <i class="Hui-iconfont" onclick="delNode(this)">&#xe60b;</i>
                            </li>
                            <li>
                                <button type="button" class="my-btn-edit" onclick="addProNode(this)">增加节点操作</button>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>

            <div style="clear: both;"></div>
            <div><button type="button" class="my-btn-edit" onclick="addProcess(this)">增加节点</button></div>
            <div>
                <button type="reset" class="my-btn-reset" >重置</button><button type="submit" class="my-btn-submit">确认提交</button>
            </div>
        </div>

    </form>
</article>
<#--<script type="text/javascript" src="${path}/common/lib/ueditor/1.4.3/ueditor.config.js"></script>-->
<#--<script type="text/javascript" src="${path}/common/lib/ueditor/1.4.3/ueditor.all.js"></script>-->
<script type="text/javascript" src="${path}/common/lib/jquery.ui/jquery-ui.js"></script>
<script type="text/javascript">

    //动态显示隐藏所属菜单
    $(document).on('click', '.menuSubid input[type=radio]', function() {
        isSelectShow($(this).val())
    })

    $(function(){
        $("#form-admin-addProduce").validate({
            rules:{
                subName:{
                    required:true,
                    minlength:4,
                    maxlength:30
                }
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                $.post(root_path + "/admin/produce/save_produce", formatJSON(),function(result){
                    if (result.returnCode != 200 || result.returnCode != 200) {
                        layer.msg('录入失败，请重试!',{icon: 5,time:3000});
                    } else {
                        layer.msg('录入成功!!',{icon: 1,time:2000}, function () {
                            // 关闭当前页面，并刷新父级页面
                            window.location.href= '${path}/admin/produce/list_produce?detaId='+result.resultMsg;
                        });
                    }
                });
            }
        });
    });

    /*将表单format为JSON*/
    function formatJSON() {
        var produce = {};

        var oneTheProcess = $(".onrTheProcess").find(".processList");
        var proessList = new Array();
        oneTheProcess.each(function(){
            var produceProcess = {};
            produceProcess.processName =  $(this).find("[name='processName']").val();   //获取工序名称
            var processNumber = $(this).find(".processNumber").val();
            var processTypeName = "processType_p"+processNumber;         //获取工序类型名称
            produceProcess.processType =  $("input[name="+ processTypeName +"]:checked").val();   //获取工序类型

            var nodeList =  new Array();
            var j=1;
            $(this).find(".oneTheNode").find(".nodeList").each(function(){
                var processNode = {};
                processNode.nodeDes = $(this).find("[name='nodeDes']").val();   //获取节点描述
                var nodeStatusName = "nodeStatus_p"+processNumber+"_n" +j;
                processNode.nodeStatus = $("input[name="+ nodeStatusName +"]:checked").val();     //获取节点状态
                nodeList.push(processNode);
                j++;
            })
            produceProcess.json = JSON.stringify(nodeList);     //将node变成json存入到工序对象中
            //produceProcess.nodes = nodeList;
            proessList.push(produceProcess);
        })
        produce.json = JSON.stringify(proessList);      //将工序变成json存入到产品对象中
        produce.produceName = $("[name='produceName']").val();//获取产品名称
        produce.produceRemake = $("[name='produceRemake']").val();//获取产品描述
        produce.produceType = $("[name='produceType']").val();//获取产品描述
        return produce;
    }

    /**
     * 增加节点操作方法
     */
    function addProNode(node){
        var processNumber = $(node).parents(".processList").find(".processNumber").val();    //获取当前的节点标识
        var nodeNumber = $(node).parents(".oneTheNode").find(".nodeList").length + 1;       //因为是新加的节点操作所以 +1
        var nodeHtml = '<li class="nodeList">'
                //+'<select class="my-select"><option>1</option></select>&nbsp;'
                +'<label><input type="radio" name="nodeStatus_p'+ processNumber +'_n'+ nodeNumber +'" value="1">正常</label>&nbsp;'
                +'<label><input type="radio" name="nodeStatus_p'+ processNumber +'_n'+ nodeNumber +'" value="0">异常</label>&nbsp;'
                +'<input class="my-input" name="nodeDes" type="text" value="" placeholder="请输入节点操作描述，2-10位中文" maxlength="10"/>&nbsp;'
                +'<i class="Hui-iconfont" onclick="delNode(this)">&#xe60b;</i>'
                +'</li>';
        $(node).parent().before(nodeHtml);
    }

    /**
     * 增加工序节点
     * @param node
     */
    function addProcess(node) {
        var processNumber = $(".onrTheProcess").find(".processList").length + 1;  //因为是新加的工序节点所以 +1
        var processHtml = '<li id="'+ processNumber +'"  class="processList"><input type="hidden" class="processNumber" value="'+ processNumber +'">'
                + '<div class="input-box"><span class="input-dic">节点类型</span>'
                + '<label><input type="radio" name="processType_p'+ processNumber +'" value="1">生产工序</label>'
                + '<label><input type="radio" name="processType_p'+ processNumber +'" value="2">修理工序</label>'
                + '<button type="button" class="my-btn-edit" onclick="delProcess(this)">删除节点</button>'
                + '</div>'
                + '<div class="input-box"><span class="input-dic">节点名称</span><input class="my-input" name="processName" type="text" value="" placeholder="请输入节点名称"/> </div>'
                + '<div class="input-box"><span class="input-dic">节点操作</span>'
                + '<ul class="add-list oneTheNode">'
                + '<li class="nodeList">'
                //  + '<select class="my-select"><option>1</option></select>&nbsp;'
                + '<label><input type="radio" name="nodeStatus_p'+ processNumber +'_n1" value="1">正常</label>&nbsp;'
                + '<label><input type="radio" name="nodeStatus_p'+ processNumber +'_n1" value="0">异常</label>&nbsp;'
                + '<input class="my-input" name="nodeDes" type="text" value="" placeholder="请输入节点操作描述，2-10位中文" maxlength="10"/>&nbsp;'
                + '<i class="Hui-iconfont" onclick="delNode(this)">&#xe60b;</i>'
                + '</li>'
                + '<li><button type="button" class="my-btn-edit" onclick="addProNode(this)">增加节点操作</button></li>'
                + '</ul>'
                + '</div>'
                + '</li>';
        $(".onrTheProcess").append(processHtml);
    }

    /**
     * 删除工序节点
     * @param node
     */
    function delProcess(node) {
        var processNumber = $(node).parents(".onrTheProcess").find(".processList").length;
        if(parseInt(processNumber) < 2){
            layer.msg('至少要有一个节点!',{icon: 5,time:3000});
        }else{
            $(node).parents(".processList").remove();
            delProcessIds += delProcessIds;
        }
    }

    /**
     * 删除节点操作
     * @param node
     */
    function delNode(node){
        var nodesNumber = $(node).parents(".oneTheNode").find(".nodeList").length;
        if(parseInt(nodesNumber) < 2){
            layer.msg('至少要有一个节点操作!',{icon: 5,time:3000});
        }else{
            $(node).parents(".nodeList").remove();
        }
    }
</script>

<script>
    $(function() {
        //在ajax拉取数据append()之后再初始化拖拽排序
        $( "#sortable" ).sortable({
            revert: true,
            containment: "parent"
        });
        $( "ul, li" ).disableSelection();

    });

    //确认提交事件，获取每个li的id
    $(document).on('click', '.my-btn-submit', function() {
        $("#sortable>li").each(function(){
            console.log($(this).attr("id"));
        });
    });
</script>
</body>
</html>