新增 远程选择组件

src/components/RemoteSelect.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-select
+    v-model="value"
+    filterable
+    :multiple="multiple"
+    :multiple-limit="multiple ? 0 : 1"
+    remote
+    reserve-keyword
+    :placeholder="placeholder"
+    :remote-method="getSelectList"
+    :loading="loading"
+    @change="selectItem"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.key"
+      :label="item.value"
+      :value="item.key"
+    />
+  </el-select>
+</template>
+
+<script>
+import { onMounted, ref } from "vue";
+import api from "../apis/fetch";
+import _ from "lodash";
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: "请填写",
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    api: String,
+    params: Object,
+    value: [String, Number, Array],
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ["selectItem"],
+  setup(props, { emit }) {
+    let loading = ref(true);
+    const getSelectList = _.debounce(
+      async (term) => {
+        if (!term) return;
+        loading.value = true;
+        let res = await api[props.api]({
+          ...props.params,
+          term,
+        });
+        if (res.data.status == 0) {
+          options.value = res.data.result;
+        } else {
+          options.value = [];
+        }
+        loading.value = false;
+      },
+      1000,
+      { leading: true }
+    );
+    let options = ref([]);
+    const selectItem = (item) => {
+      emit("selectItem", item);
+    };
+
+    onMounted(() => {});
+    return {
+      getSelectList,
+      selectItem,
+      options,
+      loading,
+    };
+  },
+};
+</script>
+
+<style></style>

src/main.js

@@ -8,11 +8,13 @@ import "./styles/index.css";
 import Uploader from "./components/Uploader.vue";
 import Certs from "./components/Certs.vue";
 import RemoteSearch from "./components/RemoteSearch.vue";
+import RemoteSelect from "./components/RemoteSelect.vue";
 
 const app = createApp(App);
 app.component("Certs", Certs);
 app.component("Uploader", Uploader);
 app.component("RemoteSearch", RemoteSearch);
+app.component("RemoteSelect", RemoteSelect);
 
 router.beforeEach(async (to, from, next) => {
   let id = localStorage.id;

src/views/portsManage/sailingSchedule.vue

@@ -28,28 +28,29 @@
             label-position="left"
           >
             <el-form-item prop="cargoOwnerIds" label="货主名称">
-              <RemoteSearch
+              <RemoteSelect
                 api="getCargoOwnerCompanySelect"
                 v-model="cargoOwnerCompanyStr"
+                multiple
                 @selectItem="selectCargoOwnerCompany($event)"
                 class="mb10"
-              ></RemoteSearch>
+              ></RemoteSelect>
             </el-form-item>
             <el-form-item prop="departurePortId" label="始发港">
-              <RemoteSearch
+              <RemoteSelect
                 api="getPortsSelect"
                 v-model="departurePortStr"
                 @selectItem="selectDeparturePort($event)"
                 class="mb10"
-              ></RemoteSearch>
+              ></RemoteSelect>
             </el-form-item>
-            <el-form-item prop="destinationPortId" label="目的地港">
-              <RemoteSearch
+            <el-form-item prop="destinationPortId" label="始发港">
+              <RemoteSelect
                 api="getPortsSelect"
                 v-model="destinationPortStr"
                 @selectItem="selectDdestinationPort($event)"
                 class="mb10"
-              ></RemoteSearch>
+              ></RemoteSelect>
             </el-form-item>
             <el-form-item prop="sailingPeriod" label="航期">
               <el-input
@@ -154,15 +155,15 @@ const ruleForm = ref({
 });
 const rules = ref({
   cargoOwnerIds: [
-    { required: true, message: "请填写港口名称", trigger: "change" },
+    { required: true, message: "请填写货主名称", trigger: "blur" },
   ],
   departurePortId: [
-    { required: true, message: "请填写始发港", trigger: "change" },
+    { required: true, message: "请填写始发港", trigger: "blur" },
   ],
   destinationPortId: [
-    { required: true, message: "请填写目的地港", trigger: "change" },
+    { required: true, message: "请填写目的地港", trigger: "blur" },
   ],
-  sailingPeriod: [{ required: true, message: "请填写航期", trigger: "change" }],
+  sailingPeriod: [{ required: true, message: "请填写航期", trigger: "blur" }],
 });
 async function getTransPortsList() {
   tableData.value = [];
@@ -178,7 +179,7 @@ async function getTransPortsList() {
 }
 function resetForm() {
   dialogFormVisible.value = false;
-  cargoOwnerCompanyStr.value = "";
+  cargoOwnerCompanyStr.value = [];
   departurePortStr.value = "";
   destinationPortStr.value = "";
   form.value.resetFields();
@@ -244,20 +245,49 @@ function pageChange(e) {
   getTransPortsList();
 }
 
-let cargoOwnerCompanyStr = ref("");
+let cargoOwnerCompanyStr = ref([]);
 function selectCargoOwnerCompany(e) {
-  ruleForm.value.cargoOwnerIds = e.key;
+  ruleForm.value.cargoOwnerIds = e.join(",");
 }
 
 let departurePortStr = ref("");
 function selectDeparturePort(e) {
-  ruleForm.value.departurePortId = e.key;
+  ruleForm.value.departurePortId = e;
 }
 
 let destinationPortStr = ref("");
 function selectDdestinationPort(e) {
-  ruleForm.value.destinationPortId = e.key;
+  ruleForm.value.destinationPortId = e;
 }
+let options = ref([
+  {
+    value: "武汉",
+    key: "1",
+  },
+  {
+    value: "南京",
+    key: "2",
+  },
+  {
+    value: "郑州",
+    key: "3",
+  },
+]);
+
+let cargoOwnerId = ref("");
+
+async function remoteMethod(term) {
+  let res = await api.getCargoOwnerCompanySelect({
+    term,
+  });
+  options.value = res.data.result;
+  console.log(res);
+}
+
+function selectCargoOwner(e) {
+  console.log(e);
+}
+let loading = ref(false);
 
 onMounted(() => {
   getTransPortsList();