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

This commit is contained in:
季圣华
2023-08-09 23:25:08 +08:00
parent 26faed4704
commit a7b6ae677a
3 changed files with 137 additions and 58 deletions

View File

@@ -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>