修改布展单元显示的树为el-tree

src/components/MenuList/index.vue

@@ -47,14 +47,11 @@ export default {
   watch: {
     items: {
       handler: function (value) {
-        // debugger;
-        // console.log(111, value);
+        var that = this;
         traveItems(value);
-        console.log(333, this.defaultOpends);
-        let that = this;
         function traveItems(value) {
+          // console.log(999,that);
           if (value && value.length > 0) {
-            debuggertff
             value.map((item) => {
               if (item.euId && that.defaultOpends.indexOf(item.euId) == -1) {
                 that.defaultOpends.push(item.euId);

src/views/display/components/ExhibitionUnit.vue

@@ -102,7 +102,7 @@
           <el-row :gutter="50">
             <el-col :span="24">
               <div>单元图片：</div>
-              <ManualImageUploader
+              <ManualUploader
                 v-model="currentData.imagesVo"
                 :files="currentData.imagesVo"
                 :fileLimit="7"
@@ -147,7 +147,7 @@
 
 <script>
 let euId = 1000;
-import ManualImageUploader from "@/components/Uploader/ManualUploader.vue";
+import ManualUploader from "@/components/Uploader/ManualUploader.vue";
 import { getCulturalRelicList } from "@/api/culturalRelic";
 
 import "quill/dist/quill.core.css";
@@ -158,7 +158,7 @@ import { quillEditor } from "vue-quill-editor";
 
 export default {
   components: {
-    ManualImageUploader,
+    ManualUploader,
     quillEditor,
   },
   props: {
@@ -172,9 +172,7 @@ export default {
       handler: function (value) {
         if (value) {
           let that = this;
-          // debugger
           that.treeData = JSON.parse(JSON.stringify(value));
-          // console.log('currentData',this.treeData);
           if (value.length > 0) {
             that.currentData = that.treeData[0];
             loopData(that.treeData);
@@ -222,7 +220,7 @@ export default {
       [{ font: [] }], // 字体种类-----[{ font: [] }]
       [{ align: [] }], // 对齐方式-----[{ align: [] }]
       ["clean"], // 清除文本格式-----['clean']
-      ["image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
+      // ["image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
     ];
 
     return {
@@ -280,6 +278,7 @@ export default {
 
     handleClickNode(node, data) {
       this.currentData = data;
+      // debugger
     },
     editNode(node, data) {
       this.$set(data, "isEditing", true);
@@ -298,6 +297,7 @@ export default {
         intro: "",
         showMediaUploader: false,
         images: "",
+        imagesVo:[],
         crIds: [],
         videos: "",
         children: [],
@@ -311,7 +311,6 @@ export default {
       data.children.push(newChild);
     },
     appendPeerNode(node, data) {
-      debugger;
       const parent = node.parent.data;
       const newChild = {
         euId: euId++,
@@ -321,6 +320,7 @@ export default {
         crIds: [],
         showMediaUploader: false,
         images: "",
+        imagesVo:[],
         videos: "",
         children: [],
       };
@@ -342,7 +342,9 @@ export default {
       const index = children.findIndex((d) => d.euId === data.euId);
       children.splice(index, 1);
     },
-
+    changeFileList(fileList){
+      this.currentData.imagesVo = fileList
+    },
     handleAddUnit(type) {
       switch (type) {
         case "manual":

src/views/display/components/InfoEditDialog.vue

@@ -365,7 +365,7 @@ export default {
       [{ font: [] }], // 字体种类-----[{ font: [] }]
       [{ align: [] }], // 对齐方式-----[{ align: [] }]
       ["clean"], // 清除文本格式-----['clean']
-      ["image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
+      // ["image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
     ];
 
     return {
@@ -525,8 +525,9 @@ export default {
       // return
       let unitIds = [];
       let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
-      // debugger
+      // debugger;
       // return
+
       addUnitIds(unitData); //添加unit的id作为上传文件的key
       function addUnitIds(arr) {
         if (arr.length > 0) {
@@ -546,6 +547,7 @@ export default {
           imageFiles = [
             ...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(),
           ];
+          // debugger
         }
 
         if (exhibitionUnitsDom.$refs[`unit-videos-${euId}`]) {

src/views/display/components/templates/BlueStyle.vue

@@ -43,7 +43,11 @@
                     class="img-container"
                     @click="handelPreviewImages(displayDetail.imagesVo)"
                   >
-                    <img :src="$getFullUrl(item.pressUrl)" alt="点击查看大图" srcset="" />
+                    <img
+                      :src="$getFullUrl(item.pressUrl)"
+                      alt="点击查看大图"
+                      srcset=""
+                    />
                   </div>
                   <div
                     class="enlarge"
@@ -212,12 +216,26 @@
               "
             >
               <!-- 只能单开 unique-opened -->
-              <menu-list
+              <!-- <menu-list
                 :items="displayDetail.exhibitionUnits"
                 :isCollapse="false"
                 @open="handleOpenUnit"
                 style="height: 100%"
-              ></menu-list>
+              ></menu-list> -->
+              <el-tree
+                :data="displayDetail.exhibitionUnits"
+                node-key="euId"
+                default-expand-all
+              >
+                <div
+                  class="exhibition-units-tree-node"
+                  slot-scope="{ node, data }"
+                >
+                  <div class="title" @click="handleOpenUnit(data)">
+                    {{ data.title }}
+                  </div>
+                </div>
+              </el-tree>
             </div>
             <div
               class="unit-content wow animate__animated animate__fadeInRight"
@@ -318,10 +336,7 @@
                 class="img-container wow animate__animated animate__fadeInUp"
                 @click="handleToCr(item)"
               >
-                <img
-                  :src="$getFullUrl(item.faceImagePressUrl)"
-                  alt=""
-                />
+                <img :src="$getFullUrl(item.faceImagePressUrl)" alt="" />
                 <div class="cr-name-intro" v-if="index == 0">
                   <div class="cr-name">{{ item.name }}</div>
                   <div class="cr-intro">{{ item.intro }}</div>
@@ -514,7 +529,6 @@ export default {
       }
     },
 
-
     // 点击音频
     handleClickAudio() {
       this.audioPlaying = !this.audioPlaying;
@@ -568,7 +582,7 @@ export default {
 <style lang="scss" scoped>
 // 中国风主题样式
 /**公共样式开始 */
-
+$blue: #2069c4;
 .custom-title {
   width: 50px;
   background-color: #d72f3f;
@@ -605,13 +619,13 @@ export default {
     align-items: center;
     .svg-icon {
       font-size: 50px;
-      color: #2068c3;
+      color: $blue;
       margin-right: 10px;
     }
     .title {
       font-size: 26px;
       font-weight: 400;
-      color: #2069c4;
+      color: $blue;
       line-height: 101px;
     }
   }
@@ -869,6 +883,8 @@ export default {
         .unit-content-menu {
           width: 360px;
           margin-right: 40px;
+          background-image: url("~@/assets/imgs/display/normal/bg.png");
+          background-size: 1%;
         }
         .unit-content {
           flex: 1;
@@ -1005,6 +1021,29 @@ export default {
   height: 100%;
 }
 
+::v-deep .el-tree {
+  background: transparent;
+  .el-tree-node__content {
+    height: 50px;
+    :hover {
+      background: #fff;
+      color: $blue;
+    }
+  }
+
+.el-tree-node__expand-icon{
+  // visibility: hidden;
+}
+  // .el-tree-node {
+  //   &:hover {
+  //     .el-tree-node__content {
+  //       background: #fff;
+  //       color: $blue;
+  //     }
+  //   }
+  // }
+}
+
 @keyframes filmMoveLeft {
   0% {
     transform: translateX(0);