1.用到动态组件
设置ref用来确定是哪个tabs页的方法
html代码
<div>
<el-button type="success" @click="saveWork('1')">提交</el-button>
<el-button type="warning" @click="saveWork('2')" v-if="showBtn">暂存</el-button>
</div>
<el-tabs type="border-card" v-model="activeName" v-if="gnData" @tab-change="tabClick">
<el-tab-pane :label="item.gndym" v-for="(item, index) in gnList" :key="index">
<component
:ref="(el:HTMLElement[])=>setItemRef(el,index)"
:name="index"
:dxbz="item.dxbz"
:jdlx="jdlx"
:dataId="item.dataId"
:is="item.gndyurl"
:qsjdbz="qsjdbz"
:jdid="jdid"
:ywbh="ywbh"
:lcid="lcid"
></component>
</el-tab-pane>
</el-tabs>
ts代码
//暂存按钮显示隐藏,如果有一个是1,就显示
showBtn.value = gnList.value.filter(item => item.dxbz == "1").length > 0;
//判断数据是否回来,数据回来才渲染
const gnData = ref(false);
//设置ref用来确定是哪个tabs页的方法
const itemRefs = ref<any>({});
//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<typeof ElLoading.service> = 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页面
<el-form
:model="formInline.workorder"
:disabled="isDisabled"
label-width="auto"
ref="ruleFormRef"
:rules="saveCheck == '1' ? rules : []"
>
const formInline = ref<paramsDetail>({
schedulesCheck: true
});
//是否校验,1校验,0不校验
const saveCheck = ref<any>();
//保存工单方法
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<FormRules>({
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
});
安装: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;