95 lines
3.7 KiB
Vue
95 lines
3.7 KiB
Vue
<template>
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<el-row>
|
||
<el-input v-model="productIdQuery" style="width: 196px; margin-right: 10px;" placeholder="成品号" />
|
||
<el-input v-model="boxNoQuery" style="width: 196px; margin-right: 10px;" placeholder="料盒号" />
|
||
<el-button type="primary" @click="init()">搜索</el-button>
|
||
<!-- <el-button type="warning" @click="reset()">重置</el-button> -->
|
||
</el-row>
|
||
</div>
|
||
<el-table :data="datalist" stripe border v-loading="loading" class="table-class" max-height="550px"
|
||
highlight-current-row :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
|
||
<el-table-column prop="productId" label="成品号" fixed="left" min-width="120px" />
|
||
<el-table-column prop="boxNo" label="料盒号" fixed="left" min-width="120px"
|
||
show-overflow-tooltip />
|
||
<el-table-column fixed="right" label="操作" width="120px">
|
||
<template v-slot="scope">
|
||
<el-button plain type="primary" @click="openPreview(scope.row)">预览</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 图片预览 -->
|
||
<el-image-viewer v-if="showImagePreview" :zoom-rate="1.2" @close="closePreview" :url-list="imgPreviewList" />
|
||
</template>
|
||
<script setup>
|
||
import axios from 'axios'
|
||
// import store from '@/store'
|
||
import { errorBox } from '@/utils/myMessageBox.js'
|
||
</script>
|
||
<script>
|
||
export default {
|
||
name: 'imageTable',
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
datalist: [],
|
||
showImagePreview: false,
|
||
imgPreviewList: [],
|
||
currentBase64FileData: {
|
||
url: '',
|
||
base64: '',
|
||
name: ''
|
||
},
|
||
request: axios.create({
|
||
baseURL: 'https://s4wwjasrsp01.ap.cat.com/wmsServer/test',
|
||
timeout: 10000
|
||
}),
|
||
productIdQuery: '',
|
||
boxNoQuery: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init()
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.loading = true
|
||
const request = {
|
||
productId: this.productIdQuery,
|
||
boxNo: this.boxNoQuery,
|
||
// userName: store.getters.getUserName
|
||
}
|
||
this.request({
|
||
url: '/testRequestImage',
|
||
method: 'post',
|
||
data: request
|
||
}).then(res => {
|
||
const response = res.data
|
||
if (response.code == 0) {
|
||
this.datalist = response.data
|
||
} else {
|
||
errorBox(response.message)
|
||
}
|
||
}).catch(err => {
|
||
console.log(err)
|
||
errorBox('查询错误')
|
||
})
|
||
this.loading = false
|
||
},
|
||
openPreview(row) {
|
||
this.currentBase64FileData.url = 'http://localhost:12315/image/' + row.imageName
|
||
this.currentBase64FileData.base64 = 'data:image/png;base64,' + row.imageDetail
|
||
this.currentBase64FileData.name = row.imageName
|
||
this.showImagePreview = true
|
||
// 下面数组里可以放一个url，如'https://raw.githubusercontent.com/JACK-ZHANG-coming/map-depot/master/2023image-20231120091054028.png'，我这里放的是一个base64数据，也可以用来显示图片
|
||
this.imgPreviewList = [this.currentBase64FileData.base64]
|
||
// this.imgPreviewList = [this.currentBase64FileData.url]
|
||
},
|
||
closePreview() {
|
||
this.imgPreviewList = []
|
||
this.showImagePreview = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped></style> |