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 13:31:49 +08:00
parent 1a7397e2a8
commit ac7507d9fe
2 changed files with 249 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,105 +1,52 @@
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryFormRef"
inline
label-width="auto"
size="small"
>
<el-form :model="queryParams" ref="queryFormRef" inline label-width="auto" size="small">
<!-- 表单搜索 -->
<el-row>
<el-form-item prop="orderCreateUser" label="申请人：">
<el-input
clearable
style="width: 200px"
placeholder="请输入内容"
v-model.trim="queryParams.orderCreateUser"
/>
</el-form-item>
<el-form-item label="申请时间：" prop="orderCreateTime">
<el-date-picker
type="daterange"
style="width: 200px"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
v-model="queryParams.orderCreateTime"
/>
</el-form-item>
<el-card class="search-box">
<el-row>
<el-form-item prop="orderCreateUser" label="申请人：">
<el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.orderCreateUser" />
</el-form-item>
<el-form-item label="申请时间：" prop="orderCreateTime">
<el-date-picker type="daterange" style="width: 200px" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
v-model="queryParams.orderCreateTime" />
</el-form-item>
<el-form-item label="审批状态" prop="entryStatus">
<el-select
clearable
style="width: 200px"
placeholder="请选择审批状态"
v-model="queryParams.entryStatus"
>
<el-option label="待审批" value="0"/>
<el-option label="已通过" value="1"/>
<el-option label="已驳回" value="2"/>
</el-select>
</el-form-item>
<el-form-item label="审批状态" prop="entryStatus">
<el-select clearable style="width: 200px" placeholder="请选择审批状态" v-model="queryParams.entryStatus">
<el-option label="待审批" value="0" />
<el-option label="已通过" value="1" />
<el-option label="已驳回" value="2" />
</el-select>
</el-form-item>
<el-form-item prop="name" label="装备名称：">
<el-input
clearable
style="width: 200px"
placeholder="请输入内容"
v-model.trim="queryParams.name"
/>
</el-form-item>
<el-form-item prop="name" label="装备名称：">
<el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.name" />
</el-form-item>
<el-form-item prop="specificationModel" label="规格型号：">
<el-input
clearable
style="width: 200px"
placeholder="请输入内容"
v-model.trim="queryParams.specificationModel"
/>
</el-form-item>
<el-form-item prop="specificationModel" label="规格型号：">
<el-input clearable style="width: 200px" placeholder="请输入内容"
v-model.trim="queryParams.specificationModel" />
</el-form-item>
<el-form-item prop="originalCode" label="装备原始编码：">
<el-input
clearable
style="width: 200px"
placeholder="请输入内容"
v-model.trim="queryParams.originalCode"
/>
</el-form-item>
<el-form-item prop="originalCode" label="装备原始编码：">
<el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.originalCode" />
</el-form-item>
<el-form-item prop="manufacturerId" label="生产厂家：">
<el-select
v-model="queryParams.manufacturerId"
placeholder="请选择生产厂家"
clearable
style="width: 100%"
>
<el-option
v-for="item in manufacturerList"
:key="item.id"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item prop="manufacturerId" label="生产厂家：">
<el-select v-model="queryParams.manufacturerId" placeholder="请选择生产厂家" clearable style="width: 100%">
<el-option v-for="item in manufacturerList" :key="item.id" :label="item.label" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item prop="productionDate" label="出厂日期：">
<el-date-picker
type="daterange"
style="width: 200px"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
v-model="queryParams.productionDate"
/>
</el-form-item>
<el-form-item prop="productionDate" label="出厂日期：">
<el-date-picker type="daterange" style="width: 200px" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
v-model="queryParams.productionDate" />
</el-form-item>
<!-- <el-form-item prop="keyword" label="采购日期：">
<!-- <el-form-item prop="keyword" label="采购日期：">
<el-date-picker
type="date"
style="width: 240px"
@ -109,168 +56,141 @@
/>
</el-form-item>-->
<el-form-item prop="minOriginalValue" label="资产原值：">
<el-input
clearable
style="width: 90px"
placeholder="请输入"
v-model.trim="queryParams.minOriginalValue"
/>
<el-form-item prop="minOriginalValue" label="资产原值：">
<el-input clearable style="width: 90px" placeholder="请输入" v-model.trim="queryParams.minOriginalValue" />
</el-form-item>
<el-form-item prop="maxOriginalValue" label="-" style="margin-left: -6%;">
<el-input
clearable
style="width: 90px"
placeholder="请输入"
v-model.trim="queryParams.maxOriginalValue"
/>
</el-form-item>
</el-form-item>
<el-form-item prop="maxOriginalValue" label="-" style="margin-left: -6%;">
<el-input clearable style="width: 90px" placeholder="请输入" v-model.trim="queryParams.maxOriginalValue" />
</el-form-item>
<el-form-item>
<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="showEquipmentInput()"
>
装备录入
</el-button>
<el-button
class="primary-lease"
type="primary"
@click="showDetails('0')"
>
展开明细
</el-button>
</el-form-item>
</el-row>
<!-- 表格 -->
<el-table :data="tableData" :span-method="handleSpanMethod" :max-height="580">
<!-- <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
column-key="orderNumber" fixed min-width="200"
/>
<el-table-column prop="major" label="专业" align="center" show-overflow-tooltip min-width="100"/>
<el-table-column prop="orderNumber" label="工序" align="center" show-overflow-tooltip min-width="100">
<template slot-scope="scope">
{{ scope.row.mainProcess }}{{ scope.row.subProcess ? '>' + scope.row.subProcess : '' }}
</template>
</el-table-column>
<el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.mainCategory ? scope.row.mainCategory + '>' : '' }}
{{ scope.row.branch ? scope.row.subCategory + '>' : scope.row.subCategory }}{{ scope.row.branch }}
</template>
</el-table-column>
<el-table-column prop="name" label="装备名称" show-overflow-tooltip align="center" min-width="100"/>
<el-table-column prop="specificationModel" label="规格型号" show-overflow-tooltip align="center" min-width="100"/>
<el-table-column prop="originalCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100"/>
<el-table-column prop="unit" label="计量单位" show-overflow-tooltip align="center" min-width="100"/>
<el-table-column prop="manufacturer" label="生产厂家" show-overflow-tooltip align="center" min-width="100"/>
<el-table-column prop="productionDate" label="出厂日期" show-overflow-tooltip align="center" min-width="100"/>
<!-- <el-table-column prop="orderNumber" label="采购日期" align="center"/>-->
<el-table-column prop="originalValue" label="资产原值（元）" show-overflow-tooltip align="center" min-width="100"/>
<!-- <el-table-column prop="orderNumber" label="最大使用年限（年）" align="center"/>-->
<!-- <el-table-column prop="orderNumber" label="下次维保日期" align="center"/>-->
<el-table-column prop="province" label="所属省份" show-overflow-tooltip align="center" min-width="100"/>
<el-table-column prop="appearanceImages" label="装备外观" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 1)">查看</span>
</template>
</el-table-column>
<el-table-column prop="certificates" label="合格证" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 2)">查看</span>
</template>
</el-table-column>
<el-table-column prop="inspectionReports" label="定期检验报告" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 3)">查看</span>
</template>
</el-table-column>
<el-table-column prop="purchaseInvoices" label="采购发票" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 4)">查看</span>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in columns"
v-if="item.visible"
:key="index"
align="center"
show-overflow-tooltip
:label="item.label"
:prop="item.prop"
>
<template v-slot="{ row }" v-if="/^feature(Item|Value)\d+$/.test(item.prop)">
<span>
{{ getFeatureValue(row, item.prop) }}
</span>
</template>
</el-table-column>
<!-- <el-table-column prop="devCount" label="特征项1" align="center"/>-->
<!-- <el-table-column prop="devCount" label="特征值1" align="center"/>-->
<el-table-column prop="orderCreateUser" label="申请人" show-overflow-tooltip align="center" fixed="right"
min-width="100"
/>
<el-table-column prop="orderCreateTime" label="申请时间" show-overflow-tooltip align="center" fixed="right"
min-width="100"
/>
<el-table-column prop="entryStatus" align="center" show-overflow-tooltip label="审批状态" fixed="right"
min-width="100"
>
<template slot-scope="{ row }">
<el-tag v-if="row.entryStatus == 0" size="small" type="warning">待审批</el-tag>
<el-tag v-if="row.entryStatus == 1" size="small" type="success">已通过</el-tag>
<el-tag v-if="row.entryStatus == 2" size="small" type="success">已驳回</el-tag>
<el-tag v-if="row.entryStatus == 3" size="small" type="info">草稿</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="300" fixed="right">
<template slot-scope="{ row }">
<el-button type="text" @click="handleViewDetail(row)">
<i class="el-icon-view"></i> 查看
</el-row>
<el-row>
<el-col :span="24" style="text-align: right;">
<el-button class="primary-lease" @click="resetForm">
<i class="el-icon-refresh"></i>
重置
</el-button>
<el-button
type="text"
@click="showEquipmentInput(row.id, false)"
v-if="row.orderStatus == '3'"
>
<i class="el-icon-edit"></i> 编辑
<el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
<i class="el-icon-search"></i>
查询
</el-button>
<el-button
type="text"
@click="deleteItem(row)"
v-if="row.orderStatus == '3'"
>
<i class="el-icon-delete"></i> 删除
</el-col>
</el-row>
</el-card>
<el-card class="content-box">
<el-row>
<el-col>
<el-button class="primary-lease" type="primary" @click="showEquipmentInput()">
装备录入
</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="primary-lease" type="primary" @click="showDetails('0')">
展开明细
</el-button>
</el-col>
</el-row>
<!-- 表格 -->
<el-table :data="tableData" border stripe :span-method="handleSpanMethod" 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 column-key="orderNumber"
fixed min-width="200" />
<el-table-column prop="major" label="专业" align="center" show-overflow-tooltip min-width="100" />
<el-table-column prop="orderNumber" label="工序" align="center" show-overflow-tooltip min-width="100">
<template slot-scope="scope">
{{ scope.row.mainProcess }}{{ scope.row.subProcess ? '>' + scope.row.subProcess : '' }}
</template>
</el-table-column>
<!-- 分页 -->
<pagination
:total="total"
@pagination="handlePageChange"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
<el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.mainCategory ? scope.row.mainCategory + '>' : '' }}
{{ scope.row.branch ? scope.row.subCategory + '>' : scope.row.subCategory }}{{ scope.row.branch }}
</template>
</el-table-column>
<el-table-column prop="name" label="装备名称" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="specificationModel" label="规格型号" show-overflow-tooltip align="center"
min-width="100" />
<el-table-column prop="originalCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="unit" label="计量单位" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="manufacturer" label="生产厂家" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="productionDate" label="出厂日期" show-overflow-tooltip align="center" min-width="100" />
<!-- <el-table-column prop="orderNumber" label="采购日期" align="center"/>-->
<el-table-column prop="originalValue" label="资产原值（元）" show-overflow-tooltip align="center" min-width="100" />
<!-- <el-table-column prop="orderNumber" label="最大使用年限（年）" align="center"/>-->
<!-- <el-table-column prop="orderNumber" label="下次维保日期" align="center"/>-->
<el-table-column prop="province" label="所属省份" show-overflow-tooltip align="center" min-width="100" />
<el-table-column prop="appearanceImages" label="装备外观" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 1)">查看</span>
</template>
</el-table-column>
<el-table-column prop="certificates" label="合格证" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 2)">查看</span>
</template>
</el-table-column>
<el-table-column prop="inspectionReports" label="定期检验报告" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 3)">查看</span>
</template>
</el-table-column>
<el-table-column prop="purchaseInvoices" label="采购发票" show-overflow-tooltip align="center" min-width="100">
<template v-slot="{ row }">
<span style="color: #00a288; cursor: pointer" @click="handleView(row, 4)">查看</span>
</template>
</el-table-column>
<el-table-column v-for="(item, index) in columns" v-if="item.visible" :key="index" align="center"
show-overflow-tooltip :label="item.label" :prop="item.prop">
<template v-slot="{ row }" v-if="/^feature(Item|Value)\d+$/.test(item.prop)">
<span>
{{ getFeatureValue(row, item.prop) }}
</span>
</template>
</el-table-column>
<!-- <el-table-column prop="devCount" label="特征项1" align="center"/>-->
<!-- <el-table-column prop="devCount" label="特征值1" align="center"/>-->
<el-table-column prop="orderCreateUser" label="申请人" show-overflow-tooltip align="center" fixed="right"
min-width="100" />
<el-table-column prop="orderCreateTime" label="申请时间" show-overflow-tooltip align="center" fixed="right"
min-width="100" />
<el-table-column prop="entryStatus" align="center" show-overflow-tooltip label="审批状态" fixed="right"
min-width="100">
<template slot-scope="{ row }">
<el-tag v-if="row.entryStatus == 0" size="small" type="warning">待审批</el-tag>
<el-tag v-if="row.entryStatus == 1" size="small" type="success">已通过</el-tag>
<el-tag v-if="row.entryStatus == 2" size="small" type="success">已驳回</el-tag>
<el-tag v-if="row.entryStatus == 3" size="small" type="info">草稿</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="300" fixed="right">
<template slot-scope="{ row }">
<el-button type="text" @click="handleViewDetail(row)">
<i class="el-icon-view"></i> 查看
</el-button>
<el-button type="text" @click="showEquipmentInput(row.id, false)" v-if="row.orderStatus == '3'">
<i class="el-icon-edit"></i> 编辑
</el-button>
<el-button type="text" @click="deleteItem(row)" v-if="row.orderStatus == '3'">
<i class="el-icon-delete"></i> 删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-wrapper">
<!-- 分页 -->
<pagination :total="total" @pagination="handlePageChange" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" />
</div>
</el-card>
</el-form>
<!-- 弹框 -->
@ -541,7 +461,7 @@ export default {
}
.app-container {
padding: 20px;
padding: 0;
}
::v-deep .el-pagination {
@ -552,4 +472,86 @@ 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 - 320px);
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;
}
}
::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__body-wrapper {
overflow-x: auto !important;
}
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
background-color: #CCF1E9 !important;
}
}
}
</style>

6
src/views/EquipmentEntryApply/EquipmentMainList.vue
View File

@ -342,10 +342,8 @@ export default {
}
}
.el-table__body {
tr:hover>td {
background-color: #CCF1E9 !important;
}
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
background-color: #CCF1E9 !important;
}
}
}