|
@@ -0,0 +1,204 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="flex direction-column full">
|
|
|
|
+ <mark-header :exclude-operations="['remark', 'problem', 'example', 'delete']" @click="onOperationClick">
|
|
|
|
+ </mark-header>
|
|
|
|
+ <div class="flex flex-1 overflow-hidden p-base mark-container">
|
|
|
|
+ <div
|
|
|
|
+ class="flex flex-1 direction-column radius-base fill-blank mark-content"
|
|
|
|
+ :class="{ 'text-center': center }"
|
|
|
|
+ :style="{ 'background-color': backgroundColor }"
|
|
|
|
+ >
|
|
|
|
+ <span class="preview" @click="onPreview">
|
|
|
|
+ <svg-icon name="preview"></svg-icon>
|
|
|
|
+ </span>
|
|
|
|
+ <right-button class="next-button" @click="checkNext" />
|
|
|
|
+ <div class="flex-1 p-base scroll-auto mark-content-paper">
|
|
|
|
+ <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="p-base radius-base fill-blank scroll-auto m-l-base table-view">
|
|
|
|
+ <div class="flex items-center justify-between detail-info-table-header">
|
|
|
|
+ <el-button custom-1 size="small" class="detail-info-label">
|
|
|
|
+ <span class="">总数:</span>
|
|
|
|
+ <span class="m-l-extra-small detail-info-label-num">{{ pagination.total }}</span>
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-pagination
|
|
|
|
+ v-bind="pagination"
|
|
|
|
+ v-model:current-page="pagination.currentPage"
|
|
|
|
+ size="small"
|
|
|
|
+ class="m-t-unset"
|
|
|
|
+ background
|
|
|
|
+ right
|
|
|
|
+ :hide-on-single-page="false"
|
|
|
|
+ ></el-pagination>
|
|
|
|
+ </div>
|
|
|
|
+ <base-table
|
|
|
|
+ ref="tableRef"
|
|
|
|
+ size="small"
|
|
|
|
+ v-bind="pagination"
|
|
|
|
+ :data="tableData"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ @current-change="onCurrentChange"
|
|
|
|
+ @row-dblclick="onDbClick"
|
|
|
|
+ ></base-table>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <image-preview v-model="previewModalVisible" :url="MockImg"></image-preview>
|
|
|
|
+ <mark-history-list :id="currentViewHistory?.taskId" v-model="visibleHistory" type="secret"></mark-history-list>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup lang="ts" name="MarkingInquiryResult">
|
|
|
|
+/** 自定义查询结果 */
|
|
|
|
+import { reactive, ref, computed } from 'vue'
|
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
|
+import { ElButton, ElPagination } from 'element-plus'
|
|
|
|
+import { useSetImgBg } from '@/hooks/useSetImgBg'
|
|
|
|
+import useFetch from '@/hooks/useFetch'
|
|
|
|
+import useTable from '@/hooks/useTable'
|
|
|
|
+import useTableCheck from '@/hooks/useTableCheck'
|
|
|
|
+import useMarkHeader from '@/hooks/useMarkHeader'
|
|
|
|
+import MarkHeader from '@/components/shared/MarkHeader.vue'
|
|
|
|
+import BaseTable from '@/components/element/BaseTable.vue'
|
|
|
|
+import MarkHistoryList from '@/components/shared/MarkHistoryList.vue'
|
|
|
|
+import RightButton from '@/components/shared/RightButton.vue'
|
|
|
|
+import SvgIcon from '@/components/common/SvgIcon.vue'
|
|
|
|
+import ImagePreview from '@/components/shared/ImagePreview.vue'
|
|
|
|
+
|
|
|
|
+import MockImg from '@/assets/mock/SAMPA-1.jpg'
|
|
|
|
+import type { SetImgBgOption } from '@/hooks/useSetImgBg'
|
|
|
|
+import type { ExtractMultipleApiResponse, ExtractApiParams, ExtractApiResponse } from 'api-type'
|
|
|
|
+import type { MarkHeaderInstance, EpTableColumn } from 'global-type'
|
|
|
|
+
|
|
|
|
+type RowType = ExtractMultipleApiResponse<'getCustomQueryTasks'> & { index: number }
|
|
|
|
+
|
|
|
|
+const { query } = useRoute()
|
|
|
|
+
|
|
|
|
+/** 图片预览 */
|
|
|
|
+const previewModalVisible = ref<boolean>(false)
|
|
|
|
+
|
|
|
|
+const mockTask = ref<{ mainNumber: number }>({
|
|
|
|
+ mainNumber: 1,
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const {
|
|
|
|
+ rotate,
|
|
|
|
+ scale,
|
|
|
|
+ center,
|
|
|
|
+ frontColor,
|
|
|
|
+ backgroundColor,
|
|
|
|
+ onBack,
|
|
|
|
+ onScaleChange,
|
|
|
|
+ onCenter,
|
|
|
|
+ onRotate,
|
|
|
|
+ setBackgroundColor,
|
|
|
|
+ setFrontColor,
|
|
|
|
+ onViewStandard,
|
|
|
|
+} = useMarkHeader()
|
|
|
|
+
|
|
|
|
+const imgOption = computed<SetImgBgOption>(() => {
|
|
|
|
+ return {
|
|
|
|
+ image: MockImg,
|
|
|
|
+ immediate: true,
|
|
|
|
+ rotate: rotate.value,
|
|
|
|
+ scale: scale.value,
|
|
|
|
+ }
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const { drawing, dataUrl } = useSetImgBg(imgOption)
|
|
|
|
+
|
|
|
|
+/** 刷新 */
|
|
|
|
+const onRefresh = () => {
|
|
|
|
+ fetchTable()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/** 预览试卷 */
|
|
|
|
+const onPreview = () => {
|
|
|
|
+ previewModalVisible.value = true
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+type OperationClick = MarkHeaderInstance['onClick']
|
|
|
|
+
|
|
|
|
+type OperationType = Parameters<Exclude<OperationClick, undefined>>[0]['type']
|
|
|
|
+
|
|
|
|
+const operationHandles: Partial<Record<OperationType, (...args: any) => void>> = {
|
|
|
|
+ back: onBack,
|
|
|
|
+ 'scale-change': onScaleChange,
|
|
|
|
+ center: onCenter,
|
|
|
|
+ rotate: onRotate,
|
|
|
|
+ 'front-color': setFrontColor,
|
|
|
|
+ 'background-color': setBackgroundColor,
|
|
|
|
+ refresh: onRefresh,
|
|
|
|
+ standard: onViewStandard,
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const onOperationClick: OperationClick = ({ type, value }) => {
|
|
|
|
+ operationHandles[type]?.(value)
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const columns: EpTableColumn<RowType>[] = [
|
|
|
|
+ { label: '评卷员', prop: 'markerName' },
|
|
|
|
+ { label: '密号', prop: 'secretNumber' },
|
|
|
|
+ { label: '给分', prop: 'markerScore' },
|
|
|
|
+ { label: '客观分', prop: 'objectiveScore' },
|
|
|
|
+ { label: '客主比', prop: 'markerRatio' },
|
|
|
|
+ { label: '评卷时间', prop: 'markTime' },
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+const { pagination, data, fetchTable } = useTable('getCustomQueryTasks', {
|
|
|
|
+ // score: (query.score as string) || '',
|
|
|
|
+ ...query,
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+const {
|
|
|
|
+ tableRef,
|
|
|
|
+ tableData,
|
|
|
|
+ current,
|
|
|
|
+ currentView: currentViewHistory,
|
|
|
|
+ next: checkNext,
|
|
|
|
+ visibleHistory,
|
|
|
|
+ onDbClick,
|
|
|
|
+ onCurrentChange,
|
|
|
|
+} = useTableCheck(data)
|
|
|
|
+
|
|
|
|
+console.log(query)
|
|
|
|
+
|
|
|
|
+const { fetch: getCustomQueryTasks, result: customQueryTasks } = useFetch('getCustomQueryTasks')
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.mark-container {
|
|
|
|
+ .mark-content {
|
|
|
|
+ position: relative;
|
|
|
|
+ .preview {
|
|
|
|
+ position: absolute;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ top: 10px;
|
|
|
|
+ right: 20px;
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ }
|
|
|
|
+ .next-button {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: -20px;
|
|
|
|
+ top: 300px;
|
|
|
|
+ }
|
|
|
|
+ .mark-content-paper {
|
|
|
|
+ img {
|
|
|
|
+ max-width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .table-view {
|
|
|
|
+ width: 580px;
|
|
|
|
+ .detail-info-label {
|
|
|
|
+ .detail-info-label-num {
|
|
|
|
+ width: 32px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ background: #00987b;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|