Skip to content

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

优化布展单元、优化文件删除

上级 6b680583
显示空白字符变更
内嵌 并排
正在显示 包含 179 行增加 和 185 行删除
src/components/Uploader/ManualUploader.vue
浏览文件 @ 7153045d
......@@ -29,8 +29,7 @@
</div>
</template>
<script>
// import { getToken } from "@/utils/auth";
import { deleteFiles } from "@/api/file";
export default {
name: "ManualUploader",
props: {
......@@ -81,12 +80,6 @@ export default {
immediate: true,
deep: true,
},
value(val) {
// debugger;
// console.log(1111,val);
// this.fileList =val
// this.$emit('input',this.fileList)
},
},
computed: {
// 是否显示提示
......@@ -162,11 +155,11 @@ export default {
if (item.uid === file.uid) {
this.fileList.splice(index, 1);
// TODO:调用删除接口
const { fileId } = file;
let res = await deleteFiles([fileId]);
if (res.code == 0) {
this.$message.success("删除成功！");
}
// const { fileId } = file;
// let res = await deleteFiles([fileId]);
// if (res.code == 0) {
// this.$message.success("删除成功！");
// }
}
});
},
......
src/main.js
浏览文件 @ 7153045d
......@@ -14,6 +14,12 @@ import router from './router'
import '@/icons' // icon
import '@/permission' // permission control
import {
getFullUrl
} from '@/utils/index'
Vue.prototype.$getFullUrl = getFullUrl
Vue.use(ElementUI)
Vue.config.productionTip = false
......
src/utils/file.js
浏览文件 @ 7153045d
......@@ -2,18 +2,6 @@ import axios from 'axios'
import {
getToken
} from '@/utils/auth'
import request from "./request";
// var uploadUrl =
// process.env.NODE_ENV === "test" ||
// process.env.NODE_ENV === "development" ?
// "/api/sysFiles/upload" :
// process.env.NODE_ENV + "/sysFiles/upload"
// var uploadV1Url =
// process.env.NODE_ENV === "test" ||
// process.env.NODE_ENV === "development" ?
// "/api/sysFiles/v1/upload" :
// process.env.NODE_ENV + "/sysFiles/v1/upload"
var uploadUrl = process.env.VUE_APP_BASE_API + "/sysFiles/upload"
var uploadV1Url = process.env.VUE_APP_BASE_API + "/sysFiles/v1/upload"
......@@ -83,7 +71,7 @@ export function importZip(data, callback, cancelCallBack) {
cancelCallBack(c)
})
}).then(response => {
resolve(response.data)
resolve(response)
}).catch(error => {
reject(error)
})
......
src/utils/index.js
浏览文件 @ 7153045d
......@@ -168,3 +168,14 @@ export const Throttle = (fn, t) => {
}
}
// 获取完整的url，根据环境进行配置
export function getFullUrl(url) {
let fullUrl = ''
if (url && url.indexOf('http') != -1 && url.indexOf('files') != -1) {
let urlArr = url.split('files')
fullUrl = '/files' + urlArr[1]
} else {
fullUrl = url
}
return fullUrl
}
src/views/culturalRelic/components/InfoEditDialog.vue
浏览文件 @ 7153045d
......@@ -123,7 +123,6 @@
<el-form-item label="关联文献" :label-width="formLabelWidth">
<el-select
v-model="literatureValues"
:value="literatureNames"
multiple
filterable
remote
......@@ -255,6 +254,7 @@ import AutoUploader from "@/components/Uploader/AutoUploader.vue";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import { mapGetters } from "vuex";
import { uploadV1 } from "@/utils/file";
import { deleteFiles } from "@/api/file";
export default {
name: "InfoEditDialog",
components: {
......@@ -335,15 +335,7 @@ export default {
},
formLabelWidth: "100px",
loading: false,
upLoadAddress: process.env.VUE_APP_BASE_API + "/sysFiles/upload",
themeTypeOptions: [
{ label: "模板主题1", value: "主题一" },
{ label: "模板主题2", value: "主题二" },
{ label: "模板主题3", value: "主题三" },
],
literatureList: [],
disabled: false,
literatureNames: [],
literatureValues: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
faceImage: [],
images: [],
......@@ -420,10 +412,14 @@ export default {
this.loading = true;
// 已存在的文件的对象
let successFilesObj = [];
// 需要被删除的文件Id
let deleteFileArr = [];
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
let newFiles = {};
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
let fileIds = [];
files.map((f) => {
switch (f.status) {
case "ready":
......@@ -435,11 +431,24 @@ export default {
} else {
successFilesObj[media] = [f];
}
fileIds.push(f.fileId);
break;
}
});
newFiles[media] = fileIds;
});
mediaArr.map((media) => {
if (this.dialogForm[media]) {
let oldFileIdArr = this.dialogForm[media].split(",");
oldFileIdArr.map((oldId) => {
if (newFiles[media].indexOf(oldId) == -1) {
console.log(oldId + "已被删除");
deleteFileArr.push(oldId);
}
});
}
});
// 上传所有媒体文件
let filesObj = {};
......@@ -517,7 +526,8 @@ export default {
params.textureType[params.textureType.length - 1].trim();
}
let res = await editCulturalRelic(params);
if (res.code == 0) {
let deleteRes = await deleteFiles(deleteFileArr);
if (res.code == 0 && deleteRes.code == 0) {
this.$message.success("修改成功！");
this.loading = false;
this.$emit("handleClose");
......
src/views/display/components/ExhibitionUnit.vue
浏览文件 @ 7153045d
......@@ -6,45 +6,30 @@
node-key="euId"
default-expand-all
:expand-on-click-node="false"
v-if="treeData.length > 0"
>
<div class="exhibition-units-tree-node" slot-scope="{ node, data }">
<el-row :gutter="10">
<el-col :span="5">
<el-input placeholder="请输入展览单元标题" v-model="data.title">
</el-input>
</el-col>
<el-col :span="8">
<el-input placeholder="请输入展览单元介绍" v-model="data.intro">
<el-row :gutter="20">
<el-col :span="10" class="mg-bt20">
<el-input
placeholder="请输入层级（如：第一单元）"
v-model="data.unit"
>
</el-input>
<span style="display: inline-block; padding: 0 4px">—</span>
</el-col>
<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 :span="10" class="mg-bt20">
<el-input placeholder="请输入标题" v-model="data.title"> </el-input>
</el-col>
<el-col :span="3">
<el-col :span="4">
<div style="display: flex; align-items: center">
<el-tooltip content="删除当前节点" placement="top">
<i
v-if="data.euId !== treeData[0].euId"
class="el-icon-close delete"
@click="() => remove(node, data)"
></i>
</el-tooltip>
<el-tooltip content="添加子节点" placement="top">
<svg-icon
@click="() => appendChild(data)"
......@@ -61,6 +46,39 @@
</el-tooltip>
</div>
</el-col>
<el-col :span="20" class="mg-bt20">
<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="20">
<el-input
placeholder="请输入介绍"
v-model="data.intro"
type="textarea"
rows="4"
maxlength="800"
show-word-limit
>
</el-input>
</el-col>
</el-row>
<el-row :gutter="10">
<!-- <el-col :span="24" style="display: flex; flex-direction: column">
......@@ -85,7 +103,7 @@
</el-row>
<el-collapse-transition>
<el-row :gutter="50">
<el-col :span="24">
<el-col :span="12">
<div>单元图片：</div>
<ManualImageUploader
v-model="data.imagesVo"
......@@ -97,7 +115,7 @@
:ref="'unit-images-' + data.euId"
/>
</el-col>
<el-col :span="24">
<el-col :span="12">
<div>单元视频：</div>
<ManualVideoUploader
v-model="data.videosVo"
......@@ -113,6 +131,14 @@
</el-collapse-transition>
</div>
</el-tree>
<el-button
v-else
type="primary"
icon="el-icon-circle-plus-outline"
@click="handleAddUnit"
>添加展览单元</el-button
>
</div>
</template>
......@@ -137,27 +163,8 @@ export default {
handler: function (value) {
if (value) {
let that = this;
// 回填布展单元中的文物、增加显示媒体的字段
// 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];
that.treeData = JSON.parse(JSON.stringify(value));
if (value.length > 0) {
loopData(that.treeData);
function loopData(arr) {
if (arr.length > 0) {
......@@ -165,17 +172,12 @@ export default {
arr.forEach((item) => {
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", []);
}
......@@ -186,15 +188,16 @@ export default {
}
}
}
}
},
immediate: true,
deep: true,
},
},
data() {
return {
treeData: [],
CRList: [], //文物列表，关联文物使用
// CRModelValue: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
loading: false,
imagesVo: [],
videosVo: [],
......@@ -268,25 +271,31 @@ export default {
children: [],
};
parent.push(newChild);
console.log("parent", parent);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex((d) => d.id === data.id);
const children = parent.data;
const index = children.findIndex((d) => d.euId === data.euId);
children.splice(index, 1);
},
handleAddUnitMedia(node, data) {
// if (data.images || data.videos) {
// this.$set(data, "showMediaUploader", true);
// }
// debugger;
this.$set(data, "showMediaUploader", !data.showMediaUploader);
},
// handleAddUnitVideo(node, data) {
// this.$set(data, "showVideoUploader", !data.showVideoUploader);
// },
handleAddUnit() {
let obj = {
euId: 1, //后期去掉
unit: "", //单元名称,如前言、第一单元，暂时忽略
title: "", //单元标题，类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
// showMediaUploader: false,
};
this.$set(this.treeData, 0, obj);
},
},
};
</script>
......@@ -296,6 +305,8 @@ export default {
display: flex;
width: 100%;
flex-direction: column;
border: 1px #ccc dashed;
padding: 40px;
}
::v-deep .el-tree-node__content {
// padding: 10px;
......@@ -355,18 +366,14 @@ export default {
padding: 4px;
border-radius: 4px;
box-sizing: border-box;
// &:hover {
// background-color: rgba($color: #000000, $alpha: 0.05);
// //
// }
}
}
// ::v-deep .el-upload-list--picture-card {
// display: flex;
// flex-wrap: wrap;
// }
// ::v-deep .images-list > div {
// display: flex;
// flex-wrap: wrap;
// }
.mg-bt20 {
margin-bottom: 20px;
}
::v-deep .images-list {
& > div {
white-space: pre-wrap;
}
}
</style>
src/views/display/components/InfoEditDialog.vue
浏览文件 @ 7153045d
......@@ -78,7 +78,7 @@
</el-input>
</el-form-item>
<el-form-item label="展览封面" :label-width="formLabelWidth">
<FaceImageUploader
<ManualUploader
:fileLimit="1"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
......@@ -87,7 +87,7 @@
/>
</el-form-item>
<el-form-item label="展览视频" :label-width="formLabelWidth">
<VideoUploader
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="50"
......@@ -163,7 +163,7 @@
<el-switch v-model="dialogForm.status"> </el-switch>
</el-form-item>
<el-form-item label="展览图片" :label-width="formLabelWidth">
<ImageUploader
<ManualUploader
:files="images"
:fileLimit="20"
:fileSize="50"
......@@ -174,7 +174,7 @@
/>
</el-form-item>
<el-form-item label="展览音频" :label-width="formLabelWidth">
<AudioUploader
<ManualUploader
:files="audios"
:fileLimit="1"
:fileSize="50"
......@@ -192,29 +192,8 @@
: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>
<!--
-->
<!-- <el-form-item label="展览单位" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.dep_id"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="所在地区" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.region"
autocomplete="off"
></el-input>
</el-form-item>-->
</el-form>
</div>
<div class="dialog-footer">
......@@ -229,24 +208,16 @@
<script>
import { addDisplay, editDisplay } from "@/api/display";
import { mapGetters } from "vuex";
// import ManualUploader from "@/components/Uploader/ManualUploader.vue";
const FaceImageUploader = () =>
import("@/components/Uploader/ManualUploader.vue");
const ImageUploader = () => import("@/components/Uploader/ManualUploader.vue");
const VideoUploader = () => import("@/components/Uploader/ManualUploader.vue");
const AudioUploader = () => import("@/components/Uploader/ManualUploader.vue");
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import ExhibitionUnit from "./ExhibitionUnit.vue";
import { upload, uploadV1 } from "@/utils/file";
import { themeTypeOptions } from "../contants";
import { deleteFiles } from "@/api/file";
export default {
name: "InfoEditDialog",
components: {
// ManualUploader,
ManualUploader,
ExhibitionUnit,
FaceImageUploader,
ImageUploader,
VideoUploader,
AudioUploader,
},
props: {
visible: {
......@@ -287,18 +258,18 @@ export default {
this.dialogForm.exhibitionUnits.length == 0) ||
!this.dialogForm.exhibitionUnits
) {
this.dialogForm.exhibitionUnits = [
{
euId: 1, //后期去掉
// unit: "", //单元名称,如前言、第一单元，暂时忽略
title: "", //单元标题，类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
// showMediaUploader: false,
},
];
// this.dialogForm.exhibitionUnits = [
// {
// euId: 1, //后期去掉
// // unit: "", //单元名称,如前言、第一单元，暂时忽略
// title: "", //单元标题，类似主题名称
// intro: "", //单元介绍
// images: "", //图片id集合
// videos: "", //视频id集合
// crIds: [], //关联文物集合
// // showMediaUploader: false,
// },
// ];
} else {
loopUnit(this.dialogForm.exhibitionUnits);
function loopUnit(arr) {
......@@ -366,9 +337,6 @@ export default {
}
});
}
// if (this.dialogForm.exhibitionUnits.length > 0) {
// }
}
},
immediate: true,
......@@ -417,13 +385,6 @@ export default {
};
setTimeout(async () => {
this.loading = false;
// const res = await getLiteratureList(params);
// if (res.code == 0) {
// this.literatureList = res.data.records;
// } else {
// this.literatureList = [];
// this.$message.error(res.msg);
// }
const res = await this.$store.dispatch("dict/getLtList", {
hasPer: false,
params,
......@@ -481,10 +442,14 @@ export default {
let formData = new FormData();
// 已存在的文件的对象
let successFilesObj = [];
// 需要被删除的文件Id
let deleteFileArr = [];
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
let newFiles = {};
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
let fileIds = [];
files.map((f) => {
switch (f.status) {
case "ready":
......@@ -496,11 +461,25 @@ export default {
} else {
successFilesObj[media] = [f];
}
fileIds.push(f.fileId);
break;
}
});
newFiles[media] = fileIds;
});
mediaArr.map((media) => {
if (this.dialogForm[media]) {
let oldFileIdArr = this.dialogForm[media].split(",");
oldFileIdArr.map((oldId) => {
if (newFiles[media].indexOf(oldId) == -1) {
console.log(oldId + "已被删除");
deleteFileArr.push(oldId);
}
});
}
});
// return
let unitIds = [];
let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
// debugger
......@@ -568,7 +547,7 @@ export default {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
console.log("formDataArr,length", formDataArr.length);
// console.log("formDataArr,length", formDataArr.length);
// formData有长度时再进行上传
if (formDataArr.length > 0) {
let upLoadRes = await uploadV1(formData);
......@@ -582,7 +561,6 @@ export default {
});
}
}
// console.log('filesObj',filesObj);
// 1、回填之前先获取已存在的文件
for (const key in successFilesObj) {
// 如果文件id中含有已上传成功的某个key，如images，则将已上传成功的images推入文件id集合
......@@ -599,7 +577,6 @@ export default {
filesObj[key] = ids;
}
}
// return;
// 2、回填布展自带的媒体文件
mediaArr.forEach((media) => {
if (filesObj[media]) {
......@@ -729,7 +706,8 @@ export default {
console.log("修改参数-----------", params);
// return;
let res = await editDisplay(params);
if (res.code == 0) {
let deleteRes = await deleteFiles(deleteFileArr);
if (res.code == 0 && deleteRes.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
this.$emit("refresh");
......
src/views/display/index.vue
浏览文件 @ 7153045d
......@@ -32,9 +32,9 @@
</template>
<template v-slot:faceImageUrl="data">
<img
:src="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
:src="$getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)"
alt="查看大图"
v-if="data.scope.faceImagePressUrl || data.scope.faceImageUrl"
v-if="$getFullUrl(data.scope.faceImagePressUrl || data.scope.faceImageUrl)"
style="cursor: pointer"
width="100px"
@click="handelPreviewImages(data.scope.faceImageUrl)"
......@@ -42,17 +42,17 @@
</template>
<template v-slot:images="data">
<span
v-if="data.scope.images"
v-if="$getFullUrl(data.scope.images)"
style="color: #409eff; cursor: pointer"
@click="handelPreviewImages(data.scope.images)"
@click="handelPreviewImages($getFullUrl(data.scope.images))"
>查看大图</span
>
</template>
<template v-slot:videos="data">
<span
v-if="data.scope.videos"
v-if="$getFullUrl(data.scope.videos)"
style="color: #409eff; cursor: pointer"
@click="handelPreviewVideos(data.scope.videos)"
@click="handelPreviewVideos($getFullUrl(data.scope.videos))"
>查看视频</span
>
</template>
......@@ -179,7 +179,8 @@ export default {
faceImage: "", // 封面（图片1张)
images: "", //展览图片
videos: "", //展览视频
audios: "", //展览音频
audios: "",//展览音频
exhibitionUnits:[]//布展单元
},
loading: false,
imgViewerVisible: false,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论