<template>
|
<table>
|
<tbody>
|
<tr>
|
<td colspan="2">{{ title }}</td>
|
</tr>
|
<tr>
|
<td style="position: relative">
|
<el-image
|
class="image"
|
:src="seletcedProblemPic"
|
:preview-src-list="seletcedProblemPic ? [seletcedProblemPic] : []"
|
:initial-index="0"
|
fit="cover"
|
lazy
|
>
|
<template #error v-if="!seletcedProblemPic">
|
<div class="image-slot">
|
<el-text>问题图片未上传</el-text>
|
</div>
|
</template>
|
</el-image>
|
<el-button
|
class="pop-button"
|
size="small"
|
@click="proDialog = true"
|
>{{ btnName }}</el-button
|
>
|
</td>
|
<td style="position: relative">
|
<el-image
|
class="image"
|
:src="seletcedChangePic ? seletcedChangePic : unchangeImg"
|
:preview-src-list="seletcedChangePic ? [seletcedChangePic] : []"
|
:initial-index="0"
|
fit="cover"
|
lazy
|
/>
|
<el-button
|
class="pop-button"
|
size="small"
|
@click="changeDialog = true"
|
>{{ btnName }}</el-button
|
>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<div>位置：{{ problem.location }}</div>
|
<div>
|
描述：
|
<el-input
|
size="small"
|
v-model="problemDes"
|
placeholder="问题描述"
|
style="width: 150px"
|
/>
|
</div>
|
</td>
|
<td>
|
<div>位置：{{ problem.location }}</div>
|
<div>
|
描述：
|
<el-input
|
size="small"
|
v-model="changeDes"
|
placeholder="整改描述"
|
style="width: 150px"
|
/>
|
</div>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<CompProblemPicSelect
|
v-if="pics.length > 0"
|
title="问题图片"
|
v-model:dialog-visible="proDialog"
|
mode="problem"
|
:pics="pics[0].path"
|
:defaultFile="[{ url: seletcedProblemPic }]"
|
@submit="handleProPicSelect"
|
></CompProblemPicSelect>
|
<CompProblemPicSelect
|
v-if="pics.length > 1"
|
title="整改图片"
|
v-model:dialog-visible="changeDialog"
|
mode="change"
|
:pics="pics[1].path"
|
:defaultFile="[{ url: seletcedChangePic }]"
|
@submit="handleChangePicSelect"
|
></CompProblemPicSelect>
|
</template>
|
<script setup>
|
import { ref, watch, computed } from 'vue';
|
import dayjs from 'dayjs';
|
import ProCheckProxy from '@/views/fysp/check/ProCheckProxy';
|
import unchangeImg from '@/assets/image/unchange.png';
|
|
import CompProblemPicSelect from './CompProblemPicSelect.vue';
|
|
const props = defineProps({
|
problem: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
btnName: {
|
type: String,
|
default: '修改'
|
}
|
});
|
|
const emit = defineEmits(['change']);
|
|
const pics = ref([]);
|
const proDialog = ref(false);
|
const seletcedProblemPic = ref();
|
const changeDialog = ref(false);
|
const seletcedChangePic = ref();
|
const problemDes = ref('');
|
const changeDes = ref('未整改');
|
|
const title = computed(() => {
|
const time = dayjs(props.problem.time).format('M月');
|
return `${time}现场问题及整改图片`;
|
});
|
|
function getPics() {
|
pics.value = ProCheckProxy.proPics(props.problem);
|
if (pics.value[0].path.length > 0) {
|
seletcedProblemPic.value = pics.value[0].path[0];
|
}
|
if (pics.value[1].path.length > 0) {
|
seletcedChangePic.value = pics.value[1].path[0];
|
}
|
}
|
|
function handleProPicSelect(imgList) {
|
if (imgList && imgList.length > 0) {
|
seletcedProblemPic.value = imgList[0].url;
|
onChange();
|
}
|
}
|
|
function handleChangePicSelect(imgList) {
|
if (imgList && imgList.length > 0) {
|
seletcedChangePic.value = imgList[0].url;
|
onChange();
|
}
|
}
|
|
function onChange() {
|
const value = {
|
proPic: seletcedProblemPic.value,
|
changePic: seletcedChangePic.value ? seletcedChangePic.value : unchangeImg,
|
location: props.problem.location,
|
problemDes,
|
changeDes
|
};
|
emit('change', value);
|
}
|
|
watch(
|
() => props.problem,
|
(nV, oV) => {
|
if (nV != oV) {
|
getPics();
|
problemDes.value = nV.problemname;
|
changeDes.value = nV.ischanged ? '已整改' : '未整改';
|
|
onChange();
|
}
|
},
|
{ immediate: true }
|
);
|
|
watch(problemDes, (nV, oV) => {
|
if (nV != oV) {
|
onChange();
|
}
|
});
|
watch(changeDes, (nV, oV) => {
|
if (nV != oV) {
|
onChange();
|
}
|
});
|
</script>
|
<style scoped>
|
.image {
|
width: 200px;
|
height: 210px;
|
border-radius: 4px;
|
}
|
|
table {
|
color: #333333;
|
border-color: #666666;
|
border-collapse: collapse;
|
}
|
|
tr {
|
font-size: var(--el-font-size-small);
|
}
|
|
td {
|
border: 1px solid black;
|
padding: 2px 6px;
|
/* border-width: 1px;
|
padding: 8px;
|
border-style: solid;
|
border-color: #666666; */
|
}
|
|
.pop-button {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
}
|
|
.image-slot {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 100%;
|
background: var(--el-fill-color-light);
|
}
|
</style>
|
