优化报废图片展示问题
This commit is contained in:
BianLzhaoMin
parent
782d2c645a
commit
31a70c1178
|
|
@ -1,82 +1,88 @@
|
|||
<template>
|
||||
<el-image
|
||||
:src="`${realSrc}`"
|
||||
fit="cover"
|
||||
:style="`width:${realWidth};height:${realHeight};`"
|
||||
:preview-src-list="realSrcList"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<el-image
|
||||
:src="`${realSrc}`"
|
||||
fit="cover"
|
||||
:style="`width:${realWidth};height:${realHeight};`"
|
||||
:preview-src-list="realSrcList"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ImagePreview",
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
default: ""
|
||||
name: 'ImagePreview',
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
computed: {
|
||||
realSrc() {
|
||||
if (!this.src) {
|
||||
return
|
||||
}
|
||||
let real_src = this.src.split(',')[0]
|
||||
|
||||
console.log(this.src, '图片地址--')
|
||||
return real_src
|
||||
},
|
||||
realSrcList() {
|
||||
if (!this.src) {
|
||||
return
|
||||
}
|
||||
let real_src_list = this.src.split(',')
|
||||
let srcList = []
|
||||
real_src_list.forEach((item) => {
|
||||
return srcList.push(item)
|
||||
})
|
||||
return srcList
|
||||
},
|
||||
realWidth() {
|
||||
return typeof this.width == 'string'
|
||||
? this.width
|
||||
: `${this.width}px`
|
||||
},
|
||||
realHeight() {
|
||||
return typeof this.height == 'string'
|
||||
? this.height
|
||||
: `${this.height}px`
|
||||
},
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realSrc() {
|
||||
if (!this.src) {
|
||||
return;
|
||||
}
|
||||
let real_src = this.src.split(",")[0];
|
||||
return real_src;
|
||||
},
|
||||
realSrcList() {
|
||||
if (!this.src) {
|
||||
return;
|
||||
}
|
||||
let real_src_list = this.src.split(",");
|
||||
let srcList = [];
|
||||
real_src_list.forEach(item => {
|
||||
return srcList.push(item);
|
||||
});
|
||||
return srcList;
|
||||
},
|
||||
realWidth() {
|
||||
return typeof this.width == "string" ? this.width : `${this.width}px`;
|
||||
},
|
||||
realHeight() {
|
||||
return typeof this.height == "string" ? this.height : `${this.height}px`;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-image {
|
||||
border-radius: 5px;
|
||||
background-color: #ebeef5;
|
||||
box-shadow: 0 0 5px 1px #ccc;
|
||||
::v-deep .el-image__inner {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
border-radius: 5px;
|
||||
background-color: #ebeef5;
|
||||
box-shadow: 0 0 5px 1px #ccc;
|
||||
::v-deep .el-image__inner {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
::v-deep .image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
::v-deep .image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -510,7 +510,7 @@
|
|||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table v-loading="loading" :data="numList" height="500">
|
||||
<el-table v-loading="loading" :data="numList">
|
||||
<el-table-column label="序号" align="center" type="index" />
|
||||
<el-table-column
|
||||
label="类型名称"
|
||||
|
|
@ -539,7 +539,7 @@
|
|||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model.number="scope.row.qualifiedNum"
|
||||
placeholder="请输入合格数量"
|
||||
placeholder="合格数量"
|
||||
type="number"
|
||||
:min="0"
|
||||
clearable
|
||||
|
|
@ -557,7 +557,7 @@
|
|||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model.number="scope.row.serviceNum"
|
||||
placeholder="请输入待维修数量"
|
||||
placeholder="待维修数量"
|
||||
type="number"
|
||||
:min="0"
|
||||
clearable
|
||||
|
|
@ -574,7 +574,7 @@
|
|||
<template slot-scope="scope">
|
||||
<el-input
|
||||
v-model.number="scope.row.scrapNum"
|
||||
placeholder="请输入待报废数量"
|
||||
placeholder="待报废数量"
|
||||
type="number"
|
||||
:min="0"
|
||||
clearable
|
||||
|
|
@ -583,6 +583,19 @@
|
|||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 6.17新增 报废原因等填写 -->
|
||||
<el-table-column label="报废信息" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
:disabled="row.scrapNum <= 0"
|
||||
>编 辑</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column label="报废信息" align="center" prop="" :show-overflow-tooltip="true" /> -->
|
||||
</el-table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<ImagePreview
|
||||
v-for="(item, index) in scrapImgList"
|
||||
:key="index"
|
||||
:src="item"
|
||||
:src="`${impViewUrl}${item}`"
|
||||
:width="`20px`"
|
||||
:height="`20px`"
|
||||
class="img-box"
|
||||
|
|
@ -22,7 +22,10 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
scrapImgUrl: {},
|
||||
scrapImgUrl: {
|
||||
type: String,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -31,14 +34,14 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
let imgList = []
|
||||
// let imgList = []
|
||||
if (this.scrapImgUrl) {
|
||||
imgList = this.scrapImgUrl.split(',')
|
||||
this.scrapImgList = this.scrapImgUrl.split(',')
|
||||
}
|
||||
|
||||
this.scrapImgList = imgList.map(
|
||||
(item) => (item = this.impViewUrl + item),
|
||||
)
|
||||
// this.scrapImgList = imgList.map(
|
||||
// (item) => (item = this.impViewUrl + item),
|
||||
// )
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue