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;
    }
  });
},