调节缩略图片的尺寸

This commit is contained in:
季圣华
2023-07-07 20:18:31 +08:00
parent 3e5f5a2903
commit 48bdbf8dfd
3 changed files with 74 additions and 20 deletions

View File

@@ -7,7 +7,7 @@
@ok="handleSubmit" @ok="handleSubmit"
@cancel="close" @cancel="close"
cancelText="关闭(ESC)" cancelText="关闭(ESC)"
style="top:5%;height: 90%;overflow-y: hidden" style="top:20px;height: 95%;"
> >
<a-row :gutter="10" style="padding: 10px; margin: -10px"> <a-row :gutter="10" style="padding: 10px; margin: -10px">
<a-col :md="24" :sm="24"> <a-col :md="24" :sm="24">
@@ -89,7 +89,7 @@
<template slot="content"> <template slot="content">
<img :src="getImgUrl(record.imgName, '')" width="500px" /> <img :src="getImgUrl(record.imgName, '')" width="500px" />
</template> </template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" style="cursor:pointer; max-width:36px; max-height:27px;" title="查看大图" /> <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" style="cursor:pointer; max-width:40px; max-height:30px;" title="查看大图" />
</a-popover> </a-popover>
</template> </template>
<template slot="customName" slot-scope="text, record"> <template slot="customName" slot-scope="text, record">

View File

@@ -78,7 +78,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -162,7 +165,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -237,7 +243,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -318,7 +327,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -427,7 +439,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -517,7 +532,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -598,7 +616,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -712,7 +733,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -805,7 +829,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -854,7 +881,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -894,7 +924,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -934,7 +967,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -974,7 +1010,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -1018,7 +1057,10 @@
:columns="columns" :columns="columns"
:dataSource="dataSource"> :dataSource="dataSource">
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
{{record.barCode}} <img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" /> {{record.barCode}} <a-popover placement="right" trigger="click">
<template slot="content"><img :src="getImgUrl(record.imgName, '')" width="500px" /></template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="material-img" />
</a-popover>
</template> </template>
</a-table> </a-table>
</div> </div>
@@ -1769,7 +1811,7 @@
<style scoped> <style scoped>
.material-img{ .material-img{
max-width:36px; max-width:40px;
max-height:27px; max-height:30px;
} }
</style> </style>

View File

@@ -152,7 +152,9 @@
<template slot="content"> <template slot="content">
<img :src="getImgUrl(record.imgName, '')" width="500px" /> <img :src="getImgUrl(record.imgName, '')" width="500px" />
</template> </template>
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" style="cursor:pointer; max-width:36px; max-height:27px;" title="查看大图" /> <div style="width:52px;height:52px;" v-if="record.imgName">
<img v-if="record.imgName" :src="getImgUrl(record.imgName, 'mini')" class="item-img" title="查看大图" />
</div>
</a-popover> </a-popover>
</template> </template>
<template slot="customBarCode" slot-scope="text, record"> <template slot="customBarCode" slot-scope="text, record">
@@ -249,7 +251,7 @@
width: 100, width: 100,
scopedSlots: { customRender: 'action' }, scopedSlots: { customRender: 'action' },
}, },
{title: '图片', dataIndex: 'pic', width: 45, scopedSlots: { customRender: 'customPic' }}, {title: '图片', dataIndex: 'pic', width: 65, scopedSlots: { customRender: 'customPic' }},
{title: '条码', dataIndex: 'mBarCode', width: 120}, {title: '条码', dataIndex: 'mBarCode', width: 120},
{title: '名称', dataIndex: 'name', width: 160, scopedSlots: { customRender: 'customName' }}, {title: '名称', dataIndex: 'name', width: 160, scopedSlots: { customRender: 'customName' }},
{title: '规格', dataIndex: 'standard', width: 120}, {title: '规格', dataIndex: 'standard', width: 120},
@@ -419,4 +421,14 @@
</script> </script>
<style scoped> <style scoped>
@import '~@assets/less/common.less' @import '~@assets/less/common.less'
</style>
<style>
.item-img {
cursor:pointer;
position: static;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style> </style>