el-tabs 点击保存按钮，可以循环保存(框架)

1.用到动态组件
设置ref用来确定是哪个tabs页的方法
html代码

提交
暂存


			
				
			
		

ts代码

//暂存按钮显示隐藏,如果有一个是1，就显示
showBtn.value = gnList.value.filter(item => item.dxbz == "1").length > 0;
//判断数据是否回来，数据回来才渲染
const gnData = ref(false);
//设置ref用来确定是哪个tabs页的方法
const itemRefs = ref({});
//ref使用
const setItemRef = (el: any, index: any) => {
	itemRefs.value["ref" + index] = el;
};
//点击激活tabs页面
const tabClick = (name: any) => {
	activeName.value = name;
};
//暂存工单操作
const saveWork = async (index: string) => {
	//定义loading
	let loadingInstance: ReturnType = ElLoading.service({
		fullscreen: true,
		lock: true,
		text: "Loading",
		background: "rgba(0, 0, 0, 0.7)"
	});
	//定义组件ref
	let keys = Object.keys(itemRefs.value);
	//此操作代表提交按钮
	keys.push("saveOk");
	//循环组件里的每个ref值
	for (let i = 0; i < keys.length; i++) {
	//如果是提交按钮不执行下一步
		if (keys[i] != "saveOk") {
		//获取组件ref
			let ref = itemRefs.value[keys[i]] as any;
			//定义标识,,如果保存失败不执行下一步（全部页面都抛出一个save方法）
			let flag: boolean = await ref.save(index);
			//如果保存失败不执行下一步
			if (!flag) {
			 	//关闭loading
				loadingInstance.close();
				break;
			}
	//如果是提交按钮执行下一步
		} else {
			loadingInstance.close();
			//提交按钮操作
			if (index == "1") {
				if (jdsx.value == "H") {
					manualDialog.value = true;
					manualForm.value.nextJdid = "";
					getJdlcpzByJdid();
				} else {
					automaticDialog.value = true;
				}
				//暂存按钮操作
			} else {
				if (hdlcid.value == null || hdlcid.value == "") {
					getStartWorkFlow();
				} else {
					ElMessage.success("保存成功！");
					//刷新某方法
					instance?.proxy?.$Bus.emit("loadToDoData");
				}
			}
		}
	}
};

页面使用
html页面

const formInline = ref({
	schedulesCheck: true
});
//是否校验，1校验，0不校验
const saveCheck = ref();
//保存工单方法
const save = (check: any) => {
	saveCheck.value = check;
	return new Promise((resolve, reject) => {
			//接收附表信息
		let scedulesData = schedulesRef.value.getScedulesData();
		//获取附表Id值和附表值
		const controlIds = scedulesData.data.map((item: any) => {
			return {
				controlId: item.controlId,
				controlValue: item.controlValue ? item.controlValue.toString() : ""
			};
		});
		//赋值附表信息
		formInline.value.addendumList = controlIds || [];
		//赋值附表校验信息
		formInline.value.schedulesCheck = scedulesData.check;
		let obj = { ...formInline.value };
		//赋值工单id
		obj.woId = myWoId.value;
		if (saveCheck.value == "1") {
			//表单数据为空时校验，弹出提示
			ruleFormRef.value!.validate(valid => {
				if (!valid) {
					ElMessage.error({ message: "请填必填项" });
					resolve(false);
					return;
				}
				//附表信息为空时校验，弹出提示
				if (formInline.value.schedulesCheck) {
					ElMessage.error({ message: "请填写附表必填项" });
					resolve(false);
					return;
				}
				saveWorkorder(obj)
					.then(res => {
						woNumber.value = res.data.woNumber;
						myWoId.value = res.data.woId || "";
						failureRecordSn.value = res.data.failureRecordSn;
						getWorkorderLogList();
						getWorkorderFollowupList();
						resolve(true);
					})
					.catch(() => {
						reject(false);
					});
			});
		//表单数据不为空时，直接保存
		} else {
			saveWorkorder(obj)
				.then(res => {
					woNumber.value = res.data.woNumber;
					failureRecordSn.value = res.data.failureRecordSn;
					myWoId.value = res.data.woId || "";
					getWorkorderLogList();
					getWorkorderFollowupList();
					resolve(true);
				})
				.catch(() => {
					reject(false);
				});
		}
	});
};
defineExpose({
	save
});

附表文件

const rules = reactive({
	controlValue: [{ required: true, message: "请输入", trigger: ["blur", "change"] }]
});
//校验是否有必填项未填
const checkFun = () => {
	let l = infoList.value.filter(item => item.required == "Y" && (!item.controlValue || item.controlValue == ""));
	return l.length > 0;
};
//表单数据方法暴露给父组件
const getScedulesData = () => {
	return { data: infoList.value, check: checkFun() };
};
defineExpose({
	getScedulesData
});

番外
mitt使用方式请查看链接

安装：npm install --save mitt
//vue3 引入vue
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
//传值
instance?.proxy?.$Bus.emit("loadToDoData");
//接收
instance?.proxy?.$Bus.on("loadToDoData", () => {
	loadToDoData();
});

main.ts加上全局并使用

import mitt from "mitt";
const Mit = mitt();
declare module "vue" {
	export interface ComponentCustomProperties {
		$Bus: typeof Mit;
	}
}
const app = createApp(App);
app.config.globalProperties.$Bus = Mit;