流程

html

 <section class="col-md-12 contract">
        <div class="col-md-12 top">
            <div class="flow_line"></div>
            <div class="contract_flow">
                <div class="out_confirm">
                    <div class="one" style="cursor:pointer" lang="operation">
                        <span class="two">100% </span>
                    </div>
                    <div class="describe">
                        <span>外协确认完成</span>
                        <div class="info">
                            <span>更新时间:<strong class="time">2017/12/58</strong></span><br>
                            <span>负责人：<strong class="person">张晓敏</strong></span>
                        </div>
                    </div>
                </div>
                <div class="out_delivery">
                    <div class="one" style="cursor:pointer" lang="material">
                        <span class="two">100%</span>
                    </div>
                    <div class="describe">
                        <span>外协确认发货</span>
                        <div class="info">
                            <span>更新时间:<strong class="time">2017/12/58</strong></span><br>
                            <span>负责人：<strong class="person">张晓敏</strong></span>
                        </div>
                    </div>
                </div>
                <div class="cy_acceptance">
                    <div class="one" style="cursor:pointer" lang="mathouse">
                        <span class="two">100%</span>
                    </div>
                    <div class="describe">
                        <span>验收</span>
                        <div class="info">
                            <span>更新时间:<strong class="time">2017-12-29</strong></span><br>
                            <span>负责人：<strong class="person">张晓敏</strong></span>
                        </div>
                    </div>
                </div>
                <div class="cy_settlement">
                    <div class="one" style="cursor:pointer" lang="uplocation">
                        <span class="two">100%</span>
                    </div>
                    <div class="describe">
                        <span>结算</span>
                        <div class="info">
                            <span>更新时间:<strong class="time">2017-12-29</strong></span><br>
                            <span>负责人：<strong class="person">张晓敏</strong></span>
                        </div>
                    </div>
                </div>
                <div class="check_account">
                    <div class="one" style="cursor:pointer" lang="acquisition">
                        <span class="two">100% </span>
                    </div>
                    <div class="describe">
                        <span>核对账款</span>
                        <div class="info">
                            <span>更新时间:<strong class="time">2017-12-29</strong></span><br>
                            <span>负责人：<strong class="person">张晓敏</strong></span>
                        </div>
                    </div>
                </div>
                <div class="cy_pay">
                    <div class="one" style="cursor:pointer" lang="profirst">
                        <span class="two">100%</span>
                    </div>
                    <div class="describe">
                        <span>付款</span>
                        <div class="info">
                            <span>更新时间:<strong class="time">2017-12-29</strong></span><br>
                            <span>负责人：<strong class="person">张晓敏</strong></span>
                        </div>
                    </div>
                </div>
                <div class="payment_voucher">
                    <div class="one" style="cursor:pointer" lang="profirstconfirm">
                        <span class="two">100%</span>
                    </div>
                    <div class="describe">
                        <span>查看支付凭证</span>
                        <div class="info">
                            <span>更新时间:<strong class="time">2017-12-29</strong></span><br>
                            <span>负责人：<strong class="person">张晓敏</strong></span>
                        </div>
                    </div>
                </div>
                <div class="complete">
                    <div class="one" style="cursor:pointer" lang="batchproduct">
                        <span class="two">100%</span>
                    </div>
                    <div class="describe">
                        <span>确认完成</span>
                        <div class="info">
                            <span>更新时间:<strong class="time">2017-12-28</strong></span><br>
                            <span>负责人：<strong class="person">张晓敏</strong></span>
                        </div>
                    </div>
                </div>
          </div>
        </div>
        <div class="col-md-12 out_confirm_detail">
            <div class="tital">
                <span style="padding-left: 20px;">外协确认完成</span>
            </div>
            <div class="col-md-12 three">
                <label class="col-md-1 details" for="head_person" style="width: 80px;">负责人</label>
                <input class="col-md-2 details four" type="text" name="" id="head_person" value="" placeholder="请填写负责人">
                <div class="col-md-1 details confiram_btn1">完成</div>
            </div>
        </div>
        <div class="col-md-12 out_delivery_detail">
            <div class="tital">
                <span style="padding-left: 20px;">外协确认发货</span>
            </div>
            <div class="col-md-12 three">
                <label class="col-md-1 details" for="delivery_no" style="width: 100px;">物流单号</label>
                <input class="col-md-2 details four" type="text" name="" id="delivery_no" value="" placeholder="请填写物流单号">
                <label class="col-md-1 details" for="head_person" style="width: 80px;">负责人</label>
                <input class="col-md-2 details four" type="text" name="" id="head_person" value="" placeholder="请填写负责人">
                <div class="col-md-1 details confiram_btn2">完成</div>
            </div>
        </div>
        <div class="col-md-12 cy_acceptance_detail">
           <div class="tital">
                <span style="padding-left: 20px;">创元验收</span>
            </div>
            <div class="col-md-12 three">
                <label class="col-md-1 details" for="goods_quantity" style="width: 90px;">收货数量</label>
                <input class="col-md-2 details four" type="text" name="" id="goods_quantity" value="" placeholder="请填写收货数量">
                <label class="col-md-1 details" for="head_person" style="width: 80px;">负责人</label>
                <input class="col-md-2 details four" type="text" name="" id="head_person" value="" placeholder="请填写负责人">
                <div class="col-md-1 details confiram_btn3">完成</div>
            </div>
        </div>
        <div class="col-md-12 cy_settlement_detail">
            <div class="tital">
                <span style="padding-left: 20px;">创元结算</span>
            </div>
            <div class="col-md-12 three">
                <label class="col-md-1 details" for="smt_percent">SMT合格率</label>
                <input class="col-md-1 details four" type="text" name="" id="smt_percent" value="" placeholder="合格率%">
                <label class="col-md-1 details" for="dpi_percent">DIP合格率</label>
                <input class="col-md-1 details four" type="text" name="" id="dpi_percent" value="" placeholder="合格率%">
                <label class="col-md-1 details" for="out_all_price">外协总金额</label>
                <input class="col-md-1 details four" type="text" name="" id="out_all_price" value="" placeholder="外协总金额" disabled="disabled">
                <label class="col-md-1 details" for="logistics">物料扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="logistics" value="" placeholder="物料扣款" autoComplete='off'>
                <label class="col-md-1 details" for="bad_deductions">不良扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="bad_deductions" value="" placeholder="物料扣款" autoComplete='off'>
                <label class="col-md-1 details" for="deductions">总扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="deductions" value="" placeholder="总扣款" disabled="disabled" autoComplete='off'>
                <label class="col-md-1 details" for="payable">应付款</label>
                <input class="col-md-1 details four" type="text" name="" id="payable" value="" placeholder="应付款">
                <label class="col-md-1 details" for="head_person">负责人</label>
                <input class="col-md-1 details four" type="text" name="" id="head_person" value="" placeholder="请填写负责人">
                <div class="col-md-1 details confiram_btn4">完成</div>
            </div>
        </div>
        <div class="col-md-12 check_account_detail">
            <div class="tital">
                <span style="padding-left: 20px;">核对账款</span>
            </div>
            <div class="col-md-12 three">
                <label class="col-md-1 details" for="smt_percent">SMT合格率</label>
                <input class="col-md-1 details four" type="text" name="" id="smt_percent" value="" placeholder="合格率%" disabled="disabled">
                <label class="col-md-1 details" for="dpi_percent">DIP合格率</label>
                <input class="col-md-1 details four" type="text" name="" id="dpi_percent" value="" placeholder="合格率%" disabled="disabled">
                <label class="col-md-1 details" for="out_all_price">外协总金额</label>
                <input class="col-md-1 details four" type="text" name="" id="out_all_price" value="" placeholder="外协总金额" disabled="disabled">
                <label class="col-md-1 details" for="logistics">物料扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="logistics" value="" placeholder="物料扣款" disabled="disabled">
                <label class="col-md-1 details" for="bad_deductions">不良扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="bad_deductions" value="" placeholder="物料扣款" disabled="disabled">
                <label class="col-md-1 details" for="deductions">总扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="deductions" value="" placeholder="总扣款" disabled="disabled">
                <label class="col-md-1 details" for="payable">应付款</label>
                <input class="col-md-1 details four" type="text" name="" id="payable" value="" placeholder="应付款" disabled="disabled">
                <label class="col-md-1 details" for="head_person">负责人</label>
                <input class="col-md-1 details four" type="text" name="" id="head_person" value="" placeholder="请填写负责人">
                <div class="col-md-1 details confiram_btn5">完成</div>
            </div>
        </div>
        <div class="col-md-12 cy_pay_detail">
            <div class="tital">
                <span style="padding-left: 20px;">创元付款</span>
            </div>
            <div class="col-md-12 three">
               <label class="col-md-1 details" for="smt_percent">SMT合格率</label>
                <input class="col-md-1 details four" type="text" name="" id="smt_percent" value="" placeholder="合格率%" disabled="disabled">
                <label class="col-md-1 details" for="dpi_percent">DIP合格率</label>
                <input class="col-md-1 details four" type="text" name="" id="dpi_percent" value="" placeholder="合格率%"  disabled="disabled">
                <label class="col-md-1 details" for="out_all_price">外协总金额</label>
                <input class="col-md-1 details four" type="text" name="" id="out_all_price" value="" placeholder="外协总金额"  disabled="disabled">
                <label class="col-md-1 details" for="logistics">物料扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="logistics" value="" placeholder="物料扣款"  disabled="disabled">
                <label class="col-md-1 details" for="bad_deductions">不良扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="bad_deductions" value="" placeholder="物料扣款"  disabled="disabled">
                <label class="col-md-1 details" for="deductions">总扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="deductions" value="" placeholder="总扣款"  disabled="disabled">
                <label class="col-md-1 details" for="payable">应付款</label>
                <input class="col-md-1 details four" type="text" name="" id="payable" value="" placeholder="应付款"  disabled="disabled">
                 <label class="col-md-1 details" for="pay_price">实际付款</label>
                <input class="col-md-1 details four" type="text" name="" id="pay_price" value="" placeholder="实际付款">
                <label class="col-md-1 details" for="head_person">负责人</label>
                <input class="col-md-1 details four" type="text" name="" id="head_person" value="" placeholder="请填写负责人">
                <label class="col-md-1 details" for="head_person">上传凭证</label>
                <div class="col-md-1 details four up_img" style="text-align: center;">
                  <input type="file" id="voucher"  value="" style="display: none;">上传凭证
                </div>
                <div class="col-md-1 details confiram_btn6">完成</div>
            </div>
        </div>
        <div class="col-md-12 payment_voucher_detail">
            <div class="tital">
                <span style="padding-left: 20px;">查看支付凭证</span>
            </div>
            <div class="col-md-12 three">
               <label class="col-md-1 details" for="smt_percent">SMT合格率</label>
                <input class="col-md-1 details four" type="text" name="" id="smt_percent" value="" placeholder="合格率%"  disabled="disabled">
                <label class="col-md-1 details" for="dpi_percent">DIP合格率</label>
                <input class="col-md-1 details four" type="text" name="" id="dpi_percent" value="" placeholder="合格率%"  disabled="disabled">
                <label class="col-md-1 details" for="out_all_price">外协总金额</label>
                <input class="col-md-1 details four" type="text" name="" id="out_all_price" value="" placeholder="外协总金额"  disabled="disabled">
                <label class="col-md-1 details" for="logistics">物料扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="logistics" value="" placeholder="物料扣款"  disabled="disabled">
                <label class="col-md-1 details" for="bad_deductions">不良扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="bad_deductions" value="" placeholder="物料扣款"  disabled="disabled">
                <label class="col-md-1 details" for="deductions">总扣款</label>
                <input class="col-md-1 details four" type="text" name="" id="deductions" value="" placeholder="总扣款"  disabled="disabled">
                <label class="col-md-1 details" for="payable">应付款</label>
                <input class="col-md-1 details four" type="text" name="" id="payable" value="" placeholder="应付款"  disabled="disabled">
                <label class="col-md-1 details" for="pay_price">实际付款</label>
                <input class="col-md-1 details four" type="text" name="" id="pay_price" value="" placeholder="实际付款" disabled="disabled">
                <label class="col-md-1 details" for="head_person">负责人</label>
                <input class="col-md-1 details four" type="text" name="" id="head_person" value="" placeholder="请填写负责人">
                <label class="col-md-1 details" for="head_person">下载支付凭证</label>
                <div class="col-md-1 details four up_img" id="head_person" value="" style="text-align: center;">
                  <a href="" id="pcb_down" style="color:#fff;">下载</a>
                </div>
                <div class="col-md-1 details confiram_btn7">完成</div>
            </div>
        </div>
        <div class="col-md-12 complete_detail">
            <div class="tital">
                <span style="padding-left: 20px;">确认完成</span>
            </div>
             <div class="col-md-12 three">
                <label class="col-md-1 details" for="head_person" style="width: 80px;">负责人</label>
                <input class="col-md-2 details four" type="text" name="" id="head_person" value="" placeholder="请填写负责人">
                <div class="col-md-1 details confiram_btn8">完成</div>
            </div>
        </div>
   </section>

js部分

 //日期获取
    var myDate = new Date();
    var year=myDate.getFullYear();   //获取当前年
    var month=myDate.getMonth()+1;   //获取当前月
    var date=myDate.getDate();       //获取当前日
    var now_time=year+'/'+month+"/"+date;
    $(".out_confirm_detail").hide();
    $(".out_delivery_detail").hide();
    $(".cy_acceptance_detail").hide();
    $(".cy_settlement_detail").hide();
    $(".check_account_detail").hide();
    $(".cy_pay_detail").hide();
    $(".payment_voucher_detail").hide();
    $(".complete_detail").hide();
    
    $(".top").on('click','.out_confirm',function(){
        $(".out_confirm_detail").show();
        $(".out_delivery_detail").hide();
        $(".cy_acceptance_detail").hide();
        $(".cy_settlement_detail").hide();
        $(".check_account_detail").hide();
        $(".cy_pay_detail").hide();
        $(".payment_voucher_detail").hide();
        $(".complete_detail").hide();
        $(".one").css("border","none");
        $(".out_confirm").find(".one").css("border","5px solid red");
        $(".confiram_btn1").on('click',function(){
           var head_person = $(".out_confirm_detail").find("#head_person").val();
           if(head_person==''){
              return false;
            }
            var data = {
                "head_person":head_person,
                "now_time" :now_time
            }
        });
    });
    $(".top").on('click','.out_delivery',function(){
        $(".out_confirm_detail").hide();
        $(".out_delivery_detail").show();
        $(".cy_acceptance_detail").hide();
        $(".cy_settlement_detail").hide();
        $(".check_account_detail").hide();
        $(".cy_pay_detail").hide();
        $(".payment_voucher_detail").hide();
        $(".complete_detail").hide();
        $(".one").css("border","none");
        $(".out_delivery").find(".one").css("border","5px solid red");
        $(".confiram_btn2").on('click',function(){
           var delivery_no = $(".out_delivery_detail").find("#delivery_no").val(),
               head_person = $(".out_delivery_detail").find("#head_person").val();
               if(head_person=='' || delivery_no==''){
                  return false;
               }
            var data = {
                "delivery_no" :delivery_no,
                "head_person":head_person,
                "now_time" :now_time
            }
        });
    });
    $(".top").on('click','.cy_acceptance',function(){
        $(".out_confirm_detail").hide();
        $(".out_delivery_detail").hide();
        $(".cy_acceptance_detail").show();
        $(".cy_settlement_detail").hide();
        $(".check_account_detail").hide();
        $(".cy_pay_detail").hide();
        $(".payment_voucher_detail").hide();
        $(".complete_detail").hide();
        $(".one").css("border","none");
        $(".cy_acceptance").find(".one").css("border","5px solid red");
        $(".confiram_btn3").on('click',function(){
           var goods_quantity = $(".cy_acceptance_detail").find("#goods_quantity").val(),
               head_person = $(".cy_acceptance_detail").find("#head_person").val();
               if(goods_quantity=='' || !/^[0-9]*$/.test(goods_quantity)){
                  return false;
               }
               if(head_person==''){
                  return false;
               }
            var data = {
                "goods_quantity" :goods_quantity,
                "head_person":head_person,
                "now_time" :now_time
            }
        });
    });
    $(".top").on('click','.cy_settlement',function(){
        $(".out_confirm_detail").hide();
        $(".out_delivery_detail").hide();
        $(".cy_acceptance_detail").hide();
        $(".cy_settlement_detail").show();
        $(".check_account_detail").hide();
        $(".cy_pay_detail").hide();
        $(".payment_voucher_detail").hide();
        $(".complete_detail").hide();
        $(".one").css("border","none");
        $(".cy_settlement").find(".one").css("border","5px solid red");
         $(".confiram_btn4").on('click',function(){
           var smt_percent = $(".cy_settlement_detail").find("#smt_percent").val(),
               dpi_percent = $(".cy_settlement_detail").find("#dpi_percent").val(),
               payable = $(".cy_settlement_detail").find("#payable").val(),
               head_person = $(".cy_settlement_detail").find("#head_person").val(),
               logistics =$(".cy_settlement_detail").find("#logistics").val(),
               bad_deductions = $(".cy_settlement_detail").find("#bad_deductions").val();
               
                    $(".cy_settlement_detail").find("#deductions").val(parseFloat(logistics)+parseFloat(bad_deductions));


               if(smt_percent=='' || !/^[0-9]*$/.test(smt_percent)){
                  return false;
               }
              if(dpi_percent=='' || !/^[0-9]*$/.test(dpi_percent)){
                  return false;
               }
               if(logistics=='' || !/^[0-9]*$/.test(logistics)){
                  return false;
               }
              if(bad_deductions=='' || !/^[0-9]*$/.test(bad_deductions)){
                return false;
              }
              if(deductions=='' || !/^[0-9]*$/.test(deductions)){
                return false;
              }
              if(payable=='' || !/^[0-9]*$/.test(payable)){
                return false;
              }
              if(head_person==''){
                  return false;
              }
              
            var data = {
                "smt_percent" :smt_percent+'%',
                "dpi_percent" : dpi_percent+'%',
                "logistics" :logistics,
                "bad_deductions" : bad_deductions,
                "deductions" : deductions,
                "payable" : payable,
                "head_person":head_person,
                "now_time" :now_time
            }
        });


    });
    $(".top").on('click','.check_account',function(){
        $(".out_confirm_detail").hide();
        $(".out_delivery_detail").hide();
        $(".cy_acceptance_detail").hide();
        $(".cy_settlement_detail").hide();
        $(".check_account_detail").show();
        $(".cy_pay_detail").hide();
        $(".payment_voucher_detail").hide();
        $(".complete_detail").hide();
        $(".one").css("border","none");
        $(".check_account").find(".one").css("border","5px solid red");
        $(".confiram_btn5").on('click',function(){
           var head_person = $(".check_account_detail").find("#head_person").val();
           if(head_person==''){
              return false;
            }
            var data = {
                "head_person":head_person,
                "now_time" :now_time
            }
        });
    });
    $(".top").on('click','.cy_pay',function(){
        $(".out_confirm_detail").hide();
        $(".out_delivery_detail").hide();
        $(".cy_acceptance_detail").hide();
        $(".cy_settlement_detail").hide();
        $(".check_account_detail").hide();
        $(".cy_pay_detail").show();
        $(".payment_voucher_detail").hide();
        $(".complete_detail").hide();
        $(".one").css("border","none");
        $(".cy_pay").find(".one").css("border","5px solid red");
        $(".cy_pay_detail").find(".up_img").on('click',function(){
            document.getElementById("voucher").click();


        });
        $(".confiram_btn6").on('click',function(){
        var head_person = $(".cy_pay_detail").find("#head_person").val(),
           voucher = $(".cy_pay_detail").find("#voucher").val(),
            pay_price = $(".cy_pay_detail").find("#pay_price").val();
           if(head_person=='' || voucher=='' || pay_price ==''){
              return false;
            }
            var data = {
                "head_person":head_person,
                "pay_price" : pay_price,
                "voucher" : voucher,
                "now_time" :now_time
            }
        });


    });
    $(".top").on('click','.payment_voucher',function(){
        $(".out_confirm_detail").hide();
        $(".out_delivery_detail").hide();
        $(".cy_acceptance_detail").hide();
        $(".cy_settlement_detail").hide();
        $(".check_account_detail").hide();
        $(".cy_pay_detail").hide();
        $(".payment_voucher_detail").show();
        $(".complete_detail").hide();
        $(".one").css("border","none");
        $(".payment_voucher").find(".one").css("border","5px solid red");
        $(".confiram_btn7").on('click',function(){
          var head_person = $(".payment_voucher_detail").find("#head_person").val();
           if(head_person==''){
              return false;
            }
            var data = {
                "head_person":head_person,
                "now_time" :now_time
            }
        });
    });
    $(".top").on('click','.complete',function(){
        $(".out_confirm_detail").hide();
        $(".out_delivery_detail").hide();
        $(".cy_acceptance_detail").hide();
        $(".cy_settlement_detail").hide();
        $(".check_account_detail").hide();
        $(".cy_pay_detail").hide();
        $(".payment_voucher_detail").hide();
        $(".complete_detail").show();
        $(".one").css("border","none");
        $(".complete").find(".one").css("border","5px solid red");
         $(".confiram_btn8").on('click',function(){
          var head_person = $(".complete_detail").find("#head_person").val();
           if(head_person==''){
              return false;
            }
            var data = {
                "head_person":head_person,
                "now_time" :now_time
            }
        });
    });点击打开链接