From 4a10d2c7cac924cd4eb9903644140354e6cbfb7b Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 02 七月 2024 15:12:10 +0800
Subject: [PATCH] feat:文件资源

---
 src/views/folder/index.vue              |  117 ++++++++++++++++++++++++++++++++++++++
 /dev/null                               |   31 ----------
 public/static/icons/file_type_pdf.png   |    0 
 public/static/icons/file_type_video.png |    0 
 public/static/icons/file_type_word.png  |    0 
 public/static/icons/file_type_image.png |    0 
 6 files changed, 115 insertions(+), 33 deletions(-)

diff --git a/public/static/icons/file_type_image.png b/public/static/icons/file_type_image.png
new file mode 100644
index 0000000..ef970e4
--- /dev/null
+++ b/public/static/icons/file_type_image.png
Binary files differ
diff --git a/public/static/icons/file_type_pdf.png b/public/static/icons/file_type_pdf.png
new file mode 100644
index 0000000..483d612
--- /dev/null
+++ b/public/static/icons/file_type_pdf.png
Binary files differ
diff --git a/public/static/icons/file_type_video.png b/public/static/icons/file_type_video.png
new file mode 100644
index 0000000..c842088
--- /dev/null
+++ b/public/static/icons/file_type_video.png
Binary files differ
diff --git a/public/static/icons/file_type_word.png b/public/static/icons/file_type_word.png
new file mode 100644
index 0000000..654a25b
--- /dev/null
+++ b/public/static/icons/file_type_word.png
Binary files differ
diff --git a/src/views/folder/data-list/index.vue b/src/views/folder/data-list/index.vue
deleted file mode 100644
index 69ffe26..0000000
--- a/src/views/folder/data-list/index.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="list-container w-full h-full">
-    <el-scrollbar>
-      <el-row>
-        <el-col>
-          <el-card shadow="hover" class="mb-3">
-            <div class="item-content">
-              <div class="item-icon"></div>
-              <div class="item-title"></div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss" scoped>
-.item {
-  width: 100%;
-  min-height: 120px;
-}
-
-.bottom-item {
-  margin-right: 30px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/folder/index.vue b/src/views/folder/index.vue
index 9e6d722..4b8d420 100644
--- a/src/views/folder/index.vue
+++ b/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>
\ No newline at end of file

--
Gitblit v1.8.0