参数对比弹窗优化

This commit is contained in:
JenniferW 2025-09-03 16:04:37 +08:00
parent 5bad6f3682
commit 64b9ce0559
6 changed files with 114 additions and 26 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
public/images/cars/new.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

View File

@ -1,12 +1,12 @@
// 需要对比的参数列表
export const paramsToCompare = [
"品名/物料名称",
"品号",
"品号-规格型号",
"品号申请时间",
"图号",
"技术规范编号",
"技术规范版本",
"技术规范名称",
"技术要求签订时间",
"CBC编号",
"CBC版本",
"车型",
@ -19,8 +19,6 @@ export const paramsToCompare = [
// 字段映射关系
export const fieldMap = {
"品名/物料名称": "name",
品号: "productNumber",
"品号-规格型号": "specificationModel",
图号: "drawingNumber",
技术规范编号: "technicalSpecCode",

View File

@ -284,7 +284,7 @@
fixed="left"
/>
<el-table-column
v-for="item in selectedCompareList"
v-for="item in sortedCompareList"
:key="item.productNumber"
:label="item.productNumber"
:prop="item.productNumber"
@ -296,16 +296,34 @@
<div
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
>
<span>{{ column.label }}</span>
<span style="font-size: 12px; color: #666">{{
selectedCompareList.find(
(i) => i.productNumber === column.label
).name
}}</span>
<span v-if="item.isLatest" class="new-tag">
<img
src="/images/cars/new.png"
alt="最新品号"
class="new-tag-img"
/>
</span>
<div
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
>
<span>
{{ column.label }}
</span>
<span style="font-size: 12px; color: #666">{{
sortedCompareList.find(
(i) => i.productNumber === column.label
).name
}}</span>
</div>
</div>
</template>
<!-- 单元格内容不同的值标红 -->
@ -432,9 +450,36 @@ const parameterDifferences = ref({});
//
const confirmDialogVisible = ref(false);
//
const sortedCompareList = computed(() => {
//
const list = [...selectedCompareList.value];
//
list.sort((a, b) => {
//
const aMatch = a.productNumber.match(/-(\d{5})$/);
const bMatch = b.productNumber.match(/-(\d{5})$/);
const aNum = aMatch ? parseInt(aMatch[1], 10) : 0;
const bNum = bMatch ? parseInt(bMatch[1], 10) : 0;
return bNum - aNum;
});
//
if (list.length > 0) {
list.forEach((item, index) => {
item.isLatest = index === 0;
});
}
return list;
});
//
const compareTableData = computed(() => {
if (selectedCompareList.value.length === 0) {
if (sortedCompareList.value.length === 0) {
parameterDifferences.value = {};
return [];
}
@ -442,21 +487,60 @@ const compareTableData = computed(() => {
//
const differences = {};
//
const result = paramsToCompare.map((param) => {
const row = { param };
const values = [];
//
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
//
selectedCompareList.value.forEach((item) => {
const value = item[fieldMap[param]] || "-";
row[item.productNumber] = value;
values.push(value);
// yyyy-MM-dd
const formatDate = (date) => {
return date.toISOString().split("T")[0];
};
const formattedToday = formatDate(today);
const formattedYesterday = formatDate(yesterday);
//
const result = [
//
{ param: "品号-规格型号" },
//
{ param: "品号申请时间" },
{ param: "图号" },
{ param: "技术规范编号" },
{ param: "技术规范版本" },
{ param: "技术规范名称" },
//
{ param: "技术要求签订时间" },
{ param: "CBC编号" },
{ param: "CBC版本" },
{ param: "车型" },
{ param: "型号" },
{ param: "材质" },
{ param: "采购属性" },
{ param: "车轮踏面形式" },
{ param: "油漆制造商" },
].map((item) => {
const row = { param: item.param };
//
sortedCompareList.value.forEach((product) => {
//
if (item.param === "品号申请时间") {
row[product.productNumber] = formattedToday;
} else if (item.param === "技术要求签订时间") {
row[product.productNumber] = formattedYesterday;
} else {
//
const fieldKey = fieldMap[item.param];
row[product.productNumber] = fieldKey ? product[fieldKey] ?? "-" : "-";
}
});
//
//
const values = sortedCompareList.value.map((p) => row[p.productNumber]);
const allSame = values.every((v) => v === values[0]);
differences[param] = !allSame;
differences[item.param] = !allSame;
return row;
});
@ -2084,18 +2168,24 @@ function handleConfirm() {
padding: 20px 0;
}
/* 新增:不同参数值的样式 */
/* 不同参数值的样式 */
.different-value {
color: #ff4d4f; /* 红色 */
font-weight: 500;
}
/* 新增:对比筛选选项样式 */
/* 对比筛选选项样式 */
.compare-filter-options {
text-align: right;
padding-right: 10px;
}
.new-tag-img {
width: 35px;
height: 35px;
vertical-align: middle;
}
@media (max-width: 768px) {
.search-box {
flex-direction: column;