From 39e6956c0dacf0b34d0cc22f6cca5ce8fa8be53f Mon Sep 17 00:00:00 2001
From: hayu <1604366271@qq.com>
Date: Thu, 29 Jan 2026 17:08:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=8B=A8/=E5=8F=91=E8=B4=A7=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=A2=9E=E5=8A=A0=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/aq_demand_plan/send_out_pro_detail.css    |  2 +-
 .../child/send_out_pro_detail.js              | 60 ++++++++++++++-----
 .../child/send_out_pro_detail.html            | 24 +++++++-
 3 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/css/aq_demand_plan/send_out_pro_detail.css b/css/aq_demand_plan/send_out_pro_detail.css
index a115d97..ffa6797 100644
--- a/css/aq_demand_plan/send_out_pro_detail.css
+++ b/css/aq_demand_plan/send_out_pro_detail.css
@@ -40,7 +40,7 @@ body {
 }
 
 #detail-box {
-    width: 85%;
+    width: 99%;
     height: 100px;
     justify-content: space-between;
 }
diff --git a/js/aq_demand_plan/child/send_out_pro_detail.js b/js/aq_demand_plan/child/send_out_pro_detail.js
index 29d7740..8712701 100644
--- a/js/aq_demand_plan/child/send_out_pro_detail.js
+++ b/js/aq_demand_plan/child/send_out_pro_detail.js
@@ -100,6 +100,7 @@ function reloadTable(pageNum) {
     );
 }
 
+// 初始化表格
 // 初始化表格
 function initTable() {
     tableIns = table.render({
@@ -144,38 +145,34 @@ function initTable() {
                 },
                 {
                     field: "planCode",
-                    width: '10%',
+                    width: '9%',
                     title: "需求计划编号",
                     unresize: true,
                     align: "center",
-                    sort: true,
                     templet: function (d) {
                         return "<a style='color:#409eff;' onclick='viewPlanDetail(" + JSON.stringify(d) + ")'>" + d.planCode + "</a>";
                     },
                 },
                 {
                     field: "creator",
-                    width: '10%',
+                    width: '8%',
                     title: "申请人",
                     unresize: true,
                     align: "center",
-                    sort: true,
                 },
                 {
                     field: "createTime",
                     title: "申请时间",
-                    width: '12%',
+                    width: '9%',
                     unresize: true,
                     align: "center",
-                    sort: true,
                 },
                 {
                     field: "remark",
                     title: "备注",
-                    width: '14%',
+                    width: '10%', // 微调宽度，适配新增字段
                     unresize: true,
                     align: "center",
-                    sort: true,
                     templet: function (d) {
                         if (d.remark) {
                             if (d.remark.length > 60) {
@@ -194,7 +191,6 @@ function initTable() {
                     width: '8%',
                     unresize: true,
                     align: "center",
-                    sort: true,
                     templet: function (d) {
                         if (d.status === '未发货') {
                             return '<span style="color:#ff9900;font-weight:bold;"> ● </span>待发货';
@@ -207,11 +203,10 @@ function initTable() {
                 },
                 {
                     field: "cgNum",
-                    width: '8%',
+                    width: '7%',
                     title: "采购数量",
                     unresize: true,
                     align: "center",
-                    sort: true,
                     templet: function (d) {
                         if (d.status === '未发货') {
                             return '/';
@@ -226,7 +221,6 @@ function initTable() {
                     title: "采购金额",
                     unresize: true,
                     align: "center",
-                    sort: true,
                     templet: function (d) {
                         if (d.status === '未发货') {
                             return '/';
@@ -238,10 +232,9 @@ function initTable() {
                 {
                     field: "lkNum",
                     title: "利库数量",
-                    width: '8%',
+                    width: '7%',
                     align: "center",
                     unresize: true,
-                    sort: true,
                     templet: function (d) {
                         if (d.status === '未发货') {
                             return '/';
@@ -250,6 +243,40 @@ function initTable() {
                         }
                     },
                 },
+                // 新增：进度条字段（核心实现）
+                {
+                    title: "完成进度",
+                    width: '12%', // 从12%加宽到15%，足够显示进度条+百分比，核心解决遮挡
+                    align: "center",
+                    unresize: true,
+                    templet: function (d) {
+                        if (d.status === '未发货') {
+                            return '/';
+                        }
+                        const cgNum = Number(d.cgNum) || 0;
+                        const lkNum = Number(d.lkNum) || 0;
+                        const needNum = Number(d.needNum) || 0;
+
+                        let progress = 0;
+                        if (needNum > 0) {
+                            progress = (cgNum + lkNum) / needNum * 100;
+                        }
+                        const progressFixed = progress.toFixed(2);
+                        let progressColor = "layui-bg-orange";
+                        if (progress >= 100) {
+                            progressColor = "layui-bg-primary";
+                        }
+                        if (progress > 100) {
+                            progressColor = "layui-bg-red";
+                        }
+                        // 关键：给进度条外层加自定义class（plan-progress），用于重写样式，解决文字遮挡
+                        return `
+            <div class="plan-progress layui-progress" lay-showpercent="true">
+                <div class="layui-progress-bar ${progressColor}" lay-percent="${progressFixed}%"></div>
+            </div>
+        `;
+                    }
+                },
                 {
                     title: "详情",
                     width: '14%',
@@ -268,7 +295,6 @@ function initTable() {
                             html += "<div class='splitLine'>|</div><a onclick='sendOutForm(" + JSON.stringify(d) + ",3)'>补发货</a>";
                             html += "<div class='splitLine' >|</div><a style='color: red' onclick='deleteDetail(" + d.id + ")'>撤销</a>";
                         }
-
                         return html;
                     },
                 },
@@ -280,7 +306,11 @@ function initTable() {
         done: function (res, curr, count) {
             pageNum = tableIns.config.page.curr;
             table.resize("currentTableId");
+            // 关键：表格渲染完成后，重新渲染进度条组件（Layui动态元素需手动渲染）
+            element.render('progress');
         },
+        // 关键：开启单元格内容自动渲染（解决动态进度条样式失效问题）
+        autoRender: true
     });
 }
 
diff --git a/page/aq_demand_plan/child/send_out_pro_detail.html b/page/aq_demand_plan/child/send_out_pro_detail.html
index 8060465..eccb349 100644
--- a/page/aq_demand_plan/child/send_out_pro_detail.html
+++ b/page/aq_demand_plan/child/send_out_pro_detail.html
@@ -11,7 +11,29 @@
     <link rel="stylesheet" href="../../../css/aq_demand_plan/send_out_pro_detail.css" media="all">
 </head>
 <style>
-
+    /* 采购计划进度条专属样式，解决百分比遮挡 */
+    .plan-progress {
+        margin: 0 !important; /* 清除默认外边距 */
+        padding: 0 !important; /* 清除默认内边距 */
+        height: 7px !important; /* 适度加高进度条，更美观 */
+        line-height: 16px !important; /* 行高和高度一致，文字垂直居中 */
+    }
+    /* 重写进度条百分比文字样式，避免被进度条块遮挡 */
+    .plan-progress .layui-progress-percent {
+        right: 2px !important; /* 调整文字右间距，避免超出容器 */
+        top: 0 !important; /* 文字垂直居中 */
+        font-size: 12px !important; /* 适配窄列的字体大小 */
+        color: #333 !important; /* 文字加深，更清晰 */
+        width: auto !important; /* 自适应文字宽度 */
+    }
+    /* 进度条填充块样式优化 */
+    .plan-progress .layui-progress-bar {
+        height: 100% !important;
+        border-radius: 4px !important; /* 圆角更柔和 */
+    }
+    .layui-table-cell {
+        padding-top: 16px;
+    }
 </style>
 
 <body id="body">