lyc-dev #16
|
@ -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>
|
Loading…
Reference in New Issue