marking-cet-web/src/modules/marking/submit-similar/index.vue

<template>
  <div class="flex p-base full submit-similar">
    <div class="flex-1 full-y p-extra-small fill-blank radius-base scroll-auto view-paper">
      <img :src="current?.url" alt="" />
    </div>
    <div class="flex direction-column full-h m-l-base p-base fill-blank radius-base history-view">
      <div class="flex-1 overflow-hidden">
        <base-table
          ref="tableRef"
          size="small"
          height="100%"
          :data="tableData"
          :columns="columns"
          class="history-table"
          highlight-current-row
          @current-change="onCurrentChange"
        ></base-table>
      </div>

      <div class="flex items-center m-t-base p-l-base">
        <span>雷同卷号：</span>
        <span>{{ query.secretNumber }}</span>
      </div>
      <div class="flex items-center p-l-base m-t-extra-small">
        <span class="checked-secret-number">{{ current?.secretNumber }}</span>
      </div>
      <div class="p-l-base m-t-base">
        <confirm-button class="confirm-buttons" size="small" @confirm="submit" @cancel="onCancel"></confirm-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="SubmitSimilar">
/** 提交雷同卷 */
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElRadio } from 'element-plus'
import useFetch from '@/hooks/useFetch'
import useTableCheck from '@/hooks/useTableCheck'
import BaseTable from '@/components/element/BaseTable.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'

import type { ExtractApiResponse } from '@/api/api'
import type { EpTableColumn } from 'global-type'

const props = defineProps<{
  taskId: number | string
}>()

const { query } = useRoute()
const { back } = useRouter()

const { fetch: getMarkHistory, result: markHistoryList } = useFetch('getMarkHistory')

/** 过滤自己 */
const filterSelfData = computed(() => {
  return (
    markHistoryList?.value?.filter((d) => `${d.taskId}` !== `${props.taskId}`).map((d, index) => ({ ...d, index })) ||
    []
  )
})

const { tableRef, tableData, current, onCurrentChange } = useTableCheck(filterSelfData)

const columns = computed<EpTableColumn<ExtractArrayValue<ExtractApiResponse<'getMarkHistory'>>>[]>(() => [
  {
    label: '选中雷同',
    formatter(row) {
      return (
        <ElRadio modelValue={current.value?.secretNumber} label={row.secretNumber}>
          {' '}
        </ElRadio>
      )
    },
    align: 'center',
  },
  { label: '密号', prop: 'secretNumber', align: 'center' },
  { label: '分数', prop: 'markScore', align: 'center' },
])

/** 提交 */
const submit = async () => {
  try {
    await useFetch('submitSimilarPaper').fetch({ taskId: props.taskId, sameTaskId: 2 })
    back()
  } catch (error) {
    console.error(error)
  }
}

const onCancel = () => {
  back()
}

getMarkHistory()
</script>

<style scoped lang="scss">
.submit-similar {
}

.history-view {
  width: 360px;
  font-size: $MediumFont;
  .checked-secret-number {
    margin-left: 74px;
    display: inline-block;
    padding: 6px 12px;
    border: $OnePixelLine;
    color: #e02020;
    border-radius: 4px;
  }
  .confirm-buttons {
    margin-left: 74px;
    ::v-deep(.el-button) {
      width: 80px;
    }
  }
}
</style>