优化产品类别选择:添加过滤功能以增强用户体验,并在类别变化时重置相关字段以避免旧值残留
已修改1个文件
46 ■■■■■ 文件已修改
src/views/salesManagement/salesLedger/index.vue 46 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/salesManagement/salesLedger/index.vue
@@ -464,6 +464,8 @@
                                v-model="productForm.productCategory"
                                placeholder="请选择"
                                clearable
                                filterable
                                :filter-node-method="filterProductCategoryNode"
                                check-strictly
                                @change="getModels"
                                :data="productOptions"
@@ -1083,22 +1085,6 @@
    productRules: {
        productCategory: [{ required: true, message: "请选择", trigger: "change" }],
        productModelId: [{ required: true, message: "请选择", trigger: "change" }],
        specificationModel: [
            { required: true, message: "请选择", trigger: "change" },
        ],
        thickness: [{ required: true, message: "请输入", trigger: "blur" }],
        quantity: [{ required: true, message: "请输入", trigger: "blur" }],
        taxInclusiveUnitPrice: [
            { required: true, message: "请输入", trigger: "blur" },
        ],
        taxRate: [{ required: true, message: "请选择", trigger: "change" }],
        taxInclusiveTotalPrice: [
            { required: true, message: "请输入", trigger: "blur" },
        ],
        taxExclusiveTotalPrice: [
            { required: true, message: "请输入", trigger: "blur" },
        ],
        invoiceType: [{ required: true, message: "请选择", trigger: "change" }],
    },
});
const { productForm, productRules } = toRefs(productFormData);
@@ -1523,19 +1509,45 @@
};
// 获取tree子数据
const getModels = (value) => {
    // 产品大类变化时,重置规格型号与厚度,避免旧值残留
    productForm.value.productModelId = null;
    productForm.value.specificationModel = "";
    productForm.value.thickness = null;
    if (!value) {
        productForm.value.productCategory = "";
        modelOptions.value = [];
        return;
    }
    productForm.value.productCategory = findNodeById(productOptions.value, value);
    modelList({ id: value }).then((res) => {
        modelOptions.value = res;
        modelOptions.value = res || [];
    });
};
const getProductModel = (value) => {
    const index = modelOptions.value.findIndex((item) => item.id === value);
    if (index !== -1) {
        productForm.value.specificationModel = modelOptions.value[index].model;
        const selectedModel = modelOptions.value[index];
        const modelThickness =
            selectedModel?.thickness ??
            selectedModel?.modelThickness ??
            selectedModel?.thick ??
            null;
        productForm.value.thickness =
            modelThickness === null || modelThickness === undefined || modelThickness === ""
                ? null
                : Number(modelThickness);
    } else {
        productForm.value.specificationModel = null;
        productForm.value.thickness = null;
    }
};
const filterProductCategoryNode = (value, data) => {
    if (!value) return true;
    return String(data?.label || "").toLowerCase().includes(String(value).toLowerCase());
};
const findNodeById = (nodes, productId) => {
    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].value === productId) {