付款单申请

2026-01-28 15:57:50 +08:00 · 2026-01-28 15:57:50 +08:00 · 198de69371
parent d3dbc15b17
commit 198de69371
3 changed files with 158 additions and 30 deletions
--- 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;
 }
--- 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 += "<tr>" +
                        "<td>" + item.type + "</td>" +
@ -284,8 +284,8 @@ function getPayCarDetails(id) {
                        "<td>" + item.glsPrice + "</td>" +
                        "<td> ¥ " + (item.glsMoney ? item.glsMoney : 0) + "</td>" +
 						
-						 "<td><input type='number' class='form-control actual-money' value='" + actualMoney + 
-						                "' style='width: 100%; padding: 2px; border: 1px solid #ddd;' data-id='" + item.id + "'></td>" +
+						 // "<td><input type='number' class='form-control actual-money' value='" + actualMoney + 
+						 //                "' style='width: 100%; padding: 2px; border: 1px solid #ddd;' data-id='" + item.id + "'></td>" +
 						
                        "<td style='color:#409eff'>" + imgNum + "<a style='color:#409eff;margin:0 5px;cursor: pointer;' onclick='viewFileDetail(" + JSON.stringify(item) + ",1)'>查看附件>></a></td>" +
                        "<td><a style='color:#409eff;margin:0 5px;cursor: pointer;' onclick='viewPlanDetail(" + JSON.stringify(item) + ")'>" + item.planCode + "</a></td>" +
@ -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 += '<tr>' +
                        '<td>' + item.type + '</td>' +
@ -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) {
--- a/page/car_application_audit/child/payment_form.html
+++ b/page/car_application_audit/child/payment_form.html
@ -102,25 +102,24 @@
                        <th style="width: 5%;">实际公里数</th>
                        <th style="width: 6%;">单价<br>(元/吨*公里)</th>
                        <th style="width: 6%;">预估金额</th>
-                        <th style="width: 6%;">出入场金额</th>
                        <th style="width: 10%;">行驶证/挂靠协议<br>驾驶证/身份证/导航图</th>
                        <th style="width: 9%;">需求计划编号</th>
                    </tr>
                </table>
                <table style="display: none;" class="classTable" id="dispatch-car-table2">
                    <tr>
-                        <th style="width: 10%;">类型</th>
-                        <th style="width: 10%;">车型</th>
-                        <th style="width: 8%;">型号</th>
-                        <th style="width: 10%;">车牌</th>
-                        <th style="width: 10%;">使用地</th>
-                        <th style="width: 8%;">计划使用天数</th>
+                        <th style="width: 9%;">类型</th>
+                        <th style="width: 9%;">车型</th>
+                        <th style="width: 7%;">型号</th>
+                        <th style="width: 9%;">车牌</th>
+                        <th style="width: 9%;">使用地</th>
+                        <th style="width: 7%;">计划使用天数</th>
                        <th style="width: 8%;">实际使用天数</th>
-                        <th style="width: 15%;">租赁单价</th>
-                        <th style="width: 8%;">预估金额</th>
-                        <th style="width: 8%;">出入场金额</th>
-                        <th style="width: 11%;">操作证/<br>身份证/导航图</th>
-                        <th style="width: 10%;">需求计划编号</th>
+                        <th style="width: 13%;">租赁单价</th>
+                        <th style="width: 7%;">预估金额</th>
+                        <th style="width: 7%;">出入场金额</th>
+                        <th style="width: 10%;">操作证/<br>身份证/导航图</th>
+                        <th style="width: 9%;">需求计划编号</th>
                    </tr>
                </table>
            </div>