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

feat: 新增订单日期范围筛选、明细管理与分类接口

Browse Source 
1. 为订单和订单明细BO新增签订、交货日期范围查询字段并配置日期格式化
2. 实现订单日期范围筛选逻辑，新增日期加一天工具方法处理带时间字段的范围查询
3. 重构订单明细列表查询逻辑，支持按合同号、需方、日期范围关联主表筛选
4. 新增通用分类管理接口与页面
5. 优化合同列表页面，新增详情编辑跳转与日期范围筛选
6. 新增订单明细全量查询与单订单明细编辑页面
This commit is contained in:
王文昊
2026-05-16 14:20:30 +08:00
parent dc9c4547fd
commit 52f92c1d69
10 changed files with 2104 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
klp-ui/src/views/crm/contract/components/ContractList.vue
View File

@@ -3,21 +3,43 @@
<!-- 筛选区和按钮操作区合并 -->
<div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
<div style="display: flex; align-items: center; gap: 4px;">
<div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable
@keyup.enter.native="handleQuery" />
@keyup.enter.native="handleQuery" style="width: 160px;" />
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">筛选</el-button>
<el-button icon="el-icon-sort" size="mini" @click="toggleMoreFilter"
:type="showMoreFilter ? 'primary' : 'default'">
<!-- {{ showMoreFilter ? '收起' : '更多' }} -->
</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="$emit('add')"></el-button>
</div>
<div style="font-size: 12px; color: #909399;">
共 <span style="color: #409eff; font-weight: bold;">{{ total }}</span> 条记录
</div>
</div>
<!-- 日期范围筛选行 -->
<div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px;">
<div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
<span style="white-space: nowrap;">签订日期：</span>
<el-date-picker clearable v-model="queryParams.signDateStart" type="date" value-format="yyyy-MM-dd"
placeholder="签订日期开始" style="width: 180px;" />
<span>~</span>
<el-date-picker clearable v-model="queryParams.signDateEnd" type="date" value-format="yyyy-MM-dd"
placeholder="签订日期结束" style="width: 180px;" />
</div>
<div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
<span style="white-space: nowrap;">交货日期：</span>
<el-date-picker clearable v-model="queryParams.deliveryDateStart" type="date" value-format="yyyy-MM-dd"
placeholder="交货开始日期" style="width: 180px;" />
<span>~</span>
<el-date-picker clearable v-model="queryParams.deliveryDateEnd" type="date" value-format="yyyy-MM-dd"
placeholder="交货结束日期" style="width: 180px;" />
</div>
</div>
<!-- 更多筛选条件 -->
<div v-show="showMoreFilter" class="more-filter"
style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
style="margin-top: 8px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
<el-form-item label="合同名称" prop="contractName">
<el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable
@@ -37,16 +59,6 @@
<el-form-item label="需方" prop="customer">
<el-input v-model="queryParams.customer" placeholder="请输入需方" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="签订时间" prop="signTime">
<el-date-picker clearable v-model="queryParams.signTime" type="date" value-format="yyyy-MM-dd"
placeholder="请选择签订时间">
</el-date-picker>
</el-form-item>
<el-form-item label="交货日期" prop="deliveryDate">
<el-date-picker clearable v-model="queryParams.deliveryDate" type="date" value-format="yyyy-MM-dd"
placeholder="请选择交货日期">
</el-date-picker>
</el-form-item>
<el-form-item label="签订地点" prop="signLocation">
<el-input v-model="queryParams.signLocation" placeholder="请输入签订地点" clearable
@keyup.enter.native="handleQuery" />
@@ -107,6 +119,7 @@
<!-- 操作按钮独占一行 -->
<div style="display: flex; gap: 10px; padding-top: 8px; border-top: 1px dashed #f0f0f0;">
<el-button size="mini" type="text" :icon="row.isTop ? 'el-icon-top' : 'el-icon-s-operation'" @click.stop="handleToggleTop(row)">{{ row.isTop ? '取消置顶' : '置顶' }}</el-button>
<el-button size="mini" type="text" icon="el-icon-document" @click.stop="$emit('detailEdit', row)">详情编辑</el-button>
<el-button size="mini" type="text" icon="el-icon-download" @click.stop="handleExport(row)">导出</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="$emit('update', row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="$emit('delete', row)">删除</el-button>
@@ -155,8 +168,10 @@ export default {
contractCode: undefined,
supplier: undefined,
customer: undefined,
signTime: undefined,
deliveryDate: undefined,
signDateStart: undefined,
signDateEnd: undefined,
deliveryDateStart: undefined,
deliveryDateEnd: undefined,
signLocation: undefined,
status: undefined,
},
@@ -204,6 +219,10 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.$refs["queryForm"].resetFields();
this.queryParams.signDateStart = undefined;
this.queryParams.signDateEnd = undefined;
this.queryParams.deliveryDateStart = undefined;
this.queryParams.deliveryDateEnd = undefined;
this.handleQuery();
},

782
klp-ui/src/views/crm/contract/detail/index.vue Normal file
View File

@@ -0,0 +1,782 @@
<template>
<div class="contract-detail-page">
<!-- 筛选栏 -->
<div class="filter-section">
<el-input
v-model="contractQuery.contractCode"
placeholder="合同号"
size="small"
clearable
style="width: 140px"
@keyup.enter.native="handleQuery"
/>
<el-input
v-model="contractQuery.supplier"
placeholder="供方"
size="small"
clearable
style="width: 140px"
@keyup.enter.native="handleQuery"
/>
<el-input
v-model="contractQuery.customer"
placeholder="需方"
size="small"
clearable
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>
<el-date-picker
v-model="signDateRange"
type="daterange"
range-separator="至"
start-placeholder="签订开始"
end-placeholder="签订结束"
size="small"
style="width: 220px"
value-format="yyyy-MM-dd"
:unlink-panels="true"
@change="handleSignDateChange"
/>
<el-date-picker
v-model="deliveryDateRange"
type="daterange"
range-separator="至"
start-placeholder="交货开始"
end-placeholder="交货结束"
size="small"
style="width: 220px"
value-format="yyyy-MM-dd"
:unlink-panels="true"
@change="handleDeliveryDateChange"
/>
<el-input
v-model="contractQuery.signLocation"
placeholder="签订地点"
size="small"
clearable
style="width: 120px"
@keyup.enter.native="handleQuery"
/>
<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">筛选</el-button>
<el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<span v-if="total > 0" class="result-count">共 {{ total }} 条记录</span>
</div>
<!-- 合同详情表格 -->
<div class="table-section">
<el-table
:data="contractList"
size="small"
border
v-loading="loading"
style="width: 100%"
class="contract-edit-table"
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }"
>
<!-- 合同号 -->
<el-table-column label="合同号" prop="contractCode" min-width="130" fixed="left">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.contractCode"
size="small"
class="editable-cell"
:title="scope.row.contractCode"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 供方 -->
<el-table-column label="供方" prop="supplier" min-width="140">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.supplier"
size="small"
class="editable-cell"
:title="scope.row.supplier"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 需方 -->
<el-table-column label="需方" prop="customer" min-width="160">
<template slot-scope="scope">
<div class="editable-cell-wrapper" style="display: flex; align-items: center; gap: 2px;">
<el-input
v-model="scope.row.customer"
size="small"
class="editable-cell"
:title="scope.row.customer"
style="flex: 1"
@blur="saveRow(scope.row)"
/>
<el-button
type="text"
size="mini"
icon="el-icon-search"
style="flex-shrink: 0; padding: 4px 2px; color: #5F7BA0;"
@click="openCustomerDialog(scope.$index)"
/>
</div>
</template>
</el-table-column>
<!-- 签订日期 -->
<el-table-column label="签订日期" prop="signTime" width="110">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.signTime"
type="date"
size="small"
value-format="yyyy-MM-dd"
class="editable-cell-date"
:clearable="false"
@change="saveRow(scope.row)"
/>
</template>
</el-table-column>
<!-- 交货日期 -->
<el-table-column label="交货日期" prop="deliveryDate" width="110">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.deliveryDate"
type="date"
size="small"
value-format="yyyy-MM-dd"
class="editable-cell-date"
:clearable="false"
@change="saveRow(scope.row)"
/>
</template>
</el-table-column>
<!-- 签订地点 -->
<el-table-column label="签订地点" prop="signLocation" width="120">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.signLocation"
size="small"
class="editable-cell-blue"
:title="scope.row.signLocation"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 供方地址 -->
<el-table-column label="供方地址" prop="supplierAddress" min-width="140">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.supplierAddress"
size="small"
class="editable-cell-blue"
:title="scope.row.supplierAddress"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 供方电话 -->
<el-table-column label="供方电话" prop="supplierPhone" width="120">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.supplierPhone"
size="small"
class="editable-cell-blue"
:title="scope.row.supplierPhone"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 供方开户行 -->
<el-table-column label="供方开户行" prop="supplierBank" min-width="140">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.supplierBank"
size="small"
class="editable-cell-blue"
:title="scope.row.supplierBank"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 供方账号 -->
<el-table-column label="供方账号" prop="supplierAccount" min-width="140">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.supplierAccount"
size="small"
class="editable-cell-blue"
:title="scope.row.supplierAccount"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 需方地址 -->
<el-table-column label="需方地址" prop="customerAddress" min-width="140">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.customerAddress"
size="small"
class="editable-cell-green"
:title="scope.row.customerAddress"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 需方电话 -->
<el-table-column label="需方电话" prop="customerPhone" width="120">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.customerPhone"
size="small"
class="editable-cell-green"
:title="scope.row.customerPhone"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 需方开户行 -->
<el-table-column label="需方开户行" prop="customerBank" min-width="140">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.customerBank"
size="small"
class="editable-cell-green"
:title="scope.row.customerBank"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 需方账号 -->
<el-table-column label="需方账号" prop="customerAccount" min-width="140">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.customerAccount"
size="small"
class="editable-cell-green"
:title="scope.row.customerAccount"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 订单金额 -->
<el-table-column label="订单金额" prop="orderAmount" width="110">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.orderAmount"
size="small"
class="editable-cell-pink"
:title="scope.row.orderAmount"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 已收款 -->
<el-table-column label="已收款" prop="receivedAmount" width="110">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.receivedAmount"
size="small"
class="editable-cell-pink"
:title="scope.row.receivedAmount"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 状态 -->
<el-table-column label="状态" prop="status" width="90" 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-select>
</template>
</el-table-column>
<!-- 备注 -->
<el-table-column label="备注" prop="remark" min-width="150">
<template slot-scope="scope">
<div class="editable-cell-wrapper">
<el-input
v-model="scope.row.remark"
size="small"
class="editable-cell-pink"
:title="scope.row.remark"
@blur="saveRow(scope.row)"
/>
</div>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" width="80" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="saveRow(scope.row)">保存</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="contractQuery.pageNum"
:limit.sync="contractQuery.pageSize"
@pagination="getList"
/>
</div>
<!-- 客户选择弹窗 -->
<el-dialog
title="选择客户"
:visible.sync="customerDialogVisible"
width="720px"
append-to-body
:close-on-click-modal="false"
>
<div style="margin-bottom: 12px; display: flex; gap: 8px;">
<el-input
v-model="customerQuery.companyName"
placeholder="公司名称"
size="small"
clearable
style="width: 180px"
@keyup.enter.native="searchCustomer"
/>
<el-input
v-model="customerQuery.contactPerson"
placeholder="联系人"
size="small"
clearable
style="width: 140px"
@keyup.enter.native="searchCustomer"
/>
<el-button type="primary" size="small" icon="el-icon-search" @click="searchCustomer">搜索</el-button>
</div>
<el-table
:data="customerList"
v-loading="customerLoading"
size="small"
border
highlight-current-row
@current-change="handleCustomerCurrentChange"
style="width: 100%"
max-height="360"
>
<el-table-column label="公司名称" prop="companyName" min-width="160" show-overflow-tooltip />
<el-table-column label="联系人" prop="contactPerson" width="100" />
<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
small
layout="total, prev, pager, next"
:total="customerTotal"
:page-size="customerQuery.pageSize"
:current-page.sync="customerQuery.pageNum"
@current-change="searchCustomer"
/>
</div>
</el-dialog>
</div>
</template>
<script>
import { listOrder, updateOrder } from '@/api/crm/order'
import { listCustomer } from '@/api/crm/customer'
const STATUS_MAP = {
'0': { label: '草稿', type: 'info' },
'1': { label: '已生效', type: 'success' },
'2': { label: '已作废', type: 'danger' },
'3': { label: '已完成', type: 'primary' }
}
export default {
name: 'ContractDetailEdit',
data() {
return {
loading: false,
contractList: [],
total: 0,
signDateRange: null,
deliveryDateRange: null,
contractQuery: {
pageNum: 1,
pageSize: 50,
contractCode: undefined,
supplier: undefined,
customer: undefined,
status: undefined,
signDateStart: undefined,
signDateEnd: undefined,
deliveryDateStart: undefined,
deliveryDateEnd: undefined,
signLocation: undefined
},
// 存储原始数据，用于判断是否有修改
originalData: {},
// 客户选择弹窗
customerDialogVisible: false,
customerLoading: false,
customerList: [],
customerTotal: 0,
currentRowIndex: null,
customerQuery: {
pageNum: 1,
pageSize: 10,
companyName: undefined,
contactPerson: undefined
}
}
},
created() {
this.getList()
},
methods: {
statusType(status) {
return (STATUS_MAP[String(status)] || {}).type || ''
},
statusLabel(status) {
return (STATUS_MAP[String(status)] || {}).label || '未知'
},
// 签订日期范围变更
handleSignDateChange(val) {
if (val && val.length === 2) {
this.contractQuery.signDateStart = val[0]
this.contractQuery.signDateEnd = val[1]
} else {
this.contractQuery.signDateStart = undefined
this.contractQuery.signDateEnd = undefined
}
this.handleQuery()
},
// 交货日期范围变更
handleDeliveryDateChange(val) {
if (val && val.length === 2) {
this.contractQuery.deliveryDateStart = val[0]
this.contractQuery.deliveryDateEnd = val[1]
} else {
this.contractQuery.deliveryDateStart = undefined
this.contractQuery.deliveryDateEnd = undefined
}
this.handleQuery()
},
// 获取合同列表
getList() {
this.loading = true
listOrder(this.contractQuery).then(res => {
this.contractList = res.rows || []
this.total = res.total || 0
this.originalData = {}
this.contractList.forEach(row => {
this.originalData[row.orderId] = JSON.stringify(row)
})
}).catch(e => {
console.error(e)
}).finally(() => {
this.loading = false
})
},
// 判断数据是否有变化
hasChanged(row) {
if (!row.orderId || !this.originalData[row.orderId]) return false
return this.originalData[row.orderId] !== JSON.stringify(row)
},
// 筛选
handleQuery() {
this.contractQuery.pageNum = 1
this.getList()
},
// 重置
resetQuery() {
this.signDateRange = null
this.deliveryDateRange = null
this.contractQuery.contractCode = undefined
this.contractQuery.supplier = undefined
this.contractQuery.customer = undefined
this.contractQuery.status = undefined
this.contractQuery.signDateStart = undefined
this.contractQuery.signDateEnd = undefined
this.contractQuery.deliveryDateStart = undefined
this.contractQuery.deliveryDateEnd = undefined
this.contractQuery.signLocation = undefined
this.contractQuery.pageNum = 1
this.getList()
},
// 保存行数据
saveRow(row) {
if (!row.orderId) {
this.$message.warning('合同ID不存在')
return
}
// 判断是否有修改
if (!this.hasChanged(row)) {
return
}
updateOrder(row).then(() => {
// 更新原始数据
this.originalData[row.orderId] = JSON.stringify(row)
this.$message.success('保存成功')
}).catch(e => {
this.$message.error('保存失败')
console.error(e)
// 刷新数据
this.getList()
})
},
// 打开客户选择弹窗
openCustomerDialog(rowIndex) {
this.currentRowIndex = rowIndex
this.customerQuery.pageNum = 1
this.customerQuery.companyName = undefined
this.customerQuery.contactPerson = undefined
this.customerDialogVisible = true
this.searchCustomer()
},
// 搜索客户
searchCustomer() {
this.customerLoading = true
listCustomer(this.customerQuery).then(res => {
this.customerList = res.rows || []
this.customerTotal = res.total || 0
}).catch(e => {
console.error('查询客户失败', e)
}).finally(() => {
this.customerLoading = false
})
},
// 客户表格行高亮选中
handleCustomerCurrentChange(val) {
this.selectedCustomer = val
},
// 选择客户并回填
selectCustomer(customer) {
if (this.currentRowIndex === null || !this.contractList[this.currentRowIndex]) {
this.customerDialogVisible = false
return
}
const row = this.contractList[this.currentRowIndex]
row.customer = customer.companyName || ''
row.customerAddress = customer.address || ''
row.customerPhone = customer.contactWay || ''
row.customerTaxNo = customer.taxNumber || ''
if (customer.bankInfo) {
try {
const bankData = JSON.parse(customer.bankInfo)
if (Array.isArray(bankData) && bankData.length > 0) {
const firstBank = bankData[0]
row.customerBank = firstBank.bankName || ''
row.customerAccount = firstBank.accountNo || ''
} else if (typeof bankData === 'object') {
row.customerBank = bankData.bankName || ''
row.customerAccount = bankData.accountNo || ''
}
} catch (e) {
row.customerBank = customer.bankInfo || ''
}
}
this.customerDialogVisible = false
this.saveRow(row)
}
}
}
</script>
<style scoped>
.contract-detail-page {
padding: 16px;
min-height: 100%;
}
.filter-section {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
padding: 12px 16px;
background: #fff;
border-radius: 6px;
border: 1px solid #ebeef5;
}
.table-section {
background: #fff;
border-radius: 6px;
border: 1px solid #ebeef5;
padding: 16px;
}
/* 可编辑单元格包装器 */
.editable-cell-wrapper {
width: 100%;
}
/* 可编辑单元格样式 - 基础信息 */
.editable-cell ::v-deep .el-input__inner {
background-color: #fff3e6;
border-color: transparent;
padding: 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.editable-cell ::v-deep .el-input__inner:focus {
border-color: #5F7BA0;
background-color: #fff;
overflow: visible;
white-space: normal;
}
/* 可编辑单元格样式 - 蓝色 */
.editable-cell-blue ::v-deep .el-input__inner {
background-color: #e6f7ff;
border-color: transparent;
padding: 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.editable-cell-blue ::v-deep .el-input__inner:focus {
border-color: #5F7BA0;
background-color: #fff;
overflow: visible;
white-space: normal;
}
/* 可编辑单元格样式 - 绿色 */
.editable-cell-green ::v-deep .el-input__inner {
background-color: #f6ffed;
border-color: transparent;
padding: 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.editable-cell-green ::v-deep .el-input__inner:focus {
border-color: #5F7BA0;
background-color: #fff;
overflow: visible;
white-space: normal;
}
/* 可编辑单元格样式 - 粉色 */
.editable-cell-pink ::v-deep .el-input__inner {
background-color: #fff0f6;
border-color: transparent;
padding: 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.editable-cell-pink ::v-deep .el-input__inner:focus {
border-color: #5F7BA0;
background-color: #fff;
overflow: visible;
white-space: normal;
}
/* 日期选择器样式 */
.editable-cell-date ::v-deep .el-input__inner {
background-color: #e6f7ff;
border-color: transparent;
padding: 0 8px;
padding-right: 20px;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 11px;
}
.editable-cell-date ::v-deep .el-input__inner:focus {
border-color: #5F7BA0;
background-color: #fff;
}
/* 隐藏日期选择器的图标，防止与文字重叠 */
.editable-cell-date ::v-deep .el-input__prefix {
display: none;
}
.editable-cell-date ::v-deep .el-input__suffix {
right: 2px;
}
.editable-cell-date ::v-deep .el-input__suffix-inner {
transform: scale(0.8);
}
/* 表格样式优化 */
.contract-edit-table ::v-deep .el-input__inner {
border-color: transparent;
}
.contract-edit-table ::v-deep .el-input__inner:focus {
border-color: #5F7BA0;
}
.contract-edit-table ::v-deep .el-table__body td {
padding: 4px 0;
}
::v-deep .el-button--primary {
color: #fff !important;
background: #5F7BA0 !important;
border-color: #5F7BA0 !important;
}
::v-deep .el-button--primary:hover,
::v-deep .el-button--primary:focus {
background: #4d6a8e !important;
border-color: #4d6a8e !important;
}
/* 筛选结果数量显示 */
.result-count {
margin-left: auto;
font-size: 13px;
color: #606266;
font-weight: 500;
}
</style>

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

@@ -3,7 +3,8 @@
<!-- 左侧合同列表 -->
<div class="left-panel" style="width: 30%; border-right: 1px solid #e4e7ed; overflow-y: auto;">
<ContractList ref="orderList" @add="handleAdd" @update="handleUpdate" @delete="handleDelete"
@export="handleExport" @exportContract="handleExportContract" @rowClick="handleRowClick" />
@export="handleExport" @exportContract="handleExportContract" @rowClick="handleRowClick"
@detailEdit="handleDetailEdit" />
</div>
<!-- 右侧内容区域 -->
@@ -357,6 +358,31 @@ export default {
this.open = false;
this.reset();
},
/** 跳转合同详情编辑页（与列表路由同级，末段为 contractDetail；query.id 为 orderId） */
handleDetailEdit(row) {
const orderId = row && row.orderId;
if (!orderId) {
this.$message.warning("缺少订单ID，无法打开详情编辑");
return;
}
const segments = this.$route.path.split("/").filter(Boolean);
if (!segments.length) {
console.error("handleDetailEdit: 当前路由 path 为空", this.$route.path);
this.$message.error("路由异常，无法跳转");
return;
}
segments[segments.length - 1] = "contractDetail";
const path = `/${segments.join("/")}`;
this.$router
.push({ path, query: { id: String(orderId) } })
.catch((err) => {
if (err && err.name === "NavigationDuplicated") {
return;
}
console.error("跳转合同详情编辑失败:", err);
this.$message.error("跳转失败，请确认菜单里详情页路由地址为 contractDetail，且与列表页同级");
});
},
/** 行点击事件 */
handleRowClick(row) {
this.form = row;