交互:
1.点击“添加故障”:可添加多个故障,默认首次进入展示一条故障录入框,添加上限不限;点击“删除故障”,可删除最近一条故障,删除至仅有一个故障后,“删除故障”按钮消失;
2.点击“添加方案”:可添加多个方案,默认展示一个方案,添加上限不限;点击“删除”,可删除该方案,删除至仅有一个方案后,”删除“按钮消失。
图1 弹框初始样式
图2 点击几次”添加故障“按钮
图3 点击几次”添加绑定方案“按钮
图4 提交给后台的数据结构
相关html如下:add-fault.html
<div class="repair-fault-dialog">
<div class="fault-box-list">
<div class="fault-box js-item">
<div class="fault-item">
<p>
<label>故障ID:</label>
<input maxlength="32" name="faultId" type="text" placeholder="请填写故障ID">
</p>
<p>
<label>故障名称:</label>
<input maxlength="32" name="faultName" type="text" placeholder="请填写故障名称">
</p>
<button class="add-plan"><i class='iconfont icon-add'></i>添加绑定方案</button>
</div>
<div class="program-item js-program-item">
<p>
<label>方案ID:</label>
<input maxlength="32" name="planId" type="text" placeholder="请填写方案ID">
</p>
<p>
<label>方案名称:</label>
<input maxlength="32" name="planName" type="text" placeholder="请填写方案名称">
</p>
<p>
<label>价格:</label>
<input maxlength="32" name="planPrice" type="text" placeholder="请填写价格">
</p>
<button class="delete-plan hide-btn">删除</button>
</div>
</div>
</div>
<div class="fault-btn-box">
<p>
<button class="fault-btn delete hide" id="delete-fault">删除故障</button>
<button class="fault-btn" id="add-fault"><i class='iconfont icon-add'></i>添加故障</button>
</p>
</div>
</div>
相关js如下:
//事件绑定
$("body").on('click', '.repair-fault-dialog #add-fault', function() {//添加故障
var html = '<div class="fault-box js-item">'+
'<div class="fault-item">'+
'<p>'+
'<label>故障ID:</label>'+
'<input maxlength="32" name="faultId" type="text" placeholder="请填写故障ID">'+
'</p>'+
'<p>'+
'<label>故障名称:</label>'+
'<input maxlength="32" name="faultName" type="text" placeholder="请填写故障名称">'+
'</p>'+
'<button class="add-plan"><i class="iconfont icon-add"></i>添加绑定方案</button>'+
'</div>'+
'<div class="program-item js-program-item">'+
'<p>'+
'<label>方案ID:</label>'+
'<input maxlength="32" name="planId" type="text" placeholder="请填写方案ID">'+
'</p>'+
'<p>'+
'<label>方案名称:</label>'+
'<input maxlength="32" name="planName" type="text" placeholder="请填写方案名称">'+
'</p>'+
'<p>'+
'<label>价格:</label>'+
'<input maxlength="32" name="planPrice" type="text" placeholder="请填写价格">'+
'</p>'+
'<button class="delete-plan hide-btn">删除</button>'+
'</div>'+
'</div>';
$('.repair-fault-dialog .fault-box-list').append(html);
$('.repair-fault-dialog #delete-fault').removeClass('hide');//显示删除按钮
}).on('click', '.repair-fault-dialog #delete-fault', function() {//删除故障
$('.repair-fault-dialog .js-item').last().remove();
if($('.repair-fault-dialog .js-item').length <= 1){
$('.repair-fault-dialog #delete-fault').addClass('hide');//隐藏删除按钮
}
}).on('click', '.repair-fault-dialog .add-plan', function() {//添加绑定方案
var html = '<div class="program-item js-program-item">'+
'<p>'+
'<label>方案ID:</label>'+
'<input maxlength="32" name="planId" type="text" placeholder="请填写方案ID">'+
'</p>'+
'<p>'+
'<label>方案名称:</label>'+
'<input maxlength="32" name="planName" type="text" placeholder="请填写方案名称">'+
'</p>'+
'<p>'+
'<label>价格:</label>'+
'<input maxlength="32" name="planPrice" type="text" placeholder="请填写价格">'+
'</p>'+
'<button class="delete-plan">删除</button>'+
'</div>';
$(this).parents('.js-item').append(html);
$(this).parents('.js-item').find('.js-program-item').first().find('.delete-plan').removeClass('hide-btn');
}).on('click', '.repair-fault-dialog .delete-plan', function() {//删除绑定方案
if($(this).parents('.js-item').find('.js-program-item').length <= 2){
$(this).parents('.js-item').find('.delete-plan').addClass('hide-btn');//隐藏删除按钮
}
$(this).parent('.js-program-item').remove();
});
//获取用户输入表单值,并校验,包括故障id和方案id去重(故障id+方案id都不能重复)
function getParams() {
var faultList = [], cache = {},formPass = true, isRepeat = false,
pricePass = true,idPass = true;
$(".js-item").map(function(item){ //遍历故障
var planList = [],
$faultId = $(this).find("input[name='faultId']"),
$faultName = $(this).find("input[name='faultName']"),
numRgx = /^\d+$/,
idRgx = /^[0-9a-zA-Z]+$/;
if(!$faultId.val()){
formPass=false;
return
}else if(!idRgx.test($faultId.val())){
idPass=false;
return
}
if(!$faultName.val()){
formPass=false;
return
}
$(this).find(".js-program-item").map(function (innerItem) { //遍历方案
var $planId = $(this).find("input[name='planId']"),
$planName = $(this).find("input[name='planName']"),
$planPrice = $(this).find("input[name='planPrice']"),
priceRgx = /^(\d{1,7})(\.\d{1,2})?$/;
if(!$planId.val()){
formPass=false;
return
}else if(!idRgx.test($planId.val())){
idPass=false;
return
}
if(!$planName.val()){
formPass=false;
return
}
if(!$planPrice.val()){
formPass=false;
return
}else if(!priceRgx.test($planPrice.val())){
pricePass = false;
return
}
if(cache[$planId.val()]){ //planId去重
isRepeat = true;
return
}else {
cache[$planId.val()] = true;
}
planList.push({
planId: $planId.val(),
planName: $planName.val(),
planPrice: $planPrice.val(),
});
});
if(cache[$faultId.val()]){ //faultId去重
isRepeat = true;
return
}else {
cache[$faultId.val()] = true;
}
faultList.push({
faultId: $faultId.val(),
faultName: $faultName.val(),
planList: planList
});
});
if(isRepeat) {
Util.alertMessage('故障ID、方案ID不可重复!');
return false;
}
if(!formPass) {
Util.alertMessage('表单不能为空,请填写完整!');
return false;
}
if(!idPass) {
Util.alertMessage('故障ID、方案ID仅支持录入数字、字母!');
return false;
}
if(!pricePass) {
Util.alertMessage('价格最多7位整数、2位小数!');
return false;
}
return faultList;
}
//提交表单
function addFault(categoryId){
...
//点击弹框”保存“按钮时
var faultList = getParams();
if(!faultList){
return
}
$.ajax({
url: API.insertFaultAndPlan,
type: 'POST',
data: JSON.stringify({faultList:faultList}),
contentType: 'application/json',
success(data) {
...
}
});
}
相关scss如下:
//故障弹框
.repair-fault-dialog {
button {
background-color: #fff;
border: 1px solid #999;
border-radius: 3px;
color: #333;
cursor: pointer;
&:hover {
border: 1px solid #57aeff;
color: #57aeff;
}
}
.fault-box-list {
max-height: 463px;
overflow-y: auto;
.fault-box {
border-bottom: 1px solid #eee;
font-size: 14px;
color: #666;
&:first-child {
margin-top: 0;
}
.fault-item {
height: 32px;
line-height: 32px;
margin-top: 20px;
margin-bottom: 20px;
p {
display: inline-block;
margin-right: 25px;
float: left;
label {
float: left;
}
input[type="text"] {
width: 120px;
}
}
button {
width: 120px;
height: 32px;
i {
margin-right: 5px;
}
}
}
.program-item {
height: 32px;
line-height: 32px;
margin-bottom: 20px;
p {
display: inline-block;
margin-right: 25px;
float: left;
label {
float: left;
}
input[type="text"] {
width: 120px;
}
}
button {
width: 70px;
height: 32px;
&.hide-btn {
display: none;
}
i {
margin-right: 5px;
}
}
}
}
}
.fault-btn-box{
height: 32px;
margin-bottom: 10px;
p{
float: right;
.fault-btn{
width: 90px;
height: 32px;
margin-top: 20px;
&.delete{
margin-right: 15px;
}
&.hide{
display: none;
}
}
}
}
.no-data{
text-align: center;
}
}