|
@@ -2,13 +2,28 @@
|
|
<div class="image-view h-full">
|
|
<div class="image-view h-full">
|
|
<div class="tree-wrap">
|
|
<div class="tree-wrap">
|
|
<div class="top">
|
|
<div class="top">
|
|
- <div class="result-list">科目1;机器1;批次1</div>
|
|
|
|
|
|
+ <div class="result-list">
|
|
|
|
+ {{ curSubject.label }}{{ curDevice.label && ";" }}{{ curDevice.label
|
|
|
|
+ }}{{ curBatch.label && ";" }}{{ curBatch.label }}
|
|
|
|
+ </div>
|
|
<div class="bread">
|
|
<div class="bread">
|
|
- <span :class="{ active: chooseLevel >= 1 }">科目</span>
|
|
|
|
|
|
+ <span
|
|
|
|
+ :class="{ active: chooseLevel >= 1 }"
|
|
|
|
+ @click="toggleListType('level1', 1)"
|
|
|
|
+ >科目</span
|
|
|
|
+ >
|
|
<i>></i>
|
|
<i>></i>
|
|
- <span :class="{ active: chooseLevel >= 2 }">机器</span>
|
|
|
|
|
|
+ <span
|
|
|
|
+ :class="{ active: chooseLevel >= 2 }"
|
|
|
|
+ @click="toggleListType('level2', 2)"
|
|
|
|
+ >机器</span
|
|
|
|
+ >
|
|
<i>></i>
|
|
<i>></i>
|
|
- <span :class="{ active: chooseLevel == 3 }">批次</span>
|
|
|
|
|
|
+ <span
|
|
|
|
+ :class="{ active: chooseLevel >= 3 }"
|
|
|
|
+ @click="toggleListType('level3', 3)"
|
|
|
|
+ >批次</span
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottom">
|
|
@@ -17,8 +32,9 @@
|
|
:key="index"
|
|
:key="index"
|
|
class="list-row"
|
|
class="list-row"
|
|
:class="{ active: activeIndex === index }"
|
|
:class="{ active: activeIndex === index }"
|
|
|
|
+ @click="chooseLeft(item, index)"
|
|
>
|
|
>
|
|
- {{ item.name }}
|
|
|
|
|
|
+ {{ item[fieldNames.label] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -31,27 +47,126 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script name="ImageView" lang="ts" setup>
|
|
<script name="ImageView" lang="ts" setup>
|
|
-import { ref, computed } from "vue";
|
|
|
|
|
|
+import { ref, computed, onMounted, reactive } from "vue";
|
|
|
|
+import { useRequest } from "vue-request";
|
|
|
|
+import { useUserStore } from "@/store";
|
|
|
|
+import {
|
|
|
|
+ batchSubjectList,
|
|
|
|
+ batchDeviceList,
|
|
|
|
+ batchList,
|
|
|
|
+ batchStudentList,
|
|
|
|
+} from "@/ap/scanManage";
|
|
|
|
+
|
|
|
|
+const userStore = useUserStore();
|
|
|
|
+const examId = computed(() => userStore.curExam?.id);
|
|
|
|
+// const { runAsync: run1 } = useRequest(batchSubjectList);
|
|
|
|
+// const { runAsync: run2 } = useRequest(batchDeviceList);
|
|
|
|
+// const { runAsync: run3 } = useRequest(batchList);
|
|
|
|
+// const { runAsync: run4 } = useRequest(batchStudentList);
|
|
|
|
+const _batchSubjectList = () => {
|
|
|
|
+ batchSubjectList({ examId: examId.value }).then((res: any) => {
|
|
|
|
+ leftList.value = res || [];
|
|
|
|
+ listType.value = "level1";
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const _batchDeviceList = () => {
|
|
|
|
+ batchDeviceList({
|
|
|
|
+ examId: examId.value,
|
|
|
|
+ subjectCode: curSubject.value.value,
|
|
|
|
+ }).then((res: any) => {
|
|
|
|
+ leftList.value = res || [];
|
|
|
|
+ listType.value = "level2";
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+const _batchList = () => {
|
|
|
|
+ batchList({
|
|
|
|
+ examId: examId.value,
|
|
|
|
+ subjectCode: curSubject.value.value,
|
|
|
|
+ device: curDevice.value.value,
|
|
|
|
+ }).then((res: any) => {
|
|
|
|
+ leftList.value = res || [];
|
|
|
|
+ listType.value = "level3";
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+const _batchStudentList = () => {
|
|
|
|
+ batchStudentList({ batchId: curSubject.value.value }).then((res: any) => {
|
|
|
|
+ leftList.value = res || [];
|
|
|
|
+ listType.value = "level4";
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+onMounted(() => {
|
|
|
|
+ _batchSubjectList();
|
|
|
|
+});
|
|
|
|
|
|
const arr = ref([{ title: "搜索条件", name: "one", open: true }]);
|
|
const arr = ref([{ title: "搜索条件", name: "one", open: true }]);
|
|
|
|
|
|
-const listType = ref("kemu");
|
|
|
|
|
|
+const listType = ref("level1");
|
|
|
|
+const fieldNames = computed(() => {
|
|
|
|
+ let obj: any = {
|
|
|
|
+ level1: { label: "subjectName", value: "subjectCode" },
|
|
|
|
+ level2: { label: "deviceName", value: "device" },
|
|
|
|
+ level3: { label: "batchId", value: "batchId" },
|
|
|
|
+ level4: { label: "studentName", value: "studentId" },
|
|
|
|
+ };
|
|
|
|
+ return obj[listType.value];
|
|
|
|
+});
|
|
const chooseLevel = computed(() => {
|
|
const chooseLevel = computed(() => {
|
|
- return listType.value === "kemu" ? 1 : listType.value === "jiqi" ? 2 : 3;
|
|
|
|
|
|
+ return listType.value === "level1"
|
|
|
|
+ ? 1
|
|
|
|
+ : listType.value === "level2"
|
|
|
|
+ ? 2
|
|
|
|
+ : listType.value === "level3"
|
|
|
|
+ ? 3
|
|
|
|
+ : 4;
|
|
});
|
|
});
|
|
-const leftList = ref([{ name: "批次1" }, { name: "批次2" }, { name: "批次3" }]);
|
|
|
|
-const activeIndex = ref(0);
|
|
|
|
-const imgList = ref([
|
|
|
|
- {
|
|
|
|
- url: "https://cet-test.markingtool.cn/file/slice/1/2/10101/1/031/1/101011221203102-1.jpg",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- url: "https://cet-test.markingtool.cn/file/slice/1/2/10101/1/031/1/101011221203101-1.jpg",
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- url: "https://cet-test.markingtool.cn/file/slice/1/2/10100/1/035/1/101001221203502-1.jpg",
|
|
|
|
- },
|
|
|
|
-]);
|
|
|
|
|
|
+const leftList = ref<any>([]);
|
|
|
|
+const curSubject = ref({ label: "", value: "" });
|
|
|
|
+const curDevice = ref({ label: "", value: "" });
|
|
|
|
+const curBatch = ref({ label: "", value: "" });
|
|
|
|
+
|
|
|
|
+const chooseLeft = (item: any, index: number) => {
|
|
|
|
+ activeIndex.value = index;
|
|
|
|
+ if (listType.value === "level1") {
|
|
|
|
+ curSubject.value = { value: item.subjectCode, label: item.subjectName };
|
|
|
|
+ _batchDeviceList();
|
|
|
|
+ } else if (listType.value === "level2") {
|
|
|
|
+ curDevice.value = { value: item.device, label: item.deviceName };
|
|
|
|
+ _batchList();
|
|
|
|
+ } else if (listType.value === "level3") {
|
|
|
|
+ curBatch.value = { value: item.batchId, label: item.batchId };
|
|
|
|
+ _batchStudentList();
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+const toggleListType = (type: string, num: number) => {
|
|
|
|
+ if (chooseLevel.value < num) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ const clearObj = { value: "", label: "" };
|
|
|
|
+ if (type === "level1") {
|
|
|
|
+ leftList.value = [];
|
|
|
|
+ curSubject.value = { ...clearObj };
|
|
|
|
+ curDevice.value = { ...clearObj };
|
|
|
|
+ curBatch.value = { ...clearObj };
|
|
|
|
+ _batchSubjectList();
|
|
|
|
+ } else if (type === "level2") {
|
|
|
|
+ curDevice.value = { ...clearObj };
|
|
|
|
+ curBatch.value = { ...clearObj };
|
|
|
|
+ _batchDeviceList();
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+const activeIndex = ref();
|
|
|
|
+// const imgList = ref([
|
|
|
|
+// {
|
|
|
|
+// url: "https://cet-test.markingtool.cn/file/slice/1/2/10101/1/031/1/101011221203102-1.jpg",
|
|
|
|
+// },
|
|
|
|
+// {
|
|
|
|
+// url: "https://cet-test.markingtool.cn/file/slice/1/2/10101/1/031/1/101011221203101-1.jpg",
|
|
|
|
+// },
|
|
|
|
+// {
|
|
|
|
+// url: "https://cet-test.markingtool.cn/file/slice/1/2/10100/1/035/1/101001221203502-1.jpg",
|
|
|
|
+// },
|
|
|
|
+// ]);
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
.image-view {
|
|
.image-view {
|