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

<template>
  <div class="ship-info-drawer">
    <el-drawer
      v-model="visible"
      title="事项清单查询列表"
      :with-header="true"
      :close-on-click-modal="false"
      size="70%"
    >

    </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: ''
});

// 表单实例
const searchFormRef = ref<FormInstance>();

// 重置按钮事件
const handleReset = () => {
  if (searchFormRef.value) {
    searchFormRef.value.resetFields(); // 重置表单
  }
};

// 监听抽屉显示状态变化，通知父组件
watch(
  () => visible.value,
  (newVal) => {
    emit('update:visible', newVal);
  }
);

// 监听父组件传入的visible变化（同步抽屉状态）
watch(
  () => props.visible,
  (newVal) => {
    visible.value = newVal;
  }
);
</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;
  }
}

.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;
  }
}

.demo-drawer__footer {
  display: flex;        /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  gap: 12px;            /* 按钮间距（可选，根据需要调整） */
  margin-top: 20px;     /* 与上方表单的间距（可选） */
}

</style>