purovps/jshERP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

21
jshERP-web/src/components/jeecgbiz/modal/JSelectMaterialModal.vue
View File

@@ -84,12 +84,14 @@
:customRow="rowAction" :customRow="rowAction"
@change="handleTableChange"> @change="handleTableChange">
<template slot="customBarCode" slot-scope="text, record"> <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"> <a-popover placement="right" trigger="click">
<template slot="content"> <template slot="content">
<img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" /> <img :src="getImgUrl(record.imgName, record.imgLarge)" width="500px" />
</template> </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> </a-popover>
</template> </template>
<template slot="customName" slot-scope="text, record"> <template slot="customName" slot-scope="text, record">
@@ -417,4 +419,19 @@
cursor: pointer; cursor: pointer;
transition: color .3s; 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> </style>

132
jshERP-web/src/views/bill/dialog/BillDetail.vue
View File

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

42
jshERP-web/src/views/report/MaterialStock.vue
View File

@@ -84,6 +84,17 @@
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a @click="showMaterialInOutList(record)">{{record.id?'流水':''}}</a> <a @click="showMaterialInOutList(record)">{{record.id?'流水':''}}</a>
</span> </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"> <template slot="customRenderStock" slot-scope="text, record">
<a-tooltip :title="record.bigUnitStock"> <a-tooltip :title="record.bigUnitStock">
{{text}} {{text}}
@@ -117,7 +128,7 @@
<script> <script>
import MaterialInOutList from './modules/MaterialInOutList' import MaterialInOutList from './modules/MaterialInOutList'
import { JeecgListMixin } from '@/mixins/JeecgListMixin' import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage' import { getAction, getFileAccessHttpUrl } from '@/api/manage'
import {queryMaterialCategoryTreeList} from '@/api/api' import {queryMaterialCategoryTreeList} from '@/api/api'
import { getMpListShort, openDownloadDialog, sheet2blob} from "@/utils/util" import { getMpListShort, openDownloadDialog, sheet2blob} from "@/utils/util"
import JEllipsis from '@/components/jeecg/JEllipsis' import JEllipsis from '@/components/jeecg/JEllipsis'
@@ -167,7 +178,9 @@
{title: '库存流水', dataIndex: 'action', align:"center", width: 60, {title: '库存流水', dataIndex: 'action', align:"center", width: 60,
scopedSlots: { customRender: 'action' } 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: 'name', width: 140, ellipsis:true},
{title: '规格', dataIndex: 'standard', width: 100, ellipsis:true}, {title: '规格', dataIndex: 'standard', width: 100, ellipsis:true},
{title: '型号', dataIndex: 'model', 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(){ loadTreeData(){
let that = this; let that = this;
let params = {}; let params = {};
@@ -277,6 +298,23 @@
} }
} }
</script> </script>
<style scoped> <style scoped>
@import '~@assets/less/common.less' @import '~@assets/less/common.less'
</style> </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>