feat(certManage): 新增船员证书管理功能

- 增加船员证书管理相关的表单字段和选项
- 实现专业类别、证书类别和职务类别的联动逻辑
- 添加证书类型数据的获取和展示
- 优化表单布局和样式

src/views/workStation/certsManage.vue

@@ -174,7 +174,7 @@
               value-format="YYYY/MM/DD"
               format="YYYY/MM/DD"
             />
-            <div style="margin: 0 4px">-</div>
+            <div style="margin: 0 10px">-</div>
             <el-date-picker
               style="width: 140px; font-size: 13px"
               v-model="ruleForm.endValidTime"
@@ -184,6 +184,137 @@
               format="YYYY/MM/DD"
             />
           </el-form-item>
+          <div v-if="dialogType == 6">
+            <el-row :gutter="20">
+              <el-col :span="10">
+                <el-form-item label="船员姓名">
+                  {{ ruleForm.fullName }}
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="10">
+                <el-form-item label="船员性别" prop="gender">
+                  <el-select
+                    v-model="ruleForm.gender"
+                    placeholder="请选择"
+                    class="w300"
+                  >
+                    <el-option label="男" :value="1"></el-option>
+                    <el-option label="女" :value="2"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="10">
+                <el-form-item label="证书编号" prop="certNo">
+                  <el-input
+                    v-model="ruleForm.certNo"
+                    placeholder="请输入"
+                    class="w300"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="10">
+                <el-form-item label="专业类别" prop="majorId">
+                  <el-select
+                    v-model="ruleForm.majorId"
+                    placeholder="请选择专业类别"
+                    class="w300"
+                    @change="handleMajorChange($event, 1)"
+                  >
+                    <el-option
+                      v-for="item in certTypeOptions"
+                      :key="item.key"
+                      :label="item.value"
+                      :value="item.key"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="10">
+                <el-form-item label="证书类别" prop="categoryId">
+                  <el-select
+                    v-model="ruleForm.categoryId"
+                    placeholder="请选择证书类别"
+                    class="w300"
+                    @change="handleCategoryChange($event, 1)"
+                  >
+                    <el-option
+                      v-for="item in categoryOptions"
+                      :key="item.key"
+                      :label="item.value"
+                      :value="item.key"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="10">
+                <el-form-item label="职务类别" prop="postId">
+                  <el-select
+                    v-model="ruleForm.postId"
+                    placeholder="请选择职务类别"
+                    class="w300"
+                    @change="handlePostChange"
+                  >
+                    <el-option
+                      v-for="item in postOptions"
+                      :key="item.key"
+                      :label="item.value"
+                      :value="item.key"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="10">
+                <el-form-item label="发证日期" prop="issuerAt">
+                  <el-date-picker
+                    v-model="ruleForm.issuerAt"
+                    type="date"
+                    placeholder="选择日期"
+                    format="YYYY-MM-DD"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="10">
+                <el-form-item label="截止日期" prop="expiryAt">
+                  <el-date-picker
+                    v-model="ruleForm.expiryAt"
+                    type="date"
+                    placeholder="选择日期"
+                    format="YYYY-MM-DD"
+                    class="w300"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="10">
+                <el-form-item label="签发机构" prop="issuerAuthority">
+                  <el-input
+                    v-model="ruleForm.issuerAuthority"
+                    placeholder="请输入"
+                    class="w300"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="16">
+                <el-form-item label="适用限制">
+                  <el-input
+                    type="textarea"
+                    v-model="ruleForm.applicableRestrictions"
+                    :rows="4"
+                    placeholder="请输入"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
           <el-form-item label="证书图片">
             <div class="df">
               <Uploader
@@ -206,8 +337,8 @@
               v-model="ruleForm.processMethod"
               @change="handleProcessMethodChange"
             >
-              <el-radio :label="1">自办</el-radio>
-              <el-radio :label="2">代办</el-radio>
+              <el-radio :value="1">自办</el-radio>
+              <el-radio :value="2">代办</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item
@@ -215,7 +346,7 @@
             v-if="ruleForm.processMethod === 2"
           >
             <RemoteSelect
-              class="w200"
+              class="w300"
               api="getCertServAuthSelect"
               v-model="ruleForm.certServAuthName"
               placeholder="请选择"
@@ -345,7 +476,15 @@ function changeSelect(e) {
 }
 const ruleFormVisible = ref(false);
 const ruleFormRef = ref(null);
-const ruleForm = ref({});
+const certTypeOptions = ref([]); // 专业类别选项
+const categoryOptions = ref([]); // 证书类别选项
+const postOptions = ref([]); // 职务类别选项
+const certTypeData = ref([]); // 存储完整的证书类型数据
+
+const ruleForm = ref({
+  gender: "",
+  certNo: "",
+});
 const certs = ref([]);
 const certFiles = ref([]);
 const dialogType = ref(0);
@@ -375,10 +514,16 @@ async function handleEdit(row) {
   ruleForm.value.processRemark = "";
 
   if (data.result.type === 6) {
-    ruleForm.value = { ...ruleForm.value, ...data.result.certDetail };
+    Object.assign(ruleForm.value, data.result.certDetail);
     certFiles.value = data.result.certFiles;
+    if (ruleForm.value.majorId) {
+      handleMajorChange(ruleForm.value.majorId);
+      if (ruleForm.value.categoryId) {
+        handleCategoryChange(ruleForm.value.categoryId);
+      }
+    }
   } else {
-    ruleForm.value = { ...ruleForm.value, ...data.result.certValids[0] };
+    Object.assign(ruleForm.value, data.result.certValids[0]);
     certs.value = data.result.certs;
     shipParams.value.type = data.result.type;
   }
@@ -426,6 +571,67 @@ function handleProcessMethodChange(value) {
   }
 }
 
+const handleMajorChange = (majorId, isChange) => {
+  if (isChange) {
+    ruleForm.value.categoryId = "";
+    ruleForm.value.postId = "";
+  }
+  const selectedMajor = certTypeData.value.find((item) => item.key === majorId);
+  if (selectedMajor && selectedMajor.children) {
+    categoryOptions.value = selectedMajor.children.map((item) => ({
+      key: item.key,
+      value: item.value,
+    }));
+  } else {
+    categoryOptions.value = [];
+  }
+  postOptions.value = [];
+};
+
+const handleCategoryChange = (categoryId, isChange) => {
+  if (isChange) {
+    ruleForm.value.postId = "";
+  }
+  const selectedMajor = certTypeData.value.find(
+    (item) => item.key === ruleForm.value.majorId
+  );
+  if (selectedMajor && selectedMajor.children) {
+    const selectedCategory = selectedMajor.children.find(
+      (item) => item.key === categoryId
+    );
+    if (selectedCategory && selectedCategory.children) {
+      postOptions.value = selectedCategory.children.map((item) => ({
+        key: item.key,
+        value: item.value,
+      }));
+    } else {
+      postOptions.value = [];
+    }
+  } else {
+    postOptions.value = [];
+  }
+};
+
+function handlePostChange() {}
+
+const getCertTypeData = async () => {
+  try {
+    const { data } = await api.getShipOwnerCertTypeSelect();
+    if (data.status === 0 && data.result) {
+      certTypeData.value = data.result;
+      certTypeOptions.value = data.result.map((item) => ({
+        key: item.key,
+        value: item.value,
+      }));
+    } else {
+      ElMessage.error(data.msg || "获取证书类型数据失败");
+    }
+  } catch (error) {
+    console.error("获取证书类型数据出错:", error);
+    ElMessage.error("获取证书类型数据出错");
+  }
+};
+
 function selectCertServer(e) {
   console.log(e);
   if (e && e.value) {
@@ -447,6 +653,7 @@ async function submit() {
 onMounted(() => {
   getCertList();
   getCertListType();
+  getCertTypeData();
 });
 </script>
 
@@ -458,6 +665,6 @@ onMounted(() => {
 }
 
 .w300 {
-  width: 300px;
+  width: 300px !important;
 }
 </style>