参数对比弹窗优化
This commit is contained in:
parent
5bad6f3682
commit
64b9ce0559
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
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 |
|
|
@ -1,12 +1,12 @@
|
||||||
// 需要对比的参数列表
|
// 需要对比的参数列表
|
||||||
export const paramsToCompare = [
|
export const paramsToCompare = [
|
||||||
"品名/物料名称",
|
|
||||||
"品号",
|
|
||||||
"品号-规格型号",
|
"品号-规格型号",
|
||||||
|
"品号申请时间",
|
||||||
"图号",
|
"图号",
|
||||||
"技术规范编号",
|
"技术规范编号",
|
||||||
"技术规范版本",
|
"技术规范版本",
|
||||||
"技术规范名称",
|
"技术规范名称",
|
||||||
|
"技术要求签订时间",
|
||||||
"CBC编号",
|
"CBC编号",
|
||||||
"CBC版本",
|
"CBC版本",
|
||||||
"车型",
|
"车型",
|
||||||
|
|
@ -19,8 +19,6 @@ export const paramsToCompare = [
|
||||||
|
|
||||||
// 字段映射关系
|
// 字段映射关系
|
||||||
export const fieldMap = {
|
export const fieldMap = {
|
||||||
"品名/物料名称": "name",
|
|
||||||
品号: "productNumber",
|
|
||||||
"品号-规格型号": "specificationModel",
|
"品号-规格型号": "specificationModel",
|
||||||
图号: "drawingNumber",
|
图号: "drawingNumber",
|
||||||
技术规范编号: "technicalSpecCode",
|
技术规范编号: "technicalSpecCode",
|
||||||
|
|
|
||||||
|
|
@ -284,7 +284,7 @@
|
||||||
fixed="left"
|
fixed="left"
|
||||||
/>
|
/>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
v-for="item in selectedCompareList"
|
v-for="item in sortedCompareList"
|
||||||
:key="item.productNumber"
|
:key="item.productNumber"
|
||||||
:label="item.productNumber"
|
:label="item.productNumber"
|
||||||
:prop="item.productNumber"
|
:prop="item.productNumber"
|
||||||
|
|
@ -296,16 +296,34 @@
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<span>{{ column.label }}</span>
|
<span v-if="item.isLatest" class="new-tag">
|
||||||
<span style="font-size: 12px; color: #666">{{
|
<img
|
||||||
selectedCompareList.find(
|
src="/images/cars/new.png"
|
||||||
(i) => i.productNumber === column.label
|
alt="最新品号"
|
||||||
).name
|
class="new-tag-img"
|
||||||
}}</span>
|
/>
|
||||||
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 单元格内容,不同的值标红 -->
|
<!-- 单元格内容,不同的值标红 -->
|
||||||
|
|
@ -432,9 +450,36 @@ const parameterDifferences = ref({});
|
||||||
// 确认弹窗
|
// 确认弹窗
|
||||||
const confirmDialogVisible = ref(false);
|
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(() => {
|
const compareTableData = computed(() => {
|
||||||
if (selectedCompareList.value.length === 0) {
|
if (sortedCompareList.value.length === 0) {
|
||||||
parameterDifferences.value = {};
|
parameterDifferences.value = {};
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
@ -442,21 +487,60 @@ const compareTableData = computed(() => {
|
||||||
// 重置差异映射
|
// 重置差异映射
|
||||||
const differences = {};
|
const differences = {};
|
||||||
|
|
||||||
// 构建对比数据
|
// 获取当前时间和昨天的日期
|
||||||
const result = paramsToCompare.map((param) => {
|
const today = new Date();
|
||||||
const row = { param };
|
const yesterday = new Date(today);
|
||||||
const values = [];
|
yesterday.setDate(yesterday.getDate() - 1);
|
||||||
|
|
||||||
// 收集所有产品的参数值
|
// 格式化日期为 yyyy-MM-dd
|
||||||
selectedCompareList.value.forEach((item) => {
|
const formatDate = (date) => {
|
||||||
const value = item[fieldMap[param]] || "-";
|
return date.toISOString().split("T")[0];
|
||||||
row[item.productNumber] = value;
|
};
|
||||||
values.push(value);
|
|
||||||
|
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]);
|
const allSame = values.every((v) => v === values[0]);
|
||||||
differences[param] = !allSame;
|
differences[item.param] = !allSame;
|
||||||
|
|
||||||
return row;
|
return row;
|
||||||
});
|
});
|
||||||
|
|
@ -2084,18 +2168,24 @@ function handleConfirm() {
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 新增:不同参数值的样式 */
|
/* 不同参数值的样式 */
|
||||||
.different-value {
|
.different-value {
|
||||||
color: #ff4d4f; /* 红色 */
|
color: #ff4d4f; /* 红色 */
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 新增:对比筛选选项样式 */
|
/* 对比筛选选项样式 */
|
||||||
.compare-filter-options {
|
.compare-filter-options {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.new-tag-img {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.search-box {
|
.search-box {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue