更新 上传指数逻辑

src/apis/fetch.js

@@ -194,4 +194,9 @@ export default {
   ocr(data) {
     return $http("post", "/shipownerUploadFile/ocr", data);
   },
+
+  // 用户选择
+  getUserSelect(data) {
+    return $http("post", "/user/backstage/select", data);
+  },
 };

src/components/RemoteSearch.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-autocomplete
+    v-model="value"
+    :fetch-suggestions="getSelectList"
+    :placeholder="placeholder"
+    @select="selectItem"
+    :size="size"
+    clearable
+    @clear="clear"
+    @input="handleInput"
+    style="width: 240px"
+  />
+</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,
+  },
+  emits: ["input", "selectItem"],
+  setup(props, { emit }) {
+    let selectStr = ref("");
+    const getSelectList = _.debounce(
+      async (queryString, cb) => {
+        if (!queryString) return;
+        let res = await api[props.api]({
+          ...props.params,
+          term: queryString,
+        });
+        if (res.data.status == 0) {
+          cb(res.data.result);
+        }
+      },
+      1000,
+      { leading: true }
+    );
+
+    const selectItem = (item) => {
+      emit("selectItem", item);
+    };
+
+    function clear() {
+      selectStr.value = "";
+    }
+
+    function handleInput(e) {
+      emit("input", e);
+    }
+
+    onMounted(() => {});
+    return {
+      selectStr,
+      getSelectList,
+      clear,
+      selectItem,
+      handleInput,
+    };
+  },
+};
+</script>
+
+<style></style>

src/main.js

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

src/views/voyage/voyageList.vue

@@ -63,21 +63,51 @@
         <div class="search-btn" @click="getVoyageList()">查询</div>
       </div>
       <div class="df aic">
-        <el-upload
-          class="upload-demo"
-          :action="this.$store.state.fydi"
-          :show-file-list="false"
-          :on-success="upFYDISuccess"
-          :before-upload="beforeFYDI"
+        <el-button
+          @click="FYDIModalVisable = true"
+          class="mr20"
+          size="medium"
+          type="primary"
+          >上传FYDI指数</el-button
         >
-          <el-button
-            class="mr20"
-            size="medium"
-            type="primary"
-            :loading="isUpLoading"
-            >上传FYDI指数</el-button
-          >
-        </el-upload>
+
+        <el-dialog
+          title="上传FYDI指数"
+          v-model="FYDIModalVisable"
+          @close="FYDIModalClose"
+        >
+          <template v-slot:default>
+            <div class="df aic jcsa">
+              <RemoteSearch
+                api="getUserSelect"
+                v-model="cargoOwnerCompanyStr"
+                placeholder="公司名称/联系人/手机号"
+                :params="{
+                  identity: 2,
+                }"
+                @selectItem="selectCargoOwnerUpload($event)"
+                class="mb10"
+              ></RemoteSearch>
+              <el-upload
+                v-if="FYDIParams.cargoOwnerId"
+                class="upload-demo"
+                :action="this.$store.state.fydi"
+                :show-file-list="false"
+                :data="FYDIParams"
+                :on-success="upFYDISuccess"
+                :before-upload="beforeFYDI"
+              >
+                <el-button
+                  class="mr20"
+                  size="medium"
+                  type="primary"
+                  :loading="isUpLoading"
+                  >上传FYDI指数</el-button
+                >
+              </el-upload>
+            </div>
+          </template>
+        </el-dialog>
         <el-button
           class="mr20"
           size="medium"
@@ -644,7 +674,6 @@ export default {
 
     let isUpLoading = ref(false);
     function upFYDISuccess(e) {
-      console.log(e);
       if (e.status == 0) {
         ElNotification.success({
           title: "成功",
@@ -659,12 +688,31 @@ export default {
         });
       }
       isUpLoading.value = false;
+      FYDIModalVisable.value = false;
+      FYDIParams.value.cargoOwnerId = "";
+      cargoOwnerCompanyStr.value = "";
     }
 
     function beforeFYDI() {
       isUpLoading.value = true;
     }
 
+    let FYDIModalVisable = ref(false);
+    let FYDIParams = ref({
+      cargoOwnerId: "",
+    });
+    let cargoOwnerCompanyStr = ref("");
+    function selectCargoOwnerUpload(item) {
+      FYDIParams.value.cargoOwnerId = item.key;
+    }
+
+    function FYDIModalClose() {
+      isUpLoading.value = false;
+      FYDIModalVisable.value = false;
+      FYDIParams.value.cargoOwnerId = "";
+      cargoOwnerCompanyStr.value = "";
+    }
+
     getVoyageList();
     onMounted(() => {});
 
@@ -697,6 +745,11 @@ export default {
       upFYDISuccess,
       beforeFYDI,
       isUpLoading,
+      FYDIModalVisable,
+      FYDIParams,
+      cargoOwnerCompanyStr,
+      selectCargoOwnerUpload,
+      FYDIModalClose,
     };
   },
 };