style:材料目录

 /*
  * @Description: 材料信息
  * @Autor: renchao
- * @LastEditTime: 2023-08-01 15:20:21
+ * @LastEditTime: 2023-09-08 13:41:46
  */
 import request from '@/utils/request'
 let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
@@ -126,3 +126,18 @@ export function uploadUndo (data) {
         data
     })
 }
+
+/**
+ * @description: 获取材料明细集合
+ * @param {*} bsmSj
+ * @author: renchao
+ */
+export function getClmxList (bsmSj) {
+    return request({
+        url: SERVER.SERVERAPI + '/rest/ywbl/clxx/getClmxList',
+        method: 'get',
+        params: {
+            sjBsm: bsmSj
+        }
+    })
+}

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-04 17:09:21
+ * @LastEditTime: 2023-09-08 14:18:42
 -->
 <template>
   <div class="clxx">
@@ -34,7 +34,7 @@
                 @click="treeClick(item, index)">
                 <span v-if="item.isrequired == 1" class="required">必选</span>
                 {{ item.sjmc }}
-                <span class="cl_number" :key="key">({{ item.children ? item.children.length : 0 }})</span>
+                <span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span>
               </div>
             </div>
           </div>
@@ -63,7 +63,7 @@
   import clxxAddDialog from "../dialog/clxxAddDialog.vue";
   import clxxDetailDialog from "../dialog/clxxDetailDialog.vue";
   import imagePreview from "@/views/components/imagePreview.vue";
-  import { InitClml, saveClml } from "@/api/clxx.js";
+  import { InitClml, saveClml, getClmxList } from "@/api/clxx.js";
   export default {
     components: { clxxAddDialog, imagePreview, clxxDetailDialog },
     data () {
@@ -107,7 +107,6 @@
       this.ableOperation = this.$parent.ableOperation;
     },
     methods: {
-      // 自动预览
       /**
        * @description: 自动预览
        * @author: renchao
@@ -115,10 +114,23 @@
       nextPriview () {
         if (this.treeCheckIndex < this.tableData.length) {
           this.treeCheckIndex++;
-          this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
-          this.previewImg.index = 0;
-          this.previewImg.imgList = this.tableData[this.treeCheckIndex].children;
-          this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
+          if (this.tableData[this.treeCheckIndex]) {
+            this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
+            // 判断页数
+            let ys = this.tableData[this.treeCheckIndex].ys
+            this.previewImg.index = 0;
+            // 获取材料明细
+            if (ys > 0) {
+              getClmxList(this.treeCheckId).then(res => {
+                this.previewImg.imgList = res.result ? res.result : [];
+              })
+            } else {
+              this.previewImg.imgList = []
+            }
+            this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
+          } else {
+            this.$message.error('没有最后一张了');
+          }
         }
       },
       /**
@@ -129,9 +141,21 @@
         if (this.treeCheckIndex >= 1) {
           this.treeCheckIndex--;
           this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
-          this.previewImg.index = this.previewImg.imgList.length;
-          this.previewImg.imgList = this.tableData[this.treeCheckIndex].children;
+          // 判断页数
+          let ys = this.tableData[this.treeCheckIndex].ys
+          if (ys > 0) {
+            // 获取材料明细
+            getClmxList(this.treeCheckId).then(res => {
+              this.previewImg.imgList = res.result ? res.result : [];
+              this.previewImg.index = this.previewImg.imgList.length - 1;
+            })
+          } else {
+            this.previewImg.imgList = [];
+            this.previewImg.index = 0
+          }
           this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
+        } else {
+          this.$message.error('没有第一张了');
         }
       },
       /**
@@ -199,7 +223,7 @@
           //删除最后一张图片时 val=null
           this.tableData.forEach((item) => {
             if (item.bsmSj === val.bsmSj) {
-              item.children = val.children;
+              item.ys = val.children.length;
             }
           });
           this.previewImg.imgList = _.cloneDeep(val.children);
@@ -217,7 +241,6 @@
           });
         }
       },
-      // 添加材料目录
       /**
        * @description: 添加材料目录
        * @author: renchao
@@ -225,13 +248,12 @@
       handleAdd () {
         this.isDialog = true;
       },
-      // 新增弹窗保存
       /**
        * @description: 新增弹窗保存
        * @param {*} data
        * @author: renchao
        */
-      addSave (data) {        
+      addSave (data) {
         let obj = {
           bsmSlsq: this.$parent.bsmSlsq,
           isrequired: "1",
@@ -244,8 +266,8 @@
           sfggcl: data.sfggcl,
         };
         //是否公共材料
-        if(data.sfggcl=="0"){
-          obj["bsmSldy"]=this.$parent.currentSelectProps.bsmSldy;
+        if (data.sfggcl == "0") {
+          obj["bsmSldy"] = this.$parent.currentSelectProps.bsmSldy;
         }
         if (this.$route.query.sqywbm == "DJBBL") {
           obj.bsmSldy = this.$parent.bsmRepair
@@ -261,7 +283,6 @@
           }
         });
       },
-      // 材料目录点击选中
       /**
        * @description: 材料目录点击选中
        * @param {*} item
@@ -272,10 +293,12 @@
         this.previewImg.index = 0;
         this.treeCheckId = item?.bsmSj;
         this.treeCheckIndex = index;
-        this.previewImg.imgList = item.children ? item.children : [];
+        // 获取材料明细
+        getClmxList(item.bsmSj).then(res => {
+          this.previewImg.imgList = res.result ? res.result : [];
+        })
         this.previewImg.bsmSj = item?.bsmSj;
       },
-      // 小图片点击
       /**
        * @description: 小图片点击
        * @param {*} item
@@ -286,7 +309,6 @@
         this.showImg = item;
         this.titleYs = index + 1;
       },
-      // 字典
       /**
        * @description: 字典
        * @param {*} val
@@ -325,9 +347,9 @@
       setTableData (tableData) {
         this.$nextTick((res) => {
           this.tableData = tableData;
-        });
-      },
-    },
+        })
+      }
+    }
   };
 </script>
 <style scoped lang="scss">

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-07 17:23:02
+ * @LastEditTime: 2023-09-08 14:49:24
 -->
 <template>
   <div class="rlPopup">
@@ -41,7 +41,7 @@
       <ul>
         <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }"
           @click="showCurrent(index)">
-          <img :src="img.fjurl">
+          <img :src="img.fileurl">
         </li>
       </ul>
     </div>
@@ -95,6 +95,9 @@
           if (newValue.imgList && newValue.imgList.length > 0) {
             this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
             this.thumbnailImages = newValue.imgList
+            this.thumbnailImages.forEach(item => {
+              item.fjurl = item.fileurl
+            })
           } else {
             this.allLi = []
             this.thumbnailImages = []
@@ -108,6 +111,9 @@
       this.maxLength = 0;
       this.allLi = _.cloneDeep(this.previewImg.imgList).map(item => item.fjurl)
       this.thumbnailImages = this.previewImg.imgList
+      this.thumbnailImages.forEach(item => {
+        item.fjurl = item.fileurl
+      })
     },
     computed: {
       isFirst () {

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-07 16:54:32
+ * @LastEditTime: 2023-09-08 15:02:18
 -->
 <template>
   <div class="clxx">
@@ -99,10 +99,23 @@
       nextPriview () {
         if (this.treeCheckIndex < this.tableData.length) {
           this.treeCheckIndex++;
-          this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
-          this.previewImg.index = 0;
-          this.previewImg.imgList = this.tableData[this.treeCheckIndex].children;
-          this.previewImg.bsmMaterial  = this.tableData[this.treeCheckIndex].bsmMaterial;
+          if (this.tableData[this.treeCheckIndex]) {
+            this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
+            // 判断页数
+            let ys = this.tableData[this.treeCheckIndex].ys
+            this.previewImg.index = 0;
+            // 获取材料明细
+            if (ys > 0) {
+              getFileListByBsmMaterial(this.treeCheckId).then(res => {
+                this.previewImg.imgList = res.result ? res.result : []
+              })
+            } else {
+              this.previewImg.imgList = []
+            }
+            this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
+          } else {
+            this.$message.error('没有最后一张了');
+          }
         }
       },
       /**
@@ -113,9 +126,20 @@
         if (this.treeCheckIndex >= 1) {
           this.treeCheckIndex--;
           this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
-          this.previewImg.index = this.previewImg.imgList.length;
-          this.previewImg.imgList = this.tableData[this.treeCheckIndex].children;
-          this.previewImg.bsmMaterial  = this.tableData[this.treeCheckIndex].bsmMaterial;
+          // 判断页数
+          let ys = this.tableData[this.treeCheckIndex].ys
+          if (ys > 0) {
+            getFileListByBsmMaterial(this.treeCheckId).then(res => {
+              this.previewImg.imgList = res.result ? res.result : []
+              this.previewImg.index = this.previewImg.imgList.length - 1;
+            })
+          } else {
+            this.previewImg.imgList = [];
+            this.previewImg.index = 0
+          }
+          this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
+        } else {
+          this.$message.error('没有第一张了');
         }
       },
       /**
@@ -158,7 +182,7 @@
         this.titleYs = 1;
         this.titleNum = item.children.length;
         // this.previewImg.imgList = item.children;
-        this.previewImg.bsmMaterial  = item.bsmMaterial;
+        this.previewImg.bsmMaterial = item.bsmMaterial;
       },
       /**
        * @description: updateList
@@ -167,14 +191,14 @@
        */
       updateList (val) {
         let that = this;
-        if (val.children.length != 0) {
+        if (val.length != 0) {
           //删除最后一张图片时 val=null
           this.tableData.forEach((item) => {
             if (item.bsmMaterial === val.bsmMaterial) {
-              item.children = val.children;
+              item.ys = val.length
             }
           });
-          this.previewImg.imgList = _.cloneDeep(val.children);
+          this.previewImg.imgList = _.cloneDeep(val);
           if (this.previewImg.index == this.previewImg.imgList.length) {
             this.previewImg.index = this.previewImg.index - 1;
           }
@@ -183,7 +207,7 @@
           this.previewImg.imgList = [];
           this.tableData.forEach((item, index) => {
             if (this.treeCheckId == item.bsmMaterial) {
-              item.children = [];
+              item.ys = 0;
               that.treeCheckIndex = index;
             }
           })
@@ -231,7 +255,7 @@
         getFileListByBsmMaterial(item.bsmMaterial).then(res => {
           this.previewImg.imgList = res.result ? res.result : []
         })
-        this.previewImg.bsmMaterial  = item?.bsmMaterial;
+        this.previewImg.bsmMaterial = item?.bsmMaterial;
       },
       /**
        * @description: 小图片点击