Skip to content

M
mini-wms
Commit cfe4cc3c by yubin
Options

Merge remote-tracking branch 'origin/master'

parents 78ecde54 d58b4b1e
正在显示 包含 76 行增加 和 35 行删除
ruoyi-admin-vue/src/components/Search/PageWrapperSearch.vue
......@@ -23,15 +23,15 @@ export default {
},
sm: {
type: Number,
default: 24
default: 12
},
md: {
type: Number,
default: 12
default: 8
},
lg: {
type: Number,
default: 8
default: 6
},
xl: {
type: Number,
......@@ -45,21 +45,20 @@ export default {
ElFormRef: null,
max: 0,
isAdvanced: true,
isFold: true, // 默认折叠状态
isFold: true,
labelWidthValue: '',
inputEvents: [],
screenWidth: 1920
screenWidth: 1920,
visibleFormItemsCount: 0 // 新增：跟踪可见表单项数量
}
},
computed: {
gutter() {
return (24 / this.max % 24) || 0
},
// 计算每行最多能显示的列数
maxItemsPerRow() {
return Math.floor(24 / this.currentColWidth)
},
// 获取当前屏幕尺寸对应的列宽
currentColWidth() {
if (this.screenWidth >= XL) return this.xl
if (this.screenWidth >= LG) return this.lg
......@@ -67,18 +66,47 @@ export default {
if (this.screenWidth >= SM) return this.sm
return this.xs
},
// 是否显示折叠按钮
shouldShowFoldButton() {
const formItems = this.extractFormItems(this.$slots.default || [])
return formItems.length > this.maxItemsPerRow - 1
},
// 折叠状态下每行最多显示的表单项数量（包括按钮列）
maxVisibleItemsWhenFold() {
return Math.max(1, this.maxItemsPerRow - 1) // 减去按钮列
return Math.max(1, this.maxItemsPerRow - 1)
},
// 修改：计算按钮列应该占用的实际列宽
buttonColWidth() {
if (this.shouldWrapButtons) {
return 24 // 按钮在单独一行时占满整行
}
// 计算剩余空间，使按钮右对齐
const visibleCount = this.visibleFormItemsCount
const itemsInRow = this.maxItemsPerRow
// 如果没有可见的表单项，按钮占整行
if (visibleCount === 0) return 24
// 计算当前行已有的列数
const occupiedCols = visibleCount * this.currentColWidth
const remainingCols = 24 - occupiedCols
// 如果剩余空间足够放下按钮列，使用剩余空间
if (remainingCols >= this.currentColWidth) {
return remainingCols
} else {
// 如果剩余空间不够，按钮换行并右对齐
return 24
}
},
// 是否需要将按钮放在单独一行
// 修改：是否需要换行显示按钮
shouldWrapButtons() {
return !this.isFold && this.shouldShowFoldButton
if (!this.isFold) {
// 展开状态下，如果可见表单项数量大于等于每行最大数量，按钮换行
return this.visibleFormItemsCount >= this.maxItemsPerRow
}
// 折叠状态下，如果有需要隐藏的表单项，按钮和表单项在同一行
return false
}
},
mounted() {
......@@ -92,6 +120,7 @@ export default {
this.observer.observe(this.ElFormRef.$el)
}
this.initSize()
this.updateVisibleCount()
window.addEventListener('resize', this.handleResize)
},
......@@ -104,15 +133,16 @@ export default {
}
window.removeEventListener('resize', this.handleResize)
},
updated() {
this.updateVisibleCount()
},
methods: {
// resetFields() {
// if (this.ElFormRef && typeof this.ElFormRef.resetFields === 'function') {
// this.ElFormRef.resetFields()
// }
// },
handleResize() {
this.screenWidth = document.documentElement.clientWidth
this.initSize()
this.$nextTick(() => {
this.updateVisibleCount()
})
},
initSize() {
this.max = 24 / this.currentColWidth
......@@ -134,13 +164,19 @@ export default {
this.isFold = !this.isFold
this.labelWidthValue = ''
this.resetLabelWidth()
this.$nextTick(() => {
this.updateVisibleCount()
})
},
// 判断是否应该隐藏表单项
shouldHideItem(index) {
if (!this.isFold) return false
return index >= this.maxVisibleItemsWhenFold
},
// 更可靠的 el-form-item 检测方法
// 新增：更新可见表单项数量
updateVisibleCount() {
const formItems = this.extractFormItems(this.$slots.default || [])
this.visibleFormItemsCount = formItems.filter((item, index) => !this.shouldHideItem(index)).length
},
isFormItemNode(node) {
if (!node) return false
......@@ -163,7 +199,6 @@ export default {
return false
},
// 递归查找所有表单项
extractFormItems(nodes, result = []) {
if (!nodes || !Array.isArray(nodes)) return result
......@@ -183,11 +218,12 @@ export default {
}
},
render() {
// 提取所有 el-form-item
const defaultSlots = this.$slots.default || []
const formItems = this.extractFormItems(defaultSlots)
// 渲染表单项
// 更新可见数量
this.visibleFormItemsCount = formItems.filter((item, index) => !this.shouldHideItem(index)).length
const formItemCols = formItems.map((item, index) => {
const isHidden = this.shouldHideItem(index)
......@@ -195,7 +231,7 @@ export default {
<el-col
class={{ 'hidden': isHidden }}
key={`formitem-${index}`}
xs={24}
xs={this.xs}
sm={this.sm}
md={this.md}
lg={this.lg}
......@@ -206,7 +242,6 @@ export default {
)
})
// 渲染按钮
const buttons = (
<div class="buttons-space">
<el-button
......@@ -237,21 +272,23 @@ export default {
</div>
)
// 按钮列
const buttonsCol = (
<el-col
class="ElColButtons"
xs={24}
sm={this.sm}
md={this.md}
lg={this.lg}
xl={this.xl}
sm={this.buttonColWidth}
md={this.buttonColWidth}
lg={this.buttonColWidth}
xl={this.buttonColWidth}
style={this.shouldWrapButtons ? 'margin-top: 18px;' : ''}
>
{this.$slots.buttons ? this.$slots.buttons : buttons}
</el-col>
)
// 计算按钮对齐方式
const buttonJustify = this.shouldWrapButtons ? 'flex-end' : 'flex-end'
return (
<el-form
{...{ attrs: this.$attrs }}
......@@ -260,16 +297,15 @@ export default {
ref="ElFormRef"
class="page-wrapper-search"
>
{/* 第一行：表单项 */}
{/* 第一行：表单项和按钮（非换行情况） */}
<el-row gutter={this.gutter}>
{formItemCols}
{/* 折叠状态：按钮列与表单项在同一行 */}
{!this.shouldWrapButtons && buttonsCol}
</el-row>
{/* 展开状态：按钮列在第二行 */}
{/* 第二行：换行的按钮 */}
{this.shouldWrapButtons && (
<el-row gutter={this.gutter} style="margin-top: 0;display: flex;justify-content: flex-end;">
<el-row gutter={this.gutter} style={`margin-top: 18px; display: flex; justify-content: ${buttonJustify};`}>
{buttonsCol}
</el-row>
)}
......@@ -284,7 +320,6 @@ export default {
position: relative;
background: white;
padding: 16px;
}
:deep(.el-form-item) {
......@@ -303,7 +338,7 @@ export default {
.el-input,
.el-select,
.el-date-editor {
width: 100%;
width: 50%;
.el-input__inner {
border-radius: 4px;
......@@ -385,6 +420,12 @@ export default {
justify-content: flex-end;
align-items: center;
height: 40px;
// 确保按钮内容右对齐
.buttons-space {
justify-content: flex-end;
width: 100%;
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论