<template>
|
<div class="main">
|
<el-row justify="end" class="btns" v-if="!readonly">
|
<el-text size="small" type="info" class="m-r-8"
|
>最多选择{{ maxSelect }}张图片</el-text
|
>
|
<el-button
|
size="small"
|
type="primary"
|
@click="sendSelectedImg(true)"
|
:disabled="selectedImgUrlList.length == 0"
|
>确定</el-button
|
>
|
<el-button size="small" type="primary" @click="sendSelectedImg(false)"
|
>取消</el-button
|
>
|
</el-row>
|
|
<div class="center">
|
<!-- <el-descriptions>
|
<el-descriptions-item label="总数">
|
<span>{{ this.imgUrlList.length }}</span>
|
</el-descriptions-item>
|
</el-descriptions> -->
|
<el-tabs v-model="activeId" type="card">
|
<el-tab-pane
|
v-for="item in typeList"
|
:key="item.businesstypeid"
|
:label="
|
item.businesstype + ' (' + typeImgMap.get(item.businesstypeid).length + ')'
|
"
|
:name="item.businesstypeid"
|
>
|
</el-tab-pane>
|
</el-tabs>
|
<el-empty v-if="isEmpty" description="暂无记录" />
|
<el-scrollbar v-else class="imgs">
|
<el-image
|
v-for="(img, i) in typeImgMap.get(activeId)"
|
:key="i"
|
:class="[Boolean(img.isSelect) ? 'selected' : 'noActive', 'image']"
|
fit="cover"
|
:src="img.url"
|
lazy
|
@click="onSelect(img, i)"
|
/>
|
</el-scrollbar>
|
</div>
|
</div>
|
</template>
|
<script>
|
import problemApi from '@/api/fysp/problemApi.js';
|
import mediafileApi from '@/api/fysp/mediafileApi.js';
|
import { $fysp } from '@/api/index.js';
|
export default {
|
props: {
|
filters: Map,
|
// 是否以只读的形式查看当前页面
|
readonly: {
|
type: Boolean,
|
default: false
|
},
|
subtask: {
|
type: Object,
|
efault: {}
|
},
|
inspectionGuid: {
|
type: String,
|
default: ''
|
},
|
defaultFile: {
|
type: Array,
|
default: () => []
|
},
|
// 图片可选数量，当传入数字时，代表图片数量
|
maxSelect: {
|
type: Number,
|
default: 3
|
}
|
},
|
data() {
|
return {
|
// 无数据
|
isEmpty: false,
|
isClose: false,
|
isAll: false,
|
activeId: '',
|
typeList: [
|
// { businesstypeid: 5, businesstype: '常规记录' },
|
// { businesstypeid: 3, businesstype: '监测设备' },
|
// { businesstypeid: 7, businesstype: '铭牌' },
|
// { businesstypeid: 51, businesstype: '扩展类一' },
|
// { businesstypeid: 52, businesstype: '扩展类二' },
|
// { businesstypeid: 53, businesstype: '扩展类三' },
|
// { businesstypeid: 54, businesstype: '扩展类四' },
|
// { businesstypeid: 55, businesstype: '扩展类五' },
|
// { businesstypeid: 56, businesstype: '扩展类六' },
|
// { businesstypeid: 57, businesstype: '扩展类七' },
|
// { businesstypeid: 58, businesstype: '扩展类八' },
|
// { businesstypeid: 59, businesstype: '扩展类九' },
|
// { businesstypeid: 60, businesstype: '扩展类十' }
|
],
|
typeImgMap: new Map(),
|
imgUrlList: [],
|
selectedImgUrlList: []
|
};
|
},
|
watch: {
|
subtask: {
|
handler(nV, oV) {
|
if (nV != oV && nV) {
|
this.getAllImgList();
|
}
|
},
|
immediate: true
|
},
|
defaultFile: {
|
handler(newFileList, oldFileList) {
|
if (this.isClose) {
|
return;
|
}
|
},
|
deep: true
|
},
|
typeImgMap: {
|
handler(newMap, oldMap) {
|
if (this.isClose || newMap.get(this.activeId) == undefined) {
|
return;
|
}
|
newMap.get(this.activeId).forEach((i) => {
|
if (i.isSelect == true) {
|
return;
|
}
|
this.defaultFile.forEach((imgItem) => {
|
if (imgItem.url == i.url) {
|
i.isSelect = true;
|
this.selectedImgUrlList.push(i);
|
}
|
});
|
});
|
},
|
}
|
},
|
mounted() {
|
// if (this.subtask) {
|
// this.getAllImgList();
|
// }
|
},
|
methods: {
|
// 初始化刚开始选中的标签
|
initSelectedTab() {
|
if (this.typeList.length > 0) {
|
this.activeId = this.typeList[0].businesstypeid;
|
}
|
},
|
getAllImgList() {
|
// for(var k of this.typeImgMap.keys()) {
|
// this.typeImgMap.set(k, [])
|
// }
|
this.typeImgMap.clear();
|
this.typeList = [];
|
|
const imgMap = new Map();
|
const _typeList = [];
|
mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
|
this.isEmpty = false;
|
let data = res.data;
|
if (data.length == 0) {
|
this.isEmpty = true;
|
}
|
for (const e of data) {
|
let list;
|
let businesstypeid = e.businesstypeid;
|
let businesstype = e.businesstype;
|
let hasThisType = false;
|
imgMap.forEach((v, k, m) => {
|
if (k == businesstypeid) {
|
hasThisType = true;
|
var isAlreadyHas = false;
|
if (v != undefined && v != null) {
|
for (let index = 0; index < v.length; index++) {
|
const element = v[index];
|
if (element.guid == e.guid) {
|
isAlreadyHas = true;
|
break;
|
}
|
}
|
}
|
if (!isAlreadyHas) {
|
v.push(e);
|
}
|
}
|
});
|
if (!hasThisType) {
|
imgMap.set(businesstypeid, Array.of(e));
|
_typeList.push(e);
|
}
|
this.imgUrlList.push(e);
|
// TODO imgUrl全局配置
|
e.url = $fysp.imgUrl + e.extension1 + e.guid + '.jpg';
|
e.isSelect = false;
|
}
|
this.typeImgMap = imgMap;
|
this.typeList = _typeList;
|
this.initSelectedTab();
|
});
|
},
|
getInitImgList() {
|
mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
|
let data = res.data;
|
for (const e of data) {
|
let list;
|
let businesstypeid = e.businesstypeid;
|
let businesstype = e.businesstype;
|
let hasThisType = false;
|
this.typeImgMap.forEach((v, k, m) => {
|
if (k == businesstypeid) {
|
hasThisType = true;
|
if (v.length < 3) {
|
v.push(e);
|
}
|
}
|
});
|
if (!hasThisType) {
|
this.typeImgMap.set(businesstypeid, Array.of(e));
|
this.typeList.push(e);
|
}
|
this.imgUrlList.push(e);
|
// TODO imgUrl全局配置
|
e.url = $fysp.imgUrl + e.extension1 + e.guid + '.jpg';
|
// e.url = "http://47.100.191.150:9005/images/" + e.extension1 + e.guid + '.jpg'
|
e.isSelect = false;
|
}
|
if (this.typeList.length > 0) {
|
this.activeId = this.typeList[0].businesstypeid;
|
}
|
});
|
},
|
onSelect(img, i) {
|
if (this.readonly) {
|
return;
|
}
|
const index = this.selectedImgUrlList.indexOf(img);
|
if (index == -1) {
|
if (this.maxSelect == 1) {
|
img.isSelect = true;
|
this.selectedImgUrlList.push(img);
|
if (this.selectedImgUrlList.length > 1) {
|
this.selectedImgUrlList.splice(0, 1).forEach((e) => {
|
e.isSelect = false;
|
});
|
}
|
} else if (this.maxSelect > 1) {
|
if (this.selectedImgUrlList.length < this.maxSelect) {
|
img.isSelect = true;
|
this.selectedImgUrlList.push(img);
|
}
|
}
|
} else {
|
this.selectedImgUrlList.splice(index, 1);
|
img.isSelect = false;
|
}
|
|
// img.isSelect = !img.isSelect;
|
},
|
sendSelectedImg(isOk) {
|
let result = [];
|
if (!isOk) {
|
this.$emit('selectByAnyPhonoEvent', result);
|
} else {
|
for (const item of this.imgUrlList) {
|
if (item.isSelect == true) {
|
result.push(item);
|
}
|
}
|
this.isClose = true;
|
this.$emit('selectByAnyPhonoEvent', result);
|
}
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.text {
|
padding: 20px;
|
}
|
|
.main {
|
margin: 0 auto; /* 使父元素居中 */
|
height: 100%;
|
width: 100%;
|
}
|
|
.btns {
|
/* height: 10%; */
|
}
|
/*
|
.img_types {
|
margin: 0 auto;
|
height: 440px;
|
width: 900px;
|
flex-grow: 1;
|
overflow-y: hidden ;
|
padding: 3%;
|
flex-wrap: wrap;
|
overflow: hidden;
|
} */
|
|
.imgs {
|
height: 50vh;
|
width: 90%;
|
min-height: 100px !important;
|
/* border-style:solid;
|
border-radius: 1px; */
|
/* height: 100%; */
|
flex-grow: 1 !important;
|
overflow-y: auto !important;
|
/* 内容的内边距 */
|
display: flex !important;
|
flex-wrap: wrap !important;
|
/* overflow: hidden; */
|
}
|
|
.image {
|
margin: 5px;
|
height: 210px;
|
width: 200px;
|
border-radius: 4px;
|
}
|
|
.active {
|
padding: 5px;
|
width: 20%;
|
height: 200px;
|
border: 0.5rem outset rgb(52, 155, 4);
|
}
|
|
.selected {
|
margin: 3px;
|
color: #4abe84;
|
box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
|
border: 2px solid rgba(74, 190, 132, 1);
|
}
|
|
.selected:before {
|
content: '';
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
border: 17px solid #4abe84;
|
border-top-color: transparent;
|
border-left-color: transparent;
|
}
|
|
.selected:after {
|
content: '';
|
width: 5px;
|
height: 12px;
|
position: absolute;
|
right: 6px;
|
bottom: 6px;
|
border: 2px solid #fff;
|
border-top-color: transparent;
|
border-left-color: transparent;
|
transform: rotate(45deg);
|
}
|
|
.noActive {
|
/* padding: 5px; */
|
}
|
|
.blurry {
|
filter: blur(3px);
|
}
|
.filters {
|
display: flex;
|
padding: 5px;
|
}
|
|
::v-deep .el-dialog__body {
|
height: 60vh;
|
padding: 10px calc(var(--el-dialog-padding-primary) + 10px) !important;
|
}
|
</style>
|
