txyx_pc/src/pages/personal/components/Homework/ssys/xszy/index.vue

<script setup>
import { Search as IconSearch } from '@element-plus/icons-vue';
import CheckRow from "~/components/CheckRow/index.vue";
import { getFullUrl, getAvatarUrl } from '~/utils/helper';

const queryForm = reactive({
  // ks_status: 2,
  grade_id: undefined,
  team_id: undefined,
  limit: 10,
  page: 1
})
const keyword = $ref('')
watch(
  queryForm,
  () => {
    queryData()
  }
)

function queryData() {
  request({
    url: '/kzkt/ssyskc/index',
    data: { ...queryForm, keyword }
  }).then(res => {
    if (res.code === '1') {
      data = res.data.page_data
      total = res.data.total_rows * 1
    }
  })
}


let nj = $ref([{ n: '全部', v: undefined }].concat(
  ('幼儿园,一年级,二年级,三年级,四年级,五年级,六年级,初一,初二,初三,高一,高二,高三'.split(',').map(_ => ({ n: _, v: _ })))
))
let fc = $ref()

request({
  url: '/jcxx/grade/index',
  data: {
    limit: 99
  }
}).then(res => {
  if (res.code === '1') {
    nj = [{ n: '全部', v: undefined }].concat(res.data.page_data.map(({ grade_name, grade_id }) => ({ v: grade_id, n: grade_name })))
  }
})



let data = $ref([])
let total = $ref(0)

request({
  url: '/kzkt/ssyskc/index',
  data: { ...queryForm, keyword }
}).then(res => {
  if (res.code === '1') {
    fc = [{ n: '全部', v: undefined }].concat(res.data.table_structure.field.team_id.option)
    data = res.data.page_data
    total = res.data.total_rows * 1
  }
})

const router = useRouter()
function routerTo(name) {
  router.replace({ name })
}

function routerPush(name, payload) {
  router.push({ name, ...payload })
}

</script>

<template>
  <div class="w-full shadow bg-white rounded-md flex items-center px-36 py-4 mb-4">
    <div class="text-lg text-hex-050026">学生作业</div>
    <el-divider direction="vertical" />
    <div class="text-sm">
      <span class="text-hex-949494">作业</span>
      <span class="text-hex-949494"> - 双师一生</span>
      <span> - 学生作业</span>
    </div>
  </div>

  <div class="w-full shadow bg-white rounded-md flex items-center px-4 py-4 flex-col items-stretch">
    <div class="flex items-center justify-between w-full mb-8">
      <div class="border p-1 rounded-md flex text-hex-666 ">
        <div @click="routerTo('personal_homework_ssys_cjzy')" class=" rounded-md py-1 px-2 cursor-pointer ">创建作业</div>
        <div @click="routerTo('personal_homework_ssys_xszy')" class=" rounded-md py-1 px-2 cursor-pointer "
          :class="'text-black bg-hex-E8F3FA font-semibold'">学生作业</div>
      </div>

      <div class="flex">
        <div class="w-500px h-40px ">
          <el-input class="w-500px h-full rounded-md" placeholder="搜索关键字" v-model="keyword">
            <template #suffix>
              <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer"
                @click="queryData()">
                <el-icon size="13" color="#fff">
                  <IconSearch />
                </el-icon>
              </div>
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <div class="mt-4 w-full">
      <check-row v-model="queryForm.grade_id" label="年级" :items="nj"></check-row>
      <!-- <check-row v-model="queryForm.team_id" label="分册" :items="fc"></check-row> -->
    </div>

    <div class="flex flex-wrap justify-between">
      <template v-if="data.length">
        <div class="w-647px h-155px rounded-xl shadow-lg my-7 flex overflow-hidden cursor-pointer" v-for="i in data"
          @click="routerPush('personal_homework_ssys_xszy_list',{params:{pid:i.ks_id}})">
          <div class="w-264px h-full flex-none">
            <img :src="getFullUrl(i.ks_img)" alt="" class="w-full h-full">
          </div>
          <div class="p-2 pr-6 flex-auto flex flex-col">
            <div class="flex justify-between w-full items-center py-1">
              <div class="font-bold">{{ i.ks_name }}</div>
              <!-- <div class="text-hex-949494 text-sm flex justify-between items-center">
                <el-icon :size="14" color="#949494">
                  <icon-view />
                </el-icon>
                <span class="ml-1">{{ i.kss_views }}</span>
              </div> -->
            </div>

            <div class="text-sm text-hex-949494 py-1 line-clamp-2 overflow-ellipsis h-12 ">
              {{ i.ks_brief }}
            </div>

            <div class="text-sm py-1 flex-auto">
              <span>{{ i.grade_name }}</span>
              <span class="mx-2">|</span>
              <span>{{ i.subject_name }}</span>
            </div>

            <div class="flex text-sm justify-between items-center">
              <div class="cursor-pointer flex items-center">
                <el-avatar :size="16" :src="getAvatarUrl(i.user_id)" /><span class="ml-1">{{ i.ks_zjjsxm }}</span>
              </div>
            </div>

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

      <div v-else class="flex justify-center w-full">
        <el-empty description="暂无数据" />
      </div>
    </div>

    <div class="flex justify-end mb-8">
      <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="queryForm.page" />
    </div>
  </div>

</template>