更新 新增船东

src/apis/fetch.js

@@ -425,4 +425,9 @@ export default {
   getBillList(data) {
     return $http("/bill/list", data);
   },
+
+  // 检测mmsi
+  checkShipMmsi(data) {
+    return $http("/ship/search/ship", data);
+  },
 };

src/views/shipOwnerManage/shipOwnerList.vue

@@ -31,36 +31,33 @@
               <el-input
                 style="width: 280px"
                 v-model="ruleForm.userPhone"
-                @blur="checkShipOwnerPhone"
-                :disabled="isUserExist"
               ></el-input>
             </el-form-item>
             <el-form-item prop="userName" label="船东姓名">
               <el-input
                 style="width: 280px"
                 v-model="ruleForm.userName"
-                :disabled="isUserExist"
               ></el-input>
             </el-form-item>
-            <el-form-item prop="shipName" label="船名">
+            <el-form-item prop="shipMmsi" label="MMSI">
               <el-input
                 style="width: 280px"
-                v-model="ruleForm.shipName"
-                :disabled="isUserExist && ruleForm.shipName"
+                v-model="ruleForm.shipMmsi"
+                :disabled="!!ruleForm.shipId"
               ></el-input>
             </el-form-item>
-            <el-form-item prop="shipMmsi" label="MMSI">
+            <el-form-item prop="shipName" label="船名">
               <el-input
                 style="width: 280px"
-                v-model="ruleForm.shipMmsi"
-                :disabled="isUserExist && ruleForm.shipMmsi"
+                v-model="ruleForm.shipName"
+                :disabled="!!ruleForm.shipId"
               ></el-input>
             </el-form-item>
           </el-form>
         </template>
         <template v-slot:footer>
           <div class="dialog-footer">
-            <el-button @click="resetFormBtn">重 置</el-button>
+            <el-button @click="resetForm">重 置</el-button>
             <el-button type="primary" @click="addShipOwner(ruleForm)">
               确 定
             </el-button>
@@ -137,8 +134,6 @@ import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
 import api from "../../apis/fetch";
-let isChecked = ref(false);
-let isUserExist = ref(false);
 let dialogFormVisible = ref(false);
 let form = ref(null);
 let ruleForm = ref({
@@ -149,24 +144,60 @@ let ruleForm = ref({
 });
 async function resetForm() {
   dialogFormVisible.value = false;
-  isUserExist.value = false;
-  isChecked.value = false;
   form.value.resetFields();
-  resetForm.value = {};
-}
-function resetFormBtn() {
-  form.value.resetFields();
-  resetForm.value = {};
+  ruleForm.value = {};
 }
+
+const checkShipOwnerPhone = async (rule, value, callback) => {
+  if (value.length != 11) {
+    return callback(new Error("请正确输入手机号"));
+  }
+  let res = await api.checkShipOwnerPhone({
+    userPhone: value,
+  });
+  if (res.data.status == 0) {
+    callback(new Error("此手机号已绑定船东!"));
+  } else {
+    callback();
+  }
+};
+
+const checkShipMmsi = async (rule, value, callback) => {
+  if (value?.length != 9) {
+    return callback(new Error("请正确输入MMSI"));
+  }
+  let res = await api.checkShipMmsi({
+    shipMmsi: value,
+  });
+  if (res.data.status == 0) {
+    ElMessageBox.confirm("已查询到船舶信息,是否匹配?", "提示", {
+      confirmButtonText: "匹配",
+      cancelButtonText: "更换mmsi",
+      type: "info",
+    })
+      .then(() => {
+        ruleForm.value = {
+          ...ruleForm.value,
+          ...res.data.result,
+        };
+      })
+      .catch(() => {
+        ruleForm.value.shipMmsi = "";
+        ruleForm.value.shipId = "";
+        ruleForm.value.shipName = "";
+      });
+  } else {
+    callback();
+  }
+};
+
 const rules = ref({
   userName: [{ required: true, message: "请填写船东名称", trigger: "blur" }],
   shipName: [{ required: true, message: "请填写船名", trigger: "blur" }],
-  shipMmsi: [{ required: true, message: "请填写MMSI", trigger: "blur" }],
-  userPhone: [
-    { required: true, message: "请填写手机号", trigger: "blur" },
-    { min: 11, max: 11, message: "请正确填写手机号", trigger: "blur" },
-  ],
+  shipMmsi: [{ validator: checkShipMmsi, trigger: "blur" }],
+  userPhone: [{ validator: checkShipOwnerPhone, trigger: "blur" }],
 });
+
 async function addShipOwner() {
   form.value.validate(async (valid) => {
     if (valid) {
@@ -225,18 +256,6 @@ function pageChange(e) {
   currentPage.value = e;
   getShipOwnerList();
 }
-
-async function checkShipOwnerPhone(e) {
-  let res = await api.checkShipOwnerPhone({
-    userPhone: e.target.value,
-  });
-  isChecked.value = true;
-  if (res.data.status == 0) {
-    isUserExist.value = true;
-    ruleForm.value = res.data.result;
-  }
-}
-
 onMounted(() => {
   getShipOwnerList();
 });