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

<template>
  <view class="p-30 pt-50">
    <view class="w-fit flex gap-x-80">
      <ie-picker ref="pickerRef" v-model="classId" :list="classList" placeholder="选择批次" title="选择批次" icon="arrow-down"
        key-label="name" key-value="classId" @change="handleClassChange"
        :placeholder-style="placeholderStyle"></ie-picker>

      <ie-picker ref="pickerRef" v-model="classId" :list="classList" placeholder="选择班级" title="选择班级" icon="arrow-down"
        key-label="name" key-value="classId" @change="handleClassChange"
        :placeholder-style="placeholderStyle"></ie-picker>
    </view>
    <view class="mt-32 py-38 bg-back border border-solid border-border rounded-10 flex">
      <view class="flex-1 text-center">
        <view class="text-40 text-primary font-bold leading-30">64</view>
        <view class="mt-24 text-28 text-fore-light leading-28">总人数</view>
      </view>
      <view class="flex-1 text-center">
        <view class="text-40 text-[#22C55E] font-bold leading-30">27</view>
        <view class="mt-24 text-28 text-fore-light leading-28">完成</view>
      </view>
      <view class="flex-1 text-center">
        <view class="text-40 text-[#F59E0B] font-bold leading-30">10</view>
        <view class="mt-24 text-28 text-fore-light leading-28">未完成</view>
      </view>
      <view class="flex-1 text-center">
        <view class="text-40 text-[#F59E0B] font-bold leading-30">9</view>
        <view class="mt-24 text-28 text-fore-light leading-28">未发送</view>
      </view>
    </view>
    <view class="mt-70">
      <ie-table :tableColumns="tableColumns" :data="tableData" :cellStyle="cellStyle" @rowClick="handleRowClick">
        <template #name="{ item }: { item: StudentExamRecord }">
          <text class="font-bold">{{ item.name }}</text>
        </template>
        <template #score="{ item }: { item: StudentExamRecord }">
          <text class="font-bold">{{ item.score }}</text>
        </template>
        <template #status="{ item }: { item: StudentExamRecord }">
          <text :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
        </template>
      </ie-table>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { TableColumnConfig } from '@/types';
import { StudentExamRecord, TeachClass } from '@/types/study';
import { CSSProperties } from 'vue';

const props = defineProps({
  examType: {
    type: String,
    default: 'test'
  }
});
const classId = ref<number>(0);
const classList = ref<TeachClass[]>([]);
const pickerRef = ref();
const placeholderStyle = {
  color: '#1A1A1A'
}
const tableColumns: TableColumnConfig[] = [
  {
    prop: 'name',
    label: '姓名',
    flex: 1,
    slot: 'name',
    headerAlign: 'center',
    align: 'center'
  },
  {
    prop: 'score',
    label: '得分',
    flex: 1,
    slot: 'score'
  },
  {
    prop: 'status',
    label: '状态',
    flex: 1,
    slot: 'status'
  }
]
const tableData = ref<StudentExamRecord[]>([
  {
    id: 1,
    name: '张三',
    score: 100,
    status: 1
  },
  {
    id: 2,
    name: '李四',
    score: 90,
    status: 2
  },
  {
    id: 3,
    name: '王五',
    score: 80,
    status: 1
  },
  {
    id: 4,
    name: '赵六',
    score: 70,
    status: 1
  },
  {
    id: 5,
    name: '孙七',
    score: 60,
    status: 2
  },
  {
    id: 6,
    name: '周八',
    score: 50,
    status: 2
  },
  {
    id: 7,
    name: '吴九',
    score: 40,
    status: 1
  }
])
const cellStyle: CSSProperties = {
  padding: '30rpx 20rpx'
}
const handleClassChange = (value: number, selectedItem: TeachClass) => {
  classId.value = value;
}

// 处理表格行点击事件
const handleRowClick = (row: StudentExamRecord) => {
  console.log('点击了行:', row);
  // 这里可以添加跳转到详情页或其他逻辑
}

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap = {
    1: '已完成',
    2: '未完成',
    3: '未发送'
  };
  return statusMap[status as keyof typeof statusMap] || '未知';
}

// 获取状态样式类
const getStatusClass = (status: number) => {
  const classMap = {
    1: 'text-[#22C55E] font-bold',
    2: 'text-[#F59E0B] font-bold',
    3: 'text-[#6B7280] font-bold'
  };
  return classMap[status as keyof typeof classMap] || 'text-gray-500';
}

const loadData = async () => {
  // const res = await getClassHistory();
  // console.log(res);
  uni.$ie.showLoading();
  setTimeout(() => {
    uni.$ie.hideLoading();
  }, 1000);
}
const loadClassList = async () => {
  // const res = await getClassList();
  // console.log(res);
}

watch(() => props.examType, (newVal) => {
  loadData();
}, {
  immediate: true
});
</script>
<style lang="scss" scoped></style>