提交 7949edfd authored 作者: 龙菲's avatar 龙菲

布展单元编辑调整

上级 12c29ff6
......@@ -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);
......
......@@ -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;
......
......@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论