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 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 115 insertions(+), 2 deletions(-)
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