bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

装备维保记录表格修改

This commit is contained in:
cwchen 2025-10-29 16:13:50 +08:00
parent 4f503efbe7
commit 292e04eebf
1 changed files with 180 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/views/EquipmentServicing/index.vue
View File

@ -9,6 +9,7 @@
:inline="true"
label-width="auto" size="small"
>
<el-card class="search-box">
<el-row :gutter="20" type="flex">
<el-col :span="6">
<el-form-item label="装备编码" prop="deviceCode">
@ -64,19 +65,23 @@
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" class="primary-lease" @click="onSearch">查询</el-button>
<el-button type="primary" class="primary-lease" @click="onReset">重置</el-button>
</el-form-item>
<el-row>
<el-col :span="24" style="text-align: right;">
<el-button type="primary" icon="el-icon-search" size="mini" class="primary-lease" @click="onSearch">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" class="primary-lease" @click="onReset">重置</el-button>
</el-col>
</el-row>
</el-card>
</el-form>
<el-card class="content-box">
<div class="table-container">
<!-- 维保列表表格 -->
<el-table
:data="qualityLis"
border
stripe
show-overflow-tooltip
:header-cell-style="{ color: '#fff', background: '#00a288' }"
>
<el-table-column label="序号" type="index" align="center" width="80"/>
<el-table-column prop="deviceCode" label="装备编码" align="center"/>
@ -106,7 +111,8 @@
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-wrapper">
<!-- 分页组件 -->
<pagination
:total="total"
@ -114,7 +120,9 @@
:limit.sync="searchParams.pageSize"
@pagination="getLeaseListData"
/>
</div>
</el-card>
<!-- 新增/详情对话框 -->
<el-dialog
:title="dialogTitle"
@ -264,8 +272,8 @@
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" class="primary-lease" @click="getLeaseListDataInDialog">查询</el-button>
<el-button type="primary" class="primary-lease" @click="onResetInDialog">重置</el-button>
<el-button type="primary" icon="el-icon-search" class="primary-lease" @click="getLeaseListDataInDialog">查询</el-button>
<el-button icon="el-icon-refresh" class="primary-lease" @click="onResetInDialog">重置</el-button>
</el-form-item>
</el-col>
</el-row>
@ -275,8 +283,8 @@
<el-table
:data="qualityDetailsList"
border
stripe
show-overflow-tooltip
:header-cell-style="{ color: '#fff', background: '#00a288' }"
>
<el-table-column label="序号" type="index" align="center" width="80"/>
<el-table-column prop="qcCode" label="质检编码" align="center"/>
@ -866,5 +874,165 @@ export default {
visibility: visible;
}
}
.search-box {
margin-bottom: 20px;
border-radius: 8px;
padding: 0;
}
.content-box {
border-radius: 8px;
height: calc(100vh - 280px);
display: flex;
flex-direction: column;
overflow: hidden;
::v-deep .el-card__body {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
padding: 20px;
}
.el-row:first-child {
margin-bottom: 16px;
flex-shrink: 0;
.el-col {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
}
.table-container {
flex: 1;
overflow: hidden;
margin-bottom: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.pagination-wrapper {
flex-shrink: 0;
padding-top: 6px;
margin-top: auto;
::v-deep .pagination-container {
padding: 0px 20px !important;
margin-bottom: 30px;
}
}
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #F6FBFA !important; // 浅紫色
}
}
.el-table__header {
background: #E9F0EE;
th {
background: #E9F0EE !important;
color: #606266;
font-weight: 600;
height: 50px;
}
}
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
background-color: #CCF1E9 !important;
}
}
}
.dialog-table {
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
::v-deep .el-table {
border-radius: 6px;
overflow: hidden;
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #F6FBFA !important;
}
}
.el-table__header {
background: #E9F0EE;
th {
background: #E9F0EE !important;
color: #606266;
font-weight: 600;
height: 45px;
font-size: 14px;
border-bottom: 2px solid #e4e7ed;
}
}
.el-table__body {
tr {
transition: all 0.2s ease;
&:hover {
background-color: #f8f9fa;
}
td {
padding: 12px 8px;
font-size: 13px;
border-bottom: 1px solid #f0f2f5;
}
}
}
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
background-color: #CCF1E9 !important;
}
// 表格边框优化
&::before {
display: none;
}
&::after {
display: none;
}
}
}
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #F6FBFA !important; // 浅紫色
}
}
.el-table__header {
background: #E9F0EE;
th {
background: #E9F0EE !important;
color: #606266;
font-weight: 600;
height: 50px;
}
}
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
background-color: #CCF1E9 !important;
}
}
</style>