点击新增,无限新增表单以及选中删除某一表单

212 阅读1分钟
//结构
<el-button type="primary" @click="handleAdd('collateral')">新增</el-button>

<el-form v-for="(itemCollateral, index) in collateralList" :model="itemCollateral" class="demo-form-inline"
			:size="formSize" v-show="cat == 'AAA'" :rules="rules">
			<el-row :gutter="20">
				<el-col :span="1">
					<div class="boxBlock">
						<el-checkbox v-model="itemCollateral.checked"
							@change="(val: any) => changeChecked(val, index, itemCollateral.collateralId, 'collateral')"
							size="large" />
					</div>
				</el-col>
				<el-col :span="4" :pull="1">
					<el-form-item label="编号" label-width="140px" prop="collateralCode">
						<el-input v-model="itemCollateral.collateralCode" placeholder="请输入编号" style="width: 150px" />
					</el-form-item>
				</el-col>
~~~~~~~~
//新增
function handleAdd(type: any) {
	if (type == 'collateral') {
		collateralList.unshift({
			//占地面积
			coversArea: '',
			//市
			cityCode: '',
			//区
			countyCode: '',
			//省
			provinceCode: '',
			//详细地址
			address: '',
			//编号
			collateralCode: '',
			checked: false,
			cityList2: [],
			countyList2: [],
			monthTime: [], //检测时段
		})
	}
~~~~~~~~
//解释一下
const delCollateralIds = ref<string[]>([]) //delCollateralIds是存储单选中的或多选中的id
const delCollateralIndex = ref<number[]>([]) //delCollateralIndex
//删除选择状态
function changeChecked(checked: boolean, index: number, id: string, type: any) {
	 if (type == 'collateral') {
		if (checked) {
			delCollateralIndex.value.push(index)
			delCollateralIds.value.push(id)
		} else {
			delCollateralIndex.value.splice(
				delCollateralIndex.value.indexOf(index),
				1
			)
			delCollateralIds.value.splice(delCollateralIds.value.indexOf(id), 1)
		}
	}
	} 
//具体逻辑
function handleDelete(type: any) {
	if (type == 'collateral') {
		if (delCollateralIndex.value.length === 0) {
			// 请先选择要删除的
			ElMessage({
				message: '请先选择要删除的XX',
				type: 'warning',
				center: true,
			})
		} else {
			if (delCollateralIndex.value.length === collateralList.length) {
				// 删除确定后
				ElMessageBox.confirm('是否确定删除', 'Warning', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					handlerDelete('collateral')
				})
			} else {
				// 删除确定后
				ElMessageBox.confirm('是否确定删除', 'Warning', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					handlerDelete('collateral')
				})
			}
		}
}
~~~~~~~~
//具体逻辑  
function handlerDelete(type: any) {
	let params = {
		enterpriseId: ruleForm.enterpriseId ? ruleForm.enterpriseId : router.currentRoute._rawValue.query.enterpriseId,
		collateralList: collateralList,
		propertyList: propertyList,
		projectList: projectList,
		operatingPlantList: operatingPlantList
	}
	if (type == 'collateral') {
		delCollateralIds.value.forEach((id, index) => {
			collateralList.splice(index, 1)

		})
		delCollateralIds.value.forEach((collateralId) => {
			if (collateralId) {
				delCollateral(collateralId).then(() => {
					updateNum(params)
				})
			}
		})
		delCollateralIds.value = []
		ElMessage({
			message: '已删除该押品',
			type: 'success',
			center: true,
		})
	}