fix: 🧩 修复打印条件表格row颜色渲染不正确

src/api/index.ts

@@ -161,7 +161,6 @@ class RequestHttp {
                 const { response } = error;
 
                 tryHideFullScreenLoading();
-                console.log("12323232323s ss");
                 // 请求超时 && 网络错误单独判断，没有 response
                 if (error.message.indexOf("timeout") !== -1) ElMessage.error("请求超时！请您稍后重试");
                 if (error.message.indexOf("Network Error") !== -1) ElMessage.error("网络错误！请您稍后重试");

src/api/modules/barCode.ts

@@ -37,61 +37,18 @@ export const getListApi = (params: Record<string, any>) => {
 };
 //产品条码列表
 export const getCodeListApi = (params: Record<string, any>) => {
-    // console.log(params);
+    const { isDownLoad } = params;
-    // return {
+    return http.post<ResPage<any>>(`SerialNumber/GetList`, params, {
-    //     totalCount: 300,
+        noLoading: isDownLoad
-    //     data: [
+    });
-    //         {
-    //             materialNumber: "G01-43-552867",
-    //             materialName: "7口USB3.0集线器",
-    //             specifications: "ORICO-H7013-U3-AD-EU-BK-BP",
-    //             old_Specifications: "",
-    //             barCode: "6936761881968",
-    //             serialNumber: "10FC-616M3R",
-    //             twoSerialNumber: "10FC-616M3R-two",
-    //             numberCode: "241224000417",
-    //             id: 202593401,
-    //             number: 300,
-    //             isUse: false,
-    //             isUseStr: "否",
-    //             box: "",
-    //             creator: "admin",
-    //             createTime: "2024-12-24 10:27:05",
-    //             printNumber: 0,
-    //             downLoadNumber: 1,
-    //             printTime: "",
-    //             downLoadTime: "2025-01-08 16:11:39",
-    //             isEnablePrint: true
-    //         },
-    //         {
-    //             materialNumber: "G01-43-552867",
-    //             materialName: "7口USB3.0集线器",
-    //             specifications: "ORICO-H7013-U3-AD-EU-BK-BP",
-    //             old_Specifications: "",
-    //             barCode: "6936761881968",
-    //             serialNumber: "10FC-616M3Q",
-    //             twoSerialNumber: "10FC-616M3R-two",
-    //             numberCode: "241224000416",
-    //             id: 202593400,
-    //             number: 300,
-    //             isUse: false,
-    //             isUseStr: "否",
-    //             box: "",
-    //             creator: "admin",
-    //             createTime: "2024-12-24 10:27:05",
-    //             printNumber: 0,
-    //             downLoadNumber: 1,
-    //             printTime: "",
-    //             downLoadTime: "2025-01-08 16:11:39",
-    //             isEnablePrint: true
-    //         }
-    //     ],
-    //     isSuccess: true,
-    //     status: 200,
-    //     message: "Success"
-    // };
-    return http.post<ResPage<any>>(`SerialNumber/GetList`, params);
 };
+
+// export const getCodeList1Api = (params: Record<string, any>) => {
+//     return http.post<ResPage<any>>(`SerialNumber/GetList`, params, {
+//         noLoading: true
+//     });
+// };
+
 //转换规格型号 SerialNumber/UpdateMaterial
 export const getUpdateMaterialApi = (params: Record<string, any>) => {
     return http.post<ResPage<any>>(`SerialNumber/UpdateMaterial`, params);

src/components/ListBtns/components/Convert.vue

@@ -38,7 +38,15 @@ const getTransferSn = (ids: any) => {
         })
         .catch(() => {});
 };
-
+//防止xss攻击
+// const escapeHtml = (unsafe: any) => {
+//     return unsafe
+//         .replace(/&/g, "&")
+//         .replace(/</g, "&lt;")
+//         .replace(/>/g, "&gt;")
+//         .replace(/"/g, "&quot;")
+//         .replace(/'/g, "&#039;");
+// };
 // 提交事件
 const handleBtnClick = async () => {
     if (!props.selectionList.length) {
@@ -111,7 +119,6 @@ const handleBtnClick = async () => {
         }
     });
     const result: any = await getTransferSnJCApi({ ids: ids });
-    console.log(result, "===result==");
     if (result.status === 200) {
         getTransferSn(ids);
     } else {

src/hooks/useTable.ts

@@ -62,6 +62,9 @@ export const useTable = (
         try {
             // 先把初始化参数和分页参数放到总参数里面 initParam
             Object.assign(state.totalParam, isPageable ? pageParam.value : {});
+            // console.log(state.searchInitParam, "=========state.searchInitParam===");
+            // console.log(initParam, "=========initParam===");
+
             let { data, totalCount } = await api({ ...state.searchInitParam, ...initParam, ...state.totalParam });
             state.tableData = data;
 
@@ -91,6 +94,7 @@ export const useTable = (
         // 处理查询参数，可以给查询参数加自定义前缀操作
         let nowSearchParam: Table.StateProps["searchParam"] = {};
         // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
+
         for (let key in state.searchParam) {
             //剔除日期参数
             if (key !== "Time" && key !== "Time1") {
@@ -120,6 +124,10 @@ export const useTable = (
     const search = () => {
         state.pageable.pageNo = 1;
         state.pageable.pageSize = 50;
+        if (routeName === "barCode") {
+            $Bus.emit("searchBarCodeSsDownLoad");
+        }
+
         updatedTotalParam();
         getTableList();
     };
@@ -146,7 +154,6 @@ export const useTable = (
             $Bus.emit("clearBoxMarkIndexCreator");
         }
         if (routeName === "antiCode") {
-            console.log("走到了这里?");
             $Bus.emit("clearBoxAntiCodeCreator");
         }
         updatedTotalParam();

src/views/supplier/code/barCode/constant/printCode/search.ts

@@ -132,5 +132,6 @@ export const PRINT_CODE_FORM_DATA: FormItem[] = [
 
 export const PRINT_CODE_RULE_FORM_DATA = {
     pageNo: 1,
-    pageSize: 50
+    pageSize: 50,
+    isDownLoad: false
 };

src/views/supplier/code/barCode/index.vue

@@ -290,6 +290,7 @@ import { PRINT_CODE_FORM_DATA, PRINT_CODE_RULE_FORM_DATA, PRINT_CODE_FORM_COLUMN
 // 接口
 import {
     getCodeListApi,
+    // getCodeList1Api,
     getSerialNumberDownLoadApi,
     getPrintListCodeApi,
     getListApi,
@@ -351,6 +352,7 @@ const datas = reactive<any>({
     printCodeColumns: cloneDeep(PRINT_CODE_FORM_COLUMNS), //打印条码弹窗表格配置项
     remoteSelectItem: {}, //转换规格的选中的数据
     isSave: false, //生成条码保存按钮状态
+    // isDownLoad: false,
     generateComplete: "", //条码生成状态,生成中的不可打印
     jsonData: [], //批产条码数据
     generateRecordId: null, //生成记录id
@@ -384,6 +386,8 @@ const codePrintSelection = (selection: any) => {
 // 点击打印条码按钮进行赋值
 const handlerPrintBarCode = (row: any) => {
     datas.codePrintSelectionList = [];
+    resetVisibleGroups();
+    datas.printCodeRuleFormData.isDownLoad = false;
     if (row.id) {
         datas.printCodeRuleFormData.orgCode = userStore.orgCode;
         datas.printCodeRuleFormData.generateRecordId = row.id;
@@ -393,22 +397,101 @@ const handlerPrintBarCode = (row: any) => {
         datas.allPrintBtn = row.isTwo > 1 ? cloneDeep(ALL_PRINT_BTN) : cloneDeep(ALL_PRINT_BTN1);
     }
 };
+// 全局组ID注册表（在组件生命周期内持久化）
+// 用于记录所有组的唯一ID，确保跨筛选/刷新保持一致
+const globalGroupRegistry = new Map<string, number>();
+let globalNextGroupId = 0;
 
-const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
+// 临时组跟踪（仅用于当前渲染批次，记录可见组的顺序）
-    if (row.isTwo == 1) {
+let visibleGroupOrder: string[] = [];
-        return "";
-    }
-    // 计算当前行所在的组（每组2行）
-    let groupIndex = Math.floor(rowIndex / 2);
 
-    // 根据组索引的奇偶性决定使用哪种颜色
+// 重置临时跟踪（筛选/分页时调用，保留全局注册表）
-    if (groupIndex % 2 === 0) {
+const resetVisibleGroups = () => {
-        return "warning-row";
+    visibleGroupOrder = [];
-    } else {
-        return "success-row";
-    }
-    return "";
 };
+// // 生成组标识（与之前相同）
+const getGroupKey = (row: any) => {
+    return JSON.stringify([row.serialNumber, row.twoSerialNumber].sort());
+};
+
+// 关键改进：跨筛选/刷新保持颜色交替的行样式函数
+const tableRowClassName = ({ row }: { row: any }) => {
+    // 排除不需要着色的行
+    if (row.isTwo === 1) return "";
+
+    // 验证必要字段
+    if (!row.serialNumber || !row.twoSerialNumber) return "";
+
+    const groupKey = getGroupKey(row);
+
+    // 1. 全局注册组ID（首次出现时分配，永久不变）
+    if (!globalGroupRegistry.has(groupKey)) {
+        globalGroupRegistry.set(groupKey, globalNextGroupId);
+        globalNextGroupId++;
+    }
+    globalGroupRegistry.get(groupKey)!;
+
+    // 2. 跟踪当前可见组的出现顺序
+    if (!visibleGroupOrder.includes(groupKey)) {
+        visibleGroupOrder.push(groupKey);
+    }
+    const visibleIndex = visibleGroupOrder.indexOf(groupKey);
+
+    // 3. 基于可见顺序的索引分配颜色（确保当前视图内严格交替）
+    return visibleIndex % 2 === 0 ? "warning-row" : "success-row";
+};
+// // 新增：分组缓存管理
+// const groupCache = new Map<string, { groupIndex: number; colorClass: string }>();
+// let groupCounter = 0;
+
+// // // 重置分组缓存（在表格数据变化时调用）
+// const resetGroupCache = () => {
+//     groupCache.clear();
+//     groupCounter = 0;
+// };
+// const tableRowClassName = ({ row }: { row: any }) => {
+//     // 当isTwo为1时不应用颜色
+//     if (row.isTwo === 1) {
+//         return "";
+//     }
+
+//     // 确保serialNumber和twoSerialNumber存在
+//     if (!row.serialNumber || !row.twoSerialNumber) {
+//         return "";
+//     }
+
+//     // 生成唯一组标识（排序后拼接，确保A-B和B-A属于同一组）
+//     const groupKey = [row.serialNumber, row.twoSerialNumber].sort().join("-");
+
+//     // 如果该组已处理过，直接使用缓存的颜色
+//     if (groupCache.has(groupKey)) {
+//         return groupCache.get(groupKey)!.colorClass;
+//     }
+
+//     // 新组：分配组索引并确定颜色（偶数组红色，奇数组绿色）
+//     const groupIndex = groupCounter++;
+//     const colorClass = groupIndex % 2 === 0 ? "warning-row" : "success-row";
+
+//     // // 缓存该组信息
+//     groupCache.set(groupKey, { groupIndex, colorClass });
+
+//     return colorClass;
+
+//     // if (row.isTwo == 1) {
+//     //     return "";
+//     // }
+//     // console.log(row, "============>");
+//     // // 计算当前行所在的组（每组2行）
+//     // let groupIndex = Math.floor(rowIndex / 2);
+
+//     // // 根据组索引的奇偶性决定使用哪种颜色
+//     // if (groupIndex % 2 === 0) {
+//     //     return "warning-row";
+//     // } else {
+//     //     return "success-row";
+//     // }
+//     // return "";
+// };
 // 删除文件
 const handleRemoveFiles = () => {
     datas.uploadProgress = "";
@@ -650,6 +733,7 @@ const handleSpecificationConfirm = async () => {
     if (result.status === 200) {
         if (result.isSuccess) {
             useMsg("success", "规格转换成功 ！");
+            resetVisibleGroups();
             printCodeTable.value.getTableList();
             datas.specificationVisible = false;
             handleSpecificationClose();
@@ -668,6 +752,7 @@ const handleSpecificationClose = () => {
     datas.specificationList = [];
     datas.specificationValue = "";
     datas.remoteSelectItem = {};
+    datas.isDownLoad = false;
 };
 
 // 生成条码弹窗远程操作赋值(规格型号点击选择)
@@ -747,10 +832,12 @@ const handleCloseGenerateCode = () => {
 
 // 条码列表下载
 const getSerialNumberDownLoad = async () => {
+    datas.printCodeRuleFormData.isDownLoad = true;
     if (!datas.codePrintSelectionList.length) {
         useMsg("warning", "请选择需要下载的数据 ！");
         return;
     }
+
     let serialNumbers: any[] = [];
     let isTwo = datas.codePrintSelectionList[0].isTwo;
     datas.codePrintSelectionList.forEach((item: any) => {
@@ -766,9 +853,12 @@ const getSerialNumberDownLoad = async () => {
     });
     if (result.status === 200 && result.isSuccess) {
         useMsg("success", "导出成功请前往导出列表中进行下载 ！");
+        resetVisibleGroups();
         printCodeTable.value.getTableList();
+        datas.printCodeRuleFormData.isDownLoad = false;
     } else {
         useMsg("warning", "导出失败,请稍后重试 ！");
+        datas.printCodeRuleFormData.isDownLoad = false;
     }
 };
 
@@ -779,6 +869,7 @@ const handleDown = () => {
 
 // 打印记录接口
 const getPrintListCode = async (params: any) => {
+    datas.printCodeRuleFormData.isDownLoad = false;
     const result = await getPrintListCodeApi(params);
     if (result.status === 200) {
         printCodeTable!.value.getTableList();
@@ -885,12 +976,19 @@ onMounted(() => {
     $Bus.on("clearBarCodeCreateUser", () => {
         datas.ruleForm.createUser = "";
         datas.initParam.createUser = "";
+        datas.printCodeRuleFormData.isDownLoad = false;
+        resetVisibleGroups();
     });
+
     $Bus.on("setBarCodeInputCreateUser", (params: any) => {
         const { createUser } = params;
         datas.ruleForm.createUser = createUser;
         datas.initParam.createUser = createUser;
-        console.log("执行了吗");
+    });
+    //searchBarCodeSsDownLoad
+    $Bus.on("searchBarCodeSsDownLoad", () => {
+        datas.printCodeRuleFormData.isDownLoad = false;
+        resetVisibleGroups();
     });
 });
 </script>

src/views/supplier/code/barCode/init/list/index.ts

@@ -96,6 +96,7 @@ export const initRuleForm = (datas: any) => {
 //顶部按钮事件
 export const handleBtnClick = (result: any, datas: any, proTable: any) => {
     const { type } = result;
+    console.log(type, "============>");
     //生成条码
     if (type === "Generate") {
         datas.generateCodeVisible = true;