<template>
|
<div>
|
<div class="btns" v-if="!readonly">
|
<el-button size="small" type="primary" @click="sendSelectedImg(true)">确定</el-button>
|
<el-button size="small" type="primary" @click="sendSelectedImg(false)">取消</el-button>
|
</div>
|
<div class="center">
|
<el-descriptions>
|
<el-descriptions-item label="总数">
|
<span>{{ this.imgListAll.length }}</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
<el-tabs v-model="activeName" type="card">
|
<el-tab-pane v-for="item in typeList" :label="item" :name="item"> </el-tab-pane>
|
</el-tabs>
|
<el-empty v-if="imgList.length == 0" description="暂无记录" />
|
<div class="imgs">
|
<el-image
|
v-for="(img, i) in imgList"
|
:class="[Boolean(img.isSelect) ? 'selected' : 'noActive', 'image']"
|
fit="cover"
|
:src="img._picPath"
|
lazy
|
@click="onSelect(img)"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import problemApiFytz from '@/api/fytz/problemApi.js';
|
import userApi from '@/api/fysp/userApi.js';
|
import mediafileApi from '@/api/fysp/mediafileApi.js';
|
import { svToTz } from '@/enum/scene';
|
import { $fytz } from '@/api/index';
|
import { useCloned } from '@vueuse/core';
|
export default {
|
watch: {
|
activeName: {
|
handler(newObj, oldObj) {
|
this.imgList = this.imgListAll.filter((item) => {
|
return item.ledgerType == newObj;
|
});
|
},
|
immediate: true
|
}
|
},
|
props: {
|
month: Number,
|
subtask: Object
|
},
|
computed: {
|
currImgList() {
|
return this.imgList.filter((item) => item.ledgerType == this.activeName);
|
}
|
},
|
mounted() {
|
this.getList();
|
},
|
methods: {
|
getList() {
|
userApi.getTzId(this.subtask.sceneId).then((res) => {
|
this.isEmpty = false;
|
this.tzUserId = res.tzUserId;
|
|
problemApiFytz
|
.getLedgerPic({
|
tzUserId: this.tzUserId,
|
sceneType: svToTz(this.subtask.sceneTypeId).value,
|
time: this.month
|
})
|
.then((res) => {
|
let data = res;
|
this.imgListAll = data;
|
if (this.imgListAll.length === 0) {
|
this.isEmpty = true;
|
}
|
if (this.imgListAll && this.imgListAll.length > 0) {
|
this.imgListAll.forEach((item) => {
|
item._picPath = $fytz.imgUrl + item.path1;
|
if (this.typeList.indexOf(item.ledgerType) == -1) {
|
this.typeList.push(item.ledgerType);
|
}
|
});
|
this.activeName = this.typeList[0];
|
}
|
});
|
});
|
},
|
handleClick(tab, event) {
|
this.activeName = tab.label;
|
},
|
onSelect(img) {
|
img.isSelect = !Boolean(img.isSelect);
|
},
|
sendSelectedImg(isOk) {
|
let result = [];
|
if (!Boolean(isOk)) {
|
this.$emit('selectByLedgerPicEvent', result);
|
}
|
for (const item in this.imgList) {
|
if (item.isSelect == true) {
|
result.push(item);
|
}
|
}
|
this.$emit('selectByLedgerPicEvent', result);
|
}
|
},
|
data() {
|
return {
|
tzUserId: null,
|
imgList: [],
|
imgListAll: [],
|
typeList: [],
|
isEmpty: false,
|
activeName: ''
|
};
|
}
|
};
|
</script>
|
<style scoped>
|
.imgs {
|
/* height: 650px; */
|
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 {
|
height: 210px;
|
width: 200px;
|
border-radius: 4px;
|
}
|
|
.active {
|
padding: 5px;
|
width: 20%;
|
height: 200px;
|
border: 0.5rem outset rgb(52, 155, 4);
|
}
|
|
.selected {
|
padding: 5px;
|
color: #4abe84;
|
box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
|
border: 1px 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;
|
}
|
.btns {
|
/* height: 10%; */
|
}
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
</style>
|
