accout-ui/src/components/global/search-select/index.vue

<template>
  <el-select
    v-model="code"
    multiple
    filterable
    remote
    :multiple-limit="1"
    reserve-keyword
    :size="size"
    style="width: 100%"
    :placeholder="placeholder"
    :disabled="disabled"
    :remote-method="remoteMethod"
    :loading="selectLoading"
    @change="selectChange"
  >
    <el-option
      v-for="item in activeOptions"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
</template>
<script>
import asyncRequest from "@/apis/caixiaoService/network/orderEntry";
import asyncAoldRequest from "@/apis/aoldService/network/orderEntry";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
export default {
  name: "search-select",
  props: ["code", "placeholder", "size", "type", "isDetail", "disabled", "names"],
  computed: {
    ...mapGetters(["business_companyNo"]),
  },
  mixins: [resToken],
  data() {
    return {
      activeOptions: [],
      code: [],
      selectLoading: false,
      searchName: "",
    };
  },
  watch: {
    names: function (val) {
      this.searchName = val;
      if (this.isDetail && this.searchName) {
        this.remoteMethod(this.searchName);
      }
    },
  },
  created() {
    this.activeOptions = [];
    this.initForm();
  },
  methods: {
    async initForm() {
      this.selectLoading = false;
    },
    async selectChange() {
      this.$emit("end", this.code);
    },
    async remoteMethod(query) {
      this.selectLoading = true;
      if (query !== "") {
        this.activeOptions = [];
        let formValue = {
          page: 1,
          size: 50,
          name: query,
          company: query,
        };

        let res = {};
        const num = Number(this.type);
        if (this.business_companyNo === "1") {
          res = await asyncRequest[`list${num}`](num < 4 ? {} : formValue);
        } else {
          res = await asyncAoldRequest[`list${num}`](num < 4 ? {} : formValue);
        }
        if (num === 1) {
          delete formValue["name"];
        } else if (num === 2 || num === 3) {
          delete formValue["company"];
        }
        const { code, data, message } = res;
        if (code === 0) {
          this.activeOptions;
          let arr = [];
          if (this.type === "4") {
            arr = data;
          } else {
            const { list } = data;
            arr = list;
          }
          arr.forEach((v1) => {
            let item = {
              code:
                this.type === "1"
                  ? v1.companyNo || ""
                  : this.type === "2"
                  ? v1.companyNo || ""
                  : this.type === "3"
                  ? v1.code || ""
                  : v1.id || "",
              name:
                this.type === "1"
                  ? v1.companyName || ""
                  : this.type === "2"
                  ? v1.company_name || ""
                  : this.type === "3"
                  ? v1.name || ""
                  : v1.rate + "%" || "",
            };
            this.activeOptions.push(item);
          });
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(message);
        }
      } else {
        this.activeOptions = [];
      }
      this.selectLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.search-select {
}
</style>