fix(crm/contract/detail): 优化合同详情页表格交互与样式

1. 调整状态列宽度并修复选项值绑定语法
2. 重构操作列样式与保存按钮样式
3. 替换客户表格选中逻辑,改为行点击直接选中
4. 移除冗余的客户表格操作列,添加行悬停高亮样式
This commit is contained in:
王文昊
2026-05-17 02:24:55 +08:00
parent 56b306d301
commit 75be48c3b0

View File

@@ -313,13 +313,13 @@
</template>
</el-table-column>
<!-- 状态 -->
<el-table-column label="状态" prop="status" width="90" align="center">
<el-table-column label="状态" prop="status" width="100" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.status" size="small" class="editable-cell-pink" @change="saveRow(scope.row)">
<el-option label="草稿" value="0" />
<el-option label="已生效" value="1" />
<el-option label="已作废" value="2" />
<el-option label="已完成" value="3" />
<el-option label="草稿" :value="0" />
<el-option label="已生效" :value="1" />
<el-option label="已作废" :value="2" />
<el-option label="已完成" :value="3" />
</el-select>
</template>
</el-table-column>
@@ -338,9 +338,16 @@
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" width="80" fixed="right" align="center">
<el-table-column label="操作" width="90" fixed="right" align="center" class-name="operation-column">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="saveRow(scope.row)">保存</el-button>
<el-button
type="primary"
size="mini"
plain
icon="el-icon-check"
class="save-btn"
@click="saveRow(scope.row)"
>保存</el-button>
</template>
</el-table-column>
</el-table>
@@ -388,7 +395,8 @@
size="small"
border
highlight-current-row
@current-change="handleCustomerCurrentChange"
row-class-name="customer-selectable-row"
@row-click="handleCustomerRowClick"
style="width: 100%"
max-height="360"
>
@@ -397,11 +405,6 @@
<el-table-column label="联系方式" prop="contactWay" width="130" show-overflow-tooltip />
<el-table-column label="地址" prop="address" min-width="160" show-overflow-tooltip />
<el-table-column label="税号" prop="taxNumber" width="140" show-overflow-tooltip />
<el-table-column label="操作" width="70" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="selectCustomer(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 8px; text-align: right;">
<el-pagination
@@ -592,9 +595,9 @@ export default {
})
},
// 客户表格行高亮选中
handleCustomerCurrentChange(val) {
this.selectedCustomer = val
// 客户表格行点击选中
handleCustomerRowClick(row) {
this.selectCustomer(row)
},
// 选择客户并回填
@@ -772,6 +775,39 @@ export default {
border-color: #4d6a8e !important;
}
/* 操作列样式 */
.operation-column {
background-color: #f5f7fa;
}
.save-btn {
padding: 6px 12px;
font-size: 12px;
}
/* 客户选择表格行样式 */
.customer-selectable-row {
cursor: pointer;
transition: background-color 0.2s ease;
}
.customer-selectable-row:hover {
background-color: #e6f7ff !important;
}
.customer-selectable-row.el-table__row--striped:hover {
background-color: #e6f7ff !important;
}
/* 客户选择表格当前行高亮 */
::v-deep .el-table--enable-row-hover .el-table__body tr.customer-selectable-row:hover > td {
background-color: #e6f7ff !important;
}
::v-deep .el-table__body tr.customer-selectable-row.current-row > td {
background-color: #b3e0ff !important;
}
/* 筛选结果数量显示 */
.result-count {
margin-left: auto;