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