资源列表添加图标
This commit is contained in:
parent
2680188e60
commit
122d0d0a4c
|
|
@ -1,9 +1,9 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2794390 */
|
||||
src: url('iconfont.woff2?t=1720774148626') format('woff2'),
|
||||
url('iconfont.woff?t=1720774148626') format('woff'),
|
||||
url('iconfont.ttf?t=1720774148626') format('truetype'),
|
||||
url('iconfont.svg?t=1720774148626#iconfont') format('svg');
|
||||
src: url('iconfont.woff2?t=1720953486579') format('woff2'),
|
||||
url('iconfont.woff?t=1720953486579') format('woff'),
|
||||
url('iconfont.ttf?t=1720953486579') format('truetype'),
|
||||
url('iconfont.svg?t=1720953486579#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -14,6 +14,18 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-shanchu:before {
|
||||
content: "\e852";
|
||||
}
|
||||
|
||||
.icon-xiazai:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.icon-bianji:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.icon-yunwenjian-:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,27 @@
|
|||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "8288874",
|
||||
"name": "删除",
|
||||
"font_class": "shanchu",
|
||||
"unicode": "e852",
|
||||
"unicode_decimal": 59474
|
||||
},
|
||||
{
|
||||
"icon_id": "10194319",
|
||||
"name": "下载",
|
||||
"font_class": "xiazai",
|
||||
"unicode": "e65d",
|
||||
"unicode_decimal": 58973
|
||||
},
|
||||
{
|
||||
"icon_id": "11833219",
|
||||
"name": "编辑",
|
||||
"font_class": "bianji",
|
||||
"unicode": "e60a",
|
||||
"unicode_decimal": 58890
|
||||
},
|
||||
{
|
||||
"icon_id": "8494654",
|
||||
"name": "云文件-",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,12 @@
|
|||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="shanchu" unicode="" d="M736.653061-33.959184H287.346939c-45.97551 0-83.591837 37.616327-83.591837 83.591837V540.734694h616.489796v-491.102041c0-45.97551-37.616327-83.591837-83.591837-83.591837zM245.55102 498.938776v-449.306123c0-22.987755 18.808163-41.795918 41.795919-41.795918h449.306122c22.987755 0 41.795918 18.808163 41.795919 41.795918V498.938776H245.55102zM407.510204 101.877551c-11.493878 0-20.897959 9.404082-20.897959 20.897959V384c0 11.493878 9.404082 20.897959 20.897959 20.897959s20.897959-9.404082 20.897959-20.897959v-261.22449c0-11.493878-9.404082-20.897959-20.897959-20.897959zM616.489796 101.877551c-11.493878 0-20.897959 9.404082-20.897959 20.897959V384c0 11.493878 9.404082 20.897959 20.897959 20.897959s20.897959-9.404082 20.897959-20.897959v-261.22449c0-11.493878-9.404082-20.897959-20.897959-20.897959zM846.367347 498.938776H177.632653c-45.97551 0-83.591837 37.616327-83.591837 83.591836v31.346939c0 45.97551 37.616327 83.591837 83.591837 83.591837h668.734694c45.97551 0 83.591837-37.616327 83.591837-83.591837v-31.346939c0-45.97551-37.616327-83.591837-83.591837-83.591836zM177.632653 655.673469c-22.987755 0-41.795918-18.808163-41.795918-41.795918v-31.346939c0-22.987755 18.808163-41.795918 41.795918-41.795918h668.734694c22.987755 0 41.795918 18.808163 41.795918 41.795918v31.346939c0 22.987755-18.808163 41.795918-41.795918 41.795918H177.632653zM650.44898 655.673469h-276.89796c-28.734694 0-52.244898 23.510204-52.244898 52.244898v41.795919c0 28.734694 23.510204 52.244898 52.244898 52.244898h276.89796c28.734694 0 52.244898-23.510204 52.244898-52.244898v-41.795919c0-28.734694-23.510204-52.244898-52.244898-52.244898z m-276.89796 104.489796c-5.746939 0-10.44898-4.702041-10.448979-10.448979v-41.795919c0-5.746939 4.702041-10.44898 10.448979-10.448979h276.89796c5.746939 0 10.44898 4.702041 10.448979 10.448979v41.795919c0 5.746939-4.702041 10.44898-10.448979 10.448979h-276.89796z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="xiazai" unicode="" d="M795.694545 500.363636a289.047273 289.047273 0 0 1-567.38909 0 197.585455 197.585455 0 0 1 18.385454-395.636363h30.952727a23.272727 23.272727 0 0 1 0 46.545454H246.690909a151.272727 151.272727 0 1 0-2.327273 302.545455l23.272728-5.352727 3.025454 25.6a242.269091 242.269091 0 0 0 480.814546 0l4.654545-25.134546 23.272727 4.887273a151.272727 151.272727 0 1 0-2.327272-302.545455h-34.909091a23.272727 23.272727 0 0 1 0-46.545454h35.141818a197.585455 197.585455 0 0 1 18.385454 395.636363zM628.363636 206.196364l-91.927272-93.090909v286.254545a23.272727 23.272727 0 0 1-46.545455 0v-285.090909l-91.927273 93.090909A23.272727 23.272727 0 1 1 365.149091 174.545455l131.490909-131.723637a23.272727 23.272727 0 0 1 33.047273 0L661.178182 174.545455A23.272727 23.272727 0 1 1 628.363636 206.196364z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="bianji" unicode="" d="M800.8-60.7H232.7c-89.3 0-162 72.7-162 162V669.4c0 89.3 72.7 162 162 162h218.5c17.7 0 32-14.3 32-32s-14.3-32-32-32H232.7c-54 0-98-44-98-98v-568.1c0-54 44-98 98-98h568.1c54 0 98 44 98 98V309.4c0 17.7 14.3 32 32 32s32-14.3 32-32v-208.1c0-89.3-72.7-162-162-162zM525 226.6c-8.2 0-16.4 3.1-22.6 9.4L368 370.4c-12.5 12.5-12.5 32.8 0 45.3L756.2 803.8c8.7 8.7 33 29 69.9 29 26.5 0 51.4-10.3 70-29l39.8-39.8c38.6-38.6 38.6-101.3 0-139.9L547.6 236c-6.2-6.3-14.4-9.4-22.6-9.4zM435.9 393l89.1-89.1 365.6 365.6c13.6 13.6 13.6 35.7 0 49.3l-39.8 39.8-0.1 0.1c-6.5 6.5-15.2 10.1-24.6 10.1-13.4 0-22.3-7.8-24.7-10.2L435.9 393zM350.8 186.8c-8.4 0-16.5 3.3-22.6 9.4-8.1 8.1-11.2 19.9-8.3 30.9L366.2 400c3 11 11.6 19.7 22.6 22.6 11 3 22.8-0.2 30.9-8.3l126.6-126.6c8.1-8.1 11.2-19.9 8.3-30.9-3-11-11.6-19.7-22.6-22.6l-172.9-46.3c-2.8-0.7-5.5-1.1-8.3-1.1z m62.9 143.1L396 264l65.8 17.6-48.1 48.3zM848 580c-8.3 0-16.6 3.2-22.8 9.6L707 709.9c-12.4 12.6-12.2 32.9 0.4 45.3 12.6 12.4 32.9 12.2 45.3-0.4l118.2-120.3c12.4-12.6 12.2-32.9-0.4-45.3-6.3-6.1-14.4-9.2-22.5-9.2z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="yunwenjian-" unicode="" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM681.984 429.056c-6.656 40.448-36.352 98.304-78.336 124.416-47.104 29.696-125.952 39.424-130.048 38.912 20.992 43.52 81.408 57.856 130.048 57.856 69.12 0 124.416-60.416 124.416-134.656 0-6.656-1.024-13.312-1.536-18.944 9.216 2.56 18.944 4.608 29.696 4.608 69.12 0 124.416-60.416 124.416-134.656 0-40.96-40.448-69.12-68.096-93.696-6.656 87.04-56.832 144.384-130.56 156.16zM670.72 381.952c-18.944 89.088-100.864 158.208-201.728 158.208-78.848 0-146.944-41.984-179.2-105.984-84.48-10.24-146.944-76.8-146.944-158.208 0-87.04 73.216-158.208 163.328-158.208h353.28c76.288 0 135.68 57.856 135.68 132.096 0.512 68.608-56.32 126.464-124.416 132.096zM415.232 226.816c4.608-4.608 9.216-9.216 18.432-9.216 4.608 0 9.216 0 13.824 4.608l123.392 104.96c9.216 13.824 13.824 27.136 4.608 36.352-9.216 9.216-23.04 9.216-31.744 4.608l-109.568-91.136L373.76 345.088c-9.216 9.216-23.04 9.216-31.744 0-9.216-9.216-9.216-23.04 0-31.744l73.216-86.528z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="avi" unicode="" d="M832.2 768.1v-766H192.7v766h639.5m0 64H192.7c-35.3 0-64-28.7-64-64v-766c0-35.3 28.7-64 64-64h639.5c35.3 0 64 28.7 64 64v766c0 35.4-28.7 64-64 64zM287 781.3h32v-813.7h-32zM189.995 668.237v32h97.9v-32zM189.999 568.84v32h97.9v-32zM190.002 469.443v32h97.9v-32zM190.005 370.047v32h97.9v-32zM190.008 270.65v32h97.9v-32zM190.015 71.856v32h97.9v-32zM190.011 171.253v32h97.9v-32zM734.02 668.213v32h97.9v-32zM734.023 568.816v32h97.9v-32zM734.026 469.42v32h97.9v-32zM734.03 370.022v32h97.9v-32zM734.033 270.626v32h97.9v-32zM733.039 71.832v32h97.9v-32zM734.036 171.229v32h97.9v-32zM703.8 789.1h32v-813.7h-32zM581.1 353.2l-86.3-68.1c-23.3-18.3-57.4-1.8-57.4 27.8V465.2c0 29.6 34.2 46.2 57.4 27.8l86.3-68.1c23.2-18.2 23.2-53.4 0-71.7zM896.2-62.3H563.8v176c0 35.3 28.7 64 64 64h268.4c35.3 0 64-28.7 64-64v-112c0-35.4-28.7-64-64-64zM694.9 125l54.6-142.8h-25l-13 35.8h-59.8l-13-35.8h-25L668.3 125h26.6z m9.6-87.8l-22.4 62.6h-0.8l-22.6-62.6h45.8zM751.9 125l39.2-116.4h0.6L830.9 125h25.4l-50.8-142.8h-28.2L726.5 125h25.4zM894.7 125v-142.8h-23.4V125h23.4z" horiz-adv-x="1024" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-dialog v-model="dialogValue" width="600" :before-close="beforeClose">
|
||||
<el-dialog v-model="dialogValue" width="630" :before-close="beforeClose">
|
||||
<div class="file-dialog">
|
||||
<el-form>
|
||||
<el-form-item label="文件">
|
||||
|
|
@ -15,11 +15,14 @@
|
|||
<div class="file-list-item flex" v-for="(item, index) in fileList" :key="item.uid">
|
||||
<div class="file-name">
|
||||
<span class="name">标题：</span>
|
||||
<span>{{ item.name }}</span>
|
||||
<svg class="icon icon-ppt" aria-hidden="true">
|
||||
<use :xlink:href="getFileTypeIcon(item.name)"></use>
|
||||
</svg>
|
||||
<span class="text">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="flex-type flex">
|
||||
<span class="name">类别：</span>
|
||||
<el-select v-model="fileType" placeholder="Select" style="width: 100px">
|
||||
<el-select v-model="item.fileType" placeholder="Select" style="width: 100px">
|
||||
<el-option v-for="item in resourceType" :key="item.alue" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
|
|
@ -33,7 +36,7 @@
|
|||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDialog">关闭</el-button>
|
||||
<el-button type="primary">
|
||||
<el-button type="primary" @click="submitFile">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -53,7 +56,7 @@ const props = defineProps({
|
|||
})
|
||||
const dialogValue = ref(false)
|
||||
// 定义要发送的emit事件
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const emit = defineEmits(['update:modelValue', 'submitFile'])
|
||||
// 文件列表
|
||||
const fileList = ref([])
|
||||
|
||||
|
|
@ -75,7 +78,9 @@ const resourceType = ref([
|
|||
])
|
||||
|
||||
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
dialogValue.value = newVal
|
||||
})
|
||||
const hanleFileBefore = (rawFile) => {
|
||||
|
||||
// 音频 类型
|
||||
|
|
@ -100,31 +105,46 @@ const hanleFileBefore = (rawFile) => {
|
|||
ElMessage.error('文件大小错误! 请上传小于100M的文件!')
|
||||
return false
|
||||
}
|
||||
console.log(rawFile)
|
||||
rawFile.fileType = 1
|
||||
fileList.value.push(rawFile)
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const getFileTypeIcon = (fileName)=>{
|
||||
const name = fileName.substr(fileName.lastIndexOf('.') + 1);
|
||||
console.log(name)
|
||||
const iconObj = {
|
||||
pdf: 'icon-pdf',
|
||||
ppt: 'icon-ppt',
|
||||
doc: 'icon-word',
|
||||
docx: 'icon-word',
|
||||
mp4: 'icon-video'
|
||||
}
|
||||
return '#' + iconObj[name]
|
||||
}
|
||||
|
||||
// 删除
|
||||
const delFile = (index) => {
|
||||
fileList.value.splice(index, 1)
|
||||
}
|
||||
|
||||
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
dialogValue.value = newVal
|
||||
})
|
||||
|
||||
// 关闭弹窗前
|
||||
const beforeClose = (done) => {
|
||||
fileList.value = []
|
||||
emit('update:modelValue', false)
|
||||
done()
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
fileList.value = []
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
// 确定
|
||||
const submitFile = () => {
|
||||
emit('submitFile', fileList.value)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -151,12 +171,16 @@ const closeDialog = () => {
|
|||
.file-list-item {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: 15px;
|
||||
.file-name {
|
||||
width: 50%;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
.icon{
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.flex-type {
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
|
@ -166,9 +190,8 @@ const closeDialog = () => {
|
|||
|
||||
|
||||
.name {
|
||||
|
||||
position: relative;
|
||||
|
||||
flex-shrink: 0;
|
||||
&::after {
|
||||
content: '*';
|
||||
position: absolute;
|
||||
|
|
@ -178,6 +201,13 @@ const closeDialog = () => {
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,12 @@
|
|||
<el-scrollbar height="400px">
|
||||
<ul>
|
||||
<li class="list-item">
|
||||
|
||||
<div class="item-left flex">
|
||||
<svg class="icon icon-ppt" aria-hidden="true">
|
||||
<use xlink:href="#icon-ppt"></use>
|
||||
</svg>
|
||||
<div class="flex item-left-content">
|
||||
<div class="name flex">第1课《春》课后巩固练习 2022-2023学年部编版语文七年级上册</div>
|
||||
<div class="item-tags flex">
|
||||
<el-tag type="info" class="mr-10">教案</el-tag>
|
||||
|
|
@ -13,15 +18,26 @@
|
|||
<span class="gray-text mr-10">下载3次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-btns" @click.stop>
|
||||
<el-popover placement="bottom-start" trigger="click" popper-class="customPopper">
|
||||
<el-popover placement="bottom-end" trigger="click" popper-class="custom-popover">
|
||||
<template #reference>
|
||||
<el-button link type="primary"> <i class="iconfont icon-shenglvehao"></i></el-button>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="item-popover">
|
||||
<div>预览</div>
|
||||
<div>编辑</div>
|
||||
<div class="item-popover-item">
|
||||
<i class="iconfont icon-bianji"></i>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="item-popover-item">
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
<div class="item-popover-item">
|
||||
<i class="iconfont icon-xiazai"></i>
|
||||
<span>下载</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
|
|
@ -34,8 +50,8 @@
|
|||
</ul>
|
||||
<div class="pagination-box">
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
||||
:page-sizes="[100, 200, 300, 400]" background size="small" layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
:page-sizes="[100, 200, 300, 400]" background layout="total, sizes, prev, pager, next, jumper" :total="400"
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
|
@ -44,7 +60,6 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const drawer = ref(false)
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(100)
|
||||
|
||||
|
|
@ -54,7 +69,32 @@ const handleCurrentChange = () => { }
|
|||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-popover {
|
||||
width: 80px !important;
|
||||
min-width: 80px !important;
|
||||
padding: 5px !important;
|
||||
|
||||
.item-popover-item {
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
.iconfont {
|
||||
margin-right: 5px;
|
||||
color: #a2a2a2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
::v-deep(.el-popover) {
|
||||
min-width: 50px;
|
||||
width: 50px !important;
|
||||
}
|
||||
|
||||
.resource-list {
|
||||
.list-item {
|
||||
padding: 10px 20px;
|
||||
|
|
@ -65,7 +105,16 @@ const handleCurrentChange = () => { }
|
|||
cursor: pointer;
|
||||
|
||||
.item-left {
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.item-left-content {
|
||||
margin-left: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
|
|
@ -123,6 +172,7 @@ const handleCurrentChange = () => { }
|
|||
margin-right: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -133,8 +183,4 @@ const handleCurrentChange = () => { }
|
|||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.customPopper {
|
||||
min-width: 50px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -30,14 +30,16 @@
|
|||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<uploadDialog v-model="isDialogOpen"/>
|
||||
<uploadDialog v-model="isDialogOpen" @submitFile="submitFile"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, toRaw } from 'vue'
|
||||
import useResoureStore from '../store'
|
||||
import uploadDialog from '@/components/upload-dialog/index.vue'
|
||||
import uploaderState from '@/store/modules/uploader'
|
||||
|
||||
|
||||
const sourceStore = useResoureStore()
|
||||
const isDialogOpen = ref(false)
|
||||
|
|
@ -46,6 +48,10 @@ const openDialog = ()=>{
|
|||
isDialogOpen.value = true
|
||||
}
|
||||
|
||||
const submitFile = (fileList)=>{
|
||||
console.log(toRaw(fileList))
|
||||
uploaderState().pushFile(toRaw(fileList))
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.resoure-search {
|
||||
|
|
|
|||
Loading…
Reference in New Issue