school-file-portal/src/views/TextBook/index.vue

<template>
  <div class="container">
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>同步教材</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-collapse v-model="activeNames">
      <el-collapse-item title="" name="1" style="position: relative;">
        <template #title>
          <div style="position: absolute;right: 30px;font-size: 16px;">{{ activeNames == '1' ? '收起' : '展开' }}</div>
        </template>
        <el-form label-width="auto" style="padding-left: 20px;">
          <el-form-item v-if="textbook2List && textbook2List.length > 0" label="学段">
            <el-radio-group v-model="radio2" @change="handle2Change">
              <el-radio-button v-for="item in textbook2List" :label="item.catalogName" :value="item.catalogId"
                :key="item.catalogId" />
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="textbook3List && textbook3List.length > 0" label="年级">
            <el-radio-group v-model="radio3" @change="handle3Change">
              <el-radio-button v-for="item in textbook3List" :label="item.catalogName" :value="item.catalogId"
                :key="item.catalogId" />
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="textbook4List && textbook4List.length > 0" label="学科">
            <el-radio-group v-model="radio4" @change="handle4Change">
              <el-radio-button v-for="item in textbook4List" :label="item.catalogName" :value="item.catalogId"
                :key="item.catalogId" />
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="textbook5List && textbook5List.length > 0" label="版本">
            <el-radio-group v-model="radio5" @change="handle5Change">
              <el-radio-button v-for="item in textbook5List" :label="item.catalogName" :value="item.catalogId"
                :key="item.catalogId" />
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="textbook6List && textbook6List.length > 0" label="教材">
            <el-radio-group v-model="radio6" @change="handle6Change">
              <el-radio-button v-for="item in textbook6List" :label="item.catalogName" :value="item.catalogId"
                :key="item.catalogId" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="类型">
            <el-radio-group v-model="queryParams.type">
              <el-radio-button label="全部" value=""></el-radio-button>
              <el-radio-button label="课件" value="1"></el-radio-button>
              <el-radio-button label="精品课堂" value="2"></el-radio-button>
              <el-radio-button label="作业" value="3"></el-radio-button>
              <el-radio-button label="试卷" value="4"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="格式">
            <el-radio-group v-model="queryParams.formatSuffix">
              <el-radio-button label="全部" value=""></el-radio-button>
              <el-radio-button label="PPT" value="1"></el-radio-button>
              <el-radio-button label="WORD" value="2"></el-radio-button>
              <el-radio-button label="PDF" value="3"></el-radio-button>
              <el-radio-button label="图片" value="4"></el-radio-button>
              <el-radio-button label="音频" value="5"></el-radio-button>
              <el-radio-button label="视频" value="6"></el-radio-button>
              <el-radio-button label="其它" value="7"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>


    <el-row :gutter="10" style="margin-top: 10px">
      <el-col :span="6">
        <el-card>
          <template #header>
            <div class="card--left-header">
              <span class="title">目录</span>
            </div>
          </template>

          <el-table @row-click="handleRowClick" :data="textbook7List" row-key="id" border default-expand-all
            :show-header="false">
            <el-table-column prop="label" label="label" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card>
          <div class="card-right-header">
            <!-- 排序组件 -->
            <JzSort v-model="sortResult" :sortData="sortData" />
            <div class="header-search">
              <el-input v-model="queryParams.fileName" style="width: 300px" placeholder="请输入关键词" clearable
                @clear="handleClear" />
              <el-button type="primary" :icon="Search" @click="handleQuery" />
            </div>
          </div>

          <div class="book-grid">
            <el-card v-for="item in tableData" :key="item" @click="goto(item)">
              <div class="book-content">
                <img v-if="item?.fileSuffix.includes('doc')" src="@/assets/images/word.png" alt="" />
                <img v-else-if="item?.fileSuffix.includes('xls')" src="@/assets/images/excel.png" alt="" />
                <img v-else-if="item?.fileSuffix.includes('pdf')" src="@/assets/images/pdf.png" alt="" />
                <img v-else-if="item?.fileSuffix.includes('txt')" src="@/assets/images/txt.png" alt="" />
                <img v-else src="@/assets/images/book.png" alt="" />
              </div>

              <template #footer>
                <div class="book-title">{{ item?.fileName }}</div>
                <div class="book-des">
                  <div class="book-teacher"><span>{{ item?.createBy }}</span>&nbsp;|&nbsp;<span>{{ item?.createDept
                      }}</span></div>
                  <div class="book-view">
                    <span style="margin-right: 5px;">
                      <el-icon>
                        <View />
                      </el-icon>
                    </span>
                    <span>{{ item?.downloadNum }}</span>
                  </div>
                </div>
              </template>
            </el-card>
          </div>
          <pagination v-show="total > 0" :total="total" :page-sizes="[6, 10, 20, 30, 50]"
            v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getTextbookListData" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect, watch } from 'vue';
import { useRouter } from 'vue-router'
import { View, Search } from '@element-plus/icons-vue'
import { getTextbookAPI, getTextbookTreeAPI, getTextbookList } from '@/apis/textbook'
import JzSort from '@/components/JzSort/index.vue'
import pagination from '@/components/Pagination/index.vue';

// 排序初始化数据
const sortData = [
  { label: '上传时间', key: 'createTime' },
  { label: '浏览量', key: 'previewNum' },
  { label: '下载量', key: 'downloadNum' }
];
const sortResult = ref({}); // 排序结果

const router = useRouter()
const queryParams = ref({
  catalogId: undefined,
  fileName: '',
  type: undefined,
  formatSuffix: undefined,
  pageNum: 1,
  pageSize: 6,
  orderByColumn: '',
  isAsc: ''
})
const tableData = ref([])
const total = ref(0)

const activeNames = ref(['1'])

const radio2 = ref()
const radio3 = ref()
const radio4 = ref()
const radio5 = ref()
const radio6 = ref()

// 1主目录，2学段，3年级，4学科，5版本，6教材，7目录
const textbookList = ref([])
const textbook2List = ref([])
const textbook3List = ref([])
const textbook4List = ref([])
const textbook5List = ref([])
const textbook6List = ref([])
const textbook7List = ref([])

const getTextbookData = async () => {
  const res = await getTextbookAPI()
  textbookList.value = res.data
  // 学段
  textbook2List.value = filterListByType(2)
  radio2.value = textbook2List.value[0].catalogId
  // 年级
  textbook3List.value = filterListByParentId(radio2.value)
  radio3.value = textbook3List.value[0].catalogId
  // 学科
  textbook4List.value = filterListByParentId(radio3.value)
  radio4.value = textbook4List.value[0].catalogId
  // 版本
  textbook5List.value = filterListByParentId(radio4.value)
  radio5.value = textbook5List.value[0].catalogId
  // 教材
  textbook6List.value = filterListByParentId(radio5.value)
  radio6.value = textbook6List.value[0].catalogId
  // 目录
  const treeData = await getTextbookTreeAPI({ parentId: radio6.value })
  textbook7List.value = treeData.data
  queryParams.value.catalogId = radio6.value
}

const handle2Change = (val) => {
  radio3.value = null
  textbook4List.value = []
  radio4.value = null
  textbook5List.value = []
  radio5.value = null
  textbook6List.value = []
  radio6.value = null
  textbook7List.value = []
  textbook3List.value = filterListByParentId(val)
  queryParams.value.catalogId = val
}

const handle3Change = (val) => {
  radio4.value = null
  textbook5List.value = []
  radio5.value = null
  textbook6List.value = []
  radio6.value = null
  textbook7List.value = []
  textbook4List.value = filterListByParentId(val)
  queryParams.value.catalogId = val
}

const handle4Change = (val) => {
  radio5.value = null
  textbook6List.value = []
  radio6.value = null
  textbook7List.value = []
  textbook5List.value = filterListByParentId(val)
  queryParams.value.catalogId = val
}

const handle5Change = (val) => {
  radio6.value = null
  textbook7List.value = []
  textbook6List.value = filterListByParentId(val)
  queryParams.value.catalogId = val
}

const handle6Change = async (val) => {
  const res = await getTextbookTreeAPI({ parentId: val })
  textbook7List.value = res.data
  queryParams.value.catalogId = val
}

const filterListByType = (type) => {
  return textbookList.value.filter(item => item.type == type)
}

const filterListByParentId = (parentId) => {
  return textbookList.value.filter(item => item.parentId == parentId)
}

const getTextbookListData = async () => {
  const res = await getTextbookList(queryParams.value)
  tableData.value = res.rows
  total.value = res.total
}

const handleRowClick = (val) => {
  queryParams.value.catalogId = val.id
}

watchEffect(() => {
  queryParams.value.orderByColumn = sortResult.value.key
  queryParams.value.isAsc = sortResult.value.order
})

watch(queryParams, (newVal, oldVal) => {
  getTextbookListData()
}, { deep: true })

const goto = (item) => {
  router.push({ path: 'textBookDetail', query: { id: item.id } })
}

const handleQuery = () => {
  if (!queryParams.value.fileName) {
    ElMessage.error('请输入查询关键字！')
    return
  }
  getTextbookListData()
}

const handleClear = () => {
  queryParams.value.fileName = ''
  getTextbookListData()
}

onMounted(() => {
  getTextbookData()
})
</script>

<style lang="scss" scoped>
.container {
  .bread-container {
    padding: 25px 0;

    :deep(.el-breadcrumb__inner) {
      color: #fff;
      font-size: 16px;
    }

    :deep(.el-breadcrumb__separator) {
      color: #fff;
    }
  }

  .el-collapse {
    margin-top: 20px;
  }

  .card--left-header {
    .title {
      font-size: 20px;
    }
  }

  .card-right-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #919DA3;
  }

  .book-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;

    .book-content {

      img {
        border-radius: 10px;
        width: 100%;
        height: 240px;
      }

    }

    .book-title {
      font-size: 16px;
      font-weight: bold;
    }

    .book-des {
      display: flex;
      justify-content: space-between;
      color: #919DA3;
      padding: 5px 0;
    }
  }

  .book-page {
    margin-top: 20px;
    display: flex;
    justify-content: end
  }
}
</style>