1
This commit is contained in:
@@ -39,13 +39,16 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 搜索区域 - 固定在顶部 */
|
/* 搜索区域 - 固定在顶部;限制高度避免矮窗口下占满视口、表格不可见 */
|
||||||
.search-section {
|
.search-section {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-bottom: 1px solid #e4e7ed;
|
border-bottom: 1px solid #e4e7ed;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
max-height: min(520px, calc(100vh - 84px - 200px));
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表格区域 - 可滚动 */
|
/* 表格区域 - 可滚动 */
|
||||||
@@ -71,6 +74,25 @@ export default {
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-section::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-section::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-section::-webkit-scrollbar-thumb {
|
||||||
|
background: #c0c0c0;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-section::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #a8a8a8;
|
||||||
|
}
|
||||||
|
|
||||||
/* 表格区域滚动条样式 */
|
/* 表格区域滚动条样式 */
|
||||||
.table-section::-webkit-scrollbar {
|
.table-section::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
@@ -106,6 +128,14 @@ export default {
|
|||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 窗口高度较矮时:为表格多留垂直空间、收紧搜索区内边距 */
|
||||||
|
@media (max-height: 720px) {
|
||||||
|
.list-layout .search-section {
|
||||||
|
padding: 12px 16px;
|
||||||
|
max-height: min(420px, calc(100vh - 84px - 160px));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.list-layout {
|
.list-layout {
|
||||||
|
|||||||
@@ -63,7 +63,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="jd-filter-group jd-filter-group--status">
|
<div v-if="isDesktopFilterCompact" class="jd-filter-compact-toggle">
|
||||||
|
<el-button type="text" size="small" class="jd-filter-compact-toggle__btn" @click="showFollowUpFilters = !showFollowUpFilters">
|
||||||
|
<i :class="showFollowUpFilters ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
|
||||||
|
{{ showFollowUpFilters ? '收起跟进状态' : '展开跟进状态筛选' }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-show="!isDesktopFilterCompact || showFollowUpFilters"
|
||||||
|
class="jd-filter-group jd-filter-group--status"
|
||||||
|
>
|
||||||
<div class="jd-filter-group-head">
|
<div class="jd-filter-group-head">
|
||||||
<span class="jd-filter-group-title">跟进状态</span>
|
<span class="jd-filter-group-title">跟进状态</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -1198,11 +1208,19 @@ export default {
|
|||||||
// 列表加载后自动同步利润(防快速翻页乱序)
|
// 列表加载后自动同步利润(防快速翻页乱序)
|
||||||
syncAutoProfitSeq: 0,
|
syncAutoProfitSeq: 0,
|
||||||
/** 移动端卡片:当前展开的订单 id(null 表示全部收起,同时只展开一条) */
|
/** 移动端卡片:当前展开的订单 id(null 表示全部收起,同时只展开一条) */
|
||||||
mobileExpandedOrderId: null
|
mobileExpandedOrderId: null,
|
||||||
|
/** 视口高度(桌面端用于矮窗口下自动收起「跟进状态」筛选) */
|
||||||
|
viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 900,
|
||||||
|
/** 矮窗口下是否展开「跟进状态」分组(默认依视口在 mounted/resize 中更新) */
|
||||||
|
showFollowUpFilters: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['device']),
|
...mapGetters(['device']),
|
||||||
|
/** 桌面端且窗口高度较低:压缩筛选区,避免列表被挤出视口 */
|
||||||
|
isDesktopFilterCompact() {
|
||||||
|
return !this.isMobile && this.viewportHeight < 780
|
||||||
|
},
|
||||||
isMobile() {
|
isMobile() {
|
||||||
// 只在移动端返回true,桌面端严格返回false
|
// 只在移动端返回true,桌面端严格返回false
|
||||||
if (this.device === 'mobile') {
|
if (this.device === 'mobile') {
|
||||||
@@ -1270,13 +1288,37 @@ export default {
|
|||||||
}
|
}
|
||||||
window.addEventListener('message', this.handleOAuthMessage)
|
window.addEventListener('message', this.handleOAuthMessage)
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.viewportHeight = window.innerHeight
|
||||||
|
if (!this.isMobile && this.viewportHeight < 780) {
|
||||||
|
this.showFollowUpFilters = false
|
||||||
|
}
|
||||||
|
this._onJdFilterViewportResize = () => this.onJdFilterViewportResize()
|
||||||
|
window.addEventListener('resize', this._onJdFilterViewportResize, { passive: true })
|
||||||
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
// 移除消息监听器
|
// 移除消息监听器
|
||||||
if (this.handleOAuthMessage) {
|
if (this.handleOAuthMessage) {
|
||||||
window.removeEventListener('message', this.handleOAuthMessage)
|
window.removeEventListener('message', this.handleOAuthMessage)
|
||||||
}
|
}
|
||||||
|
if (this._onJdFilterViewportResize) {
|
||||||
|
window.removeEventListener('resize', this._onJdFilterViewportResize)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onJdFilterViewportResize() {
|
||||||
|
const prev = this.viewportHeight
|
||||||
|
const h = window.innerHeight
|
||||||
|
this.viewportHeight = h
|
||||||
|
if (this.isMobile) return
|
||||||
|
const nowCompact = h < 780
|
||||||
|
const wasCompact = prev < 780
|
||||||
|
if (nowCompact && !wasCompact) {
|
||||||
|
this.showFollowUpFilters = false
|
||||||
|
} else if (!nowCompact && wasCompact) {
|
||||||
|
this.showFollowUpFilters = true
|
||||||
|
}
|
||||||
|
},
|
||||||
/** 凡系分销标识:历史 F 与 F-中文(如 F-王杰)等同 */
|
/** 凡系分销标识:历史 F 与 F-中文(如 F-王杰)等同 */
|
||||||
isFanDistributionMark(mark) {
|
isFanDistributionMark(mark) {
|
||||||
if (mark == null || mark === '') return false
|
if (mark == null || mark === '') return false
|
||||||
@@ -2989,6 +3031,20 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
}
|
}
|
||||||
|
.jd-filter-compact-toggle {
|
||||||
|
width: 100%;
|
||||||
|
margin: 4px 0 2px;
|
||||||
|
padding: 0 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.jd-filter-compact-toggle__btn {
|
||||||
|
padding: 4px 0;
|
||||||
|
color: var(--jd-accent);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.jd-filter-compact-toggle__btn i {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
.jd-order-filter-form ::v-deep .el-form-item {
|
.jd-order-filter-form ::v-deep .el-form-item {
|
||||||
margin-right: 14px;
|
margin-right: 14px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
|||||||
Reference in New Issue
Block a user