实现功能：
- 自然人和法人切换显示各自的内容
- 分别判断自然人和法人点击添加按钮判断是否有值，没有值时提示错误，有值则提交添加成功
- 点击编辑编辑当前内容，隐藏添加按钮，显示完成和取消按钮
- 点击删除当前
- 点击完成按钮更新当前内容
- 点击取消当前
/*错误提示*/
.defendant-error {
display: block;
}
.errors {
color: red;
position: absolute;
font-size: 10px;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0;
display: none;
}
<div class="tab-pane" id="tab2">
<div class="form-group">
<label class="col-md-2 control-label">被告</label>
<div class="col-md-3">
<input name="bgName" class=" form-control " placeholder="请输入被告" v-model="defendantInfo.Name"/>
<span class="defendant-error"><span class="errors" id="erName">被告不能为空，请填写</span></span>
</div>
<label class="col-md-2 control-label">诉讼身份</label>
<div class="col-md-3 ">
<select asp-items="@DropdownHelper.GetEnumByParentName("诉讼身份","")" id="bgCaseIdentityId" targetName="CaseIdentityId" class="form-control input-sm mySelect1 " v-model="defendantInfo.CaseIdentityId"></select>
<span class="defendant-error"><span class="errors" id="erCaseIdentityId">诉讼身份不能为空，请填写</span></span>
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-2 control-label">自然人/法人</label>
<div class="col-md-3">
<div class="radio"><label><input type="radio" name="bgIsLegalPerson" checked :value="true" v-model="defendantInfo.IsLegalPerson"> 自然人</label></div>
<div class="radio"><label><input type="radio" name="bgIsLegalPerson" :value="false" v-model="defendantInfo.IsLegalPerson"> 法人</label></div>
</div>
<label class="col-md-2 control-label" v-show="defendantInfo.IsLegalPerson">性别</label>
<div class="col-md-3" v-show="defendantInfo.IsLegalPerson">
<div class="radio"><label><input type="radio" name="bgGender" :value="1" checked v-model="defendantInfo.Gender"> 男</label></div>
<div class="radio"><label><input type="radio" name="bgGender" :value="0" v-model="defendantInfo.Gender"> 女</label></div>
</div>
</div>
<div class="form-group" v-show="defendantInfo.IsLegalPerson">
<label class="col-md-2 control-label">民族</label>
<div class="col-md-3">
<select id="bgNationId" targetName="NationId" class="form-control input-sm mySelect1 "
asp-items="@DropdownHelper.GetEnumByParentName("民族","请选择")" v-model="defendantInfo.NationId" ></select>
<span class="defendant-error"><span class="errors" id="erNationId">民族不能为空，请填写</span></span>
</div>
<label class="col-md-2 control-label">出生年月日</label>
<div class="col-md-3 ">
<input name="bgDob" type="text" targetName="Dob" class=" form-control born" asp-format="{0:yyyy-MM-dd}" placeholder="请选择" autocomplete="off" v-model="defendantInfo.Dob" />
<span class="defendant-error"><span class="errors" id="erDob">出生年月日不能为空，请填写</span></span>
</div>
</div>
<div class="form-group" v-show="defendantInfo.IsLegalPerson">
<label class="col-md-2 control-label">身份证号</label>
<div class="col-md-3">
<input name="bgIdCard" class="form-control " placeholder="请输入身份证号" v-model="defendantInfo.IdCard"/>
<span class="defendant-error"><span class="errors" id="erIdCard">身份证号不能为空，请填写</span></span>
</div>
<label class="col-md-2 control-label">居民身份证地址</label>
<div class="col-md-3 ">
<input name="bgIdCardAddress" class="form-control " placeholder="请输入居民身份证地址" v-model="defendantInfo.IdCardAddress"/>
<span class="defendant-error"><span class="errors" id="erIdCardAddress">地址不能为空，请填写</span></span>
</div>
</div>
<div class="form-group" v-show="!defendantInfo.IsLegalPerson">
<label class="col-md-2 control-label">统一社会信用代码（营业执照）</label>
<div class="col-md-3">
<input name="bgUscc" class="form-control " placeholder="请输入统一社会信用代码" v-model="defendantInfo.Uscc"/>
<span class="defendant-error"><span class="errors" id="erUscc">信用代码不能为空，请填写</span></span>
</div>
<label class="col-md-2 control-label">住所地</label>
<div class="col-md-3 ">
<input name="bgLegalPersonAddress" class="form-control " placeholder="请输入住所地" v-model="defendantInfo.LegalPersonAddress" />
<span class="defendant-error"><span class="errors" id="erLegalPersonAddress">住所地不能为空，请填写</span></span>
</div>
</div>
<div class="form-group" v-show="!defendantInfo.IsLegalPerson">
<label class="col-md-2 control-label">法定代表人</label>
<div class="col-md-3">
<input name="bgLegalPerson" class="form-control " placeholder="请输入法定代表人" v-model="defendantInfo.LegalPerson"/>
<span class="defendant-error"><span class="errors" id="erLegalPerson">法定代表人不能为空，请填写</span></span>
</div>
<label class="col-md-2 control-label">最新工商信息情况</label>
<div class="col-md-3 ">
<input name="bgBusinessInformation" class="form-control " placeholder="请输入最新工商信息情况" v-model="defendantInfo.BusinessInformation"/>
<span class="defendant-error"><span class="errors" id="erBusinessInformation">工商信息不能为空，请填写</span></span>
</div>
</div>
<div class="form-group add-btn text-center">
<button type="button" class="btn btn-sm defendantAdd" v-if="defendantIndex === -1" @@click="defendantAdd">添加</button>
<button type="button" class="btn btn-sm" v-if="defendantIndex > -1" @@click="defendantComplete">完成</button>
<button type="button" class="btn btn-sm" v-if="defendantIndex > -1" @@click="defendantCancel">取消</button>
</div>
<div class="form-group">
<table class="table table-hover table-bordered table-striped text-center">
<thead>
<tr>
<th style="width:50px">序号</th>
<th>被告</th>
<th>诉讼身份</th>
<th>自然人/法人</th>
<th>性别</th>
<th>民族</th>
<th>出生年月日</th>
<th>身份证号</th>
<th>统一社会信用代码</th>
<th>法定代表人</th>
<th>最新工商信息情况</th>
<th>居民身份证地址/住所地</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in defendantList' :key="index">
<td>{
{index+1}}</td>
<td>{
{item.Name}}</td>
<td>{
{item.CaseIdentity}}</td>
<td>{
{item.IsLegalPerson?"自然人":"法人"}}</td>
<td>{
{item.IsLegalPerson?(item.Gender === 1?"男":"女"):"" }}</td>
<td>{
{item.IsLegalPerson?(item.Nation):""}}</td>
<td>{
{item.IsLegalPerson?(item.Dob):""}}</td>
<td>{
{item.IsLegalPerson?(item.IdCard):""}}</td>
<td>{
{item.Uscc}}</td>
<td>{
{item.LegalPerson}}</td>
<td>{
{item.BusinessInformation}}</td>
<td>{
{(item.LegalPersonAddress === null?"": item.LegalPersonAddress) + (item.IdCardAddress === null?"": item.IdCardAddress) }}</td>
<td>
<button class="btn btn-primary defendantEditor btn-sm" @@click="defendantEditor(item,$event,index)">编辑</button>
<button class="btn btn-danger defendantDel btn-sm" @@click="defendantDel(item,index)">删除</button>
</td>
</tr>
</tbody>
</table>
<div style="display:none" v-for='(item,index) in defendantList' :key="index">
<input v-bind:name="'Defendants['+index+'].Name'" v-bind:value="item.Name" />
<input v-bind:name="'Defendants['+index+'].CaseIdentityId'" v-bind:value="item.CaseIdentityId" />
<input v-bind:name="'Defendants['+index+'].IsLegalPerson'" v-bind:value="item.IsLegalPerson" />
<input v-bind:name="'Defendants['+index+'].Gender'" v-bind:value="item.Gender" />
<input v-bind:name="'Defendants['+index+'].NationId'" v-bind:value="item.NationId" />
<input v-bind:name="'Defendants['+index+'].Dob'" v-bind:value="item.Dob" />
<input v-bind:name="'Defendants['+index+'].IdCard'" v-bind:value="item.IdCard" />
<input v-bind:name="'Defendants['+index+'].Uscc'" v-bind:value="item.Uscc" />
<input v-bind:name="'Defendants['+index+'].LegalPerson'" v-bind:value="item.LegalPerson" />
<input v-bind:name="'Defendants['+index+'].BusinessInformation'" v-bind:value="item.BusinessInformation" />
<input v-bind:name="'Defendants['+index+'].LegalPersonAddress'" v-bind:value="item.LegalPersonAddress" />
<input v-bind:name="'Defendants['+index+'].IdCardAddress'" v-bind:value="item.IdCardAddress" />
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".choosetime").datetimepicker({
width: "100%",
autoclose: true,
format: 'yyyy-mm-dd',
language: 'zh-CN',
minView: 2 //日期选择
});
$(".born").datetimepicker({
width: "100%",
autoclose: true,
format: 'yyyy-mm-dd',
language: 'zh-CN',
minView: 2 //日期选择
}).on("change", function (e) {
Vue.set(app.defendantInfo, $(e.currentTarget).attr("targetName"), e.currentTarget.value);
});
$(".mySelect").select2({
placeholder: '请选择', //默认文字提示
language: "zh-CN",
width: "100%",
allowClear: true
});
$(".mySelect1").select2({
placeholder: '请选择', //默认文字提示
language: "zh-CN",
width: "100%",
allowClear: true
}).on("change",function(e){
Vue.set(app.defendantInfo, $(e.currentTarget).attr("targetName"), e.currentTarget.value);
});
var app = new Vue({
el: '#app',
data: function() {
return {
defendantIndex: -1,
defendantInfo: {
Name: "", //名字
//CaseIdentity: "", //身份
CaseIdentityId: null, //身份
IsLegalPerson: true, //自然人法人
Gender: 1, //性别
NationId: null, //民族
//Nation: "", //民族
Dob: "", //出生
IdCard: "", //身份证
IdCardAddress: "", //身份地址
Uscc: "", //统一代码
LegalPersonAddress: "", //住所地
LegalPerson: "", //法定代表人
BusinessInformation: "" //工商信息
},
defendantList: [],
naturalPerson: [
"Name", //名字
"CaseIdentityId", //身份
"NationId", //民族
"Dob", //出生
"IdCard", //身份证
"IdCardAddress" //身份地址
],
LegalPerson: [
"Name", //名字
"CaseIdentityId", //身份
"Uscc", //统一代码
"LegalPersonAddress", //住所地
"LegalPerson", //法定代表人
"BusinessInformation" //工商信息
]
}
},
methods: {
validPerson: function() {
let valid = true;
if (this.defendantInfo.IsLegalPerson) {
for (var key in this.naturalPerson) {
if (this.defendantInfo[this.naturalPerson[key]] === null || this.defendantInfo[this.naturalPerson[key]] === "") {
$("#er" + this.naturalPerson[key]).show();
valid = false;
} else {
$("#er" + this.naturalPerson[key]).hide();
}
}
this.defendantInfo.Uscc = "";
this.defendantInfo.LegalPersonAddress = "";
this.defendantInfo.LegalPerson = "";
this.defendantInfo.BusinessInformation = "";
} else {
for (var key in this.LegalPerson) {
if (this.defendantInfo[this.LegalPerson[key]] === null || this.defendantInfo[this.LegalPerson[key]] === "") {
$("#er" + this.LegalPerson[key]).show();
valid = false;
} else {
$("#er" + this.LegalPerson[key]).hide();
}
}
this.defendantInfo.NationId = null;
this.defendantInfo.Dob = "";
this.defendantInfo.IdCard = "";
this.defendantInfo.IdCardAddress = "";
}
return valid;
},
defendantAdd: function(e) {
e.preventDefault();
if (this.validPerson() === false) return;
var securityList = {
Name: this.defendantInfo.Name,
CaseIdentityId: this.defendantInfo.CaseIdentityId,
CaseIdentity: $("#bgCaseIdentityId").find("option:selected").text(),
IsLegalPerson: this.defendantInfo.IsLegalPerson,
Gender: this.defendantInfo.Gender,
NationId: this.defendantInfo.NationId,
Nation: $("#bgNationId").find("option:selected").text(),
Dob: this.defendantInfo.Dob,
IdCard: this.defendantInfo.IdCard,
IdCardAddress: this.defendantInfo.IdCardAddress,
Uscc: this.defendantInfo.Uscc,
LegalPersonAddress: this.defendantInfo.LegalPersonAddress,
LegalPerson: this.defendantInfo.LegalPerson,
BusinessInformation: this.defendantInfo.BusinessInformation
}
this.defendantList.push(securityList);
this.defendantCancel(e);
},
defendantEditor(item, $event, index) {
this.defendantInfo = Object.assign(this.defendantInfo, item);
//this.defendantInfo = item;
this.defendantIndex = index;
this.$nextTick(() => {
$(".mySelect1").change();
});
},
defendantDel(item,index) {
this.defendantList.removeItem(item);
if (this.defendantIndex === index) {
this.defendantCancel(event);
}
},
defendantComplete(e) {
e.preventDefault();
if (this.validPerson() === false) return;
let editItem = this.defendantList[this.defendantIndex];
editItem.Name = this.defendantInfo.Name;
editItem.CaseIdentityId = this.defendantInfo.CaseIdentityId;
editItem.CaseIdentity = $("#bgCaseIdentityId").find("option:selected").text();
editItem.IsLegalPerson = this.defendantInfo.IsLegalPerson;
editItem.Gender = this.defendantInfo.Gender;
editItem.NationId = this.defendantInfo.NationId;
editItem.Nation = $("#bgNationId").find("option:selected").text();
editItem.Dob = this.defendantInfo.Dob;
editItem.IdCard = this.defendantInfo.IdCard;
editItem.IdCardAddress = this.defendantInfo.IdCardAddress;
editItem.Uscc = this.defendantInfo.Uscc;
editItem.LegalPersonAddress = this.defendantInfo.LegalPersonAddress;
editItem.LegalPerson = this.defendantInfo.LegalPerson;
editItem.BusinessInformation = this.defendantInfo.BusinessInformation;
this.defendantCancel(e);
},
defendantCancel(e) {
e.preventDefault();
var temp1 = {
Name: "",
CaseIdentityId: null,
IsLegalPerson: true,
Gender: 1,
NationId: null,
Dob: "",
IdCard: "",
IdCardAddress: "",
Uscc: "",
LegalPersonAddress: "",
LegalPerson: "",
BusinessInformation: ""
}
this.defendantInfo = temp1;
this.defendantIndex = -1;
this.$nextTick(() => {
$(".errors").hide();
$(".mySelect1").change();
});
}
}
});
</script>