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:56:45 +08:00
parent 9edaa26f63
commit 620751537c
1 changed files with 95 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/views/contract-manage/index.vue
View File

@ -8,8 +8,9 @@
label-width="auto" size="small"
>
<!-- 表单搜索 -->
<el-card class="search-box">
<el-row>
<el-col :span="6">
<el-col :span="20">
<el-form-item prop="contractName">
<el-input
v-model.trim="queryParams.contractName"
@ -18,8 +19,6 @@
placeholder="请输入合同名称"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="contractCode">
<el-input
v-model.trim="queryParams.contractCode"
@ -28,8 +27,6 @@
placeholder="请输入合同编号"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="createTime">
<el-date-picker
v-model="createTime"
@ -42,17 +39,19 @@
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button class="primary-lease" type="primary" @click="getContractListData">查询</el-button>
<el-button class="primary-lease" type="primary" @click="onReset">重置</el-button>
</el-form-item>
<el-col :span="4" style="text-align: right;">
<el-button class="primary-lease" size="mini" icon="el-icon-search" type="primary" @click="getContractListData">查询</el-button>
<el-button class="primary-lease" size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
</el-col>
</el-row>
</el-card>
</el-form>
<el-card class="content-box">
<el-row>
<el-col :span="18">
<el-form-item>
<el-button class="primary-lease" type="primary" @click="addContract">合同新建</el-button>
<el-col :span="24" style="text-align: right;">
<el-button class="primary-lease" type="primary" @click="addContract">合同新建</el-button>
<a :href="uploadUrlTemp" download="安徽省机械化装备共享平台-协议模板">
<el-button
class="primary-lease"
@ -60,19 +59,14 @@
style="margin-left: 20px"
>模板下载</el-button>
</a>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="table-container">
<!-- 表格 -->
<el-table
:data="qualityLis"
border stripe height="100%"
show-overflow-tooltip
:header-cell-style="{
background: '#00a288',
color: '#fff',
}"
>
<el-table-column align="center" label="合同编码">
<template scope="scope">
@ -115,13 +109,16 @@
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-wrapper">
<pagination
:total="total"
@pagination="getContractListData"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
</div>
</el-card>
<!-- 新增和修改弹框 -->
<el-dialog
:visible.sync="dialogVisibleSettlein"
@ -445,5 +442,82 @@ export default {
:deep(.el-overlay) {
z-index: 99 !important;
}
.search-box {
margin-bottom: 20px;
border-radius: 8px;
padding: 0;
}
.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>