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 size="small" :items="items" :model="model" :disabled="loading">
        <template #form-item-operation>
          <el-button 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 :columns="columns" :data="data"></base-table>
        <el-pagination
          v-bind="pagination"
          v-model:current-page="currentPage"
          background
          right
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="DataExport">
/** CET成绩导出 */
import { reactive, watch, computed } from 'vue'
import { ElButton, ElPagination } 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 useVW from '@/hooks/useVW'

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

const model = reactive<ExtractMultipleApiParams<'getCetScoreList'>>({
  subjectCode: '',
})

const { defineColumn, _ } = useForm()

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

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

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

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

const requestModel = reactive<ExtractMultipleApiParams<'getCetScoreList'>>({ ...model })

const { pagination, currentPage, loading, data } = useTable('getCetScoreList', requestModel, true, 'post', false)

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

function onSearch() {
  Object.assign(requestModel, model)
}

onOptionInit(onSearch)

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

function onExport() {
  fetch(model)
}
</script>

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