order-ui-pc/src/components/globalComponents/goodClass/main.vue

<template>
  <div class="select-goodsClass">
    <el-cascader
      v-if="!loading"
      :size="size || 'medium'"
      style="width: 100%"
      filterable
      clearable
      v-model="value"
      :placeholder="placeholder || ''"
      :props="props"
      :disabled="disabled"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
import asyncRequest from "@/apis/components/goods-class";
import resToken from "@/mixins/resToken";
import { isArray } from "@/utils/validate";
export default {
  name: "goodClass",
  mixins: [resToken],
  props: ["size", "value", "placeholder", "isDetail", "disabled"],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail         : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      loading: false,
      props: {
        lazy: true, //开启远程加载
        async lazyLoad(node, resolve) {
          // console.log(node);
          const { level, value, root, loading } = node;
          let model = {
            cat_name: "",
            pid: "",
            status: "",
          };
          let list = [];
          if (level === 0) {
            model.pid = "0";
          } else {
            model.pid = value;
          }
          const res = await asyncRequest.list(model);
          const { code, data } = res;
          if (code === 0) {
            data.forEach((v1) => {
              let province = {
                value: v1.id,
                label: v1.cat_name,
                leaf: level >= 2,
              };
              list.push(province);
            });
            resolve(list);
          } else {
            resolve([]);
          }
        },
      },
    };
  },
  // watch: {
  //   // value: function (val, old) {
  //   //   if (val) {
  //   //     this.loading = true;
  //   //     setTimeout(() => {
  //   //       this.loading = false;
  //   //     }, 10);
  //   //   }
  //   // },
  // },
  mounted() {
    this.options = [];
    // this.getInfo();
    this.selectLoading = false;
  },
  methods: {
    handleChange(value) {
      this.$emit("handleChange", value);
    },
    async selectChange(e) {
      if (e && e.length > 0) {
        let index = this.options.findIndex((v) => v.code === e[0]);
        if (index !== -1) {
          this.$emit("searchChange", this.options[index]);
        } else {
          this.$emit("searchChange", {});
        }
      } else {
        this.$emit("searchChange", {});
      }
    },
    delChild(list) {
      let arr = [];
      list.forEach((v) => {
        let sitem = JSON.parse(JSON.stringify(v));
        if (isArray(sitem.child) && sitem.child.length === 0) {
          delete sitem["child"];
        } else if (isArray(sitem.child) && sitem.child.length > 0) {
          sitem.child = this.delChild(sitem.child);
        }
        arr.push(sitem);
      });
      return arr;
    },
    async getInfo() {
      this.selectLoading = true;
      let res = await asyncRequest.list({});
      if (res && res.code === 0 && res.data) {
        let arr = res.data;
        let list = [];

        list = this.delChild(arr);
        this.options = list;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
      this.selectLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.select-goodsClass {
  .loading-input {
    background-color: transparent;
    border: 1px solid #dfe4ed;
    color: #c0c4cc;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 30px 0 12px;
    border-radius: 4px;
    &.disabled {
      background-color: #f5f7fa;
    }
    span {
      font-size: 16px;
      height: 36px;
      line-height: 36px;
      padding: 0 0 0 3px;
      vertical-align: top;
    }
  }
}
</style>