更新 航期维护

src/views/portsManage/sailingSchedule.vue

@@ -14,7 +14,11 @@
       <div class="cargo-owner-add" @click="dialogFormVisible = true">
         添加航期
       </div>
-      <el-dialog title="添加航期" v-model="dialogFormVisible">
+      <el-dialog
+        title="添加航期"
+        @closed="resetForm()"
+        v-model="dialogFormVisible"
+      >
         <template v-slot:default>
           <el-form
             :model="ruleForm"
@@ -23,27 +27,34 @@
             label-width="110px"
             label-position="left"
           >
-            <el-form-item prop="portName" label="货主名称">
-              <el-input
-                style="width: 280px"
-                v-model="ruleForm.portName"
-              ></el-input>
+            <el-form-item prop="cargoOwnerIds" label="货主名称">
+              <RemoteSearch
+                api="getCargoOwnerCompanySelect"
+                v-model="cargoOwnerCompanyStr"
+                @selectItem="selectCargoOwnerCompany($event)"
+                class="mb10"
+              ></RemoteSearch>
             </el-form-item>
             <el-form-item prop="departurePortId" label="始发港">
-              <el-input
-                style="width: 280px"
-                v-model="ruleForm.departurePortId"
-              ></el-input>
+              <RemoteSearch
+                api="getPortsSelect"
+                v-model="departurePortStr"
+                @selectItem="selectDeparturePort($event)"
+                class="mb10"
+              ></RemoteSearch>
             </el-form-item>
             <el-form-item prop="destinationPortId" label="目的地港">
-              <el-input
-                style="width: 280px"
-                v-model="ruleForm.destinationPortId"
-              ></el-input>
+              <RemoteSearch
+                api="getPortsSelect"
+                v-model="destinationPortStr"
+                @selectItem="selectDdestinationPort($event)"
+                class="mb10"
+              ></RemoteSearch>
             </el-form-item>
             <el-form-item prop="sailingPeriod" label="航期">
               <el-input
-                style="width: 280px"
+                style="width: 240px"
+                size="small"
                 v-model="ruleForm.sailingPeriod"
               ></el-input>
             </el-form-item>
@@ -52,7 +63,7 @@
         <template v-slot:footer>
           <div class="dialog-footer">
             <el-button @click="resetForm">取 消</el-button>
-            <el-button type="primary" @click="addtTransPort(ruleForm)">
+            <el-button type="primary" @click="addTransPort(ruleForm)">
               确 定
             </el-button>
           </div>
@@ -136,18 +147,22 @@ let total = ref(0);
 let dialogFormVisible = ref(false);
 let form = ref(null);
 const ruleForm = ref({
-  portName: "",
+  cargoOwnerIds: "",
   departurePortId: "",
   destinationPortId: "",
+  sailingPeriod: "",
 });
 const rules = ref({
-  portName: [{ required: true, message: "请填写港口名称", trigger: "blur" }],
+  cargoOwnerIds: [
+    { required: true, message: "请填写港口名称", trigger: "change" },
+  ],
   departurePortId: [
-    { required: true, message: "请填写港口经度", trigger: "blur" },
+    { required: true, message: "请填写始发港", trigger: "change" },
   ],
   destinationPortId: [
-    { required: true, message: "请填写港口纬度", trigger: "blur" },
+    { required: true, message: "请填写目的地港", trigger: "change" },
   ],
+  sailingPeriod: [{ required: true, message: "请填写航期", trigger: "change" }],
 });
 async function getTransPortsList() {
   tableData.value = [];
@@ -163,24 +178,28 @@ async function getTransPortsList() {
 }
 function resetForm() {
   dialogFormVisible.value = false;
-
+  cargoOwnerCompanyStr.value = "";
+  departurePortStr.value = "";
+  destinationPortStr.value = "";
   form.value.resetFields();
 }
-async function addtTransPort() {
+async function addTransPort() {
   form.value.validate(async (valid) => {
     if (valid) {
-      let { portName, departurePortId, destinationPortId } = ruleForm.value;
-      let res = await api.addtTransPort({
-        portName,
+      let { cargoOwnerIds, departurePortId, destinationPortId, sailingPeriod } =
+        ruleForm.value;
+      let res = await api.addTransPort({
+        cargoOwnerIds,
         departurePortId,
         destinationPortId,
+        sailingPeriod,
       });
       console.log(res);
       if (res.data.status == 0) {
         ElNotification.success({
           title: "添加成功",
           duration: 2000,
-          message: `${portName}:${res.data.msg}`,
+          message: `${cargoOwnerIds}:${res.data.msg}`,
           type: "success",
         });
         resetForm();
@@ -224,6 +243,22 @@ function pageChange(e) {
   currentPage.value = e;
   getTransPortsList();
 }
+
+let cargoOwnerCompanyStr = ref("");
+function selectCargoOwnerCompany(e) {
+  ruleForm.value.cargoOwnerIds = e.key;
+}
+
+let departurePortStr = ref("");
+function selectDeparturePort(e) {
+  ruleForm.value.departurePortId = e.key;
+}
+
+let destinationPortStr = ref("");
+function selectDdestinationPort(e) {
+  ruleForm.value.destinationPortId = e.key;
+}
+
 onMounted(() => {
   getTransPortsList();
 });