更新 远程搜索

src/components/RemoteSelect.vue

@@ -7,9 +7,9 @@
     clearable
     reserve-keyword
     :placeholder="placeholder"
-    :remote-method="getSelectList"
     :loading="loading"
     @change="selectItem"
+    @focus="getSelectList"
   >
     <el-option
       v-for="item in options"
@@ -51,11 +51,10 @@ export default {
     let loading = ref(true);
     const getSelectList = _.debounce(
       async (term) => {
-        if (!term) return;
         loading.value = true;
         let res = await api[props.api]({
           ...props.params,
-          term,
+          term: term.target.value,
         });
         if (res.data.status == 0) {
           options.value = res.data.result;

src/views/voyage/voyageList.vue

@@ -141,7 +141,7 @@
           <el-form-item prop="shipName" label="船舶">
             <RemoteSelect
               api="getShipSelect"
-              v-model="shipStr"
+              v-model="voyageForm.shipStr"
               @selectItem="selectShip($event)"
               class="mb10"
             ></RemoteSelect>
@@ -149,7 +149,7 @@
           <el-form-item prop="cargoOwnerName" label="货主">
             <RemoteSelect
               api="getCargoOwnerSelect"
-              v-model="cargoOwnerStr"
+              v-model="voyageForm.cargoOwnerStr"
               placeholder="选择货主"
               @selectItem="selectCargoOwner($event)"
               class="mb10"
@@ -157,6 +157,7 @@
           </el-form-item>
           <el-form-item prop="startTime" label="开始时间">
             <el-date-picker
+              style="width: 198px"
               v-model="voyageForm.startTime"
               type="date"
               value-format="YYYY/MM/DD"
@@ -166,6 +167,7 @@
           <el-form-item prop="endTime" label="结束时间">
             <el-date-picker
               v-model="voyageForm.endTime"
+              style="width: 198px"
               type="date"
               value-format="YYYY/MM/DD"
               placeholder="航次结束时间"
@@ -175,7 +177,7 @@
           <el-form-item prop="loadPort" label="装货港">
             <RemoteSelect
               api="getCol"
-              v-model="loadPortStr"
+              v-model="voyageForm.loadPortStr"
               placeholder="选择装货港"
               @selectItem="selectLoadPort"
               class="mb10"
@@ -212,11 +214,11 @@
             ></RemoteSelect>
           </el-form-item>
           <el-form-item prop="tons" label="吨位">
-            <el-input style="width: 220px" v-model="voyageForm.tons"></el-input>
+            <el-input style="width: 200px" v-model="voyageForm.tons"></el-input>
           </el-form-item>
           <el-form-item prop="pieces" label="件数">
             <el-input
-              style="width: 220px"
+              style="width: 200px"
               v-model="voyageForm.pieces"
             ></el-input>
           </el-form-item>
@@ -420,7 +422,6 @@ async function getVoyageList() {
     total.value = res.data.total;
   } else {
     total.value = 0;
-
     ElNotification({
       type: "error",
       title: res.data.msg,
@@ -706,18 +707,7 @@ function resetAddVoyageForm() {
   voyageAddDialogVisible.value = false;
   voyageFormRef.value.resetFields();
   voyageForm.value = {
-    cargoOwnerId: "",
-    cargoOwnerName: "",
-    startTime: "",
-    endTime: "",
-    loadPort: "",
-    dischargeProt: "",
-    cargo: "",
     tons: 0,
-    loadPortId: "",
-    dischargeProtId: "",
-    shipId: "",
-    shipName: "",
     pieces: 0,
   };
   discPorts.value = [{}];