参数对比

src/views/order/intention/search.vue

@@ -257,12 +257,17 @@
             top="40px"
             :close-on-click-modal="false"
           >
-            <!-- 仅看不同项选项 -->
+            <!-- 仅看不同项按钮 -->
-            <div class="compare-filter-options" style="margin-bottom: 16px">
+            <div
-              <el-radio-group v-model="showOnlyDifferences">
+              class="compare-filter-options"
-                <el-radio :label="false">显示所有项</el-radio>
+              style="margin: -45px 80px 16px; text-align: left"
-                <el-radio :label="true">仅看不同项</el-radio>
+            >
-              </el-radio-group>
+              <el-button
+                type="primary"
+                @click="showOnlyDifferences = !showOnlyDifferences"
+              >
+                {{ showOnlyDifferences ? "显示全部" : "仅看不同项" }}
+              </el-button>
             </div>
 
             <!-- 表格对比区，添加横向滚动 -->
@@ -270,7 +275,7 @@
               <el-table
                 :data="filteredCompareTableData"
                 border
-                style="width: 100%; min-width: 900px"
+                style="width: 100%; min-width: 600px"
               >
                 <el-table-column
                   prop="param"
@@ -279,6 +284,7 @@
                   class-name="param-col"
                   align="center"
                   header-align="center"
+                  fixed="left"
                 />
                 <el-table-column
                   v-for="item in selectedCompareList"
@@ -287,7 +293,7 @@
                   :prop="item.productNumber"
                   align="center"
                   header-align="center"
-                  min-width="200"
+                  min-width="300"
                 >
                   <template #header="{ column }">
                     <div
@@ -309,10 +315,7 @@
                   <template #default="scope">
                     <span
                       :class="{
-                        'different-value': isValueDifferent(
+                        'different-value': isValueDifferent(scope.row.param),
-                          scope.row.param,
-                          scope.row[scope.column.property]
-                        ),
                       }"
                     >
                       {{ scope.row[scope.column.property] || "-" }}
@@ -424,7 +427,7 @@ const compareDialogVisible = ref(false);
 const selectedCompareList = computed(() =>
   filteredData.value.filter((i) => i.selected)
 );
-// 新增：仅显示不同项的开关
+// 仅显示不同项的开关
 const showOnlyDifferences = ref(false);
 // 存储参数差异信息的映射
 const parameterDifferences = ref({});
@@ -478,18 +481,10 @@ const filteredCompareTableData = computed(() => {
   );
 });
 
-// 判断某个参数值是否不同
+// 判断某个参数是否有差异（只要有差异就标红）
-const isValueDifferent = (param, value) => {
+const isValueDifferent = (param) => {
-  // 如果参数本身没有差异，直接返回false
+  // 如果参数有任何差异，就标红
-  if (!parameterDifferences.value[param]) return false;
+  return parameterDifferences.value[param];
-
-  // 获取该参数的所有值
-  const values = selectedCompareList.value.map(
-    (item) => item[fieldMap[param]] || "-"
-  );
-
-  // 判断当前值是否与第一个值不同
-  return value !== values[0];
 };
 
 // 收集所有可能的值用于匹配
@@ -1798,8 +1793,8 @@ function handleConfirm() {
 /* 参数对比按钮样式 - 随滚动条移动 */
 .compare-btn-float {
   position: fixed; /* 修改为fixed定位，相对于视口固定 */
-  top: 20px;
+  top: 260px;
-  right: 20px;
+  right: 10px;
   z-index: 100; /* 提高层级确保可见 */
   width: 52px;
   height: 52px;
@@ -1835,6 +1830,12 @@ function handleConfirm() {
   background: #f5f7fa !important;
 }
 
+// 固定列的样式优化
+:deep(.el-table__fixed-left) {
+  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
+  z-index: 2;
+}
+
 .search-box-container {
   max-width: 1200px;
   margin: 0 auto;