调拨/发货详情增加进度条
This commit is contained in:
parent
7901fbc2d0
commit
39e6956c0d
|
|
@ -40,7 +40,7 @@ body {
|
|||
}
|
||||
|
||||
#detail-box {
|
||||
width: 85%;
|
||||
width: 99%;
|
||||
height: 100px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue