edit
This commit is contained in:
parent
5420dae4fe
commit
51ade77d9b
|
|
@ -1,27 +1,51 @@
|
|||
<template>
|
||||
<el-dialog v-model="dialogValue" width="500">
|
||||
<div class="create-main">
|
||||
<el-dialog v-model="dialogValue" width="600" :before-close="beforeClose">
|
||||
<div class="file-dialog">
|
||||
<el-form>
|
||||
<el-form-item label="目录">
|
||||
<div class="create-item">第二章 地球上的大气 / 大气的组成和垂直分层</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件">
|
||||
<div class="create-item file-item flex">
|
||||
<!-- <FileUpload /> -->
|
||||
<!-- <el-button round size="small" color="#eeeeee" class="add-btn">
|
||||
<i class="iconfont icon-jiahao"></i>
|
||||
添加文件
|
||||
</el-button> -->
|
||||
<el-upload action="" multiple :before-upload="hanleFileBefore" :auto-upload="true">
|
||||
<el-button slot="trigger">选择文件</el-button>
|
||||
</el-upload>
|
||||
<span class="upload-desc">说明：一次最多上传5个文件，单个文件大小不能大于100M</span>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDialog">Cancel</el-button>
|
||||
<el-button @click="closeDialog">关闭</el-button>
|
||||
<el-button type="primary">
|
||||
Confirm
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -30,6 +54,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
|
|
@ -37,17 +62,78 @@ const props = defineProps({
|
|||
default: false
|
||||
},
|
||||
})
|
||||
|
||||
const dialogValue = ref(false)
|
||||
// 定义要发送的emit事件
|
||||
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) => {
|
||||
dialogValue.value = newVal
|
||||
})
|
||||
|
||||
const beforeClose = (done) => {
|
||||
fileList.value = []
|
||||
emit('update:modelValue', false)
|
||||
done()
|
||||
}
|
||||
|
||||
const closeDialog = () => {
|
||||
fileList.value = []
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
|
|
@ -55,4 +141,53 @@ const closeDialog = () => {
|
|||
|
||||
</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>
|
||||
Loading…
Reference in New Issue