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

src/components/Uploader/ManualUploader.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -6,18 +6,47 @@
       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-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-input placeholder="请输入展览单元介绍" v-model="data.intro">
-            </el-input>
+
+          <el-col :span="10" class="mg-bt20">
+            <el-input placeholder="请输入标题" v-model="data.title"> </el-input>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="4">
+            <div style="display: flex; align-items: center">
+              <el-tooltip content="删除当前节点" placement="top">
+                <i
+                  class="el-icon-close delete"
+                  @click="() => remove(node, data)"
+                ></i>
+              </el-tooltip>
+              <el-tooltip content="添加子节点" placement="top">
+                <svg-icon
+                  @click="() => appendChild(data)"
+                  icon-class="node-child2"
+                  class="plus-child"
+                  style="font-size: 32px; color: #409eff"
+                ></svg-icon>
+              </el-tooltip>
+              <el-tooltip content="添加同级节点" placement="top">
+                <i
+                  class="el-icon-plus plus-peer"
+                  @click="() => appendPeerNode(node, data)"
+                ></i>
+              </el-tooltip>
+            </div>
+          </el-col>
+          <el-col :span="20" class="mg-bt20">
             <el-select
               v-model="data.crIds"
               multiple
@@ -38,28 +67,17 @@
               </el-option>
             </el-select>
           </el-col>
-          <el-col :span="3">
-            <div style="display: flex; align-items: center">
-              <i
-                v-if="data.euId !== treeData[0].euId"
-                class="el-icon-close delete"
-                @click="() => remove(node, data)"
-              ></i>
-              <el-tooltip content="添加子节点" placement="top">
-                <svg-icon
-                  @click="() => appendChild(data)"
-                  icon-class="node-child2"
-                  class="plus-child"
-                  style="font-size: 32px; color: #409eff"
-                ></svg-icon>
-              </el-tooltip>
-              <el-tooltip content="添加同级节点" placement="top">
-                <i
-                  class="el-icon-plus plus-peer"
-                  @click="() => appendPeerNode(node, data)"
-                ></i>
-              </el-tooltip>
-            </div>
+
+          <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">
@@ -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,64 +163,41 @@ 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];
-          loopData(that.treeData);
-          function loopData(arr) {
-            if (arr.length > 0) {
-              console.log(arr);
-              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", []);
-                }
-                if (item.children) {
-                  loopData(item.children);
-                }
-              });
+          that.treeData = JSON.parse(JSON.stringify(value));
+          if (value.length > 0) {
+            loopData(that.treeData);
+            function loopData(arr) {
+              if (arr.length > 0) {
+                console.log(arr);
+                arr.forEach((item) => {
+                  if (item.culturalRelics && item.culturalRelics.length > 0) {
+                    that.$set(that, "CRList", 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 : [];
+                  } else {
+                    that.$set(that, "CRList", []);
+                  }
+                  if (item.children) {
+                    loopData(item.children);
+                  }
+                });
+              }
             }
           }
         }
       },
       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

@@ -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

@@ -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,