lyc-dev #16

Merged
lyc merged 3 commits from lyc-dev into main 2024-07-12 17:57:09 +08:00
1 changed files with 150 additions and 15 deletions
Showing only changes of commit 51ade77d9b - Show all commits

View File

@ -1,27 +1,51 @@
<template> <template>
<el-dialog v-model="dialogValue" width="500"> <el-dialog v-model="dialogValue" width="600" :before-close="beforeClose">
<div class="create-main"> <div class="file-dialog">
<el-form> <el-form>
<el-form-item label="目录">
<div class="create-item">第二章 地球上的大气 / 大气的组成和垂直分层</div>
</el-form-item>
<el-form-item label="文件"> <el-form-item label="文件">
<div class="create-item file-item flex"> <div class="create-item file-item flex">
<!-- <FileUpload /> --> <el-upload action="" multiple :before-upload="hanleFileBefore" :auto-upload="true">
<!-- <el-button round size="small" color="#eeeeee" class="add-btn"> <el-button slot="trigger">选择文件</el-button>
<i class="iconfont icon-jiahao"></i> </el-upload>
添加文件
</el-button> -->
<span class="upload-desc">说明一次最多上传5个文件单个文件大小不能大于100M</span> <span class="upload-desc">说明一次最多上传5个文件单个文件大小不能大于100M</span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item>
<div class="file-list">
<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>
</div>
<div class="flex-type flex">
<span class="name">类别</span>
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List
<!-- <el-icon class="el-icon--right">
</el-icon> -->
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in resourceType" :key="item in value">Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-button type="primary" link @click="delFile(index)">删除</el-button>
</div>
</div>
</el-form-item>
</el-form> </el-form>
</div> </div>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="closeDialog">Cancel</el-button> <el-button @click="closeDialog">关闭</el-button>
<el-button type="primary"> <el-button type="primary">
Confirm 确定
</el-button> </el-button>
</div> </div>
</template> </template>
@ -30,6 +54,7 @@
<script setup> <script setup>
import { ref, defineProps, defineEmits, watch } from 'vue' import { ref, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@ -37,17 +62,78 @@ const props = defineProps({
default: false default: false
}, },
}) })
const dialogValue = ref(false)
// emit // emit
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const dialogValue = ref(false) //
const fileList = ref([])
//
const resourceType = ref([
{
label: '课件',
value: 1
},
{
label: '教案',
value: 2
},
{
label: '素材',
value: 3
}
])
const hanleFileBefore = (rawFile) => {
//
const audioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/aac']
//
const videoTypes = ['video/mp4', 'video/webm', 'video/ogg']
// word
const wordTypes = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
// ppt
const pptTypes = ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']
// pdf
const pdfTypes = ['application/pdf']
const fileType = rawFile.type
if (!(audioTypes.includes(fileType) || videoTypes.includes(fileType) || wordTypes.includes(fileType) || pptTypes.includes(fileType) || pdfTypes.includes(fileType))) {
ElMessage.error('文件格式错误! 请上传音频、视频、word、ppt、pdf文件!')
return false
}
//
const fileSize = rawFile.size / 1024 / 1024 > 100
if (fileSize) {
ElMessage.error('文件大小错误! 请上传小于100M的文件!')
return false
}
console.log(rawFile)
fileList.value.push(rawFile)
return false
}
const delFile = (index) => {
fileList.value.splice(index, 1)
}
watch(() => props.modelValue, (newVal) => { watch(() => props.modelValue, (newVal) => {
dialogValue.value = newVal dialogValue.value = newVal
}) })
const beforeClose = (done) => {
fileList.value = []
emit('update:modelValue', false)
done()
}
const closeDialog = () => { const closeDialog = () => {
fileList.value = []
emit('update:modelValue', false) emit('update:modelValue', false)
} }
@ -55,4 +141,53 @@ const closeDialog = () => {
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.file-dialog {
padding: 10px;
.file-item {
flex-direction: column;
align-items: flex-start;
.upload-desc {
font-size: 12px;
color: #9e9e9e;
}
}
.file-list {
width: 100%;
.file-list-item {
width: 100%;
justify-content: space-between;
.file-name {
margin-right: 20px;
display: flex;
}
.flex-type {
align-items: center;
margin-right: 20px;
}
}
.name {
position: relative;
&::after {
content: '*';
position: absolute;
top: 0;
left: -8px;
color: red;
font-size: 18px;
}
}
}
}
</style>