给商品列表增加图片缩略图的显示

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

@@ -81,6 +81,15 @@
             :loading="loading"
             :customRow="rowAction"
             @change="handleTableChange">
+            <template slot="customBarCode" slot-scope="text, record">
+              {{record.mBarCode}}
+              <a-popover placement="right" trigger="click">
+                <template slot="content">
+                  <img :src='getImgUrl(record.imgName)' width="500px" />
+                </template>
+                <a-icon v-if="record.imgName" style="font-size: 18px" theme="twoTone" type="file-image" />
+              </a-popover>
+            </template>
             <template slot="customRenderEnableSerialNumber" slot-scope="enableSerialNumber">
               <a-tag v-if="enableSerialNumber==1" color="green">有</a-tag>
               <a-tag v-if="enableSerialNumber==0" color="orange">无</a-tag>
@@ -98,7 +107,7 @@
 </template>
 
 <script>
-  import { httpAction, getAction } from '@/api/manage'
+  import { getAction, getFileAccessHttpUrl } from '@/api/manage'
   import {filterObj, getMpListShort} from '@/utils/util'
   import {getMaterialBySelect, queryMaterialCategoryTreeList} from '@/api/api'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
@@ -131,7 +140,7 @@
         },
         categoryTree:[],
         columns: [
-          {dataIndex: 'mBarCode', title: '条码', align: 'left'},
+          {dataIndex: 'mBarCode', title: '条码', scopedSlots: { customRender: 'customBarCode' }},
           {dataIndex: 'name', title: '名称'},
           {dataIndex: 'categoryName', title: '类别'},
           {dataIndex: 'standard', title: '规格'},
@@ -297,6 +306,13 @@
         this.$refs.modalForm.add()
         this.$refs.modalForm.title = '新增商品'
       },
+      getImgUrl(imgName) {
+        if(imgName && imgName.split(',')) {
+          return getFileAccessHttpUrl('systemConfig/static/' + imgName.split(',')[0])
+        } else {
+          return ''
+        }
+      },
       close() {
         this.searchReset(0);
         this.visible = false;

jshERP-web/src/views/material/MaterialList.vue

@@ -137,6 +137,15 @@
                 <a>删除</a>
               </a-popconfirm>
             </span>
+            <template slot="customBarCode" slot-scope="text, record">
+              {{record.mBarCode}}
+              <a-popover placement="right" trigger="click">
+                <template slot="content">
+                  <img :src='getImgUrl(record.imgName)' width="500px" />
+                </template>
+                <a-icon v-if="record.imgName" style="font-size: 18px" theme="twoTone" type="file-image" />
+              </a-popover>
+            </template>
             <template slot="customRenderEnabled" slot-scope="enabled">
               <a-tag v-if="enabled" color="green">启用</a-tag>
               <a-tag v-if="!enabled" color="orange">禁用</a-tag>
@@ -165,7 +174,7 @@
   import ImportFileModal from '@/components/tools/ImportFileModal'
   import BatchSetInfoModal from './modules/BatchSetInfoModal'
   import { queryMaterialCategoryTreeList } from '@/api/api'
-  import { postAction } from '@/api/manage'
+  import { postAction, getFileAccessHttpUrl } from '@/api/manage'
   import { getMpListShort } from '@/utils/util'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import JEllipsis from '@/components/jeecg/JEllipsis'
@@ -217,7 +226,7 @@
           'purchaseDecimal','commodityDecimal','wholesaleDecimal','lowDecimal','enabled','enableSerialNumber','enableBatchNumber','action'],
         // 默认的列
         defColumns: [
-          {title: '条码', dataIndex: 'mBarCode'},
+          {title: '条码', dataIndex: 'mBarCode',scopedSlots: { customRender: 'customBarCode' }},
           {title: '名称', dataIndex: 'name'},
           {title: '规格', dataIndex: 'standard'},
           {title: '型号', dataIndex: 'model'},
@@ -370,6 +379,13 @@
           this.$refs.modalForm.isReadOnly = true
         }
       },
+      getImgUrl(imgName) {
+        if(imgName && imgName.split(',')) {
+          return getFileAccessHttpUrl('systemConfig/static/' + imgName.split(',')[0])
+        } else {
+          return ''
+        }
+      },
       handleImportXls() {
         let importExcelUrl = this.url.importExcelUrl
         let templateUrl = '/doc/goods_template.xls'