ShippingService_WebApp/src/views/shipOwnerManage/shipOwnerDetail.vue

<template>
  <div class="line-container-p24">
    <div
      class="df aic dib go-back ml8 pointer"
      @click="router.replace('/shipOwnerManage/shipOwnerList')"
    >
      <el-icon class="mr10"><ArrowLeftBold /></el-icon>
      <div>返回船员列表</div>
    </div>
  </div>

  <div class="container-title">基本信息</div>
  <div class="line-container-p24">
    <el-form
      :model="shipOwnerForm"
      :rules="rules"
      ref="shipOwnerFormRef"
      label-width="100px"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="船员姓名" prop="userName" required>
            <el-input
              v-model="shipOwnerForm.userName"
              placeholder="请输入"
              :disabled="!!shipOwnerForm.shipOwnerId"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="船员手机号" prop="userPhone" required>
            <el-input
              v-model="shipOwnerForm.userPhone"
              placeholder="请输入"
              :disabled="!!shipOwnerForm.shipOwnerId"
              @blur="handlePhoneBlur"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="船员身份证号">
            <el-input
              v-model="shipOwnerForm.idcardNo"
              placeholder="请输入"
              :disabled="!!shipOwnerForm.shipOwnerId"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="身份证人像面">
            <Uploader
              :action-url="
                shipOwnerForm.shipOwnerId
                  ? store.state.shipOwnerUpdateUrl
                  : store.state.shipOwnerCacheUrl
              "
              :file-list="idCardFrontFileList"
              :params="{ type: 8, shipOwnerId: shipOwnerForm.shipOwnerId }"
              @on-upload-file-list="handleIdCardFrontUpload"
              @on-remove-file-list="handleIdCardFrontRemove"
              :limit="1"
              upload-text="点击上传人像面"
              :disabled="!!shipOwnerForm.shipOwnerId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证国徽面">
            <Uploader
              :action-url="
                shipOwnerForm.shipOwnerId
                  ? store.state.shipOwnerUpdateUrl
                  : store.state.shipOwnerCacheUrl
              "
              :file-list="idCardBackFileList"
              :params="{ type: 9, shipOwnerId: shipOwnerForm.shipOwnerId }"
              @on-upload-file-list="handleIdCardBackUpload"
              @on-remove-file-list="handleIdCardBackRemove"
              :limit="1"
              upload-text="点击上传国徽面"
              :disabled="!!shipOwnerForm.shipOwnerId"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>

  <div class="container-title">船员证书信息</div>
  <div class="line-container-p24">
    <el-form
      :model="shipOwnerForm.cerificate"
      :rules="certificateRules"
      ref="certificateFormRef"
      label-width="100px"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="性别">
            <el-select
              v-model="shipOwnerForm.cerificate.gender"
              placeholder="请选择"
            >
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证书编号" prop="certNo" required>
            <el-input
              v-model="shipOwnerForm.cerificate.certNo"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="证书类型">
            <el-input
              v-model="shipOwnerForm.cerificate.certType"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务资格" prop="postRole" required>
            <el-select
              v-model="shipOwnerForm.cerificate.postRole"
              placeholder="请选择"
            >
              <el-option label="大副" value="大副"></el-option>
              <el-option label="二副" value="二副"></el-option>
              <el-option label="三副" value="三副"></el-option>
              <el-option label="船长" value="船长"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="发证日期" prop="issuerAt" required>
            <el-date-picker
              v-model="shipOwnerForm.cerificate.issuerAt"
              type="date"
              placeholder="选择日期"
              format="YYYY/MM/DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="截止日期" prop="expiryAt" required>
            <el-date-picker
              v-model="shipOwnerForm.cerificate.expiryAt"
              type="date"
              placeholder="选择日期"
              format="YYYY/MM/DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="签发机构" prop="issuerAuthority" required>
            <el-input
              v-model="shipOwnerForm.cerificate.issuerAuthority"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="适用限制">
            <el-input
              type="textarea"
              v-model="shipOwnerForm.cerificate.applicableRestrictions"
              :rows="4"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="证书照片" prop="certFile" required>
            <Uploader
              :action-url="
                shipOwnerForm.shipOwnerId
                  ? store.state.shipOwnerUpdateUrl
                  : store.state.shipOwnerCacheUrl
              "
              :file-list="certFileList"
              :params="{ type: 1, shipOwnerId: shipOwnerForm.shipOwnerId }"
              @on-upload-file-list="handleCertUpload"
              @on-remove-file-list="handleCertRemove"
              :limit="1"
              upload-text="点击上传证书"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>

  <div class="container-title">其他文件</div>
  <div class="line-container-p24">
    <div class="mb20">健康证明</div>
    <Uploader
      :action-url="
        shipOwnerForm.shipOwnerId
          ? store.state.shipOwnerUpdateUrl
          : store.state.shipOwnerCacheUrl
      "
      :file-list="healthFileList"
      :params="{ type: 2, shipOwnerId: shipOwnerForm.shipOwnerId }"
      @on-upload-file-list="handleHealthUpload"
      @on-remove-file-list="handleHealthRemove"
      :limit="2"
      upload-text="点击上传"
    />

    <div class="mb20 mt30">服务簿</div>
    <Uploader
      :action-url="
        shipOwnerForm.shipOwnerId
          ? store.state.shipOwnerUpdateUrl
          : store.state.shipOwnerCacheUrl
      "
      :file-list="serviceFileList"
      :params="{ type: 3, shipOwnerId: shipOwnerForm.shipOwnerId }"
      @on-upload-file-list="handleServiceUpload"
      @on-remove-file-list="handleServiceRemove"
      :limit="2"
      upload-text="点击上传"
    />
  </div>

  <div class="df jcc mt30 mb30">
    <el-button @click="router.replace('/shipOwnerManage/shipOwnerList')">
      取消
    </el-button>
    <el-button type="primary" @click="saveShipOwner">保存</el-button>
  </div>
</template>
<script setup>
import { ref, h, reactive, toRefs, onMounted, computed } from "vue";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import store from "../../store";
import router from "../../router";
import md5 from "md5";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";
import _ from "lodash";

const route = useRoute();
const uploadConfig = ref({});
const shipOwnerFormRef = ref(null);
const certificateFormRef = ref(null);

// 表单验证规则
const rules = {
  userName: [{ required: true, message: "请输入船员姓名", trigger: "blur" }],
  userPhone: [
    { required: true, message: "请输入船员手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号格式",
      trigger: "blur",
    },
  ],
};
// 验证证书照片
const validateCertFile = (rule, value, callback) => {
  if (!certFileList.value || certFileList.value.length === 0) {
    callback(new Error("请上传证书照片"));
  } else {
    callback();
  }
};

// 验证截止日期
const validateExpiryDate = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请选择截止日期"));
  } else {
    if (shipOwnerForm.value.cerificate.issuerAt) {
      // 确保截止日期晚于发证日期
      if (
        new Date(value) <= new Date(shipOwnerForm.value.cerificate.issuerAt)
      ) {
        callback(new Error("截止日期必须晚于发证日期"));
      }
    }
    callback();
  }
};

// 验证发证日期
const validateIssuerDate = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请选择发证日期"));
  } else {
    if (shipOwnerForm.value.cerificate.expiryAt) {
      // 如果已选择截止日期，确保发证日期早于截止日期
      if (
        new Date(value) >= new Date(shipOwnerForm.value.cerificate.expiryAt)
      ) {
        callback(new Error("发证日期必须早于截止日期"));
      }
    }
    callback();
  }
};

// 证书表单验证规则
const certificateRules = {
  certNo: [{ required: true, message: "请输入证书编号", trigger: "blur" }],
  postRole: [{ required: true, message: "请选择职务资格", trigger: "change" }],
  issuerAt: [
    { required: true, message: "请选择发证日期", trigger: "change" },
    { validator: validateIssuerDate, trigger: "change" },
  ],
  expiryAt: [
    { required: true, message: "请选择截止日期", trigger: "change" },
    { validator: validateExpiryDate, trigger: "change" },
  ],
  issuerAuthority: [
    { required: true, message: "请输入签发机构", trigger: "blur" },
  ],
  certFile: [{ validator: validateCertFile, trigger: "change" }],
};
// 初始化船员表单数据结构
const shipOwnerForm = ref({
  shipOwnerId: 0, // 船员ID，匹配时返回，未匹配到为0，非0时下方内容无效
  userName: "", // 船员姓名（必填）
  userPhone: "", // 船员手机（必填）
  idcardNo: "", // 船员身份证号（非必填）
  idcardFrontFileKey: "", // 船员身份证正面文件key（非必填）
  idcardFrontViewUrl: "", // 船员身份证正面文件预览地址（非必填）
  idcardFrontDownloadUrl: "", // 船员身份证正面文件下载地址（非必填）
  idcardBackFileKey: "", // 船员身份证反面文件key（非必填）
  idcardBackViewUrl: "", // 船员身份证反面文件预览地址（非必填）
  idcardBackDownloadUrl: "", // 船员身份证反面文件下载地址（非必填）
  cerificate: {
    gender: "", // 性别（1-男；2-女）
    certNo: "", // 证书编号（必填）
    certType: "", // 证书类型（非必填）
    postRole: "", // 职务资格（必填）
    issuerAt: "", // 发证日期（必填）
    expiryAt: "", // 截止日期（必填）
    issuerAuthority: "", // 签发机构（必填）
    applicableRestrictions: "", // 适用限制（非必填）
  },
  documents: [], // 文件信息数组
});

// 计算属性 - 文件列表
const idCardFrontFileList = computed(() => {
  if (
    shipOwnerForm.value.idcardFrontFileKey &&
    shipOwnerForm.value.idcardFrontViewUrl
  ) {
    return [
      {
        fileKey: shipOwnerForm.value.idcardFrontFileKey,
        viewUrl: shipOwnerForm.value.idcardFrontViewUrl,
        downloadUrl: shipOwnerForm.value.idcardFrontDownloadUrl,
      },
    ];
  }
  return [];
});

const idCardBackFileList = computed(() => {
  if (
    shipOwnerForm.value.idcardBackFileKey &&
    shipOwnerForm.value.idcardBackViewUrl
  ) {
    return [
      {
        fileKey: shipOwnerForm.value.idcardBackFileKey,
        viewUrl: shipOwnerForm.value.idcardBackViewUrl,
        downloadUrl: shipOwnerForm.value.idcardBackDownloadUrl,
      },
    ];
  }
  return [];
});

const certFileList = computed(() => {
  return (
    shipOwnerForm.value.documents?.filter((doc) => doc.docType === 1) || []
  );
});

const healthFileList = computed(() => {
  return (
    shipOwnerForm.value.documents?.filter((doc) => doc.docType === 2) || []
  );
});

const serviceFileList = computed(() => {
  return (
    shipOwnerForm.value.documents?.filter((doc) => doc.docType === 3) || []
  );
});

async function getShipOwnerDetail() {
  let { data } = await api.getShipOwnerDetail({
    shipOwnerId: route.query.shipOwnerId,
  });
  console.log(data);
}

// 手机号失去焦点时检查是否已存在船员信息
const handlePhoneBlur = () => {
  if (!shipOwnerForm.value.userPhone) return;

  // 如果已经有shipOwnerId，说明已经匹配到了船员，不需要再查询
  if (shipOwnerForm.value.shipOwnerId) return;
};

// 身份证人像面上传处理
const handleIdCardFrontUpload = ({ response }) => {
  if (response.code === 0) {
    shipOwnerForm.value.idcardFrontFileKey = response.data.fileKey;
    shipOwnerForm.value.idcardFrontViewUrl = response.data.viewUrl;
    shipOwnerForm.value.idcardFrontDownloadUrl = response.data.downloadUrl;
  } else {
    ElMessage.error(response.msg || "上传失败");
  }
};

// 身份证人像面删除处理
const handleIdCardFrontRemove = () => {
  shipOwnerForm.value.idcardFrontFileKey = "";
  shipOwnerForm.value.idcardFrontViewUrl = "";
  shipOwnerForm.value.idcardFrontDownloadUrl = "";
};

// 身份证国徽面上传处理
const handleIdCardBackUpload = ({ response }) => {
  if (response.code === 0) {
    shipOwnerForm.value.idcardBackFileKey = response.data.fileKey;
    shipOwnerForm.value.idcardBackViewUrl = response.data.viewUrl;
    shipOwnerForm.value.idcardBackDownloadUrl = response.data.downloadUrl;
  } else {
    ElMessage.error(response.msg || "上传失败");
  }
};

// 身份证国徽面删除处理
const handleIdCardBackRemove = () => {
  shipOwnerForm.value.idcardBackFileKey = "";
  shipOwnerForm.value.idcardBackViewUrl = "";
  shipOwnerForm.value.idcardBackDownloadUrl = "";
};

// 证书上传处理
const handleCertUpload = ({ response }) => {
  if (response.code === 0) {
    if (!shipOwnerForm.value.documents) {
      shipOwnerForm.value.documents = [];
    }
    shipOwnerForm.value.documents.push({
      docType: 1, // 船员适任证书
      fileKey: response.data.fileKey,
      viewUrl: response.data.viewUrl,
      downloadUrl: response.data.downloadUrl,
    });
  } else {
    ElMessage.error(response.msg || "上传失败");
  }
};

// 证书删除处理
const handleCertRemove = ({ fileIndex }) => {
  const certDocs = shipOwnerForm.value.documents.filter(
    (doc) => doc.docType === 1
  );
  const docToRemove = certDocs[fileIndex];
  shipOwnerForm.value.documents = shipOwnerForm.value.documents.filter(
    (doc) => doc !== docToRemove
  );
};

// 健康证明上传处理
const handleHealthUpload = ({ response }) => {
  if (response.code === 0) {
    if (!shipOwnerForm.value.documents) {
      shipOwnerForm.value.documents = [];
    }
    shipOwnerForm.value.documents.push({
      docType: 2, // 体检表
      fileKey: response.data.fileKey,
      viewUrl: response.data.viewUrl,
      downloadUrl: response.data.downloadUrl,
    });
  } else {
    ElMessage.error(response.msg || "上传失败");
  }
};

// 健康证明删除处理
const handleHealthRemove = ({ fileIndex }) => {
  const healthDocs = shipOwnerForm.value.documents.filter(
    (doc) => doc.docType === 2
  );
  const docToRemove = healthDocs[fileIndex];
  shipOwnerForm.value.documents = shipOwnerForm.value.documents.filter(
    (doc) => doc !== docToRemove
  );
};

// 服务簿上传处理
const handleServiceUpload = ({ response }) => {
  if (response.code === 0) {
    if (!shipOwnerForm.value.documents) {
      shipOwnerForm.value.documents = [];
    }
    shipOwnerForm.value.documents.push({
      docType: 3, // 服务簿
      fileKey: response.data.fileKey,
      viewUrl: response.data.viewUrl,
      downloadUrl: response.data.downloadUrl,
    });
  } else {
    ElMessage.error(response.msg || "上传失败");
  }
};

// 服务簿删除处理
const handleServiceRemove = ({ fileIndex }) => {
  const serviceDocs = shipOwnerForm.value.documents.filter(
    (doc) => doc.docType === 3
  );
  const docToRemove = serviceDocs[fileIndex];
  shipOwnerForm.value.documents = shipOwnerForm.value.documents.filter(
    (doc) => doc !== docToRemove
  );
};

// 保存船员信息
const saveShipOwner = () => {
  console.log("保存船员信息", shipOwnerForm.value);
  // 使用Element Plus表单验证
  shipOwnerFormRef.value.validate((valid1) => {
    if (!valid1) return;

    certificateFormRef.value.validate((valid2) => {
      if (!valid2) return;

      // 验证证书照片是否上传
      if (!certFileList.value.length) {
        ElMessage.warning("请上传证书照片");
        return;
      }

      // 表单验证通过，继续保存操作
    });
  });

  // 如果有ID，则更新，否则新增
  const apiMethod = route.query.shipOwnerId
    ? api.updateShipOwner
    : api.addShipOwner;
  const successMsg = route.query.shipOwnerId ? "更新成功" : "添加成功";

  // 构建保存数据
  const saveData = { ...shipOwnerForm.value };
  if (route.query.shipOwnerId) {
    saveData.id = route.query.shipOwnerId;
  }

  apiMethod(saveData)
    .then((res) => {
      if (res.data.code === 0) {
        ElMessage.success(successMsg);
        router.replace("/shipOwnerManage/shipOwnerList");
      } else {
        ElMessage.error(res.data.msg || "保存失败");
      }
    })
    .catch((err) => {
      console.error(err);
      ElMessage.error("保存失败");
    });
};

// 初始化数据
onMounted(() => {
  // 如果有ID参数，获取船员详情
  if (route.query.shipOwnerId) {
    shipOwnerForm.value.shipOwnerId = Number(route.query.shipOwnerId);
    getShipOwnerDetail();
  }
});
</script>
<style scoped>
:deep().el-upload-list__item-thumbnail {
  object-fit: contain;
}

.upload-plus-icon {
  height: 15%;
  color: rgb(139, 147, 156);
  line-height: 100px;
  font-size: 40px;
  font-weight: 200;
}

.upload-text {
  height: 25%;
  color: rgb(139, 147, 156);
}

:deep().el-upload--picture-card {
  border: none;
  width: auto;
}

.unit {
  width: 40px;
  text-align: center;
  color: #555;
}
</style>