// 全局变量
let currentSort = { column: null, direction: 'asc' };
let currentPage = 1;
const pageSize = 1
0;
let filteredResults = [];
//监听来自父窗口的消息
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
();
// 设置分页事件
setupPagination
();
} else {
console
.error
('DataManager not available'
);
}
}
// 更新页面数据
function updatePageData
(dataManager
) {
updateStats
(dataManager
);
updateTable
(dataManager
);
$('#lastUpdate'
).text(new Date
().toLocaleTimeS
tring
());
}
// 更新统计卡片数据
function updateStats
(dataManager
) {
const data = dataManager
.data;
$('#orderCount'
).text(data
.dingdans?
.length ||
0);
$('#productCount'
).text(data
.chanpins?
.length ||
0);
$('#materialCount'
).text(data
.bancais?
.length ||
0);
const totalStock = data
.kucuns?
.reduce
((sum, kucun
) => sum + kucun
.shuliang,
0) ||
0;
$('#totalStock'
).text(totalStock
);
}
// 更新结果表格
function updateTable
(dataManager
) {
const data = dataManager
.data;
filteredResults = [];
// 处理订单产品数据
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 kucun = data
.kucuns?
.find(k => k
.bancai?
.id === bancai
.id
);
const stockQuantity = kucun ? kucun
.shuliang :
0;
filteredResults
.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
},
bancaiId: bancai
.id
}
);
}
);
}
}
);
}
// 处理订单板材数据
(Dingdan_bancai
)
if
(data
.dingdan_bancais
) {
data
.dingdan_bancais
.forEach
(db => {
if
(!db
.dingdan || !db
.bancai
) return;
const bancai = db
.bancai;
const materialInfo = getMaterialInfo
(bancai
);
// 查找该板材的库存
const kucun = data
.kucuns?
.find(k => k
.bancai?
.id === bancai
.id
);
const stockQuantity = kucun ? kucun
.shuliang :
0;
// 确定产品信息
let productInfo = '独立订购';
if
(db
.chanpin
) {
productInfo = db
.chanpin
.bianhao;
}
// 确定组件信息
let component = '独立板材';
if
(db
.zujian
) {
component = db
.zujian
.name;
} else if
(db
.chanpin
) {
component = '产品板材';
}
filteredResults
.push
({
orderNumber: db
.dingdan
.number,
productInfo: productInfo,
productQuantity: db
.shuliang, // 直接订购的板材数量
component: component,
material: materialInfo,
materialPerComponent: 1, // 直接订购时，每件用量为1
materialOrderQuantity: db
.shuliang,
stockQuantity: stockQuantity,
raw: {
orderNumber: db
.dingdan
.number,
productQuantity: db
.shuliang,
materialPerComponent: 1,
materialOrderQuantity: db
.shuliang,
stockQuantity: stockQuantity,
thickness: bancai
.houdu ||
0
},
bancaiId: bancai
.id
}
);
}
);
}
// 应用排序
if
(currentSort
.column !== null
) {
filteredResults = sor
tResults
(filteredResults, currentSort
.column, currentSort
.direction
);
}
// 渲染表格和分页
renderTable
();
renderPagination
();
}
// 渲染表格数据
function renderTable
() {
const
$tableBody =
$('#resultBody'
);
$tableBody
.empty
();
const startIndex =
(currentPage - 1
) * pageSize;
const pageData = filteredResults
.slice
(startIndex, startIndex + pageSize
);
if
(pageData
.length ===
0) {
$('#noResults'
).show
();
$('#paginationContainer'
).hide
();
} else {
$('#noResults'
).hide
();
$('#paginationContainer'
).show
();
pageData
.forEach
(row => {
const
$tr =
$('<
tr>'
);
$tr.append
(`<
td>
${row
.orderNumber}</
td>`
);
$tr.append
(`<
td>
${row
.productInfo}</
td>`
);
$tr.append
(`<
td>
${row
.productQuantity}</
td>`
);
$tr.append
(`<
td>
${row
.component}</
td>`
);
$tr.append
(`<
td>
${row
.material}</
td>`
);
$tr.append
(`<
td>
${row
.materialPerComponent}</
td>`
);
$tr.append
(`<
td>
${row
.materialOrderQuantity}</
td>`
);
$tr.append
(`<
td>
${row
.stockQuantity}</
td>`
);
$tr.append
(`<
td><button class="btn btn-sm btn-outline-primary" onclick="showMaterialDetail
(${row
.bancaiId}
)">详情</button></
td>`
);
$tableBody
.append
($tr);
}
);
}
$('#resultCount'
).text(filteredResults
.length
);
}
//设置排序功能
function setupSorting
() {
// 为每个可排序表头添加点击事件
$('#resultsTable th[data-sortable]'
).each
((index, header
) => {
$(header
).on
('click',
() => {
// 更新排序状态
if
(currentSort
.column === index
) {
currentSort
.direction = currentSort
.direction === 'asc' ? 'desc' : 'asc';
} else {
currentSort
.column = index;
currentSort
.direction = 'asc';
}
// 更新UI指示器
updateSortIndicators
();
// 重新排序和渲染表格
filteredResults = sor
tResults
(filteredResults, currentSort
.column, currentSort
.direction
);
renderTable
();
renderPagination
();
}
);
}
);
}
//排序函数
function sor
tResults
(results, columnIndex, direction
) {
return results
.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 sortS
tring
(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;
return direction === 'asc' ? aNum - bNum : bNum - aNum;
}
//字符串排序辅助函数
function sortS
tring
(aVal, bVal, direction
) {
const aS
tr = S
tring
(aVal
).toLowerCase
();
const bS
tr = S
tring
(bVal
).toLowerCase
();
if
(aS
tr < bS
tr) return direction === 'asc' ? -1 : 1;
if
(aS
tr > bS
tr) return direction === 'asc' ? 1 : -1;
return
0;
}
//更新排序指示器UI
function updateSortIndicators
() {
// 清除所有指示器
$('#resultsTable th[data-sortable]
.sort-indicator'
).text(''
);
// 为当前排序列添加指示器
if
(currentSort
.column !== null
) {
const
$currentHeader =
$(`#resultsTable th[data-sortable]:
eq(${currentSort
.column}
)`
);
$currentHeader
.find('
.sort-indicator'
).text(currentSort
.direction === 'asc' ? '↑' : '↓'
);
}
}
// 获取板材详细信息函数
function getMaterialInfo
(bancai
) {
if
(!bancai
) return '未知板材';
// 获取材质名称
const caizhiName = bancai
.caizhi?
.name || '未知材质';
// 获取木皮信息
const formatMupi =
(mupi
) => {
if
(!mupi
) return null;
return `
${mupi
.name}
${mupi
.you ? '
(油
)' : ''}`;
};
const mupi1S
tr = formatMupi
(bancai
.mupi1
) || '无';
const mupi2S
tr = formatMupi
(bancai
.mupi2
) || '无';
const mupiInfo = mupi1S
tr +
(mupi2S
tr !== '无' ? `/
${mupi2S
tr}` : ''
);
// 厚度转换为字符串
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);
}
);
// 产品搜索
$('#productSearch'
).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'
).on
('click', function
() {
const minStock = parseInt
($('#minStock'
).val
()) ||
0;
const maxStock = parseInt
($('#maxStock'
).val
()) || Number
.MAX_SAFE_INTEGER;
filterByStock
(minStock, maxStock
);
}
);
// 重置搜索
$('#resetSearch'
).on
('click', function
() {
$('
.search-input'
).val
(''
);
currentPage = 1;
updateTable
(window
.parent.dataManager
);
}
);
}
// 设置分页功能
function setupPagination
() {
// 分页按钮事件委托
$('#paginationContainer'
).on
('click', '
.page-link', function
(e
) {
e
.preven
tDefault
();
const action =
$(this).data
('action'
);
if
(action === 'prev' && currentPage > 1
) {
currentPage--;
} else if
(action === 'next' && currentPage < Math
.ceil
(filteredResults
.length / pageSize
)) {
currentPage++;
} else if
(action === 'page'
) {
currentPage = parseInt
($(this).data
('page'
));
}
renderTable
();
renderPagination
();
}
);
}
// 渲染分页控件
function renderPagination
() {
const
$pagination =
$('#pagination'
);
$pagination
.empty
();
const totalPages = Math
.ceil
(filteredResults
.length / pageSize
);
if
(totalPages <= 1
) return;
// 添加上一页按钮
$pagination
.append
(`
<li class="page-item
${currentPage === 1 ? 'disabled' : ''}">
<a class="page-link" href="#" data-action="prev">上一页</a>
</li>
`
);
// 添加页码按钮
const startPage = Math
.max
(1, currentPage - 2
);
const endPage = Math
.min
(totalPages, startPage + 4
);
for
(let i = startPage; i <= endPage; i++
) {
$pagination
.append
(`
<li class="page-item
${i === currentPage ? 'active' : ''}">
<a class="page-link" href="#" data-action="page" data-page="
${i}">
${i}</a>
</li>
`
);
}
// 添加下一页按钮
$pagination
.append
(`
<li class="page-item
${currentPage === totalPages ? 'disabled' : ''}">
<a class="page-link" href="#" data-action="next">下一页</a>
</li>
`
);
// 显示页码信息
$('#pageInfo'
).text(`第
${currentPage} 页，共
${totalPages} 页`
);
}
// 更新排序指示器
function updateSortIndicators
() {
// 清除所有指示器
$('#resultsTable th[data-sortable]
.sort-indicator'
).text(''
);
// 为当前排序列添加指示器
if
(currentSort
.column !== null
) {
const
$currentHeader =
$(`#resultsTable th[data-sortable]:
eq(${currentSort
.column}
)`
);
$currentHeader
.find('
.sort-indicator'
).text(currentSort
.direction === 'asc' ? '↑' : '↓'
);
}
}
// 表格过滤函数
function filterTable
(searchTerm, columnIndex
) {
currentPage = 1; // 重置到第一页
if
(!searchTerm
) {
updateTable
(window
.parent.dataManager
);
return;
}
const
$rows =
$('#resultBody
tr'
);
let visibleCount =
0;
$rows
.each
(function
() {
const
$cell =
$(this).find(`
td:
eq(${columnIndex}
)`
);
const cell
Text =
$cell
.text().toLowerCase
();
let isMatch = false;
// 特殊处理油状态搜索
if
(searchTerm === '有油' || searchTerm === '无油' || searchTerm === '
(油
)'
) {
isMatch = cell
Text.includes
(searchTerm
);
}
// 处理厚度字符串匹配
else if
(columnIndex === 4 && !isNaN
(parseFloat
(searchTerm
))) {
// 提取厚度数字部分进行匹配
const thicknessMatch = cell
Text.match
(/
(\d+\
.?\d*
)/
);
if
(thicknessMatch
) {
const thicknessValue = parseFloat
(thicknessMatch[1]
);
const searchValue = parseFloat
(searchTerm
);
// 允许小数点误差
isMatch = Math
.abs
(thicknessValue - searchValue
) <
0.5;
}
}
// 常规文本匹配
else {
isMatch = cell
Text.includes
(searchTerm
);
}
if
(isMatch
) {
$(this).show
();
visibleCount++;
} else {
$(this).hide
();
}
}
);
$('#resultCount'
).text(visibleCount
);
$('#noResults'
).toggle
(visibleCount ===
0);
$('#paginationContainer'
).toggle
(visibleCount >
0);
}
// 按库存量过滤
function filterByStock
(minStock, maxStock
) {
currentPage = 1; // 重置到第一页
const
$rows =
$('#resultBody
tr'
);
let visibleCount =
0;
$rows
.each
(function
() {
const
$stockCell =
$(this).find('
td:
eq(7
)'
);
const stock
Text =
$stockCell
.text();
const stockValue = parseInt
(stock
Text) ||
0;
const isMatch = stockValue >= minStock && stockValue <= maxStock;
if
(isMatch
) {
$(this).show
();
visibleCount++;
} else {
$(this).hide
();
}
}
);
$('#resultCount'
).text(visibleCount
);
$('#noResults'
).toggle
(visibleCount ===
0);
$('#paginationContainer'
).toggle
(visibleCount >
0);
}
// 显示板材详情模态框
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?
.find(k => k
.bancai?
.id === bancaiId
);
if
(!bancai
) {
alert
('未找到板材信息'
);
return;
}
// 格式化木皮信息
const formatMupiDetail =
(mupi
) => {
if
(!mupi
) return '无';
return `
${mupi
.name}
${mupi
.you ? '
(油
)' : ''}`;
};
// 获取相关订单
const relatedOrders = ge
tRelatedOrders
(bancai
);
// 构建详情HTML
const detailHtml = `
<div class="row mb-3">
<div class="col-md-6">
<h5>基本信息</h5>
<ul class="list-group">
<li class="list-group-item"><s
trong>ID:</s
trong>
${bancai
.id}</li>
<li class="list-group-item"><s
trong>材质:</s
trong>
${bancai
.caizhi?
.name || '未知'}</li>
<li class="list-group-item"><s
trong>厚度:</s
trong>
${bancai
.houdu ? bancai
.houdu
.toFixed
(1
) + 'mm' : '未知'}</li>
<li class="list-group-item"><s
trong>库存数量:</s
trong>
${kucun ? kucun
.shuliang :
0}</li>
</ul>
</div>
<div class="col-md-6">
<h5>表面处理</h5>
<ul class="list-group">
<li class="list-group-item"><s
trong>木皮1:</s
trong>
${formatMupiDetail
(bancai
.mupi1
)}</li>
<li class="list-group-item"><s
trong>木皮2:</s
trong>
${formatMupiDetail
(bancai
.mupi2
)}</li>
</ul>
</div>
</div>
<div class="mt-3">
<h5>相关订单
(${relatedOrders
.length}
)</h5>
<div class="table-responsive">
<table class="table table-sm table-hover">
<thead>
<
tr>
<th>订单号</th>
<th>下单日期</th>
<th>交货日期</th>
</
tr>
</thead>
<tbody>
${relatedOrders
.map
(order => `
<
tr>
<
td>
${order
.number}</
td>
<
td>
${order
.xiadan ? new Date
(order
.xiadan
).toLocaleDateS
tring
() : '-'}</
td>
<
td>
${order
.jiaohuo ? new Date
(order
.jiaohuo
).toLocaleDateS
tring
() : '-'}</
td>
</
tr>
`
).join
(''
)}
</tbody>
</table>
</div>
</div>
`;
// 设置模态框内容
$('#materialDetailContent'
).html
(detailHtml
);
// 显示模态框
const materialModal = new boots
trap
.Modal
('#materialDetailModal'
);
materialModal
.show
();
}
// 获取板材相关订单
function ge
tRelatedOrders
(bancai
) {
const dataManager = window
.parent.dataManager;
if
(!dataManager
) return [];
const orders = [];
const dingdan_bancais = dataManager
.data
.dingdan_bancais || [];
// 查找直接订单组件关联
dingdan_bancais
.forEach
(db => {
if
(db
.bancai?
.id === bancai
.id && db
.dingdan && !orders
.some
(o => o
.id === db
.dingdan
.id
)) {
orders
.push
(db
.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
('R
eques
tDataManager', '*'
);
}
// 添加全局函数供按钮调用
window
.showMaterialDetail = showMaterialDetail;
详情中关联订单添加排序并去重，在一个加一个上下滚动
本文介绍了一种使用jQuery快速定位并获取HTML表格中特定元素的方法。通过一个简单的示例展示了如何选取表格行内的第一个单元格文本。
扫一扫
7050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
