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 15:50:14 +08:00
parent 37e2b316e3
commit af114d29dd
3 changed files with 326 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/views/EquipmentRoamRecord/maintenanceRecord/index.vue
View File

@ -1,9 +1,11 @@
<template>
<!-- 装备流转记录 -->
<div class="app-container">
<div class="query-form-container" style="flex-shrink: 0;">
<el-form ref="queryForm" size="small" inline label-width="auto" :model="queryParams">
<el-form-item prop="keyword">
<el-card class="search-box">
<el-row>
<el-col :span="12">
<el-form-item prop="keyword">
<el-input
clearable
style="width: 240px"
@ -25,19 +27,25 @@
start-placeholder="开始日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery"> 查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
</el-form-item>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button type="primary" icon="el-icon-search" @click="onHandleQuery"> 查询</el-button>
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
</el-col>
</el-row>
<el-form-item class="button-group">
<el-button icon="el-icon-refresh" size="mini" @click="onHandleExport">导出数据</el-button>
</el-form-item>
</el-card>
</el-form>
</div>
<el-card class="content-box">
<el-row>
<el-col :span="24" style="text-align: right;">
<el-button icon="el-icon-download" @click="onHandleExport">导出数据</el-button>
</el-col>
</el-row>
<div class="table-container" style="flex: 1; overflow-y: auto;">
<el-table :data="tableData" style="width: 100%">
<el-table :data="tableData" style="width: 100%" border stripe height="100%">
<el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
<el-table-column align="center" show-overflow-tooltip prop="createUser" label="操作人"/>
<el-table-column align="center" show-overflow-tooltip prop="type" label="操作类型">
@ -88,7 +96,7 @@
@pagination="getRoamRecordList"
/>
</div>
</el-card>
<!-- 出库记录单 -->
<el-dialog title="出库记录单" :visible.sync="outRecordVisible" width="80%" append-to-body>
<el-row>
@ -117,13 +125,15 @@
</el-row>
<vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
<el-table :data="outRecordData" style="width: 100%">
<el-table-column align="center" show-overflow-tooltip type="index" label="序号"/>
<div class="dialog-table">
<el-table :data="outRecordData" style="width: 100%" border stripe>
<el-table-column align="center" show-overflow-tooltip type="index" width="100px" label="序号"/>
<el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称"/>
<!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
<el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号"/>
<el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码"/>
</el-table>
</div>
</vue-easy-print>
<el-row class="record-row" style="margin-top: 10px">
@ -247,7 +257,7 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.record-row {
margin-bottom: 10px;
font-size: 16px;
@ -257,19 +267,11 @@ export default {
}
.app-container {
background-color: #f5f5f5; /* 设置整体灰色背景 */
// background-color: #f5f5f5; /* 设置整体灰色背景 */
display: flex;
flex-direction: column;
}
.query-form-container,
.table-container,
.pagination-container-fage {
background-color: #fff; /* 设置白色背景 */
padding: 10px;
margin-bottom: 20px;
border-radius: 4px;
}
.button-group {
float: right;
@ -280,12 +282,140 @@ export default {
margin-bottom: 0px;
}
.pagination-container {
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: -16px;
padding: 10px 20px !important;
background:none ;
.search-box {
margin-bottom: 20px;
border-radius: 8px;
padding: 0;
}
.content-box {
border-radius: 8px;
height: calc(100vh - 210px);
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;
}
}
}
</style>

198
src/views/EquipmentRoamRecord/retirementRecord/index.vue
View File

@ -1,9 +1,11 @@
<template>
<!-- 装备流转记录 -->
<div class="app-container">
<div class="query-form-container" style="flex-shrink: 0;">
<el-form ref="queryForm" size="small" inline label-width="auto" :model="queryParams">
<el-form-item prop="keyword">
<el-card class="search-box">
<el-row>
<el-col :span="12">
<el-form-item prop="keyword">
<el-input
clearable
style="width: 240px"
@ -23,19 +25,25 @@
start-placeholder="开始日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery"> 查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
</el-form-item>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button type="primary" icon="el-icon-search" @click="onHandleQuery"> 查询</el-button>
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
</el-col>
</el-row>
<el-form-item class="button-group">
<el-button icon="el-icon-refresh" size="mini" @click="onHandleExport">导出数据</el-button>
</el-form-item>
</el-card>
</el-form>
</div>
<div class="table-container" style="flex: 1; overflow-y: auto;">
<el-table :data="tableData" style="width: 100%">
<el-card class="content-box">
<el-row>
<el-col :span="24" style="text-align: right;">
<el-button icon="el-icon-download" @click="onHandleExport">导出数据</el-button>
</el-col>
</el-row>
<div class="table-container">
<el-table :data="tableData" style="width: 100%" border stripe height="100%">
<el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
<el-table-column align="center" show-overflow-tooltip prop="createUser" label="操作人"/>
<el-table-column align="center" show-overflow-tooltip prop="type" label="操作类型">
@ -78,7 +86,7 @@
</el-table>
</div>
<div class="pagination-container-fage" style="flex-shrink: 0;">
<div class="pagination-wrapper" style="flex-shrink: 0;">
<pagination
:total="total"
:page.sync="queryParams.pageNum"
@ -86,7 +94,7 @@
@pagination="getRoamRecordList"
/>
</div>
</el-card>
<!-- 出库记录单 -->
<el-dialog title="出库记录单" :visible.sync="outRecordVisible" width="80%" append-to-body>
<el-row>
@ -115,13 +123,15 @@
</el-row>
<vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
<el-table :data="outRecordData" style="width: 100%">
<el-table-column align="center" show-overflow-tooltip type="index" label="序号"/>
<div class="dialog-table">
<el-table :data="outRecordData" style="width: 100%" border stripe>
<el-table-column align="center" show-overflow-tooltip type="index" width="100px" label="序号"/>
<el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称"/>
<!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
<el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号"/>
<el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码"/>
</el-table>
</div>
</vue-easy-print>
<el-row class="record-row" style="margin-top: 10px">
@ -245,7 +255,7 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.record-row {
margin-bottom: 10px;
font-size: 16px;
@ -255,19 +265,11 @@ export default {
}
.app-container {
background-color: #f5f5f5; /* 设置整体灰色背景 */
// background-color: #f5f5f5; /* 设置整体灰色背景 */
display: flex;
flex-direction: column;
}
.query-form-container,
.table-container,
.pagination-container-fage {
background-color: #fff; /* 设置白色背景 */
padding: 10px;
margin-bottom: 20px;
border-radius: 4px;
}
.button-group {
float: right;
@ -278,12 +280,140 @@ export default {
margin-bottom: 0px;
}
.pagination-container {
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: -16px;
padding: 10px 20px !important;
background:none ;
.search-box {
margin-bottom: 20px;
border-radius: 8px;
padding: 0;
}
.content-box {
border-radius: 8px;
height: calc(100vh - 210px);
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;
}
}
}
</style>

2
src/views/EquipmentRoamRecord/returnRecord/index.vue
View File

@ -267,7 +267,7 @@ export default {
.search-box {
margin-bottom: 20px;
border-radius: 8px;
padding: 10px 0 20px 0;
padding: 0;
}
.content-box {