根据文件名 查找对应图标
This commit is contained in:
parent
7a862761f9
commit
cfe0fd3394
|
@ -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',
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in New Issue