最近遇到关于自定义表单pdf导出的问题，具体包括单表单导出以及多表单导出的情况。单表单实现较容易，多表单导出表单之间需要一个标题间隔。不多废话，直接上菜。
Pdf导出部分
其中使用到jsPDF，大家有需要自行下载，auditFollwoRef为表单子组件部分，setrecordIdInit为暴露出的方法
async function handleExport(item) {
await nextTick();
await auditFollwoRef.value.setrecordIdInit(item.id);
const content = document.getElementById("vFormRef");
content.querySelectorAll("input").forEach((input) => {
input.style.height = "32px";
input.style.lineHeight = "14px";
input.style.paddingTop = "6px";
input.style.border = "none";
});
content.querySelectorAll(".el-input__wrapper").forEach((item) => {
item.style.boxShadow = "none";
});
content.querySelectorAll(".el-textarea__inner").forEach((item) => {
item.style.boxShadow = "none";
});
const imgsList = content.querySelectorAll("img");
await nextTick();
let index = 0;
imgsList.forEach((r) => {
const img = new Image();
img.onload = async () => {
index++;
};
img.src = r.src;
});
let timer = setInterval(async () => {
if (index == imgsList.length) {
clearInterval(timer);
const canvas = await html2canvas(content, {
dpi: window.devicePixelRatio * 2,
useCORS: true,
allowTaint: true,
async: true,
allowTaint: true,
scale: 3, // 根据需要调整缩放比例
scrollY: 0,
});
var contentWidth = canvas.width;
var contentHeight = canvas.height;
const pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdfX = ((contentWidth + 10) / 2) * 0.75;
var pdfY = ((contentHeight + 500) / 2) * 0.75; // 500为底部留白
var imgX = pdfX;
var imgY = (contentHeight / 2) * 0.75; //内容图片这里不需要留白的距离
var PDF = new jsPDF("", "pt", [pdfX, pdfY]);
PDF.addImage(pageData, "jpeg", 0, 0, imgX, imgY);
PDF.save(item.caseCollectionRecordVO.name + ".pdf");
}
}, 1000);
}
单表单部分
这是获取表单内容部分
/**获取表单详情 */
const getCaseCollectionRecordAloneDec = async () => {
const res = await getCaseCollectionRecordAlone({ id: recordId.value });
fmUserForm.value = res.data.fmUserFormVO;
fmUserForm.value.fmUserFormItems.forEach((item, index) => {
let obj = JSON.parse(item.scheme);
if (index == 0) {
fmUserRuleFormItemsConfig.value = obj.fmUserRuleFormItemsConfig;
}
if (obj && obj.widget) {
obj.widget.options.disabled = true;
formJson.value.formConfig = obj.formConfig;
obj.widget.customId = item.id;
if (obj.widget.type == "radio" || obj.widget.type == "checkbox") {
if (item.fmUserFormData && item.fmUserFormData.childData) {
obj.widget.options.optionItems = JSON.parse(
item.fmUserFormData.childData
);
}
}
formJson.value.widgetList.push(obj.widget);
}
});
if (fmUserForm.value.fmUserFormItems.length > 0) {
for (const item of fmUserForm.value.fmUserFormItems) {
if (item.fmUserFormData && item.fmUserFormData.originalData) {
formData[item.formItemId] = JSON.parse(
item.fmUserFormData.originalData
);
}
}
}
for (const key in formData) {
if (Object.prototype.hasOwnProperty.call(formData, key)) {
const element = formData[key];
if (element.length > 0) {
const temelement = []
for (const itemFile of element) {
if (itemFile && itemFile.url && itemFile.url.indexOf("http") > -1) {
if (itemFile.response) {
itemFile.url = itemFile.response.data;
temelement.push(itemFile);
}
}
}
if (temelement.length > 0) {
formData[key] = []
for (const img of temelement) {
formData[key].push(img)
}
}
}
}
}
temFormData.value = formData;
await vFormRef.value.setFormJson(formJson.value);
getRuleOperate();
};
这是修改规则部分
const getRuleOperate = () => {
const ruleOperate = {};
for (const item of fmUserRuleFormItemsConfig.value) {
for (const result of item.fmUserFormList) {
ruleOperate[result] = [];
}
}
for (const element of fmUserRuleFormItemsConfig.value) {
for (const result of element.fmUserFormList) {
ruleOperate[result].push(element.fmUsertype);
ruleOperate[result].push(element.fmRuletype);
if (element.fmUsertype == 0) {
// 都要满足
if (element.fmRuletype == 0) {
// 显隐
for (const condition of element.fmUserRuleFormItems) {
if (condition.fmTypeValue == 0) {
//等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
areTimesEqual(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 == date2) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
temFormData.value[condition.formItemId] instanceof Array
) {
if (
arraysEqualIgnoreOrder(
temFormData.value[condition.formItemId],
condition.fmUseValue
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else {
if (
temFormData.value[condition.formItemId] ==
condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
}
} else if (condition.fmTypeValue == 1) {
//不等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
areTimesEqual(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
condition.type == "date" &&
temFormData.value[condition.formItemId]
) {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 != date2) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
temFormData.value[condition.formItemId] instanceof Array
) {
if (
!arraysEqualIgnoreOrder(
temFormData.value[condition.formItemId],
condition.fmUseValue
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else {
if (
temFormData.value[condition.formItemId] !=
condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
}
} else if (condition.fmTypeValue == 2) {
//大于
if (
temFormData.value[condition.formItemId] > condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 3) {
//大于等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
condition.type == "date" &&
temFormData.value[condition.formItemId]
) {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 >= date2) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
temFormData.value[condition.formItemId] >= condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 4) {
//小于
if (
temFormData.value[condition.formItemId] < condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 5) {
//小于等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareLessTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 <= date2) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
temFormData.value[condition.formItemId] <= condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 6) {
//选择范围
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue[0].slice(11, 19)
) &&
compareLessTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue[1].slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue[0]).getTime();
const date3 = new Date(condition.fmUseValue[0]).getTime();
if (date2 <= date1 && date3 >= date1) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
condition.fmUseValue[0] <=
temFormData.value[condition.formItemId] &&
condition.fmUseValue[1] >=
temFormData.value[condition.formItemId]
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 7) {
//为空
if (
!isNotNullOrUndefinedOrEmpty(
temFormData.value[condition.formItemId]
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 8) {
//不为空
console.log(temFormData.value[condition.formItemId]);
if (
isNotNullOrUndefinedOrEmpty(
temFormData.value[condition.formItemId]
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 9) {
//包含
if (temFormData.value[condition.formItemId] instanceof Array) {
if (
condition.fmUseValue.every((element) =>
temFormData.value[condition.formItemId].includes(element)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else {
if (
temFormData.value[condition.formItemId] &&
temFormData.value[condition.formItemId].includes(
condition.fmUseValue
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
}
} else if (condition.fmTypeValue == 10) {
//不包含
if (temFormData.value[condition.formItemId] instanceof Array) {
if (
!condition.fmUseValue.every((element) =>
temFormData.value[condition.formItemId].includes(element)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else {
if (
!temFormData.value[condition.formItemId] ||
!temFormData.value[condition.formItemId].includes(
condition.fmUseValue
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
}
}
}
}
} else {
// 或者
if (element.fmRuletype == 0) {
// 显隐
for (const condition of element.fmUserRuleFormItems) {
if (condition.fmTypeValue == 0) {
//等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
areTimesEqual(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 == date2) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
temFormData.value[condition.formItemId] instanceof Array
) {
if (
arraysEqualIgnoreOrder(
temFormData.value[condition.formItemId],
condition.fmUseValue
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else {
if (
temFormData.value[condition.formItemId] ==
condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
}
} else if (condition.fmTypeValue == 1) {
//不等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
areTimesEqual(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
condition.type == "date" &&
temFormData.value[condition.formItemId]
) {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 != date2) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
temFormData.value[condition.formItemId] instanceof Array
) {
if (
!arraysEqualIgnoreOrder(
temFormData.value[condition.formItemId],
condition.fmUseValue
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else {
if (
temFormData.value[condition.formItemId] !=
condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
}
} else if (condition.fmTypeValue == 2) {
//大于
if (
temFormData.value[condition.formItemId] > condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 3) {
//大于等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
condition.type == "date" &&
temFormData.value[condition.formItemId]
) {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 >= date2) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
temFormData.value[condition.formItemId] >= condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 4) {
//小于
if (
temFormData.value[condition.formItemId] < condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 5) {
//小于等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareLessTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 <= date2) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
temFormData.value[condition.formItemId] <= condition.fmUseValue
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 6) {
//选择范围
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue[0].slice(11, 19)
) &&
compareLessTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue[1].slice(11, 19)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue[0]).getTime();
const date3 = new Date(condition.fmUseValue[0]).getTime();
if (date2 <= date1 && date3 >= date1) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (
condition.fmUseValue[0] <=
temFormData.value[condition.formItemId] &&
condition.fmUseValue[1] >=
temFormData.value[condition.formItemId]
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 7) {
//为空
if (
!isNotNullOrUndefinedOrEmpty(
temFormData.value[condition.formItemId]
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 8) {
//不为空
if (
isNotNullOrUndefinedOrEmpty(
temFormData.value[condition.formItemId]
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else if (condition.fmTypeValue == 9) {
//包含
if (temFormData.value[condition.formItemId] instanceof Array) {
if (
condition.fmUseValue.every((element) =>
temFormData.value[condition.formItemId].includes(element)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else {
if (
temFormData.value[condition.formItemId] &&
temFormData.value[condition.formItemId].includes(
condition.fmUseValue
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
}
} else if (condition.fmTypeValue == 10) {
//不包含
if (temFormData.value[condition.formItemId] instanceof Array) {
if (
!condition.fmUseValue.every((element) =>
temFormData.value[condition.formItemId].includes(element)
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
} else {
if (
!temFormData.value[condition.formItemId] ||
!temFormData.value[condition.formItemId].includes(
condition.fmUseValue
)
) {
ruleOperate[result].push(true);
} else {
ruleOperate[result].push(false);
}
}
}
}
} else {
// 跳题
for (const condition of element.fmUserRuleFormItems) {
if (condition.fmTypeValue == 0) {
//等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
areTimesEqual(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 == date2) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (
temFormData.value[condition.formItemId] instanceof Array
) {
if (
arraysEqualIgnoreOrder(
temFormData.value[condition.formItemId],
condition.fmUseValue
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else {
if (
temFormData.value[condition.formItemId] ==
condition.fmUseValue
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
}
} else if (condition.fmTypeValue == 1) {
//不等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
areTimesEqual(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (
condition.type == "date" &&
temFormData.value[condition.formItemId]
) {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 != date2) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (
temFormData.value[condition.formItemId] instanceof Array
) {
if (
!arraysEqualIgnoreOrder(
temFormData.value[condition.formItemId],
condition.fmUseValue
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else {
if (
temFormData.value[condition.formItemId] !=
condition.fmUseValue
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
}
} else if (condition.fmTypeValue == 2) {
//大于
if (
temFormData.value[condition.formItemId] > condition.fmUseValue
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.fmTypeValue == 3) {
//大于等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (
condition.type == "date" &&
temFormData.value[condition.formItemId]
) {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 >= date2) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (
temFormData.value[condition.formItemId] >= condition.fmUseValue
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.fmTypeValue == 4) {
//小于
if (
temFormData.value[condition.formItemId] < condition.fmUseValue
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.fmTypeValue == 5) {
//小于等于
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareLessTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue.slice(11, 19)
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue).getTime();
if (date1 <= date2) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (
temFormData.value[condition.formItemId] <= condition.fmUseValue
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.fmTypeValue == 6) {
//选择范围
if (
condition.type == "time" &&
temFormData.value[condition.formItemId]
) {
if (
compareTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue[0].slice(11, 19)
) &&
compareLessTimes(
temFormData.value[condition.formItemId],
condition.fmUseValue[1].slice(11, 19)
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.type == "date") {
const date1 = new Date(
temFormData.value[condition.formItemId]
).getTime();
const date2 = new Date(condition.fmUseValue[0]).getTime();
const date3 = new Date(condition.fmUseValue[0]).getTime();
if (date2 <= date1 && date3 >= date1) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (
condition.fmUseValue[0] <=
temFormData.value[condition.formItemId] &&
condition.fmUseValue[1] >=
temFormData.value[condition.formItemId]
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.fmTypeValue == 7) {
//为空
if (
!isNotNullOrUndefinedOrEmpty(
temFormData.value[condition.formItemId]
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.fmTypeValue == 8) {
//不为空
if (
isNotNullOrUndefinedOrEmpty(
temFormData.value[condition.formItemId]
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else if (condition.fmTypeValue == 9) {
//包含
if (temFormData.value[condition.formItemId] instanceof Array) {
if (
condition.fmUseValue.every((element) =>
temFormData.value[condition.formItemId].includes(element)
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else {
if (
temFormData.value[condition.formItemId] &&
temFormData.value[condition.formItemId].includes(
condition.fmUseValue
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
}
} else if (condition.fmTypeValue == 10) {
//不包含
if (temFormData.value[condition.formItemId] instanceof Array) {
if (
!condition.fmUseValue.every((element) =>
temFormData.value[condition.formItemId].includes(element)
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
} else {
if (
!temFormData.value[condition.formItemId] ||
!temFormData.value[condition.formItemId].includes(
condition.fmUseValue
)
) {
ruleOperate[result].push([true, condition.formItemId]);
} else {
ruleOperate[result].push([false, condition.formItemId]);
}
}
}
}
}
}
}
}
console.log(ruleOperate);
for (const key in ruleOperate) {
if (Object.prototype.hasOwnProperty.call(ruleOperate, key)) {
const element = ruleOperate[key];
// [0] 0 - 全部满足 1 - 满足一个 [1] 0 - 隐藏 1 - 跳题
if (element[0] == 0) {
if (element[1] == 0) {
const slicedData = element.slice(2);
const allTrue = slicedData.every((value) => value == true);
if (allTrue) {
vFormRef.value.showWidgets(key);
} else {
if (temFormData.value[key] instanceof Array) {
if (temFormData.value[key].length > 0) {
vFormRef.value.setFieldValue(key, []);
temFormData.value[key] = [];
}
} else {
if (temFormData.value[key]) {
vFormRef.value.setFieldValue(key, null);
temFormData.value[key] = null;
}
}
vFormRef.value.hideWidgets(key);
}
}
} else {
if (element[1] == 0) {
const slicedData = element.slice(2);
const allTrue = slicedData.some((value) => value == true);
if (allTrue) {
vFormRef.value.showWidgets(key);
} else {
if (temFormData.value[key] instanceof Array) {
if (temFormData.value[key].length > 0) {
vFormRef.value.setFieldValue(key, []);
temFormData.value[key] = [];
}
} else {
if (temFormData.value[key]) {
vFormRef.value.setFieldValue(key, null);
temFormData.value[key] = null;
}
}
vFormRef.value.hideWidgets(key);
}
} else {
const slicedData = element.slice(2);
const allTrue = slicedData.some((value) => value[0] == true);
if (allTrue) {
for (const element of slicedData) {
if (element[0]) {
const startIndex = formJson.value.widgetList.findIndex(
(item) => item.id === element[1]
);
const endIndex = formJson.value.widgetList.findIndex(
(item) => item.id === key
);
const filteredList = formJson.value.widgetList.slice(
startIndex + 1,
endIndex
);
const idsInRange = filteredList.map((item) => item.id);
idsInRange.forEach((id) => {
if (temFormData.value[id] instanceof Array) {
if (temFormData.value[id].length > 0) {
vFormRef.value.setFieldValue(id, []);
temFormData.value[id] = [];
}
} else {
if (temFormData.value[id]) {
vFormRef.value.setFieldValue(id, null);
temFormData.value[id] = null;
}
}
vFormRef.value.hideWidgets(id);
});
}
}
} else {
for (const element of slicedData) {
if (!element[0]) {
const startIndex = formJson.value.widgetList.findIndex(
(item) => item.id === element[1]
);
const endIndex = formJson.value.widgetList.findIndex(
(item) => item.id === key
);
const filteredList = formJson.value.widgetList.slice(
startIndex + 1,
endIndex
);
const idsInRange = filteredList.map((item) => item.id);
idsInRange.forEach((id) => {
vFormRef.value.showWidgets(id);
});
}
}
}
}
}
}
}
};
这是父组件暴露方法部分使用defineExpose
const setrecordIdInit = async (id) => {
recordId.value = id;
await getCaseCollectionRecordAloneDec();
};
defineExpose({
setrecordIdInit,
});
多表单部分
1.在每个部分中添加一个static-text作为他们的标题
2.把每个部分的表单都放在一个数组里
const getCaseCollectionRecordFollowDec = async (index=0) => {
const res = await getFollowRecordInfoFmUserForm({ id: recordId.value });
caseList.value=res.data.fmUserFormList
fmUserForm.value = res.data.fmUserFormList;
formJson.value={formConfig: null,widgetList: []}
let allFm=[]
fmUserForm.value.forEach((x, y)=>{
formJson.value.widgetList.push({
type: 'static-text',
icon: 'static-text',
options: {
name: '',
columnWidth: '200px',
hidden: false,
textContent:
${x.name},textAlign: 'left',
fontSize: '13px',
preWrap: false, //是否自动换行
},
});
x.fmUserFormItems.forEach((item,index) => {
let obj = JSON.parse(item.scheme);
if (index == 0) {
fmUserRuleFormItemsConfig.value = obj.fmUserRuleFormItemsConfig;
}
if (obj && obj.widget) {
obj.widget.options.disabled = true;
formJson.value.formConfig = obj.formConfig;
obj.widget.customId = item.id;
if (obj.widget.type == "radio" || obj.widget.type == "checkbox") {
if (item.fmUserFormData && item.fmUserFormData.childData) {
obj.widget.options.optionItems = JSON.parse(
item.fmUserFormData.childData
);
}
}
formJson.value.widgetList.push(obj.widget);
allFm.push(item)
}
})
})
if (allFm.length > 0) {
for (const item of allFm) {
if (item.fmUserFormData && item.fmUserFormData.originalData) {
formData[item.formItemId] = JSON.parse(
item.fmUserFormData.originalData
);
}
}
}
if (allFm.length > 0) {
for (const item of allFm) {
if (item.fmUserFormData && item.fmUserFormData.originalData) {
formData[item.formItemId] = JSON.parse(
item.fmUserFormData.originalData
);
}
}
}
for (const key in formData) {
if (Object.prototype.hasOwnProperty.call(formData, key)) {
const element = formData[key];
if (element.length > 0) {
const temelement = []
for (const itemFile of element) {
if (itemFile && itemFile.url && itemFile.url.indexOf("http") > -1) {
if (itemFile.response) {
itemFile.url = itemFile.response.data;
temelement.push(itemFile);
}
}
}
if (temelement.length > 0) {
formData[key] = []
for (const img of temelement) {
formData[key].push(img)
}
}
}
}
}
temFormData.value = formData;
await vFormRef.value.setFormJson(formJson.value);
getRuleOperate();
};
