// @
ts-nocheck
// 监听来自父窗口的消息
window
.addEventListener
('message', function
(event) {
if
(event
.source === window
.parent && event
.data === 'DataManagerReady') {
initializeDataManager
();
}
});
// 初始化数据管理器
function initializeDataManager
() {
const dataManager = window
.parent
.dataManager;
if
(dataManager) {
// 注册数据刷新回调
dataManager
.registerCallback
('all', function
(operation, entity, data) {
updatePageData
(dataManager);
});
// 初始页面数据更新
updatePageData
(dataManager);
// 设置搜索功能
setupSearch
(dataManager);
// 设置排序功能
setupSorting
();
} else {
console
.error
('DataManager not available');
}
}
// 更新页面数据
function updatePageData
(dataManager) {
updateSta
ts(dataManager);
updateTable
(dataManager);
document.getElementById('lastUpdate')
.textContent = new Date
()
.toLocaleTimeString
();
}
// 更新统计卡片数据
function updateSta
ts(dataManager) {
const data = dataManager
.data;
document.getElementById('orderCount')
.textContent = data
.dingdans?
.length || 0;
document.getElementById('productCount')
.textContent = data
.chanpins?
.length || 0;
document.getElementById('materialCount')
.textContent = data
.bancais?
.length || 0;
const totalStock = data
.kucuns?
.reduce
((sum, kucun) => sum + kucun
.shuliang, 0) || 0;
document.getElementById('totalStock')
.textContent = totalStock;
}
// 全局变量存储当前排序状态
let curren
tSort = {
column: null,
direction: 'asc' // 'asc' 或 'desc'
};
// 更新结果表格
function updateTable
(dataManager) {
const tableBody =
document.getElementById('resultBody');
tableBody
.innerHTML = '';
const data = dataManager
.data;
let resul
ts = []; // 改为let以便排序
let resultCount = 0;
// 处理订单产品数据
if
(data
.dingdan_chanpins) {
data
.dingdan_chanpins
.forEach
(dc => {
if
(!dc
.dingdan || !dc
.chanpin) return;
if
(dc
.chanpin
.chanpin_zujians) {
dc
.chanpin
.chanpin_zujians
.forEach
(cz => {
if
(!cz
.zujian || !cz
.bancai) return;
const bancai = cz
.bancai;
const materialInfo = getMaterialInfo
(bancai);
const stockQuantity = dataManager
.data
.kucuns?
.find
(ku => ku
.bancai?
.id==bancai
.id)?
.shuliang || 0;
resul
ts.push
({
orderNumber: dc
.dingdan
.number,
productInfo: dc
.chanpin
.bianhao,
productQuantity: dc
.shuliang,
component: cz
.zujian
.name,
material: materialInfo,
materialPerComponent: cz
.one_howmany,
materialOrderQuantity: dc
.shuliang * cz
.one_howmany,
stockQuantity: stockQuantity,
// 添加原始数据用于排序
raw: {
orderNumber: dc
.dingdan
.number,
productQuantity: dc
.shuliang,
materialPerComponent: cz
.one_howmany,
materialOrderQuantity: dc
.shuliang * cz
.one_howmany,
stockQuantity: stockQuantity,
thickness: bancai
.houdu || 0
},
operation: `<button class="btn btn-sm btn-outline-primary" onclick="showMaterialDetail
(${bancai
.id})">详情</button>`
});
resultCount++;
});
}
});
}
// 处理直接订单组件数据
if
(data
.dingdan_chanpin_zujians) {
data
.dingdan_chanpin_zujians
.forEach
(dcz => {
if
(!dcz
.dingdan || !dcz
.chanpin_zujian || !dcz
.chanpin_zujian
.zujian || !dcz
.bancai) return;
const bancai = dcz
.bancai;
const materialInfo = getMaterialInfo
(bancai);
const stockQuantity = dataManager
.data
.kucuns?
.find
(ku => ku
.bancai?
.id==bancai
.id)?
.shuliang || 0;
resul
ts.push
({
orderNumber: dcz
.dingdan
.number,
productInfo: dcz
.chanpin_zujian
.chanpin?
.bianhao || '独立组件',
productQuantity: dcz
.shuliang,
component: dcz
.chanpin_zujian
.zujian
.name,
material: materialInfo,
materialPerComponent: dcz
.chanpin_zujian
.one_howmany,
materialOrderQuantity: dcz
.shuliang * dcz
.chanpin_zujian
.one_howmany,
stockQuantity: stockQuantity,
// 添加原始数据用于排序
raw: {
orderNumber: dcz
.dingdan
.number,
productQuantity: dcz
.shuliang,
materialPerComponent: dcz
.chanpin_zujian
.one_howmany,
materialOrderQuantity: dcz
.shuliang * dcz
.chanpin_zujian
.one_howmany,
stockQuantity: stockQuantity,
thickness: bancai
.houdu || 0
},
operation: `<button class="btn btn-sm btn-outline-primary" onclick="showMaterialDetail
(${bancai
.id})">详情</button>`
});
resultCount++;
});
}
// 应用排序
if
(curren
tSort
.column !== null) {
resul
ts = sortResul
ts(resul
ts, curren
tSort
.column, curren
tSort
.direction);
}
// 填充表格
if
(resultCount > 0) {
document.getElementById('noResul
ts')
.style
.display = 'none';
resul
ts.forEach
(row => {
const tr =
document.createElement
('tr');
tr
.innerHTML = `
<td>${row
.orderNumber}</td>
<td>${row
.productInfo}</td>
<td>${row
.productQuantity}</td>
<td>${row
.component}</td>
<td>${row
.material}</td>
<td>${row
.materialPerComponent}</td>
<td>${row
.materialOrderQuantity}</td>
<td>${row
.stockQuantity}</td>
<td>${row
.operation}</td>
`;
tableBody
.appendChild
(tr);
});
} else {
document.getElementById('noResul
ts')
.style
.display = 'flex';
}
document.getElementById('resultCount')
.textContent = resultCount;
}
// 排序函数
function sortResul
ts(resul
ts, columnIndex, direction) {
return resul
ts.sort
((a, b) => {
// 根据列索引确定排序字段
let field;
switch
(columnIndex) {
case 0: // 订单号
field = 'orderNumber';
break;
case 1: // 产品信息
field = 'productInfo';
break;
case 2: // 产品数量
field = 'productQuantity';
break;
case 3: // 组件
field = 'component';
break;
case 4: // 板材
// 特殊处理：按厚度排序
return sortByThickness
(a, b, direction);
case 5: // 单件用量
field = 'materialPerComponent';
break;
case 6: // 订单用量
field = 'materialOrderQuantity';
break;
case 7: // 库存数量
field = 'stockQuantity';
break;
default:
return 0;
}
// 数值排序
if
(['productQuantity', 'materialPerComponent', 'materialOrderQuantity', 'stockQuantity']
.includes
(field)) {
return sortNumeric
(a
.raw[field], b
.raw[field], direction);
}
// 字符串排序
return sor
tString
(a[field], b[field], direction);
});
}
// 按厚度排序
function sortByThickness
(a, b, direction) {
return sortNumeric
(a
.raw
.thickness, b
.raw
.thickness, direction);
}
// 数值排序
function sortNumeric
(aVal, bVal, direction) {
const aNum = parseFloat
(aVal) || 0;
const bNum = parseFloat
(bVal) || 0;
if
(direction === 'asc') {
return aNum - bNum;
} else {
return bNum - aNum;
}
}
// 字符串排序
function sor
tString
(aVal, bVal, direction) {
const aStr = String
(aVal)
.toLowerCase
();
const bStr = String
(bVal)
.toLowerCase
();
if
(aStr < bStr) {
return direction === 'asc' ? -1 : 1;
} else if
(aStr > bStr) {
return direction === 'asc' ? 1 : -1;
}
return 0;
}
// 获取板材详细信息函数（添加油状态）
function getMaterialInfo
(bancai) {
if
(!bancai) return '未知板材';
// 获取材质名称
const caizhiName = bancai
.caizhi?
.name || '未知材质';
// 获取木皮信息（添加油状态）
const formatMupi =
(mupi) => {
if
(!mupi) return null;
return `${mupi
.name}${mupi
.you ? '
(油)' : ''}`;
};
const mupi1Str = formatMupi
(bancai
.mupi1) || '无';
const mupi2Str = formatMupi
(bancai
.mupi2) || '无';
const mupiInfo = mupi1Str +
(mupi2Str !== '无' ? `/${mupi2Str}` : '');
// 厚度转换为字符串
const thickness = bancai
.houdu ? `${bancai
.houdu
.toFixed
(1)}mm` : '未知厚度';
return `${caizhiName} - ${mupiInfo}
(${thickness})`;
}
// 设置搜索功能（添加油状态搜索）
function setupSearch
(dataManager) {
// 订单搜索
$
('#orderSearch')
.on
('input', function
() {
filterTable
($
(this)
.val
()
.toLowerCase
(), 0);
});
// 产品搜索
$
('#produc
tSearch')
.on
('input', function
() {
filterTable
($
(this)
.val
()
.toLowerCase
(), 1);
});
// 板材材质搜索
$
('#materialSearch')
.on
('input', function
() {
filterTable
($
(this)
.val
()
.toLowerCase
(), 4);
});
// 木皮搜索（添加油状态搜索）
$
('#woodSearch')
.on
('input', function
() {
const searchTerm = $
(this)
.val
()
.toLowerCase
();
// 支持中文和数字搜索
const searchKeywords = {
'有油': '有油',
'无油': '无油',
'you': '有油',
'wu': '无油',
'1': '有油',
'0': '无油',
'
(油)': '
(油)'
};
const actualTerm = searchKeywords[searchTerm] || searchTerm;
filterTable
(actualTerm, 4);
});
// 厚度搜索（修复正则表达式）
$
('#thicknessSearch')
.on
('input', function
() {
filterTable
($
(this)
.val
()
.toLowerCase
(), 4);
});
// 库存状态搜索
$
('#stockStatusBtn')
.click
(function
() {
const minStock = parseInt
($
('#minStock')
.val
()) || 0;
const maxStock = parseInt
($
('#maxStock')
.val
()) || Number
.MAX_SAFE_INTEGER;
filterByStock
(minStock, maxStock);
});
}
// 设置排序功能
function setupSorting
() {
// 获取所有表头
const headers =
document.querySelectorAll
('#resul
tsTable th[data-sortable]');
headers
.forEach
((header, index) => {
header
.addEventListener
('click',
() => {
// 更新排序状态
if
(curren
tSort
.column === index) {
// 同一列：切换方向
curren
tSort
.direction = curren
tSort
.direction === 'asc' ? 'desc' : 'asc';
} else {
// 新列：默认升序
curren
tSort
.column = index;
curren
tSort
.direction = 'asc';
}
// 更新UI
updateSortIndicators
();
// 重新渲染表格
const dataManager = window
.parent
.dataManager;
if
(dataManager) {
updateTable
(dataManager);
}
});
});
}
// 更新排序指示器
function updateSortIndicators
() {
// 清除所有指示器
const headers =
document.querySelectorAll
('#resul
tsTable th[data-sortable]');
headers
.forEach
(header => {
header
.querySelector
('
.sort-indicator')
.textContent = '';
});
// 为当前排序列添加指示器
if
(curren
tSort
.column !== null) {
const currentHeader = headers[curren
tSort
.column];
const indicator = currentHeader
.querySelector
('
.sort-indicator');
indicator
.textContent = curren
tSort
.direction === 'asc' ? '↑' : '↓';
}
}
// 表格过滤函数（修复厚度搜索）
function filterTable
(searchTerm, columnIndex) {
const rows = $
('#resultBody tr');
let visibleCount = 0;
rows
.each
(function
() {
const cellText = $
(this)
.find
(`td:eq
(${columnIndex})`)
.text
()
.toLowerCase
();
let isMatch = false;
// 特殊处理油状态搜索
if
(searchTerm === '有油' || searchTerm === '无油' || searchTerm === '
(油)') {
isMatch = cellText
.includes
(searchTerm);
}
// 处理厚度字符串匹配（修复正则表达式）
else if
(columnIndex === 4 && !isNaN
(parseFloat
(searchTerm))) {
// 提取厚度数字部分进行匹配
const thicknessMatch = cellText
.match
(/
(\d+\
.?\d*)/);
if
(thicknessMatch) {
const thicknessValue = parseFloat
(thicknessMatch[1]);
const searchValue = parseFloat
(searchTerm);
// 允许小数点误差
isMatch = Math
.abs
(thicknessValue - searchValue) < 0
.5;
}
}
// 常规文本匹配
else {
isMatch = cellText
.includes
(searchTerm);
}
$
(this)
.toggle
(isMatch);
if
(isMatch && searchTerm) {
$
(this)
.addClass
('highlight');
} else {
$
(this)
.removeClass
('highlight');
}
if
(isMatch) visibleCount++;
});
document.getElementById('resultCount')
.textContent = visibleCount;
document.getElementById('noResul
ts')
.style
.display = visibleCount > 0 ? 'none' : 'flex';
}
// 按库存量过滤
function filterByStock
(minStock, maxStock) {
const rows = $
('#resultBody tr');
let visibleCount = 0;
rows
.each
(function
() {
const stockCell = $
(this)
.find
('td:eq
(7)')
.text
();
const stockValue = parseInt
(stockCell) || 0;
const isMatch = stockValue >= minStock && stockValue <= maxStock;
$
(this)
.toggle
(isMatch);
if
(isMatch) visibleCount++;
});
document.getElementById('resultCount')
.textContent = visibleCount;
document.getElementById('noResul
ts')
.style
.display = visibleCount > 0 ? 'none' : 'flex';
}
// 显示板材详情（添加油状态显示）
function showMaterialDetail
(bancaiId) {
const dataManager = window
.parent
.dataManager;
if
(!dataManager) return;
const bancais = dataManager
.data
.bancais || [];
const bancai = bancais
.find
(b => b
.id === bancaiId);
const kucun = dataManager
.data
.kucuns?
.fill
(ku => ku
.bancai
.id==bancai
.id) ;
if
(!bancai) {
alert
('未找到板材信息');
return;
}
// 格式化木皮信息（添加油状态）
const formatMupiDetail =
(mupi) => {
if
(!mupi) return '无';
return `${mupi
.name} ${mupi
.you ? '
(油)' : ''}`;
};
// 构建详情信息
const detailHtml = `
<div class="material-detail">
<h4>板材详情
(ID: ${bancai
.id})</h4>
<p><strong>材质:</strong> ${bancai
.caizhi?
.name || '未知'}</p>
<p><strong>厚度:</strong> ${bancai
.houdu ? bancai
.houdu
.toFixed
(1) + 'mm' : '未知'}</p>
<p><strong>木皮1:</strong> ${formatMupiDetail
(bancai
.mupi1)}</p>
<p><strong>木皮2:</strong> ${formatMupiDetail
(bancai
.mupi2)}</p>
<p><strong>库存数量:</strong> ${kucun?
.shuliang || 0}</p>
<div class="related-orders">
<h5>相关订单:</h5>
<ul>
${getRelatedOrders
(bancai)
.map
(order =>
`<li>订单 ${order
.number}
(ID: ${order
.id})</li>`
)
.join
('') || '<li>无相关订单</li>'}
</ul>
</div>
</div>
`;
// 显示详情（实际项目中可用模态框）
const detailWindow = window
.open
('', '_blank', 'width=600,height=400');
detailWindow
.document.write
(`
<!DOCTYPE html>
<html>
<head>
<title>板材详情</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.material-detail { max-width: 500px; }
h4 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
p { margin: 10px 0; }
.related-orders { margin-top: 20px; }
ul { list-style-type: none; padding: 0; }
li { padding: 5px 0; border-bottom: 1px solid #eee; }
</style>
</head>
<body>
${detailHtml}
</body>
</html>
`);
detailWindow
.document.close
();
}
// 获取板材相关订单
function getRelatedOrders
(bancai) {
const dataManager = window
.parent
.dataManager;
if
(!dataManager) return [];
const orders = [];
const dingdan_chanpin_zujians = dataManager
.data
.dingdan_chanpin_zujians || [];
// 查找直接订单组件关联
dingdan_chanpin_zujians
.forEach
(dcz => {
if
(dcz
.bancai?
.id === bancai
.id && dcz
.dingdan &&
!orders
.some
(o => o
.id === dcz
.dingdan
.id)) {
orders
.push
(dcz
.dingdan);
}
});
// 查找产品组件关联
const chanpin_zujians = dataManager
.data
.chanpin_zujians || [];
chanpin_zujians
.forEach
(cz => {
if
(cz
.bancai?
.id === bancai
.id) {
const dingdan_chanpins = dataManager
.data
.dingdan_chanpins || [];
dingdan_chanpins
.forEach
(dc => {
if
(dc
.chanpin?
.id === cz
.chanpin?
.id && dc
.dingdan &&
!orders
.some
(o => o
.id === dc
.dingdan
.id)) {
orders
.push
(dc
.dingdan);
}
});
}
});
return orders;
}
// 页面加载时尝试初始化
if
(window
.parent) {
window
.parent
.postMessage
('RequestDataManager', '*');
}
// 添加全局函数供按钮调用
window
.showMaterialDetail = showMaterialDetail;
分页实现，搜索是全数据
本文介绍如何在JS或TS页面中为指定控件添加点击事件。通过获取控件ID并设置onclick属性实现。适用于前端开发人员。
扫一扫
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
