Skip to content

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

布展单元编辑大致完成

上级 158cc89c
隐藏空白字符变更
内嵌 并排
正在显示 包含 363 行增加 和 316 行删除
src/components/Uploader/ManualUploader.vue
浏览文件 @ 67cff57e
...@@ -33,10 +33,10 @@ ...@@ -33,10 +33,10 @@
export default { export default {
name: "ManualUploader", name: "ManualUploader",
props: { props: {
// 用于v-model绑定 // // 用于v-model绑定
value: { // value: {
type: [Number, Array, String], // type: [Number, Array, String],
}, // },
files: { files: {
type: Array, type: Array,
default: () => [], default: () => [],
...@@ -80,15 +80,14 @@ export default { ...@@ -80,15 +80,14 @@ export default {
watch: { watch: {
files: { files: {
handler: function (val) { handler: function (val) {
this.fileList = [...val]; this.fileList = JSON.parse(JSON.stringify(val));
// debugger;
if (this.value) {
this.$emit("input", this.fileList);
}
}, },
immediate: true, immediate: true,
deep: true, deep: true,
}, },
fileList(value) {
// debugger;
},
}, },
computed: { computed: {
// 是否显示提示 // 是否显示提示
...@@ -163,15 +162,17 @@ export default { ...@@ -163,15 +162,17 @@ export default {
this.fileList.map((item, index) => { this.fileList.map((item, index) => {
if (item.uid === file.uid) { if (item.uid === file.uid) {
this.fileList.splice(index, 1); this.fileList.splice(index, 1);
// TODO:调用删除接口
} }
}); });
}, },
handleChange(file, fileList) { handleChange(file, fileList) {
let that = this
if (file.status === "ready") { if (file.status === "ready") {
this.handleBeforeUpload(file) this.handleBeforeUpload(file)
.then((res) => { .then((res) => {
this.fileList.push(res); that.fileList.push(res);
}) })
.catch((err) => { .catch((err) => {
console.log("err", err); console.log("err", err);
......
src/layout/components/Sidebar/Logo.vue
浏览文件 @ 67cff57e
...@@ -24,7 +24,7 @@ export default { ...@@ -24,7 +24,7 @@ export default {
}, },
data() { data() {
return { return {
title: '贵州省精品展览展示后台管理系统', title: '贵州省精品展览展示平台',
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png' logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
} }
} }
...@@ -67,7 +67,7 @@ export default { ...@@ -67,7 +67,7 @@ export default {
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
line-height: 50px; line-height: 50px;
font-size: 12px; font-size: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle; vertical-align: middle;
} }
......
src/settings.js
浏览文件 @ 67cff57e
module.exports = { module.exports = {
title: '贵州省精品展览展示系统', title: '贵州省精品展览展示平台',
/** /**
* @type {boolean} true | false * @type {boolean} true | false
......
src/views/culturalRelic/components/InfoEditDialog.vue
浏览文件 @ 67cff57e
...@@ -115,7 +115,8 @@ ...@@ -115,7 +115,8 @@
</el-form-item> </el-form-item>
<el-form-item label="关联文献" :label-width="formLabelWidth"> <el-form-item label="关联文献" :label-width="formLabelWidth">
<el-select <el-select
v-model="literatureModelValue" v-model="literatureValues"
:value="literatureNames"
multiple multiple
filterable filterable
remote remote
...@@ -128,7 +129,7 @@ ...@@ -128,7 +129,7 @@
<el-option <el-option
v-for="item in literatureList" v-for="item in literatureList"
:key="item.literatureId" :key="item.literatureId"
:label="`${item.name}(${item.authors})`" :label="item.name"
:value="item.literatureId" :value="item.literatureId"
> >
</el-option> </el-option>
...@@ -324,17 +325,34 @@ export default { ...@@ -324,17 +325,34 @@ export default {
watch: { watch: {
form: { form: {
handler(value) { handler(value) {
this.dialogForm = { ...value }; this.dialogForm = JSON.parse(JSON.stringify(value));
// 回填状态
this.dialogForm.status = Boolean(Number(this.dialogForm.status));
// debugger
// 回填文献
if (
this.dialogForm.literatureVo &&
this.dialogForm.literatureVo.length > 0
) {
this.literatureList = [...this.dict.literature];
this.literatureNames = [];
this.literatureValues = [];
this.dialogForm.literatureVo.forEach((lt) => {
if (this.literatureValues) {
this.literatureValues.push(lt.literatureId);
}
if (this.literatureNames) {
this.literatureNames.push(lt.name);
}
});
}
}, },
immediate: true, immediate: true,
deep: true, deep: true,
}, },
dict(value) { dict(value) {
if (value) { if (value) {
console.log(value); this.dict = value;
// value.display_type.map((item) => {
// this.displayTypes[item.value] = item.label;
// });
} }
}, },
}, },
...@@ -360,7 +378,8 @@ export default { ...@@ -360,7 +378,8 @@ export default {
], ],
literatureList: [], literatureList: [],
disabled: false, disabled: false,
literatureModelValue: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str literatureNames: [],
literatureValues: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
}; };
}, },
async created() { async created() {
...@@ -369,42 +388,6 @@ export default { ...@@ -369,42 +388,6 @@ export default {
}); });
}, },
methods: { methods: {
covertStrToArr(name) {
var fileName = "";
switch (name) {
case "videos":
fileName = "视频";
break;
case "audios":
fileName = "音频";
break;
case "images":
fileName = "图片";
break;
case "faceImage":
fileName = "图片";
break;
case "sayExplain":
fileName = "文件";
break;
}
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,
name: fileName + index,
};
});
} else {
return [{ url: form[name], name }];
}
} else {
return [];
}
},
// 关联文献查询 // 关联文献查询
searchLiterature(queryString) { searchLiterature(queryString) {
if (!queryString.trim()) { if (!queryString.trim()) {
...@@ -438,7 +421,7 @@ export default { ...@@ -438,7 +421,7 @@ export default {
// 取消编辑 // 取消编辑
cancelForm() { cancelForm() {
this.$emit("handleClose"); this.$emit("handleClose");
this.literatureModelValue = []; this.literatureValues = [];
}, },
async handleSubmit() { async handleSubmit() {
...@@ -463,13 +446,13 @@ export default { ...@@ -463,13 +446,13 @@ export default {
this.dialogForm[mediaArr[index]] = item; this.dialogForm[mediaArr[index]] = item;
}); });
const params = { ...this.dialogForm }; const params = { ...this.dialogForm };
params.literature = this.literatureModelValue.join(","); params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0; params.status = this.dialogForm.status ? 1 : 0;
let res = await editCulturalRelic(params); let res = await editCulturalRelic(params);
if (res.code == 0) { if (res.code == 0) {
this.$message.success("修改成功！"); this.$message.success("修改成功！");
this.loading = false; this.loading = false;
this.literatureModelValue = []; this.literatureValues = [];
this.$emit("handleClose"); this.$emit("handleClose");
this.$emit("refresh"); this.$emit("refresh");
this.dialogForm = {}; this.dialogForm = {};
...@@ -510,13 +493,13 @@ export default { ...@@ -510,13 +493,13 @@ export default {
}); });
const { deptId, regionCode } = this.userInfo; const { deptId, regionCode } = this.userInfo;
const params = { ...this.dialogForm, deptId, regionCode }; const params = { ...this.dialogForm, deptId, regionCode };
params.literature = this.literatureModelValue.join(","); params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0; params.status = this.dialogForm.status ? 1 : 0;
let res = await addCulturalRelic(params); let res = await addCulturalRelic(params);
if (res.code == 0) { if (res.code == 0) {
this.$message.success("提交成功！"); this.$message.success("提交成功！");
this.loading = false; this.loading = false;
this.literatureModelValue = []; this.literatureValues = [];
this.$emit("handleClose"); this.$emit("handleClose");
this.$emit("refresh"); this.$emit("refresh");
this.dialogForm = {}; this.dialogForm = {};
......
src/views/culturalRelic/index.vue
浏览文件 @ 67cff57e
...@@ -171,19 +171,6 @@ export default { ...@@ -171,19 +171,6 @@ export default {
dict(value) { dict(value) {
if (value) { if (value) {
this.dict = value; this.dict = value;
// let culturalLevel = { ...this.dict.cultural_relic_level };
// let options = [];
// for (const key in culturalLevel) {
// let obj = {};
// obj["label"] = culturalLevel[key];
// obj["value"] = key;
// options.push(obj);
// }
// this.searchConfig.map((item) => {
// if (item.prop == "level") {
// item.selectOptions = options;
// }
// });
} }
}, },
}, },
......
src/views/display/components/ExhibitionUnit.vue
浏览文件 @ 67cff57e
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="exhibiton-unit" ref="exhibitionUnit"> <div class="exhibiton-unit" ref="exhibitionUnit">
<el-tree <el-tree
:data="treeData" :data="treeData"
node-key="id" node-key="euId"
default-expand-all default-expand-all
:expand-on-click-node="false" :expand-on-click-node="false"
> >
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-select <el-select
v-model="data.crIds" v-model="CRModelValue"
multiple multiple
filterable filterable
remote remote
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<el-col :span="3"> <el-col :span="3">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<i <i
v-if="data.id != 1" v-if="data.euId != 1"
class="el-icon-close delete" class="el-icon-close delete"
@click="() => remove(node, data)" @click="() => remove(node, data)"
></i> ></i>
...@@ -74,42 +74,52 @@ ...@@ -74,42 +74,52 @@
<div class="buttons"> <div class="buttons">
<el-button <el-button
type="text" type="text"
@click.native="handleAddUnitImage(node, data)" @click.native="handleAddUnitMedia(node, data)"
> >
<div class="add-image"> <div class="add-image">
<svg-icon <svg-icon
:icon-class="data.showImageUploader ? 'fold' : 'image'" :icon-class="
data.showMediaUploader || data.imagesVo || data.videosVo
? 'fold'
: 'image'
"
/> />
<span>{{ <span>{{
data.showImageUploader ? "收起" : "添加/显示" data.showMediaUploader || data.imagesVo || data.videosVo
? "收起"
: "添加/显示"
}}</span> }}</span>
<span>单元图片</span> <span>单元媒体资源</span>
</div> </div>
</el-button> </el-button>
<el-button <!-- <el-button
type="text" type="text"
@click.native="handleAddUnitVideo(node, data)" @click.native="handleAddUnitVideo(node, data)"
> >
<div class="add-image"> <div class="add-image">
<svg-icon <svg-icon
:icon-class="data.showVideoUploader ? 'fold' : 'video'" :icon-class="
data.showVideoUploader || data.videosVo ? 'fold' : 'video'
"
/> />
<span>{{ <span>{{
data.showVideoUploader ? "收起" : "添加/显示" data.showVideoUploader || data.videosVo0
? "收起"
: "添加/显示"
}}</span> }}</span>
<span>单元视频</span> <span>单元视频</span>
</div></el-button </div></el-button
> > -->
</div> </div>
</el-col> </el-col>
<!-- <el-col :span="12">123</el-col> --> <!-- <el-col :span="12">123</el-col> -->
</el-row> </el-row>
<el-row :gutter="50"> <el-collapse-transition>
<el-collapse-transition> <el-row :gutter="50" v-show="data.showMediaUploader">
<el-col :span="12" v-show="data.showImageUploader"> <el-col :span="12">
<div>单元图片：</div> <div>单元图片：</div>
<ManualUploader <ManualImageUploader
:files="getImagesVo(data.imagesVo)" :files="getImagesVo(data.imagesVo)"
:fileLimit="6" :fileLimit="6"
:fileSize="50" :fileSize="50"
...@@ -118,11 +128,9 @@ ...@@ -118,11 +128,9 @@
:ref="'unit-images-' + data.euId" :ref="'unit-images-' + data.euId"
/> />
</el-col> </el-col>
</el-collapse-transition> <el-col :span="12">
<el-collapse-transition>
<el-col :span="12" v-show="data.showVideoUploader">
<div>单元视频：</div> <div>单元视频：</div>
<ManualUploader <ManualVideoUploader
:files="getVideosVo(data.videosVo)" :files="getVideosVo(data.videosVo)"
:fileLimit="6" :fileLimit="6"
:fileSize="50" :fileSize="50"
...@@ -131,8 +139,8 @@ ...@@ -131,8 +139,8 @@
:ref="'unit-videos-' + data.euId" :ref="'unit-videos-' + data.euId"
/> />
</el-col> </el-col>
</el-collapse-transition> </el-row>
</el-row> </el-collapse-transition>
</div> </div>
</el-tree> </el-tree>
</div> </div>
...@@ -140,11 +148,13 @@ ...@@ -140,11 +148,13 @@
<script> <script>
let euId = 1000; let euId = 1000;
import ManualUploader from "@/components/Uploader/ManualUploader.vue"; import ManualImageUploader from "@/components/Uploader/ManualUploader.vue";
import ManualVideoUploader from "@/components/Uploader/ManualUploader.vue";
import { getCulturalRelicList } from "@/api/culturalRelic"; import { getCulturalRelicList } from "@/api/culturalRelic";
export default { export default {
components: { components: {
ManualUploader, ManualImageUploader,
ManualVideoUploader,
}, },
props: { props: {
exhibitionUnits: { exhibitionUnits: {
...@@ -156,8 +166,33 @@ export default { ...@@ -156,8 +166,33 @@ export default {
exhibitionUnits: { exhibitionUnits: {
handler: function (value) { handler: function (value) {
if (value) { if (value) {
let that = this;
let treeData = [...value]; let treeData = [...value];
this.treeData = treeData; that.treeData = treeData;
loopData(that.treeData);
// debugger
function loopData(arr) {
if (arr.length > 0) {
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.children) {
loopData(item.children);
}
});
}
}
} }
}, },
immediate: true, immediate: true,
...@@ -217,8 +252,9 @@ export default { ...@@ -217,8 +252,9 @@ export default {
// unit: "", // unit: "",
title: "", title: "",
intro: "", intro: "",
showImageUploader: false, showMediaUploader: false,
showVideoUploader: false, // showImageUploader: false,
// showVideoUploader: false,
images: "", images: "",
crIds: [], crIds: [],
// imagesVo: [], // imagesVo: [],
...@@ -240,8 +276,9 @@ export default { ...@@ -240,8 +276,9 @@ export default {
title: "", title: "",
intro: "", intro: "",
crIds: [], crIds: [],
showImageUploader: false, showMediaUploader: false,
showVideoUploader: false, // showImageUploader: false,
// showVideoUploader: false,
images: "", images: "",
// imagesVo: [], // imagesVo: [],
videos: "", videos: "",
...@@ -258,12 +295,15 @@ export default { ...@@ -258,12 +295,15 @@ export default {
children.splice(index, 1); children.splice(index, 1);
}, },
handleAddUnitImage(node, data) { handleAddUnitMedia(node, data) {
this.$set(data, "showImageUploader", !data.showImageUploader); if (data.imagesVo.length > 0 || data.videosVo.length) {
}, this.$set(data, "showMediaUploader", true);
handleAddUnitVideo(node, data) { }
this.$set(data, "showVideoUploader", !data.showVideoUploader); this.$set(data, "showMediaUploader", !data.showMediaUploader);
}, },
// handleAddUnitVideo(node, data) {
// this.$set(data, "showVideoUploader", !data.showVideoUploader);
// },
}, },
}; };
</script> </script>
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ 67cff57e
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="展览封面" :label-width="formLabelWidth"> <el-form-item label="展览封面" :label-width="formLabelWidth">
<ManualUploader <FaceImageUploader
:fileLimit="1" :fileLimit="1"
listType="picture-card" listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']" :fileType="['png', 'jpeg', 'jpg']"
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="展览视频" :label-width="formLabelWidth"> <el-form-item label="展览视频" :label-width="formLabelWidth">
<ManualUploader <VideoUploader
:files="videos" :files="videos"
:fileLimit="6" :fileLimit="6"
:fileSize="50" :fileSize="50"
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
</el-form-item> </el-form-item>
<el-form-item label="关联文献" :label-width="formLabelWidth"> <el-form-item label="关联文献" :label-width="formLabelWidth">
<el-select <el-select
v-model="literatureModelValue" v-model="literatureValues"
multiple multiple
filterable filterable
remote remote
...@@ -117,11 +117,12 @@ ...@@ -117,11 +117,12 @@
:remote-method="searchLiterature" :remote-method="searchLiterature"
:loading="loading" :loading="loading"
style="width: 100%" style="width: 100%"
ref="literatureSelect"
> >
<el-option <el-option
v-for="item in literatureList" v-for="item in literatureList"
:key="item.literatureId" :key="item.literatureId"
:label="`${item.name}(${item.authors})`" :label="item.name"
:value="item.literatureId" :value="item.literatureId"
> >
</el-option> </el-option>
...@@ -132,7 +133,7 @@ ...@@ -132,7 +133,7 @@
<el-switch v-model="dialogForm.status"> </el-switch> <el-switch v-model="dialogForm.status"> </el-switch>
</el-form-item> </el-form-item>
<el-form-item label="展览图片" :label-width="formLabelWidth"> <el-form-item label="展览图片" :label-width="formLabelWidth">
<ManualUploader <ImageUploader
:files="images" :files="images"
:fileLimit="6" :fileLimit="6"
:fileSize="50" :fileSize="50"
...@@ -145,7 +146,7 @@ ...@@ -145,7 +146,7 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="展览音频" :label-width="formLabelWidth"> <el-form-item label="展览音频" :label-width="formLabelWidth">
<ManualUploader <AudioUploader
:files="audios" :files="audios"
:fileLimit="1" :fileLimit="1"
:fileSize="50" :fileSize="50"
...@@ -162,7 +163,7 @@ ...@@ -162,7 +163,7 @@
<el-row> <el-row>
<el-form-item label="布展单元" :label-width="formLabelWidth"> <el-form-item label="布展单元" :label-width="formLabelWidth">
<ExhibitionUnit <ExhibitionUnit
:exhibitionUnits="exhibitionUnits" :exhibitionUnits="dialogForm.exhibitionUnits"
ref="exhibitionUnits" ref="exhibitionUnits"
/> />
</el-form-item> </el-form-item>
...@@ -210,14 +211,23 @@ ...@@ -210,14 +211,23 @@
import { getLiteratureList } from "@/api/literature"; import { getLiteratureList } from "@/api/literature";
import { addDisplay, editDisplay } from "@/api/display"; import { addDisplay, editDisplay } from "@/api/display";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import ManualUploader from "@/components/Uploader/ManualUploader.vue"; // 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 ExhibitionUnit from "./ExhibitionUnit.vue"; import ExhibitionUnit from "./ExhibitionUnit.vue";
import { upload, uploadV1 } from "@/utils/upload"; import { upload, uploadV1 } from "@/utils/upload";
export default { export default {
name: "InfoEditDialog", name: "InfoEditDialog",
components: { components: {
ManualUploader, // ManualUploader,
ExhibitionUnit, ExhibitionUnit,
FaceImageUploader,
ImageUploader,
VideoUploader,
AudioUploader,
}, },
props: { props: {
visible: { visible: {
...@@ -279,47 +289,57 @@ export default { ...@@ -279,47 +289,57 @@ export default {
return []; return [];
} }
}, },
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: { watch: {
form(value) { form: {
console.log("value", value); handler: function (value) {
this.dialogForm = { ...value }; if (value) {
this.dialogForm.status = Boolean(Number(this.dialogForm.status)); this.dialogForm = JSON.parse(JSON.stringify(value));
debugger if (this.dialogForm.exhibitionId) {
if (this.dialogForm.literature) { // 编辑
this.literatureList = [...this.dict.literature] // 回填状态
this.dialogForm.status = Boolean(Number(this.dialogForm.status));
if (this.dialogForm.literature.indexOf(",") != -1) { // 回填文献
this.literatureModelValue = this.dialogForm.literature.split(","); // this.literatureList = [...this.dict.literature]; //获取字典中的文献
} else {
this.literatureModelValue = this.dialogForm.literature; // this.literatureNames = [];
this.literatureValues = [];
if (this.dialogForm.literatureVo.length > 0) {
this.literatureList = this.dialogForm.literatureVo
this.dialogForm.literatureVo.forEach((lt) => {
if (this.literatureValues) {
this.literatureValues.push(lt.literatureId);
}
// if (this.literatureNames) {
// this.literatureNames.push(lt.name);
// }
});
}
// 回填布展单元中的文物
// TODO:
// 先获取所有文物列表
} else {
// 新增
// 初始化布展单元
this.dialogForm.exhibitionUnits = [
{
euId: 1, //后期去掉
// unit: "", //单元名称,如前言、第一单元，暂时忽略
title: "", //单元标题，类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
showMediaUploader: false,
// showImageUploader: false, //后期去掉
// showVideoUploader: false, //后期去掉
},
];
}
} }
} },
immediate: true,
}, },
dict(value) { dict(value) {
if (value) { if (value) {
...@@ -344,7 +364,9 @@ export default { ...@@ -344,7 +364,9 @@ export default {
], ],
literatureList: [], literatureList: [],
disabled: false, disabled: false,
literatureModelValue: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str exhibitionUnits: [],
// literatureNames: "",
literatureValues: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
}; };
}, },
methods: { methods: {
...@@ -379,191 +401,205 @@ export default { ...@@ -379,191 +401,205 @@ export default {
}, },
// 取消编辑 // 取消编辑
cancelForm() { cancelForm() {
this.$emit("handleClose"); this.reload();
this.dialogForm = {};
}, },
async handleSubmit() { async handleSubmit() {
// debugger // debugger
// return; // return;
var that = this; var that = this;
let formData = new FormData();
if (that.dialogForm.exhibitionId) { // 已存在的文件的对象
// 修改 let successFilesObj = {};
let ps = []; //ps为涵盖5种媒体的promise集合 // 添加布展本身的媒体文件至formData
mediaArr.forEach((media) => { const mediaArr = ["faceImage", "images", "videos", "audios"];
ps.push(that.handleProcessMedia(media)); mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
files.map((f) => {
// 只有待上传的才需要添加至formdata
switch (f.status) {
case "ready":
formData.append(media, f.raw);
break;
case "success":
successFilesObj[media] = f;
break;
}
}); });
// 处理图片等媒体 });
// 添加布展单元每条记录带的媒体至formData
Promise.all(ps).then( let unitIds = [];
async (allResult) => { let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
console.log("allResult", allResult); loopUnits(unitData);
allResult.forEach((item, index) => { function loopUnits(arr) {
that.dialogForm[mediaArr[index]] = item; if (arr.length > 0) {
}); arr.map((item) => {
const params = { ...that.dialogForm }; unitIds.push(item.euId);
params.literature = that.literatureModelValue.join(","); if (item.children) {
params.status = that.dialogForm.status ? 1 : 0; loopUnits(item.children);
let res = await editDisplay(params);
if (res.code == 0) {
that.$message.success("修改成功！");
that.loading = false;
that.literatureModelValue = [];
that.$emit("handleClose");
that.$emit("refresh");
that.dialogForm = {};
} }
},
(reason) => {
console.log(reason);
}
);
} else {
//新增
let formData = new FormData();
// 添加布展本身的媒体文件至formData
const mediaArr = ["faceImage", "images", "videos", "audios"];
mediaArr.map((media) => {
let files = [...this.$refs[media].getFiles()];
files.map((f) => {
formData.append(media, f.raw);
}); });
});
// 添加布展单元每条记录带的媒体至formData
let unitIds = [];
let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
loopUnits(unitData);
function loopUnits(arr) {
if (arr.length > 0) {
arr.map((item) => {
unitIds.push(item.euId);
if (item.children) {
loopUnits(item.children);
}
});
}
} }
unitIds.map(async (euId) => { }
console.log(this.$refs["exhibitionUnits"]); unitIds.map(async (euId) => {
let exhibitionUnitsDom = this.$refs.exhibitionUnits; let exhibitionUnitsDom = this.$refs.exhibitionUnits;
let imageFiles = []; let imageFiles = [];
let videoFiles = []; let videoFiles = [];
if (exhibitionUnitsDom.$refs[`unit-images-${euId}`]) { if (exhibitionUnitsDom.$refs[`unit-images-${euId}`]) {
imageFiles = [ imageFiles = [
...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(), ...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(),
]; ];
} }
if (exhibitionUnitsDom.$refs[`unit-videos-${euId}`]) { if (exhibitionUnitsDom.$refs[`unit-videos-${euId}`]) {
videoFiles = [ videoFiles = [
...exhibitionUnitsDom.$refs[`unit-videos-${euId}`].getFiles(), ...exhibitionUnitsDom.$refs[`unit-videos-${euId}`].getFiles(),
]; ];
} }
if (imageFiles.length > 0) { if (imageFiles.length > 0) {
imageFiles.forEach((imgFile) => { imageFiles.forEach((imgFile) => {
if (imgFile.status === "ready") {
formData.append(`unit-images-${euId}`, imgFile.raw); formData.append(`unit-images-${euId}`, imgFile.raw);
}); } else {
} successFilesObj[`unit-images-${euId}`] = imgFile;
if (videoFiles.length > 0) { }
videoFiles.forEach((videoFile) => { });
}
if (videoFiles.length > 0) {
videoFiles.forEach((videoFile) => {
if (videoFile.status === "ready") {
formData.append(`unit-videos-${euId}`, videoFile.raw); formData.append(`unit-videos-${euId}`, videoFile.raw);
}); } else {
} successFilesObj[`unit-videos-${euId}`] = imgFile;
}); }
// 上传所有媒体文件 });
let filesObj = {};
// 如果有没有文件
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]) { let filesObj = {};
this.dialogForm[media] = filesObj[media].join(",");
} else {
this.dialogForm[media] = "";
}
});
// 回填布展单元媒体文件,修改文物为Str，去除id和显示隐藏控制器
backFillUnit(unitData);
debugger;
function backFillUnit(arr) {
if (arr.length > 0) {
arr.map((unit) => {
// 如果进行了文件上传
if (Object.keys(filesObj).length > 0) { var formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
for (const key in filesObj) { [key]: {
let type = key.split("-")[1]; ContentLength: typeof prop === "string" ? prop.length : prop.size,
let euId = key.split("-")[2]; },
if (euId == unit.euId) { }));
switch (type) { if (formDataArr.length > 0) {
case "images": let upLoadRes = await uploadV1(formData);
unit.images = filesObj[key].join(","); if (upLoadRes.code == 0) {
break; upLoadRes.data.map((resFile) => {
case "videos": if (filesObj[resFile.fileKey]) {
unit.videos = filesObj[key].join(","); filesObj[resFile.fileKey].push(resFile.fileId);
break; } else {
} filesObj[resFile.fileKey] = [resFile.fileId];
}
});
}
}
// 1、回填之前先获取已存在的文件
for (const key in successFilesObj) {
// 如果文件id中含有已上传成功的某个key，如images，则将已上传成功的images推入文件id集合
if (filesObj[key]) {
filesObj.push(successFilesObj[key]);
}
}
// 2、回填布展自带的媒体文件
mediaArr.forEach((media) => {
if (filesObj[media]) {
this.dialogForm[media] = filesObj[media].join(",");
} else {
this.dialogForm[media] = "";
}
});
// 3、回填布展单元媒体文件,修改关联文物为Str，和显示隐藏控制器
backFillUnit(unitData);
// debugger;
function backFillUnit(arr) {
if (arr.length > 0) {
arr.map((unit) => {
// 如果进行了文件上传
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和显示隐藏控制器 }
// 不管是否进行文件上传，都需要修改文物为Str和显示隐藏控制器,去除euid
// 编辑时文物id为字符串，新增时为数组，需要重新组成
if (!that.exhibitionId) {
let crIdArr = unit.crIds; let crIdArr = unit.crIds;
// debugger;
unit.crIds = crIdArr.join(","); unit.crIds = crIdArr.join(",");
var deleteArr = [ var deleteArr = ["euId", "showMediaUploader"];
"euId",
"showImageUploader",
"showVideoUploader",
];
deleteArr.forEach((i) => { deleteArr.forEach((i) => {
delete unit[i]; if (unit[i]) {
delete unit[i];
}
}); });
if (unit.children) { } else {
backFillUnit(unit.children); // 编辑时
} }
}); // TODO:
} // debugger;
if (unit.children) {
backFillUnit(unit.children);
}
});
} }
}
const { deptId, regionCode } = this.userInfo; const { deptId, regionCode } = this.userInfo;
const params = { const params = {
...this.dialogForm, ...this.dialogForm,
exhibitionUnits: unitData, exhibitionUnits: unitData,
deptId, deptId,
regionCode, regionCode,
}; };
// debugger; // debugger;
params.literature = this.literatureModelValue.join(","); // return;
params.status = this.dialogForm.status ? 1 : 0; params.literature = this.literatureValues.join(",");
let res = await addDisplay(params); params.status = this.dialogForm.status ? 1 : 0;
if (res.code == 0) { let res = await addDisplay(params);
this.$message.success("提交成功！"); if (res.code == 0) {
this.loading = false; this.$message.success("提交成功！");
this.literatureModelValue = []; this.loading = false;
this.$emit("handleClose"); this.$emit("refresh");
this.$emit("refresh"); this.reload();
this.dialogForm = {};
}
} }
// }
},
// 清空编辑组件中的所有值
reload() {
//父组件将清空form绑定的值
this.$emit("handleClose");
// 清空文献
this.literatureValues = [];
// this.literatureNames = [];
// 清空布展单元
this.exhibitionUnits = [
{
euId: 1, //后期去掉
// unit: "", //单元名称,如前言、第一单元，暂时忽略
title: "", //单元标题，类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
videos: "", //视频id集合
crIds: [], //关联文物集合
showMediaUploader: false,
// showImageUploader: false, //后期去掉
// showVideoUploader: false, //后期去掉
},
];
}, },
// 处理编辑时图片、视频、音频、讲解词媒体资源的上传问题 // 处理编辑时图片、视频、音频、讲解词媒体资源的上传问题
handleProcessMedia(media) { handleProcessMedia(media) {
...@@ -614,7 +650,7 @@ export default { ...@@ -614,7 +650,7 @@ export default {
this.$confirm("确认关闭？") this.$confirm("确认关闭？")
.then((_) => { .then((_) => {
done(); done();
this.$emit("handleClose"); this.reload();
}) })
.catch((_) => {}); .catch((_) => {});
}, },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论