面损表附件弹窗

src/views/reportForms/fabric-loss-table.vue

@@ -87,7 +87,7 @@
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-button type="primary">附件</a-button>
+              <a-button type="primary" @click="openEnclosure">附件</a-button>
             </a-col>
           </a-form-model>
         </div>
@@ -351,6 +351,9 @@
 
         <!-- 事故单 -->
         <accidentList-modal ref="accidentListModal" :father="gg"></accidentList-modal>
+
+        <!-- 附件 -->
+        <attachment-display ref="attachmentDisplay"></attachment-display>
       </div>
     </a-card>
   </div>
@@ -365,6 +368,7 @@ import invoiceQuantityModal from '@views/reportForms/fabric-loss-table/invoiceQu
 import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue'
 import surplusYarnModal from '@views/reportForms/fabric-loss-table/surplusYarnModal.vue'
 import otherYarnsInModal from '@views/reportForms/fabric-loss-table/otherYarnsInModal.vue'
+import AttachmentDisplay from '@views/reportForms/fabric-loss-table/attachment-display.vue'
 import { getFabricLossDatas } from '@api/reportForms/fabric-loss-table'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
@@ -384,7 +388,8 @@ export default {
     accidentListModal,
     surplusYarnModal,
     JEllipsis,
-    moment
+    moment,
+    AttachmentDisplay
   },
   data() {
     return {
@@ -882,6 +887,19 @@ export default {
         }
       })
     },
+     // 附件
+    openEnclosure(){
+      this.$refs.attachmentDisplay.AttachmentModVis = true
+      this.$refs.attachmentDisplay.attachmentData =  [
+        {
+          name:'xxx.png',
+          src:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+        },{
+          name:'dd',
+          src:require('@/assets/logo1.png')
+        }
+      ]
+    },
 
     // father
     aa() {},

src/views/reportForms/fabric-loss-table/attachment-display.vue

@@ -0,0 +1,89 @@
+<template>
+  <a-modal
+    title="附件"
+    v-model="AttachmentModVis"
+    :confirmLoading="confirmLoading"
+    width="40%"
+    :footer="null"
+  >
+  <div>
+    
+      <ul >
+          <li v-for="(item,index) in attachmentData" :key="index">
+              <img :src="item.src" class="logo" v-if="item.status == '1'" style="width: 100px;"/>       
+              <a v-if="item.status == '0'" style="text-decoration:underline">
+                {{item.name}}
+              </a>       
+          </li>
+      </ul>
+  </div>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'AttachmentDisplay', // 明细 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis},
+  data() {
+    return {      
+       AttachmentModVis : false,
+       loading: false, // 表格加载
+       confirmLoading: false,
+       attachmentData:[],
+       cc:'',
+    }
+  },
+  watch:{
+      attachmentData(newValue){
+        this.attachmentData.map(item => {
+          var index= item.name.lastIndexOf('.'), // 获取指定字符串最后一次出现的位置
+              ext = item.name.substr(index+1),
+              suffix = this.isAssetTypeAnImage(ext)
+          if(suffix){
+            item.status = 1
+          }else{
+            item.status = 0
+          }
+        })
+      }
+  },
+ 
+  methods: {
+      backDetailTable(){
+          this.AttachmentModVis = false
+      },
+      isAssetTypeAnImage(ext) {
+        return [
+           'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
+            indexOf(ext.toLowerCase()) !== -1;
+       }
+ },
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+// /deep/ .ant-table-thead > tr > th {
+//   text-align: center;
+//   // font-weight: 700;
+// }
+
+// /deep/ .ant-table-tbody {
+//   text-align: center;
+// }
+//  /deep/ .ant-table-footer .ant-table-body {
+//     overflow: hidden !important;
+//   }
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+/deep/ .ant-modal-body {
+  height: 300px !important;
+}
+/deep/ .ant-modal-content{
+  overflow: auto;
+}
+</style>