优化产品类别选择：添加过滤功能以增强用户体验，并在类别变化时重置相关字段以避免旧值残留

yyb

2 天以前 b2b12e3bfac952fd86630bf1b0e9a76f1d65451f

 src/views/salesManagement/salesLedger/index.vue

@@ -3,8 +3,23 @@
    <div class="search_form">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="客户名称：">
          <el-input v-model="searchForm.customerName" placeholder="请输入" clearable prefix-icon="Search"
            @change="handleQuery" />
          <el-select
            v-model="searchForm.customerId"
            filterable
            placeholder="请选择客户名称"
            clearable
            style="width: 220px"
            @change="handleQuery"
          >
            <el-option
              v-for="item in customerOption"
              :key="item.id"
              :label="item.customerName"
              :value="item.id"
            >
              {{ item.customerName + "——" + item.taxpayerIdentificationNumber }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售合同号：">
          <el-input v-model="searchForm.salesContractNo" placeholder="请输入" clearable prefix-icon="Search"
@@ -177,7 +192,6 @@
        <el-table-column label="客户名称" prop="customerName" width="300" show-overflow-tooltip />
        <el-table-column label="业务员" prop="salesman" width="100" show-overflow-tooltip />
        <el-table-column label="项目名称" prop="projectName" width="180" show-overflow-tooltip />
        <el-table-column label="付款方式" prop="paymentMethod" show-overflow-tooltip />
        <el-table-column label="合同金额(元)" prop="contractAmount" width="220" show-overflow-tooltip
          :formatter="formattedNumber" />
        <el-table-column label="发货状态" width="140" align="center">
@@ -235,7 +249,7 @@
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="客户名称：" prop="customerId">
              <el-select v-model="form.customerId" placeholder="请选择" clearable :disabled="operationType === 'view'">
              <el-select v-model="form.customerId" filterable placeholder="请选择" clearable :disabled="operationType === 'view'">
                <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.id">
                  {{
                    item.customerName + "——" + item.taxpayerIdentificationNumber
@@ -257,11 +271,12 @@
                                             format="YYYY-MM-DD" type="date" placeholder="请选择" clearable :disabled="operationType === 'view'" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="付款方式">
                     <el-input v-model="form.paymentMethod" placeholder="请输入" clearable :disabled="operationType === 'view'" />
                  </el-form-item>
               </el-col>
          <el-col :span="12">
            <el-form-item label="交货日期：" prop="deliveryDate">
              <el-date-picker style="width: 100%" v-model="form.deliveryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                              type="date" placeholder="请选择" clearable />
            </el-form-item>
          </el-col>
            </el-row>
            <el-row :gutter="30">
               <el-col :span="12">
@@ -281,14 +296,6 @@
                  </el-form-item>
               </el-col>
            </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="交货日期：" prop="entryDate">
              <el-date-picker style="width: 100%" v-model="form.deliveryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                              type="date" placeholder="请选择" clearable />
            </el-form-item>
          </el-col>
        </el-row>
            <el-row>
               <el-form-item label="产品信息：" prop="entryDate">
                  <el-button v-if="operationType !== 'view'" type="primary" @click="openProductForm('add')">添加</el-button>
@@ -457,6 +464,8 @@
                        v-model="productForm.productCategory"
                        placeholder="请选择"
                        clearable
                        filterable
                        :filter-node-method="filterProductCategoryNode"
                        check-strictly
                        @change="getModels"
                        :data="productOptions"
@@ -500,7 +509,9 @@
                  <el-form-item label="税率(%)：" prop="taxRate">
                     <el-select v-model="productForm.taxRate" placeholder="请选择" clearable @change="calculateFromTaxRate" style="width: 100%">
                        <el-option label="1" value="1" />
                        <el-option label="3" value="3" />
                        <el-option label="6" value="6" />
                        <el-option label="9" value="9" />
                        <el-option label="13" value="13" />
                     </el-select>
                  </el-form-item>
@@ -929,7 +940,7 @@
<script setup>
import { getToken } from "@/utils/auth";
import pagination from "@/components/PIMTable/Pagination.vue";
import {onMounted, ref, getCurrentInstance} from "vue";
import {onMounted, ref, getCurrentInstance, watch} from "vue";
import { addShippingInfo } from "@/api/salesManagement/deliveryLedger.js";
import { ElMessageBox, ElMessage } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
@@ -1001,6 +1012,7 @@
const data = reactive({
   searchForm: {
      customerName: "", // 客户名称
      customerId: "", // 客户ID（查询下拉）
      salesContractNo: "", // 销售合同编号
      entryDate: null, // 录入日期
      entryDateStart: undefined,
@@ -1029,6 +1041,17 @@
});
const { form, rules } = toRefs(data);
const { form: searchForm } = useFormData(data.searchForm);

// 新增台账：录入日期变更时，交货日期默认保持为录入日期后第 7 天
watch(
   () => [operationType.value, form.value?.entryDate],
   () => {
      if (operationType.value !== "add") return;
      const ed = form.value?.entryDate;
      if (!ed) return;
      form.value.deliveryDate = dayjs(ed).add(7, "day").format("YYYY-MM-DD");
   }
);
// 产品表单弹框数据
const productFormVisible = ref(false);
const productOperationType = ref("");
@@ -1062,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);
@@ -1380,6 +1387,21 @@
   const params = { ...rest, ...page };
   // 移除录入日期的默认值设置，只保留范围日期字段
   delete params.entryDate;
   // 查询客户名称与新增保持一致：先选 customerId，再映射为 customerName 查询
   const selectedCustomer = (customerOption.value || []).find(
      (item) => String(item?.id ?? "") === String(params.customerId ?? "")
   );
   if (selectedCustomer?.customerName) {
      params.customerName = String(selectedCustomer.customerName).trim();
   } else {
      const cn = params.customerName != null ? String(params.customerName).trim() : "";
      if (cn) {
         params.customerName = cn;
      } else {
         delete params.customerName;
      }
   }
   delete params.customerId;
   return ledgerListPage(params)
      .then((res) => {
         tableLoading.value = false;
@@ -1487,18 +1509,44 @@
};
// 获取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++) {
@@ -1639,6 +1687,9 @@
   //   }
   // });
   form.value.entryDate = getCurrentDate(); // 设置默认录入日期为当前日期
   if (type === "add") {
      form.value.deliveryDate = dayjs(form.value.entryDate).add(7, "day").format("YYYY-MM-DD");
   }
   dialogFormVisible.value = true;
};

@@ -1805,7 +1856,9 @@
         }
         form.value.tempFileIds = tempFileIds;
         form.value.type = 1;
         addOrUpdateSalesLedger(form.value).then((res) => {
         const submitPayload = { ...form.value };
         delete submitPayload.paymentMethod;
         addOrUpdateSalesLedger(submitPayload).then((res) => {
            proxy.$modal.msgSuccess("提交成功");
            closeDia();
            getList();
@@ -2785,6 +2838,9 @@
};
onMounted(() => {
   getList();
   customerList().then((res) => {
      customerOption.value = res;
   });
   userListNoPage().then(res => {
      userList.value = res.data;
   })