refactor(界面布局): 优化PDO页面布局和操作按钮位置

调整表格高度和操作按钮位置,移除冗余代码
简化样式设置,改进页面布局灵活性
This commit is contained in:
砂糖
2025-12-31 17:40:57 +08:00
parent b8f5057768
commit 70d3e54933

View File

@@ -26,14 +26,26 @@
<el-button @click="handleReset" icon="el-icon-refresh">Reset</el-button>
<!-- 重置 -->
<el-button type="success" @click="handleAdd" icon="el-icon-plus">Add Record</el-button>
<span v-if="currentRow.exitMatId" style="margin-left: 10px; border: 1px solid #d4d4d4; border-radius: 2px; padding: 5px;">
<el-button size="mini" type="text" icon="el-icon-view"
@click.stop="handlePrint(currentRow)">Print</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(currentRow)">Edit</el-button>
<el-button size="mini" type="text" icon="el-icon-document"
@click.stop="handleQualityCertificate(currentRow)">Quality Certificate</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" :loading="currentRow.deleteLoading"
@click.stop="handleDelete(currentRow)">Delete</el-button>
</span>
<!-- 补录 -->
</el-form-item>
</el-form>
</div>
<!-- Card grid layout / 卡片网格布局 -->
<div v-loading="tableLoading" class="card-grid-container">
<el-table :data="tableData" style="width: 100%" border stripe @row-click="handleRowClick">
<div v-loading="tableLoading">
<el-table :data="tableData" style="width: 100%" border stripe @row-click="handleRowClick" highlight-current-row height="300px">
<el-table-column prop="exitMatId" label="exitMat"></el-table-column>
<el-table-column prop="entryMatId" label="entryMat"></el-table-column>
<el-table-column prop="planNo" label="PlanNo"></el-table-column>
@@ -53,28 +65,30 @@
<el-table-column prop="exitLength" label="ExitLength"></el-table-column>
<el-table-column prop="exitNetWeight" label="ExitNetWeight"></el-table-column>
<el-table-column label="Operation">
<!-- <el-table-column label="Operation">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view"
@click.stop="handlePrint(scope.row)">Print</el-button>
<!-- 打印 -->
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(scope.row)">Edit</el-button>
<!-- 操作 -->
<el-button size="mini" type="text" icon="el-icon-document"
@click.stop="handleQualityCertificate(scope.row)">Quality Certificate</el-button>
<!-- 质保书 -->
<el-button size="mini" type="text" icon="el-icon-delete" :loading="scope.row.deleteLoading"
@click.stop="handleDelete(scope.row)">Delete</el-button>
<!-- 删除 -->
</template>
</el-table-column>
</el-table-column> -->
</el-table>
<div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
<el-empty description="No data"></el-empty>
<!-- 暂无数据 -->
</div>
</div>
<pdo-summary :table-data="tableData" />
<div>
<pdo-summary :table-data="tableData" />
</div>
<!-- Statistics summary and chart area / 统计汇总和图表区域 -->
<div class="statistics-container">
@@ -108,19 +122,9 @@
<pdo-data-correction :detail="formData" :save-callback="handleSave"
:save-loading="saveLoading"></pdo-data-correction>
</div>
<!-- Edit: keep original tab, show data correction + label print / 编辑保留原有tab显示数据修正+标签打印 -->
<!-- <el-tabs v-else v-model="activeTab"> -->
<!-- <el-tab-pane label="Data Correction" name="basicInfo"> -->
<!-- 数据修正 -->
<pdo-data-correction :detail="formData" :save-callback="handleSave"
:save-loading="saveLoading"></pdo-data-correction>
<!-- </el-tab-pane> -->
<!-- <el-tab-pane label="Label Print" name="labelPrint"> -->
<!-- 标签打印 -->
<!-- </el-tab-pane>
</el-tabs> -->
</el-dialog>
<el-dialog title="Label Print" :visible.sync="printOpen" width="600px" :close-on-click-modal="false">
@@ -301,7 +305,7 @@ export default {
<style lang="scss" scoped>
.pdo-container {
height: calc(100vh - 84px);
// height: calc(100vh - 84px);
display: flex;
flex-direction: column;
padding: 15px;
@@ -311,7 +315,7 @@ export default {
.pdo-header {
border-radius: 2px;
margin-bottom: 10px;
margin-bottom: 5px;
flex-shrink: 0;
}
@@ -459,14 +463,14 @@ export default {
}
.statistics-container {
flex: 0 0 auto;
flex: 1 0 auto;
background: #ffffff;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 0;
display: flex;
flex-direction: column;
height: 400px;
// min-height: 400px;
}
.statistics-header {