marking-cet-web/src/modules/admin-data/export/index.vue

<template>
  <div class="flex direction-column full">
    <div class="p-l-base p-t-medium-base fill-blank">
      <base-form ref="formRef" size="small" :rules="rules" :items="items" :model="model" :disabled="loading">
        <template #form-item-operation>
          <el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" custom-1 @click="onExport">导出</el-button>
        </template>
      </base-form>
    </div>
    <div class="flex-1 p-base">
      <div class="p-base radius-base fill-blank">
        <base-table border stripe :columns="columns" :data="data" size="small"></base-table>
        <el-pagination
          v-bind="pagination"
          v-model:current-page="currentPage"
          background
          right
          layout="total,pager"
        ></el-pagination>
      </div>
    </div>
    <base-dialog v-model="modalVisible" title="选择导出文件的格式" destroy-on-close :width="350">
      <el-radio-group v-model="exportFileType" class="ml-4">
        <el-radio label="TXT" size="large">TXT</el-radio>
        <el-radio label="DBF" size="large">DBF</el-radio>
      </el-radio-group>
      <template #footer>
        <div class="flex justify-end">
          <confirm-button @confirm="sureExport" @cancel="cancelExport"></confirm-button>
        </div>
      </template>
    </base-dialog>
  </div>
</template>

<script setup lang="ts" name="DataExport">
/** CET成绩导出 */
import { reactive, watch, computed, ref } from 'vue'
import { ElButton, ElPagination, ElMessage, ElRadio, ElRadioGroup } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useForm from '@/hooks/useForm'
import useTable from '@/hooks/useTable'
import useOptions from '@/hooks/useOptions'
import useFetch from '@/hooks/useFetch'
import BaseDialog from '@/components/element/BaseDialog.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'

import type { ExtractMultipleApiParams } from '@/api/api'
import type { EpFormItem, EpTableColumn, EpFormRules } from 'global-type'

const { subjectList, dataModel, changeModelValue } = useOptions(['subject'])

const model = reactive<ExtractMultipleApiParams<'getCetScoreList'>>({
  subjectCode: dataModel.subject || '',
})
const modalVisible = ref(false)
// const exportFileType = ref('TXT')
const exportFileType = ref('DBF')
const { formRef, elFormRef, defineColumn, _ } = useForm()

watch(dataModel, () => {
  model.subjectCode = dataModel.subject || ''
})

const OneRowSpan5 = defineColumn(_, 'row-1', { span: 5 })

const rules: EpFormRules = {
  subjectCode: [{ required: true, message: '请选择科目' }],
}

const items = computed<EpFormItem[]>(() => {
  return [
    OneRowSpan5({
      label: '科目',
      prop: 'subjectCode',
      slotType: 'select',
      slot: { options: subjectList.value, onChange: changeModelValue('subject') },
    }),
    OneRowSpan5({ slotName: 'operation', labelWidth: '20px' }),
  ]
})

const { pagination, currentPage, loading, data, fetchTable } = useTable('getCetScoreList', model, { pageSize: 20 })

const columns: EpTableColumn[] = [
  { label: '准考证号', prop: 'examNumber', minWidth: 160, fixed: 'left' },
  { label: '科目代码', prop: 'subjectCode', minWidth: 90 },
  { label: '作文分', prop: 'compositionScore', minWidth: 70 },
  { label: '主观分', prop: 'subjectScore', minWidth: 70 },
  { label: '作文评卷员代码', prop: 'compositionMarker', minWidth: 110 },
  { label: '作文题评卷标志', prop: 'compositionTag', minWidth: 110 },
  { label: '翻译题得分', prop: 'translateScore', minWidth: 90 },
  { label: '翻译题评卷员代码', prop: 'translateMarker', minWidth: 120 },
  { label: '翻译题评卷标志', prop: 'translateTag', minWidth: 110 },
  { label: '作文雷同标记', prop: 'compositionSame', minWidth: 90 },
  { label: '翻译雷同标记', prop: 'translateSame', minWidth: 90 },
]

const onSearch = async () => {
  try {
    const valid = await elFormRef?.value?.validate()
    if (valid) {
      fetchTable()
    }
  } catch (error) {
    console.error(error)
  }
}

const { fetch: exportCetScoreList } = useFetch('exportCetScoreList', 'get')

const onExport = async () => {
  try {
    const valid = await elFormRef?.value?.validate()
    if (valid) {
      // modalVisible.value = true
      sureExport()
    }
  } catch (error) {
    console.error(error)
  }
}
const sureExport = async () => {
  try {
    await exportCetScoreList({ ...model, exportFileType: exportFileType.value })
    ElMessage.success('操作成功，后台导出中，您可以稍后去“任务信息报告”页面进行查询')
    modalVisible.value = false
  } catch (err) {}
}
const cancelExport = () => {
  modalVisible.value = false
}
</script>

<style scoped lang="scss"></style>