bj-maritime-dcds-web/src/views/notificationInfoManage/myReceptionDisposal/components/detail.vue

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

		<!-- 发布单位信息 -->
		<PublishUnitInformation class="mb20" />
		<!-- 涉事主体基本信息 -->
		<QuestionInformation />
		<!-- 水上交通安全通报信息 -->
		<WaterSafetyInformation ref="noticeChildRef" />
		<!-- 接收单位处置意见 -->
		<ReceivingUnitOpinion />
		<div class="flex">
			<div>水上交通安全相关通报文书：</div>
			<div>《水上交通安全信息通报函》</div>
		</div>
		<!-- 底部按钮区 -->
		<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 PublishUnitInformation from '@/components/notificationDetailsParts/publishUnitInformation.vue';
import QuestionInformation from '@/components/notificationDetailsParts/questionInformation.vue';
import WaterSafetyInformation from '@/components/notificationDetailsParts/waterSafetyInformation.vue';
import ReceivingUnitOpinion from './receivingUnitOpinion.vue';

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>