违法信息通报管理-安全检查通报信息查询静态页面搭建 30%

src/components/components/pageContent.vue

@@ -100,90 +100,6 @@
 				/>
 			</template>
 		</el-table>
-		<div class="flex-b">
-			<div v-if="contentConfig.moneyTotal">
-				<div class="flex" v-if="contentConfig.moneyTotalType === false">
-					<div class="footSlotStyle mr10">小计:</div>
-					<div class="footSlotStyle mr20" v-if="!contentConfig.customSubtotal">
-						数量 {{ subNumber || 0 }}
-						张
-					</div>
-					<div class="footSlotStyle mr20" v-else>数量 {{ subtotalNum || 0 }}</div>
-					<slot name="subtotalSlot"></slot>
-				</div>
-				<div v-else class="flex">
-					<div class="footSlotStyle mr10">小计:</div>
-					<div class="footSlotStyle mr20" v-if="!contentConfig.customSubtotal">
-						费用金额 {{ subtotal || 0 }}元
-					</div>
-					<div class="footSlotStyle mr20" v-else>费用金额 {{ subtotalNum || 0 }}元</div>
-					<slot name="subtotalSlot"></slot>
-				</div>
-				<div v-if="contentConfig.moneyTotalType === false" class="flex">
-					<div class="footSlotStyle mr10">总计:</div>
-					<div class="footSlotStyle mr20">数量 {{ resDate.moneyTotal || 0 }} 张</div>
-					<slot name="totalSlot"></slot>
-				</div>
-				<div v-else class="flex">
-					<div class="footSlotStyle mr10">总计:</div>
-					<div class="footSlotStyle mr20">费用金额 {{ resDate.moneyTotal || 0 }} 元</div>
-					<slot name="totalSlot"></slot>
-				</div>
-			</div>
-			<div v-else-if="contentConfig.energyMonery">
-				<div class="flex">
-					<div class="footSlotStyle mr10">小计:</div>
-					<div class="footSlotStyle mr20 energyClass">
-						<div class="itemName">电：{{ electricity || 0 }}</div>
-						<div class="itemName">水：{{ water || 0 }}</div>
-						<div class="itemName">气：{{ gas || 0 }}</div>
-					</div>
-					<slot name="subtotalSlot"></slot>
-				</div>
-				<div class="flex">
-					<div class="footSlotStyle mr10">总计:</div>
-					<div class="footSlotStyle mr20 energyClass">
-						<div class="itemName">电：{{ electricityTotalPrice || 0 }}</div>
-						<div class="itemName">水：{{ waterTotalPrice || 0 }}</div>
-						<div class="itemName">气：{{ gasTotalPrice || 0 }}</div>
-					</div>
-					<slot name="totalSlot"></slot>
-				</div>
-			</div>
-			<!-- 其他/能耗费用计算 -->
-			<div style="width: 60%" v-else-if="contentConfig.energyConsumption">
-				<div class="flex" v-if="contentConfig.energyConsumptionType === false">
-					<div class="footSlotStyle mr10">能耗总量：</div>
-					<div class="footSlotStyle mr20 energyClass">
-						<div class="itemName" v-for="(item, index) in rowDate.value" :key="index">
-							{{ item.energyName }}：{{ item.dosage || 0 }}
-						</div>
-					</div>
-				</div>
-				<div class="flex" v-else>
-					<div class="footSlotStyle mr10">能耗总量：</div>
-					<div class="footSlotStyle mr20 energyClass">
-						<div class="itemName">电：{{ electricityDosage || 0 }}</div>
-						<div class="itemName">水：{{ waterDosage || 0 }}</div>
-						<div class="itemName">气：{{ gasDosage || 0 }}</div>
-					</div>
-				</div>
-			</div>
-			<div class="flex" v-else></div>
-			<el-pagination
-				class="mt10"
-				v-model:current-page="systemStore.pageInfo.pageNum"
-				v-model:page-size="systemStore.pageInfo.pageSize"
-				:page-sizes="sizes"
-				:small="false"
-				:disabled="false"
-				:background="true"
-				layout="total, sizes, prev, pager, next, jumper"
-				:total="pageTotalCount"
-				@size-change="onPageSizeChange"
-				@current-change="onPageChange"
-			/>
-		</div>
 	</div>
 </template>
 

src/components/components/pageSearch.vue

@@ -12,7 +12,7 @@
         <template v-for="item in searchConfig.formItems" :key="item.prop">
           <!-- 响应式列：大屏3列，中屏2列，小屏1列 -->
           <el-col
-            :span="item.span || 8"
+            :span="item.span || 6"
             class="form-col"
           >
             <el-form-item :label="item.label" :prop="item.prop">
@@ -58,6 +58,13 @@
                   @change="getMonthDate($event, item.prop)"
                 />
               </template>
+              <template v-if="item.type === 'custom'">
+                <slot 
+                  :name="item.slotName" 
+                  :value="searchForm[item.prop]"
+                  @input="(newVal) => searchForm[item.prop] = newVal"
+                ></slot>
+              </template>
             </el-form-item>
           </el-col>
         </template>
@@ -102,13 +109,14 @@ interface IProps {
     formItems: Array<{
       prop: string;
       label: string;
-      type: 'input' | 'select' | 'date-picker' | 'date-month';
+      type: 'input' | 'select' | 'date-picker' | 'date-month' | 'custom';
       placeholder?: string;
       initialValue?: any;
       multiple?: boolean;
       disabled?: boolean;
       options?: Array<{ label: string; value: any }>;
-      span?: number
+      span?: number;
+      slotName?: string
     }>;
     labelWidth?: number;
     pageListParams?: Record<string, any>;
@@ -228,8 +236,8 @@ defineExpose({
   }
 
   /* 输入框/选择器样式 */
-  .el-input--large,
-  .el-select--large {
+  :deep(.el-input--large),
+  :deep(.el-select--large) {
     width: 100% !important; /* 强制占满列宽，自适应列宽变化 */
     min-width: 200px; /* 最小宽度，避免过度压缩 */
   }

src/components/notificationDetailsParts/basicInformationOfSecurity.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="ship-info-form">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item name="1">
+        <template #title="{ isActive }">
+          <div class="collapse-title">
+            安检基本信息
+          </div>
+        </template>
+        <el-form
+          ref="ruleFormRef"
+          :model="formData"
+          label-width="130px"
+          size="default"
+          class="form-container mt20"
+        >
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="初查类型">
+                <div>{{ formData.chineseName }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="船长证书号">
+                <div>413906534</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="船长联系方式">
+                <div>无</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检查岗">
+                <div>珠海湾仔</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="检查日期">
+                <div>2025-02-13</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="检查员">
+                <div>吴迪</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="船舶是否滞留">
+                <div>是</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="实习检查员">
+                <div>无</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="是否专项检查">
+                <div>无</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <div>无</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="检查行动">
+                <div>无</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const activeNames = ref(['1']);
+  const formData = reactive({
+    chineseName: '测试'
+  })
+</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;
+}
+</style>

src/components/notificationDetailsParts/basicInformationOfVessel.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="ship-info-form">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item name="1">
+        <template #title="{ isActive }">
+          <div class="collapse-title">
+            船舶基本信息
+          </div>
+        </template>
+        <el-form
+          ref="ruleFormRef"
+          :model="formData"
+          label-width="130px"
+          size="default"
+          class="form-container mt20"
+        >
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="中文船名">
+                <div>{{ formData.chineseName }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="MMSI">
+                <div>413906534</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="船籍港">
+                <div>广州</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="船舶种类">
+                <div>无</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="总吨">
+                <div>5257</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="船舶类型">
+                <div>无</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="建成日期">
+                <div>2021.10.21</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="船舶所有人">
+                <div>无</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="船舶经营人">
+                <div>广州市建工船务有限公司</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const activeNames = ref(['1']);
+  const formData = reactive({
+    chineseName: '测试'
+  })
+</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;
+}
+</style>

src/components/notificationDetailsParts/defectInformation.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="ship-info-form">
+    <el-collapse v-model="activeNames">
+      <el-collapse-item name="1">
+        <template #title="{ isActive }">
+          <div class="collapse-title">
+            缺陷信息
+          </div>
+        </template>
+        <el-table class="mt20" :data="tableData" style="width: 100%">
+          <el-table-column type="index" width="50" label="序号" />
+          <el-table-column prop="date" label="缺陷代码" width="180" />
+          <el-table-column prop="name" label="缺陷描述" />
+          <el-table-column prop="address" label="处理意见代码" width="220" />
+          <el-table-column prop="address" label="处理意见说明" width="220" />
+          <el-table-column prop="address" label="滞留缺陷是否与检查机构有关" width="220" />
+        </el-table>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const activeNames = ref(['1']);
+  const tableData = [
+    {
+      date: '2016-05-03',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+      date: '2016-05-02',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+      date: '2016-05-04',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+      date: '2016-05-01',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+  ]
+</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;
+}
+</style>

src/router/index.ts

@@ -146,18 +146,6 @@ export const constantRoutes: RouteRecordRaw[] = [
 		],
 	},
 	{
-		path: '/notificationManageDetails',
-		component: Layout,
-		children: [
-			{
-				path: 'notificationDetails',
-				component: () => import('@/components/components/notificationManageDetails.vue'),
-				name: 'notificationDetails',
-				meta: { title: '新增发布', icon: 'user' },
-			},
-		],
-	},
-	{
 		path: '/notificationListManage',
 		component: Layout,
 		children: [
@@ -181,6 +169,24 @@ export const constantRoutes: RouteRecordRaw[] = [
 			},
 		],
 	},
+	{
+		path: '/securityInformationInquiry',
+		component: Layout,
+		children: [
+			{
+				path: 'inquiry',
+				component: () => import('@/views/securityInformationInquiry/index.vue'),
+				name: 'inquiry',
+				meta: { title: '安全检查通报信息查询', icon: 'user' },
+			},
+			{
+				path: 'inquiryDetails',
+				component: () => import('@/views/securityInformationInquiry/components/detail.vue'),
+				name: 'inquiryDetails',
+				meta: { title: '查看通报信息', icon: 'user' },
+			},
+		],
+	},
 ];
 
 // 动态路由，基于用户权限动态去加载

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

@@ -5,7 +5,7 @@ const contentConfig = {
 	},
 	propsList: [
 		{ type: 'index', label: '序号', fixed: true  },
-		{ type: 'normal', label: '违法事件编号', prop: 'violationNumber' },
+		{ 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: 'TODO', width: 120 },

src/views/myPublish/index.vue

@@ -9,11 +9,26 @@
 					</template>
 					<template #operate="scope">
 							<el-button type="primary" link @click="handleEdit(scope.row.rentalCompanyId)">
+									查看
+							</el-button>
+							<el-button type="primary" link @click="handleEdit(scope.row.rentalCompanyId)">
 									编辑
 							</el-button>
 							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
 									删除
 							</el-button>
+							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
+									撤回
+							</el-button>
+							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
+									重新发布
+							</el-button>
+							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
+									补正信息
+							</el-button>
+							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
+									结案操作
+							</el-button>
 					</template>
 			</pageContent>
 	</div>

src/views/securityInformationInquiry/components/detail.vue

@@ -0,0 +1,127 @@
+<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>

src/views/securityInformationInquiry/config/content.config.ts

@@ -0,0 +1,26 @@
+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: 'custom', label: '初查/复查', prop: 'TODO', width: 120 },
+		{ type: 'normal', label: '检查日期', prop: 'TODO' },
+		{ type: 'normal', label: '检查岗', prop: 'TODO', width: 220 },
+		{ type: 'normal', label: '检查机构', prop: 'TODO', width: 220 },
+		{ type: 'normal', label: '检查院', prop: 'TODO', width: 220 },
+		{ type: 'normal', label: '缺陷数量', prop: 'releasedDate', width: 140 },
+		{ type: 'custom', label: '是否被滞留', prop: 'TODO', width: 140 },
+		{ type: 'normal', label: '违法信息', prop: 'releasedDate', width: 140 },
+		{ type: 'normal', label: '处理意见', prop: 'releasedDate', width: 140 },
+		{ type: 'normal', label: '发布时间', prop: 'releasedDate', width: 140 },
+		{ type: 'custom', label: '是否已发布', prop: 'TODO', width: 140 },
+		{ type: 'handler', label: '操作', slotName: 'operate', width: 180},
+	],
+};
+
+export default contentConfig;

src/views/securityInformationInquiry/config/detail.config.ts

@@ -0,0 +1,74 @@
+const modalConfig = {
+    pageName: 'rentalCompany',
+    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/securityInformationInquiry/config/search.config.ts

@@ -0,0 +1,144 @@
+interface Inew {
+	label: string;
+	value: string;
+}
+
+const searchConfig = {
+	pageName: 'rentalCompany',
+	formItems: [
+		{
+			label: '通报类型',
+			prop: 'messageType',
+			type: 'custom',
+			slotName: 'messageType',
+			span: 6,
+		},
+		{
+			label: '通报事项类别',
+			prop: 'reportType',
+			type: 'custom',
+			slotName: 'reportType',
+			span: 6,
+		},
+		{
+			label: '通报事项',
+			prop: 'reportEvent',
+			slotName: 'reportEvent',
+			type: 'custom',
+			span: 6,
+		},
+		{
+			label: '船舶识别号',
+			prop: 'ship_operator',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入船舶识别号',
+		},
+		{
+			label: '中文船名',
+			prop: 'ship_operator',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入中文船名',
+		},
+		{
+			label: '初次登记号',
+			prop: 'ship_operator',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入初次登记号',
+		},
+		{
+			label: '初复查标志',
+			prop: 'ship_operator',
+			type: 'select',
+			options: [],
+			span: 6,
+			placeholder: '请选择初复查标志',
+		},
+		{
+			label: '船籍港',
+			prop: 'send_unit',
+			type: 'select',
+			multiple: true,
+			options: [],
+			span: 6,
+			placeholder: '请选择船籍港',
+		},
+		{
+			label: '船舶是否滞留',
+			prop: 'receive_unit',
+			type: 'select',
+			multiple: true,
+			options: [],
+			span: 6,
+			placeholder: '请选择船舶是否滞留',
+		},
+		{
+			label: '检查机构',
+			prop: 'report_status',
+			type: 'select',
+			multiple: true,
+			options: [],
+			span: 6,
+			placeholder: '请选择检查机构',
+		},
+		{
+			label: '船舶所有人',
+			prop: 'take_steps',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入船舶所有人',
+		},
+		{
+			label: '违法信息',
+			prop: 'over_status',
+			type: 'select',
+			multiple: true,
+			options: [],
+			span: 6,
+			placeholder: '请选择违法信息',
+		},
+		{
+			label: '处理意见',
+			prop: 'over_status',
+			type: 'select',
+			multiple: true,
+			options: [],
+			span: 6,
+			placeholder: '请选择处理意见',
+		},
+		{
+			label: '通报标准或具体行为列举',
+			prop: 'over_status',
+			type: 'select',
+			multiple: true,
+			options: [],
+			span: 6,
+			placeholder: '请选择通报标准或具体行为列举',
+		},
+		{
+			label: '船舶名称',
+			prop: 'ship_name',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入船舶名称',
+		},
+		{
+			label: '船舶所有人',
+			prop: 'ship_owner',
+			type: 'input',
+			span: 6,
+			placeholder: '请输入船舶所有人',
+		},
+		{
+			label: '检查日期',
+			prop: 'createDate',
+			type: 'date-picker',
+			span: 6,
+			placeholder: '请选择检查日期',
+		},
+	],
+};
+
+export default searchConfig;

src/views/securityInformationInquiry/index.vue

@@ -0,0 +1,154 @@
+<template>
+	<div class="sensitive-words">
+			<pageSearch ref="searchTableRef" :searchConfig="searchConfig">
+				<template #messageType="scope">
+					<el-select
+						v-model="scope.value"
+						placeholder="请选择消息类型"
+						@change="(newVal) => onMessageChange(scope, newVal)"
+					>
+						<el-option label="通知" value="notice"></el-option>
+						<el-option label="警告" value="warning"></el-option>
+						<el-option label="错误" value="error"></el-option>
+					</el-select>
+				</template>
+				<template #reportType="scope">
+					<el-select
+						v-model="scope.value"
+						placeholder="请选择通报事项类别"
+						@change="(newVal) => onMessageChange(scope, newVal)"
+					>
+						<el-option label="通知" value="notice"></el-option>
+						<el-option label="警告" value="warning"></el-option>
+						<el-option label="错误" value="error"></el-option>
+					</el-select>
+				</template>
+				<template #reportEvent="scope">
+					<el-select
+						v-model="scope.value"
+						placeholder="请选择通报事项"
+						@change="(newVal) => onMessageChange(scope, newVal)"
+					>
+						<el-option label="通知" value="notice"></el-option>
+						<el-option label="警告" value="warning"></el-option>
+						<el-option label="错误" value="error"></el-option>
+					</el-select>
+				</template>
+			</pageSearch>
+
+			<pageContent ref="tableListRef" :total="total" :contentConfig="contentConfig" :pageList="tableData">
+					<template #button>
+							<el-button type="primary" @click="handleCheck()">导出</el-button>
+					</template>
+					<template #operate="scope">
+							<el-button type="primary" link @click="handleCheck(scope.row.rentalCompanyId)">
+									查看
+							</el-button>
+							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
+									发布通报
+							</el-button>
+							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
+									不予通报
+							</el-button>
+					</template>
+			</pageContent>
+	</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';
+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 handleCheck = async (id?: string) => {
+	router.push({
+    name: 'inquiryDetails',
+    query: { type: 'detail' }
+  });
+};
+
+const onMessageChange = (scope, newVal) => {
+	scope.onInput(newVal);
+}
+// 新增按钮
+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 === 'status') {
+					// item.options = searchList.value;
+			}
+	});
+}
+searchItem();
+</script>
+
+<style scoped lang="scss">
+.sensitive-words {
+	margin: 20px;
+	// background-color: #fff;
+}
+
+.status {
+	cursor: pointer;
+	position: relative;
+
+	.status-tip {
+			position: absolute;
+			top: 2px;
+			left: 60px;
+	}
+}
+
+.dialog-tip {
+	text-align: center;
+}
+</style>