bj-maritime-dcds-web/src/components/notificationDetailsParts/mattersListDrawer.vue

<template>
  <div class="ship-info-drawer">
    <el-drawer
      :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, watch, defineProps, defineEmits } from 'vue';

// 接收父组件传递的参数
const props = defineProps({
  visible: { type: Boolean, default: false },
});

// 向父组件发送事件（v-model语法糖）
const emit = defineEmits(['update:visible', 'update:selectedRow']);

// 单选状态管理
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(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      // 抽屉打开时：加载数据 + 回显已选择项
      fetchTableData();
    } else {
      // 抽屉关闭时：重置选中状态（可选，根据需求保留）
      selectedId.value = 0;
      selectedRow.value = null;
    }
  }
);

// 加载表格数据（模拟接口）
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">
.ship-info-drawer {
  :deep(.el-drawer__header) {
    background-color: #163a8a !important; 
    margin: 0 !important;
    padding: 20px !important;
    color: white !important;
  }
}
/* 选中行高亮样式 */
.selected-row {
  background-color: #e6f7ff !important;
}

/* 底部按钮区域 */
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px;
  margin-top: 20px;
}

</style>