feat:布展单元新增处理完成

src/api/display.js

@@ -24,11 +24,11 @@ export function editDisplay(data) {
   })
 }
 
-export function getDisplayById(data) {
+export function getDisplayById(params) {
   return request({
     url: '/bizExhibition/listById',
     method: 'get',
-    data
+    params
   })
 }
 

src/components/Table/TablePage.vue

@@ -23,8 +23,8 @@
       :header-align="item.titleAlign"
     >
       <template slot-scope="scope">
-        <template v-if="item.prop == 'faceImage'">
-          <slot name="faceImage" :scope="scope.row"></slot>
+        <template v-if="item.prop == 'faceImageUrl'">
+          <slot name="faceImageUrl" :scope="scope.row"></slot>
         </template>
         <template v-else-if="item.prop == 'images'">
           <slot name="images" :scope="scope.row"></slot>

src/components/Uploader/ManualUploader.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="images-list">
     <el-upload
-      action
+      action="#"
       :on-remove="handleRemove"
       :on-exceed="handleExceed"
       :on-change="handleChange"

src/icons/svg/node-child.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656914572472" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7087" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M688 240c-138 0-252 102.8-269.6 236H249c-14.2-35.2-48.7-60-89-60-53 0-96 43-96 96s43 96 96 96c40.3 0 74.8-24.8 89-60h169.3C436 681.2 550 784 688 784c150.2 0 272-121.8 272-272S838.2 240 688 240z m128 298c0 4.4-3.6 8-8 8h-86v86c0 4.4-3.6 8-8 8h-52c-4.4 0-8-3.6-8-8v-86h-86c-4.4 0-8-3.6-8-8v-52c0-4.4 3.6-8 8-8h86v-86c0-4.4 3.6-8 8-8h52c4.4 0 8 3.6 8 8v86h86c4.4 0 8 3.6 8 8v52z" p-id="7088"></path></svg>
\ No newline at end of file

src/icons/svg/node-child2.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656914577126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7227" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M727.296 448c-113.28 0-205.952 84.416-220.928 193.536L256 641.536 256 256l314.56 0c14.848 73.024 79.36 128 156.8 128 88.384 0 160-71.616 160-160S815.68 64 727.296 64c-77.44 0-141.952 54.976-156.8 128L96 192C78.336 192 64 206.336 64 224S78.336 256 96 256L192 256l0 417.536c0 17.664 14.336 32 32 32l282.688 0C523.008 813.184 615.104 896 727.296 896c123.712 0 224-100.288 224-224S851.008 448 727.296 448zM727.296 128c52.928 0 96 43.072 96 96S780.224 320 727.296 320s-96-43.072-96-96S674.368 128 727.296 128z" p-id="7228"></path></svg>
\ No newline at end of file

src/views/culturalRelic/components/InfoEditDialog.vue

@@ -291,7 +291,6 @@ export default {
       } else {
         return [];
       }
-      // return this.covertStrToArr("faceImage");
     },
     images() {
       if (this.dialogForm.imagesVo) {
@@ -299,7 +298,6 @@ export default {
       } else {
         return [];
       }
-      // return this.covertStrToArr("images");
     },
     videos() {
       if (this.dialogForm.videosVo) {
@@ -307,7 +305,6 @@ export default {
       } else {
         return [];
       }
-      // return this.covertStrToArr("videos");
     },
     audios() {
       if (this.dialogForm.audiosVo) {
@@ -315,7 +312,6 @@ export default {
       } else {
         return [];
       }
-      // return this.covertStrToArr("audios");
     },
     sayExplain() {
       if (this.dialogForm.sayExplainVo) {
@@ -323,7 +319,6 @@ export default {
       } else {
         return [];
       }
-      // return this.covertStrToArr("sayExplain");
     },
   },
   watch: {
@@ -443,7 +438,7 @@ export default {
     // 取消编辑
     cancelForm() {
       this.$emit("handleClose");
-      this.dialogForm = {};
+      this.literatureModelValue = [];
     },
 
     async handleSubmit() {
@@ -487,7 +482,6 @@ export default {
       } else {
         let ps = [];
         mediaArr.map((media) => {
-        
           let files = this.$refs[media].getFiles();
           let fileList = [...files];
           if (fileList.length > 0) {

src/views/culturalRelic/index.vue

@@ -322,6 +322,9 @@ export default {
     // 关闭Dialog
     handleClose() {
       this.drawerVisible = false;
+      this.form ={
+        status:0
+      }
     },
   },
 };

src/views/display/components/ExhibitionUnit.vue

@@ -16,22 +16,55 @@
             >
             </el-input>
           </el-col> -->
-          <el-col :span="8">
-            <el-input placeholder="展览单元标题" v-model="data.title">
+          <el-col :span="5">
+            <el-input placeholder="请输入展览单元标题" v-model="data.title">
             </el-input>
           </el-col>
-          <el-col :span="13">
-            <el-input placeholder="展览单元介绍" v-model="data.intro">
+          <el-col :span="8">
+            <el-input placeholder="请输入展览单元介绍" v-model="data.intro">
             </el-input>
           </el-col>
-          <el-col :span="3" style="display: flex; align-items: center">
-            <div>
+          <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>
+          <el-col :span="3">
+            <div style="display: flex; align-items: center">
               <i
+                v-if="data.id != 1"
                 class="el-icon-close delete"
                 @click="() => remove(node, data)"
               ></i>
               <el-tooltip content="添加子节点" placement="top">
-                <i class="el-icon-plus plus" @click="() => append(data)"></i>
+                <svg-icon
+                  @click="() => appendChild(data)"
+                  icon-class="node-child2"
+                  class="plus"
+                  style="font-size: 32px; color: #409eff"
+                ></svg-icon>
+              </el-tooltip>
+              <el-tooltip content="添加同级节点" placement="top">
+                <i
+                  class="el-icon-plus plus"
+                  @click="() => appendPeerNode(node, data)"
+                ></i>
               </el-tooltip>
             </div>
           </el-col>
@@ -77,12 +110,12 @@
             <el-col :span="12" v-show="data.showImageUploader">
               <div>单元图片：</div>
               <ManualUploader
-                :files="data.imagesVo"
+                :files="getImagesVo(data.imagesVo)"
                 :fileLimit="6"
                 :fileSize="50"
                 :fileType="['jpeg', 'jpg', 'png']"
                 listType="picture-card"
-                :ref="'unit-images-' + data.id"
+                :ref="'unit-images-' + data.euId"
               />
             </el-col>
           </el-collapse-transition>
@@ -90,13 +123,12 @@
             <el-col :span="12" v-show="data.showVideoUploader">
               <div>单元视频：</div>
               <ManualUploader
-                :files="data.videosVo"
-                v-model="data.videosVo"
+                :files="getVideosVo(data.videosVo)"
                 :fileLimit="6"
                 :fileSize="50"
                 :fileType="['mp4']"
                 listType="picture-card"
-                :ref="'unit-videos-' + data.id"
+                :ref="'unit-videos-' + data.euId"
               />
             </el-col>
           </el-collapse-transition>
@@ -107,8 +139,9 @@
 </template>
 
 <script>
-let id = 1000;
+let euId = 1000;
 import ManualUploader from "@/components/Uploader/ManualUploader.vue";
+import { getCulturalRelicList } from "@/api/culturalRelic";
 export default {
   components: {
     ManualUploader,
@@ -124,30 +157,6 @@ export default {
       handler: function (value) {
         if (value) {
           let treeData = [...value];
-          treeData.map((item) => {
-            if (!item.imagesVo || !item.imagesVo > 0) {
-              item.imagesVo = [];
-            }
-            if (!item.videosVo || !item.videosVo > 0) {
-              item.videosVo = [];
-            }
-          });
-          
-          // changeMediaData(treeData);
-          // function changeMediaData(arr) {
-          //   if (arr.length > 0) {
-          //     arr.map((item) => {
-          //       if (!item.imagesVo || !item.imagesVo > 0) {
-          //         item.imagesVo = [];
-          //       }
-          //       if (!item.videosVo || !item.videosVo > 0) {
-          //         item.videosVo = [];
-          //       }
-
-          //       changeMediaData(item.children);
-          //     });
-          //   }
-          // }
           this.treeData = treeData;
         }
       },
@@ -157,25 +166,61 @@ export default {
   data() {
     return {
       treeData: [],
+      CRList: [], //文物列表，关联文物使用
+      CRModelValue: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
+      loading: false,
     };
   },
+  computed: {
+    getImagesVo(imagesVo) {
+      return (imagesVo) => {
+        return imagesVo ? imagesVo : [];
+      };
+    },
+    getVideosVo(videosVo) {
+      return (videosVo) => {
+        return videosVo ? videosVo : [];
+      };
+    },
+  },
   mounted() {},
   methods: {
-    // getData() {
-    //   console.log("this.treeData", this.treeData);
-    //   debugger
-    //   return this.treeData;
-    // },
-    append(data) {
-      // debugger;
+    getUnitData() {
+      return this.treeData;
+    },
+    // 关联文献查询
+    searchCR(queryString) {
+      if (!queryString.trim()) {
+        this.CRList = [];
+        return;
+      }
+      this.loading = true;
+      const params = {
+        name: queryString,
+        page: "1",
+        limit: "100",
+      };
+      setTimeout(async () => {
+        this.loading = false;
+        const res = await getCulturalRelicList(params);
+        if (res.code == 0) {
+          this.CRList = res.data.records;
+        } else {
+          this.CRList = [];
+          this.$message.error(res.msg);
+        }
+      }, 500);
+    },
+    appendChild(data) {
       const newChild = {
-        id: id++,
-        unit: "",
+        euId: euId++,
+        // unit: "",
         title: "",
         intro: "",
         showImageUploader: false,
         showVideoUploader: false,
         images: "",
+        crIds: [],
         // imagesVo: [],
         videos: "",
         // videosVo: [],
@@ -186,6 +231,26 @@ export default {
       }
       data.children.push(newChild);
     },
+    appendPeerNode(node, data) {
+      // debugger
+      const parent = node.parent.data;
+      const newChild = {
+        euId: euId++,
+        unit: "",
+        title: "",
+        intro: "",
+        crIds: [],
+        showImageUploader: false,
+        showVideoUploader: false,
+        images: "",
+        // imagesVo: [],
+        videos: "",
+        // videosVo: [],
+        children: [],
+      };
+      parent.push(newChild);
+      console.log("parent", parent);
+    },
     remove(node, data) {
       const parent = node.parent;
       const children = parent.data.children || parent.data;
@@ -264,4 +329,8 @@ export default {
   display: flex;
   flex-wrap: wrap;
 }
+// ::v-deep .images-list > div {
+//   display: flex;
+//   flex-wrap: wrap;
+// }
 </style>

src/views/display/config.js

@@ -17,7 +17,7 @@ export const title = [{
   },
 
   {
-    prop: "depName",
+    prop: "deptName",
     label: "展览单位",
     columnAlign: 'center',
   },
@@ -28,7 +28,7 @@ export const title = [{
   },
 
   {
-    prop: "faceImage",
+    prop: "faceImageUrl",
     label: "封面",
     columnAlign: 'center',
     isFaceImage: true,
@@ -51,16 +51,19 @@ export const title = [{
     prop: "collectCount",
     label: "收藏量",
     columnAlign: 'center',
+    sortable:true
   },
   {
     prop: "loveCount",
     label: "点赞量",
     columnAlign: 'center',
+    sortable:true
   },
   {
     prop: "browseCount",
     label: "浏览量",
     columnAlign: 'center',
+    sortable:true
   },
 
   {

src/views/display/index.vue

@@ -29,14 +29,14 @@
       <template v-slot:displayType="data">
         {{ dict.display_type[data.scope.type] }}
       </template>
-      <template v-slot:faceImage="data">
+      <template v-slot:faceImageUrl="data">
         <img
-          :src="data.scope.faceImage"
+          :src="data.scope.faceImageUrl"
           alt="查看大图"
-          v-if="data.scope.faceImage"
+          v-if="data.scope.faceImageUrl"
           style="cursor: pointer"
           width="100px"
-          @click="handelPreviewImages(data.scope.faceImage)"
+          @click="handelPreviewImages(data.scope.faceImageUrl)"
         />
       </template>
       <template v-slot:images="data">
@@ -104,10 +104,11 @@
 import TablePage from "@/components/Table/TablePage.vue";
 import TableOperation from "@/components/Table/TableOperation.vue";
 import { title, operates, operations } from "./config";
-import { getList,deleteDisplay } from "@/api/display";
+import { getList, deleteDisplay, getDisplayById } from "@/api/display";
 import InfoEditDialog from "./components/InfoEditDialog";
 import PreviewDialog from "./components/PreviewDialog";
 import SearchBar from "@/components/SearchBar";
+
 export default {
   components: {
     TablePage,
@@ -182,9 +183,6 @@ export default {
     dict(value) {
       if (value) {
         this.dict = value;
-        // value.display_type.map((item) => {
-        //   this.displayTypes[item.value] = item.label;
-        // });
       }
     },
   },
@@ -209,10 +207,6 @@ export default {
     },
   },
   dicts: ["display_type"],
-  async created() {
-    // console.log("this.dict", this.dict);
-    // this.processDic();
-  },
   mounted() {
     this.loadData();
   },
@@ -253,19 +247,19 @@ export default {
       switch (value.type) {
         case "add":
           this.editDialogVisible = true;
-          this.form = {};
         case "view":
           break;
         case "edit":
-          this.form = JSON.parse(JSON.stringify(row));
+          const { exhibitionId } = row;
+          let editRes = await getDisplayById({ exhibitionId });
+          this.form = editRes.data;
           this.editDialogVisible = true;
           break;
         case "delete":
-          // console.log(row.exhibitionId);
-          let deleteRes = await deleteDisplay([row.exhibitionId])
-          if (deleteRes.code===0) {
-            this.loadData()
-            this.$message.success('删除成功！')
+          let deleteRes = await deleteDisplay([row.exhibitionId]);
+          if (deleteRes.code === 0) {
+            this.loadData();
+            this.$message.success("删除成功！");
           }
           break;
       }
@@ -297,7 +291,9 @@ export default {
     // 关闭Dialog
     handleClose() {
       this.editDialogVisible = false;
-      this.form = {};
+      this.form = {
+        status: 0,
+      };
     },
     // 关闭预览图片
     closeImgViewer() {