修改页面整体样式
This commit is contained in:
commit
8395202d97
|
|
@ -42,7 +42,7 @@ body,
|
|||
height: 100%;
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -103,7 +103,19 @@
|
|||
}
|
||||
|
||||
.table_form-container {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
--el-card-border-color: var(--el-border-color-light);
|
||||
--el-card-border-radius: 4px;
|
||||
--el-card-padding: 20px;
|
||||
--el-card-bg-color: var(--el-fill-color-blank);
|
||||
background-color: var(--el-card-bg-color);
|
||||
border: 1px solid var(--el-card-border-color);
|
||||
border-radius: var(--el-card-border-radius);
|
||||
color: var(--el-text-color-primary);
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration);
|
||||
}
|
||||
|
|
@ -100,7 +100,7 @@ const handleCurrentChange = (val: number) => {
|
|||
// float: right;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
padding: 10px 10px 0px 10px;
|
||||
background-color: #fff;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@
|
|||
<div class="logo-section">
|
||||
<img src="@/assets/images/logo.webp" alt="logo" class="logo-img" />
|
||||
<span class="system-name">Admin System</span>
|
||||
<!-- 菜单收缩按钮 - 在标题右边 -->
|
||||
<el-button
|
||||
class="collapse-btn"
|
||||
:icon="sidebarCollapsed ? Expand : Fold"
|
||||
@click="toggleSidebar"
|
||||
text
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单收缩按钮 - 在标题右边 -->
|
||||
<el-button
|
||||
class="collapse-btn"
|
||||
:icon="sidebarCollapsed ? Expand : Fold"
|
||||
@click="toggleSidebar"
|
||||
text
|
||||
/>
|
||||
<!-- 中间:面包屑导航 -->
|
||||
<div class="header-center">
|
||||
<Breadcrumb />
|
||||
|
|
@ -154,8 +154,7 @@ const handleLogout = () => {
|
|||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -166,6 +165,8 @@ const handleLogout = () => {
|
|||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
|
@ -182,12 +183,12 @@ const handleLogout = () => {
|
|||
}
|
||||
|
||||
.system-name {
|
||||
font-size: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<!-- 右侧内容区:页签 + 主体内容 -->
|
||||
<section class="content-container">
|
||||
<!-- 页签标签栏 -->
|
||||
<!-- <Tabs /> -->
|
||||
<Tabs />
|
||||
|
||||
<!-- 主体内容区 -->
|
||||
<main class="main-content">
|
||||
|
|
@ -81,10 +81,9 @@ const handleToggleSidebar = (collapsed: boolean) => {
|
|||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: var(--el-bg-color-page);
|
||||
// background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,15 +7,17 @@
|
|||
|
||||
<!-- 标签列表区域 -->
|
||||
<div class="tabs-scroll-area" ref="tabsContainerRef">
|
||||
<draggable
|
||||
v-model="tabsList"
|
||||
item-key="path"
|
||||
<draggable
|
||||
v-model="tabsList"
|
||||
item-key="path"
|
||||
class="tabs-list"
|
||||
:animation="300"
|
||||
ghost-class="ghost"
|
||||
chosen-class="chosen"
|
||||
drag-class="drag"
|
||||
handle=".tab-label"
|
||||
:move="checkDragMove"
|
||||
@start="handleDragStart"
|
||||
@end="handleDragEnd"
|
||||
>
|
||||
<template #item="{ element: tab }">
|
||||
|
|
@ -74,8 +76,8 @@
|
|||
|
||||
<!-- 右键菜单 -->
|
||||
<teleport to="body">
|
||||
<div
|
||||
v-if="contextMenuVisible"
|
||||
<div
|
||||
v-if="contextMenuVisible"
|
||||
class="context-menu-dropdown"
|
||||
:style="contextMenuStyle"
|
||||
@click.stop
|
||||
|
|
@ -84,19 +86,35 @@
|
|||
<el-icon><Refresh /></el-icon>
|
||||
<span>刷新当前页</span>
|
||||
</div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('close')">
|
||||
<div
|
||||
class="context-menu-item"
|
||||
:class="{ 'is-disabled': !canCloseCurrent }"
|
||||
@click="canCloseCurrent && handleContextMenuCommand('close')"
|
||||
>
|
||||
<el-icon><Close /></el-icon>
|
||||
<span>关闭当前</span>
|
||||
</div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('closeOther')">
|
||||
<div
|
||||
class="context-menu-item"
|
||||
:class="{ 'is-disabled': !canCloseOther }"
|
||||
@click="canCloseOther && handleContextMenuCommand('closeOther')"
|
||||
>
|
||||
<el-icon><Switch /></el-icon>
|
||||
<span>关闭其他</span>
|
||||
</div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('closeLeft')">
|
||||
<div
|
||||
class="context-menu-item"
|
||||
:class="{ 'is-disabled': !canCloseLeft }"
|
||||
@click="canCloseLeft && handleContextMenuCommand('closeLeft')"
|
||||
>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
<span>关闭左侧</span>
|
||||
</div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('closeRight')">
|
||||
<div
|
||||
class="context-menu-item"
|
||||
:class="{ 'is-disabled': !canCloseRight }"
|
||||
@click="canCloseRight && handleContextMenuCommand('closeRight')"
|
||||
>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
<span>关闭右侧</span>
|
||||
</div>
|
||||
|
|
@ -111,11 +129,56 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTabsStore } from '@/stores/modules/tabs'
|
||||
import { useTabsStore, fixedTabs, isFixedTab } from '@/stores/modules/tabs'
|
||||
import type { TabItem } from '@/stores/modules/tabs'
|
||||
import draggable from 'vuedraggable'
|
||||
import { Close, Refresh, Switch, ArrowLeft, ArrowRight, FolderRemove, MoreFilled } from '@element-plus/icons-vue'
|
||||
|
||||
// 能否关闭当前(右键点击的不是固定标签页)
|
||||
const canCloseCurrent = computed(() => {
|
||||
const path = contextMenuPath.value || tabsStore.activeTab || ''
|
||||
return !isFixedTab(path)
|
||||
})
|
||||
|
||||
// 能否关闭其他(除了固定标签和右键点击的标签外还有其他标签)
|
||||
const canCloseOther = computed(() => {
|
||||
const path = contextMenuPath.value || tabsStore.activeTab || ''
|
||||
// 标签总数 - 固定标签数 - 右键点击的标签(如果是固定标签则不减)> 0
|
||||
const fixedCount = tabsStore.tabs.filter(t => isFixedTab(t.path)).length
|
||||
const otherCount = tabsStore.tabs.length - fixedCount - (isFixedTab(path) ? 0 : 1)
|
||||
return otherCount > 0
|
||||
})
|
||||
|
||||
// 能否关闭左侧(左侧有非固定标签页)
|
||||
const canCloseLeft = computed(() => {
|
||||
const path = contextMenuPath.value || tabsStore.activeTab || ''
|
||||
const rightClickIndex = tabsStore.tabs.findIndex(t => t.path === path)
|
||||
if (rightClickIndex <= 0) return false
|
||||
// 检查左侧是否有非固定标签
|
||||
for (let i = 0; i < rightClickIndex; i++) {
|
||||
const tab = tabsStore.tabs[i]
|
||||
if (tab && !isFixedTab(tab.path)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
// 能否关闭右侧(右侧有非固定标签页)
|
||||
const canCloseRight = computed(() => {
|
||||
const path = contextMenuPath.value || tabsStore.activeTab || ''
|
||||
const rightClickIndex = tabsStore.tabs.findIndex(t => t.path === path)
|
||||
if (rightClickIndex === -1 || rightClickIndex >= tabsStore.tabs.length - 1) return false
|
||||
// 检查右侧是否有非固定标签
|
||||
for (let i = rightClickIndex + 1; i < tabsStore.tabs.length; i++) {
|
||||
const tab = tabsStore.tabs[i]
|
||||
if (tab && !isFixedTab(tab.path)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const tabsStore = useTabsStore()
|
||||
|
|
@ -276,10 +339,55 @@ const closePageDropdown = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 拖拽开始时关闭右键菜单
|
||||
const handleDragStart = () => {
|
||||
closeContextMenu()
|
||||
}
|
||||
|
||||
// 检查拖拽移动是否允许(固定标签页不能被拖动到左侧)
|
||||
const checkDragMove = (evt: any) => {
|
||||
const draggedPath = evt.draggedContext.element.path
|
||||
// 固定标签页本身不能移动
|
||||
if (isFixedTab(draggedPath)) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 获取目标位置的索引
|
||||
const toIndex = evt.draggedContext.toIndex
|
||||
// 检查目标位置左侧是否有固定标签页
|
||||
for (let i = 0; i < toIndex; i++) {
|
||||
const tab = tabsStore.tabs[i]
|
||||
if (tab && isFixedTab(tab.path)) {
|
||||
// 如果目标位置左边有固定标签页,不允许移动到这里
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
// 拖拽结束
|
||||
const handleDragEnd = () => {
|
||||
// tabsStore.setTabs 已经通过 computed 自动调用
|
||||
// 确保固定标签页始终在最左边
|
||||
const fixedTabsList: TabItem[] = []
|
||||
const otherTabsList: TabItem[] = []
|
||||
|
||||
for (const tab of tabsStore.tabs) {
|
||||
if (isFixedTab(tab.path)) {
|
||||
fixedTabsList.push(tab)
|
||||
} else {
|
||||
otherTabsList.push(tab)
|
||||
}
|
||||
}
|
||||
|
||||
// 只有当固定标签页不在最前面时才需要重新排序
|
||||
const firstTab = tabsStore.tabs[0]
|
||||
if (firstTab && !isFixedTab(firstTab.path)) {
|
||||
tabsStore.setTabs([...fixedTabsList, ...otherTabsList])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 右键菜单命令处理
|
||||
const handleContextMenuCommand = (command: string) => {
|
||||
|
|
@ -293,9 +401,11 @@ const handleContextMenuCommand = (command: string) => {
|
|||
break
|
||||
case 'close':
|
||||
if (currentPath) {
|
||||
// 检查关闭后当前浏览的页面是否还存在
|
||||
const willCloseCurrentPage = currentPath === route.path
|
||||
handleTabRemove(currentPath)
|
||||
// 关闭后如果当前路由被关闭,跳转到新的激活页签
|
||||
if (currentPath === route.path && tabsStore.activeTab) {
|
||||
// 如果当前页面被关闭了,跳转到右键选中的页面
|
||||
if (willCloseCurrentPage && tabsStore.activeTab) {
|
||||
const newTab = tabsStore.tabs.find(item => item.path === tabsStore.activeTab)
|
||||
if (newTab) {
|
||||
router.push({ path: newTab.path, query: newTab.query })
|
||||
|
|
@ -305,26 +415,9 @@ const handleContextMenuCommand = (command: string) => {
|
|||
break
|
||||
case 'closeOther':
|
||||
if (currentPath) {
|
||||
// 检查关闭后当前浏览的页面是否还存在(关闭其他时只有右键点击的页面保留)
|
||||
const willCloseCurrentPage = route.path !== currentPath
|
||||
tabsStore.closeOtherTabs(currentPath)
|
||||
// 关闭其他后如果当前路由被关闭,跳转到右键选中的页面
|
||||
if (currentPath !== tabsStore.activeTab && tabsStore.activeTab) {
|
||||
const newTab = tabsStore.tabs.find(item => item.path === tabsStore.activeTab)
|
||||
if (newTab) {
|
||||
router.push({ path: newTab.path, query: newTab.query })
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'closeLeft':
|
||||
if (currentPath) {
|
||||
// 关闭左侧前,检查当前页面是否会被关闭(即当前页面是否在关闭范围内)
|
||||
const currentIndex = tabsStore.tabs.findIndex(item => item.path === route.path)
|
||||
const rightClickIndex = tabsStore.tabs.findIndex(item => item.path === currentPath)
|
||||
// 如果当前页面索引大于右键点击的索引,说明当前页面会被关闭
|
||||
const willCloseCurrentPage = currentIndex > rightClickIndex
|
||||
|
||||
tabsStore.closeLeftTabs(currentPath)
|
||||
|
||||
// 如果当前页面被关闭了,跳转到右键选中的页面
|
||||
if (willCloseCurrentPage) {
|
||||
const targetTab = tabsStore.tabs.find(item => item.path === currentPath)
|
||||
|
|
@ -334,18 +427,37 @@ const handleContextMenuCommand = (command: string) => {
|
|||
}
|
||||
}
|
||||
break
|
||||
case 'closeLeft':
|
||||
if (currentPath) {
|
||||
// 获取要关闭的标签列表(左侧所有标签,排除固定标签页)
|
||||
const rightClickIndex = tabsStore.tabs.findIndex(item => item.path === currentPath)
|
||||
const tabsToClose = tabsStore.tabs.slice(0, rightClickIndex).filter(item => item.path !== '/dashboard')
|
||||
// 检查当前页面是否在要关闭的列表中
|
||||
const currentTab = tabsToClose.find(item => item.path === route.path)
|
||||
|
||||
tabsStore.closeLeftTabs(currentPath)
|
||||
|
||||
// 如果当前页面在要关闭的列表中,跳转到右键选中的页面
|
||||
if (currentTab) {
|
||||
const targetTab = tabsStore.tabs.find(item => item.path === currentPath)
|
||||
if (targetTab) {
|
||||
router.push({ path: targetTab.path, query: targetTab.query })
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'closeRight':
|
||||
if (currentPath) {
|
||||
// 关闭右侧前,检查当前页面是否会被关闭(即当前页面是否在关闭范围内)
|
||||
const currentIndex = tabsStore.tabs.findIndex(item => item.path === route.path)
|
||||
// 获取要关闭的标签列表(右侧所有标签,排除固定标签页)
|
||||
const rightClickIndex = tabsStore.tabs.findIndex(item => item.path === currentPath)
|
||||
// 如果当前页面索引小于右键点击的索引,说明当前页面会被关闭
|
||||
const willCloseCurrentPage = currentIndex < rightClickIndex
|
||||
|
||||
const tabsToClose = tabsStore.tabs.slice(rightClickIndex + 1).filter(item => item.path !== '/dashboard')
|
||||
// 检查当前页面是否在要关闭的列表中
|
||||
const currentTab = tabsToClose.find(item => item.path === route.path)
|
||||
|
||||
tabsStore.closeRightTabs(currentPath)
|
||||
|
||||
// 如果当前页面被关闭了,跳转到右键选中的页面
|
||||
if (willCloseCurrentPage) {
|
||||
|
||||
// 如果当前页面在要关闭的列表中,跳转到右键选中的页面
|
||||
if (currentTab) {
|
||||
const targetTab = tabsStore.tabs.find(item => item.path === currentPath)
|
||||
if (targetTab) {
|
||||
router.push({ path: targetTab.path, query: targetTab.query })
|
||||
|
|
@ -408,7 +520,7 @@ const closeContextMenu = () => {
|
|||
height: 42px;
|
||||
box-sizing: content-box;
|
||||
background: var(--el-bg-color);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
// border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
|
@ -480,7 +592,7 @@ const closeContextMenu = () => {
|
|||
padding: 0 12px;
|
||||
background: var(--el-fill-color-light);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-bottom: none;
|
||||
// border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 13px;
|
||||
|
|
@ -616,11 +728,17 @@ const closeContextMenu = () => {
|
|||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
&:hover:not(.is-disabled) {
|
||||
background: var(--el-fill-color-light);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--el-text-color-placeholder);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -638,7 +756,7 @@ const closeContextMenu = () => {
|
|||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
// border-bottom: 1px solid var(--el-border-color-light);
|
||||
background: var(--el-fill-color-lighter);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@ import { defineStore } from 'pinia'
|
|||
import { getStorage, setStorage, removeStorage } from '@/utils/storage'
|
||||
import { useUserStore } from './user'
|
||||
|
||||
// 固定标签页列表
|
||||
export const fixedTabs = ['/dashboard']
|
||||
|
||||
// 检查是否是固定标签页
|
||||
export const isFixedTab = (path: string) => fixedTabs.includes(path)
|
||||
|
||||
export interface BreadcrumbItem {
|
||||
title: string
|
||||
path: string
|
||||
|
|
@ -154,41 +160,77 @@ export const useTabsStore = defineStore('tabs', () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 关闭其他页签
|
||||
// 关闭其他页签(保留固定标签页和当前标签)
|
||||
const closeOtherTabs = (path: string) => {
|
||||
const currentTab = tabs.value.find(item => item.path === path)
|
||||
if (currentTab) {
|
||||
tabs.value = [currentTab]
|
||||
// 获取所有固定标签页
|
||||
const fixedTabItems = tabs.value.filter(item => isFixedTab(item.path))
|
||||
// 合并固定标签页和当前标签(去重)
|
||||
const newTabs = [...fixedTabItems]
|
||||
if (!isFixedTab(path)) {
|
||||
newTabs.push(currentTab)
|
||||
}
|
||||
tabs.value = newTabs
|
||||
activeTab.value = path
|
||||
saveTabs()
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭所有页签
|
||||
// 关闭所有页签(只保留固定标签页)
|
||||
const closeAllTabs = () => {
|
||||
// 保留首页
|
||||
tabs.value = [{
|
||||
title: '首页',
|
||||
path: '/dashboard'
|
||||
}]
|
||||
// 保留所有固定标签页
|
||||
const fixedTabItems = tabs.value.filter(item => isFixedTab(item.path))
|
||||
// 如果没有固定标签页,添加首页
|
||||
if (fixedTabItems.length === 0) {
|
||||
fixedTabItems.push({
|
||||
title: '首页',
|
||||
path: '/dashboard'
|
||||
})
|
||||
}
|
||||
tabs.value = fixedTabItems
|
||||
activeTab.value = '/dashboard'
|
||||
saveTabs()
|
||||
}
|
||||
|
||||
// 关闭左侧页签
|
||||
// 关闭左侧页签(保留所有固定标签页)
|
||||
const closeLeftTabs = (path: string) => {
|
||||
const index = tabs.value.findIndex(item => item.path === path)
|
||||
if (index > 0) {
|
||||
tabs.value = tabs.value.slice(index)
|
||||
// 收集要保留的标签:所有固定标签页 + 从右键点击位置开始的标签
|
||||
const tabsToKeep: TabItem[] = []
|
||||
|
||||
for (let i = 0; i < tabs.value.length; i++) {
|
||||
const tab = tabs.value[i]
|
||||
if (!tab) continue
|
||||
if (isFixedTab(tab.path) || i >= index) {
|
||||
// 固定标签页或位于/右侧的标签保留
|
||||
tabsToKeep.push(tab)
|
||||
}
|
||||
}
|
||||
|
||||
tabs.value = tabsToKeep
|
||||
saveTabs()
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭右侧页签
|
||||
// 关闭右侧页签(保留所有固定标签页)
|
||||
const closeRightTabs = (path: string) => {
|
||||
const index = tabs.value.findIndex(item => item.path === path)
|
||||
if (index !== -1 && index < tabs.value.length - 1) {
|
||||
tabs.value = tabs.value.slice(0, index + 1)
|
||||
if (index !== -1) {
|
||||
// 收集要保留的标签:所有固定标签页 + 从右键点击位置开始的标签
|
||||
const tabsToKeep: TabItem[] = []
|
||||
|
||||
for (let i = 0; i < tabs.value.length; i++) {
|
||||
const tab = tabs.value[i]
|
||||
if (!tab) continue
|
||||
if (isFixedTab(tab.path) || i <= index) {
|
||||
// 固定标签页或位于左侧的标签保留
|
||||
tabsToKeep.push(tab)
|
||||
}
|
||||
}
|
||||
|
||||
tabs.value = tabsToKeep
|
||||
saveTabs()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="table_form-container">
|
||||
<!-- 搜索 -->
|
||||
<CustomerListSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
|
||||
@reset="handleReset"></CustomerListSearch>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="table_form-container">
|
||||
<!-- 搜索 -->
|
||||
<FundDetailSearch
|
||||
:search-form="searchForm"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="deposit-channel">
|
||||
<div class="deposit-channel table_form-container">
|
||||
<div class="bar">
|
||||
<el-button type="primary" @click="handleAdd" v-auth="'channel_createChannel'">添加</el-button>
|
||||
<el-button type="primary" @click="handleEdit" v-auth="'channel_editChannel'">编辑</el-button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="rechange-check">
|
||||
<div class="rechange-check table_form-container">
|
||||
<!-- 搜索区域:默认把当天 0 点到当前时间写入时间输入框 -->
|
||||
<RechangeSearch
|
||||
:search-form="searchForm"
|
||||
|
|
@ -257,13 +257,7 @@ const handlePaginationChange = (page: { currentPage: number; pageSize: number })
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.rechange-check {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
padding-bottom: 70px;
|
||||
box-sizing: border-box;
|
||||
.rechange-check {
|
||||
|
||||
// 覆盖公共搜索组件默认的弹性拉伸,让当前页搜索项宽度按配置展示。
|
||||
:deep(.search-container .el-form) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="transfer">
|
||||
<div class="transfer table_form-container">
|
||||
<div class="title">转账</div>
|
||||
<el-card class="transfer-card">
|
||||
<div class="transfer-item">
|
||||
|
|
@ -451,6 +451,8 @@ const handleSubmit = async () => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.transfer {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="withdraw-page">
|
||||
<div class="withdraw-page table_form-container">
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:table-data="tableData"
|
||||
|
|
@ -114,7 +114,6 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.withdraw-page {
|
||||
padding: 20px;
|
||||
.withdraw-page {
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="withdraw-channel">
|
||||
<div class="withdraw-channel table_form-container">
|
||||
<div class="bar">
|
||||
<el-button type="primary" @click="handleAdd" v-auth="'channel_createChannel'">添加</el-button>
|
||||
<el-button type="primary" @click="handleEdit" v-auth="'channel_editChannel'">编辑</el-button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="withdraw-check">
|
||||
<div class="withdraw-check table_form-container">
|
||||
<!-- 搜索区域:复用项目内搜索组件 -->
|
||||
<WithdrawSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch" @reset="handleReset">
|
||||
<template #button>
|
||||
|
|
@ -315,10 +315,7 @@ const handlePaginationChange = (page: { currentPage: number; pageSize: number })
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.withdraw-check {
|
||||
height: 100%;
|
||||
padding-bottom: 70px;
|
||||
box-sizing: border-box;
|
||||
.withdraw-check {
|
||||
|
||||
// 覆盖公共搜索组件默认的弹性拉伸,让当前页搜索项宽度按配置展示
|
||||
:deep(.search-container .el-form) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mould-fee">
|
||||
<div class="mould-fee table_form-container">
|
||||
<header>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" @click="addFee" v-auth="'feeHandl_createFeeSetting'"
|
||||
|
|
@ -234,8 +234,8 @@ onMounted(() => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.mould-fee {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 8px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="table_form-container">
|
||||
<!-- 搜索 -->
|
||||
<CustomerTradeOrderSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
|
||||
@reset="handleReset" @blur-input="getSubAccountList">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="position-stat">
|
||||
<div class="position-stat table_form-container">
|
||||
<!-- 搜索 -->
|
||||
<PositionStatSearch
|
||||
:search-form="searchForm"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="order-rechange-page">
|
||||
<div class="order-rechange-page table_form-container">
|
||||
<!-- 搜索区域:按接口参数保留订单号、用户名称、状态、开始/结束时间 -->
|
||||
<OrderRechangeSearch
|
||||
:search-form="searchForm"
|
||||
|
|
@ -194,7 +194,7 @@ const handleAudit = async (row: RechangeOrderItem, status: number) => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.order-rechange-page {
|
||||
min-height: 100%;
|
||||
// min-height: 100%;
|
||||
|
||||
// 覆盖公共搜索组件的拉伸行为,让输入框尺寸更接近设计图。
|
||||
:deep(.search-container .el-form) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="table_form-container">
|
||||
<!-- 搜索 -->
|
||||
<TransferSearch
|
||||
:search-form="searchForm"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="order-withdraw-page">
|
||||
<div class="order-withdraw-page table_form-container">
|
||||
<!-- 搜索区域:按设计图保留订单号、开始时间、结束时间,并补一个导出按钮 -->
|
||||
<OrderWithdrawSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
|
||||
@reset="handleReset">
|
||||
|
|
@ -153,7 +153,7 @@ const handlePaginationChange = (page: { currentPage: number; pageSize: number })
|
|||
|
||||
<style scoped lang="scss">
|
||||
.order-withdraw-page {
|
||||
min-height: 100%;
|
||||
// min-height: 100%;
|
||||
|
||||
// 覆盖公共搜索组件的拉伸行为,让控件尺寸更接近设计图。
|
||||
:deep(.search-container .el-form) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="table_form-container">
|
||||
<!-- 搜索 -->
|
||||
<CustomerListSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
|
||||
@reset="handleReset"></CustomerListSearch>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="archives">
|
||||
<div class="archives table_form-container">
|
||||
<div class="bar">
|
||||
<h4>档案管理</h4>
|
||||
<span :class="['status', isActive === true ? 'active' : '']">{{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="personal-center">
|
||||
<div class="personal-center table_form-container">
|
||||
<div class="page-header">
|
||||
<h2>{{ t('personalCenter.pageTitle') }}</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="client">
|
||||
<div class="client table_form-container">
|
||||
<!-- 搜索组件 -->
|
||||
<ClientSearch
|
||||
:search-form="clientSearchForm"
|
||||
|
|
@ -522,10 +522,7 @@ const handleAdjustAmountClose = () => {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.client{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.client{
|
||||
}
|
||||
:deep(.el-form-item__content) {
|
||||
margin-left: 0 !important;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="table_form-container">
|
||||
<!-- 搜索 -->
|
||||
<NoticeSearch
|
||||
:search-form="searchForm"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="trade-software">
|
||||
<div class="trade-software table_form-container">
|
||||
<el-card>
|
||||
<div class="left">
|
||||
<el-icon>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="trade-group">
|
||||
<div class="trade-group table_form-container">
|
||||
<el-form-item label="交易节假日时间设置">
|
||||
<el-button
|
||||
style="margin-left: 18px"
|
||||
|
|
@ -220,6 +220,9 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.trade-group {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
/* 给 table 及所有 td 加边框 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="trade-group">
|
||||
<div class="trade-group table_form-container">
|
||||
<el-form-item label="交易组时间设置">
|
||||
<el-button type="primary" @click="addTableItem" v-auth="'contractVariety_createGroup'"
|
||||
>添加</el-button
|
||||
|
|
@ -295,6 +295,9 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.trade-group {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
/* 给 table 及所有 td 加边框 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
|
|
|||
Loading…
Reference in New Issue