school-developer/src/views/professional/common/showEvidence.vue

<template>
	<el-dialog append-to-body v-model="visible" width="90%" height="700px" :title="title">
		<el-tabs v-model="activeName" type="border-card" tab-position="left">
			<el-tab-pane label="获奖证书" name="awardImg" v-if="imageData.awardImg">
				<auth-img v-for="src in imageData.awardImg" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>
			<el-tab-pane label="知网截图" name="knowdgeImg" v-if="imageData.knowdgeImg">
				<auth-img v-for="src in imageData.knowdgeImg" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>
			<el-tab-pane label="刊物封面" name="pubCover" v-if="imageData.pubCover">
				<auth-img v-for="src in imageData.pubCover" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>

			<el-tab-pane label="目录页" name="cateImg" v-if="imageData.cateImg">
				<auth-img v-for="src in imageData.cateImg" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>

			<el-tab-pane label="内容页" name="contentImg" v-if="imageData.contentImg">
				<auth-img v-for="src in imageData.contentImg" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>

			<el-tab-pane label="教材封面" name="mateCover" v-if="imageData.mateCover">
				<auth-img v-for="src in imageData.mateCover" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>

			<el-tab-pane label="出版页" name="pubImg" v-if="imageData.pubImg">
				<auth-img v-for="src in imageData.pubImg" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>

			<el-tab-pane label="立项申报书" name="projectApp" v-if="imageData.projectApp">
				<auth-img v-for="src in imageData.projectApp" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>

			<el-tab-pane label="结题证书" name="conclusionBook" v-if="imageData.conclusionBook">
				<auth-img v-for="src in imageData.conclusionBook" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>

			<el-tab-pane label="结题报告" name="conclusionReport" v-if="imageData.conclusionReport">
				<auth-img v-for="src in imageData.conclusionReport" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>

			<el-tab-pane label="其他材料" name="otherImg" v-if="imageData.otherImg">
				<auth-img v-for="src in imageData.otherImg" :authSrc="src.url" :key="src.url" style="height:1000px;"></auth-img>
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>

<script setup lang="ts" name="showEvidence">
import { ref, reactive, nextTick } from 'vue';
import authImg from '/@/components/tools/auth-img.vue';

interface ImageItem {
	url: string;
}

interface ImageData {
	awardImg?: ImageItem[];
	knowdgeImg?: ImageItem[];
	pubCover?: ImageItem[];
	cateImg?: ImageItem[];
	contentImg?: ImageItem[];
	mateCover?: ImageItem[];
	pubImg?: ImageItem[];
	projectApp?: ImageItem[];
	conclusionBook?: ImageItem[];
	conclusionReport?: ImageItem[];
	otherImg?: ImageItem[];
}

const props = defineProps<{
	row?: any;
	title?: string;
}>();

const visible = ref(false);
const imageData = reactive<ImageData>({});
const activeName = ref('');

/**
 * 安全解析JSON字符串
 */
const safeParseJson = (value: any): ImageItem[] | undefined => {
	if (!value) return undefined;
	if (typeof value === 'string') {
		try {
			return JSON.parse(value);
		} catch {
			return undefined;
		}
	}
	if (Array.isArray(value)) {
		return value;
	}
	return undefined;
};

/**
 * 初始化数据
 */
const init = () => {
	Object.assign(imageData, JSON.parse(JSON.stringify(props.row)));

	if (imageData.awardImg) {
		activeName.value = 'awardImg';
		imageData.awardImg = safeParseJson(imageData.awardImg);
	}
	if (imageData.knowdgeImg) {
		if (!activeName.value) activeName.value = 'knowdgeImg';
		imageData.knowdgeImg = safeParseJson(imageData.knowdgeImg);
	}
	if (imageData.pubCover) {
		imageData.pubCover = safeParseJson(imageData.pubCover);
	}
	if (imageData.cateImg) {
		imageData.cateImg = safeParseJson(imageData.cateImg);
	}
	if (imageData.contentImg) {
		imageData.contentImg = safeParseJson(imageData.contentImg);
	}
	if (imageData.mateCover) {
		if (!activeName.value) activeName.value = 'mateCover';
		imageData.mateCover = safeParseJson(imageData.mateCover);
	}
	if (imageData.pubImg) {
		imageData.pubImg = safeParseJson(imageData.pubImg);
	}
	if (imageData.projectApp) {
		if (!activeName.value) activeName.value = 'projectApp';
		imageData.projectApp = safeParseJson(imageData.projectApp);
	}
	if (imageData.conclusionBook) {
		imageData.conclusionBook = safeParseJson(imageData.conclusionBook);
	}
	if (imageData.conclusionReport) {
		imageData.conclusionReport = safeParseJson(imageData.conclusionReport);
	}
	if (imageData.otherImg) {
		imageData.otherImg = safeParseJson(imageData.otherImg);
	}

	nextTick(() => {
		visible.value = true;
	});
};

// 暴露方法供父组件调用
defineExpose({
	init,
});
</script>

<style scoped>

</style>