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 14:14:40 +08:00
parent f0b808b6f2
commit 62adf1da12
4 changed files with 210 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/EquipmentEntryApply/EquipmentDetailList.vue
View File

@ -70,6 +70,7 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24" style="text-align: right;"> <el-col :span="24" style="text-align: right;">
<el-button class="primary-lease" type="primary" @click="getEquipmentApplyList"> <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
查询 查询
@ -78,7 +79,6 @@
<i class="el-icon-refresh"></i> <i class="el-icon-refresh"></i>
重置 重置
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>

5
src/views/EquipmentEntryApply/equipmentInput/index.vue
View File

@ -180,6 +180,9 @@
style="width: auto" style="width: auto"
show-overflow-tooltip show-overflow-tooltip
:span-method="handleSpanMethod" :span-method="handleSpanMethod"
border
stripe
height="100%"
> >
<el-table-column label="序号" align="center" width="55" type="index" fixed/> <el-table-column label="序号" align="center" width="55" type="index" fixed/>
<el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip <el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip
@ -284,12 +287,14 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination-wrapper">
<pagination <pagination
:total="total" :total="total"
@pagination="getList" @pagination="getList"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
/> />
</div>
</el-card> </el-card>
<EquipmentEntryEditDialog <EquipmentEntryEditDialog
:is-visible.sync="isEditVisible" :is-visible.sync="isEditVisible"

111
src/views/EquipmentEntryApproval/EquipmentDetailList.vue
View File

@ -8,6 +8,7 @@
size="small" size="small"
> >
<!-- 表单搜索 --> <!-- 表单搜索 -->
<el-card class="search-box">
<el-row> <el-row>
<el-form-item prop="orderCreateUser" label="申请人："> <el-form-item prop="orderCreateUser" label="申请人：">
<el-input <el-input
@ -108,6 +109,7 @@
/> />
</el-form-item>--> </el-form-item>-->
<el-col :span="6">
<el-form-item prop="originalValue" label="资产原值："> <el-form-item prop="originalValue" label="资产原值：">
<el-input <el-input
clearable clearable
@ -115,9 +117,9 @@
placeholder="请输入" placeholder="请输入"
v-model.trim="queryParams.minOriginalValue" v-model.trim="queryParams.minOriginalValue"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="maxOriginalValue" label="-" style="margin-left: -5.5%;"> <span style="line-height: 30px;margin: 0 10px 0 0px;"> - </span>
<el-form-item prop="maxOriginalValue">
<el-input <el-input
clearable clearable
style="width: 105px" style="width: 105px"
@ -125,16 +127,25 @@
v-model.trim="queryParams.maxOriginalValue" v-model.trim="queryParams.maxOriginalValue"
/> />
</el-form-item> </el-form-item>
</el-col>
<el-form-item> <el-col :span="18" style="text-align: right;">
<el-button class="primary-lease" type="primary" @click="getEquipmentApplyList"> <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
<i class="el-icon-search"></i>
查询 查询
</el-button> </el-button>
<el-button class="primary-lease" type="primary" @click="resetForm"> <el-button class="primary-lease" @click="resetForm">
<i class="el-icon-refresh"></i>
重置 重置
</el-button> </el-button>
</el-col>
</el-row>
</el-card>
</el-form>
<el-card class="content-box">
<el-row>
<el-col :span="24" style="text-align: right;">
<el-button <el-button
class="primary-lease" class="primary-lease"
type="primary" type="primary"
@ -142,14 +153,10 @@
> >
展开明细 展开明细
</el-button> </el-button>
</el-col>
</el-form-item>
</el-row> </el-row>
</el-form>
<!-- 表格 --> <!-- 表格 -->
<el-table :data="tableData" :span-method="handleSpanMethod" :max-height="530"> <el-table :data="tableData" :span-method="handleSpanMethod" border stripe height="100%">
<!-- <el-table :data="tableData" >--> <!-- <el-table :data="tableData" >-->
<el-table-column label="序号" align="center" width="55" type="index" fixed/> <el-table-column label="序号" align="center" width="55" type="index" fixed/>
<el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip <el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip
@ -256,6 +263,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination-wrapper">
<!-- 分页 --> <!-- 分页 -->
<pagination <pagination
:total="total" :total="total"
@ -263,7 +271,8 @@
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
/> />
</div>
</el-card>
<!-- 弹框 --> <!-- 弹框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%"> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
<el-table :data="dialogList" fit highlight-current-row style="width: 100%" :max-height="500"> <el-table :data="dialogList" fit highlight-current-row style="width: 100%" :max-height="500">
@ -553,7 +562,7 @@ export default {
} }
.app-container { .app-container {
padding: 20px; padding: 0px !important;
} }
::v-deep .el-pagination { ::v-deep .el-pagination {
@ -564,4 +573,80 @@ export default {
::v-deep .el-button { ::v-deep .el-button {
margin-right: 8px; margin-right: 8px;
} }
.search-box {
margin-bottom: 20px;
border-radius: 8px;
}
.content-box {
border-radius: 8px;
height: calc(100vh - 330px);
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;
}
}
}
</style> </style>

106
src/views/EquipmentEntryApproval/EquipmentMainList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="app-container"> <div class="app-container" style="padding: 0;">
<el-form <el-form
:model="queryParams" :model="queryParams"
ref="queryFormRef" ref="queryFormRef"
@ -8,6 +8,7 @@
size="small" size="small"
> >
<!-- 表单搜索 --> <!-- 表单搜索 -->
<el-card class="search-box">
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="审批状态" prop="status"> <el-form-item label="审批状态" prop="status">
@ -36,16 +37,23 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" style="text-align:right;"> <el-col :span="12" style="text-align:right;">
<el-form-item style="white-space: nowrap;"> <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
<el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">查询</el-button> <i class="el-icon-search"></i>
<el-button class="primary-lease" type="primary" @click="resetForm">重置</el-button> 查询</el-button>
<el-button class="primary-lease" type="primary" @click="showDetails('1')">展开明细</el-button> <el-button class="primary-lease" @click="resetForm">
</el-form-item> <i class="el-icon-refresh"></i>
重置</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-card>
<!-- 表格 --> <!-- 表格 -->
<el-table :data="tableData"> <el-card class="content-box">
<el-row>
<el-col :span="24" style="text-align: right;">
<el-button class="primary-lease" type="primary" @click="showDetails('1')">展开明细</el-button>
</el-col>
</el-row>
<el-table :data="tableData" border stripe height="100%">
<el-table-column label="序号" align="center" width="55" type="index"/> <el-table-column label="序号" align="center" width="55" type="index"/>
<el-table-column prop="orderNumber" label="录入单号" align="center"/> <el-table-column prop="orderNumber" label="录入单号" align="center"/>
<el-table-column prop="devCount" label="申请录入数量" align="center"/> <el-table-column prop="devCount" label="申请录入数量" align="center"/>
@ -78,6 +86,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination-wrapper">
<!-- 分页 --> <!-- 分页 -->
<pagination <pagination
:total="total" :total="total"
@ -85,6 +94,9 @@
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
/> />
</div>
</el-card>
</el-form> </el-form>
</div> </div>
</template> </template>
@ -190,7 +202,7 @@ export default {
} }
.app-container { .app-container {
padding: 20px; padding: 10px;
} }
::v-deep .el-pagination { ::v-deep .el-pagination {
@ -201,4 +213,80 @@ export default {
::v-deep .el-button { ::v-deep .el-button {
margin-right: 8px; margin-right: 8px;
} }
.search-box {
margin-bottom: 20px;
border-radius: 8px;
}
.content-box {
border-radius: 8px;
height: calc(100vh - 230px);
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;
}
}
}
</style> </style>