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

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

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

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

@ -8,6 +8,7 @@
size="small"
>
<!-- 表单搜索 -->
<el-card class="search-box">
<el-row>
<el-form-item prop="orderCreateUser" label="申请人：">
<el-input
@ -108,16 +109,17 @@
/>
</el-form-item>-->
<el-form-item prop="originalValue" label="资产原值：">
<el-col :span="6">
<el-form-item prop="originalValue" label="资产原值：">
<el-input
clearable
style="width: 105px"
placeholder="请输入"
v-model.trim="queryParams.minOriginalValue"
/>
</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
clearable
style="width: 105px"
@ -125,31 +127,36 @@
v-model.trim="queryParams.maxOriginalValue"
/>
</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">
<i class="el-icon-search"></i>
查询
</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
class="primary-lease"
type="primary"
@click="showDetails('0')"
>
展开明细
</el-button>
</el-form-item>
</el-row>
</el-form>
</el-col>
</el-row>
<!-- 表格 -->
<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-column label="序号" align="center" width="55" type="index" fixed/>
<el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip
@ -256,6 +263,7 @@
</el-table-column>
</el-table>
<div class="pagination-wrapper">
<!-- 分页 -->
<pagination
:total="total"
@ -263,7 +271,8 @@
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
</div>
</el-card>
<!-- 弹框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
<el-table :data="dialogList" fit highlight-current-row style="width: 100%" :max-height="500">
@ -553,7 +562,7 @@ export default {
}
.app-container {
padding: 20px;
padding: 0px !important;
}
::v-deep .el-pagination {
@ -564,4 +573,80 @@ export default {
::v-deep .el-button {
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>

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

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