一、动态添加表格

一、动态添加表格

@{
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
    <title>大数据在线评估</title>


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/doseen/static/themes/global/css/bootstrap.css">
    <!-- Site CSS -->
    <link rel="stylesheet" href="/doseen/static/themes/base/css/site.css" id="admui-siteStyle">

    <!-- 图标 CSS-->
    <link rel="stylesheet" href="/doseen/static/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="/doseen/static/fonts/web-icons/web-icons.css">
    <!-- Vendor JS -->
    <script src="/doseen/static/vendor/jquery/jquery.min.js"></script>
    <script src="/doseen/static/vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/doseen/static/vendor/lodash/lodash.min.js"></script>
    <script src="/doseen/static/vendor/vue/vue.min.js"></script>


</head>

<body class="site-contabs-open site-menubar-unfold ">

    <div class="page animation-fade page-forms">
        <div class="page-content" id="app">
            <form>

                <div class="panel">
                    <header class="panel-heading">
                        <h3 class="panel-title">
                            主借人
                        </h3>
                    </header>
                    <div class="panel-body container-fluid">

                        <div class="form-group">
                            <label class=" col-form-label">姓名:</label>
                            <input type="text" class="form-control" v-model="formData.right.name" placeholder="姓名"
                                   autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label class="col-form-label">手机号:</label>
                            <input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="form-control" v-model="formData.right.tel" placeholder="手机号"
                                   autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label class=" col-form-label">身份证号:</label>
                            <input type="text" class="form-control" v-model="formData.right.codeId" placeholder="身份证号"
                                   autocomplete="off">
                        </div>

                    </div>

                </div>
                <!-- panel end -->


                <div class=" panel" v-for="(item,index) in formData.left">
                    <header class="panel-heading">
                        <h3 class="panel-title">
                            <span style="padding-right: 10px">共借人{{index+1}}</span>
                            <button type="button" class="btn btn-danger btn-outline btn-sm" :data-index="index"
                                    v-on:click="delLeft">
                                删除共借人{{index+1}}
                            </button>
                        </h3>
                    </header>
                    <div class="panel-body container-fluid">

                        <div class="form-group">
                            <label class=" col-form-label">姓名:</label>
                            <input type="text" class="form-control" :value="item.name" name="name"
                                   v-on:input="handleInput($event,index)" placeholder="姓名" autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label class="col-form-label">手机号:</label>
                            <input type="text" class="form-control" :value="item.tel" name="tel"
                                   v-on:input="handleInput($event,index)" placeholder="手机号" autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label class=" col-form-label">身份证号:</label>
                            <input type="text" class="form-control" :value="item.codeId" name="codeId"
                                   v-on:input="handleInput($event,index)" placeholder="身份证号" autocomplete="off">
                        </div>

                    </div>

                </div>
                <!-- panel end -->





                <div class="panel">
                    <div class="panel-body container-fluid">
                        <div class="form-group ">
                            <button type="button" class="btn btn-primary btn-lg" v-on:click="saveForm">提交 </button>
                            <button type="button" class="btn btn-warning" v-on:click="addLeft"
                                    v-show="leftLength<4 ">
                                添加一个共借人
                            </button>
                        </div>
                    </div>
                </div>

            </form>

        </div>
    </div>


    <!-- common js -->
    <script src="/doseen/static/themes/base/js/app.js"></script>
    <script src="/doseen/static/vendor/matchheight/jquery.matchHeight.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/layer/2.3/skin/layer.css">


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                defaultData: {
                    name: '',
                    tel: '',
                    codeId: '',
                },
                leftLength: 0,
                formData: {
                    right: {
                        name: '',
                        tel: '',
                        codeId: '',
                    },
                    left: []
                }
            },
            methods: {
                arraySetName: function (name, value, i) {
                    var arrayData = JSON.parse(JSON.stringify(this.formData.left));
                    if (name == 'name') {
                        arrayData[i]['name'] = value;
                    }
                    if (name == 'tel') {
                        arrayData[i]['tel'] = value;
                    }
                    if (name == 'codeId') {
                        arrayData[i]['codeId'] = value;
                    }
                    this.formData.left = arrayData;
                },
                handleInput: function (e, i) {
                    var name = e.target.name;
                    var value = e.target.value;
                    this.arraySetName(name, value, i);
                },
                addLeft: function () {
                    if (this.leftLength < 4) {
                        this.formData.left.push(this.defaultData);
                        this.leftLength += 1;
                    }
                },
                delLeft: function (e) {
                    var index = e.currentTarget.dataset.index;
                    this.formData.left.splice(index, 1);
                    this.leftLength -= 1;
                },
                saveForm: function () {
                    //ajax提交this.formData
                    var u = "/CreditEval/GetRiskEval";
                    if (!this.formData.right["name"]) {
                        layer.msg('主借人姓名不能为空', { time: 2000, icon: 5 });
                        return ;
                    }

                    if (!this.formData.right["tel"]) {
                        layer.msg('主借人手机号不能为空', { time: 2000, icon: 5 });
                        return ;
                    }
                   if (!verif.IsTel(this.formData.right["tel"])) {
                      layer.msg('主借人手机号格式有误!:' + this.formData.right["tel"], { time: 2000, icon: 0 });
                      return ;
                   }
                    if (!this.formData.right["codeId"]) {
                        layer.msg('主借人身份证号不能为空', { time: 2000, icon: 5 });
                        return ;
                    }
                   if (!verif.IsCard(this.formData.right["codeId"])) {
                      layer.msg('主借人身份证号格式有误!:' + this.formData.right["codeId"], { time: 2000, icon: 0 });
                      return ;
                   }

                    var self = this;
                    if (this.formData.left.length != 0) {
                        var data = this.formData.left;
                        $.each(data, function (index, val) {
                            if (!val["name"]) {
                                layer.msg('共借人姓名不能为空', { time: 2000, icon: 5 });
                                return ;
                            }
                            if (!verif.IsTel(val["tel"])) {
                                layer.msg('手机号格式有误!:' + val["tel"], { time: 2000, icon: 0 });
                                return ;
                            }
                            if (!verif.IsCard(val["codeId"])) {
                                layer.msg('身份证号格式有误!:' + val["codeId"], { time: 2000, icon: 0 });
                                return ;
                            }
                            if (self.formData.right["tel"] == val["tel"]) {
                                layer.msg('不能与主借人手机号码相同!:' + val["tel"], { time: 2000, icon: 0 });
                                return ;
                            }
                            if (self.formData.right["codeId"] == val["codeId"]) {
                                layer.msg('不能与主借人身份证号相同!:' + val["codeId"], { time: 2000, icon: 0 });
                                return ;
                            }
                            //去重复
                            for (var i = index + 1; i < data; i++) {
                                if (val["tel"] == data[i]["tel"]) {
                                    layer.msg('共借人手号码重复!:' + data[i]["tel"], { time: 2000, icon: 0 });
                                    return ;
                                }
                                if (val["codeId"] == data[i]["codeId"]) {
                                    layer.msg('共借人身份证号码重复!:' + data[i]["codeId"], { time: 2000, icon: 0 });
                                    return ;
                                }
                            }
                        });
                    }
                    $.ajax({
                        url: u,
                        method: 'post',
                        dataType: 'json',
                        data:
                        {
                            "data": JSON.stringify(this.formData)
                            ,'cityCode':0
                        },
                        success: function (data) {

                            if (data["Code"] == "200") {
                                //console.log("data:" + JSON.stringify(data));
                                //页面层-自定义
                                var res = JSON.parse(data["Result"]); //测试写法
                                //var res =JSON.parse(data["result"]); //写法
                                //console.log("res:" + res);
                                //var str = '分数:' + data["result"]["final_score"] + '<br />反欺诈得分:' + data["result"]["totalprice"];
                                var url = '/CreditEval/GetBigDataDetail?SequenceId=' + res["Seq_id"];
                                //console.log("url:" + url);
                                $.site.contentTabs.reloadTab('/CreditEval/Index');
                                $.site.contentTabs.buildTab({
                                    name: '评估记录',
                                    url: url
                                });
                            } else {

                                //console.log(JSON.stringify(data));
                                var str = '错误码:' + data["Code"] + '<br />错误提示:' + data["Message"];
                                layer.alert(str, {
                                    //skin: 'layui-layer-lan' //样式类名
                                    title: "评估结果"
                                    , closeBtn: 0
                                    , anim: 4 //动画类型
                                    , icon: 2
                                });
                            }

                            //alert(JSON.stringify(data));
                            //console.log(JSON.stringify(data));

                        }, error: function (err) {
                            layer.alert(err, {
                                //skin: 'layui-layer-lan' //样式类名
                                title: "请求异常"
                              , closeBtn: 0
                              , anim: 4 //动画类型
                              , icon: 2
                           });
                            //console.log(JSON.stringify(err));
                        }
                    });

                },
            }
        });

        var verif = {
            IsTel: function (str) {
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(str)) {
                    return false;
                } else {
                    return true;
                }
            },
            IsCard: function (card) {
                var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                return pattern.test(card);
            }
        };

    </script>

</body>

</html>

 

上一篇:AD域控中导出域用户电话号码


下一篇:javascript – Cordova iOS模拟器tel和mailto无法正常工作