feat(workStation): 新增证书代办机构管理功能

- 添加证书代办机构相关API接口
- 实现证书代办机构列表展示、搜索、新增、编辑和删除功能
- 在菜单中添加证书代办机构管理入口
- 优化证书管理页面布局

src/apis/fetch.js

@@ -101,6 +101,32 @@ export default {
     return $http("/cert/certList/type", data);
   },
 
+  // 证书代办机构相关API
+  // 获取证书代办机构列表
+  getCertServAuthList(data) {
+    return $http("/cert/serv/auth/list", data);
+  },
+
+  // 新增证书代办机构
+  addCertServAuth(data) {
+    return $http("/cert/serv/auth/add", data);
+  },
+
+  // 修改证书代办机构
+  modifyCertServAuth(data) {
+    return $http("/cert/serv/auth/modify", data);
+  },
+
+  // 删除证书代办机构
+  deleteCertServAuth(data) {
+    return $http("/cert/serv/auth/delete", data);
+  },
+
+  // 证书代办机构选择框
+  getCertServAuthSelect(data) {
+    return $http("/cert/serv/auth/select", data);
+  },
+
   // 新增安全检查模板
   addSecurityTemplate(data) {
     return $http("/security/template/add", data);

src/layout/Aside.vue

@@ -168,6 +168,10 @@ if (store.state.shippingCompany === "汇很多船务公司") {
     path: "/workStation/palletManage",
     name: "货盘管理",
   });
+  menu.value.at(-1).items.push({
+    path: "/workStation/certPendingOrg",
+    name: "证书待办机构管理",
+  });
 }
 </script>
 <style scoped>

src/main.js

@@ -100,6 +100,10 @@ router.afterEach((to, from) => {
       path: "/workStation/palletManage",
       name: "货盘管理",
     });
+    store.state.menu.at(-1).items.push({
+      path: "/workStation/certPendingOrg",
+      name: "证书待办机构管理",
+    });
   }
 });
 

src/router/index.js

@@ -107,6 +107,14 @@ const router = createRouter({
       },
       component: () => import("../views/workStation/insuranceManage.vue"),
     },
+    {
+      path: "/workStation/certPendingOrg",
+      name: "certPendingOrg",
+      meta: {
+        title: "证书代办机构管理",
+      },
+      component: () => import("../views/workStation/certPendingOrg.vue"),
+    },
     {
       path: "/shipSecurityManage/shipCheckTemplateDetail",
       name: "shipCheckTemplateDetail",

src/views/workStation/certPendingOrg.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="full-container-p24">
+    <div class="mb30 df aic jcsb">
+      <div class="df aic">
+        <el-input
+          v-model="searchKey"
+          placeholder="请输入代办机构名称"
+          class="w300"
+          @keyup.enter="handleSearch"
+          clearable
+          @clear="handleSearch"
+        />
+        <el-button class="ml10" type="primary" @click="handleSearch">
+          搜索
+        </el-button>
+      </div>
+      <el-button class="ml10" type="primary" @click="handleAdd">
+        新增代办机构
+      </el-button>
+    </div>
+
+    <el-table border :data="tableData" stripe>
+      <el-table-column type="index" label="序号" width="80" align="center" />
+      <el-table-column
+        prop="certServAuthName"
+        label="代办机构名称"
+        min-width="200"
+        align="center"
+      />
+      <el-table-column
+        prop="contactName"
+        label="联系人姓名"
+        min-width="120"
+        align="center"
+      />
+      <el-table-column
+        prop="contactPhone"
+        label="联系电话"
+        min-width="150"
+        align="center"
+      />
+      <el-table-column
+        prop="createTime"
+        label="创建时间"
+        min-width="180"
+        align="center"
+      >
+        <template #default="scope">
+          {{ formatDate(scope.row.createTime) }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" width="180" align="center">
+        <template #default="scope">
+          <el-button type="primary" text @click="handleEdit(scope.row)">
+            修改
+          </el-button>
+          <el-button type="danger" text @click="deleteCertServAuth(scope.row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="df aic jcfe mt40 mr20">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :current-page="currentPage"
+        :total="total"
+        @current-change="pageChange"
+      />
+    </div>
+
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-width="120px"
+      >
+        <el-form-item label="代办机构名称" prop="certServAuthName">
+          <el-input v-model="formData.certServAuthName" class="w400" />
+        </el-form-item>
+        <el-form-item label="联系人姓名" prop="contactName">
+          <el-input v-model="formData.contactName" class="w400" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="contactPhone">
+          <el-input v-model="formData.contactPhone" class="w400" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import api from "../../apis/fetch";
+import { useStore } from "vuex";
+
+const store = useStore();
+const loginAccountId = store.state.loginAccountId;
+
+const searchKey = ref("");
+const currentPage = ref(1);
+const total = ref(0);
+const tableData = ref([]);
+
+const dialogVisible = ref(false);
+const dialogTitle = ref("新增代办机构");
+const formRef = ref(null);
+
+const formData = reactive({
+  loginAccountId: loginAccountId,
+  certServAuthId: 0,
+  certServAuthName: "",
+  contactName: "",
+  contactPhone: "",
+});
+
+const rules = reactive({
+  certServAuthName: [
+    { required: true, message: "请输入代办机构名称", trigger: "blur" },
+  ],
+  contactName: [
+    { required: true, message: "请输入联系人姓名", trigger: "blur" },
+  ],
+  contactPhone: [
+    { required: true, message: "请输入联系电话", trigger: "blur" },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: "请输入正确的手机号码",
+      trigger: "blur",
+    },
+  ],
+});
+
+// 格式化日期
+function formatDate(dateString) {
+  if (!dateString) return "";
+  const date = new Date(dateString);
+  return date.toLocaleString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+// 获取代办机构列表
+async function getCertServAuthList() {
+  try {
+    const { data } = await api.getCertServAuthList({
+      loginAccountId: loginAccountId,
+      term: searchKey.value,
+      currentPage: currentPage.value,
+      size: 10,
+    });
+    if (data.status === 0) {
+      tableData.value = data.result;
+      total.value = data.total;
+    } else {
+      tableData.value = [];
+      total.value = 0;
+      ElMessage.error(data.msg || "获取数据失败");
+    }
+  } catch (error) {
+    ElMessage.error("获取数据失败");
+  }
+}
+
+// 分页切换
+function pageChange(page) {
+  currentPage.value = page;
+  getCertServAuthList();
+}
+
+// 搜索
+function handleSearch() {
+  currentPage.value = 1;
+  getCertServAuthList();
+}
+
+// 新增
+function handleAdd() {
+  dialogTitle.value = "新增代办机构";
+  Object.keys(formData).forEach((key) => {
+    if (key !== "certServAuthId" && key !== "loginAccountId") {
+      formData[key] = "";
+    }
+  });
+  formData.certServAuthId = 0;
+  dialogVisible.value = true;
+}
+
+// 编辑
+function handleEdit(row) {
+  dialogTitle.value = "修改代办机构";
+  formData.certServAuthId = row.id;
+  formData.certServAuthName = row.certServAuthName;
+  formData.contactName = row.contactName;
+  formData.contactPhone = row.contactPhone;
+  dialogVisible.value = true;
+}
+
+// 提交表单
+async function submitForm() {
+  try {
+    await formRef.value.validate();
+    const apiMethod =
+      formData.certServAuthId === 0
+        ? api.addCertServAuth
+        : api.modifyCertServAuth;
+    const { data } = await apiMethod(formData);
+    if (data.status === 0) {
+      ElMessage.success("操作成功");
+      dialogVisible.value = false;
+      getCertServAuthList();
+    } else {
+      ElMessage.error(data.msg || "操作失败");
+    }
+  } catch (error) {
+    console.error(error);
+    ElMessage.error("操作失败");
+  }
+}
+
+// 删除
+function deleteCertServAuth(row) {
+  ElMessageBox.confirm("确认删除该代办机构信息？", "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    try {
+      const { data } = await api.deleteCertServAuth({
+        loginAccountId: loginAccountId,
+        certServAuthId: row.id,
+      });
+      if (data.status === 0) {
+        ElMessage.success("删除成功");
+        getCertServAuthList();
+      } else {
+        ElMessage.error(data.msg || "删除失败");
+      }
+    } catch (error) {
+      ElMessage.error("删除失败");
+    }
+  });
+}
+
+// 初始化获取数据
+getCertServAuthList();
+</script>
+
+<style scoped>
+.w300 {
+  width: 300px;
+}
+.w400 {
+  width: 400px;
+}
+.ml10 {
+  margin-left: 10px;
+}
+</style>

src/views/workStation/certsManage.vue

@@ -69,7 +69,7 @@
             :value="item.type"
           />
         </el-select>
-        <el-table border :data="tableData" stripe>
+        <el-table border :data="tableData" stripe style="width: 900px">
           <el-table-column
             align="center"
             type="index"