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

<template>
  <div class="ship-info-form">
    <!-- 折叠面板 -->
    <el-collapse v-model="activeNames" class="collapse-panel">
      <el-collapse-item title="涉事主体基本信息" name="1" :border="false">
        <div v-if="isShowAdd" class="flex-cc">
          <el-button @click="onAddVessels" :icon="Plus">添加船舶</el-button>
          <el-tooltip content="Bottom center" placement="bottom" effect="light">
              <el-button link :icon="Warning">业务说明</el-button>
          </el-tooltip>
        </div>
        <div v-else>
          <el-form
            ref="ruleFormRef"
            :model="formData"
            :rules="formRules"
            label-width="130px"
            size="default"
            class="form-container"
          >
            <!-- 第一行：中文船名、英文船名、船舶识别号 -->
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="中文船名" prop="chineseName" required>
                  <el-input 
                    v-model="formData.chineseName" 
                    placeholder="请填写中文船名"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="英文船名" prop="englishName">
                  <el-input 
                    v-model="formData.englishName" 
                    placeholder="请填写英文船名"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="船舶识别号" prop="vesselId">
                  <el-input 
                    v-model="formData.vesselId" 
                    placeholder="请填写船舶识别号"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行：MMSI、IMO编号、呼号 -->
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="MMSI" prop="mmsi">
                  <el-input 
                    v-model="formData.mmsi" 
                    placeholder="请填写MMSI"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="IMO编号" prop="imoNumber">
                  <el-input 
                    v-model="formData.imoNumber" 
                    placeholder="请填写IMO编号"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="呼号" prop="callSign">
                  <el-input 
                    v-model="formData.callSign" 
                    placeholder="请填写呼号"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行：牌薄号、船舶种类、船籍港 -->
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="牌薄号" prop="registrationNo">
                  <el-input 
                    v-model="formData.registrationNo" 
                    placeholder="请填写牌薄号"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="船舶种类" prop="vesselType" required>
                  <el-select 
                    v-model="formData.vesselType" 
                    placeholder="请选择船舶种类"
                    :disabled="isUnknownVessel"
                  >
                    <el-option label="散货船" value="bulkCarrier" />
                    <el-option label="集装箱船" value="containerShip" />
                    <el-option label="油船" value="tanker" />
                    <el-option label="杂货船" value="generalCargo" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="船籍港" prop="portOfRegistry" required>
                  <el-input 
                    v-model="formData.portOfRegistry" 
                    placeholder="请填写船籍港"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第四行：国籍 -->
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="国籍" prop="nationality">
                  <el-input 
                    v-model="formData.nationality" 
                    placeholder="请填写国籍"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第五行：船舶所有人、所有人电话 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="船舶所有人" prop="owner" required>
                  <el-input 
                    v-model="formData.owner" 
                    placeholder="请填写船舶所有人"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所有人电话" prop="ownerPhone">
                  <el-input 
                    v-model="formData.ownerPhone" 
                    placeholder="请填写船舶所有人联系电话"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第六行：船舶经营人、经营人电话 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="船舶经营人" prop="operator" required>
                  <el-input 
                    v-model="formData.operator" 
                    placeholder="请填写船舶经营人"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经营人电话" prop="operatorPhone">
                  <el-input 
                    v-model="formData.operatorPhone" 
                    placeholder="请填写船舶经营人联系电话"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第七行：其他相关组织、其他相关组织电话 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="其他相关组织" prop="otherOrg">
                  <el-input 
                    v-model="formData.otherOrg" 
                    placeholder="请填写其他相关组织"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="其他相关组织电话" prop="otherOrgPhone">
                  <el-input 
                    v-model="formData.otherOrgPhone" 
                    placeholder="请填写其他相关组织联系电话"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第八行：船舶信息描述 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="船舶信息描述" prop="description">
                  <el-input 
                    v-model="formData.description" 
                    placeholder="请填写船舶信息描述"
                    type="textarea" 
                    :rows="4"
                    :disabled="isUnknownVessel"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="form-actions">
            <el-button 
              type="default" 
              text 
              class="reset-btn" 
              @click="handleReset"
            >
              船舶信息重置
            </el-button>
            <el-tooltip content="Bottom center" placement="bottom" effect="light">
                <el-button link :icon="Warning">业务说明</el-button>
            </el-tooltip>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <AddNewVesselsDrawer
      v-model:visible="drawerVisible"
      @selectShip="handleSelectShip"
    ></AddNewVesselsDrawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';  // 导入表单类型
import { Plus, Warning } from '@element-plus/icons-vue';
import AddNewVesselsDrawer from './addNewVesselsDrawer.vue';

const ruleFormRef = ref<FormInstance>();
const activeNames = ref(['1']);
const isUnknownVessel = ref(false);
const isShowAdd = ref(true);
const drawerVisible = ref(false);
const formData = reactive({
  chineseName: '',
  englishName: '',
  vesselId: '',
  mmsi: '',
  imoNumber: '',
  callSign: '',
  registrationNo: '',
  vesselType: '',
  portOfRegistry: '',
  nationality: '',
  owner: '',
  ownerPhone: '',
  operator: '',
  operatorPhone: '',
  otherOrg: '',
  otherOrgPhone: '',
  description: ''
});

const formRules = reactive<FormRules>({
  chineseName: [
    { required: true, message: '请输入中文船名', trigger: 'blur' },
    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
  ],
  vesselType: [
    { required: true, message: '请选择船舶种类', trigger: 'change' }
  ],
  portOfRegistry: [
    { required: true, message: '请输入船籍港', trigger: 'blur' },
    { max: 30, message: '长度不能超过30个字符', trigger: 'blur' }
  ],
  owner: [
    { required: true, message: '请输入船舶所有人', trigger: 'blur' },
    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
  ],
  operator: [
    { required: true, message: '请输入船舶经营人', trigger: 'blur' },
    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
  ],
  ownerPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  operatorPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ]
});

// 重置按钮功能
const handleReset = () => {
  if (!ruleFormRef.value) return;
  
  // 重置表单（清除验证状态 + 恢复初始数据）
  ruleFormRef.value.resetFields();
  
  // （可选）如需自定义默认值，取消以下注释并修改
  // formData.chineseName = '扬子10';
  // formData.vesselType = 'bulkCarrier';
};

formData.chineseName = '扬子10';
formData.englishName = 'YANGZE 10';
formData.mmsi = '636017533';
formData.imoNumber = '9574444';
formData.callSign = 'D5LK6';
formData.vesselType = 'bulkCarrier'; // 散货船
formData.portOfRegistry = '蒙罗维亚';
formData.nationality = '利比里亚';

const handleSelectShip = (data) => {
  console.log(data);
  drawerVisible.value = false
  isShowAdd.value = false
}

const onAddVessels = () => {
  drawerVisible.value = true
}
</script>

<style scoped lang="scss">
.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__content {
  padding-top: 25px;
}

/* 表单容器 */
.form-container {
  margin-top: 10px;
}

/* 按钮区域 */
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 20px;
  
  .reset-btn {
    color: #f56c6c;
  }
}

/* 适配小屏幕 */
@media (max-width: 1024px) {
  .el-row {
    .el-col {
      &:nth-child(3n) {
        margin-bottom: 15px;
      }
    }
  }
}

@media (max-width: 768px) {
  .el-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px;
  }
}
</style>