优化
This commit is contained in:
parent
14a8bde1fe
commit
337f1b917c
|
|
@ -145,7 +145,7 @@
|
|||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="得分" width="50px" align="center">
|
||||
<el-table-column label="每题分数" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.row.customFrom.score }}
|
||||
</template>
|
||||
|
|
@ -361,7 +361,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>得分：</span>
|
||||
<span>每题分数：</span>
|
||||
<div>
|
||||
<el-input-number
|
||||
style="width: 164px"
|
||||
|
|
@ -469,7 +469,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>得分：</span>
|
||||
<span>每题分数：</span>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="drawerForm.subjective.score"
|
||||
|
|
@ -717,6 +717,7 @@ const templateInfo = reactive<any>({
|
|||
otherData: [],
|
||||
});
|
||||
const isLock = ref<boolean>(false);
|
||||
const currentNavListIndex = ref<number>(3);
|
||||
// 画布相关
|
||||
const ctx = ref<any>(null);
|
||||
const fabricGroup = ref<any>(null);
|
||||
|
|
@ -726,11 +727,12 @@ const currentFabric = ref<any>(null);
|
|||
onMounted(() => {
|
||||
GetOcrDetail(router.currentRoute.value.query.mid as string).then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
templateInfo.name = res.data.mainName;
|
||||
templateInfo.hasPosition = res.data.hasPosition;
|
||||
templateInfo.type = res.data.paperType === 1 ? "A3" : "A4";
|
||||
templateInfo.otherData = res.data.detail;
|
||||
res.data.detail.forEach((item: any, index: number) => {
|
||||
const { mainName, hasPosition, paperType, detail } = res.data;
|
||||
templateInfo.name = mainName;
|
||||
templateInfo.hasPosition = hasPosition;
|
||||
templateInfo.type = paperType === 1 ? "A3" : "A4";
|
||||
templateInfo.otherData = detail.sort((a: any, b: any) => a.pageIndex - b.pageIndex);
|
||||
templateInfo.otherData.forEach((item: any, index: number) => {
|
||||
templateInfo.imgSrc.push(item.tempPicture64);
|
||||
if (item.tempData) {
|
||||
index === 0
|
||||
|
|
@ -747,31 +749,37 @@ onMounted(() => {
|
|||
}
|
||||
setQuestionList(); //回显试题
|
||||
showFabricData(); //回显画布
|
||||
setStepClick(currentNavListIndex.value, false); //设置步骤
|
||||
setNavTitle(); //设置导航栏文字
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
() => templateInfo,
|
||||
(_new, _old) => {
|
||||
if (!_new.headList[2].point.length && !_new.tailsList[2].point.length) {
|
||||
isLock.value = true;
|
||||
currentNavListIndex.value = 2;
|
||||
return;
|
||||
}
|
||||
if (!_new.headList[1].point.length && !_new.tailsList[1].point.length) {
|
||||
isLock.value = true;
|
||||
currentNavListIndex.value = 1;
|
||||
return;
|
||||
}
|
||||
if (_new.hasPosition) {
|
||||
if (_new.imgSrc.length === 2) {
|
||||
if (_new.headList[0].point.length !== 4 || _new.tailsList[0].point.length !== 4) {
|
||||
isLock.value = true;
|
||||
currentNavListIndex.value = 0;
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (_new.headList[0].point.length !== 4) {
|
||||
isLock.value = true;
|
||||
currentNavListIndex.value = 0;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -1094,14 +1102,18 @@ const createText = (
|
|||
text: string,
|
||||
left: number,
|
||||
top: number,
|
||||
backgroundColor: string = "rgba(0,0,0,0.5)"
|
||||
backgroundColor: string = "rgba(0,0,0,0.5)",
|
||||
fill: string = "white",
|
||||
fontSize: number = 16,
|
||||
fontWeight: string = "normal"
|
||||
): any => {
|
||||
return new fabric.Text(text, {
|
||||
left,
|
||||
top,
|
||||
fontSize: 16,
|
||||
fill: "white",
|
||||
fontSize,
|
||||
fill,
|
||||
backgroundColor,
|
||||
fontWeight,
|
||||
fabricId: cteatedNumber(),
|
||||
});
|
||||
};
|
||||
|
|
@ -1177,13 +1189,14 @@ const createFabric = (): any[] => {
|
|||
case 1:
|
||||
case 5:
|
||||
return [titleText, deleteText];
|
||||
case 3:
|
||||
return [deleteText, editText];
|
||||
default:
|
||||
return [titleText, deleteText, editText];
|
||||
}
|
||||
};
|
||||
|
||||
// 切换步骤
|
||||
const setStepClick = (index: number): void => {
|
||||
const setStepClick = (index: number, isElMessage: boolean = true): void => {
|
||||
if (navListIndex.value === index) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -1222,7 +1235,7 @@ const setStepClick = (index: number): void => {
|
|||
checkTemplateInfo(index);
|
||||
|
||||
if (msg) {
|
||||
ElMessage.error(msg);
|
||||
if (isElMessage) ElMessage.error(msg);
|
||||
return;
|
||||
}
|
||||
if (index === 1) {
|
||||
|
|
@ -1263,6 +1276,9 @@ const saveFabricData = (): void => {
|
|||
type: "text",
|
||||
text: child.get("text"),
|
||||
backgroundColor: child.get("backgroundColor"),
|
||||
fill: child.get("fill"),
|
||||
fontSize: child.get("fontSize"),
|
||||
fontWeight: child.get("fontWeight"),
|
||||
...childItem,
|
||||
});
|
||||
} else {
|
||||
|
|
@ -1566,11 +1582,12 @@ const showFabricData = (): void => {
|
|||
top: item.top,
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
fontSize: 16,
|
||||
fill: "white",
|
||||
backgroundColor: item.backgroundColor,
|
||||
fill: item.fill || "white",
|
||||
fontSize: item.fontSize || 16,
|
||||
fabricId: cteatedNumber(),
|
||||
visible: !textFabricList.value.includes(item.text),
|
||||
fontWeight: item.fontWeight || "normal",
|
||||
}).on("mousedown", (e: any) => {
|
||||
if (textFabricList.value.includes(item.text)) {
|
||||
addEventClick(e);
|
||||
|
|
@ -1715,7 +1732,8 @@ const changeFabricPosition = (value: number, str: string): void => {
|
|||
maxRect.set("top", value / 2 - value);
|
||||
currentFabric.value.target.set(str, value + textList[0].height * 2);
|
||||
}
|
||||
let rectWidth, rectHeight;
|
||||
let rectWidth = 0,
|
||||
rectHeight = 0;
|
||||
switch (navListIndex.value) {
|
||||
// 考号
|
||||
case 2:
|
||||
|
|
@ -1745,17 +1763,25 @@ const changeFabricPosition = (value: number, str: string): void => {
|
|||
// 客观题
|
||||
let questionNumber = currentFabric.value.target.customFrom.questionNumber;
|
||||
let optionNumber = currentFabric.value.target.customFrom.optionNumber;
|
||||
rectWidth = maxRect.get("width") / optionNumber;
|
||||
rectHeight = maxRect.get("height") / questionNumber;
|
||||
let range = currentFabric.value.target.customFrom.range;
|
||||
rectWidth = maxRect.get("width") / (range ? questionNumber : optionNumber);
|
||||
rectHeight = maxRect.get("height") / (range ? optionNumber : questionNumber);
|
||||
changeTextPosition();
|
||||
deleteSmallRect();
|
||||
for (let index = 0; index < optionNumber * questionNumber; index++) {
|
||||
currentFabric.value.target.add(
|
||||
new fabric.Rect({
|
||||
left: maxRect.get("left") + (index % optionNumber) * rectWidth,
|
||||
left:
|
||||
maxRect.get("left") +
|
||||
(index % (range ? questionNumber : optionNumber)) * rectWidth,
|
||||
top:
|
||||
maxRect.get("top") +
|
||||
getOffsetTop(optionNumber, questionNumber, index, rectHeight),
|
||||
getOffsetTop(
|
||||
range ? questionNumber : optionNumber,
|
||||
range ? optionNumber : questionNumber,
|
||||
index,
|
||||
rectHeight
|
||||
),
|
||||
stroke: "red",
|
||||
strokeWidth: 1,
|
||||
fill: "transparent",
|
||||
|
|
@ -1765,6 +1791,35 @@ const changeFabricPosition = (value: number, str: string): void => {
|
|||
})
|
||||
);
|
||||
}
|
||||
// 修改题号位置
|
||||
const questionNumberList = currentFabric.value.target
|
||||
.getObjects()
|
||||
.filter(
|
||||
(item: any) =>
|
||||
item.get("type") === "text" &&
|
||||
!textFabricList.value.includes(item.get("text"))
|
||||
);
|
||||
questionNumberList.forEach((item: any, index: number) => {
|
||||
if (range) {
|
||||
item.set({
|
||||
left:
|
||||
maxRect.get("left") +
|
||||
rectWidth * index +
|
||||
rectWidth / 2 -
|
||||
(questionNumber + 1),
|
||||
top: maxRect.get("top") + 4,
|
||||
});
|
||||
} else {
|
||||
item.set({
|
||||
top:
|
||||
maxRect.get("top") +
|
||||
rectHeight * index +
|
||||
rectHeight / 2 -
|
||||
(questionNumber + 1),
|
||||
left: maxRect.get("left") + 4,
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 4:
|
||||
// 主观题
|
||||
|
|
@ -1998,12 +2053,11 @@ const changeFabricInfo = (bool: boolean): void => {
|
|||
case 3:
|
||||
// 客观题
|
||||
// 生成小格子
|
||||
function createdObjectiveRect(): void {
|
||||
let rect = fabricItem
|
||||
.getObjects()
|
||||
.find((row: any) => row.get("type") === "rect");
|
||||
let rectWidth = rect.get("width") / drawerForm.objective.optionNumber;
|
||||
let rectHeight = rect.get("height") / drawerForm.objective.questionNumber;
|
||||
function createdObjectiveRect(
|
||||
rect: any,
|
||||
rectWidth: number,
|
||||
rectHeight: number
|
||||
): void {
|
||||
for (
|
||||
let index = 0;
|
||||
index <
|
||||
|
|
@ -2014,12 +2068,20 @@ const changeFabricInfo = (bool: boolean): void => {
|
|||
new fabric.Rect({
|
||||
left:
|
||||
rect.get("left") +
|
||||
(index % drawerForm.objective.optionNumber) * rectWidth,
|
||||
(index %
|
||||
(drawerForm.objective.range
|
||||
? drawerForm.objective.questionNumber
|
||||
: drawerForm.objective.optionNumber)) *
|
||||
rectWidth,
|
||||
top:
|
||||
rect.get("top") +
|
||||
getOffsetTop(
|
||||
drawerForm.objective.optionNumber,
|
||||
drawerForm.objective.questionNumber,
|
||||
drawerForm.objective.range
|
||||
? drawerForm.objective.questionNumber
|
||||
: drawerForm.objective.optionNumber,
|
||||
drawerForm.objective.range
|
||||
? drawerForm.objective.optionNumber
|
||||
: drawerForm.objective.questionNumber,
|
||||
index,
|
||||
rectHeight
|
||||
),
|
||||
|
|
@ -2037,11 +2099,21 @@ const changeFabricInfo = (bool: boolean): void => {
|
|||
ElMessage.error("题目重复！");
|
||||
return;
|
||||
} else {
|
||||
deleteSmallRect();
|
||||
createdObjectiveRect();
|
||||
textTitle.set({
|
||||
text: `${drawerForm.objective.questionBefore}-${drawerForm.objective.questionAfter}`,
|
||||
});
|
||||
let rect = fabricItem
|
||||
.getObjects()
|
||||
.find((row: any) => row.get("type") === "rect");
|
||||
let rectWidth =
|
||||
rect.get("width") /
|
||||
(drawerForm.objective.range
|
||||
? drawerForm.objective.questionNumber
|
||||
: drawerForm.objective.optionNumber);
|
||||
let rectHeight =
|
||||
rect.get("height") /
|
||||
(drawerForm.objective.range
|
||||
? drawerForm.objective.optionNumber
|
||||
: drawerForm.objective.questionNumber);
|
||||
deleteSmallRect(navListIndex.value);
|
||||
createdObjectiveRect(rect, rectWidth, rectHeight);
|
||||
fabricItem.set({
|
||||
customFrom: {
|
||||
fabricAttribute: drawerForm.objective.questionTypeValue,
|
||||
|
|
@ -2054,6 +2126,7 @@ const changeFabricInfo = (bool: boolean): void => {
|
|||
...obj,
|
||||
},
|
||||
});
|
||||
objectiveNumber(fabricItem, rect, rectWidth, rectHeight);
|
||||
}
|
||||
|
||||
break;
|
||||
|
|
@ -2157,8 +2230,72 @@ const getOffsetTop = (
|
|||
return offsetTop * top;
|
||||
};
|
||||
|
||||
// 客观题生成题号
|
||||
const objectiveNumber = (
|
||||
fabricItem: any,
|
||||
rect: any,
|
||||
rectWidth: number,
|
||||
rectHeight: number
|
||||
): void => {
|
||||
// 边距
|
||||
const obj = {
|
||||
fontSize: 14,
|
||||
fill: "black",
|
||||
fontWeight: "bold",
|
||||
fabricId: cteatedNumber(),
|
||||
backgroundColor: "rgba(255,255,255,0.7)",
|
||||
};
|
||||
if (drawerForm.objective.range) {
|
||||
// 竖向
|
||||
for (let index = 0; index < drawerForm.objective.questionNumber; index++) {
|
||||
let textNumber = 0 as any;
|
||||
if (drawerForm.objective.questionBefore % 1 === 0) {
|
||||
textNumber = drawerForm.objective.questionBefore++;
|
||||
} else {
|
||||
let before = drawerForm.objective.questionBefore.toString().split(".")[0] * 1;
|
||||
let after = drawerForm.objective.questionBefore.toString().split(".")[1] * 1;
|
||||
textNumber = `${before}.${after + index}`;
|
||||
}
|
||||
fabricItem.add(
|
||||
new fabric.Text(`${textNumber}`, {
|
||||
left:
|
||||
rect.get("left") +
|
||||
rectWidth * index +
|
||||
rectWidth / 2 -
|
||||
(drawerForm.objective.questionNumber + 1),
|
||||
top: rect.get("top") + 4,
|
||||
...obj,
|
||||
})
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// 横向
|
||||
for (let index = 0; index < drawerForm.objective.questionNumber; index++) {
|
||||
let textNumber = 0 as any;
|
||||
if (drawerForm.objective.questionBefore % 1 === 0) {
|
||||
textNumber = drawerForm.objective.questionBefore++;
|
||||
} else {
|
||||
let before = drawerForm.objective.questionBefore.toString().split(".")[0] * 1;
|
||||
let after = drawerForm.objective.questionBefore.toString().split(".")[1] * 1;
|
||||
textNumber = `${before}.${after + index}`;
|
||||
}
|
||||
fabricItem.add(
|
||||
new fabric.Text(`${textNumber}`, {
|
||||
left: rect.get("left") + 4,
|
||||
top:
|
||||
rect.get("top") +
|
||||
rectHeight * index +
|
||||
rectHeight / 2 -
|
||||
(drawerForm.objective.questionNumber + 1),
|
||||
...obj,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 清空小矩形
|
||||
const deleteSmallRect = (): void => {
|
||||
const deleteSmallRect = (index?: number): void => {
|
||||
if (currentFabric.value) {
|
||||
const maxRect = currentFabric.value.target
|
||||
.getObjects()
|
||||
|
|
@ -2172,6 +2309,19 @@ const deleteSmallRect = (): void => {
|
|||
item.get("type") === "rect" && item.get("fabricId") !== maxRect.get("fabricId")
|
||||
);
|
||||
currentFabric.value.target.remove(...deleteRectArr);
|
||||
switch (index) {
|
||||
case 3:
|
||||
// 客观题删除题号
|
||||
const allDelText = currentFabric.value.target
|
||||
.getObjects()
|
||||
.filter(
|
||||
(item: any) =>
|
||||
item.get("type") === "text" &&
|
||||
!textFabricList.value.includes(item.get("text"))
|
||||
);
|
||||
currentFabric.value.target.remove(...allDelText);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue