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" style="width: 140px"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
<el-select v-model="contractQuery.status" placeholder="合同状态" size="small" clearable style="width: 120px"> <el-select v-model="contractQuery.status" placeholder="合同状态" size="small" clearable style="width: 240px">
<el-option label="草稿" value="0" /> <el-option label="草稿" :value="0" />
<el-option label="已生效" value="1" /> <el-option label="已生效" :value="1" />
<el-option label="已作废" value="2" /> <el-option label="已作废" :value="2" />
<el-option label="已完成" value="3" /> <el-option label="已完成" :value="3" />
</el-select> </el-select>
<el-date-picker <el-date-picker
v-model="signDateRange" v-model="signDateRange"
@@ -81,7 +81,7 @@
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }" :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"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -95,7 +95,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -109,7 +109,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="editable-cell-wrapper" style="display: flex; align-items: center; gap: 2px;"> <div class="editable-cell-wrapper" style="display: flex; align-items: center; gap: 2px;">
<el-input <el-input
@@ -131,7 +131,7 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- 签订日期 --> <!-- 签订日期 -->
<el-table-column label="签订日期" prop="signTime" width="110"> <el-table-column label="签订日期" prop="signTime" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-date-picker <el-date-picker
v-model="scope.row.signTime" v-model="scope.row.signTime"
@@ -145,7 +145,7 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- 交货日期 --> <!-- 交货日期 -->
<el-table-column label="交货日期" prop="deliveryDate" width="110"> <el-table-column label="交货日期" prop="deliveryDate" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-date-picker <el-date-picker
v-model="scope.row.deliveryDate" v-model="scope.row.deliveryDate"
@@ -159,7 +159,7 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- 签订地点 --> <!-- 签订地点 -->
<el-table-column label="签订地点" prop="signLocation" width="120"> <el-table-column label="签订地点" prop="signLocation" min-width="140">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -173,7 +173,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -187,7 +187,7 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- 供方电话 --> <!-- 供方电话 -->
<el-table-column label="供方电话" prop="supplierPhone" width="120"> <el-table-column label="供方电话" prop="supplierPhone" width="130">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -201,7 +201,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -215,7 +215,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -229,7 +229,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -243,7 +243,7 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- 需方电话 --> <!-- 需方电话 -->
<el-table-column label="需方电话" prop="customerPhone" width="120"> <el-table-column label="需方电话" prop="customerPhone" width="130">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -257,7 +257,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -271,7 +271,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -285,7 +285,7 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- 订单金额 --> <!-- 订单金额 -->
<el-table-column label="订单金额" prop="orderAmount" width="110"> <el-table-column label="订单金额" prop="orderAmount" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -299,7 +299,7 @@
</template> </template>
</el-table-column> </el-table-column>
<!-- 已收款 --> <!-- 已收款 -->
<el-table-column label="已收款" prop="receivedAmount" width="110"> <el-table-column label="已收款" prop="receivedAmount" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -313,7 +313,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<el-select v-model="scope.row.status" size="small" class="editable-cell-pink" @change="saveRow(scope.row)"> <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="0" />
@@ -338,7 +338,7 @@
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<el-button <el-button
type="primary" type="primary"
@@ -446,7 +446,7 @@ export default {
contractCode: undefined, contractCode: undefined,
supplier: undefined, supplier: undefined,
customer: undefined, customer: undefined,
status: undefined, status: 1,
signDateStart: undefined, signDateStart: undefined,
signDateEnd: undefined, signDateEnd: undefined,
deliveryDateStart: undefined, deliveryDateStart: undefined,
@@ -815,4 +815,24 @@ export default {
color: #606266; color: #606266;
font-weight: 500; 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> </style>

71
klp-ui/src/views/crm/orderItem/index.vue
View File

@@ -42,11 +42,14 @@
style="width: 130px" style="width: 130px"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
<el-select v-model="queryParams.packagingReq" placeholder="包装要求" size="small" clearable style="width: 120px"> <el-input
<el-option label="裸包" value="BARE" /> v-model="queryParams.packagingReq"
<el-option label="简包" value="SIMPLE" /> placeholder="包装要求"
<el-option label="精包" value="STANDARD" /> size="small"
</el-select> clearable
style="width: 250px"
@keyup.enter.native="handleQuery"
/>
<el-date-picker <el-date-picker
v-model="signDateRange" v-model="signDateRange"
type="daterange" type="daterange"
@@ -88,17 +91,17 @@
> >
<!-- 合同信息列（只读，灰色背景） --> <!-- 合同信息列（只读，灰色背景） -->
<el-table-column label="合同信息" align="center"> <el-table-column label="合同信息" align="center">
<el-table-column label="合同号" prop="contractCode" min-width="130" show-overflow-tooltip> <el-table-column label="合同号" prop="contractCode" min-width="170">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<span class="contract-info" :title="row.contractCode">{{ row.contractCode }}</span> <span class="contract-info" :title="row.contractCode">{{ row.contractCode }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="供方" prop="supplier" min-width="140" show-overflow-tooltip> <el-table-column label="供方" prop="supplier" min-width="200">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<span class="contract-info" :title="row.supplier">{{ row.supplier }}</span> <span class="contract-info" :title="row.supplier">{{ row.supplier }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="需方" prop="customer" min-width="140" show-overflow-tooltip> <el-table-column label="需方" prop="customer" min-width="240">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<span class="contract-info" :title="row.customer">{{ row.customer }}</span> <span class="contract-info" :title="row.customer">{{ row.customer }}</span>
</template> </template>
@@ -117,7 +120,7 @@
<!-- 订单明细列（可编辑） --> <!-- 订单明细列（可编辑） -->
<el-table-column label="订单明细" align="center"> <el-table-column label="订单明细" align="center">
<el-table-column label="序号" prop="seqNo" width="70"> <el-table-column label="序号" prop="seqNo" width="60">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -129,7 +132,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="产品名称" prop="productName" min-width="130"> <el-table-column label="产品名称" prop="productName" min-width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -142,7 +145,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="规格" prop="productSpec" min-width="120"> <el-table-column label="规格" prop="productSpec" min-width="110">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -155,7 +158,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="材质" prop="material" width="100"> <el-table-column label="材质" prop="material" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -168,7 +171,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="宽度(mm)" prop="width" width="110"> <el-table-column label="宽度(mm)" prop="width" width="85">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -181,7 +184,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="厚度(mm)" prop="thickness" width="110"> <el-table-column label="厚度(mm)" prop="thickness" width="85">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -207,7 +210,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重量(吨)" prop="weight" width="100"> <el-table-column label="重量(吨)" prop="weight" width="90">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -220,7 +223,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="单价" prop="unitPrice" width="100"> <el-table-column label="单价" prop="unitPrice" width="90">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -246,7 +249,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="表面处理" prop="surfaceTreatment" width="110"> <el-table-column label="表面处理" prop="surfaceTreatment" width="130">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="editable-cell-wrapper"> <div class="editable-cell-wrapper">
<el-input <el-input
@@ -259,13 +262,17 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="包装要求" prop="packagingReq" width="100"> <el-table-column label="包装要求" prop="packagingReq" min-width="275">
<template slot-scope="scope"> <template slot-scope="scope">
<el-select v-model="scope.row.packagingReq" size="small" style="width: 100%" class="editable-cell-pink" @change="saveRow(scope.row)"> <div class="editable-cell-wrapper">
<el-option label="裸包" value="BARE" /> <el-input
<el-option label="简包" value="SIMPLE" /> v-model="scope.row.packagingReq"
<el-option label="精包" value="STANDARD" /> size="small"
</el-select> class="editable-cell-pink"
:title="scope.row.packagingReq"
@blur="saveRow(scope.row)"
/>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" prop="remark" min-width="120"> <el-table-column label="备注" prop="remark" min-width="120">
@@ -284,7 +291,7 @@
</el-table-column> </el-table-column>
<!-- 操作列 --> <!-- 操作列 -->
<el-table-column label="操作" width="80" fixed="right" align="center"> <el-table-column label="操作" width="70" fixed="right" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="mini" @click="saveRow(scope.row)">保存</el-button> <el-button type="text" size="mini" @click="saveRow(scope.row)">保存</el-button>
</template> </template>
@@ -652,6 +659,22 @@ export default {
.order-item-table ::v-deep .el-table__body td { .order-item-table ::v-deep .el-table__body td {
padding: 4px 0; padding: 4px 0;
white-space: normal !important;
word-break: break-all !important;
}
.order-item-table ::v-deep .el-table__body td .cell {
white-space: normal !important;
word-break: break-all !important;
line-height: 1.4;
}
/* 合同信息文本换行 */
.contract-info {
white-space: normal !important;
word-break: break-all !important;
overflow: visible;
text-overflow: clip;
} }
::v-deep .el-button--primary { ::v-deep .el-button--primary {