Skip to content

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

修复展览单元的文物回显问题

上级 609346e9
显示空白字符变更
内嵌 并排
正在显示 包含 309 行增加 和 135 行删除
src/components/Uploader/ManualUploader.vue
浏览文件 @ cd5e71d8
......@@ -32,12 +32,8 @@
</template>
<script>
export default {
name: "ManualUploader",
name: "ManualUploader",//用于使用getfiles方法获取文件的父组件
props: {
// // 用于v-model绑定
value: {
type: [Number, Array, String],
},
files: {
type: Array,
default: () => [],
......@@ -80,26 +76,13 @@ export default {
watch: {
files: {
handler: function (val) {
// this.fileList = JSON.parse(JSON.stringify(val));
// 将回填的字段从url-->pressUrl
this.fileList = val.map((item) => {
return {
highImg: item.url,
lowImg: item.pressUrl,
url: item.pressUrl,
// pressUrl:item.pressUrl,
name: item.name,
fileId: item.fileId,
};
});
},
immediate: true,
deep: true,
},
value: {
handler: function (val) {
if (val) {
this.fileList = val.map((item) => {
let tempList = [...val];
this.fileList = tempList.map((item) => {
if (item.status == "ready") {
return item;
} else {
return {
highImg: item.url,
lowImg: item.pressUrl,
......@@ -108,15 +91,15 @@ export default {
name: item.name,
fileId: item.fileId,
};
}
});
} else {
this.fileList = [];
}
},
immediate: true,
deep: true,
},
advice(value) {
console.log(value);
},
},
computed: {
// 是否显示提示
......@@ -148,15 +131,20 @@ export default {
this.fileType.indexOf("jpeg") != -1 ||
this.fileType.indexOf("png") != -1
) {
let newFileList = this.fileList.map((item) => {
let tempList = [...this.fileList];
let newFileList = tempList.map((item) => {
if (item.status == "ready") {
return item;
} else {
item.url = item.highImg;
item.pressUrl = item.lowImg;
item.name = item.name;
item.fileId = item.fileId;
return item;
}
});
return newFileList;
} else {
}else{
return this.fileList;
}
},
......@@ -212,27 +200,10 @@ export default {
that.fileList.splice(index, 1);
}
});
if (
this.fileType.indexOf("jpg") != -1 ||
this.fileType.indexOf("jpeg") != -1 ||
this.fileType.indexOf("png") != -1
) {
let newFileList = that.fileList.map((item) => {
item.url = item.highImg;
item.pressUrl = item.lowImg;
item.name = item.name;
item.fileId = item.fileId;
return item;
});
that.$emit("input", newFileList);
} else {
that.$emit("input", that.fileList);
}
},
handleChange(file, fileList) {
let that = this;
console.log("handleChange", file, fileList);
if (fileList.length == this.fileLimit) {
this.maxNum = this.fileLimit;
}
......@@ -240,23 +211,6 @@ export default {
this.handleBeforeUpload(file)
.then((res) => {
that.fileList.push(res);
if (
this.fileType.indexOf("jpg") != -1 ||
this.fileType.indexOf("jpeg") != -1 ||
this.fileType.indexOf("png") != -1
) {
let tempList = JSON.parse(JSON.stringify(that.fileList));
let newFileList = tempList.map((item) => {
item.url = item.highImg;
item.pressUrl = item.lowImg;
item.name = item.name;
item.fileId = item.fileId;
return item;
});
that.$emit("input", newFileList);
} else {
that.$emit("input", that.fileList);
}
})
.catch((err) => {
console.log("err", err);
......
src/components/Uploader/ManualUploaderBind.vue 0 → 100644
浏览文件 @ cd5e71d8
<template>
<div class="images-list">
<el-upload
action="#"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:file-list="fileList"
:multiple="fileLimit > 1"
:limit="fileLimit"
:list-type="listType"
:accept="fileAccept"
:auto-upload="false"
ref="ManualUploaderBind"
:class="{ disabled: uploadDisabled }"
>
<i
v-if="listType === 'picture-card'"
class="el-icon-plus"
slot="trigger"
></i>
<el-button v-else size="small" type="primary">点击上传</el-button>
<div v-if="showTip" slot="tip" class="el-upload__tip">
<div v-if="advice" style="color: #f56c6c">建议：{{ advice }}</div>
提示：只能上传{{ fileTypeName || "jpg/png" }}文件，且不超过
{{ fileSize }}MB，最多上传{{ fileLimit }}个文件
</div>
</el-upload>
</div>
</template>
<script>
export default {
name: "ManualUploaderBind",//用于使用双向绑定的父组件
props: {
// // 用于v-model绑定
value: {
type: [Number, Array, String],
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 50,
},
// 文件类型, 例如["doc", "xls", "ppt", "txt", "pdf"]
fileType: {
type: Array,
default: () => ["png", "jpg", "jpeg"],
},
// 文件列表类型 text/picture/picture-card
listType: {
type: String,
default: "picture",
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true,
},
// 最大允许上传个数
fileLimit: {
type: Number,
default: 99,
},
//建议
advice: {
type: String,
},
},
data() {
return {
fileList: [],
};
},
watch: {
value: {
handler: function (val) {
// 将回填的字段从url-->pressUrl
if (val) {
let tempList = [...val];
this.fileList = tempList.map((item) => {
if (item.status == "ready") {
return item;
} else {
return {
highImg: item.url,
lowImg: item.pressUrl,
url: item.pressUrl,
// pressUrl:item.pressUrl,
name: item.name,
fileId: item.fileId,
};
}
});
} else {
this.fileList = [];
}
},
immediate: true,
deep: true,
},
},
computed: {
// 是否显示提示
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
fileTypeName() {
let typeName = "";
this.fileType.forEach((item) => {
typeName += `${item}，`;
});
return typeName;
},
fileAccept() {
let fileAccept = "";
this.fileType.forEach((element) => {
fileAccept += `.${element},`;
});
return fileAccept;
},
uploadDisabled() {
return this.fileList.length == this.fileLimit;
},
},
methods: {
// 上传前校检格式和大小
handleBeforeUpload(file) {
return new Promise((resolve, reject) => {
var isValidated = true;
if (this.fileType && file) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
const isTypeOk = this.fileType.some((type) => {
if (file.raw.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (!isTypeOk & file) {
this.$message.error(
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
);
isValidated = false;
}
}
// 校检文件大小
if (this.fileSize && file) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
isValidated = false;
}
}
if (isValidated) {
resolve(file);
} else {
reject("验证失败");
}
});
},
handleUploadError(err) {
this.$message.error("上传失败, 请重试");
},
// 文件个数超出
handleExceed() {
this.$message.error(`超出上传文件个数,请删除以后再上传！`);
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
let that = this;
that.fileList.map(async (item, index) => {
if (item.uid === file.uid) {
that.fileList.splice(index, 1);
}
});
if (
this.fileType.indexOf("jpg") != -1 ||
this.fileType.indexOf("jpeg") != -1 ||
this.fileType.indexOf("png") != -1
) {
let newFileList = that.fileList.map((item) => {
if (item.status == "ready") {
return item;
} else {
item.url = item.highImg;
item.pressUrl = item.lowImg;
item.name = item.name;
item.fileId = item.fileId;
return item;
}
});
that.$emit("input", newFileList);
} else {
that.$emit("input", that.fileList);
}
},
handleChange(file, fileList) {
let that = this;
if (fileList.length == this.fileLimit) {
this.maxNum = this.fileLimit;
}
if (file.status === "ready") {
this.handleBeforeUpload(file)
.then((res) => {
that.fileList.push(res);
if (
this.fileType.indexOf("jpg") != -1 ||
this.fileType.indexOf("jpeg") != -1 ||
this.fileType.indexOf("png") != -1
) {
let tempList = [...that.fileList];
let newFileList = tempList.map((item) => {
if (item.status == "ready") {
return item;
} else {
item.url = item.highImg;
item.pressUrl = item.lowImg;
item.name = item.name;
item.fileId = item.fileId;
return item;
}
});
that.$emit("input", newFileList);
} else {
that.$emit("input", that.fileList);
}
})
.catch((err) => {
console.log("err", err);
});
}
},
},
};
</script>
<style lang="scss" >
.disabled .el-upload--picture-card {
display: none !important;
}
.el-upload-list__item {
transition: none !important;
}
</style>
\ No newline at end of file
src/views/display/components/ExhibitionUnit.vue
浏览文件 @ cd5e71d8
......@@ -85,8 +85,8 @@
</el-col>
<el-col :span="24">
<div>单元图片：</div>
<ManualUploader
:files="currentData.imagesVo"
<ManualUploaderBind
v-model="currentData.imagesVo"
:fileLimit="7"
:fileSize="50"
:fileType="['jpeg', 'jpg', 'png']"
......@@ -149,13 +149,13 @@
<script>
let euId = 1000;
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import ManualUploaderBind from "@/components/Uploader/ManualUploaderBind.vue";
import { getCulturalRelicListPer } from "@/api/culturalRelic";
import VueQuillEditor from "@/components/VueQuillEditor";
export default {
components: {
ManualUploader,
ManualUploaderBind,
VueQuillEditor,
},
props: {
......@@ -170,34 +170,23 @@ export default {
if (value) {
let that = this;
that.treeData = JSON.parse(JSON.stringify(value));
// 数据回填时为第一条数据的crlist赋值，其余的点击的时候再赋值
if (value.length > 0) {
that.currentData = that.treeData[0];
that.crList = that.currentData.culturalRelics;
loopData(that.treeData);
function loopData(arr) {
if (arr.length > 0) {
arr.forEach((item) => {
if (item.culturalRelics && item.culturalRelics.length > 0) {
that.$set(that, "crList", item.culturalRelics);
that.crList = item.culturalRelics;
// item.crList = item.culturalRelics;
item.crIds = [];
item.culturalRelics.map((cr) => {
item.crIds.push(cr.crId);
// that.$nextTick(() => {
// // console.log("remoteSelect", that.$refs["remoteSelect"]);
// that.$refs["remoteSelect"].cachedOptions.push({
// currentLabel: cr.name, // 当前绑定的数据的label
// currentValue: cr.crId, // 当前绑定数据的value
// label: cr.name, // 当前绑定的数据的label
// value: cr.crId, // 当前绑定数据的value
// });
// });
});
} else {
that.$set(that, "crList", []);
}
item.imagesVo = item.imagesVo || [];
item.videosVo = item.videosVo || [];
if (item.children) {
loopData(item.children);
}
......@@ -242,7 +231,7 @@ export default {
this.loading = false;
const res = await getCulturalRelicListPer(params);
if (res.code == 0) {
this.crList = res.data.records;
this.crList = [...new Set([...this.crList, ...res.data.records])];
} else {
this.crList = [];
this.$message.error(res.msg);
......@@ -255,7 +244,7 @@ export default {
handleClickNode(node, data) {
this.currentData = data;
// debugger
this.crList = [...new Set([...this.crList, ...this.currentData.culturalRelics])];
},
editNode(node, data) {
this.$set(data, "isEditing", true);
......@@ -314,9 +303,9 @@ export default {
children.splice(index, 1);
},
changeFileList(fileList) {
this.currentData.imagesVo = fileList;
},
// changeFileList(fileList) {
// this.currentData.imagesVo = fileList;
// },
handleAddUnit(type) {
switch (type) {
case "manual":
......@@ -326,12 +315,14 @@ export default {
title: "单元标题", //单元标题，类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
imagesVo: [],
videos: "", //视频id集合
crIds: [], //关联文物集合
// showMediaUploader: false,
};
this.$set(this.treeData, 0, obj);
this.currentData = this.treeData[0];
console.log("this.currentData", this.currentData);
break;
default:
this.$message.info("该功能仍在开发中，敬请期待");
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ cd5e71d8
......@@ -242,7 +242,6 @@
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
:files="faceImage"
v-model="faceImage"
ref="faceImage"
/>
</el-form-item>
......@@ -254,7 +253,6 @@
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
@handleFileReady="handleImagesReady"
ref="images"
:advice="imagesAdvice"
/>
......@@ -266,7 +264,6 @@
:fileSize="50"
:fileType="['mp3']"
listType="card"
@handleFileReady="handleAudiosReady"
ref="audios"
/>
</el-form-item>
......@@ -293,8 +290,12 @@
</el-form>
</div>
<div class="dialog-footer">
<el-button icon="el-icon-top" type="info" @click.native="handleToTop">回到顶部</el-button>
<el-button @click="cancelForm" icon="el-icon-circle-close" type="danger">取 消</el-button>
<el-button icon="el-icon-top" type="info" @click.native="handleToTop"
>回到顶部</el-button
>
<el-button @click="cancelForm" icon="el-icon-circle-close" type="danger"
>取 消</el-button
>
<!-- <el-button @click="handlePreview">预 览</el-button> -->
<el-button type="primary" @click="handleSubmit" :disabled="loading"
>{{ dialogForm.exhibitionId ? "保存" : "发布"
......@@ -401,10 +402,6 @@ export default {
if (!this.dialogForm.exhibitionId) {
this.dialogForm.deptId = this.userInfo.deptId;
this.dialogForm.regionCode = this.userInfo.regionCode;
console.log(
"this.dialogForm.regionCode",
this.dialogForm.regionCode
);
} else {
this.currentId = this.dialogForm.exhibitionId;
}
......@@ -695,10 +692,9 @@ export default {
this.reload();
},
handleToTop(){
handleToTop() {
let el = document.getElementById("dialog-content");
el.scrollIntoView({ block: 'start',behavior: "smooth" })
el.scrollIntoView({ block: "start", behavior: "smooth" });
},
loadRegionTree() {
......@@ -729,7 +725,7 @@ export default {
} else {
this.$message.info("已经是此页最后一个！");
}
console.log('this.currentId',this.currentId);
console.log("this.currentId", this.currentId);
break;
case "prev":
if (this.currentPageIds[index - 1]) {
......@@ -737,7 +733,7 @@ export default {
} else {
this.$message.info("已经是此页第一个！");
}
console.log('this.currentId',this.currentId);
console.log("this.currentId", this.currentId);
break;
}
},
......@@ -788,7 +784,6 @@ export default {
let unitIds = [];
let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
// 批量添加image进入formdata
let newfileIdsArr = []; //不同媒体或单元已经存在的文件id数组
let oldFileIdsArr = []; //旧的ids集合
addUnitImgToFormData(unitData);
......@@ -1052,39 +1047,6 @@ export default {
})
.catch((_) => {});
},
// 处理将文件的url拼接成字符串
handleJoinArrToStr(file) {
var str = "";
var urlArr = file.map((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.auidos = str;
},
refresh() {
this.$emit("refresh");
},
......
src/views/product/components/InfoEditDialog.vue
浏览文件 @ cd5e71d8
......@@ -87,6 +87,7 @@ import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import { mapGetters } from "vuex";
import { uploadV1 } from "@/utils/file";
import VueQuillEditor from "@/components/VueQuillEditor";
import { deleteFiles } from "@/api/file";
export default {
name: "InfoEditDialog",
components: {
......@@ -233,7 +234,10 @@ export default {
// this.submitLoading = true;
let params = { ...this.dialogForm };
let deleteFileArr = [];
let oldImageIds = [];
let newImageIds = [];
let files = this.$refs.images.getFiles();
let imgFileIds = [];
if (files.length > 0) {
let formData = new FormData();
......@@ -263,6 +267,7 @@ export default {
});
}
}
params.images = imgFileIds.join(",");
} else {
params.images = "";
......@@ -281,11 +286,25 @@ export default {
// 处理状态
params.status = this.status ? 1 : 0;
if (this.dialogForm.bccpId) {
if (this.dialogForm.images) {
oldImageIds = this.dialogForm.images.split(",");
newImageIds = imgFileIds;
oldImageIds.map((id) => {
if (newImageIds.indexOf(id) == -1) {
deleteFileArr.push(id);
}
});
}
// console.log("deleteFileArr", deleteFileArr);
// return;
let res = await updateCcProduct(params);
if (res.code == 0) {
this.$message.success("修改成功！");
this.reload();
}
if (deleteFileArr.length > 0) {
await deleteFiles(deleteFileArr);
}
} else {
let res = await addCcProduct(params);
if (res.code == 0) {
......
src/views/virtual/components/InfoEditDialog.vue
浏览文件 @ cd5e71d8
......@@ -141,7 +141,6 @@ export default {
that.dialogForm = JSON.parse(JSON.stringify(value));
// 编辑状态
if (that.dialogForm.bvId) {
console.log("that.dialogForm.", that.dialogForm);
that.status = Boolean(Number(that.dialogForm.status));
// 回填封面
if (
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论