Skip to content

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

布展单元编辑调整

上级 12c29ff6
隐藏空白字符变更
内嵌 并排
正在显示 包含 238 行增加 和 200 行删除
src/components/Uploader/ManualUploader.vue
浏览文件 @ 7949edfd
......@@ -35,9 +35,9 @@ export default {
name: "ManualUploader",
props: {
// // 用于v-model绑定
// value: {
// type: [Number, Array, String],
// },
value: {
type: [Number, Array, String],
},
files: {
type: Array,
default: () => [],
......@@ -86,8 +86,11 @@ export default {
immediate: true,
deep: true,
},
fileList(value) {
value(val) {
// debugger;
// console.log(1111,val);
// this.fileList =val
// this.$emit('input',this.fileList)
},
},
computed: {
......@@ -179,6 +182,7 @@ export default {
this.handleBeforeUpload(file)
.then((res) => {
that.fileList.push(res);
// that.$emit('input',that.fileList)
})
.catch((err) => {
console.log("err", err);
......
src/views/display/components/ExhibitionUnit.vue
浏览文件 @ 7949edfd
......@@ -9,13 +9,6 @@
>
<div class="exhibition-units-tree-node" slot-scope="{ node, data }">
<el-row :gutter="10">
<!-- <el-col :span="7">
<el-input
placeholder="展览单元（如：前言、第一单元）"
v-model="node.unit"
>
</el-input>
</el-col> -->
<el-col :span="5">
<el-input placeholder="请输入展览单元标题" v-model="data.title">
</el-input>
......@@ -26,7 +19,7 @@
</el-col>
<el-col :span="8">
<el-select
v-model="CRModelValue"
v-model="data.crIds"
multiple
filterable
remote
......@@ -48,7 +41,7 @@
<el-col :span="3">
<div style="display: flex; align-items: center">
<i
v-if="data.euId != 1"
v-if="data.euId !== treeData[0].euId"
class="el-icon-close delete"
@click="() => remove(node, data)"
></i>
......@@ -56,13 +49,13 @@
<svg-icon
@click="() => appendChild(data)"
icon-class="node-child2"
class="plus"
class="plus-child"
style="font-size: 32px; color: #409eff"
></svg-icon>
</el-tooltip>
<el-tooltip content="添加同级节点" placement="top">
<i
class="el-icon-plus plus"
class="el-icon-plus plus-peer"
@click="() => appendPeerNode(node, data)"
></i>
</el-tooltip>
......@@ -70,7 +63,7 @@
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="24" style="display: flex; flex-direction: column">
<!-- <el-col :span="24" style="display: flex; flex-direction: column">
<div class="buttons">
<el-button
type="text"
......@@ -78,49 +71,25 @@
>
<div class="add-image">
<svg-icon
:icon-class="
data.showMediaUploader || data.imagesVo || data.videosVo
? 'fold'
: 'image'
"
:icon-class="data.showMediaUploader ? 'fold' : 'image'"
/>
<span>{{
data.showMediaUploader || data.imagesVo || data.videosVo
? "收起"
: "添加/显示"
data.showMediaUploader ? "收起" : "添加/显示"
}}</span>
<span>单元媒体资源</span>
</div>
</el-button>
<!-- <el-button
type="text"
@click.native="handleAddUnitVideo(node, data)"
>
<div class="add-image">
<svg-icon
:icon-class="
data.showVideoUploader || data.videosVo ? 'fold' : 'video'
"
/>
<span>{{
data.showVideoUploader || data.videosVo0
? "收起"
: "添加/显示"
}}</span>
<span>单元视频</span>
</div></el-button
> -->
</div>
</el-col>
</el-col> -->
<!-- <el-col :span="12">123</el-col> -->
</el-row>
<el-collapse-transition>
<el-row :gutter="50" v-show="data.showMediaUploader">
<el-col :span="12">
<el-row :gutter="50">
<el-col :span="24">
<div>单元图片：</div>
<ManualImageUploader
:files="getImagesVo(data.imagesVo)"
v-model="data.imagesVo"
:files="data.imagesVo"
:fileLimit="6"
:fileSize="50"
:fileType="['jpeg', 'jpg', 'png']"
......@@ -128,10 +97,11 @@
:ref="'unit-images-' + data.euId"
/>
</el-col>
<el-col :span="12">
<el-col :span="24">
<div>单元视频：</div>
<ManualVideoUploader
:files="getVideosVo(data.videosVo)"
v-model="data.videosVo"
:files="data.videosVo"
:fileLimit="6"
:fileSize="50"
:fileType="['mp4']"
......@@ -167,25 +137,47 @@ export default {
handler: function (value) {
if (value) {
let that = this;
let treeData = [...value];
that.treeData = treeData;
// 回填布展单元中的文物、增加显示媒体的字段
// TODO:
// if (this.dialogForm.exhibitionUnits.length > 0) {
// loopUnit(this.dialogForm.exhibitionUnits);
// function loopUnit(arr) {
// arr.forEach((unit) => {
// if (unit.length > 0) {
// // this.$set(unit, "showMediaUploader", true); //设置展示图片单元的为展开
// // 如果有文物，回填文物
// if (unit.culturalRelics && uni.culturalRelics.length > 0) {
// this.$set(unit, "crIds", unit.culturalRelics);
// }
// if (unit.children) {
// loopUnit(unit.children);
// }
// }
// });
// }
// }
that.treeData = [...value];
loopData(that.treeData);
// debugger
function loopData(arr) {
if (arr.length > 0) {
console.log(arr);
arr.forEach((item) => {
// debugger;
if (item.culturalRelics) {
if (that.CRList.length == 0) {
that.CRList = item.culturalRelics;
// const res = await getCulturalRelicList(params);
// if (res.code == 0) {
// that.CRList = res.data.records;
// } else {
// that.CRList = [];
// }
}
that.CRModelValue.push(item.crId);
if (item.culturalRelics && item.culturalRelics.length > 0) {
that.$set(that, "CRList", item.culturalRelics);
// debugger
// that.$set(item,'crIds',item.culturalRelics)
// item.crIds = item.culturalRelics;
item.crIds = [];
item.culturalRelics.map((cr) => {
item.crIds.push(cr.crId);
});
item.imagesVo = item.imagesVo ? item.imagesVo : [];
item.videosVo = item.videosVo ? item.videosVo : [];
// that.$set(item, "showMediaUploader", false);
} else {
that.$set(that, "CRList", []);
}
if (item.children) {
loopData(item.children);
......@@ -202,22 +194,12 @@ export default {
return {
treeData: [],
CRList: [], //文物列表，关联文物使用
CRModelValue: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
// CRModelValue: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
loading: false,
imagesVo: [],
videosVo: [],
};
},
computed: {
getImagesVo(imagesVo) {
return (imagesVo) => {
return imagesVo ? imagesVo : [];
};
},
getVideosVo(videosVo) {
return (videosVo) => {
return videosVo ? videosVo : [];
};
},
},
mounted() {},
methods: {
getUnitData() {
......@@ -296,9 +278,10 @@ export default {
},
handleAddUnitMedia(node, data) {
if (data.imagesVo.length > 0 || data.videosVo.length) {
this.$set(data, "showMediaUploader", true);
}
// if (data.images || data.videos) {
// this.$set(data, "showMediaUploader", true);
// }
// debugger;
this.$set(data, "showMediaUploader", !data.showMediaUploader);
},
// handleAddUnitVideo(node, data) {
......@@ -322,7 +305,7 @@ export default {
display: flex;
align-items: flex-start;
}
.plus {
.plus-child {
font-size: 20px;
font-weight: bold;
color: #409eff;
......@@ -335,6 +318,19 @@ export default {
//
}
}
.plus-peer {
font-size: 20px !important;
font-weight: bold;
color: #409eff;
transition: all ease 0.5s;
padding: 4px;
border-radius: 4px;
margin-left: 10px;
&:hover {
background-color: rgba($color: #000000, $alpha: 0.05);
//
}
}
.delete {
font-size: 20px;
font-weight: bold;
......@@ -365,10 +361,10 @@ export default {
// }
}
}
::v-deep .el-upload-list--picture-card {
display: flex;
flex-wrap: wrap;
}
// ::v-deep .el-upload-list--picture-card {
// display: flex;
// flex-wrap: wrap;
// }
// ::v-deep .images-list > div {
// display: flex;
// flex-wrap: wrap;
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ 7949edfd
......@@ -11,7 +11,7 @@
<div class="divider"></div>
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content">
<div class="dialog-content" v-if="dialogVisible">
<el-form :model="dialogForm" class="basic-info">
<el-row :gutter="50">
<el-col :span="12">
......@@ -68,8 +68,6 @@
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
@handleFileReady="handleFaceImageReady"
@startLoading="startLoading"
@endLoading="endLoading"
:files="faceImage"
ref="faceImage"
/>
......@@ -80,10 +78,8 @@
:fileLimit="6"
:fileSize="50"
:fileType="['mp4', 'wav']"
listType="picture-card"
listType="picture"
@handleFileReady="handleVideosReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="videos"
/>
</el-form-item>
......@@ -140,8 +136,6 @@
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
@handleFileReady="handleImagesReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="images"
/>
</el-form-item>
......@@ -153,8 +147,6 @@
:fileType="['mp3']"
listType="picture"
@handleFileReady="handleAudiosReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="audios"
/>
</el-form-item>
......@@ -166,6 +158,13 @@
:exhibitionUnits="dialogForm.exhibitionUnits"
ref="exhibitionUnits"
/>
<!-- <el-button
type="text"
v-else
icon="el-icon-circle-plus-outline"
@click.native="handleShowUnit"
>添加/显示布展单元</el-button
> -->
</el-form-item>
</el-row>
<!--
......@@ -254,41 +253,6 @@ export default {
return "新增发布";
}
},
faceImage() {
if (this.dialogForm.faceImageUrl) {
return [
{
name: "",
url: this.dialogForm.faceImageUrl,
fileId: this.dialogForm.faceImage,
},
];
} else {
return [];
}
},
images() {
if (this.dialogForm.imagesVo) {
return this.dialogForm.imagesVo;
} else {
return [];
}
},
videos() {
if (this.dialogForm.videosVo) {
return this.dialogForm.videosVo;
} else {
return [];
}
},
audios() {
if (this.dialogForm.audiosVo) {
return this.dialogForm.audiosVo;
} else {
return [];
}
},
},
watch: {
form: {
......@@ -296,13 +260,30 @@ export default {
if (value) {
this.dialogForm = JSON.parse(JSON.stringify(value));
if (this.dialogForm.exhibitionId) {
// 回填媒体资源
if (this.dialogForm.faceImageUrl) {
this.faceImage = [
{
name: "",
url: this.dialogForm.faceImageUrl,
fileId: this.dialogForm.faceImage,
},
];
}
if (this.dialogForm.imagesVo) {
this.images = this.dialogForm.imagesVo;
}
if (this.dialogForm.videosVo) {
this.videos = this.dialogForm.videosVo;
}
if (this.dialogForm.audiosVo) {
this.audios = this.dialogForm.audiosVo;
}
// 编辑
// 回填状态
this.dialogForm.status = Boolean(Number(this.dialogForm.status));
// 回填文献
// this.literatureList = [...this.dict.literature]; //获取字典中的文献
// this.literatureNames = [];
this.literatureValues = [];
if (this.dialogForm.literatureVo.length > 0) {
this.literatureList = this.dialogForm.literatureVo;
......@@ -310,14 +291,27 @@ export default {
if (this.literatureValues) {
this.literatureValues.push(lt.literatureId);
}
// if (this.literatureNames) {
// this.literatureNames.push(lt.name);
// }
});
}
// 回填布展单元中的文物
// TODO:
// 先获取所有文物列表
// // 回填布展单元中的文物、增加显示媒体的字段
// // TODO:
if (this.dialogForm.exhibitionUnits.length > 0) {
loopUnit(this.dialogForm.exhibitionUnits);
function loopUnit(arr) {
arr.forEach((unit) => {
if (unit.length > 0) {
// this.$set(unit, "showMediaUploader", true); //设置展示图片单元的为展开
// 如果有文物，回填文物
if (unit.culturalRelics && uni.culturalRelics.length > 0) {
this.$set(unit, "crIds", unit.culturalRelics);
}
if (unit.children) {
loopUnit(unit.children);
}
}
});
}
}
} else {
// 新增
// 初始化布展单元
......@@ -330,9 +324,7 @@ export default {
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
showMediaUploader: false,
// showImageUploader: false, //后期去掉
// showVideoUploader: false, //后期去掉
// showMediaUploader: false,
},
];
}
......@@ -366,6 +358,11 @@ export default {
exhibitionUnits: [],
// literatureNames: "",
literatureValues: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
// showUnit: false,
faceImage: [],
images: [],
videos: [],
audios: [],
};
},
methods: {
......@@ -402,20 +399,25 @@ export default {
cancelForm() {
this.reload();
},
// handleShowUnit() {
// this.showUnit = true;
// },
async handleSubmit() {
debugger;
// return;
var that = this;
let formData = new FormData();
// 已存在的文件的对象
let successFilesObj = {};
let successFilesObj = [];
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
// console.log(333,this.dialogForm);
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
// debugger
// if (media == "faceImage") {
// console.log(222, files);
// }
files.map((f) => {
// 只有待上传的才需要添加至formdata
switch (f.status) {
case "ready":
formData.append(media, f.raw);
......@@ -424,37 +426,22 @@ export default {
successFilesObj[media] = f;
break;
}
// 只有待上传的才需要添加至formdata
});
});
// console.log('successFilesObj',successFilesObj);
let unitIds = [];
let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
debugger;
// return;
// 先判断布展单元是否为空
let isUnitEmpty = true;
const emptyUnit = {
euId: 1, //后期去掉
title: "", //单元标题，类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
showMediaUploader: false,
};
checkEmpty()
function checkEmpty() {
// 新增时，euid是有值的
}
// 添加布展单元每条记录带的媒体至formData
addMediaToFormData(unitData);
function addMediaToFormData(arr) {
// debugger
// return
addUnitIds(unitData); //添加unit的id作为上传文件的key
function addUnitIds(arr) {
if (arr.length > 0) {
arr.map((item) => {
unitIds.push(item.euId);
if (item.children) {
addMediaToFormData(item.children);
addUnitIds(item.children);
}
});
}
......@@ -463,6 +450,7 @@ export default {
let exhibitionUnitsDom = this.$refs.exhibitionUnits;
let imageFiles = [];
let videoFiles = [];
debugger;
if (exhibitionUnitsDom.$refs[`unit-images-${euId}`]) {
imageFiles = [
...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(),
......@@ -480,7 +468,12 @@ export default {
if (imgFile.status === "ready") {
formData.append(`unit-images-${euId}`, imgFile.raw);
} else {
successFilesObj[`unit-images-${euId}`] = imgFile;
//
if (successFilesObj[`unit-images-${euId}`]) {
successFilesObj[`unit-images-${euId}`].push(imgFile);
} else {
successFilesObj[`unit-images-${euId}`] = [imgFile];
}
}
});
}
......@@ -489,7 +482,12 @@ export default {
if (videoFile.status === "ready") {
formData.append(`unit-videos-${euId}`, videoFile.raw);
} else {
successFilesObj[`unit-videos-${euId}`] = imgFile;
// successFilesObj[`unit-videos-${euId}`] = imgFile;
if (successFilesObj[`unit-videos-${euId}`]) {
successFilesObj[`unit-videos-${euId}`].push(videoFiles);
} else {
successFilesObj[`unit-videos-${euId}`] = [videoFiles];
}
}
});
}
......@@ -502,6 +500,9 @@ export default {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
console.log("formDataArr,length", formDataArr.length);
// debugger
// formData有长度时再进行上传
if (formDataArr.length > 0) {
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
......@@ -514,15 +515,30 @@ export default {
});
}
}
// console.log('filesObj',filesObj);
// 1、回填之前先获取已存在的文件
for (const key in successFilesObj) {
// 如果文件id中含有已上传成功的某个key，如images，则将已上传成功的images推入文件id集合
if (filesObj[key]) {
filesObj.push(successFilesObj[key]);
successFilesObj[key].map((sf) => {
filesObj[key].push(sf.fileId);
});
// filesObj[key].push(successFilesObj[key].fileId);
} else {
let ids = [];
successFilesObj[key].map((sf) => {
ids.push(sf.fileId);
});
filesObj[key] = ids;
}
}
console.log("successFilesObj", successFilesObj);
console.log("filesObj", filesObj);
// debugger;
// return;
// 2、回填布展自带的媒体文件
mediaArr.forEach((media) => {
// debugger;
if (filesObj[media]) {
this.dialogForm[media] = filesObj[media].join(",");
} else {
......@@ -531,11 +547,12 @@ export default {
});
// 3、回填布展单元媒体文件,修改关联文物为Str，和显示隐藏控制器
backFillUnit(unitData);
// debugger;
function backFillUnit(arr) {
// debugger
if (arr.length > 0) {
arr.map((unit) => {
// 如果进行了文件上传
// debugger
if (Object.keys(filesObj).length > 0) {
for (const key in filesObj) {
let type = key.split("-")[1];
......@@ -544,6 +561,7 @@ export default {
switch (type) {
case "images":
unit.images = filesObj[key].join(",");
console.log("unit", unit);
break;
case "videos":
unit.videos = filesObj[key].join(",");
......@@ -555,7 +573,9 @@ export default {
// 不管是否进行文件上传，都需要修改文物为Str和显示隐藏控制器,去除euid
// debugger
// 编辑时关联文物id为字符串，新增时为数组，需要重新组成
// 新增时
if (!that.dialogForm.exhibitionId) {
// debugger;
let crIdArr = unit.crIds;
unit.crIds = crIdArr.join(",");
var deleteArr = ["euId", "showMediaUploader"];
......@@ -566,6 +586,10 @@ export default {
});
} else {
// 编辑时
// debugger;
// console.log("修改时---unit.crIds ", unit.crIds);
let crIdArr = unit.crIds;
unit.crIds = crIdArr.join(",");
var deleteArr = ["euId", "showMediaUploader"];
deleteArr.forEach((i) => {
if (unit[i]) {
......@@ -590,11 +614,13 @@ export default {
deptId,
regionCode,
};
// debugger;
// return;
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
console.log("新增参数-----------", params);
// debugger;
// return;
let res = await addDisplay(params);
if (res.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
......@@ -602,14 +628,36 @@ export default {
this.reload();
}
} else {
const {
exhibitionId,
faceImage,
faceImageUrl,
images,
audios,
videos,
regionCode,
deptId,
} = this.dialogForm;
let literature = this.literatureValues.join(",");
let status = this.dialogForm.status ? 1 : 0;
// debugger;
// return;
const params = {
...this.dialogForm,
exhibitionId,
audios,
deptId,
faceImage,
faceImageUrl,
images,
regionCode,
videos,
status,
literature,
exhibitionUnits: unitData,
};
// debugger;
console.log("修改参数-----------", params);
// return;
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
let res = await editDisplay(params);
if (res.code == 0) {
this.$message.success("提交成功！");
......@@ -643,6 +691,11 @@ export default {
// showVideoUploader: false, //后期去掉
},
];
this.images = [];
this.videos = [];
this.audios = [];
this.faceImage = [];
},
// 处理编辑时图片、视频、音频、讲解词媒体资源的上传问题
handleProcessMedia(media) {
......@@ -730,13 +783,13 @@ export default {
this.dialogForm.auidos = str;
},
startLoading() {
this.loading = true;
},
// startLoading() {
// this.loading = true;
// },
endLoading() {
this.loading = false;
},
// endLoading() {
// this.loading = false;
// },
refresh() {
this.$emit("refresh");
......
src/views/login/index.vue
浏览文件 @ 7949edfd
......@@ -90,25 +90,10 @@
</template>
<script>
import { validUsername } from "@/utils/validate";
import { getVerify } from "@/api/user";
export default {
name: "Login",
data() {
// const validateUsername = (rule, value, callback) => {
// if (!validUsername(value)) {
// callback(new Error("请输入用户名"));
// } else {
// callback();
// }
// };
// const validatePassword = (rule, value, callback) => {
// if (value.length < 6) {
// callback(new Error("The password can not be less than 6 digits"));
// } else {
// callback();
// }
// };
return {
loginForm: {
username: "",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论