Merge remote-tracking branch 'origin/main'
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -1271,16 +1271,31 @@ function handleDelete(row) {
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 8. 修改 handleExport 函数,导出时也包含自定义筛选条件
|
||||
// 8. 修复:精确读取表格实际显示的列进行导出
|
||||
function handleExport() {
|
||||
const exportParams = { ...queryParams.value }
|
||||
|
||||
// 如果有自定义筛选条件,合并到导出参数中
|
||||
// 1. 处理勾选的行
|
||||
if (ids.value.length > 0) {
|
||||
exportParams.exportIds = ids.value.join(',')
|
||||
}
|
||||
|
||||
// 2. 【核心修复】直接遍历 columns,只有 visible 为 true 的才允许导出!绝对防漏
|
||||
const actualVisibleCols = Object.keys(columns).filter(key => columns[key].visible);
|
||||
if (actualVisibleCols.length > 0) {
|
||||
exportParams.visibleColumns = actualVisibleCols.join(',')
|
||||
}
|
||||
|
||||
// 3. 合并自定义筛选
|
||||
if (isCustomFilterActive.value && Object.keys(customFilterParams.value).length > 0) {
|
||||
Object.assign(exportParams, customFilterParams.value)
|
||||
}
|
||||
|
||||
const tipMsg = ids.value.length > 0 ? "是否确认导出选中的数据项?" : "未勾选具体行,是否确认导出当前条件下的所有数据?";
|
||||
|
||||
proxy.$modal.confirm(tipMsg).then(function() {
|
||||
proxy.download('sheep_file/sheep_file/export', exportParams, `sheep_file_${new Date().getTime()}.xlsx`)
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 打开列设置对话框
|
||||
|
||||
@@ -99,7 +99,11 @@
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="custName">
|
||||
<el-input v-model="form.custName" placeholder="请输入客户名称" />
|
||||
<!-- <el-input v-model="form.custName" placeholder="请输入客户名称" /> -->
|
||||
<el-select v-model="form.custName" placeholder="请选择客户" filterable clearable style="width: 100%"
|
||||
@change="handleCustomerChange">
|
||||
<el-option v-for="item in userDict" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
@@ -239,14 +243,14 @@
|
||||
|
||||
<script setup name="Sale">
|
||||
import { listSale, getSale, delSale, addSale, updateSale } from "@/api/frozen/sale"
|
||||
import { reactive } from "vue"
|
||||
import { onMounted, reactive } from "vue"
|
||||
import { ref } from "vue"
|
||||
import { getSaleCodeDict } from "../../../api/frozen/sale"
|
||||
import { computed } from "vue"
|
||||
import { listCustomer } from "../../../api/sale/customer/customer"
|
||||
import { computed } from 'vue'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { frozen_sale_item_type } = proxy.useDict('frozen_sale_item_type')
|
||||
|
||||
const saleList = ref([])
|
||||
const ddSaleItemList = ref([])
|
||||
const open = ref(false)
|
||||
@@ -316,6 +320,26 @@
|
||||
})
|
||||
}
|
||||
|
||||
// =============== 用户字典数据 =================
|
||||
const userDict = ref([])
|
||||
|
||||
const userMap = computed(() => {
|
||||
return new Map(userDict.value.map(u => [u.id, u]))
|
||||
})
|
||||
|
||||
const handleCustomerChange = (val) => {
|
||||
const user = userMap.value.get(val)
|
||||
|
||||
if (user) {
|
||||
form.value.custPhone = user.phone || ''
|
||||
form.value.custAddr = (user.province + user.city + user.district + user.address) || ''
|
||||
} else {
|
||||
form.value.custPhone = ''
|
||||
form.value.custAddr = ''
|
||||
}
|
||||
}
|
||||
|
||||
// =============== End =================
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false
|
||||
@@ -465,4 +489,10 @@
|
||||
}, `sale_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
getList()
|
||||
onMounted(() => {
|
||||
// 加载客户列表
|
||||
listCustomer({ pageNum: 1, pageSize: 1000 }).then(r => {
|
||||
userDict.value = r.rows
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user