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

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

<script>
import asyncRequest from "@/apis/components/search-metal-kind";
import resToken from "@/mixins/resToken";
export default {
  name: "SearchMetalKind",
  mixins: [resToken],
  props: [
    "size",
    "value",
    "placeholder",
    "isDetail",
    "disabled",
    "type",
    "names",
  ],
  /**
   * 属性集合
   * @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,
      valuess: "",
      formValue: {
        start: "",
        end: "",
        creater: "",
        status: "",
        type_cn: "",
      },
    };
  },
  watch: {
    value: function (val, old) {
      // console.log("111" + val);
      this.valuess = val;
      if (this.isDetail) {
        this.remoteMethod();
      }
    },
    isDetail: function (val, old) {
      // console.log(val, old, this.isDetail, "2");
      if (val) {
        this.remoteMethod();
      }
    },
  },
  mounted() {
    this.options = [];
    this.selectLoading = false;
    this.remoteMethod();
  },
  methods: {
    async selectChange(e) {
      console.log(e);
      let index = this.options.findIndex((v) => v.type === e);
      if (index !== -1) {
        let model = {
          id: this.options[index].type,
          code: this.options[index].type,
          label: this.options[index].type_cn,
          // price: "0",
        };
        console.log(111);
        // const { code, data, message } = await asyncRequest.get_price({
        //   type: this.options[index].type,
        // });
        // if (code === 0 && data && data[0]) {
        //   let sitem = data[0];
        //   const { price } = sitem;
        //   model.price = price;
        // } else if (code >= 100 && code <= 104) {
        //   await this.logout();
        // } else {
        //   this.$message.warning(message);
        //   return;
        // }
        this.$emit("searchChange", model);
      } else {
        this.$emit("searchChange", {});
      }
    },
    async remoteMethod() {
      this.selectLoading = true;
      this.options = [];
      const { code, data, message } = await asyncRequest.list(this.formValue);
      if (code === 0) {
        this.options = data;
        this.options.forEach((e) => {
          e.type += "";
        });
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
      this.selectLoading = false;
    },
  },
};
</script>

<style>
</style>