vue3+element列表嵌套表单实现方式

组件

<!-- 分发操作 -->
<template>
	<div>
		<el-dialog v-model="distributeWindow" :title="title" @close="close" :close-on-click-modal="false" width="60%">
			<el-form ref="ruleFormRef" :model="formData" :rules="rules">
				<el-table :data="warnList" style="width: 100%; margin: 10px 0" max-height="250" height="200" border>
					<el-table-column prop="projectId" label="运维项目">
						<template #default="{ row, $index }">
							<el-form-item :prop="`warnList.${$index}.projectId`" :rules="rules.projectId">
								<el-select v-model="row.projectId" style="width: 100%" @change="projectChange(row, $index)" placeholder="请选择">
									<el-option
										v-for="item in projectOptions"
										:key="item.projectId"
										:label="item.projectName"
										:value="item.projectId"
									/>
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="teamId" label="运维团队">
						<template #default="{ row, $index }">
							<el-form-item :prop="`warnList.${$index}.teamId`" :rules="rules.teamId">
								<el-select v-model="row.teamId" style="width: 100%" placeholder="请选择" @change="teamNameChange(row, $index)">
									<el-option v-for="item in row.teamNameOptions" :key="item.teamId" :label="item.teamName" :value="item.teamId" />
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="serviceItemsId" label="服务项目">
						<template #default="{ row, $index }">
							<el-form-item :prop="`warnList.${$index}.serviceItemsId`" :rules="rules.serviceItemsId">
								<el-select v-model="row.serviceItemsId" multiple style="width: 100%" placeholder="请选择">
									<el-option
										v-for="item in row.serviceOptions"
										:key="item.serviceId"
										:label="item.serviceName"
										:value="item.serviceId"
									/>
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="dutyType" label="责任类型">
						<template #default="{ row, $index }">
							<el-form-item :prop="`warnList.${$index}.dutyType`" :rules="rules.dutyType">
								<el-select v-model="row.dutyType" style="width: 100%" placeholder="请选择">
									<el-option v-for="item in dutyTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="80">
						<template #default="scope">
							<el-button link type="danger" size="small" @click.prevent="deleteRow(scope.$index)"> 删除 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<el-button class="mt-4" style="width: 100%; margin-bottom: 10px" @click="onAddItem">添加</el-button>
			<el-divider content-position="left"><span>已分发记录</span></el-divider>
			<!-- 已分发记录 -->
			<el-table
				border
				ref="acceptTableRef"
				:data="ffList"
				style="width: 100%; margin-top: 10px"
				min-height="250px"
				height="200px"
			>
				<el-table-column prop="distributeTime" fixed label="分发时间" width="200" />
				<el-table-column prop="projectName" label="运维项目名称" width="150" />
				<el-table-column prop="serviceItemsName" label="服务项目名称" width="150" />
				<el-table-column prop="teamName" label="运维团队名称" width="150" />
				<el-table-column prop="distributeType" label="分发类型" width="150">
					<template #default="{ row }">
						<span>{{ distributeTypeEnum[row.distributeType] }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="dutyType" label="责任类型" width="150">
					<template #default="{ row }">
						<span>{{ dutyTypeEnum[row.dutyType] }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="distributeStatus" label="分发状态" width="150">
					<template #default="{ row }">
						<span>{{ distributeStatusEnum[row.distributeStatus] }}</span>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<el-button @click="close">取消</el-button>
				<el-button type="primary" @click="modelFormFun">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { distributeEvent, loadDistributeList, loadEventProjectList } from "@/api/modules/eventWos/eventWaitApi";
import { DictData } from "@/api/interface/system/dict";
import { queryDictEnum } from "@/api/modules/system/dictApi";
import { distributeObj, projectList } from "@/api/interface/eventWos/eventWait";
import { loadTeamListByProjectId } from "@/api/modules/manage/projectApi";
import { queryServiceItemListByTeamid } from "@/api/modules/manage/serviceProjectApi.js";
import type { FormInstance, FormRules } from "element-plus";
const instance = getCurrentInstance();
const route = useRoute();
const ffList = ref<distributeObj[]>([]);
//获取事件单id
const eventId = ref();
const flag = route.query.flag as string;
//定义弹窗显示隐藏
const distributeWindow = ref(false);
//定义表单验证规则
const rules = reactive<FormRules>({
	projectId: [{ required: true, message: "请选择运维项目", trigger: "change" }],
	teamId: [{ required: true, message: "请选择运维团队", trigger: "change" }],
	serviceItemsId: [{ required: true, message: "请选择服务项目", trigger: "change" }],
	dutyType: [{ required: true, message: "请选择责任类型", trigger: "change" }]
});
interface warnList {
	eventId?: string;
	teamId: string;
	dutyType: string;
	projectId?: string;
	serviceItemsId: any[];
}
const projectOptions = ref<projectList[]>([]);
//获取运维项目列表
const getProject = () => {
	loadEventProjectList(eventId.value).then(res => {
		projectOptions.value = res.data;
	});
};
//获取服务项目列表
const serviceItemsId = (row: any) => {
	queryServiceItemListByTeamid({ teamId: row.teamId }).then(res => {
		row.serviceOptions = res.data;
	});
};
//运维项目名称改变
const projectChange = (row: any, index: any) => {
	warnList.value[index].teamId = "";
	warnList.value[index].serviceItemsId = [];
	getTeamName(row);
};
//获取运维团队名称数据
const getTeamName = (row: any) => {
	loadTeamListByProjectId({ projectId: row.projectId }).then(res => {
		row.teamNameOptions = res.data;
	});
};
//运维团队名称改变
const teamNameChange = (val: any, index: any) => {
	warnList.value[index].serviceItemsId = [];
	serviceItemsId(val);
};
//定义分发列表
const warnList = ref<warnList[]>([]);
const formData = reactive({
	warnList: warnList.value
});
watch(
	warnList.value,
	v => {
		formData.warnList = v;
	},
	{ deep: true }
);
const close = () => {
	emit("hide");
	distributeWindow.value = false;
	formData.warnList = [];
};
// const teamNameOptions = ref<teamList[]>([]);
const dutyTypeOptions = ref<DictData.DictDataSelect[]>();
const distributeTypeEnum = ref<any>({});
//分发类型数据
const distributeType = () => {
	queryDictEnum("EventDistributeTypeEnum_wos-workorder").then(res => {
		res.data.forEach((item: any) => {
			distributeTypeEnum.value[item.value] = item.label;
		});
	});
};
distributeType();
const dutyTypeEnum = ref<any>({});
//获取责任类型数据
const dutyType = () => {
	queryDictEnum("DutyTypeEnum_wos-workorder").then(res => {
		dutyTypeOptions.value = res.data;
		res.data.forEach((item: any) => {
			dutyTypeEnum.value[item.value] = item.label;
		});
	});
};
dutyType();
const distributeStatusEnum = ref<any>({});
//分发状态
const faztEnum = () => {
	queryDictEnum("EventDistributeStatusEnum_wos-workorder").then((res: any) => {
		res.data.forEach((item: any) => {
			distributeStatusEnum.value[item.value] = item.label;
		});
	});
};
faztEnum();

const emit = defineEmits(["dofun", "hide"]);

//删除分发信息
const deleteRow = (index: number) => {
	warnList.value.splice(index, 1);
};
//接收eventId
const distributeDialog = (id: any) => {
	eventId.value = id;
	distributeWindow.value = true;
	getDistributeList();
	getProject();
};
const getDistributeList = () => {
	loadDistributeList(eventId.value).then(res => {
		ffList.value = res.data;
	});
};

//添加团队信息
const onAddItem = () => {
	warnList.value.push({
		teamId: "",
		dutyType: "",
		projectId: "",
		serviceItemsId: []
	});
};

//弹窗标题
const title = ref("分发团队");
//定义表单验证类型
const ruleFormRef = ref<FormInstance>();
//保存分发信息
const modelFormFun = () => {
	ruleFormRef.value!.validate(valid => {
		if (!valid) return;
		if (formData.warnList.length == 0) {
			ElMessage.warning("请添加分发团队信息");
			return;
		}
		//列表的每一项不能为空
		const warnList = formData.warnList.filter(
			item => item.teamId == "" || item.dutyType == "" || item.projectId == "" || item.serviceItemsId.length == 0
		);
		if (warnList.length > 0) {
			ElMessage.warning("请完善分发团队信息");
			return;
		}
		//团队名称不能选择重复的
		const teamId = formData.warnList.map(item => item.teamId);
		if (new Set(teamId).size !== teamId.length) {
			ElMessage.warning("团队名称不能选择重复的");
			return;
		}

		const dutyType = formData.warnList.filter(item => item.dutyType == "A");
		if (dutyType.length > 1) {
			ElMessage.warning("责任类型不能选择多个主体");
			return;
		}
		let params = {
			eventId: eventId.value,
			distributeInfoList: formData.warnList
		};
		distributeEvent(params).then(res => {
			emit("hide");
			distributeWindow.value = false;
			ElMessage.success({ message: res.msg });
			//刷新列表
			if (flag == "1") {
				instance?.proxy?.$Bus.emit("loadToDoData");
				instance?.proxy?.$Bus.emit("closeCurrentTab");
			} else {
				emit("dofun");
				instance?.proxy?.$Bus.emit("loadToDoData");
				instance?.proxy?.$Bus.emit("closeCurrentTab");
			}
		});
	});
};
defineExpose({
	distributeDialog
});
</script>

父组件

	<distribute-view v-if="isOpen" ref="distributeRef" @dofun="refreshFun" @hide="isOpen = false"></distribute-view>
//刷新
const refreshFun = () => {
	proTable.value.getTableList();
};
	//列表按钮操作 点击打开子组件
const distribute = (row: any) => {
	isOpen.value = true;
	nextTick(() => {
		// 调用子组件的方法
		distributeRef.value.distributeDialog(row.eventId);
	});
};