DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(crm): 优化订单和合同页面的表单与表格展示

Browse Source 
1.  将包装要求筛选器改为输入框并调整宽度，表格列宽适配内容
2.  调整多列表头宽度适配长文本，新增表格单元格自动换行样式
3.  修复合同状态选择器的绑定值写法，默认查询状态改为已生效
4.  优化部分输入框的占位宽度，适配长文本内容展示
This commit is contained in:
王文昊
2026-05-18 17:15:22 +08:00
parent 7d634d7b45
commit a705c6a4a9
2 changed files with 91 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
klp-ui/src/views/crm/contract/detail/index.vue
View File

@@ -26,11 +26,11 @@
style="width: 140px"
@keyup.enter.native="handleQuery"
/>
<el-select v-model="contractQuery.status" placeholder="合同状态" size="small" clearable style="width: 120px">
<el-option label="草稿" value="0" />
<el-option label="已生效" value="1" />
<el-option label="已作废" value="2" />
<el-option label="已完成" value="3" />
<el-select v-model="contractQuery.status" placeholder="合同状态" size="small" clearable style="width: 240px">
<el-option label="草稿" :value="0" />
<el-option label="已生效" :value="1" />
<el-option label="已作废" :value="2" />
<el-option label="已完成" :value="3" />
</el-select>
<el-date-picker
v-model="signDateRange"
@@ -81,7 +81,7 @@
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }"
>
<!-- 合同号 -->
<el-table-column label="合同号" prop="contractCode" min-width="130" fixed="left">
<el-table-column label="合同号" prop="contractCode" width="170" fixed="left">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -95,7 +95,7 @@
</template>
</el-table-column>
<!-- 供方 -->
<el-table-column label="供方" prop="supplier" min-width="140">
<el-table-column label="供方" prop="supplier" min-width="200">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -109,7 +109,7 @@
</template>
</el-table-column>
<!-- 需方 -->
<el-table-column label="需方" prop="customer" min-width="160">
<el-table-column label="需方" prop="customer" min-width="280">
<template slot-scope="scope">
<div class="editable-cell-wrapper" style="display: flex; align-items: center; gap: 2px;">
<el-input
@@ -131,7 +131,7 @@
</template>
</el-table-column>
<!-- 签订日期 -->
<el-table-column label="签订日期" prop="signTime" width="110">
<el-table-column label="签订日期" prop="signTime" width="100">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.signTime"
@@ -145,7 +145,7 @@
</template>
</el-table-column>
<!-- 交货日期 -->
<el-table-column label="交货日期" prop="deliveryDate" width="110">
<el-table-column label="交货日期" prop="deliveryDate" width="100">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.deliveryDate"
@@ -159,7 +159,7 @@
</template>
</el-table-column>
<!-- 签订地点 -->
<el-table-column label="签订地点" prop="signLocation" width="120">
<el-table-column label="签订地点" prop="signLocation" min-width="140">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -173,7 +173,7 @@
</template>
</el-table-column>
<!-- 供方地址 -->
<el-table-column label="供方地址" prop="supplierAddress" min-width="140">
<el-table-column label="供方地址" prop="supplierAddress" min-width="360">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -187,7 +187,7 @@
</template>
</el-table-column>
<!-- 供方电话 -->
<el-table-column label="供方电话" prop="supplierPhone" width="120">
<el-table-column label="供方电话" prop="supplierPhone" width="130">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -201,7 +201,7 @@
</template>
</el-table-column>
<!-- 供方开户行 -->
<el-table-column label="供方开户行" prop="supplierBank" min-width="140">
<el-table-column label="供方开户行" prop="supplierBank" min-width="300">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -215,7 +215,7 @@
</template>
</el-table-column>
<!-- 供方账号 -->
<el-table-column label="供方账号" prop="supplierAccount" min-width="140">
<el-table-column label="供方账号" prop="supplierAccount" min-width="220">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -229,7 +229,7 @@
</template>
</el-table-column>
<!-- 需方地址 -->
<el-table-column label="需方地址" prop="customerAddress" min-width="140">
<el-table-column label="需方地址" prop="customerAddress" min-width="545">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -243,7 +243,7 @@
</template>
</el-table-column>
<!-- 需方电话 -->
<el-table-column label="需方电话" prop="customerPhone" width="120">
<el-table-column label="需方电话" prop="customerPhone" width="130">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -257,7 +257,7 @@
</template>
</el-table-column>
<!-- 需方开户行 -->
<el-table-column label="需方开户行" prop="customerBank" min-width="140">
<el-table-column label="需方开户行" prop="customerBank" min-width="340">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -271,7 +271,7 @@
</template>
</el-table-column>
<!-- 需方账号 -->
<el-table-column label="需方账号" prop="customerAccount" min-width="140">
<el-table-column label="需方账号" prop="customerAccount" min-width="220">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -285,7 +285,7 @@
</template>
</el-table-column>
<!-- 订单金额 -->
<el-table-column label="订单金额" prop="orderAmount" width="110">
<el-table-column label="订单金额" prop="orderAmount" width="100">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -299,7 +299,7 @@
</template>
</el-table-column>
<!-- 已收款 -->
<el-table-column label="已收款" prop="receivedAmount" width="110">
<el-table-column label="已收款" prop="receivedAmount" width="100">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
@@ -313,7 +313,7 @@
</template>
</el-table-column>
<!-- 状态 -->
<el-table-column label="状态" prop="status" width="100" align="center">
<el-table-column label="状态" prop="status" width="80" 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" />
@@ -338,7 +338,7 @@
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" width="90" fixed="right" align="center" class-name="operation-column">
<el-table-column label="操作" width="80" fixed="right" align="center" class-name="operation-column">
<template slot-scope="scope">
<el-button
type="primary"
@@ -446,7 +446,7 @@ export default {
contractCode: undefined,
supplier: undefined,
customer: undefined,
status: undefined,
status: 1,
signDateStart: undefined,
signDateEnd: undefined,
deliveryDateStart: undefined,
@@ -815,4 +815,24 @@ export default {
color: #606266;
font-weight: 500;
}
/* 表格单元格文本自动换行 */
.contract-edit-table ::v-deep .el-table__body td {
white-space: normal !important;
word-break: break-all !important;
}
.contract-edit-table ::v-deep .el-table__body td .cell {
white-space: normal !important;
word-break: break-all !important;
line-height: 1.4;
}
/* 输入框文本换行 */
.contract-edit-table ::v-deep .el-input__inner {
white-space: normal !important;
word-break: break-all !important;
overflow: visible;
text-overflow: clip;
}
</style>