Skip to content

E
exhibition_backstage
提交 14854e65 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

文物修改

上级 83d4acc0
隐藏空白字符变更
内嵌 并排
正在显示 包含 226 行增加 和 239 行删除
src/components/Uploader/AudioUploader.vue deleted 100644 → 0
浏览文件 @ 83d4acc0
<template>
<el-upload
:action="uploadUrl"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
:on-error="handleUploadError"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:file-list="fileList"
:multiple="fileLimit > 1"
:headers="headers"
:limit="fileLimit"
:list-type="listType"
name="files"
:class="{ disabled: uploadDisabled }"
:accept="fileAccept"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip" style="margin-bottom: 10px">
只能上传mp3文件，且不超过2M，播放长度不超过60s
</div>
</el-upload>
</template>
<script>
export default {
beforeAvatarUpload(file) {
// 文件类型进行判断
const isAudio = file.type === "audio/mp3" || file.type === "audio/mpeg";
// 限制上传文件大小 2M
const isLt2M = file.size / 1024 / 1024 < 2;
const isTime60S = this.audioDuration >= 60 ? true : "";
// 获取时长
this.getTimes(file);
if (!isAudio) {
this.$message.error("上传文件只能是Mp3格式!");
this.fileList = [];
} else {
if (!isLt2M) {
this.$message.error("上传文件大小不能超过 2MB!");
this.fileList = [];
} else {
if (!isTime60S) {
this.$message.error("上传文件时长不能超过60秒!");
this.fileList = [];
}
}
}
return isAudio && isLt2M && isTime60S;
},
getTimes(file) {
var content = file;
//获取录音时长
var url = URL.createObjectURL(content);
//经测试，发现audio也可获取视频的时长
var audioElement = new Audio(url);
audioElement.addEventListener("loadedmetadata", (_event) => {
this.audioDuration = parseInt(audioElement.duration);
// console.log(this.audioDuration);
});
},
};
</script>
<style>
</style>
\ No newline at end of file
src/components/Uploader/ManualUploader.vue
浏览文件 @ 14854e65
......@@ -70,19 +70,13 @@ export default {
process.env.NODE_ENV === "development"
? "/api/sysFiles/upload"
: process.env.NODE_ENV + "/sysFiles/upload", // 上传的图片服务器地址
// headers: {
// authorization: getToken(),
// },
fileList: [],
// tempFileList: [],
// uploadDisabled: false,
upLoadList: [],
};
},
watch: {
files: {
handler: function (newVal, oldVal) {
this.fileList = newVal;
handler: function (val) {
this.fileList = [...val];
},
immediate: true,
deep: true,
......@@ -108,12 +102,9 @@ export default {
return fileAccept;
},
},
created() {
this.fileList = JSON.parse(JSON.stringify(this.files));
},
methods: {
getFiles(){
return this.upLoadList
getFiles() {
return this.fileList;
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
......@@ -161,9 +152,9 @@ export default {
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
this.upLoadList.map((item, index) => {
this.fileList.map((item, index) => {
if (item.uid === file.uid) {
this.upLoadList.splice(index, 1);
this.fileList.splice(index, 1);
}
});
},
......@@ -172,7 +163,7 @@ export default {
if (file.status === "ready") {
this.handleBeforeUpload(file)
.then((res) => {
this.upLoadList.push(res);
this.fileList.push(res);
})
.catch((err) => {
console.log("err", err);
......
src/components/Uploader/index.vue
浏览文件 @ 14854e65
......@@ -82,11 +82,6 @@ export default {
handler: function (newVal, oldVal) {
console.log("newVal", newVal);
this.fileList = newVal;
// if (this.fileList.length >= this.fileLimit) {
// this.uploadDisabled = true;
// }else{
// this.uploadDisabled = false;
// }
},
immediate: true,
deep: true,
......
src/views/culturalRelic/components/InfoEditDialog.vue
浏览文件 @ 14854e65
......@@ -280,19 +280,49 @@ export default {
},
faceImage() {
return this.covertStrToArr("faceImage");
if (this.dialogForm.faceImageUrl) {
return [
{
name: "",
url: this.dialogForm.faceImageUrl,
},
];
} else {
return [];
}
// return this.covertStrToArr("faceImage");
},
images() {
return this.covertStrToArr("images");
if (this.dialogForm.imagesVo) {
return this.dialogForm.imagesVo;
} else {
return [];
}
// return this.covertStrToArr("images");
},
videos() {
return this.covertStrToArr("videos");
if (this.dialogForm.videosVo) {
return this.dialogForm.videosVo;
} else {
return [];
}
// return this.covertStrToArr("videos");
},
audios() {
return this.covertStrToArr("audios");
if (this.dialogForm.audiosVo) {
return this.dialogForm.audiosVo;
} else {
return [];
}
// return this.covertStrToArr("audios");
},
sayExplain() {
return this.covertStrToArr("sayExplain");
if (this.dialogForm.sayExplainVo) {
return this.dialogForm.sayExplainVo;
} else {
return [];
}
// return this.covertStrToArr("sayExplain");
},
},
watch: {
......@@ -327,7 +357,6 @@ export default {
formLabelWidth: "100px",
loading: false,
upLoadAddress: process.env.VUE_APP_BASE_API + "/sysFiles/upload",
typeOptions: [{ label: "展览类型", value: 1 }], //后期从vuex中取
themeTypeOptions: [
{ label: "模板主题1", value: "主题一" },
{ label: "模板主题2", value: "主题二" },
......@@ -367,9 +396,10 @@ export default {
fileName = "文件";
break;
}
if (this.dialogForm[name]) {
if (this.dialogForm[name].indexOf(",") != -1) {
var arr = this.dialogForm[name].split(",");
let form = { ...this.dialogForm };
if (form[name]) {
if (form[name].indexOf(",") != -1) {
var arr = form[name].split(",");
return arr.map((item, index) => {
return {
url: item,
......@@ -377,7 +407,7 @@ export default {
};
});
} else {
return [{ url: this.dialogForm[name], name }];
return [{ url: form[name], name }];
}
} else {
return [];
......@@ -427,37 +457,105 @@ export default {
},
async handleSubmit() {
if (this.dialogForm.exhibitionId) {
console.log("this.dialogForm", this.dialogForm);
let params = { ...this.dialogForm };
// params.literature = this.literatureModelValue.join(",");
// params.status = this.dialogForm.status ? 1 : 0;
// let res = await editulturalRelic(params);
// if (res.code == 0) {
// this.$message.success("提交成功！");
// this.loading = false;
// this.$emit("handleClose");
// this.$emit("refresh");
// this.literatureModelValue = [];
// this.dialogForm ={}
const mediaArr = [
"faceImage",
"images",
"audios",
"videos",
"sayExplain",
];
if (this.dialogForm.crId) {
let ps = []; //ps为涵盖5种媒体的promise集合
mediaArr.forEach((media) => {
ps.push(this.handleEditUpload(media));
});
Promise.all(ps).then((allResult) => {
console.log("allResult", allResult);
});
// // 处理图片等媒体
// let imagesFiles = [...this.$refs["images"].getFiles()]; //imagesFiles中只存在(success)和新添加的(ready)，不存在的已经在组件中被去除了
// if (imagesFiles.length > 0) {
// let formData = new FormData();
// let fileIds = [];
// imagesFiles.forEach((imageFile) => {
// switch (imageFile.status) {
// case "ready":
// formData.append(files, imageFile.raw);
// break;
// case "success":
// fileIds.push(imageFile.fileId);
// break;
// }
// });
// let imageUpRes = await upload(formData);
// if (imageUpRes.code == 0) {
// // 拿到已存在的和上传过后的结果进行拼接，并赋值给images，不用管imagesVo，后台自行处理
// const { data } = imageUpRes;
// data.map((item) => {
// fileIds.push(item.fileId);
// });
// this.dialogForm["images"] = fileIds.join(",");
// }
// } else {
// this.dialogForm["images"] = "";
// }
// mediaArr.map((media) => {
// let files = this.$refs[media].getFiles(); //获取每种媒体的文件
// let fileList = [...files]; //fileList中包含了有已经存在的(success)和新添加的(ready)
// if (fileList.length > 0) {
// let formData = new FormData();
// fileList.forEach((file) => {
// // 只会有Ready和success两种状态，success的不做处理，ready的上传后将
// if (file.status == "ready") {
// formData.append("files", file.raw);
// ps.push(upload(formData));
// } else {
// ps.push(file);
// }
// });
// } else {
// ps.push(null);
// }
// });
Promise.all(ps).then(
async (allResult) => {
console.log("allResult", allResult);
// allResult.forEach((item, index) => {
// if (item) {
// let fileIds = [];
// let files = item.data;
// files.forEach((file) => {
// fileIds.push(file.fileId);
// });
// this.dialogForm[mediaArr[index]] = fileIds.join(",");
// } else {
// this.dialogForm[mediaArr[index]] = "";
// }
// });
// const { deptId, regionCode } = this.userInfo;
// const params = { ...this.dialogForm, deptId, regionCode };
// params.literature = this.literatureModelValue.join(",");
// params.status = this.dialogForm.status ? 1 : 0;
// let res = await addCulturalRelic(params);
// if (res.code == 0) {
// this.$message.success("提交成功！");
// this.loading = false;
// this.literatureModelValue = [];
// this.$emit("handleClose");
// this.$emit("refresh");
// this.dialogForm = {};
// }
},
(reason) => {
console.log(reason);
}
);
} else {
console.log("this.dialogForm", this.dialogForm);
const mediaArr = [
"faceImage",
"images",
"audios",
"videos",
"sayExplain",
];
// 不确定每项是否有数据，因此不使用promise.all
let ps = [];
let faceImageRes = [];
let imagesRes = [];
let audiosRes = [];
let videosRes = [];
mediaArr.map((media) => {
let files = this.$refs[media].getFiles();
let fileList = [...files];
......@@ -471,79 +569,83 @@ export default {
ps.push(null);
}
});
let files = {};
Promise.all(ps).then(
(res) => {
// this.faceImageRes = res[0];
// this.imagesRes = res[1]; // 这个数据拿不到
// this.audiosRes = res[2];
// this.videosRes = res[3];
// this.sayExplainsRes = res[4];
res.forEach((item, index) => {
// let faceImageRes = res[0]
async (allResult) => {
allResult.forEach((item, index) => {
if (item) {
let type = mediaArr[index];
// this.dialogForm[type] = res[index];
files[type] = res[index];
}
});
let fileIds = "";
for (const key in files) {
if (files[key]) {
var fileResult = files[key].data;
fileResult.forEach((file) => {
console.log("file", file);
fileIds += file.fileId;
let fileIds = [];
let files = item.data;
files.forEach((file) => {
fileIds.push(file.fileId);
});
this.dialogForm[mediaArr[index]] = fileIds.join(",");
} else {
this.dialogForm[mediaArr[index]] = "";
}
});
const { deptId, regionCode } = this.userInfo;
const params = { ...this.dialogForm, deptId, regionCode };
params.literature = this.literatureModelValue.join(",");
params.status = this.dialogForm.status ? 1 : 0;
let res = await addCulturalRelic(params);
if (res.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
this.literatureModelValue = [];
this.$emit("handleClose");
this.$emit("refresh");
this.dialogForm = {};
}
this.dialogForm[mediaArr[index]] = fileIds
debugger;
// files.forEach((file) => {
// fileIds += file.fileId;
// });
// res是每一个组件上传的结果
// res.map((result) => {
// const { data } = result;
// data.map((dataItem) => {
// // if(this.getFileType(dataItem))
// switch (this.getFileType(dataItem)) {
// case "audio":
// break;
// default:
// break;
// }
// });
// });
// if (res.code == 0) {
// console.log("上传成功");
// }
},
(reason) => {
console.log(reason);
}
);
// const { deptId, regionCode } = this.userInfo;
// const params = { ...this.dialogForm, deptId, regionCode };
// params.literature = this.literatureModelValue.join(",");
// params.status = this.dialogForm.status ? 1 : 0;
// console.log("params", params);
// let res = await addCulturalRelic(params);
// if (res.code == 0) {
// this.$message.success("提交成功！");
// this.loading = false;
// this.literatureModelValue = [];
// this.$emit("handleClose");
// this.$emit("refresh");
// this.dialogForm = {};
// }
}
},
// 处理编辑时图片、视频、音频、讲解词媒体资源的上传问题
handleEditUpload(media) {
return new Promise(async (resolve, reject) => {
debugger;
let fileIds = [];
let fileIdStr = "";
//files中只存在(success)和新添加的(ready)，不存在的已经在组件中被去除了
let files = [...this.$refs[media].getFiles()];
if (files.length > 0) {
let formData = new FormData();
files.forEach((file) => {
switch (file.status) {
case "ready":
formData.append("files", file.raw);
break;
case "success":
fileIds.push(file.fileId);
break;
}
});
if (formData.get("files")) {
upload(formData)
.then((upRes) => {
if (upRes.code == 0) {
// 拿到已存在的和上传过后的结果进行拼接，并赋值给images，不用管imagesVo，后台自行处理
const { data } = upRes;
data.map((item) => {
fileIds.push(item.fileId);
});
}
fileIdStr = fileIds.join(",");
resolve(fileIdStr);
})
.catch((err) => {
reject(err);
});
} else {
fileIdStr = "";
}
}
});
},
// 通过文件名获取文件类型
getFileType(fileName) {
let suffix = fileName.split(".")[1];
......@@ -570,52 +672,6 @@ export default {
})
.catch((_) => {});
},
// 处理将文件的url拼接成字符串
handleJoinArrToStr(file) {
var str = "";
var urlArr = file.map((item) => {
console.log("item", item);
return item.url;
});
str = urlArr.join(",");
return str;
},
// 封面上传
handleFaceImageReady(file) {
var str = this.handleJoinArrToStr(file);
this.dialogForm.faceImage = str;
},
// 展览图片上传
handleImagesReady(file) {
var str = this.handleJoinArrToStr(file);
this.dialogForm.images = str;
},
// 展览图片上传
handleVideosReady(file) {
var str = this.handleJoinArrToStr(file);
this.dialogForm.videos = str;
},
// 展览图片上传
handleAudiosReady(file) {
var str = this.handleJoinArrToStr(file);
this.dialogForm.audios = str;
},
handleDocReady(file) {
var str = this.handleJoinArrToStr(file);
this.dialogForm.sayExplain = str;
},
// startLoading() {
// this.loading = true;
// },
// endLoading() {
// this.loading = false;
// },
refresh() {
this.$emit("refresh");
......
src/views/culturalRelic/index.vue
浏览文件 @ 14854e65
<template>
<div class="app-container">
<div
class="app-container"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.3)"
>
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button
......@@ -67,7 +73,7 @@
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import { title, operates, operations } from "./config";
import { getCulturalRelicList } from "@/api/culturalRelic";
import { getCulturalRelicList, getRCDetailById } from "@/api/culturalRelic";
import InfoEditDialog from "./components/InfoEditDialog";
import SearchBar from "@/components/SearchBar";
......@@ -141,7 +147,7 @@ export default {
// regionCode:'',//所属地（分号分隔的编号）——传当前用户的regionCode
sourceWay: "", //来源方式
sayExplain: "", //讲解词文件。文件id
status: "", //上下架状态(0-下架，1-上架）
status: 0, //上下架状态(0-下架，1-上架）
// flag3d:'',//是否有3D图片（字典值：1-有；0-无）
themeWord: "", //主题词
url3d: "", //3durl链接
......@@ -158,8 +164,6 @@ export default {
if (value) {
this.dict = value;
this.culturalLevel = [];
console.log("this.dict ", this.dict);
}
},
},
......@@ -227,9 +231,14 @@ export default {
break;
case "edit":
// 查询接口，并复制给form
// this.loading = true;
// let res = await getRCDetailById;
// this.drawerVisible = true;
const { crId } = row;
this.loading = true;
let res = await getRCDetailById({ crId });
if (res.code == 0) {
this.loading = false;
this.form = res.data;
this.drawerVisible = true;
}
break;
// case "delete":
// break;
......@@ -287,4 +296,7 @@ export default {
align-items: center;
margin-bottom: 10px;
}
.pagination {
margin: 16px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论