feat:文件资源

ZhangXianQiang

2024-07-02 4a10d2c7cac924cd4eb9903644140354e6cbfb7b

feat:文件资源

 public/static/icons/file_type_image.png

 public/static/icons/file_type_pdf.png

 public/static/icons/file_type_video.png

 public/static/icons/file_type_word.png

 src/views/folder/data-list/index.vue

File was deleted

 src/views/folder/index.vue

@@ -1,11 +1,51 @@
<template>
  <div class="folder-container w-screen h-screen bg-slate-50 flex flex-col items-center">
  <div class="train-container w-screen h-screen bg-slate-50 flex flex-col items-center">
    <NormalHeader class="shrink-0"></NormalHeader>

    <div class="list-container container grow relative">
      <div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4">
        <div class="list-wrapper w-full h-full">
          <el-card class="h-full" :body-style="{ height: '100%' }">
            <div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
              <div class="card-header flex justify-between items-center shrink-0">
                <div class="header-search flex items-center">
                  <el-input v-model="searchText" placeholder="请输入搜索内容" :prefix-icon="Search" />
                  <el-button type="primary" class="ml-4">搜索</el-button>
                </div>
              </div>
          
              <div class="card-main flex-1 my-5 relative">
                <div class="main-content absolute top-0 bottom-0 left-0 right-0">
                  <el-table :data="fileList" height="100%">
                    <el-table-column label="文件名称" align="center">
                      <template #default="scope">
                        <div class="row-info">
                          <div class="icon">
                            <img :src="fileType[scope.row.type].iconPath" class="width-img" />
                          </div>
                          <div class="label">{{ scope.row.name }}</div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" align="center" />
                    <el-table-column prop="subject" label="科目" align="center" />
                    <el-table-column prop="date" label="上传时间" align="center" />
                    <el-table-column>
                      <template #default="scope">
                        <el-button link type="primary" @click.prevent="checkRow(scope.row)">
                          查看
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <div class="card-footer flex justify-center mb-7 shrink-0">
                <el-pagination background layout="prev, pager, next" :total="1000" />
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
@@ -17,10 +57,83 @@
import NormalHeader from '@/components/NormalHeader/index.vue';
import { Search } from '@element-plus/icons-vue';


const fileType = {
  'img': {
    iconPath: '/static/icons/file_type_image.png',
    handle: (item) => {
      console.log(item);
    }
  },
  'video': {
    iconPath: '/static/icons/file_type_video.png',
    handle: (item) => {
      console.log(item);

    }
  },
  'pdf': {
    iconPath: '/static/icons/file_type_image.png',
    handle: (item) => {
      console.log(item);

    }
  },
};

const searchText = ref('');


const fileList = ref([
  {
    id: 1,
    name: '测试测试测试',
    url: '',
    date: '2024-12-12',
    class: 'test',
    subject: '测试',
    type: 'img'
  },
  {
    id: 2,
    name: '测试测试测试',
    url: '',
    date: '2024-12-12',
    class: 'test',
    subject: '测试',
    type: 'video'
  },
  {
    id: 3,
    name: '测试测试测试',
    url: '',
    date: '2024-12-12',
    class: 'test',
    subject: '测试',
    type: 'pdf'
  }
]);

const loading = ref(false);

const checkRow = (item) => {
  fileType[item.type] && fileType[item.type].handle(item);
};

</script>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap:after) {
  display: none;
}

.row-info {
  display: flex;
  align-items: center;

  .icon {
    width: 35px;
    margin-right: 20px;
  }
}
</style>