From 198de69371b87aaf5b4483ae9a6d4a913b0a897f Mon Sep 17 00:00:00 2001 From: lSun <15893999301@qq.com> Date: Wed, 28 Jan 2026 15:57:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=98=E6=AC=BE=E5=8D=95=E7=94=B3=E8=AF=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/car_settlement/payment_form.css | 123 ++++++++++++++++++ js/car_settlement/child/payment_form.js | 42 +++--- .../child/payment_form.html | 23 ++-- 3 files changed, 158 insertions(+), 30 deletions(-) diff --git a/css/car_settlement/payment_form.css b/css/car_settlement/payment_form.css index a6b73bd..8e7e594 100644 --- a/css/car_settlement/payment_form.css +++ b/css/car_settlement/payment_form.css @@ -343,4 +343,127 @@ blockquote { .classTable input.form-control { overflow: hidden; text-overflow: ellipsis; +} + + + +/* ===================== 车辆表格专属优化样式 ===================== */ +/* 表格整体布局与基础样式 */ +#dispatch-car-table { + table-layout: fixed; /* 固定列宽布局，避免内容撑开列宽 */ + width: 100%; + border-collapse: collapse; /* 合并边框，避免双线条 */ + border-spacing: 0; + font-size: 12px; + color: #333; + background-color: #fff; + box-sizing: border-box; +} + +/* 表头样式：统一行高 + 禁止折行 + 背景色 */ +#dispatch-car-table th { + padding: 0 8px; + height: 40px; + line-height: 40px; /* 垂直居中，统一行高 */ + text-align: center; + white-space: nowrap; /* 禁止文字折行 */ + overflow: hidden; + text-overflow: ellipsis; /* 超长表头省略显示 */ + background-color: #F2F2F2; + border: 1px solid #DDDDDD; + vertical-align: middle; +} + +/* 内容单元格样式：统一内边距 + 边框 + 垂直居中 */ +#dispatch-car-table td { + padding: 6px 8px; + text-align: center; + vertical-align: middle; /* 关键：输入框/文字垂直居中 */ + border: 1px solid #DDDDDD; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 列宽精细化分配（修复语法错误 + 匹配HTML行内样式） */ +#dispatch-car-table th:nth-child(1) { width: 5% !important; } /* 类型（匹配HTML 5%） */ +#dispatch-car-table th:nth-child(2) { width: 6% !important; } /* 车型（匹配HTML 6%） */ +#dispatch-car-table th:nth-child(3) { width: 6% !important; } /* 型号（匹配HTML 6%） */ +#dispatch-car-table th:nth-child(4) { width: 7% !important; } /* 车牌（匹配HTML 7%） */ +#dispatch-car-table th:nth-child(5) { width: 6% !important; } /* 吨位（匹配HTML 6%） */ +#dispatch-car-table th:nth-child(6) { width: 7% !important; } /* 货物名称（匹配HTML 7%） */ +#dispatch-car-table th:nth-child(7) { width: 7% !important; } /* 起运地（匹配HTML 7%） */ +#dispatch-car-table th:nth-child(8) { width: 7% !important; } /* 目的地（匹配HTML 7%） */ +#dispatch-car-table th:nth-child(9) { width: 5% !important; } /* 预估公里数（匹配HTML 5%） */ +#dispatch-car-table th:nth-child(10){ width: 5% !important; } /* 实际公里数（匹配HTML 5%） */ +#dispatch-car-table th:nth-child(11){ width: 6% !important; } /* 单价（匹配HTML 6%） */ +#dispatch-car-table th:nth-child(12){ width: 6% !important; } /* 预估金额（匹配HTML 6%） */ +#dispatch-car-table th:nth-child(13){ width: 10%!important; } /* 附件（匹配HTML 10%） */ +#dispatch-car-table th:nth-child(14){ width: 9% !important; } /* 需求计划编号（匹配HTML 9%） */ + +/* 核心修复：实际公里数单元格+输入框样式 */ +#dispatch-car-table td:nth-child(10) { + text-overflow: clip !important; /* 彻底禁用省略号 */ + overflow: visible !important; /* 允许内容正常显示，不截断 */ + min-width: 80px; /* 保底宽度，避免列宽过小 */ +} +#dispatch-car-table td:nth-child(10) input.form-control { + width: calc(100% - 8px) !important; /* 适配单元格内边距，不溢出 */ + min-width: unset !important; /* 去掉最小宽度限制 */ + max-width: unset !important; /* 去掉最大宽度限制 */ + text-align: center !important; /* 数字居中，视觉更协调 */ +} + +/* 输入框样式：统一尺寸 + 视觉风格 */ +#dispatch-car-table input.form-control { + width: 100%; + min-width: 70px; + max-width: 100px; + height: 28px; + padding: 0 6px; + border: 1px solid #e5e6eb; + border-radius: 2px; + background-color: #fff; + font-size: 12px; + color: #333; + box-sizing: border-box; + text-align: right; /* 数字右对齐，符合财务习惯 */ + outline: none; + margin: 0; /* 清除默认外边距，避免错位 */ + display: inline-block; +} + +/* 输入框聚焦高亮：提升交互反馈 */ +#dispatch-car-table input.form-control:focus { + border-color: #409eff; + box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1); + background-color: #fff; +} + +/* 金额/数字列右对齐：统一视觉规范 */ +#dispatch-car-table td:nth-child(11), /* 单价 */ +#dispatch-car-table td:nth-child(12), /* 预估金额 */ +#dispatch-car-table td:nth-child(13) { /* 出入场金额 */ + text-align: right; +} + +/* 超长文本列（起运地/目的地）特殊处理 */ +#dispatch-car-table td:nth-child(7), /* 起运地 */ +#dispatch-car-table td:nth-child(8) { /* 目的地 */ + max-width: 120px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 附件链接样式：统一颜色，提升点击感 */ +#dispatch-car-table td a { + color: #409eff; + text-decoration: none; + cursor: pointer; +} + +#dispatch-car-table td a:hover { + color: #66b1ff; + text-decoration: underline; } \ No newline at end of file diff --git a/js/car_settlement/child/payment_form.js b/js/car_settlement/child/payment_form.js index 8c32aef..f2845e7 100644 --- a/js/car_settlement/child/payment_form.js +++ b/js/car_settlement/child/payment_form.js @@ -264,8 +264,8 @@ function getPayCarDetails(id) { imgNum += item.driverUserImage.filter(item => { return item.type !== '6' }).length; imgNum += item.fileList.length; - const actualGls = item.gls || 0; // 实际公里数初始=预估公里数 - const actualMoney = 0; // 实际金额初始=预估金额 + const actualGls = formatToTwoDecimals(item.gls) || 0.00; // 实际公里数初始=预估公里数 + // const actualMoney = formatToTwoDecimals(0); // 实际金额初始=预估金额 html += "" + "" + item.type + "" + @@ -284,8 +284,8 @@ function getPayCarDetails(id) { "" + item.glsPrice + "" + " ¥ " + (item.glsMoney ? item.glsMoney : 0) + "" + - "" + + // "" + "" + imgNum + "查看附件>>" + "" + item.planCode + "" + @@ -312,8 +312,8 @@ function getPayCarDetails(id) { imgNum += item.operaImage.filter(item => { return item.type === '2' || item.type === '3' || item.type === '6' }).length; imgNum += item.fileList.length; - const actualPlanDay = item.planDay || 0; - const actualDcMoney = 0; + const actualPlanDay = item.planDay|| 0; + const actualDcMoney = formatToTwoDecimals(0); html += '' + '' + item.type + '' + @@ -426,29 +426,35 @@ function getEditedActualValues() { return actualValues; } -// 输入框正则校验（仅正数 + 最多两位小数 + 不超过1亿元） -$(document).on('input', '.classTable input.form-control', function() { - // 1. 只保留数字和小数点，过滤负号、字母、符号等所有非法字符 - this.value = this.value - .replace(/[^0-9.]/g, '') // 过滤除了数字和小数点的所有字符（包括负号） - .replace(/\.{2,}/g, '.') // 多个小数点只保留第一个 - .replace(/^0+(?=\d)/, ''); // 去除开头多余的0（如 000123 → 123） +// 全局工具函数：格式化数字为两位小数（处理空值、非数字） +function formatToTwoDecimals(num) { + if (num === null || num === undefined || num === '' || isNaN(Number(num))) return '0.00'; + return Number(num).toFixed(2); +} + +// 输入框正则校验（仅正数 + 最多两位小数 + 不超过1亿元） +$(document).on('input', '.actual-gls, .actual-money, .actual-dc-money', function() { + this.value = this.value + .replace(/[^0-9.]/g, '') // 过滤非法字符 + .replace(/\.{2,}/g, '.') // 单个小数点 + .replace(/^0+(?=\d)/, ''); // 去除开头多余0 - // 2. 限制小数点后最多两位 if (this.value.indexOf('.') !== -1) { const parts = this.value.split('.'); this.value = parts[0] + '.' + parts[1].substring(0, 2); } - // 3. 限制数值上限：不超过1亿元（100000000） const numValue = Number(this.value || 0); - const maxAmount = 100000000; // 1亿元 + const maxAmount = 100000000; if (numValue > maxAmount) { - this.value = maxAmount.toFixed(2); // 超过上限强制设为1亿元 + this.value = maxAmount.toFixed(2); } }); - +// 失焦格式化 +$(document).on('blur', '.actual-gls, .actual-money, .actual-dc-money', function() { + this.value = formatToTwoDecimals(this.value); +}); // 关闭页面 function closePage(type) { diff --git a/page/car_application_audit/child/payment_form.html b/page/car_application_audit/child/payment_form.html index 25741f0..3c2d701 100644 --- a/page/car_application_audit/child/payment_form.html +++ b/page/car_application_audit/child/payment_form.html @@ -102,25 +102,24 @@ 实际公里数 单价
(元/吨*公里) 预估金额 - 出入场金额 行驶证/挂靠协议
驾驶证/身份证/导航图 需求计划编号 - - - - - - + + + + + + - - - - - + + + + +