126 lines
4.9 KiB
Markdown
126 lines
4.9 KiB
Markdown
## 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;
|
||
}
|
||
});
|
||
}, |