erp-el-element/CommonInput/MoreClass.md

## MoreClass 级联选择器弹出层
> **组件名：MoreClass**
> 代码块： `MoreClass`
> 关联组件：`el-element`

> **子组件：传参**
> data：组件接收的参数默认为[]  其中classifiable等于true的时候默认到该组件
>  lable: "分类",----------------------------输入框名称（选填）
>  type: "el-select",------------------------输入框类型（el-inpit,el-selec组件没用到但最好必填）
>  enName: "cate_id",------------------------返回值与model双向绑定（必填）
>  placeholder: "请选择机器类型",-------------输入框占位文本（选填）
>  size: "small",----------------------------输入框大小（选填）
>  show: true,-------------------------------是否展示（必填）
>  filterable: true,-------------------------是否可搜索（选填）
>  clearable: true,--------------------------是否可清除（选填）
>  classifiable: true,-----------------------是否分类，使用组件必填（必填）
>  disabled: false,--------------------------是否禁用（选填）
>  loading: false,---------------------------加载效果（选填）
>  options: [],------------------------------输入框下拉的值，父组件调用接口传递
> formLabelAlign：组件返回的参数与v-model双向绑定{}
> disabled：组件是否禁用默认false
> size:组件大小默认值small
> width：组件宽度默认450
> Title：组件最外层占位文本默认为请选择分类/品牌/型号
> **子组件：方法**
> SearchClass：点击查询后直接父组件中打印formLabelAlign的值
> ClearInput：父组件绑定ref直接调用子组件ClearInput（）方法，然后子组件会给父组件抛出一个resetfrom（）方法，在父组件resetfrom（）中清空formLabelAlign中的邦定值
> **父组件：方法**
> getphonetype()：父组件中获取第一条分类数据
> SelectChange()：选择数据后调用 后面是处理方法其中如果不是同一个接口resetFields中的值需要改变，后续代码也要修改
SelectChange(item) {
      const resetFields = {
        cate_id: ["brand_id", "model_id", "color_id", "rom_id"],
        brand_id: ["model_id", "color_id", "rom_id"],
        model_id: ["color_id", "rom_id"],
      };

      Object.entries(resetFields).forEach(([field, resetFields]) => {
        if (item.enName === field) {
          resetFields.forEach((field) => {
            this.formLabelAlign[field] = "";
            this.input.find((res) => res.enName === field).options = [];
          });
        }
      });
      /** 获取型号 颜色 容量*/
      if (item.enName == "cate_id" && this.formLabelAlign.cate_id != "") {
        this.getqualityinfo(
          { cate_id: this.formLabelAlign.cate_id },
          1,
          "brand_id"
        );
      } else if (
        item.enName == "brand_id" &&
        this.formLabelAlign.brand_id != ""
      ) {
        this.getqualityinfo(
          {
            cate_id: this.formLabelAlign.cate_id,
            brand_id: this.formLabelAlign.brand_id,
          },
          2,
          "model_id"
        );
      } else if (
        item.enName == "model_id" &&
        this.formLabelAlign.model_id != ""
      ) {
        this.getqualityinfo(
          {
            cate_id: this.formLabelAlign.cate_id,
            brand_id: this.formLabelAlign.brand_id,
            model_id: this.formLabelAlign.model_id,
          },
          3,
          "color_id"
        );
      }
    },
     // 获取品牌，颜色，模型数据
    async getqualityinfo(data, val, itm) {
      this.input.forEach((item) => {
        if (item.enName == itm) {
          item.loading = true;
        }
      });
      try {
        const res = await cate_brand_list_in_stock(data);
        this.input.forEach((item) => {
          if (item.enName == itm) {
            item.loading = false;
          }
        });
        if (res.errcode !== 0) return;
        if (val == 1) {
          this.updateInputOptions("brand_id", res.datas);
        } else if (val == 2) {
          this.updateInputOptions("model_id", res.datas);
        } else {
          this.updateInputOptions("rom_id", res.datas.rom_list);
          this.updateInputOptions("color_id", res.datas.color_list);
        }
      } catch (error) {
        // 处理错误
        console.error(error);
      }
    },
    处理数据
    updateInputOptions(enName, list) {
      const mappedList = Array.isArray(list)
        ? list.map((item) => ({ label: item.label, value: item.value }))
        : [];
      this.input.forEach((r, i) => {
        if (r.enName === enName) {
          if (
            r.enName !== "model_id" &&
            r.enName !== "cate_id" &&
            r.enName !== "brand_id"
          ) {
            this.input[i].show =
              Array.isArray(list) && list.length ? true : false;
          }
          this.input[i].options = mappedList;
        }
      });
    },