1、我的发布列表联调。2、我的接收处置静态页面搭建

src/router/index.ts

@@ -131,6 +131,18 @@ export const constantRoutes: RouteRecordRaw[] = [
 				name: 'addPublish',
 				meta: { title: '新增发布', icon: 'user' },
 			},
+			{
+				path: 'myReceptionDisposal',
+				component: () => import('@/views/notificationInfoManage/myReceptionDisposal/index.vue'),
+				name: 'myReceptionDisposal',
+				meta: { title: '我的接收处置', icon: 'user' },
+			},
+			{
+				path: 'myReceptionDisposalDetail',
+				component: () => import('@/views/notificationInfoManage/myReceptionDisposal/components/detail.vue'),
+				name: 'myReceptionDisposal',
+				meta: { title: '查看我的接收处置', icon: 'user' },
+			},
 		],
 	},
 	// 超时提醒
@@ -266,6 +278,4 @@ const router = createRouter({
 	},
 });
 
-console.log(router.getRoutes()); 
-
 export default router;

src/views/notificationInfoManage/myPublish/config/content.config.ts

@@ -8,13 +8,13 @@ const contentConfig = {
 		{ type: 'normal', label: '违法事件编号', prop: 'violationNumber', width: 140  },
 		{ type: 'normal', label: '发布单位', prop: 'releasedUnit', width: 140 },
 		{ type: 'normal', label: '船舶名称', prop: 'vesselName', width: 140 },
-		{ type: 'normal', label: '通报事项类别', prop: 'notificationCategory', width: 120 },
+		{ type: 'normal', label: '通报事项类别', prop: 'notificationMattersType', width: 120 },
 		{ type: 'normal', label: '通报事项', prop: 'notificationMatters' },
-		{ type: 'custom', label: '接收单位', prop: 'receivingUnitName', width: 220 },
-		{ type: 'custom', label: '通报状整体状态', prop: 'TODO', width: 220 },
-		{ type: 'custom', label: '是否需要反馈', prop: 'wfir', width: 220 },
+		{ type: 'custom', label: '接收单位', prop: 'names', slotName: 'names', width: 220 },
+		{ type: 'normal', label: '通报状整体状态', prop: 'releaseStatusStr', width: 220 },
+		{ type: 'normal', label: '是否需要反馈', prop: 'wfirStr', width: 220 },
 		{ type: 'normal', label: '发布日期', prop: 'releasedDate', width: 140 },
-		{ type: 'normal', label: '发布人员', prop: 'TODO', width: 140 },
+		{ type: 'normal', label: '发布人员', prop: 'createBy', width: 140 },
 		{ type: 'handler', label: '操作', slotName: 'operate', width: 180},
 	],
 };

src/views/notificationInfoManage/myPublish/config/detail.config.ts

@@ -1,5 +1,5 @@
 const modalConfig = {
-    pageName: 'rentalCompany',
+    pageName: 'released',
     addTitle: '新增行业内违法信息通报通讯录',
     editTitle: '编辑行业内违法信息通报通讯录',
     detailTitle: '查看行业内违法信息通报通讯录',

src/views/notificationInfoManage/myPublish/config/search.config.ts

@@ -4,7 +4,7 @@ interface OptionsType {
 }
 
 const searchConfig = {
-	pageName: 'rentalCompany',
+	pageName: 'released',
 	formItems: [
 		{
 			label: '违法事件编号',
@@ -56,7 +56,7 @@ const searchConfig = {
 		},
 		{
 			label: '通报状态',
-			prop: 'TODO',
+			prop: 'notificationStatus',
 			type: 'select',
 			multiple: true,
 			options: [] as OptionsType[],
@@ -65,7 +65,7 @@ const searchConfig = {
 		},
 		{
 			label: '采取措施',
-			prop: 'TODO',
+			prop: 'takeMeasures',
 			type: 'select',
 			multiple: true,
 			options: [] as OptionsType[],
@@ -74,7 +74,7 @@ const searchConfig = {
 		},
 		{
 			label: '超期状态',
-			prop: 'TODO',
+			prop: 'overdueStatus',
 			type: 'select',
 			multiple: true,
 			options: [] as OptionsType[],
@@ -90,14 +90,14 @@ const searchConfig = {
 		},
 		{
 			label: '船舶所有人',
-			prop: 'TODO',
+			prop: 'theShipowner',
 			type: 'input',
 			span: 6,
 			placeholder: '请输入船舶所有人',
 		},
 		{
 			label: '船舶经营人',
-			prop: 'TODO',
+			prop: 'shipOperators',
 			type: 'input',
 			span: 6,
 			placeholder: '请输入船舶经营人',
@@ -120,7 +120,7 @@ const searchConfig = {
 		},
 		{
 			label: '受理日期',
-			prop: 'TODO',
+			prop: 'acceptanceDates',
 			type: 'date-picker',
 			span: 6,
 			placeholder: '请选择发布日期',

src/views/notificationInfoManage/myPublish/index.vue

@@ -7,6 +7,9 @@
 							<el-button type="primary" @click="handleAdd()">新增</el-button>
 							<el-button type="primary" @click="handleAdd()">导出</el-button>
 					</template>
+					<template #names="scope">
+						{{ scope.row.names }}
+					</template>
 					<template #operate="scope">
 							<el-button type="primary" link @click="handleDetails(scope.row.rentalCompanyId)">
 									查看
@@ -52,11 +55,6 @@ const tableData = ref([]);
 const tableListRef = ref();
 const router = useRouter();
 
-// 操作弹框
-import usePageModal from '@/components/components/hooks/usePageDetails';
-const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
-	usePageModal();
-
 const handleEdit = async (id: string) => {
 	router.push({
     name: 'addPublish',
@@ -79,15 +77,6 @@ const handleAdd = () => {
 	});
 };
 const searchTableRef = ref();
-const onClickDeleta = async (row: any) => {
-	ElMessageBox.confirm('确认删除此条数据吗？', '删除', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-	}).then(() => {
-		// 删除后的回调
-	});
-};
 // 删除按钮
 function handleDelete(value: any) {
 	ElMessageBox.confirm('是否删除这条数据？', '删除提示', {
@@ -115,7 +104,15 @@ async function searchItem() {
 			if (item.prop === 'wfir') {
 					item.options = isFeedback
 			}
-			
+			if (item.prop === 'notificationStatus') {
+					item.options = notificationStatus
+			}
+			if (item.prop === 'takeMeasures') {
+					item.options = takeMeasures
+			}
+			if (item.prop === 'overdueStatus') {
+					item.options = overdueStatus
+			}
 	});
 }
 searchItem();

src/views/notificationInfoManage/myReceptionDisposal/components/detail.vue

@@ -0,0 +1,131 @@
+<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="form-actions">
+			<slot name="btn">
+				<el-button type="primary" @click="handleSubmit">保存</el-button>
+				<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';
+
+// --- 路由与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>

src/views/notificationInfoManage/myReceptionDisposal/components/receivingUnitOpinion.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="ship-info-form">
+    <el-collapse class="el-collapse" v-model="activeNames">
+      <el-collapse-item name="1">
+        <template #title="{ isActive }">
+          <div class="collapse-title">
+            接收单位处置意见
+          </div>
+        </template>
+        <div class="content">
+          <div>处置措施类型：接收处置</div>
+          <div>信息处置人员：陈海东</div>
+          <div>信息处置时间：2025-04-02</div>
+          <div>信息处置接收单位：柳州船舶检验中心</div>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const activeNames = ref(['1']);
+</script>
+
+<style scoped>
+.ship-info-form {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+:deep .el-collapse-item__header {
+  color: #5070ae;
+  size: 24px;
+  background: linear-gradient(135deg, #d2e8ff, #fcfeff);
+	box-shadow: 0 8px 20px #fcfeff;
+	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  padding-left: 20px;
+}
+
+:deep .el-collapse-item__wrap {
+  padding: 20px;
+}
+
+.content {
+  font-size: 14px;
+}
+
+</style>

src/views/notificationInfoManage/myReceptionDisposal/config/content.config.ts

@@ -0,0 +1,24 @@
+const contentConfig = {
+	pageName: 'released',
+	header: {
+		title: '',
+	},
+	propsList: [
+		{ type: 'index', label: '序号', fixed: true  },
+		{ type: 'normal', label: '违法事件编号', prop: 'violationNumber', width: 140  },
+		{ type: 'normal', label: '发布单位', prop: 'releasedUnit', width: 140 },
+		{ type: 'normal', label: '船舶名称', prop: 'vesselName', width: 140 },
+		{ type: 'normal', label: '通报事项类别', prop: 'notificationCategory', width: 120 },
+		{ type: 'normal', label: '通报事项', prop: 'notificationMatters' },
+		{ type: 'normal', label: '接收单位', prop: 'receivingUnitName', width: 220 },
+		{ type: 'normal', label: '联络人电话', prop: 'receivingUnitName', width: 220 },
+		{ type: 'normal', label: '通报状态', prop: 'TODO', width: 220 },
+		{ type: 'normal', label: '超期状态', prop: 'wfir', width: 220 },
+		{ type: 'normal', label: '发布日期', prop: 'releasedDate', width: 140 },
+		{ type: 'normal', label: '受理日期', prop: 'releasedDate', width: 140 },
+		{ type: 'normal', label: '发布人员', prop: 'TODO', width: 140 },
+		{ type: 'handler', label: '操作', slotName: 'operate', width: 180},
+	],
+};
+
+export default contentConfig;

src/views/notificationInfoManage/myReceptionDisposal/config/detail.config.ts

@@ -0,0 +1,76 @@
+const modalConfig = {
+    pageName: 'rentalCompany',
+    addTitle: '新增行业内违法信息通报通讯录',
+    editTitle: '编辑行业内违法信息通报通讯录',
+    detailTitle: '查看行业内违法信息通报通讯录',
+    labelWidth: '150px',
+    formRules: {
+        rentalCompanyCode: [{ required: true, message: '请选择单位名称', trigger: 'change' }],
+        rentalCompanyName: [{ required: true, message: '请输入联络人名称', trigger: 'change' }],
+        deptId: [{ required: true, message: '请选择关联部门', trigger: 'change' }],
+        calculationFormulaName: [{ required: true, message: '请输入费用计算公式', trigger: 'change' }],
+    },
+    formItems: [
+        {
+            label: '单位名称',
+            prop: 'rentalCompanyCode',
+            type: 'select',
+            placeholder: '请选择单位名称',
+        },
+        {
+            label: '联络人名称',
+            prop: 'rentalCompanyName',
+            type: 'input',
+            placeholder: '请输入联络人名称',
+        },
+        {
+            label: '所属部门',
+            prop: 'rentalCompanyCode',
+            type: 'select',
+            placeholder: '请选择所属部门',
+        },
+        {
+            label: '所属职务',
+            prop: 'rentalCompanyCode',
+            type: 'select',
+            placeholder: '请选择所属职务',
+        },
+        {
+            label: '微信号',
+            prop: 'rentalCompanyName',
+            type: 'input',
+            placeholder: '请输入微信号',
+        },
+        {
+            label: '联系电话',
+            prop: 'rentalCompanyName',
+            type: 'input',
+            placeholder: '请输入联系电话',
+        },
+        {
+            label: '固定电话',
+            prop: 'rentalCompanyName',
+            type: 'input',
+            placeholder: '请输入固定电话',
+        },
+        {
+            label: '传真号',
+            prop: 'rentalCompanyName',
+            type: 'input',
+            placeholder: '请输入传真号',
+        },
+        {
+            label: '电子邮箱',
+            prop: 'rentalCompanyName',
+            type: 'input',
+            placeholder: '请输入电子邮箱',
+        },
+        {
+            label: '短信接收人',
+            prop: 'textMessage',
+            type: 'textMessage',
+        },
+    ],
+};
+
+export default modalConfig;

src/views/notificationInfoManage/myReceptionDisposal/config/search.config.ts

@@ -0,0 +1,131 @@
+interface OptionsType {
+	label: string;
+	value: string;
+}
+
+const searchConfig = {
+	pageName: 'rentalCompany',
+	formItems: [
+		{
+			label: '违法事件编号',
+			prop: 'violationNumber',
+			type: 'input',
+			placeholder: '请输入选违法事件编号',
+			span: 6,
+		},
+		{
+			label: '通报类型',
+			prop: 'notificationCategory',
+			type: 'select',
+			options: [],
+			placeholder: '请选择通报类型',
+			span: 6,
+		},
+		{
+			label: '通报事项类别',
+			prop: 'notificationMattersTypes',
+			type: 'select',
+			options: [] as OptionsType[],
+			span: 6,
+			placeholder: '请选择通报事项类别',
+		},
+		{
+			label: '通报事项',
+			prop: 'notificationMatters',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入通报事项',
+		},
+		{
+			label: '发出单位',
+			prop: 'releasedUnit',
+			type: 'select',
+			multiple: true,
+			options: [] as OptionsType[],
+			span: 6,
+			placeholder: '请选择发出单位',
+		},
+		{
+			label: '接收单位',
+			prop: 'receivingUnitName',
+			type: 'select',
+			multiple: true,
+			options: [] as OptionsType[],
+			span: 6,
+			placeholder: '请选择接收单位',
+		},
+		{
+			label: '通报状态',
+			prop: 'TODO',
+			type: 'select',
+			multiple: true,
+			options: [] as OptionsType[],
+			span: 6,
+			placeholder: '请选择通报状态',
+		},
+		{
+			label: '采取措施',
+			prop: 'TODO',
+			type: 'select',
+			multiple: true,
+			options: [] as OptionsType[],
+			span: 6,
+			placeholder: '请选择采取措施',
+		},
+		{
+			label: '超期状态',
+			prop: 'TODO',
+			type: 'select',
+			multiple: true,
+			options: [] as OptionsType[],
+			span: 6,
+			placeholder: '请选择超期状态',
+		},
+		{
+			label: '船舶名称',
+			prop: 'vesselName',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入船舶名称',
+		},
+		{
+			label: '船舶所有人',
+			prop: 'TODO',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入船舶所有人',
+		},
+		{
+			label: '船舶经营人',
+			prop: 'TODO',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入船舶经营人',
+		},
+		{
+			label: '是否需要反馈',
+			prop: 'wfir',
+			type: 'select',
+			multiple: true,
+			options: [] as OptionsType[],
+			span: 6,
+			placeholder: '请选择是否需要反馈',
+		},
+		{
+			label: '发布日期',
+			prop: 'releasedDate',
+			type: 'date-picker',
+			span: 6,
+			placeholder: '请选择发布日期',
+		},
+		{
+			label: '受理日期',
+			prop: 'TODO',
+			type: 'date-picker',
+			span: 6,
+			placeholder: '请选择发布日期',
+		},
+	],
+};
+
+export default searchConfig;

src/views/notificationInfoManage/myReceptionDisposal/index.vue

@@ -0,0 +1,140 @@
+<template>
+	<div class="sensitive-words">
+		<pageSearch ref="searchTableRef" :searchConfig="searchConfig" />
+
+			<pageContent ref="tableListRef" :total="total" :contentConfig="contentConfig" :pageList="tableData">
+					<template #button>
+							<el-button type="primary" @click="handleAdd()">新增</el-button>
+							<el-button type="primary" @click="handleAdd()">导出</el-button>
+					</template>
+					<template #operate="scope">
+							<el-button type="primary" link @click="handleDetails(scope.row.rentalCompanyId)">
+									查看
+							</el-button>
+							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
+									处理
+							</el-button>
+					</template>
+			</pageContent>
+			<router-view></router-view>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import contentConfig from './config/content.config';
+import pageContent from '@/components/components/pageContent.vue';
+import searchConfig from './config/search.config';
+import pageSearch from '@/components/components/pageSearch.vue';
+import useSystemStore from '@/store/main';
+import { outTypeList } from '@/libs/commonMeth';
+// 通报整体状态
+const allNotificationStatus = outTypeList('bj_notify_os');
+// 通报事项类别
+const categoryOnm = outTypeList('bj_category_onm');
+// 通报状态
+const notificationStatus = outTypeList('bj_notification_status');
+// 是否需要反馈
+const isFeedback = outTypeList('bj_is_feedback');
+// 超期状态
+const overdueStatus = outTypeList('bj_overdue_status');
+// 采取措施
+const takeMeasures = outTypeList('bj_take_measures');
+
+const systemStore = useSystemStore();
+
+const total = ref(0);
+const pageSize = ref([10, 20, 30]);
+const tableData = ref([]);
+const tableListRef = ref();
+const router = useRouter();
+
+// 操作弹框
+import usePageModal from '@/components/components/hooks/usePageDetails';
+const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
+	usePageModal();
+
+const handleEdit = async (id: string) => {
+	router.push({
+    name: 'addPublish',
+    query: { type: 'edit' }
+  });
+};
+
+const handleDetails = async (id: string) => {
+	router.push({
+    name: 'addPublish',
+    query: { type: 'detail' }
+  });
+};
+
+// 新增按钮
+const handleAdd = () => {
+	router.push({
+		name: 'addPublish',
+		query: { type: 'add' },
+	});
+};
+const searchTableRef = ref();
+const onClickDeleta = async (row: any) => {
+	ElMessageBox.confirm('确认删除此条数据吗？', '删除', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(() => {
+		// 删除后的回调
+	});
+};
+// 删除按钮
+function handleDelete(value: any) {
+	ElMessageBox.confirm('是否删除这条数据？', '删除提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			systemStore.deletePageDataAction(contentConfig.pageName, value);
+		})
+		.catch(() => {
+			ElMessage({
+				type: 'info',
+				message: '取消删除',
+			});
+		});
+}
+
+// 筛选-状态赋值
+async function searchItem() {
+	searchConfig.formItems.forEach(item => {
+			if (item.prop === 'notificationMattersTypes') {
+					item.options = categoryOnm
+			}
+			if (item.prop === 'wfir') {
+					item.options = isFeedback
+			}
+			
+	});
+}
+searchItem();
+</script>
+
+<style scoped lang="scss">
+.sensitive-words {
+	margin: 20px;
+}
+
+.status {
+	cursor: pointer;
+	position: relative;
+
+	.status-tip {
+		position: absolute;
+		top: 2px;
+		left: 60px;
+	}
+}
+
+.dialog-tip {
+	text-align: center;
+}
+</style>