|
|
<template>
|
|
|
<div class="main-img">
|
|
|
<div v-if="!imgUrl" class="no-img">
|
|
|
<el-icon :size="200" class="no-img-icon">
|
|
|
<Picture />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
|
|
|
<!-- style="max-width: 300px" -->
|
|
|
<div class="img-container" v-if="imgUrl">
|
|
|
<img v-if="imgUrl" draggable="false" class="display-img" :src="imgUrl" />
|
|
|
<!-- 等比缩放 -->
|
|
|
<!-- <el-image :src="imgUrl" draggable="false" :preview-src-list="[]" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
|
|
import emitter from '@/views/teacher/teacherStatistics/utils/emitter';
|
|
|
import { Picture } from '@element-plus/icons-vue';
|
|
|
import { modelApi, BASE_URL } from '@/views/teacher/teacherStatistics/utils/request';
|
|
|
import { fileStorageFileListApi,getFileObj,File_Url,editFileNameByIdApi,deleteFileByIdApi } from '@/api/modules/teacher/teacherStatistics';
|
|
|
import { formatFilePath } from '@/views/teacher/teacherStatistics/utils/dataFormatter';
|
|
|
|
|
|
// const displayImageUrl = ref<string | null>(null);
|
|
|
const displayImageUrl = ref<string>();
|
|
|
|
|
|
const props = defineProps({
|
|
|
definitionItemJson: {
|
|
|
type: Object,
|
|
|
default: () => ({})
|
|
|
},
|
|
|
moduleId: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
}
|
|
|
});
|
|
|
|
|
|
console.log('父传子1：', props.definitionItemJson.id);
|
|
|
|
|
|
watch(
|
|
|
() => props.moduleId,
|
|
|
(newVal, oldVal) => {
|
|
|
console.log('moduleId:', newVal, oldVal);
|
|
|
loadFileList(newVal);
|
|
|
}
|
|
|
);
|
|
|
|
|
|
let imgUrl = ref<string>();
|
|
|
|
|
|
// 获取文件列表
|
|
|
async function loadFileList(fileId: string) {
|
|
|
let endJson = {
|
|
|
id: fileId
|
|
|
};
|
|
|
// const response = await modelApi.fileStorage_file_list_post(endJson);
|
|
|
const response = await fileStorageFileListApi(endJson);
|
|
|
if (!response.data) {
|
|
|
return;
|
|
|
}
|
|
|
response.data.rows.forEach((value: any) => {
|
|
|
imgUrl.value = formatFilePath(File_Url+'/admin', value.filePath);
|
|
|
});
|
|
|
console.log('imgUrl:', imgUrl);
|
|
|
}
|
|
|
|
|
|
emitter.on('imgUpload:' + props.definitionItemJson.id, (uploadFile) => {
|
|
|
console.log('imgUpload:', uploadFile);
|
|
|
displayImageUrl.value = uploadFile as string;
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
console.log('组件卸载');
|
|
|
});
|
|
|
|
|
|
// 页面加载
|
|
|
onMounted(() => {
|
|
|
loadFileList(props.moduleId);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.main-img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.no-img {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.no-img-icon {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
color: #409efc;
|
|
|
}
|
|
|
|
|
|
.img-container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.display-img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
/* max-width: 300px; */
|
|
|
}
|
|
|
</style>
|