bj-maritime-dcds-web/src/views/notificationInfoInquiry/securityInformationInquiry/components/detail.vue

<template>
	<div class="form-page">
		<div class="page-header">
			<h2 class="page-title">{{ pageTitle }}</h2>
		</div>

		<!-- 船舶基本信息 -->
		<BasicInformationOfVessel class="mb20" />
		<!-- 安检基本信息 -->
		<BasicInformationOfSecurity />
		<!-- 缺陷信息 -->
		<DefectInformation />
		<!-- 底部按钮区 -->
		<div class="form-actions">
			<slot name="btn">
				<el-button type="primary" @click="handleSubmit">发布通报</el-button>
				<el-button type="primary" @click="router.back">返回</el-button>
			</slot>
		</div>
	</div>
</template>

<script setup lang="ts" name="CommonForm">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import BasicInformationOfVessel from '@/components/notificationDetailsParts/basicInformationOfVessel.vue';
import BasicInformationOfSecurity from '@/components/notificationDetailsParts/basicInformationOfSecurity.vue';
import DefectInformation from '@/components/notificationDetailsParts/defectInformation.vue';

// --- 路由与Store ---
const route = useRoute();
const router = useRouter();

const pageTitle = ref(''); // 页面标题
const isDetail = ref(false); // 是否为详情模式
const isEdit = ref(false); // 是否为编辑模式
const noticeChildRef = ref<any>();

onMounted(async () => {
	const { type, id } = route.query;
	try {
		switch (type as string) {
			case 'add':
				pageTitle.value = '安全检查通告信息 新增信息';
				isEdit.value = false;
				break;
			case 'edit':
				pageTitle.value = '安全检查通告信息 编辑信息';
				isEdit.value = true;
				break;
			case 'detail':
				pageTitle.value = '安全检查通告信息';
				isDetail.value = true;
				break;
			default:
				throw new Error(`无效操作类型: ${type}`);
		}
	} catch (error) {
		handleBack();
	} finally {}
});

const handleBack = () => {
	router.go(-1);
};

onBeforeUnmount(() => {
	isDetail.value = false;
	isEdit.value = false;
});

const handleSubmit = async () => {
  // 调用子组件的校验方法
  const isValid = await noticeChildRef.value.validateForm();
  
  if (isValid) {
    console.log('校验通过，执行提交逻辑');
  } else {
    console.log('校验失败，请检查表单');
  }
};
</script>

<style scoped lang="scss">
.form-page {
	padding: 20px;
	background-color: #fff;
}

.page-header {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 30px;

	.page-title {
		font-size: 22px;
		font-weight: 500;
		color: #5070ae;
	}
}

.form-actions {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	gap: 16px;

	.el-button {
		padding: 8px 24px;
	}
}

// 响应式调整
@media (max-width: 768px) {
	.form-container {
		padding: 15px;
	}

	.page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}
</style>