feat(shipOwnerWeappConfig): 添加证书办理联系人功能

- 新增添加联系人按钮和对话框
- 实现联系人列表展示和操作
- 添加联系人信息表单验证
- 实现联系人信息的添加、修改和删除功能

src/views/toolManage/shipOwnerWeappConfig.vue

@@ -55,10 +55,63 @@
     </el-card>
     <el-card class="mb20">
       <template #header>
-        <div class="card-header">
-          <span>证书办理联系人</span>
+        <div class="card-header df aic">
+          <span class="mr10">证书办理联系人</span>
+          <el-button type="primary" @click="addShipContact">
+            添加联系人
+          </el-button>
         </div>
+        <el-dialog v-model="showModifyDialog" title="修改联系人" width="500px">
+          <el-form
+            class="ml20 mt20"
+            :model="modifyForm"
+            :rules="formRules"
+            label-width="100px"
+          >
+            <el-form-item class="mb20" label="办事处" prop="officeName">
+              <el-input class="w300" v-model="modifyForm.officeName" />
+            </el-form-item>
+            <el-form-item class="mb20" label="联系人" prop="contactPerson">
+              <el-input class="w300" v-model="modifyForm.contactPerson" />
+            </el-form-item>
+            <el-form-item class="mb20" label="手机号" prop="contactPhone">
+              <el-input class="w300" v-model="modifyForm.contactPhone" />
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <div class="df aic jcfe mb10" style="padding-right: 50px">
+              <el-button @click="showModifyDialog = false">取消</el-button>
+              <el-button type="primary" @click="submitModifyForm">
+                确定
+              </el-button>
+            </div>
+          </template>
+        </el-dialog>
       </template>
+      <el-table :data="shipCertOperationList" style="width: 100%" border>
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="officeName" label="办事处" align="center" />
+        <el-table-column prop="contactPerson" label="联系人" align="center" />
+        <el-table-column prop="contactPhone" label="手机号" align="center" />
+        <el-table-column label="操作" width="180" align="center">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              size="small"
+              @click="modifyShipCertOperation(scope.row)"
+            >
+              修改
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              @click="deleteShipCertOperation(scope.row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </el-card>
     <el-card class="mb20">
       <template #header>
@@ -172,6 +225,7 @@ import api from "apis/fetch";
 import store from "store";
 import { ElNotification } from "element-plus";
 const baseurl = import.meta.env.VITE_BASEURL;
+import _ from "lodash";
 
 const certOperationIntroduce = ref({});
 const lawyerIntroduce = ref({});
@@ -204,7 +258,6 @@ async function getShipCertOperationList() {
 }
 
 function uploadCertSuccess(res, target) {
-  console.log(res, target);
   if (res.status === 0) {
     target.imageUrl = res.result;
     ElNotification.success({
@@ -218,8 +271,100 @@ function uploadCertSuccess(res, target) {
     });
   }
 }
-function deleteShipCertOperation() {}
-function modifyShipCertOperation() {}
+async function deleteShipCertOperation(row) {
+  try {
+    await ElMessageBox.confirm("确定要删除该联系人吗？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    const { data } = await api.deleteShipCertOperation({
+      certOperationId: row.id,
+    });
+    if (data.status === 0) {
+      ElNotification.success({
+        title: "成功",
+        message: data.msg,
+      });
+      await getShipCertOperationList();
+    }
+  } catch (error) {}
+}
+const isEditMode = ref(false);
+function addShipContact() {
+  isEditMode.value = false;
+  modifyForm.value = { officeName: "", contactPerson: "", contactPhone: "" };
+  showModifyDialog.value = true;
+}
+
+const showModifyDialog = ref(false);
+const modifyForm = ref({
+  id: 0,
+  officeName: "",
+  contactPerson: "",
+  contactPhone: "",
+});
+
+const formRules = {
+  officeName: [
+    { required: true, message: "请输入办事处名称", trigger: "blur" },
+  ],
+  contactPerson: [{ required: true, message: "请输入联系人", trigger: "blur" }],
+  contactPhone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
+  ],
+};
+
+async function modifyShipCertOperation(row) {
+  try {
+    isEditMode.value = true;
+    modifyForm.value = _.cloneDeep(row);
+    console.log(row);
+    showModifyDialog.value = true;
+    const apiMethod = isEditMode.value
+      ? api.updateShipCertOperation({
+          id: modifyForm.value.id,
+          ...modifyForm.value,
+        })
+      : api.addShipCertOperation(modifyForm.value);
+    const { data } = await apiMethod;
+    if (data.status === 0) {
+      ElNotification.success({
+        title: "成功",
+        message: data.msg,
+      });
+      await getShipCertOperationList();
+    }
+  } catch (error) {}
+}
+
+async function submitModifyForm() {
+  try {
+    await ElMessageBox.confirm("确定要保存修改吗？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    const { data } = await api.modifyShipCertOperation({
+      ...modifyForm.value,
+      certOperationId: modifyForm.value.id,
+    });
+    if (data.status === 0) {
+      ElNotification.success({
+        title: "成功",
+        message: data.msg,
+      });
+      await getShipCertOperationList();
+    } else {
+      ElNotification.error({
+        title: "失败",
+        message: data.msg,
+      });
+    }
+    showModifyDialog.value = false;
+  } catch (error) {}
+}
 async function updateShipIntroduceContent(configType, target) {
   let { data } = await api.updateShipIntroduceContent({
     configType,
@@ -248,4 +393,8 @@ onMounted(() => {
 :deep() .el-textarea__inner {
   height: 200px;
 }
+
+.w300 {
+  width: 300px;
+}
 </style>