全屏还原优化

2025-12-11 17:52:28 +08:00 · 2025-12-11 17:52:28 +08:00 · f7a5d8070b
parent 705e34ec1c
commit f7a5d8070b
3 changed files with 171 additions and 80 deletions
--- a/src/router/index.js
+++ b/src/router/index.js
@ -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',
    component: Layout,
--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -105,7 +105,7 @@

    <!--  底部  -->
    <div class="el-login-footer">
-      <span>Copyright © 2015-2023</span>
+      <span>Copyright © 2015-2025</span>
    </div>
  </div>
 </template>
--- a/src/views/order/intention/search.vue
+++ b/src/views/order/intention/search.vue
@ -273,13 +273,38 @@
          <!-- 参数对比弹窗 -->
          <el-dialog
            v-model="compareDialogVisible"
-            title="参数对比"
            width="1200px"
            top="40px"
            :close-on-click-modal="false"
+            :fullscreen="isFullscreen"
            draggable
            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
              class="compare-filter-options"
@ -295,75 +320,77 @@

            <!-- 表格对比区，添加横向滚动 -->
            <div class="compare-table-wrap">
-              <el-table
-                :data="filteredCompareTableData"
-                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"
+              <div class="compare-table-scroll">
+                <el-table
+                  :data="filteredCompareTableData"
+                  border
+                  style="width: 100%; min-width: 600px"
                >
-                  <template #header="{ column }">
-                    <div
-                      class="compare-header-draggable"
-                      draggable="true"
-                      @dragstart="onHeaderDragStart(index)"
-                      @dragover.prevent
-                      @drop="onHeaderDrop(index)"
-                    >
-                      <span v-if="item.isLatest" class="new-tag">
-                        <img
-                          src="/images/cars/new.png"
-                          alt="最新品号"
-                          class="new-tag-img"
-                        />
-                      </span>
+                  <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 }">
                      <div
-                        style="
-                          display: flex;
-                          flex-direction: column;
-                          align-items: center;
-                          justify-content: center;
-                        "
+                        class="compare-header-draggable"
+                        draggable="true"
+                        @dragstart="onHeaderDragStart(index)"
+                        @dragover.prevent
+                        @drop="onHeaderDrop(index)"
                      >
-                        <span>
-                          {{ column.label }}
+                        <span v-if="item.isLatest" class="new-tag">
+                          <img
+                            src="/images/cars/new.png"
+                            alt="最新品号"
+                            class="new-tag-img"
+                          />
                        </span>
-                        <span style="font-size: 12px; color: #666">{{
-                          displayCompareList.find(
-                            (i) => i.partNumber === column.label
-                          )?.partName || "-"
-                        }}</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">{{
+                            displayCompareList.find(
+                              (i) => i.partNumber === column.label
+                            )?.partName || "-"
+                          }}</span>
+                        </div>
                      </div>
-                    </div>
-                  </template>
-                  <!-- 单元格内容，不同的值标红 -->
-                  <template #default="scope">
-                    <span
-                      :class="{
-                        'different-value': isValueDifferent(scope.row.param),
-                      }"
-                    >
-                      {{ scope.row[scope.column.property] || "-" }}
-                    </span>
-                  </template>
-                </el-table-column>
-              </el-table>
+                    </template>
+                    <!-- 单元格内容，不同的值标红 -->
+                    <template #default="scope">
+                      <span
+                        :class="{
+                          'different-value': isValueDifferent(scope.row.param),
+                        }"
+                      >
+                        {{ scope.row[scope.column.property] || "-" }}
+                      </span>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
            </div>
          </el-dialog>

@ -422,6 +449,7 @@ import {
  compare,
 } from "@/api/order";
 import { ElMessage, ElEmpty, ElDialog } from "element-plus";
+import { Close } from "@element-plus/icons-vue";

 const { proxy } = getCurrentInstance();
 const { display_field } = proxy.useDict("display_field");
@ -497,6 +525,14 @@ const selectedProductNumber = computed(() => {
  return first ? first.partNumber : "";
 });

+// 全屏相关
+const isFullscreen = ref(false);
+
+// 切换全屏/还原的方法
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value;
+};
+
 // 对比相关
 const compareDialogVisible = ref(false);
 const selectedCompareList = computed(() =>
@ -2229,8 +2265,18 @@ function handleConfirm() {
 }
 .compare-table-wrap {
  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 {
@ -2490,10 +2536,37 @@ function handleConfirm() {
  color: #666;
 }

-.compare-table-wrap {
-  margin-top: 16px;
-  max-height: 500px;
-  overflow-y: auto;
+.compare-dialog-header {
+  display: flex;
+  align-items: center;
+  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;
 }

-/* 参数对比弹窗支持拖拽和缩放 */
-.compare-dialog {
-  ::deep(.el-dialog) {
-    resize: both;
-    overflow: auto;
-  }
-}
-
 /* 对比表头可拖拽的鼠标样式 */
 .compare-header-draggable {
  display: flex;