mui弹窗动态添加数据

需求

点击添加按钮，弹出弹窗，将信息填入点击确认后，在列表详情中会出现一个只有名字的块，点击出现详情。

点击弹出啊弹窗，填入信息。

点击确认后添加至详情出现色块

点击详情中的色块可以查看、编辑、删除。

代码

弹窗是自己写的没有用框架的。

<div id="popover-dialog" style="height: 250px;">
			<form class="mui-input-group lmr-dialog">
				<div class="mui-input-row">
					<label>姓名label>
					<input type="text" id="addlmr-name" class="mui-input-clear" placeholder="请输入姓名">
				div>
				<div class="mui-input-row">
					<label>身份证号label>
					<input type="text" id="addlmr-id" class="mui-input-clear" placeholder="请输入证件号码">
				div>
				<div class="mui-input-row">
					<label>住址label>
					<input type="hidden" id="lmraddressdm">
					<input type="text" id="lmraddressmc" class="mui-input" placeholder="请选择住址" readonly unselectable="on">
					<span class="mui-icon mui-icon-forward">span>
				div>
				<div class="mui-input-row">
					<label>详细住址label>
					<input type="text" id="addlmr-xxzz" class="mui-input-clear" placeholder="请输入详细住址">
				div>
				<div class="mui-button-row father-dialogbtn-box">
					<div class="dialog-btns">
						<button type="button" id="lmradd-confirm" class="mui-btn mui-btn-primary" >确认button> 
						<button type="button" id="lmradd-look-confirm" class="mui-btn mui-btn-primary" >确认button> 
						<button type="button" id="lmradd-cancel" class="mui-btn" >取消button> 
						<button type="button" id="lmradd-del" class="mui-btn mui-btn-danger" >删除button>
					div>
				div>
			form>
		div>
		<div id="lmr-dialog-mask">div>

document.querySelector("#addLmr").addEventListener('tap', (e)=>{//添加联名人按钮
	e.stopPropagation();
	openLmrDlg("add");
});
	
document.querySelector("#lmradd-confirm").addEventListener('tap', (e)=>{//弹窗确定按钮动态添加联名人
	e.stopPropagation();	
	addLmr();
});
	
document.querySelector("#lmradd-cancel").addEventListener('tap', (e)=>{//取消按钮
	e.stopPropagation();
	closeLmrDlg();
});
	
document.querySelector("#lmradd-del").addEventListener('tap', (e)=>{//查看编辑状态下的删除按钮
	e.stopPropagation();
	delLmr();
	closeLmrDlg();
});

let lmrList = [];
let currentEdit = null;
function openLmrDlg(type){
	console.log(currentEdit);
	document.querySelector("#lmr-dialog-mask").style.display = "block";
	document.querySelector("#popover-dialog").style.display = "block";
	document.querySelector("#lmradd-confirm").style.display = "inline-block";
	if(type=='add'){
		document.querySelector("#lmradd-del").style.display = "none";
	}else{
		document.querySelector("#lmradd-del").style.display = "inline-block";
		document.querySelector("#addlmr-name").value = lmrList[currentEdit].xm ;
		document.querySelector("#addlmr-id").value = lmrList[currentEdit].sfzh;
		document.querySelector("#lmraddressdm").value = lmrList[currentEdit].xzqhdm;
		document.querySelector("#lmraddressmc").value = lmrList[currentEdit].xzqhmc;
		document.querySelector("#addlmr-xxzz").value = lmrList[currentEdit].zz;
	}
}

function closeLmrDlg(){
	currentEdit = null;
	document.querySelector("#addlmr-name").value = "";
	document.querySelector("#addlmr-id").value = "";
	document.querySelector("#lmraddressdm").value = "";
	document.querySelector("#lmraddressmc").value = "";
	document.querySelector("#addlmr-xxzz").value = "";
	document.querySelector("#lmr-dialog-mask").style.display = "none";
	document.querySelector("#popover-dialog").style.display = "none";
	let lmrs = lmrList.length;
	document.querySelector("#lmrs").innerText = lmrs;
	if(lmrs>0){
		document.querySelector("#lmrxq-garden").style.display = "";
	}else{
		document.querySelector("#lmrxq-garden").style.display = "none";
	}
}

function resolveLmr(){
	let addlmrName = document.querySelector("#addlmr-name").value;
	let addlmrID = document.querySelector("#addlmr-id").value;
	let addlmrAdressdm = document.querySelector("#lmraddressdm").value;
	let addlmrAdressmc = document.querySelector("#lmraddressmc").value;
	let addlmrxxzz = document.querySelector("#addlmr-xxzz").value;
	if(addlmrName == "" || addlmrID == "" || addlmrAdressdm == "" || addlmrAdressmc == "" || addlmrxxzz == ""){
		mui.toast('请将信息填写完整');
		return null;
	}

	let lmrxx = {};
	lmrxx.xm = addlmrName;
	lmrxx.sfzh = addlmrID;
	lmrxx.xzqhdm = addlmrAdressdm;
	lmrxx.xzqhmc = addlmrAdressmc;
	lmrxx.zz = addlmrxxzz;
	return lmrxx;
}

function addLmr(){
	let lmrxx = resolveLmr();
	if(!lmrxx){
		return;
	}
	if(currentEdit != null){
		lmrList.splice(currentEdit,1,lmrxx);
	}else{
		lmrList.push(lmrxx);
	}
	
	drawLmrDiv();
	closeLmrDlg();
}

function delLmr(){
	lmrList.splice(currentEdit,1);
	drawLmrDiv();
}

function drawLmrDiv(){
	document.querySelector(".lmrxq-garden").innerHTML = "";
	lmrList.forEach(function(element,index){
		var lmrDom = document.createElement("div");
		lmrDom.className = "lmrxq-box lmrbox-"+ index;
		lmrDom.innerHTML = element.xm;
		lmrDom.addEventListener('tap', (e)=>{
			currentEdit = index;
			openLmrDlg("edit");
		});
		document.querySelector(".lmrxq-garden").appendChild(lmrDom);
	})
}