根据文件名 查找对应图标

This commit is contained in:
lyc 2024-07-15 18:46:31 +08:00
parent 7a862761f9
commit cfe0fd3394
4 changed files with 26 additions and 29 deletions

View File

@ -1,11 +1,11 @@
<template> <template>
<svg class="icon file-icon" aria-hidden="true" :style="{'font-size': size + 'px'}"> <svg class="icon file-icon" aria-hidden="true" :style="{'font-size': size + 'px'}">
<use :xlink:href="getFileTypeIcon"></use> <use :xlink:href="getFileTypeIcon()"></use>
</svg> </svg>
</template> </template>
<script setup> <script setup>
import { watch, defineProps } from 'vue' import { defineProps } from 'vue'
const props = defineProps({ const props = defineProps({
fileName: { fileName: {
@ -17,17 +17,10 @@ const props = defineProps({
default: '30' default: '30'
} }
}) })
console.log(1000)
watch (() => props.fileName, (newVal, oldVal) => {
console.log(newVal,oldVal)
getFileTypeIcon(newVal)
}) const getFileTypeIcon = () => {
const name = props.fileName.substr(props.fileName.lastIndexOf('.') + 1);
const getFileTypeIcon = (fileName) => {
console.log(props.fileName)
const name = fileName.substr(fileName.lastIndexOf('.') + 1);
const iconObj = { const iconObj = {
pdf: 'icon-pdf', pdf: 'icon-pdf',
ppt: 'icon-ppt', ppt: 'icon-ppt',

View File

@ -16,7 +16,7 @@
<div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid"> <div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid">
<div class="file-name"> <div class="file-name">
<span class="name">标题</span> <span class="name">标题</span>
<!-- <FileImage fileName="item.name" /> --> <FileImage :fileName="item.name" />
<span class="text">{{ item.name }}</span> <span class="text">{{ item.name }}</span>
</div> </div>
<div class="flex-type flex"> <div class="flex-type flex">
@ -64,16 +64,18 @@ const fileType = ref(1)
// //
const resourceType = ref([ const resourceType = ref([
{ {
label: '课件', text: '素材',
value: 1 value: '素材'
}, },
{ {
label: '教案', text: '课件',
value: 2 value: '课件'
}, },
{ {
label: '素材', text: '教案',
value: 3 value: '教案'
} }
]) ])
@ -112,7 +114,7 @@ const hanleFileChange = (file) => {
if (file.status === 'ready') { if (file.status === 'ready') {
// fileData // fileData
file.fileData = { file.fileData = {
fileFlag: 1 fileFlag: '课件'
} }
fileList.value.push(file) fileList.value.push(file)
} }

View File

@ -5,9 +5,7 @@
<ul> <ul>
<li class="list-item" v-for="item in sourceStore.result.list" :key="item.id"> <li class="list-item" v-for="item in sourceStore.result.list" :key="item.id">
<div class="item-left flex"> <div class="item-left flex">
<svg class="icon icon-ppt" aria-hidden="true"> <FileImage :fileName="item.fileName" :size="50"/>
<use xlink:href="#icon-ppt"></use>
</svg>
<div class="flex item-left-content"> <div class="flex item-left-content">
<div class="name flex">{{ item.fileName }}</div> <div class="name flex">{{ item.fileName }}</div>
<div class="item-tags flex"> <div class="item-tags flex">
@ -48,18 +46,21 @@
</div> </div>
</li> </li>
</ul> </ul>
<div class="pagination-box">
</el-scrollbar>
<div class="pagination-box">
<el-pagination v-model:current-page="sourceStore.query.pageNum" v-model:page-size="sourceStore.query.pageSize" <el-pagination v-model:current-page="sourceStore.query.pageNum" v-model:page-size="sourceStore.query.pageSize"
hide-on-single-page :page-sizes="[10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper"
:total="sourceStore.result.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> :total="sourceStore.result.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div> </div>
</el-scrollbar>
</div> </div>
</template> </template>
<script setup> <script setup>
import useResoureStore from '../store' import useResoureStore from '../store'
import FileImage from '@/components/file-image/index.vue'
const sourceStore = useResoureStore() const sourceStore = useResoureStore()
@ -98,6 +99,7 @@ const handleCurrentChange = () => { }
.resource-list { .resource-list {
.list-item { .list-item {
flex: 1;
padding: 10px 20px; padding: 10px 20px;
border-bottom: solid #f1f1f1 1px; border-bottom: solid #f1f1f1 1px;
display: flex; display: flex;

View File

@ -15,7 +15,7 @@ const tabs = [
const typeList = [ const typeList = [
{ {
text: '全部', text: '全部',
value: '全部' value: ''
}, },
{ {
text: '素材', text: '素材',
@ -36,7 +36,7 @@ const typeList = [
const formatList = [ const formatList = [
{ {
label: '资源格式', label: '资源格式',
value: '全部' value: ''
}, },
{ {
label: 'word', label: 'word',
@ -75,8 +75,8 @@ export default defineStore('resource', {
//查询条件 //查询条件
query: { query: {
fileSource: '平台', fileSource: '平台',
fileSuffix: '全部', fileSuffix: '',
fileFlag: '全部', fileFlag: '',
fileRoot: '资源', fileRoot: '资源',
orderByColumn: 'uploadTime', orderByColumn: 'uploadTime',
isAsc: 'desc', isAsc: 'desc',