一、动态添加表格
@{
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>