|
@@ -101,13 +101,11 @@
|
|
<div
|
|
<div
|
|
:id="'bq-' + question.mainNumber + '-' + question.subNumber"
|
|
:id="'bq-' + question.mainNumber + '-' + question.subNumber"
|
|
class="question tw-rounded tw-p-1 tw-mb-2 tw-cursor-pointer tw-relative"
|
|
class="question tw-rounded tw-p-1 tw-mb-2 tw-cursor-pointer tw-relative"
|
|
- :class="isCurrentQuestion(question) && 'current-question'"
|
|
|
|
- @click="
|
|
|
|
- () => {
|
|
|
|
- chooseQuestion(question);
|
|
|
|
- scrollToQuestion(question);
|
|
|
|
- }
|
|
|
|
- "
|
|
|
|
|
|
+ :class="{
|
|
|
|
+ 'current-question': isCurrentQuestion(question),
|
|
|
|
+ disabled: notInActive(index),
|
|
|
|
+ }"
|
|
|
|
+ @click="willChooseQuestion(question, index)"
|
|
>
|
|
>
|
|
<div class="tw-flex tw-justify-between">
|
|
<div class="tw-flex tw-justify-between">
|
|
<div>
|
|
<div>
|
|
@@ -152,13 +150,23 @@
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
import type { Question } from "@/types";
|
|
import type { Question } from "@/types";
|
|
import { isNumber } from "lodash-es";
|
|
import { isNumber } from "lodash-es";
|
|
-import { onMounted, onUnmounted, watch } from "vue";
|
|
|
|
|
|
+import { onMounted, onUnmounted, watch, computed } from "vue";
|
|
import { store } from "@/store/store";
|
|
import { store } from "@/store/store";
|
|
import { keyMouse } from "./use/keyboardAndMouse";
|
|
import { keyMouse } from "./use/keyboardAndMouse";
|
|
import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
|
|
import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
|
|
import { message } from "ant-design-vue";
|
|
import { message } from "ant-design-vue";
|
|
import { DownOutlined } from "@ant-design/icons-vue";
|
|
import { DownOutlined } from "@ant-design/icons-vue";
|
|
|
|
|
|
|
|
+const props = defineProps<{ arbitrateIndex?: string }>();
|
|
|
|
+const activeIndex = computed(() => {
|
|
|
|
+ return (
|
|
|
|
+ props.arbitrateIndex ? props.arbitrateIndex?.split(",") || [] : []
|
|
|
|
+ ).map((indexStr: string) => Number(indexStr) - 1);
|
|
|
|
+});
|
|
|
|
+const notInActive = (index: number) => {
|
|
|
|
+ return activeIndex.value.length && activeIndex.value.indexOf(index) == -1;
|
|
|
|
+};
|
|
|
|
+
|
|
const emit = defineEmits(["submit", "allZeroSubmit", "unselectiveSubmit"]);
|
|
const emit = defineEmits(["submit", "allZeroSubmit", "unselectiveSubmit"]);
|
|
|
|
|
|
const { toggleKeyMouse } = keyMouse();
|
|
const { toggleKeyMouse } = keyMouse();
|
|
@@ -180,7 +188,13 @@ watch(
|
|
},
|
|
},
|
|
{ immediate: true }
|
|
{ immediate: true }
|
|
);
|
|
);
|
|
-
|
|
|
|
|
|
+const willChooseQuestion = (question, index) => {
|
|
|
|
+ if (notInActive(index)) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ chooseQuestion(question);
|
|
|
|
+ scrollToQuestion(question);
|
|
|
|
+};
|
|
const questionScoreSteps = $computed(() => {
|
|
const questionScoreSteps = $computed(() => {
|
|
const question = store.currentQuestion;
|
|
const question = store.currentQuestion;
|
|
if (!question) return [];
|
|
if (!question) return [];
|
|
@@ -347,7 +361,7 @@ const buttonHeightForSelective = $computed(() =>
|
|
);
|
|
);
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
+<style lang="less" scoped>
|
|
.mark-board-track-container {
|
|
.mark-board-track-container {
|
|
max-width: 290px;
|
|
max-width: 290px;
|
|
min-width: 290px;
|
|
min-width: 290px;
|
|
@@ -376,6 +390,14 @@ const buttonHeightForSelective = $computed(() =>
|
|
min-width: 80px;
|
|
min-width: 80px;
|
|
padding: 10px;
|
|
padding: 10px;
|
|
background-color: var(--app-container-bg-color);
|
|
background-color: var(--app-container-bg-color);
|
|
|
|
+ &.disabled {
|
|
|
|
+ background-color: #f5f5f5 !important;
|
|
|
|
+ // pointer-events: none;
|
|
|
|
+ cursor: not-allowed !important;
|
|
|
|
+ * {
|
|
|
|
+ color: rgba(0, 0, 0, 0.25) !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.current-question {
|
|
.current-question {
|
|
color: white;
|
|
color: white;
|