order-ui-pc/src/components/globalComponents/search-area/main.vue

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    clearable
    :multiple-limit="1"
    reserve-keyword
    :size="size || 'medium'"
    style="width: 100%"
    :placeholder="placeholder || ''"
    :disabled="disabled"
    :remote-method="remoteMethod"
    :loading="selectLoading"
    @change="selectChange"
  >
    <el-option
      v-for="(item, index) in options"
      :key="item.code + '' + index"
      :label="item.search_name + ''"
      :value="item.code + ''"
    />
  </el-select>
</template>

<script>
import asyncRequest from "@/apis/components/search-area";
import resToken from "@/mixins/resToken";
export default {
  name: "SearchArea",
  mixins: [resToken],
  props: ["size", "value", "placeholder", "isDetail", "disabled", "names", "level",'detailSelect'],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail         : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   * @param {String}        names            : 选中值label         展示详情必填
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      options: [],
      selectLoading: false,
      searchName: "",
      formValue: {
        // page: 1,
        // size: 100,
        level: 3,
        name: "",
      },
    };
  },
  watch: {
    names: {
      handler:function (val, old) {
      // console.log(val, old, this.isDetail, "1");
        this.searchName = val;
        if (this.isDetail && (Array.isArray(this.searchName) && this.searchName[0])) {
          this.remoteMethod(Array.isArray(this.searchName) ? this.searchName[0] : this.searchName,true);
        }
      },
      immediate:true
    },
  },
  mounted() {
    this.options = [];
    this.selectLoading = false;
    this.formValue.level = this.level ? this.level : 3;
  },
  methods: {
    async selectChange(e) {
      console.log(e)
      if (e && e.length > 0) {
        const index = this.options.findIndex((v) => v.code + "" === e[0] + "");
        if (index !== -1) {
          const { code, search_name, info } = this.options[index];
          const { province, city, area } = info;
          let arr_code = "";
          switch (this.formValue.level + "") {
            case "1":
              arr_code = province.code;
              break;
            case "2":
              arr_code = `${province.code},${city.code}`;
              break;
            default:
              arr_code = `${province.code},${city.code},${area.code}`;
              break;
          }

          const model = {
            id: code ?? "",
            code: arr_code ?? "",
            province_code: province.code ?? "",
            city_code: city.code ?? "",
            area_code: area.code ?? "",
            label: search_name ?? "",
          };
          this.$emit("searchChange", model);
        } else {
          this.$emit("searchChange", {});
        }
      } else {
        this.$emit("searchChange", {});
      }
    },
    async remoteMethod(query,formDetail = false) {
      this.selectLoading = true;
      if (query !== "") {
        this.options = [];
        this.formValue.name = query;
        const { code, data, message } = await asyncRequest.list({
          ...this.formValue,
          level:this.level
        });

        if (code === 0) {
          this.options = data;
          if(this.detailSelect && formDetail && data.length > 0){ this.selectChange([data[0].code])}
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(message);
        }
      } else {
        this.options = [];
      }
      this.selectLoading = false;
    },
  },
};
</script>

<style></style>