给商品库存报表增加商品图片，优化单据查看界面的商品图片

jshERP-web/src/components/jeecgbiz/modal/JSelectMaterialModal.vue

@@ -84,12 +84,14 @@
             :customRow="rowAction"
             @change="handleTableChange">
             <template slot="customBarCode" slot-scope="text, record">
-              {{record.mBarCode}}
+              <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.mBarCode}}</div>
               <a-popover placement="right" trigger="click">
                 <template slot="content">
                   <img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" />
                 </template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" style="cursor:pointer; max-width:40px; max-height:30px;" title="查看大图" />
+                <div class="item-info" v-if="record.imgName">
+                  <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" />
+                </div>
               </a-popover>
             </template>
             <template slot="customName" slot-scope="text, record">
@@ -417,4 +419,19 @@
     cursor: pointer;
     transition: color .3s;
   }
+
+  .item-info {
+    float:left;
+    width:30px;
+    height:30px;
+    margin-left:8px
+  }
+  .item-img {
+    cursor:pointer;
+    position: static;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 </style>

jshERP-web/src/views/bill/dialog/BillDetail.vue

@@ -79,9 +79,10 @@
                   :columns="columns"
                   :dataSource="dataSource">
                   <template slot="customBarCode" slot-scope="text, record">
-                    {{record.barCode}} <a-popover placement="right" trigger="click">
+                    <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                    <a-popover placement="right" trigger="click">
                       <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                      <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
+                      <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
                     </a-popover>
                   </template>
                 </a-table>
@@ -167,10 +168,11 @@
                   :columns="columns"
                   :dataSource="dataSource">
                   <template slot="customBarCode" slot-scope="text, record">
-                    {{record.barCode}} <a-popover placement="right" trigger="click">
-                    <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                    <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-                  </a-popover>
+                    <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                    <a-popover placement="right" trigger="click">
+                      <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                      <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                    </a-popover>
                   </template>
                 </a-table>
               </div>
@@ -246,9 +248,10 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
                   <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                  <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
                 </a-popover>
               </template>
             </a-table>
@@ -331,9 +334,10 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
                   <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                  <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
                 </a-popover>
               </template>
             </a-table>
@@ -444,10 +448,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -538,10 +543,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -623,10 +629,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -741,10 +748,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -838,10 +846,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -891,10 +900,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -935,10 +945,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -979,10 +990,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -1023,10 +1035,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -1071,10 +1084,11 @@
               :columns="columns"
               :dataSource="dataSource">
               <template slot="customBarCode" slot-scope="text, record">
-                {{record.barCode}} <a-popover placement="right" trigger="click">
-                <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
-                <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="material-img" />
-              </a-popover>
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.barCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content"><img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /></template>
+                  <div class="item-info" v-if="record.imgName"><img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" /></div>
+                </a-popover>
               </template>
             </a-table>
           </div>
@@ -1824,8 +1838,18 @@
 </script>
 
 <style scoped>
- .material-img{
-   max-width:40px;
-   max-height:30px;
- }
+  .item-info {
+    float:left;
+    width:30px;
+    height:30px;
+    margin-left:8px
+  }
+  .item-img {
+    cursor:pointer;
+    position: static;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 </style>

jshERP-web/src/views/report/MaterialStock.vue

@@ -84,6 +84,17 @@
               <span slot="action" slot-scope="text, record">
                 <a @click="showMaterialInOutList(record)">{{record.id?'流水':''}}</a>
               </span>
+              <template slot="customBarCode" slot-scope="text, record">
+                <div :style="record.imgName?'float:left;line-height:30px':'float:left;'">{{record.mBarCode}}</div>
+                <a-popover placement="right" trigger="click">
+                  <template slot="content">
+                    <img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" />
+                  </template>
+                  <div class="item-info" v-if="record.imgName">
+                    <img v-if="record.imgName" :src="getImgUrl(record.imgName, record.imgSmall)" class="item-img" title="查看大图" />
+                  </div>
+                </a-popover>
+              </template>
               <template slot="customRenderStock" slot-scope="text, record">
                 <a-tooltip :title="record.bigUnitStock">
                   {{text}}
@@ -117,7 +128,7 @@
 <script>
   import MaterialInOutList from './modules/MaterialInOutList'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import { getAction } from '@/api/manage'
+  import { getAction, getFileAccessHttpUrl } from '@/api/manage'
   import {queryMaterialCategoryTreeList} from '@/api/api'
   import { getMpListShort, openDownloadDialog, sheet2blob} from "@/utils/util"
   import JEllipsis from '@/components/jeecg/JEllipsis'
@@ -167,7 +178,9 @@
           {title: '库存流水', dataIndex: 'action', align:"center", width: 60,
             scopedSlots: { customRender: 'action' }
           },
-          {title: '条码', dataIndex: 'mBarCode', width: 80},
+          {title: '条码', dataIndex: 'mBarCode', width: 100,
+            scopedSlots: { customRender: 'customBarCode' }
+          },
           {title: '名称', dataIndex: 'name', width: 140, ellipsis:true},
           {title: '规格', dataIndex: 'standard', width: 100, ellipsis:true},
           {title: '型号', dataIndex: 'model', width: 100, ellipsis:true},
@@ -216,6 +229,14 @@
           }
         })
       },
+      getImgUrl(imgName, type) {
+        if(imgName && imgName.split(',')) {
+          type = type? type + '/':''
+          return getFileAccessHttpUrl('systemConfig/static/' + type + imgName.split(',')[0])
+        } else {
+          return ''
+        }
+      },
       loadTreeData(){
         let that = this;
         let params = {};
@@ -277,6 +298,23 @@
     }
   }
 </script>
+
 <style scoped>
   @import '~@assets/less/common.less'
+</style>
+<style scoped>
+  .item-info {
+    float:left;
+    width:30px;
+    height:30px;
+    margin-left:8px
+  }
+  .item-img {
+    cursor:pointer;
+    position: static;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 </style>