|
|
@@ -21,18 +21,23 @@
|
|
|
<el-divider />
|
|
|
<div class="upload-tip">{{ uploadTip }}</div>
|
|
|
<ul slot="file-list" class="file-list">
|
|
|
- <li v-for="(file, i) in file_list" :key="i">
|
|
|
+ <li v-for="(file, i) in content.file_list" :key="i">
|
|
|
<div class="file-name">
|
|
|
<span>
|
|
|
<SvgIcon :icon-class="iconClass" size="12" />
|
|
|
<span>{{ file.file_name ?? file.name }}</span>
|
|
|
<!-- <span>({{ file.size }})</span> -->
|
|
|
</span>
|
|
|
- <span v-show="file.progress > 0"> {{ file.progress }}% </span>
|
|
|
- <span v-show="file.file_id"> 完成 </span>
|
|
|
+ <span v-if="file.progress > 0 && file.progress < 100"> {{ file.progress }}% </span>
|
|
|
+ <span v-else-if="file.progress === 100 || file.file_id"> 完成 </span>
|
|
|
</div>
|
|
|
<SvgIcon icon-class="delete-black" size="12" @click="removeFile(file, i)" />
|
|
|
- <SvgIcon v-show="moduleData.type == 'picture'" icon-class="mark" size="12" @click="viewDialog(file)" />
|
|
|
+ <SvgIcon
|
|
|
+ v-show="content.type === 'picture' && (file.progress === 100 || file.file_id)"
|
|
|
+ icon-class="mark"
|
|
|
+ size="12"
|
|
|
+ @click="viewDialog(file.file_id)"
|
|
|
+ />
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
@@ -44,7 +49,6 @@
|
|
|
import { fileUpload } from '@/api/app';
|
|
|
import { conversionSize } from '@/utils/common';
|
|
|
import FillDescribe from '../../common/FillDescribe';
|
|
|
-import { GetCoursewareComponentContent_View } from '@/api/book';
|
|
|
|
|
|
export default {
|
|
|
name: 'UploadFile',
|
|
|
@@ -91,35 +95,29 @@ export default {
|
|
|
return {
|
|
|
curFile: null,
|
|
|
conversionSize,
|
|
|
- file_id_list: [],
|
|
|
- file_list: [],
|
|
|
visible: false,
|
|
|
+ content: {},
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
- watch: {},
|
|
|
- created() {
|
|
|
- this.getCoursewareComponentContent_View();
|
|
|
+ watch: {
|
|
|
+ moduleData: {
|
|
|
+ handler(val) {
|
|
|
+ this.content = val;
|
|
|
+ this.$emit('saveDate', this.content);
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
- // 获取数据
|
|
|
- getCoursewareComponentContent_View() {
|
|
|
- GetCoursewareComponentContent_View({ courseware_id: this.coursewareId, component_id: this.componentId }).then(
|
|
|
- ({ content }) => {
|
|
|
- if (content) this.file_list = JSON.parse(content).file_list;
|
|
|
- },
|
|
|
- );
|
|
|
- },
|
|
|
-
|
|
|
// 显示自定义样式文件列表
|
|
|
onFileChange(file, fileList) {
|
|
|
this.afterSelectFile(file);
|
|
|
fileList.forEach((file) => {
|
|
|
if (!file.progress || file.progress <= 0) file.progress = 0;
|
|
|
- if (!file.title) file.title = '';
|
|
|
- if (!file.describe) file.describe = '';
|
|
|
});
|
|
|
- this.file_list.push(file);
|
|
|
+ this.content.file_list.push(file);
|
|
|
},
|
|
|
|
|
|
// 删除文件
|
|
|
@@ -131,10 +129,8 @@ export default {
|
|
|
})
|
|
|
.then(() => {
|
|
|
this.$refs.upload.handleRemove(file);
|
|
|
- if (this.file_list[i].file_id) {
|
|
|
- this.file_list.splice(i, 1);
|
|
|
- this.file_id_list.splice(i, 1);
|
|
|
- }
|
|
|
+ this.content.file_list.splice(i, 1);
|
|
|
+ this.content.file_id_list.splice(i, 1);
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
@@ -142,9 +138,8 @@ export default {
|
|
|
// 文件校验
|
|
|
afterSelectFile(file) {
|
|
|
const fileName = file.name;
|
|
|
- let singleSizeTip = `文件[${fileName}]大小超过 ${conversionSize(this.moduleData.single_size)},被移除！`;
|
|
|
-
|
|
|
- if (file.size > this.moduleData.single_size * 1024 * 1024) {
|
|
|
+ let singleSizeTip = `文件[${fileName}]大小超过 ${conversionSize(this.content.single_size)},被移除！`;
|
|
|
+ if (file.size > this.content.single_size * 1024 * 1024) {
|
|
|
this.$message.error(singleSizeTip);
|
|
|
this.$refs.upload.handleRemove(file);
|
|
|
return false;
|
|
|
@@ -154,10 +149,10 @@ export default {
|
|
|
let fileType = [];
|
|
|
let typeTip = '';
|
|
|
|
|
|
- if (this.moduleData.type === 'audio') {
|
|
|
+ if (this.content.type === 'audio') {
|
|
|
fileType = ['mp3', 'acc', 'wma'];
|
|
|
typeTip = '音频文件只能是 mp3、acc、wma 格式!';
|
|
|
- } else if (this.moduleData.type === 'picture') {
|
|
|
+ } else if (this.content.type === 'picture') {
|
|
|
fileType = ['jpg', 'png', 'jpeg'];
|
|
|
typeTip = '图片文件只能是 jpg、png、jpeg 格式!';
|
|
|
}
|
|
|
@@ -172,14 +167,14 @@ export default {
|
|
|
|
|
|
// 上传文件
|
|
|
uploadFiles() {
|
|
|
- const files = (this.file_list || []).filter((file) => file.uid);
|
|
|
+ const files = (this.content.file_list || []).filter((file) => file.uid);
|
|
|
if (files.length <= 0) {
|
|
|
this.$message.error('没有需要上传的文件！');
|
|
|
return false;
|
|
|
}
|
|
|
const totalSize = files.reduce((sum, cur) => sum + Number(cur.size || 0), 0);
|
|
|
- if (totalSize > this.moduleData.total_size * 1024 * 1024) {
|
|
|
- this.$message.error(`文件总大小不能超过${conversionSize(this.moduleData.total_size)}!`);
|
|
|
+ if (totalSize > this.content.total_size * 1024 * 1024) {
|
|
|
+ this.$message.error(`文件总大小不能超过${conversionSize(this.content.total_size)}!`);
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
@@ -189,32 +184,44 @@ export default {
|
|
|
fileUpload('Mid', form, {
|
|
|
handleUploadProgress: (progressEvent) => {
|
|
|
let per = Number((progressEvent.progress * 100).toFixed(2) || 0);
|
|
|
- let en = this.file_list.find((p) => p.uid === file.uid);
|
|
|
+ let en = this.content.file_list.find((p) => p.uid === file.uid);
|
|
|
if (en) {
|
|
|
en.progress = per;
|
|
|
this.$forceUpdate();
|
|
|
}
|
|
|
},
|
|
|
}).then(({ file_info_list }) => {
|
|
|
- let file_index = this.file_list.findIndex((p) => p.uid === file.uid);
|
|
|
+ let file_index = this.content.file_list.findIndex((p) => p.uid === file.uid);
|
|
|
if (file_index > -1) {
|
|
|
- this.file_list[file_index] = file_info_list[0];
|
|
|
- this.file_id_list.push(file_info_list[0].file_id);
|
|
|
- this.$emit('saveDate', file_info_list[0]);
|
|
|
+ if (this.content.type === 'picture') {
|
|
|
+ this.content.file_info_list[file_index] = {
|
|
|
+ file_id: file_info_list[0].file_id,
|
|
|
+ file_name: file_info_list[0].file_name,
|
|
|
+ title: '',
|
|
|
+ intro: '',
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.content.file_list[file_index] = {
|
|
|
+ file_id: file_info_list[0].file_id,
|
|
|
+ file_name: file_info_list[0].file_name,
|
|
|
+ file_url: file_info_list[0].file_url,
|
|
|
+ };
|
|
|
+ this.content.file_id_list.push(file_info_list[0].file_id);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 显示弹窗
|
|
|
- viewDialog(file) {
|
|
|
- this.visible = true;
|
|
|
- this.curFile = file;
|
|
|
+ viewDialog(file_id) {
|
|
|
+ if (file_id) this.visible = true;
|
|
|
+ this.curFile = this.content.file_info_list.find((file) => file.file_id === file_id);
|
|
|
},
|
|
|
|
|
|
// 给文件加介绍
|
|
|
fillDescribeToFile(file) {
|
|
|
- let en = this.file_list.find((p) => p.uid === file.uid);
|
|
|
+ console.log(file);
|
|
|
+ let en = this.content.file_info_list.find((p) => p.file_id === file.file_id);
|
|
|
if (en) {
|
|
|
Object.assign(en, file);
|
|
|
}
|
