我要发布静态页面搭建完成和调整pageSearch文件，支持传入span调整布局

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="8"
+            :span="item.span || 8"
             class="form-col"
           >
             <el-form-item :label="item.label" :prop="item.prop">
@@ -108,6 +108,7 @@ interface IProps {
       multiple?: boolean;
       disabled?: boolean;
       options?: Array<{ label: string; value: any }>;
+      span?: number
     }>;
     labelWidth?: number;
     pageListParams?: Record<string, any>;

src/components/notificationDetailsParts/mattersListDrawer.vue

@@ -1,70 +1,211 @@
 <template>
   <div class="ship-info-drawer">
     <el-drawer
-      v-model="visible"
+      :model-value="visible"
+      @close="emit('update:visible', false)"
       title="事项清单查询列表"
       :with-header="true"
       :close-on-click-modal="false"
       size="70%"
     >
-    
+      <!-- 搜索区域 -->
+      <div class="search-container">
+        <el-form
+          label-width="120px"
+          inline
+          :model="searchForm"
+          class="search-form">
+          <el-row>
+              <el-col :span="8">
+                <el-form-item label="通报类型">
+                  <el-select v-model="searchForm.reportType" placeholder="请选择通报类型">
+                    <el-option label="内部" value="internal"></el-option>
+                    <el-option label="外部" value="external"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="通报事项类型">
+                  <el-select v-model="searchForm.reportType" placeholder="请选择通报类型">
+                    <el-option label="内部" value="internal"></el-option>
+                    <el-option label="外部" value="external"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="通报事项">
+                  <el-input v-model="searchForm.reportItem" placeholder="请输入通报事项"></el-input>
+                </el-form-item>
+              </el-col>
+          </el-row>
+          <el-row>
+              <el-col :span="8">
+                <el-form-item label="通报依据">
+                  <el-input v-model="searchForm.reportItem" placeholder="请输入通报事项"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="处置建议">
+                  <el-select v-model="searchForm.reportType" placeholder="请选择通报类型">
+                    <el-option label="内部" value="internal"></el-option>
+                    <el-option label="外部" value="external"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="发出单位">
+                  <el-select v-model="searchForm.reportType" placeholder="请选择通报类型">
+                    <el-option label="内部" value="internal"></el-option>
+                    <el-option label="外部" value="external"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+          </el-row>
+          <el-row>
+              <el-col :span="8">
+                <el-form-item label="通报依据">
+                  <el-input v-model="searchForm.reportItem" placeholder="请输入通报事项"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item>
+                  <el-button type="primary" @click="handleSearch">查询</el-button>
+                  <el-button @click="handleReset">重置</el-button>
+                </el-form-item>
+              </el-col>
+          </el-row>
+        </el-form>
+      </div>
+
+      <!-- 表格区域 -->
+      <div class="table-container">
+        <el-table
+          :data="tableData"
+          border
+          stripe
+          size="small"
+          :row-class-name="rowClassName"
+          @row-click="handleRowClick"
+          :highlight-current-row="true"
+        >
+          <el-table-column fixed type="radio" label="序号" width="50" align="center">
+            <template #default="{ row }">
+              <el-radio 
+                :label="row.id" 
+                v-model="selectedId"
+                @change="() => handleRadioChange(row)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="reportItem" label="发布单位" min-width="200"></el-table-column>
+          <el-table-column sortable prop="itemType" label="通报类型" min-width="120"></el-table-column>
+          <el-table-column sortable prop="createDate" label="通报事项类别" min-width="120"></el-table-column>
+          <el-table-column sortable prop="createDate" label="通报事项" min-width="120"></el-table-column>
+          <el-table-column prop="createDate" label="通报标准" min-width="120"></el-table-column>
+          <el-table-column prop="createDate" label="通报依据" min-width="120"></el-table-column>
+          <el-table-column sortable prop="createDate" label="处置建议" min-width="120"></el-table-column>
+          <el-table-column prop="createDate" label="发出单位" min-width="120"></el-table-column>
+          <el-table-column prop="createDate" label="接收单位" min-width="120"></el-table-column>
+          <el-table-column prop="createDate" label="创建日期" min-width="120"></el-table-column>
+          <el-table-column prop="createDate" label="创建人员" min-width="120"></el-table-column>
+        </el-table>
+
+        <!-- 分页器 -->
+        <div class="pagination-container">
+          <el-pagination
+            v-model:current-page="pagination.currentPage"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            layout="total, sizes, prev, pager, next, jumper"
+          />
+        </div>
+      </div>
+
+      <div class="drawer-footer">
+        <el-button @click="emit('update:visible', false)">取消</el-button>
+        <el-button 
+          type="primary" 
+          @click="confirmSelection" 
+          :disabled="!selectedRow"
+        >
+          确认选择
+        </el-button>
+      </div>
     </el-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, defineProps, defineEmits } from 'vue';
-import type { FormInstance } from 'element-plus';
-
-const props = defineProps<{
-  visible: boolean;
-}>();
-
-// 向父组件发送事件
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-  (e: 'selectShip', shipData: any): void; // 选择船舶时通知父组件（预留）
-}>();
-
-// 抽屉显示状态（双向绑定）
-const visible = ref(props.visible);
-
-// 查询表单数据
-const searchForm = reactive({
-  shipName: '',
-  shipId: '',
-  registrationNo: '',
-  firstRegNo: '',
-  surveyRegNo: '',
-  imo: '',
-  licenseNo: ''
+import { ref, reactive, watch, defineProps, defineEmits } from 'vue';
+
+// 接收父组件传递的参数
+const props = defineProps({
+  visible: { type: Boolean, default: false },
 });
 
-// 表单实例
-const searchFormRef = ref<FormInstance>();
+// 向父组件发送事件（v-model语法糖）
+const emit = defineEmits(['update:visible', 'update:selectedRow']);
 
-// 重置按钮事件
-const handleReset = () => {
-  if (searchFormRef.value) {
-    searchFormRef.value.resetFields(); // 重置表单
-  }
-};
+// 单选状态管理
+const selectedId = ref<number>(0);          // 选中行的ID
+const selectedRow = ref<any>(null);         // 选中的行数据
+const tableData = ref<any[]>([]);           // 表格数据
+const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const searchForm = reactive({ reportType: '', reportItem: '' });
 
-// 监听抽屉显示状态变化，通知父组件
+// 监听抽屉打开/关闭
 watch(
-  () => visible.value,
+  () => props.visible,
   (newVal) => {
-    emit('update:visible', newVal);
+    if (newVal) {
+      // 抽屉打开时：加载数据 + 回显已选择项
+      fetchTableData();
+    } else {
+      // 抽屉关闭时：重置选中状态（可选，根据需求保留）
+      selectedId.value = 0;
+      selectedRow.value = null;
+    }
   }
 );
 
-// 监听父组件传入的visible变化（同步抽屉状态）
-watch(
-  () => props.visible,
-  (newVal) => {
-    visible.value = newVal;
+// 加载表格数据（模拟接口）
+const fetchTableData = () => {
+  // 实际项目中替换为接口调用
+  tableData.value = [
+    { id: 1, reportItem: '船舶硫含量超标燃油使用', itemType: '信息告知类', createDate: '2024-07-22' },
+    { id: 2, reportItem: '水路运输市场监管违规', itemType: '协助处置类', createDate: '2023-07-07' },
+    { id: 3, reportItem: '船舶超核定载重线航行', itemType: '信息告知类', createDate: '2024-07-22' }
+  ];
+  pagination.total = tableData.value.length;
+};
+
+// 点击行选中（单选逻辑）
+const handleRowClick = (row: any) => {
+  selectedId.value = row.id;
+  selectedRow.value = row;
+};
+
+// 单选框变更事件
+const handleRadioChange = (row: any) => {
+  selectedRow.value = row;
+};
+
+// 确认选择（向父组件传递选中数据并关闭抽屉）
+const confirmSelection = () => {
+  if (selectedRow.value) {
+    emit('update:selectedRow', selectedRow.value);  // 传递选中行数据
+    emit('update:visible', false);                  // 关闭抽屉
   }
-);
+};
+
+// 搜索/重置
+const handleSearch = () => { /* 实际项目中调用接口 */ };
+const handleReset = () => Object.assign(searchForm, { reportType: '', reportItem: '' });
+
+// 行样式（高亮选中行）
+const rowClassName = ({ row }: { row: any }) => {
+  return row.id === selectedId.value ? 'selected-row' : '';
+};
 </script>
 
 <style scoped lang="scss">
@@ -76,28 +217,18 @@ watch(
     color: white !important;
   }
 }
-
-.business-desc {
-  padding-bottom: 15px;
-  border-bottom: 1px dashed #e0e0e0;
-
-  h4 {
-    font-weight: 500;
-    margin-bottom: 5px;
-  }
-}
-
-.search-form {
-  .el-form-item {
-    margin-bottom: 15px;
-  }
+/* 选中行高亮样式 */
+.selected-row {
+  background-color: #e6f7ff !important;
 }
 
-.demo-drawer__footer {
-  display: flex;        /* 使用flex布局 */
-  justify-content: center; /* 水平居中 */
-  gap: 12px;            /* 按钮间距（可选，根据需要调整） */
-  margin-top: 20px;     /* 与上方表单的间距（可选） */
+/* 底部按钮区域 */
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 15px;
+  margin-top: 20px;
 }
 
 </style>

src/components/notificationDetailsParts/waterSafetyInformation.vue

@@ -32,11 +32,15 @@
           <el-row :gutter="24">
             <el-col :span="24">
               <el-form-item label="通报事项" prop="noticeItem" required>
-                <el-input
-                  v-model="item.noticeItem"
-                  placeholder="请填写通报事项"
-                  maxlength="500"
-                />
+                <el-button
+                  v-if="!drawerVisible && !item.noticeItem"
+                  @click="onClickNotice(index)"
+                  type="primary">
+                    请选择通报事项
+                </el-button>
+                <div v-else>
+                  {{ item.noticeItem }}
+                </div>
               </el-form-item>
             </el-col>
           </el-row>
@@ -234,6 +238,9 @@
         </div>
       </el-collapse-item>
     </el-collapse>
+    <MattersListDrawer
+      v-model:visible="drawerVisible"
+      @updateSelectedRow="updateSelectedRow" />
   </div>
 </template>
 
@@ -242,8 +249,10 @@ import { ref, reactive, defineEmits, defineExpose } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
 import { UploadFilled, Plus, Delete } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
+import MattersListDrawer from './mattersListDrawer.vue';
 
 const activeNames = ref(['1']);
+const drawerVisible = ref(false);
 
 const noticeItems = ref([
   {
@@ -307,6 +316,19 @@ const formRules = reactive<FormRules>({
   ]
 });
 
+const selectNoticeId = ref(0);
+
+const onClickNotice = (id) => {
+  console.log(id);
+  selectNoticeId.value = id;
+  drawerVisible.value = true;
+}
+
+const updateSelectedRow = (row) => {
+  noticeItems[selectNoticeId.value] = row;
+  drawerVisible.value = false;
+}
+
 const handleDelete = (index: number) => {
   if (noticeItems.value.length <= 1) {
     ElMessage.warning('至少保留一个通报事项');
@@ -483,6 +505,7 @@ const beforeUpload = (file: File) => {
   .upload-tip {
     font-size: 14px;
     line-height: 1.5;
+    margin-bottom: 20px;
   }
 }
 

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

@@ -5,16 +5,16 @@ const contentConfig = {
 	},
 	propsList: [
 		{ type: 'index', label: '序号', fixed: true  },
-		{ type: 'normal', label: '违法事件编号', prop: 'illegal_event_code' },
-		{ type: 'normal', label: '发布单位', prop: 'send_unit', width: 140 },
-		{ type: 'normal', label: '船舶名称', prop: 'ship_name', width: 140 },
-		{ type: 'normal', label: '通报事项类别', prop: 'report_event_type', width: 120 },
-		{ type: 'normal', label: '通报事项', prop: 'report_event' },
-		{ type: 'custom', label: '接收单位', prop: 'receive_unit', width: 220 },
-		{ type: 'custom', label: '通报状态', prop: 'report_status', width: 220 },
-		{ type: 'custom', label: '是否需要反馈', prop: 'is_feedback', width: 220 },
-		{ type: 'normal', label: '发布日期', prop: 'createDate', width: 140 },
-		{ type: 'normal', label: '发布人员', prop: 'creater', width: 140 },
+		{ type: 'normal', label: '违法事件编号', prop: 'violationNumber' },
+		{ type: 'normal', label: '发布单位', prop: 'releasedUnit', width: 140 },
+		{ type: 'normal', label: '船舶名称', prop: 'vesselName', width: 140 },
+		{ type: 'normal', label: '通报事项类别', prop: 'TODO', width: 120 },
+		{ type: 'normal', label: '通报事项', prop: 'TODO' },
+		{ type: 'custom', label: '接收单位', prop: 'TODO', width: 220 },
+		{ type: 'custom', label: '通报状整体状态', prop: 'TODO', width: 220 },
+		{ type: 'custom', label: '是否需要反馈', prop: 'TODO', width: 220 },
+		{ type: 'normal', label: '发布日期', prop: 'releasedDate', width: 140 },
+		{ type: 'normal', label: '发布人员', prop: 'TODO', width: 140 },
 		{ type: 'handler', label: '操作', slotName: 'operate', width: 180},
 	],
 };

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

@@ -8,9 +8,10 @@ const searchConfig = {
 	formItems: [
 		{
 			label: '违法事件编号',
-			prop: 'illegal_event_code',
+			prop: 'violationNumber',
 			type: 'input',
 			placeholder: '请输入选违法事件编号',
+			span: 6,
 		},
 		{
 			label: '通报类型',
@@ -27,6 +28,7 @@ const searchConfig = {
 				},
 			] as Array<Inew>,
 			placeholder: '请选择通报类型',
+			span: 6,
 		},
 		{
 			label: '通报事项类别',
@@ -42,12 +44,14 @@ const searchConfig = {
 					value: 'assist',
 				},
 			] as Array<Inew>,
+			span: 6,
 			placeholder: '请选择通报事项类别',
 		},
 		{
 			label: '通报事项',
 			prop: 'report_event',
 			type: 'input',
+			span: 6,
 			placeholder: '请输入通报事项',
 		},
 		{
@@ -69,6 +73,7 @@ const searchConfig = {
 					value: 'assist',
 				},
 			] as Array<Inew>,
+			span: 6,
 			placeholder: '请选择发出单位',
 		},
 		{
@@ -90,6 +95,7 @@ const searchConfig = {
 					value: 'assist',
 				},
 			] as Array<Inew>,
+			span: 6,
 			placeholder: '请选择接收单位',
 		},
 		{
@@ -135,6 +141,7 @@ const searchConfig = {
 					value: '8',
 				},
 			] as Array<Inew>,
+			span: 6,
 			placeholder: '请选择通报状态',
 		},
 		{
@@ -168,6 +175,7 @@ const searchConfig = {
 					value: '5',
 				},
 			] as Array<Inew>,
+			span: 6,
 			placeholder: '请选择采取措施',
 		},
 		{
@@ -197,24 +205,28 @@ const searchConfig = {
 					value: '4',
 				},
 			] as Array<Inew>,
+			span: 6,
 			placeholder: '请选择采取措施',
 		},
 		{
 			label: '船舶名称',
 			prop: 'ship_name',
 			type: 'input',
+			span: 6,
 			placeholder: '请输入船舶名称',
 		},
 		{
 			label: '船舶所有人',
 			prop: 'ship_owner',
 			type: 'input',
+			span: 6,
 			placeholder: '请输入船舶所有人',
 		},
 		{
 			label: '船舶经营人',
 			prop: 'ship_operator',
 			type: 'input',
+			span: 6,
 			placeholder: '请输入船舶经营人',
 		},
 		{
@@ -236,18 +248,21 @@ const searchConfig = {
 					value: '2',
 				},
 			] as Array<Inew>,
+			span: 6,
 			placeholder: '请选择采取措施',
 		},
 		{
 			label: '发布日期',
 			prop: 'createDate',
 			type: 'date-picker',
+			span: 6,
 			placeholder: '请选择发布日期',
 		},
 		{
 			label: '受理日期',
 			prop: 'accept_date',
 			type: 'date-picker',
+			span: 6,
 			placeholder: '请选择发布日期',
 		},
 	],