参数对比弹窗优化
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 = [
|
||||
"品名/物料名称",
|
||||
"品号",
|
||||
"品号-规格型号",
|
||||
"品号申请时间",
|
||||
"图号",
|
||||
"技术规范编号",
|
||||
"技术规范版本",
|
||||
"技术规范名称",
|
||||
"技术要求签订时间",
|
||||
"CBC编号",
|
||||
"CBC版本",
|
||||
"车型",
|
||||
|
|
@ -19,8 +19,6 @@ export const paramsToCompare = [
|
|||
|
||||
// 字段映射关系
|
||||
export const fieldMap = {
|
||||
"品名/物料名称": "name",
|
||||
品号: "productNumber",
|
||||
"品号-规格型号": "specificationModel",
|
||||
图号: "drawingNumber",
|
||||
技术规范编号: "technicalSpecCode",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue