lyui 列表 上传

1.js

 layui.use(['table', 'element', 'laydate', 'layer','upload'], function () {
        var table = layui.table, element = layui.element, form = layui.form, laydate = layui.laydate,
            layer = layui.layer,upload=layui.upload;
        element.init();

        
        
      
        Date.prototype.Format = function (fmt) {
            var o = {
                    "M+": this.getMonth() + 1, //月份 
                    "d+": this.getDate(), //日 
                    "H+": this.getHours(), //小时 
                    "m+": this.getMinutes(), //分 
                    "s+": this.getSeconds(), //秒 
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                    "S": this.getMilliseconds() //毫秒 
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
        }
        //供方资料列表
        table.render({
            elem: '#js_purchasePlan_manage_list_table',
            url: gContextPath + '/purchasePlan/purchasePlanListPage.htm',
            cellMinWidth: 80,
            loading: true,
            page: true,
            even: true,
            method: 'POST',
            limits: [10,20,30, 50, 100],
            limit: 10, //每页默认显示的数量
            done: function () {
                layer.closeAll();
                upload.render({
                    elem: '.js_upload_file',
                    url: gContextPath+"/uploadfile2.htm"
                    ,multiple: false
                    ,before:function(){
                    }
                    ,field: 'file'
                    , accept: 'images'
                    , data: {
                        "index": 1
                    },
                    accept: 'file',
                    //普通文件
                    done: function (res) {
                       console.log(res);
                       var _rel = $(this.item).attr('rel')||"";
                       var _rel_type = $(this.item).attr('rel_type')||"";
                       var _fileId = res[0].data.fid;
                       $.ajax({
                           url  : gContextPath+"/purchasePlan/uptPlanSjTime.htm",
                           type: "POST",
                           data:{id:_rel,relType:_rel_type,fileId:_fileId},
                           dataType: 'json',
                           success: function (response) {
                               var returnCode = response.returnCode;
                               if ("1" == returnCode) {
                                   layer.alert("上传成功",{offset: '100px'},function(){
                                        $(".js_purchasePlan_manage_list_serach").click();
                                   });
                               } else {
                                   layer.alert("上传失败：" + response.msg,{offset: '100px'});
                                   return false;
                               }
                           },
                           error: function (XMLHttpRequest, textStatus, errorThrown) {
                               if (XMLHttpRequest.readyState == 0) {
                                   layer.alert("上传失败",{offset: '100px'});
                                   return false;
                               }
                           }
                       });
                       
                    },
                    error: function () {
                        layer.alert("上传失败",{offset: '100px'});
                        return false;
                    }

                });
            },
            where:
                {
                plan_code:$('.js_purchasePlan_plan_code').val()||"",
                tender_type:$('.js_purchasePlan_tender_type').val()||"",
                purchase_type:$('.js_purchasePlan_purchase_type').val()||"",
                plan_status:$('.js_purchasePlan_plan_status').val()||"",
                isErr:$('.js_purchasePlan_isError').val()||"",
                tender_category:$('#tender_category').val()||"",
                tender_category2:$("#tender_category2").val()||""
                }
            ,
            cols: [
                [
                    {field: 'tender_type', title:"选择",  "100%", unresize: true,templet: function (row) {
                        var $list = $($("#js_div_order_hide").html());

                        var planCode = row.plan_code||"";
                        var planName = row.plan_name||"";
                        var tenderType = row.tender_type||"";
                        var purchaseType = row.purchase_type||"";
                        var chTime = row.ch_date||"";
                        var fbTime = row.fb_date||"";
                        var dbTime = row.db_date||"";
                        var planStatus = row.plan_status||"";
                        var qyTime = row.qy_date||"";
                        var jcTime = row.jc_date||"";
                        var updateTime = row.updatedat||"";
                        var userName = row.user_name||"";
                        var typeName = row.type_name||"";
                        var name = row.name||"";

                        var whetherRelease = row.whether_release;
                        var id = row.id||"";
                        $list.find(".js_table_plan_id").val(id);
                        $list.find(".js_table_plan_id").attr("whether_release",whetherRelease);
                        $list.find(".js_table_plan_id").attr("plan_status",planStatus);
                        $list.find(".js_table_plan_detail").attr("rel",id);
                        $list.find(".js_plan_status_follow").attr("rel",id);


                        if(whetherRelease=='1'){
                            $list.find(".js_table_whether_release").html("已发布");
                        }else{
                            $list.find(".js_table_whether_release").html("未发布");
                        }
                        
                        $list.find(".js_table_plan_type").html(getTenderType(tenderType));
                        $list.find(".js_table_plan_code").html(planCode);
                        $list.find(".js_table_plan_name").html(planName);
                        $list.find(".js_table_plan_cg_way").html(returnPurchaseType(purchaseType));
                        $list.find(".js_table_plan_ch_time").html(chTime);
                        $list.find(".js_table_plan_fb_time").html(fbTime);
                        $list.find(".js_table_plan_db_time").html(dbTime);
                        $list.find(".js_table_plan_status").html(returnPlanStatus(planStatus));
                        $list.find(".js_table_plan_qy_time").html(qyTime);
                        $list.find(".js_table_plan_jc_time").html(jcTime);
                        $list.find(".js_table_update_time").html(updateTime);
                        $list.find(".js_table_update_by").html(userName);
                        $list.find(".js_table_plan_type_name").html(typeName+"|"+name);





                        var sjChtime =  row.sj_ch_time||"";
                        var sjFbTime = row.sj_fb_time||"";
                        var sjDbTime = row.sj_fb_time||"";
                        var sjQyTime = row.sj_qy_time||"";
                        var sjJcTime = row.sj_jc_time||"";
                        
                        $list.find(".js_table_jc_upload").attr("rel",id);
                        $list.find(".js_table_jc_upload").attr("rel_type","2");
                        $list.find(".js_table_qy_upload").attr("rel",id);
                        $list.find(".js_table_qy_upload").attr("rel_type","1");
                        
                        if(sjQyTime!=""){
                            $list.find(".js_table_qy_upload").html("已上传");
                            $list.find(".js_table_qy_upload").removeClass("js_upload_file");
                        }
                        

                        if(sjJcTime!=""){
                            $list.find(".js_table_jc_upload").html("已上传");
                            $list.find(".js_table_jc_upload").removeClass("js_upload_file");
                        }


                        var nowTime = new Date().Format("yyyy-MM-dd HH:mm:ss");//当前时间
                        var nowDate = new Date(nowTime);//当前时间
                        var chDate = new Date(chTime);
                        var fbDate = new Date(fbTime);
                        var dbDate = new Date(dbTime);
                        var qyDate = new Date(qyTime);
                        var jcDate = new Date(jcTime);
                        if(sjChtime==""){//实际策划时间为空
                            $list.find('.js_table_ch_icon').html("");
                            if(chDate.getTime()>nowDate.getTime()){//后
                                //未开始
                                $list.find('.js_table_ch_icon').addClass("js_table_wwc");
                            }else{//前
                                //延期
                                $list.find('.js_table_ch_icon').addClass("js_table_yq");
                            }

                        }else{//判断系统时间
                            $list.find('.js_table_ch_icon').html("စ");
                            var sjChDate = new Date(sjChTime);
                            if(sjChDate.getTime()>chDate.getTime()){//后
                                //延期完成
                                $list.find('.js_table_ch_icon').addClass("js_table_yqwc");
                            }else{//前
                                //正常
                                $list.find('.js_table_ch_icon').addClass("js_table_zcwc");
                            }
                                
                        }

                        if(sjFbTime==""){
                            $list.find('.js_table_fb_icon').html("");
                            if(fbDate.getTime()>nowDate.getTime()){//后
                                //未开始
                                $list.find('.js_table_fb_icon').addClass("js_table_wwc");
                            }else{//前
                                //延期
                                $list.find('.js_table_fb_icon').addClass("js_table_yq");
                            }
                        }else{
                            $list.find('.js_table_fb_icon').html("စ");
                            var sjFbDate = new Date(sjFbTime);
                            if(sjFbDate.getTime()>fbDate.getTime()){//后
                                //延期完成
                                $list.find('.js_table_fb_icon').addClass("js_table_yqwc");
                            }else{//前
                                //正常
                                $list.find('.js_table_fb_icon').addClass("js_table_zcwc");
                            }
                        }

                        if(sjDbTime==""){
                            $list.find('.js_table_db_icon').html("");
                            if(dbDate.getTime()>nowDate.getTime()){//后
                                //未开始
                                $list.find('.js_table_db_icon').addClass("js_table_wwc");
                            }else{//前
                                //延期
                                $list.find('.js_table_db_icon').addClass("js_table_yq");
                            }
                        }else{
                            $list.find('.js_table_db_icon').html("စ");
                            var sjDbDate = new Date(sjDbTime);
                            if(sjDbDate.getTime()>dbDate.getTime()){//后
                                //延期完成
                                $list.find('.js_table_db_icon').addClass("js_table_yqwc");
                            }else{//前
                                //正常
                                $list.find('.js_table_db_icon').addClass("js_table_zcwc");
                            }
                        }

                        if(sjQyTime==""){
                            $list.find('.js_table_qy_icon').html("");
                            if(qyDate.getTime()>nowDate.getTime()){//后
                                //未开始
                                $list.find('.js_table_qy_icon').addClass("js_table_wwc");
                            }else{//前
                                //延期
                                $list.find('.js_table_qy_icon').addClass("js_table_yq");
                            }
                        }else{
                            $list.find('.js_table_qy_icon').html("စ");
                            var sjQyDate = new Date(sjQyTime);
                            if(sjQyDate.getTime()>qyDate.getTime()){//后
                                //延期完成
                                $list.find('.js_table_qy_icon').addClass("js_table_yqwc");
                            }else{//前
                                //正常
                                $list.find('.js_table_qy_icon').addClass("js_table_zcwc");
                            }
                        }

                        if(sjJcTime==""){
                            $list.find('.js_table_jc_icon').html("");
                            if(jcDate.getTime()>nowDate.getTime()){//后
                                //未开始
                                $list.find('.js_table_jc_icon').addClass("js_table_wwc");
                            }else{//前
                                //延期
                                $list.find('.js_table_jc_icon').addClass("js_table_yq");
                            }

                        }else{

                            $list.find('.js_table_jc_icon').html("စ");
                            var sjJcDate = new Date(sjJcTime);
                            if(sjJcDate.getTime()>jcDate.getTime()){//后
                                //延期完成
                                $list.find('.js_table_jc_icon').addClass("js_table_yqwc");
                            }else{//前
                                //正常
                                $list.find('.js_table_jc_icon').addClass("js_table_zcwc");
                            }

                        }
                        
                        
                       return $list[0].outerHTML;
                    }}
                ]]
        });
   
        //查询
        $(".js_purchasePlan_manage_list_serach").click(function () {
            layer.load(0, {shade: [0.1, '#FFF']}); //0代表加载的风格，支持0-2
            table.reload('js_purchasePlan_manage_list_table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    plan_code:$('.js_purchasePlan_plan_code').val()||"",
                    tender_type:$('.js_purchasePlan_tender_type').val()||"",
                    purchase_type:$('.js_purchasePlan_purchase_type').val()||"",
                    plan_status:$('.js_purchasePlan_plan_status').val()||"",
                    isErr:$('.js_purchasePlan_isError').val()||"",
                    tender_category:$('#tender_category').val()||"",
                    tender_category2:$("#tender_category2").val()||""
                },
                done: function () {
                    layer.closeAll();
                    upload.render({
                        elem: '.js_upload_file',
                        url: gContextPath+"/uploadfile2.htm"
                        ,multiple: false
                        ,before:function(){
                        }
                        ,field: 'file'
                        , accept: 'images'
                        , data: {
                            "index": 1
                        },
                        accept: 'file',
                        //普通文件
                        done: function (res) {
                           console.log(res);
                           var _rel = $(this.item).attr('rel')||"";
                           var _rel_type = $(this.item).attr('rel_type')||"";
                           var _fileId = res[0].data.fid;
                           $.ajax({
                               url  : gContextPath+"/purchasePlan/uptPlanSjTime.htm",
                               type: "POST",
                               data:{id:_rel,relType:_rel_type,fileId:_fileId},
                               dataType: 'json',
                               success: function (response) {
                                   var returnCode = response.returnCode;
                                   if ("1" == returnCode) {
                                       layer.alert("上传成功",{offset: '100px'},function(){
                                            $(".js_purchasePlan_manage_list_serach").click();
                                       });
                                   } else {
                                       layer.alert("上传失败：" + response.msg,{offset: '100px'});
                                       return false;
                                   }
                               },
                               error: function (XMLHttpRequest, textStatus, errorThrown) {
                                   if (XMLHttpRequest.readyState == 0) {
                                       layer.alert("上传失败",{offset: '100px'});
                                       return false;
                                   }
                               }
                           });
                           
                        },
                        error: function () {
                            layer.alert("上传失败",{offset: '100px'});
                            return false;
                        }

                    });
                }
            });
        });

2.页面

<div class="layui-hide" id="js_div_order_hide">
    <table width="100%" class="order_info_list_table">
        <tr class="t_top_info">
            <td class="tc_td" width="6%" rowspan="4">
                <input type="checkbox" lay-skin="primary" name="selbox" value="" class="c-f-checkbox js_table_plan_id"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon">�</i></div>
            </td>
            <td style="text-align: left;" colspan="2">
                <span class="js_orderNum"><span class="js_table_plan_code" style="padding-right: 0px;"></span>|<span class="js_table_plan_name"></span></span>
            </td>
            <td style="text-align: left;">
                <span class="js_create_time">发布状态：<span class="js_table_whether_release js_table_span_color"></span></span>
            </td>
            <td style="text-align: left;">
                <span class="js_create_time">维护人：<span class="js_table_update_by"></span></span>
            </td>
            <td style="text-align: left;">
                <span class="js_create_time">维护时间 ：<span class="js_table_update_time"></span></span>
            </td>
        </tr>
         <tr class="t_top_info">
         
            <td colspan="2">
                <div class="orderlist_address_info" style="text-align: left;">
                    <div class="address-type js_table_plan_type_name" style=" 100%"></div>
                </div>
            </td>
            <td>
                <div class="orderlist_address_info" style="text-align: left;">
                    <div class="address-type" style=" 100%">计划类型：<span class="js_table_plan_type js_table_span_color"></span></div>
                </div>
            </td>
            <td>
               <div class="orderlist_address_info" style="text-align: left;">
                    <div class="address-type" style=" 100%">采购方式：<span class="js_table_plan_cg_way js_table_span_color"></span></div>
                </div>
            </td>
            <td >
                <div class="orderlist_address_info" style="text-align: left;">
                    <div class="address-type" style=" 100%">计划状态：<span class="js_table_plan_status js_table_span_color"></span></div>
                </div>
            </td>
        </tr>
        <tr class="t_top_info">
        <td>
               <div class="pric_dv" style="text-align: left;;">
                    <p class="price"><label for="">策划时间</label><i class="layui-icon js_table_ch_icon"></i></p>
                    <p class="price"><span class="js_table_plan_ch_time"></span></p>
                </div>
            </td>
            <td>
                 <div class="pric_dv" style="text-align: left;">
                    <p class="k_price"><label for="">发标时间</label><i class="layui-icon js_table_fb_icon"></i> </p>
                    <p class="k_price"><span class="js_table_plan_fb_time"></span></p>
                </div>
            </td>
            <td >
                 <div class="pric_dv" style="text-align: left;">
                    <p class="u_price"> <label for="">定标时间</label><i class="layui-icon js_table_db_icon" ></i></p>
                    <p class="u_price"><span class="js_table_plan_db_time"></span></p>
                </div>
            </td>
            <td >
                 <div class="pric_dv" style="text-align: left;">
                    <p class="u_price"><label for="">签约时间</label><button type="button" class="layui-btn js_upload_file js_table_qy_upload">上传</button><i class="layui-icon js_table_qy_icon" ></i></p>
                    <p class="u_price"><span class="js_table_plan_qy_time"></span></p>
                </div>
            </td>
            <td>
            <div class="pric_dv" style="text-align: left;">
                    <p class="u_price"><label for="">进场时间</label><button type="button" class="layui-btn js_upload_file js_table_jc_upload " >上传</button><i class="layui-icon js_table_jc_icon" ></i></p>
                    <p class="u_price"><span class="js_table_plan_jc_time"></span></p>
                </div>
            </td>
        </tr>
        <tr class="t_top_info">
            <td colspan="5">
                <div class="btn_dv">
                    <a href="javascript:;"  class="td_btn_a site-demo-active js_plan_status_follow w-link fr" style="height: 10px" title-name="进度跟踪">进度跟踪</a>
                </div>
            </td>
        </tr>
    </table>

</div>