提交 b5152721 authored 作者: 龙菲's avatar 龙菲

feat:布展单元新增处理完成

上级 7544de0e
......@@ -24,11 +24,11 @@ export function editDisplay(data) {
})
}
export function getDisplayById(data) {
export function getDisplayById(params) {
return request({
url: '/bizExhibition/listById',
method: 'get',
data
params
})
}
......
......@@ -23,8 +23,8 @@
:header-align="item.titleAlign"
>
<template slot-scope="scope">
<template v-if="item.prop == 'faceImage'">
<slot name="faceImage" :scope="scope.row"></slot>
<template v-if="item.prop == 'faceImageUrl'">
<slot name="faceImageUrl" :scope="scope.row"></slot>
</template>
<template v-else-if="item.prop == 'images'">
<slot name="images" :scope="scope.row"></slot>
......
......@@ -2,7 +2,7 @@
<template>
<div class="images-list">
<el-upload
action
action="#"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
......
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656914572472" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7087" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M688 240c-138 0-252 102.8-269.6 236H249c-14.2-35.2-48.7-60-89-60-53 0-96 43-96 96s43 96 96 96c40.3 0 74.8-24.8 89-60h169.3C436 681.2 550 784 688 784c150.2 0 272-121.8 272-272S838.2 240 688 240z m128 298c0 4.4-3.6 8-8 8h-86v86c0 4.4-3.6 8-8 8h-52c-4.4 0-8-3.6-8-8v-86h-86c-4.4 0-8-3.6-8-8v-52c0-4.4 3.6-8 8-8h86v-86c0-4.4 3.6-8 8-8h52c4.4 0 8 3.6 8 8v86h86c4.4 0 8 3.6 8 8v52z" p-id="7088"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656914577126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7227" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M727.296 448c-113.28 0-205.952 84.416-220.928 193.536L256 641.536 256 256l314.56 0c14.848 73.024 79.36 128 156.8 128 88.384 0 160-71.616 160-160S815.68 64 727.296 64c-77.44 0-141.952 54.976-156.8 128L96 192C78.336 192 64 206.336 64 224S78.336 256 96 256L192 256l0 417.536c0 17.664 14.336 32 32 32l282.688 0C523.008 813.184 615.104 896 727.296 896c123.712 0 224-100.288 224-224S851.008 448 727.296 448zM727.296 128c52.928 0 96 43.072 96 96S780.224 320 727.296 320s-96-43.072-96-96S674.368 128 727.296 128z" p-id="7228"></path></svg>
\ No newline at end of file
......@@ -291,7 +291,6 @@ export default {
} else {
return [];
}
// return this.covertStrToArr("faceImage");
},
images() {
if (this.dialogForm.imagesVo) {
......@@ -299,7 +298,6 @@ export default {
} else {
return [];
}
// return this.covertStrToArr("images");
},
videos() {
if (this.dialogForm.videosVo) {
......@@ -307,7 +305,6 @@ export default {
} else {
return [];
}
// return this.covertStrToArr("videos");
},
audios() {
if (this.dialogForm.audiosVo) {
......@@ -315,7 +312,6 @@ export default {
} else {
return [];
}
// return this.covertStrToArr("audios");
},
sayExplain() {
if (this.dialogForm.sayExplainVo) {
......@@ -323,7 +319,6 @@ export default {
} else {
return [];
}
// return this.covertStrToArr("sayExplain");
},
},
watch: {
......@@ -443,7 +438,7 @@ export default {
// 取消编辑
cancelForm() {
this.$emit("handleClose");
this.dialogForm = {};
this.literatureModelValue = [];
},
async handleSubmit() {
......@@ -487,7 +482,6 @@ export default {
} else {
let ps = [];
mediaArr.map((media) => {
let files = this.$refs[media].getFiles();
let fileList = [...files];
if (fileList.length > 0) {
......
......@@ -322,6 +322,9 @@ export default {
// 关闭Dialog
handleClose() {
this.drawerVisible = false;
this.form ={
status:0
}
},
},
};
......
......@@ -16,22 +16,55 @@
>
</el-input>
</el-col> -->
<el-col :span="8">
<el-input placeholder="展览单元标题" v-model="data.title">
<el-col :span="5">
<el-input placeholder="请输入展览单元标题" v-model="data.title">
</el-input>
</el-col>
<el-col :span="13">
<el-input placeholder="展览单元介绍" v-model="data.intro">
<el-col :span="8">
<el-input placeholder="请输入展览单元介绍" v-model="data.intro">
</el-input>
</el-col>
<el-col :span="3" style="display: flex; align-items: center">
<div>
<el-col :span="8">
<el-select
v-model="data.crIds"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词搜索文物"
:remote-method="searchCR"
:loading="loading"
style="width: 100%"
>
<el-option
v-for="item in CRList"
:key="item.crId"
:label="item.name"
:value="item.crId"
>
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<div style="display: flex; align-items: center">
<i
v-if="data.id != 1"
class="el-icon-close delete"
@click="() => remove(node, data)"
></i>
<el-tooltip content="添加子节点" placement="top">
<i class="el-icon-plus plus" @click="() => append(data)"></i>
<svg-icon
@click="() => appendChild(data)"
icon-class="node-child2"
class="plus"
style="font-size: 32px; color: #409eff"
></svg-icon>
</el-tooltip>
<el-tooltip content="添加同级节点" placement="top">
<i
class="el-icon-plus plus"
@click="() => appendPeerNode(node, data)"
></i>
</el-tooltip>
</div>
</el-col>
......@@ -77,12 +110,12 @@
<el-col :span="12" v-show="data.showImageUploader">
<div>单元图片:</div>
<ManualUploader
:files="data.imagesVo"
:files="getImagesVo(data.imagesVo)"
:fileLimit="6"
:fileSize="50"
:fileType="['jpeg', 'jpg', 'png']"
listType="picture-card"
:ref="'unit-images-' + data.id"
:ref="'unit-images-' + data.euId"
/>
</el-col>
</el-collapse-transition>
......@@ -90,13 +123,12 @@
<el-col :span="12" v-show="data.showVideoUploader">
<div>单元视频:</div>
<ManualUploader
:files="data.videosVo"
v-model="data.videosVo"
:files="getVideosVo(data.videosVo)"
:fileLimit="6"
:fileSize="50"
:fileType="['mp4']"
listType="picture-card"
:ref="'unit-videos-' + data.id"
:ref="'unit-videos-' + data.euId"
/>
</el-col>
</el-collapse-transition>
......@@ -107,8 +139,9 @@
</template>
<script>
let id = 1000;
let euId = 1000;
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import { getCulturalRelicList } from "@/api/culturalRelic";
export default {
components: {
ManualUploader,
......@@ -124,30 +157,6 @@ export default {
handler: function (value) {
if (value) {
let treeData = [...value];
treeData.map((item) => {
if (!item.imagesVo || !item.imagesVo > 0) {
item.imagesVo = [];
}
if (!item.videosVo || !item.videosVo > 0) {
item.videosVo = [];
}
});
// changeMediaData(treeData);
// function changeMediaData(arr) {
// if (arr.length > 0) {
// arr.map((item) => {
// if (!item.imagesVo || !item.imagesVo > 0) {
// item.imagesVo = [];
// }
// if (!item.videosVo || !item.videosVo > 0) {
// item.videosVo = [];
// }
// changeMediaData(item.children);
// });
// }
// }
this.treeData = treeData;
}
},
......@@ -157,25 +166,61 @@ export default {
data() {
return {
treeData: [],
CRList: [], //文物列表,关联文物使用
CRModelValue: [], //文献绑定的数组,编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空,提交时改成id 的str
loading: false,
};
},
computed: {
getImagesVo(imagesVo) {
return (imagesVo) => {
return imagesVo ? imagesVo : [];
};
},
getVideosVo(videosVo) {
return (videosVo) => {
return videosVo ? videosVo : [];
};
},
},
mounted() {},
methods: {
// getData() {
// console.log("this.treeData", this.treeData);
// debugger
// return this.treeData;
// },
append(data) {
// debugger;
getUnitData() {
return this.treeData;
},
// 关联文献查询
searchCR(queryString) {
if (!queryString.trim()) {
this.CRList = [];
return;
}
this.loading = true;
const params = {
name: queryString,
page: "1",
limit: "100",
};
setTimeout(async () => {
this.loading = false;
const res = await getCulturalRelicList(params);
if (res.code == 0) {
this.CRList = res.data.records;
} else {
this.CRList = [];
this.$message.error(res.msg);
}
}, 500);
},
appendChild(data) {
const newChild = {
id: id++,
unit: "",
euId: euId++,
// unit: "",
title: "",
intro: "",
showImageUploader: false,
showVideoUploader: false,
images: "",
crIds: [],
// imagesVo: [],
videos: "",
// videosVo: [],
......@@ -186,6 +231,26 @@ export default {
}
data.children.push(newChild);
},
appendPeerNode(node, data) {
// debugger
const parent = node.parent.data;
const newChild = {
euId: euId++,
unit: "",
title: "",
intro: "",
crIds: [],
showImageUploader: false,
showVideoUploader: false,
images: "",
// imagesVo: [],
videos: "",
// videosVo: [],
children: [],
};
parent.push(newChild);
console.log("parent", parent);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
......@@ -264,4 +329,8 @@ export default {
display: flex;
flex-wrap: wrap;
}
// ::v-deep .images-list > div {
// display: flex;
// flex-wrap: wrap;
// }
</style>
......@@ -279,13 +279,47 @@ export default {
return [];
}
},
status() {
return Boolean(Number(this.dialogForm.status));
exhibitionUnits() {
let exhibitionUnits = [];
if (
this.dialogForm.exhibitionUnits &&
this.dialogForm.exhibitionUnits.length > 0
) {
exhibitionUnits = this.dialogForm.exhibitionUnits;
} else {
exhibitionUnits = [
{
euId: 1, //后期去掉
// unit: "", //单元名称,如前言、第一单元,暂时忽略
title: "", //单元标题,类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
showImageUploader: false, //后期去掉
showVideoUploader: false, //后期去掉
},
];
}
return exhibitionUnits;
},
},
watch: {
form(value) {
console.log("value", value);
this.dialogForm = { ...value };
this.dialogForm.status = Boolean(Number(this.dialogForm.status));
debugger
if (this.dialogForm.literature) {
this.literatureList = [...this.dict.literature]
if (this.dialogForm.literature.indexOf(",") != -1) {
this.literatureModelValue = this.dialogForm.literature.split(",");
} else {
this.literatureModelValue = this.dialogForm.literature;
}
}
},
dict(value) {
if (value) {
......@@ -311,19 +345,6 @@ export default {
literatureList: [],
disabled: false,
literatureModelValue: [], //文献绑定的数组,编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空,提交时改成id 的str
exhibitionUnits: [
{
id: 1, //后期去掉
// unit: "", //单元名称,如前言、第一单元,暂时忽略
title: "", //单元标题,类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
videos: "", //视频id集合
crIds: "", //关联文物集合
showImageUploader: false,
showVideoUploader: false,
},
],
};
},
methods: {
......@@ -400,8 +421,8 @@ export default {
);
} else {
//新增
// debugger;
let formData = new FormData();
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
......@@ -409,175 +430,141 @@ export default {
formData.append(media, f.raw);
});
});
// console.log(" this.exhibitionUnits", this.exhibitionUnits);
// 添加布展单元每条记录带的媒体至formData
let unitIds = [];
loopUnits(this.exhibitionUnits);
let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
loopUnits(unitData);
function loopUnits(arr) {
if (arr.length > 0) {
arr.map((item) => {
unitIds.push(item.id);
unitIds.push(item.euId);
if (item.children) {
loopUnits(item.children);
}
});
}
}
// debugger;
unitIds.map((id) => {
unitIds.map(async (euId) => {
console.log(this.$refs["exhibitionUnits"]);
let exhibitionUnitsDom = this.$refs.exhibitionUnits;
let imageFiles = [
...exhibitionUnitsDom.$refs[`unit-images-${id}`].getFiles(),
];
let videoFiles = [
...exhibitionUnitsDom.$refs[`unit-videos-${id}`].getFiles(),
];
let imageFiles = [];
let videoFiles = [];
if (exhibitionUnitsDom.$refs[`unit-images-${euId}`]) {
imageFiles = [
...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(),
];
}
if (exhibitionUnitsDom.$refs[`unit-videos-${euId}`]) {
videoFiles = [
...exhibitionUnitsDom.$refs[`unit-videos-${euId}`].getFiles(),
];
}
if (imageFiles.length > 0) {
imageFiles.forEach((imgFile) => {
formData.append(`unit-images-${id}`, imgFile.raw);
formData.append(`unit-images-${euId}`, imgFile.raw);
});
}
if (videoFiles.length > 0) {
videoFiles.forEach((videoFile) => {
formData.append(`unit-videos-${id}`, videoFile.raw);
formData.append(`unit-videos-${euId}`, videoFile.raw);
});
}
});
// 存放各个file的
// 上传所有媒体文件
let filesObj = {};
debugger
uploadV1(formData).then((upLoadRes) => {
console.log("upLoadRes", upLoadRes);
upLoadRes.data.map((resFile) => {
// 如果已经存在
if (filesObj[resFile.fileKey]) {
filesObj[resFile.fileKey] = [resFile.fileId];
} else {
filesObj[resFile.fileKey].push(resFile.fileId);
}
});
// 如果有没有文件
var formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
[key]: {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
if (formDataArr.length > 0) {
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
upLoadRes.data.map((resFile) => {
if (filesObj[resFile.fileKey]) {
filesObj[resFile.fileKey].push(resFile.fileId);
} else {
filesObj[resFile.fileKey] = [resFile.fileId];
}
});
}
}
// 回填布展自带的媒体文件
mediaArr.forEach((media) => {
if (filesObj[media]) {
this.dialogForm[media] = filesObj[media].join(",");
} else {
this.dialogForm[media] = "";
}
});
// 回填布展单元媒体文件,修改文物为Str,去除id和显示隐藏控制器
// mediaArr.forEach((media) => {
// this.dialogForm[media] = filesObj[media].join(",");
// });
// this.exhibitionUnits.forEach((unit) => {
// for (const key of filesObj) {
// // 如果是图片,且id为当前数据的id,就将改id的images改成idstr
// let type = key.split("-")[1];
// let id = key.split("-")[2];
// if (id === unit.id) {
// switch (type) {
// case "images":
// unit.images = filesObj[key].join(',')
// break;
// case "videos":
// unit.videos = filesObj[key].join(',')
// break;
// }
// }
// }
// });
// debugger
// mediaArr.map((media) => {
// let files = that.$refs[media].getFiles();
// let fileList = [...files];
// if (fileList.length > 0) {
// let formData = new FormData();
// fileList.forEach((file) => {
// formData.append(media, file.raw);
// });
// // ps.push(upload(formData));
// upload(formData).then(res=>{
// let upRes = res.data
// upRes.map(res=>{
backFillUnit(unitData);
debugger;
function backFillUnit(arr) {
if (arr.length > 0) {
arr.map((unit) => {
// 如果进行了文件上传
// })
// })
// } else {
// // ps.push(null);
// }
// });
if (Object.keys(filesObj).length > 0) {
for (const key in filesObj) {
let type = key.split("-")[1];
let euId = key.split("-")[2];
if (euId == unit.euId) {
switch (type) {
case "images":
unit.images = filesObj[key].join(",");
break;
case "videos":
unit.videos = filesObj[key].join(",");
break;
}
}
}
}
// 不管是否进行文件上传,都需要修改文物为Str,去除id和显示隐藏控制器
let crIdArr = unit.crIds;
// debugger;
unit.crIds = crIdArr.join(",");
var deleteArr = [
"euId",
"showImageUploader",
"showVideoUploader",
];
deleteArr.forEach((i) => {
delete unit[i];
});
if (unit.children) {
backFillUnit(unit.children);
}
});
}
}
// Promise.all(ps).then(
// async (allResult) => {
// allResult.forEach((item, index) => {
// if (item) {
// let fileIds = [];
// let files = item.data;
// files.forEach((file) => {
// fileIds.push(file.fileId);
// });
// that.dialogForm[mediaArr[index]] = fileIds.join(",");
// } else {
// that.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 addDisplay(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);
// }
// );
const { deptId, regionCode } = this.userInfo;
const params = {
...this.dialogForm,
exhibitionUnits: unitData,
deptId,
regionCode,
};
// debugger;
params.literature = this.literatureModelValue.join(",");
params.status = this.dialogForm.status ? 1 : 0;
let res = await addDisplay(params);
if (res.code == 0) {
this.$message.success("提交成功!");
this.loading = false;
this.literatureModelValue = [];
this.$emit("handleClose");
this.$emit("refresh");
this.dialogForm = {};
}
}
},
// // 处理编辑时图片、视频、音频、讲解词媒体资源的上传问题
// handleProcessUnitMedia(mediaVo) {
// return new Promise((resolve, reject) => {
// if (mediaVo.length > 0) {
// let fileIds = [];
// let formData = new FormData();
// let fileIdStr = "";
// mediaVo.map((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 = fileIds.join(",");
// resolve(fileIdStr);
// }
// }
// });
// },
// 处理编辑时图片、视频、音频、讲解词媒体资源的上传问题
handleProcessMedia(media) {
return new Promise(async (resolve, reject) => {
......
......@@ -17,7 +17,7 @@ export const title = [{
},
{
prop: "depName",
prop: "deptName",
label: "展览单位",
columnAlign: 'center',
},
......@@ -28,7 +28,7 @@ export const title = [{
},
{
prop: "faceImage",
prop: "faceImageUrl",
label: "封面",
columnAlign: 'center',
isFaceImage: true,
......@@ -51,16 +51,19 @@ export const title = [{
prop: "collectCount",
label: "收藏量",
columnAlign: 'center',
sortable:true
},
{
prop: "loveCount",
label: "点赞量",
columnAlign: 'center',
sortable:true
},
{
prop: "browseCount",
label: "浏览量",
columnAlign: 'center',
sortable:true
},
{
......
......@@ -29,14 +29,14 @@
<template v-slot:displayType="data">
{{ dict.display_type[data.scope.type] }}
</template>
<template v-slot:faceImage="data">
<template v-slot:faceImageUrl="data">
<img
:src="data.scope.faceImage"
:src="data.scope.faceImageUrl"
alt="查看大图"
v-if="data.scope.faceImage"
v-if="data.scope.faceImageUrl"
style="cursor: pointer"
width="100px"
@click="handelPreviewImages(data.scope.faceImage)"
@click="handelPreviewImages(data.scope.faceImageUrl)"
/>
</template>
<template v-slot:images="data">
......@@ -104,10 +104,11 @@
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import { title, operates, operations } from "./config";
import { getList,deleteDisplay } from "@/api/display";
import { getList, deleteDisplay, getDisplayById } from "@/api/display";
import InfoEditDialog from "./components/InfoEditDialog";
import PreviewDialog from "./components/PreviewDialog";
import SearchBar from "@/components/SearchBar";
export default {
components: {
TablePage,
......@@ -182,9 +183,6 @@ export default {
dict(value) {
if (value) {
this.dict = value;
// value.display_type.map((item) => {
// this.displayTypes[item.value] = item.label;
// });
}
},
},
......@@ -209,10 +207,6 @@ export default {
},
},
dicts: ["display_type"],
async created() {
// console.log("this.dict", this.dict);
// this.processDic();
},
mounted() {
this.loadData();
},
......@@ -253,19 +247,19 @@ export default {
switch (value.type) {
case "add":
this.editDialogVisible = true;
this.form = {};
case "view":
break;
case "edit":
this.form = JSON.parse(JSON.stringify(row));
const { exhibitionId } = row;
let editRes = await getDisplayById({ exhibitionId });
this.form = editRes.data;
this.editDialogVisible = true;
break;
case "delete":
// console.log(row.exhibitionId);
let deleteRes = await deleteDisplay([row.exhibitionId])
if (deleteRes.code===0) {
this.loadData()
this.$message.success('删除成功!')
let deleteRes = await deleteDisplay([row.exhibitionId]);
if (deleteRes.code === 0) {
this.loadData();
this.$message.success("删除成功!");
}
break;
}
......@@ -297,7 +291,9 @@ export default {
// 关闭Dialog
handleClose() {
this.editDialogVisible = false;
this.form = {};
this.form = {
status: 0,
};
},
// 关闭预览图片
closeImgViewer() {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论