<template>
|
<table>
|
<tbody>
|
<tr>
|
<td>{{ title }}</td>
|
</tr>
|
<tr>
|
<td>
|
<el-image
|
class="image"
|
:src="seletcedProblemPic"
|
:preview-src-list="[seletcedProblemPic]"
|
:initial-index="0"
|
fit="cover"
|
lazy
|
/>
|
</td>
|
<td>
|
<el-image
|
class="image"
|
:src="seletcedChangePic"
|
:preview-src-list="[seletcedChangePic]"
|
:initial-index="0"
|
fit="cover"
|
lazy
|
/>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<el-row justify="space-between" align="middle">
|
<div>位置：{{ problem.location }}</div>
|
<div>描述：{{ problem.problemname }}</div>
|
<el-button size="small" @click="$emit('change')">{{
|
btnName
|
}}</el-button>
|
</el-row>
|
</td>
|
<td>
|
<el-row justify="space-between" align="middle">
|
<div>位置：{{ problem.location }}</div>
|
<div>描述：{{ problem.problemname }}</div>
|
<el-button size="small" @click="$emit('change')">{{
|
btnName
|
}}</el-button>
|
</el-row>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</template>
|
<script setup>
|
import { ref, watch } from 'vue';
|
import ProCheckProxy from '@/views/check/ProCheckProxy';
|
|
const props = defineProps({
|
problem: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
});
|
|
const emit = defineEmits(['change']);
|
|
const pics = ref([]);
|
const seletcedProblemPic = ref();
|
const seletcedChangePic = ref();
|
|
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];
|
}
|
}
|
|
watch(
|
() => props.problem,
|
(nV, oV) => {
|
if (nV != oV) {
|
getPics();
|
}
|
},
|
{ immediate: true }
|
);
|
</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; */
|
}
|
</style>
|
