admin/zhyc-sheep-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

奶品管理销售管理固定表头

Browse Source
This commit is contained in:
ll
2026-03-05 11:29:31 +08:00
parent 2abd257ba4
commit 8a331158e5
11 changed files with 836 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/dairyProducts/dryMatterCorrection/index.vue
View File

@@ -69,11 +69,13 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<div class="table-wrapper">
<el-table
v-loading="loading"
:data="dryMatterCorrectionList"
@selection-change="handleSelectionChange"
style="width: 100%">
style="width: 100%"
height="100%">
<el-table-column type="selection" align="center" />
<el-table-column label="年月" align="center" prop="datetime" sortable>
<template #default="scope">
@@ -99,6 +101,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
@@ -373,4 +376,31 @@ getList()
.el-form-item {
margin-bottom: 15px;
}
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

32
src/views/dairyProducts/freshMilkTest/freshMilkTest/index.vue
View File

@@ -75,7 +75,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="freshMilkTestList" @selection-change="handleSelectionChange">
<div class="table-wrapper">
<el-table v-loading="loading" :data="freshMilkTestList" @selection-change="handleSelectionChange" height="100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="来源"
@@ -195,6 +196,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
@@ -642,4 +644,32 @@ onMounted(() => {
.el-dialog__body {
padding: 15px 20px;
}
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

32
src/views/dairyProducts/milkInOutStore/milkInOutStore/index.vue
View File

@@ -49,7 +49,8 @@
</template>
</el-dialog>
<el-table :data="rows" border style="margin-top:16px" v-loading="loading">
<div class="table-wrapper">
<el-table :data="rows" border style="margin-top:16px" v-loading="loading" height="100%">
<el-table-column prop="datetime" label="日期" width="120" sortable fixed="left">
<template #default="{ row }">
{{ row.datetime ? row.datetime.substring(0, 10) : '' }}
@@ -79,6 +80,7 @@
<el-table-column prop="returnFresh" label="爱特退回鲜奶" sortable width="140" />
<el-table-column prop="returnYogurt" label="爱特退回酸奶" sortable width="140" />
</el-table>
</div>
<pagination
v-show="total>0"
@@ -221,4 +223,32 @@ onMounted(() => {
.mb-4 {
margin-bottom: 16px;
}
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

32
src/views/dairyProducts/milkProdclasses/milkProdclasses/index.vue
View File

@@ -93,7 +93,8 @@
</el-col>
</el-row>
<el-table :data="tableData" v-loading="loading">
<div class="table-wrapper">
<el-table :data="tableData" v-loading="loading" height="100%">
<el-table-column prop="datetime" label="日期" width="110" sortable>
<template #default="{ row }">
{{ parseTime(row.datetime, '{y}-{m}-{d}') }}
@@ -116,6 +117,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination v-show="total>0" :total="total"
v-model:page="queryParams.pageNum"
@@ -315,4 +317,32 @@ getList();
background-color: #f5f7fa;
border-radius: 4px;
}
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

33
src/views/dairyProducts/parityCorrection/index.vue
View File

@@ -48,7 +48,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="parityCorrectionList" @selection-change="handleSelectionChange">
<div class="table-wrapper">
<el-table v-loading="loading" :data="parityCorrectionList" @selection-change="handleSelectionChange" height="100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="胎次" align="center" prop="parity" sortable />
@@ -61,6 +62,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
@@ -215,3 +217,32 @@ function handleDelete(row) {
getList()
</script>
<style scoped>
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

33
src/views/dairyProducts/rawMilkTest/rawMilkTest/index.vue
View File

@@ -75,7 +75,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="rawMilkTestList" @selection-change="handleSelectionChange">
<div class="table-wrapper">
<el-table v-loading="loading" :data="rawMilkTestList" @selection-change="handleSelectionChange" height="100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="检测日期" align="center" prop="datetime" width="180" v-if="visibleColumns.datetime" sortable>
<template #default="scope">
@@ -116,6 +117,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
@@ -521,3 +523,32 @@ onMounted(() => {
getList()
})
</script>
<style scoped>
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

31
src/views/dairyProducts/sheepMilkAnalysis/index.vue
View File

@@ -67,7 +67,8 @@
<el-button type="success" icon="Download" @click="handleExport">导出</el-button>
</div>
<el-table :data="list" border style="width: 100%" v-loading="loading" :row-key="row => row.sheepId">
<div class="table-wrapper">
<el-table :data="list" border style="width: 100%" v-loading="loading" :row-key="row => row.sheepId" height="100%">
<el-table-column
v-for="col in visibleColumns"
:key="col.prop"
@@ -78,6 +79,7 @@
:formatter="col.formatter || undefined"
/>
</el-table>
</div>
<el-pagination
v-show="total > 0"
@@ -288,4 +290,31 @@ export default {
background-color: #f5f7fa;
border-radius: 4px;
}
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

32
src/views/dairyProducts/weightCorrection/index.vue
View File

@@ -69,7 +69,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="weightCorrectionList" @selection-change="handleSelectionChange">
<div class="table-wrapper">
<el-table v-loading="loading" :data="weightCorrectionList" @selection-change="handleSelectionChange" height="100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="日期" align="center" prop="datetime" width="180" sortable>
<template #default="scope">
@@ -95,6 +96,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
@@ -324,4 +326,32 @@ getList()
.el-form-item {
margin-bottom: 15px;
}
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

31
src/views/dairyProducts/yogurtTest/yogurtTest/index.vue
View File

@@ -75,7 +75,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="yogurtTestList" @selection-change="handleSelectionChange">
<div class="table-wrapper">
<el-table v-loading="loading" :data="yogurtTestList" @selection-change="handleSelectionChange" height="100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="来源"
@@ -195,6 +196,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
@@ -644,4 +646,31 @@ onMounted(() => {
.el-dialog__body {
padding: 15px 20px;
}
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

33
src/views/sale/customer/index.vue
View File

@@ -70,7 +70,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
<div class="table-wrapper">
<el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" @sort-change="handleSortChange" height="100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="客户名称" align="center" prop="name" />
<el-table-column label="客户电话" align="center" prop="phone" sortable="custom" />
@@ -100,6 +101,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
@@ -346,3 +348,32 @@ function handleExport() {
}, `customer_${new Date().getTime()}.xlsx`)
}
</script>
<style scoped>
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>

31
src/views/sale/saleRecord/saleRecord/index.vue
View File

@@ -180,7 +180,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
</el-row>
<el-table v-loading="loading" :data="saleRecordList" @selection-change="handleSelectionChange" style="width: 100%">
<div class="table-wrapper">
<el-table v-loading="loading" :data="saleRecordList" @selection-change="handleSelectionChange" style="width: 100%" height="100%">
<el-table-column type="selection" width="55" align="center" fixed="left"/>
<el-table-column label="耳号" align="center" prop="bsManageTags" width="120" fixed="left" show-overflow-tooltip />
<el-table-column label="品种" align="center" prop="variety" width="100" show-overflow-tooltip />
@@ -237,6 +238,7 @@
</template>
</el-table-column>
</el-table>
</div>
<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
@@ -815,4 +817,31 @@ function diseaseTypeFormat(row) {
background-color: #f5f7fa;
border-radius: 4px;
}
/* 1. 将整个页面容器变为弹性布局，并固定总高度 */
.app-container {
/* calc(100vh - 84px) 中的 84px 是顶部导航栏和标签栏的大致高度，
如果你的系统顶部更高或更低，可以适当调整这个数值(例如 100px 或 120px) */
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 2. 让搜索表单、操作按钮、应用筛选提示、分页组件 不被挤压变形 */
.el-form,
.mb8,
.applied-filters,
.pagination-container {
flex-shrink: 0;
}
/* 3. 让刚刚新增的表格包裹层自动撑满中间的所有剩余空间 */
.table-wrapper {
flex: 1; /* 占据所有剩余空间 */
min-height: 0; /* 🌟 关键：防止 flex 子项高度无限撑开导致页面出现滚动条 */
overflow: hidden;
display: flex;
flex-direction: column;
}
</style>