Task 凭证附件

src/views/sunVillage_info/voucher.vue

@@ -21,6 +21,11 @@
                     <div class="title">凭证号：</div>
                     <div class="desc">{{vaocherObj.num}}号</div>
                 </div>
+                <div class="flex_block">
+                  <div class="x_m"></div>
+                  <div class="title">附件：</div>
+                  <div class="desc">{{vaocherObj.attachmentAccount}}张  <span v-if="vaocherObj.attachmentAccount > 0"><van-icon name="eye-o" /><span @click="openAttachment">查看</span></span></div>
+                </div>
             </div>
         </div>
         <div class="vocher_mian">
@@ -79,23 +84,50 @@
             </div>
         </div>
 
+      <van-popup
+        v-model="attachmentVisible"
+        closeable
+        position="bottom"
+        :style="{ height: '61.8%' }"
+        :close-on-click-overlay="true"
+        :lazy-render="false"
+        round
+      >
+        <van-tabs type="card" style="padding-top: 1.35rem;" color="#1D6FE9" :lazy-render="false" v-model="attachmentActive" ref="attachmentDialog">
+          <van-tab v-for="(item, index) in attachmentGroup" :title="item.label" :key="'' + item.value">
+            <van-grid :column-num="3">
+              <van-grid-item v-for="(img, imgIndex) in item.list" :key="imgIndex" >
+                <van-image :src="img.thumUrl" :alt="img.fileName" @click="previewImage(imgIndex, item.list)"/>
+              </van-grid-item>
+            </van-grid>
+          </van-tab>
+        </van-tabs>
+      </van-popup>
+
     </div>
 </template>
 <script>
 import { voucherDetail } from "@/api/sunVillage_info/fixedAssets";
+import HouseApplyUploadComp from "@/components/house/HouseApplyUploadComp.vue";
+import {getDicts} from "@/utils/data";
+import {ImagePreview} from "vant";
 export default {
   name: "sunVillageInfoVoucher",
+  components: {HouseApplyUploadComp},
   data() {
     return {
-        //凭证号
-        voucherId:'',
-        voucherNum:'',
-        //凭证数据
-        vaocherObj:{
-            detailList:[]
-        },
-        //大写总金额
-        capitalAmount:''
+      //凭证号
+      voucherId:'',
+      voucherNum:'',
+      //凭证数据
+      vaocherObj:{
+          detailList:[]
+      },
+      //大写总金额
+      capitalAmount:'',
+      attachmentVisible: false,
+      attachmentGroup: [],
+      attachmentActive: 0,
     }
   },
   mounted(){
@@ -116,6 +148,37 @@ export default {
                     })
                 }
                 this.capitalAmount = this.convertCurrency(totalAmount);
+
+                this.getDicts('voucher_attach').then((resp) => {
+                  let arr = [];
+                  for(let i in resp.data)
+                  {
+                    const d = resp.data[i];
+                    let obj = {
+                      id: d.id,
+                      label: d.dictLabel,
+                      value: d.dictValue,
+                      list: [],
+                    };
+
+                    if(content.attachmentList && content.attachmentList.length)
+                    {
+                      let attachs = content.attachmentList.filter((x) => x.fileType == d.dictValue);
+                      for(let a of attachs)
+                      {
+                        a.fileUrl = '/api' + a.fileUrl;
+                        if(a.thumUrl)
+                          a.thumUrl = '/api' + a.thumUrl;
+                        else
+                          a.thumUrl = a.fileUrl;
+                        obj.list.push(a);
+                      }
+                    }
+
+                    arr.push(obj);
+                  }
+                  this.attachmentGroup = arr;
+                });
             }
         })
     },
@@ -217,6 +280,15 @@ export default {
       }
       return chineseStr;
     },
+    openAttachment() {
+      this.attachmentVisible = true;
+    },
+    previewImage(index, imgList) {
+      ImagePreview({
+        startPosition: index,
+        images: imgList.map((x) => x.fileUrl),
+      });
+    }
   }
 }
 </script>
@@ -300,7 +372,7 @@ export default {
         //     </div>
    }
    .vocher_mian{
-        margin:-120px 28px 0;
+        margin:-80px 28px 0;
         background: #fff;
         box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
         border-radius: 20px;