ieplus-app/src/pagesStudy/pages/study-history/components/exam-history-paperwork.vue

<template>
  <view>
    <view class="w-full flex mb-30 justify-between">
      <view class="max-w-180">
        <ie-picker ref="pickerRef" v-model="queryForm.buildType" :list="buildTypeList" placeholder="类型" title="类型"
          icon="arrow-down" key-label="name" key-value="value" :fontSize="28"
          :placeholder-style="placeholderStyle"></ie-picker>
      </view>
      <view class="max-w-180">
        <ie-picker ref="pickerRef" v-model="queryForm.batchId" :list="batchList" placeholder="批次" title="批次"
          icon="arrow-down" key-label="name" key-value="batchId" :fontSize="28"
          :placeholder-style="placeholderStyle"></ie-picker>
      </view>
      <view class="max-w-180">
        <ie-picker ref="pickerRef" v-model="queryForm.classId" :list="classList" placeholder="班级" title="班级"
          icon="arrow-down" key-label="name" key-value="classId" :fontSize="28"
          :placeholder-style="placeholderStyle"></ie-picker>
      </view>
      <view class="max-w-180">
        <ie-picker ref="pickerRef" v-model="queryForm.subjectId" :list="subjectList" placeholder="科目" title="科目"
          icon="arrow-down" key-label="subjectName" key-value="subjectId" :fontSize="28"
          :placeholder-style="placeholderStyle"></ie-picker>
      </view>
    </view>
    <ie-table :tableColumns="tableColumns" :data="tableData" :cellStyle="cellStyle">
      <template #name="{ item }">
        <text class="font-bold">{{ getStatusText(item.buildStatus) }}</text>
      </template>
      <template #total="{ item }">
        <text class="font-bold">{{ item.count || 0 }}</text>
      </template>
      <template #status="{ item }">
        <text class="text-30 text-primary font-bold" @click="handleRowClick(item)">查看</text>
      </template>
    </ie-table>
  </view>
  <ie-popup :title="popupTitle" ref="popupRef" mode="bottom" :showToolbar="false">
    <view class="p-30 relative">
      <view class="text-center text-30 font-bold">{{ popupTitle }}</view>
      <uv-icon name="close" size="18" color="#333" class="absolute top-34 right-20" @click="popupRef.close()" />
    </view>
    <view class="h-[400px]">
      <scroll-view scroll-y class="h-full">
        <view class="px-20 py-4">
          <ie-table :tableColumns="tableColumns2" :data="tableData2" :cellStyle="cellStyle" @rowClick="handleRowClick">
            <template #status="{ item }">
              <text class="text-30 text-primary font-bold" @click="handleRowClick(item)">查看</text>
            </template>
          </ie-table>
        </view>
      </scroll-view>
    </view>
  </ie-popup>
</template>
<script lang="ts" setup>
import { Study, TableColumnConfig } from '@/types';
import { CSSProperties } from 'vue';
import { getBatchList, getTeachClassList, getTeacherSubjectList, getTeacherTestRecord, getTeacherTestRecordDetail, getTeacherTestRecordCondition } from '@/api/modules/study';
import { EnumPaperBuildType, EnumPaperWorkState } from '@/common/enum';

const cellStyle: CSSProperties = {
  padding: '30rpx 20rpx'
}
const queryForm = ref<Partial<Study.PaperWorkRecordQuery>>({});
const buildTypeList = ref([
  {
    name: '定向智能',
    value: EnumPaperBuildType.EXACT_INTELLIGENT
  },
  {
    name: '全量智能',
    value: EnumPaperBuildType.FULL_INTELLIGENT
  },
  {
    name: '定向手动',
    value: EnumPaperBuildType.EXACT_HAND
  },
  {
    name: '全量手动',
    value: EnumPaperBuildType.FULL_HAND
  }
]);
const buildStatusList = ref([
  {
    name: '未定向未组卷',
    value: 10
  },
  {
    name: '未组卷',
    value: 20
  },
  {
    name: '组卷未完成',
    value: 30
  },
  {
    name: '组卷已完成',
    value: 40
  }
]);
const popupTitle = ref('');
const classList = ref<Study.TeachClass[]>([]);
const batchList = ref<Study.Batch[]>([]);
const subjectList = ref<Study.Subject[]>([]);
const pickerRef = ref();
const placeholderStyle = {
  color: '#1A1A1A'
}
const tableData = ref<Study.PaperWorkRecord[]>([]);
const tableColumns: TableColumnConfig[] = [
  {
    prop: 'name',
    label: '状态',
    flex: 1,
    slot: 'name',
    headerAlign: 'center',
    align: 'center'
  },
  {
    prop: 'total',
    label: '人数',
    flex: 1,
    slot: 'total'
  },
  {
    prop: 'status',
    label: '操作',
    flex: 1,
    slot: 'status'
  }
];
const tableColumns2: TableColumnConfig[] = [
  {
    prop: 'className',
    label: '班级',
    flex: 1,
    headerAlign: 'center',
    align: 'center'
  },
  {
    prop: 'nickName',
    label: '姓名',
    flex: 1
  },
  {
    prop: 'state',
    label: '状态',
    flex: 1,
    headerAlign: 'right',
    align: 'right',
  }
];
const tableData2 = ref<Study.PaperWorkRecordDetail[]>([]);

const getStatusText = (status: number | null) => {
  if (!status) {
    return '总人数';
  }
  const statusMap = {
    10: '未定向未组卷',
    20: '未组卷',
    30: '组卷未完成',
    40: '组卷已完成'
  }
  return statusMap[status as keyof typeof statusMap];
}

const popupRef = ref();
const handleRowClick = async (row: Study.PaperWorkRecord) => {
  if (!row.count) {
    uni.$ie.showToast('暂无数据');
    return;
  }
  uni.$ie.showLoading();
  try {
    const params = {
      ...queryForm.value
    } as Study.PaperWorkRecordQuery;
    if (row.buildStatus !== null) {
      params.buildStatus = row.buildStatus;
    } else {
      delete (params as any).buildStatus;
    }
    await getTeacherTestRecordDetail(params).then(res => {
      tableData2.value = res.data;
    });
  } finally {
    uni.$ie.hideLoading();
  }
  popupTitle.value = getStatusText(row.buildStatus);
  popupRef.value.open();
}

const loadData = async () => {
  const queryBatch = getBatchList({}).then(res => {
    batchList.value = res.data;
  });
  const queryClass = getTeachClassList({}).then(res => {
    classList.value = res.data;
  });
  const querySubject = getTeacherSubjectList({}).then(res => {
    subjectList.value = res.data;
  });
  await Promise.all([queryBatch, queryClass, querySubject]);
  const queryCondition = getTeacherTestRecordCondition({}).then(res => {
    const { buildType, buildStatus, batchId, classId, subjectId } = res.data;
    queryForm.value = {
      buildType: buildType || buildTypeList.value[0].value,
      buildStatus: buildStatus || buildStatusList.value[0].value,
      batchId: batchId || batchList.value[0].batchId,
      classId: classId || classList.value[0].classId,
      subjectId: subjectId || subjectList.value[0].subjectId,
    };
  });
  await Promise.all([queryCondition]);
}

const loadTestRecord = () => {
  const params = {} as Study.PaperWorkRecordQuery;
  const { buildType, buildStatus, batchId, classId, subjectId } = queryForm.value;
  if (buildType !== undefined && buildType !== null) {
    params.buildType = buildType;
  }
  if (batchId !== undefined && batchId !== null) {
    params.batchId = batchId;
  }
  if (classId !== undefined && classId !== null) {
    params.classId = classId;
  }
  if (subjectId !== undefined && subjectId !== null) {
    params.subjectId = subjectId;
  }
  uni.$ie.showLoading();
  getTeacherTestRecord(params).then(res => {
    tableData.value = res.data;
  }).finally(() => {
    uni.$ie.hideLoading();
  });
}

watch(() => queryForm.value, () => {
  loadTestRecord();
}, {
  deep: true,
  immediate: false
});

onMounted(() => {
  loadData();
});
</script>
<style lang="scss" scoped></style>