全屏还原优化
This commit is contained in:
parent
705e34ec1c
commit
f7a5d8070b
|
|
@ -86,6 +86,32 @@ export const constantRoutes = [
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/system/user-auth',
|
||||||
|
component: Layout,
|
||||||
|
hidden: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'role/:userId(\\d+)',
|
||||||
|
component: () => import('@/views/system/user/authRole.vue'),
|
||||||
|
name: 'AuthRole',
|
||||||
|
meta: { title: '分配角色', activeMenu: '/system/user' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/system/role-auth',
|
||||||
|
component: Layout,
|
||||||
|
hidden: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'user/:roleId(\\d+)',
|
||||||
|
component: () => import('@/views/system/role/authUser.vue'),
|
||||||
|
name: 'AuthUser',
|
||||||
|
meta: { title: '分配用户', activeMenu: '/system/role' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/system/dict/data',
|
path: '/system/dict/data',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
|
||||||
|
|
@ -105,7 +105,7 @@
|
||||||
|
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<div class="el-login-footer">
|
<div class="el-login-footer">
|
||||||
<span>Copyright © 2015-2023</span>
|
<span>Copyright © 2015-2025</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -273,13 +273,38 @@
|
||||||
<!-- 参数对比弹窗 -->
|
<!-- 参数对比弹窗 -->
|
||||||
<el-dialog
|
<el-dialog
|
||||||
v-model="compareDialogVisible"
|
v-model="compareDialogVisible"
|
||||||
title="参数对比"
|
|
||||||
width="1200px"
|
width="1200px"
|
||||||
top="40px"
|
top="40px"
|
||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
|
:fullscreen="isFullscreen"
|
||||||
draggable
|
draggable
|
||||||
class="compare-dialog"
|
class="compare-dialog"
|
||||||
>
|
>
|
||||||
|
<template #header>
|
||||||
|
<div class="compare-dialog-header">
|
||||||
|
<span class="compare-dialog-title">参数对比</span>
|
||||||
|
<div class="compare-dialog-actions">
|
||||||
|
<el-button text size="small" @click="toggleFullscreen">
|
||||||
|
<el-icon :size="18">
|
||||||
|
<full-screen v-if="!isFullscreen" />
|
||||||
|
<cancel-full-screen v-else />
|
||||||
|
</el-icon>
|
||||||
|
<span class="action-text">
|
||||||
|
{{ isFullscreen ? "退出全屏" : "全屏" }}
|
||||||
|
</span>
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
text
|
||||||
|
size="small"
|
||||||
|
class="dialog-close-btn"
|
||||||
|
@click="compareDialogVisible = false"
|
||||||
|
>
|
||||||
|
<el-icon :size="16"><Close /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 仅看不同项按钮 -->
|
<!-- 仅看不同项按钮 -->
|
||||||
<div
|
<div
|
||||||
class="compare-filter-options"
|
class="compare-filter-options"
|
||||||
|
|
@ -295,75 +320,77 @@
|
||||||
|
|
||||||
<!-- 表格对比区,添加横向滚动 -->
|
<!-- 表格对比区,添加横向滚动 -->
|
||||||
<div class="compare-table-wrap">
|
<div class="compare-table-wrap">
|
||||||
<el-table
|
<div class="compare-table-scroll">
|
||||||
:data="filteredCompareTableData"
|
<el-table
|
||||||
border
|
:data="filteredCompareTableData"
|
||||||
style="width: 100%; min-width: 600px"
|
border
|
||||||
>
|
style="width: 100%; min-width: 600px"
|
||||||
<el-table-column
|
|
||||||
prop="param"
|
|
||||||
label="参数"
|
|
||||||
width="180"
|
|
||||||
class-name="param-col"
|
|
||||||
align="center"
|
|
||||||
header-align="center"
|
|
||||||
fixed="left"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
v-for="(item, index) in displayCompareList"
|
|
||||||
:key="item.partNumber"
|
|
||||||
:label="item.partNumber"
|
|
||||||
:prop="item.partNumber"
|
|
||||||
align="center"
|
|
||||||
header-align="center"
|
|
||||||
min-width="300"
|
|
||||||
>
|
>
|
||||||
<template #header="{ column }">
|
<el-table-column
|
||||||
<div
|
prop="param"
|
||||||
class="compare-header-draggable"
|
label="参数"
|
||||||
draggable="true"
|
width="180"
|
||||||
@dragstart="onHeaderDragStart(index)"
|
class-name="param-col"
|
||||||
@dragover.prevent
|
align="center"
|
||||||
@drop="onHeaderDrop(index)"
|
header-align="center"
|
||||||
>
|
fixed="left"
|
||||||
<span v-if="item.isLatest" class="new-tag">
|
/>
|
||||||
<img
|
<el-table-column
|
||||||
src="/images/cars/new.png"
|
v-for="(item, index) in displayCompareList"
|
||||||
alt="最新品号"
|
:key="item.partNumber"
|
||||||
class="new-tag-img"
|
:label="item.partNumber"
|
||||||
/>
|
:prop="item.partNumber"
|
||||||
</span>
|
align="center"
|
||||||
|
header-align="center"
|
||||||
|
min-width="300"
|
||||||
|
>
|
||||||
|
<template #header="{ column }">
|
||||||
<div
|
<div
|
||||||
style="
|
class="compare-header-draggable"
|
||||||
display: flex;
|
draggable="true"
|
||||||
flex-direction: column;
|
@dragstart="onHeaderDragStart(index)"
|
||||||
align-items: center;
|
@dragover.prevent
|
||||||
justify-content: center;
|
@drop="onHeaderDrop(index)"
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span>
|
<span v-if="item.isLatest" class="new-tag">
|
||||||
{{ column.label }}
|
<img
|
||||||
|
src="/images/cars/new.png"
|
||||||
|
alt="最新品号"
|
||||||
|
class="new-tag-img"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 12px; color: #666">{{
|
<div
|
||||||
displayCompareList.find(
|
style="
|
||||||
(i) => i.partNumber === column.label
|
display: flex;
|
||||||
)?.partName || "-"
|
flex-direction: column;
|
||||||
}}</span>
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{{ column.label }}
|
||||||
|
</span>
|
||||||
|
<span style="font-size: 12px; color: #666">{{
|
||||||
|
displayCompareList.find(
|
||||||
|
(i) => i.partNumber === column.label
|
||||||
|
)?.partName || "-"
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
<!-- 单元格内容,不同的值标红 -->
|
||||||
<!-- 单元格内容,不同的值标红 -->
|
<template #default="scope">
|
||||||
<template #default="scope">
|
<span
|
||||||
<span
|
:class="{
|
||||||
:class="{
|
'different-value': isValueDifferent(scope.row.param),
|
||||||
'different-value': isValueDifferent(scope.row.param),
|
}"
|
||||||
}"
|
>
|
||||||
>
|
{{ scope.row[scope.column.property] || "-" }}
|
||||||
{{ scope.row[scope.column.property] || "-" }}
|
</span>
|
||||||
</span>
|
</template>
|
||||||
</template>
|
</el-table-column>
|
||||||
</el-table-column>
|
</el-table>
|
||||||
</el-table>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
|
|
@ -422,6 +449,7 @@ import {
|
||||||
compare,
|
compare,
|
||||||
} from "@/api/order";
|
} from "@/api/order";
|
||||||
import { ElMessage, ElEmpty, ElDialog } from "element-plus";
|
import { ElMessage, ElEmpty, ElDialog } from "element-plus";
|
||||||
|
import { Close } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
const { display_field } = proxy.useDict("display_field");
|
const { display_field } = proxy.useDict("display_field");
|
||||||
|
|
@ -497,6 +525,14 @@ const selectedProductNumber = computed(() => {
|
||||||
return first ? first.partNumber : "";
|
return first ? first.partNumber : "";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 全屏相关
|
||||||
|
const isFullscreen = ref(false);
|
||||||
|
|
||||||
|
// 切换全屏/还原的方法
|
||||||
|
const toggleFullscreen = () => {
|
||||||
|
isFullscreen.value = !isFullscreen.value;
|
||||||
|
};
|
||||||
|
|
||||||
// 对比相关
|
// 对比相关
|
||||||
const compareDialogVisible = ref(false);
|
const compareDialogVisible = ref(false);
|
||||||
const selectedCompareList = computed(() =>
|
const selectedCompareList = computed(() =>
|
||||||
|
|
@ -2229,8 +2265,18 @@ function handleConfirm() {
|
||||||
}
|
}
|
||||||
.compare-table-wrap {
|
.compare-table-wrap {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
overflow-x: auto; /* 允许横向滚动 */
|
max-width: 100%;
|
||||||
max-width: 100%; /* 限制最大宽度 */
|
height: 70vh; /* 固定高度,保证横向滚动条总在可视区域 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compare-table-scroll {
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-bottom: 8px; /* 预留滚动条空间避免遮挡内容 */
|
||||||
|
scrollbar-gutter: stable both-edges; /* 保留滚动条占位,避免跳动 */
|
||||||
}
|
}
|
||||||
/* 参数对比按钮样式 - 随滚动条移动 */
|
/* 参数对比按钮样式 - 随滚动条移动 */
|
||||||
.compare-btn-float {
|
.compare-btn-float {
|
||||||
|
|
@ -2490,10 +2536,37 @@ function handleConfirm() {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.compare-table-wrap {
|
.compare-dialog-header {
|
||||||
margin-top: 16px;
|
display: flex;
|
||||||
max-height: 500px;
|
align-items: center;
|
||||||
overflow-y: auto;
|
justify-content: space-between;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compare-dialog-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compare-dialog-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compare-dialog-actions .el-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compare-dialog-actions .action-text {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-close-btn {
|
||||||
|
color: #909399;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分页和确定按钮容器 */
|
/* 分页和确定按钮容器 */
|
||||||
|
|
@ -2566,14 +2639,6 @@ function handleConfirm() {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 参数对比弹窗支持拖拽和缩放 */
|
|
||||||
.compare-dialog {
|
|
||||||
::deep(.el-dialog) {
|
|
||||||
resize: both;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 对比表头可拖拽的鼠标样式 */
|
/* 对比表头可拖拽的鼠标样式 */
|
||||||
.compare-header-draggable {
|
.compare-header-draggable {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue