aiwen-cuotiben/src/pages/student/index.vue

<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'
import { useRouter, RouteLocationRaw } from 'vue-router'
import { Grade, Subject } from '~/store/info'
import user from '~/store/user'

const router = useRouter()
function routerPush(_route: RouteLocationRaw) {
  router.push(_route)
}

const tableData = ref([])
const total = ref(0)

const queryForm = reactive({
  dc_grade_id: undefined,
  dc_subject_id: undefined,
  dc_keyword: undefined,
  page: 1
})

watch(queryForm, () => {
  doQuery()
}, { deep: true, immediate: true })

function doQuery() {
  request({
    url: '/dyaw/ctfx/index',
    data: {
      ...queryForm,
      sm_id: user.sm_info.sm_id,
      limit: 8,
      dc_check: '1'
    }
  }).then(res => {
    if (res.code === "1") {
      tableData.value = res.data.page_data
      total.value = parseInt(res.data.total_rows)
    }
  })
}

// TODO: 临时处理
function translateString(str: string) {
  return str
}
</script>

<template>
  <div class="w-1400px h-640px flex flex-col">
    <div class="flex justify-between items-center">
      <div class="flex flex-none space-x-12 text-lg h-50px">
        <div class="cursor-pointer relative mb-22px tab_selected">错题列表</div>
      </div>
      <div class="flex space-x-2">
        <el-select clearable size="large" placeholder="年级" v-model="queryForm.dc_grade_id">
          <el-option v-for="({ grade_id, grade_name }) in Grade" :key="grade_id" :label="grade_name" :value="grade_id" />
        </el-select>
        <el-select clearable size="large" placeholder="科目" v-model="queryForm.dc_subject_id">
          <el-option v-for="({ subject_id, subject_name }) in Subject" :key="subject_id" :label="subject_name"
            :value="subject_id" />
        </el-select>
        <el-input size="large" placeholder="关键字搜索" class="max-w-240px" :suffix-icon="Search"
          v-model="queryForm.dc_keyword"></el-input>
      </div>
    </div>

    <div class="flex-auto flex-col flex mt-4  justify-between">
      <div class="grid grid-cols-2 grid-rows-4 gap-4">
        <div class="cursor-pointer rounded shadow px-4 py-2 h-120px space-y-3" v-for="d in tableData"
          @click="routerPush({ name: 'student_index_detail', params: { id: d.dc_id } })">
          <div class="flex justify-between">
            <div class="text-xl whitespace-nowrap overflow-ellipsis overflow-hidden max-w-420px">{{ d.dc_title }}</div>
            <el-tag>{{ d.dc_keyword }}</el-tag>
          </div>
          <div class="flex space-x-6 text-gray-500">
            <div>{{ d.dc_grade_name }}</div>
            <div>{{ d.dc_subject_name }}</div>
          </div>

          <div class="text-sm text-gray-500 whitespace-nowrap overflow-ellipsis overflow-hidden">{{
            translateString(d.dc_content) }}</div>

        </div>
      </div>
      <div class="flex justify-end">
        <el-pagination background layout="prev, pager, next" :total="total"></el-pagination>
      </div>

    </div>
  </div>
</template>


<style scoped lang="scss">
.tab_selected {
  color: #007DFF;

  &::after {
    content: '-';
    color: transparent;
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -4px;
    height: 15px;
    background: rgba(0, 125, 255, 0.30);
    border-radius: 8px;
  }
}
</style>