根据条件自定义生成表单

根据各种类型,长度生成表单信息,循环以下方法:

 inputSct(name, Type, Length, decimal, columnnames,idvalues) {//根据条件(输入框前面的名字,类型,长度,小数位数,每个输入框传的name)生成不同输入框

                    let that = this;
                    if (Type == "分隔符") {//这里指的是分组,利用类型分隔符进行数据分组,分组的大小宽度需要自己设置
                        if (count != 0) {
                            that.str += "</div>";
                        }
                        if (count == 0) {
                            classname = "'name_dwa'";
                        } else if (count == 1) {
                            classname = "'name_dwb'";
                            widths = "style='width:1400px;'";
                        } else if (count == 2) {
                            classname = "'name_dwc'";
                            widths = "style='width:1426px;'";
                        } else if (count == 3) {
                            classname = "'name_dwd'";
                            widths = "style='width:1426px;'";
                        } else if (count == 4) {
                            classname = "'name_dwe'";
                            widths = "style='width:1477px;'";
                        } else if (count == 5) {
                            classname = "'name_dwf'";
                            widths = "style='width:1477px;'";
                        } else if (count == 6) {
                            classname = "'name_dwg'";
                            widths = "style='width:1477px;'";
                        } else if (count == 7) {
                            classname = "'name_dwk'";
                            widths = "style='width:1477px;'";
                        } else if (count == 8) {
                            classname = "'name_dwg'";
                            widths = "style='width:1477px;'";
                        } else if (count == 9) {
                            classname = "'name_dwl'";
                            widths = "style='width:1477px;'";
                        }
                        else if (count == 10) {
                            classname = "'name_dwm'";
                            widths = "style='width:1300px;'";
                        }
                        else if (count == 11) {
                            classname = "'name_dwn'";
                            widths = "style='width:1344px;'";
                        } else if (count == 12) {
                            classname = "'name_dwg'";
                            widths = "style='width:1477px;'";
                        }
                        else if (count == 13) {
                            classname = "'name_dwo'";
                            widths = "style='width:1316px;'";
                        }
                        else if (count == 14) {
                            classname = "'name_dwp'";
                            widths = "style='width:1372px;'";
                        }
                        else if (count == 15) {
                            classname = "'name_dwq'";
                            widths = "style='width:1264px;'";
                        }
                        else if (count == 16) {
                            classname = "'name_dwi'";
                            widths = "style='width:1160px;'";
                        } else if (count == 17) {
                            classname = "'name_dwg'";
                            widths = "style='width:1280px;'";
                        }
                        else {
                            classname = "'name_dw'";
                        }
                        count++;
                    }

                    if (Type == "短整型" || Type == "长整型" || Type == "单精度" || Type == "双精度") {
                        if (decimal && (Type == "单精度" || Type == "双精度")) {//判断有无小数
                            let length_ = Number(Length)+1;
                            that.str += "<span class=" + classname + " title=" + name + ">" + name + "</span>" + "<input type='text' name=" + columnnames + " class='type_dw'" + "maxlength='" + length_+ "'" + "onkeyup=" + '"!/^(\\d+\.?)?\\d{0,' + decimal + "}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''" + '"'+"onafterpaste=" + '"!/^(\\d+\.?)?\\d{0,' + decimal + "}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''" + '"'+"onblur=fun("+ Length+","+decimal+","+'this)>'
                        } else if (!decimal && (Type == "单精度" || Type == "双精度")) {
                            that.str += "<span class=" + classname + " title=" + name + ">" + name + "</span>" + "<input type='text' name=" + columnnames + " class='type_dw'" + "maxlength='" + Length + "'" + "onkeyup=" + '"value=value.replace(/[^\\d]/g,' + "''" + ')"'+"onchange="+"this.value = this.value.replace(/[\u4e00-\u9fa5d]/g, '');"+"onafterpaste=" + '"value=value.replace(/[^\\d]/g,' + "''" + ')"/>'
                        } else {
                            that.str += "<span class=" + classname + " title=" + name + ">" + name + "</span>" + "<input type='text' name=" + columnnames + " class='type_dw'" + "maxlength='" + Length + "'" + "onkeyup=" + '"value=value.replace(/[^\\d]/g,' + "''" + ')"'+"onchange="+"this.value = this.value.replace(/[\u4e00-\u9fa5d]/g, '');"+"onafterpaste=" + '"value=value.replace(/[^\\d]/g,' + "''" + ')"/>'
                        }
                    } else if (Type == "文本" || Type == "长文本") {
                        that.str += "<span class=" + classname + " title=" + name + " >" + name + "</span>" + "<input @click='selectvalue()' type='text' name=" + columnnames + " class='type_dw' " + "   maxlength='" + Length + "'></input>"
                    } else if (Type == "日期型" || Type == "时间型" || Type == "日期时间型") {
                        that.str += "<span class=" + classname + " title=" + name + " >" + name + "</span>" + "<input type='date' class='type_dw' name=" + columnnames + "/>"
                    } else if (Type == "列表(单选)" || Type == "列表(多选)") {
                        var datas = sessionStorage.getItem('yitb');//此处是对select框的下拉项里添加数据,通过查询每条数据后面跟的参数
                        var datas = JSON.parse(datas);
                        var html = "";
                        for (var i = 0; i < datas.length; i++) {
                            var ds = datas[i].name;
                            if(datas[i].name !="划"){
                                if (datas[i].id == idvalues) {
                                    var codename = JSON.parse(datas[i].data);
                                    for (var n = 0; n < codename.length; n++) {
                                        if (codename[n].name.indexOf("rts") != -1 || codename[n].name == '') {
                                            continue;
                                        }
                                        html = html + "<option value='" + codename[n].code + "'>" + codename[n].name + "</option>";
                                    }
    
                                }
                            }
                        };
                        if (name == '省') {
                            html = html + "<option value='610000'> 陕西省</option>";
                        }
                        if (name == '作') {
                            html = jodType;
                        }
                        selectve = html;
                        that.str += "<span class=" + classname + " title=" + name + " id="+idvalues+" >" + name + "</span>" + "<select  onchange='selectvalue(this)' class='type_dw' name=" + columnnames + ">" + selectve + " </select>"
                    } else if (Type == "分隔符") {
                        that.str += "<div " + widths + "><span class='name_dw' style='display:block;width: 1435px;font-size: 16px;height: 46px;font-weight: 700;border-bottom: 1px solid gainsboro;color:green;'>" + name + "</span>"
                    }
                },

最后生成类似于:

 这种的表单信息,可判断长度、类型、小数位数、可进行分组。

posted @ 2021-05-18 15:39  奔跑的哈密瓜  阅读(123)  评论(0编辑  收藏  举报