503 lines
24 KiB
HTML
503 lines
24 KiB
HTML
<include file="/public/header" />
|
||
|
||
<!-- // 重定位Style -->
|
||
<style>
|
||
.layui-card-header.layadmin-card-header-auto {
|
||
border-bottom: 0px;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
.layui-card-header h5 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
#layui-dic_group {
|
||
padding-bottom: 25px;
|
||
}
|
||
|
||
#layui-dic_group .layui-table-view .layui-table {
|
||
width: 100%;
|
||
}
|
||
|
||
#layui-dic_group table thead tr:first-child i {
|
||
display: none;
|
||
}
|
||
|
||
@media screen and (max-width: 1200px) {
|
||
.layui-table-tool-temp .layui-btn {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding: 0 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.layui-table-tool-temp .layui-btn:nth-last-child(3) {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class="layui-col-md4">
|
||
<div class="layui-fluid">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header layadmin-card-header-auto" style="padding-bottom: 5px">
|
||
<div class="layui-inline layui-hide" id="toolbar">
|
||
<!-- // 打开添加页面 -->
|
||
<button class="layui-btn icon-btn" lay-open="add" data-title="{:__('添加BOM')}" data-area="600px"
|
||
data-url="#editforms_bom" callback="edit">
|
||
<i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
|
||
</button>
|
||
<!-- // 修改页面 -->
|
||
<button class="layui-btn icon-btn" lay-open="edit" data-title="{:__('修改BOM')}" data-area="600px"
|
||
data-url="#editforms_bom" callback="edit">
|
||
<i class="layui-icon layui-icon-edit"></i>{:__('修改')}
|
||
</button>
|
||
<!-- // 删除所有 -->
|
||
<button class="layui-btn icon-btn layui-btn-danger" lay-batch="" data-table="lay-tableGroup"
|
||
data-url="{:url('/PdmPartlist/del')}">
|
||
<i class="layui-icon layui-icon-delete"></i>{:__('删除')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card-body" id="layui-dic_group">
|
||
<!-- // 创建字典组实例 -->
|
||
<table id="lay-tableGroup" lay-filter="lay-tableGroup"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-md8" >
|
||
<!-- // 展示数据 -->
|
||
<div class="layui-fluid">
|
||
<div class="layui-card">
|
||
<!-- // 默认操作按钮 -->
|
||
<div class="layui-card-header layadmin-card-header-auto ">
|
||
<div class="layui-form">
|
||
<!-- // 自定义搜索参数 -->
|
||
<div id="laytable-search" class="layui-form-item">
|
||
|
||
<div class="layui-inline">
|
||
<div class="layui-form-label">{:__('Partnumber')}</div>
|
||
<div class="layui-input-inline ">
|
||
<input name="partnumber" class="layui-input" type="text" placeholder="{:__('Partnumber')}" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">{:__('Purchasecode')}</label>
|
||
<div class="layui-input-inline ">
|
||
<input name="purchasecode" class="layui-input" type="text" placeholder="{:__('Purchasecode')}" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">{:__('Value')}</label>
|
||
<div class="layui-input-inline ">
|
||
<input name="value" class="layui-input" type="text" placeholder="{:__('Value')}" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">{:__('MPN')}</label>
|
||
<div class="layui-input-inline ">
|
||
<input name="mpn" class="layui-input" type="text" placeholder="{:__('MPN')}" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">{:__('Reference')}</label>
|
||
<div class="layui-input-inline ">
|
||
<input name="reference" class="layui-input" type="text" placeholder="{:__('Reference')}" />
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<!-- <div class="layui-inline">
|
||
<div class="layui-input-inline">
|
||
<select name="status">
|
||
<option value="">{:__('按状态查询')}</option>
|
||
<option value="2" >{:__('正常')}</option>
|
||
<option value="1" >{:__('关闭')}</option>
|
||
</select>
|
||
</div>
|
||
</div> -->
|
||
|
||
<div class="layui-inline">
|
||
<div class="layui-input-inline ">
|
||
<input name="keyword" class="layui-input" type="text" placeholder="{:__('关键字搜索')}" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-inline">
|
||
<!-- // 默认搜索 -->
|
||
<button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i
|
||
class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
|
||
<!-- // 打开添加页面 -->
|
||
<button class="layui-btn icon-btn" lay-open="" data-title="{:__('添加BOM项')}"
|
||
data-area="600px" data-url="#editforms">
|
||
<i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
|
||
</button>
|
||
<!-- // 删除所有 -->
|
||
<button class="layui-btn icon-btn layui-btn-danger" lay-batch data-table="lay-tableList"
|
||
data-url="{:url('/PdmPartlist/del')}">
|
||
<i class="layui-icon layui-icon-delete"></i>{:__('删除')}
|
||
</button>
|
||
|
||
<!-- 自定义导出按钮 -->
|
||
<button id="exportExcel" class="layui-btn layui-btn-primary">
|
||
<i class="layui-icon layui-icon-export"></i> 导出 Excel
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- // 创建数据实例 -->
|
||
<table id="lay-tableList" lay-filter="lay-tableList"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- // 添加编辑数据 -->
|
||
<section id="editforms_bom" class="layui-hide">
|
||
<div class="layui-fluid layui-bg-white">
|
||
<form class="layui-form layui-form-fixed" lay-filter="editforms_bom">
|
||
<input type="text" name="id" hidden="">
|
||
<input type="text" class="pid" name="pid" value="{$pid}" hidden="">
|
||
|
||
<!-- <div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('Item')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="item" placeholder="{:__('请输入item')}" type="text" class="layui-input" lay-verify="" />
|
||
</div>
|
||
</div> -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span style="color: red; ">* </span>{:__('BOM编码')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="partnumber" placeholder="{:__('请输入BOM编码')}" type="text" class="layui-input" lay-verify="required" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('位号')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="reference" placeholder="{:__('请输入位号')}" class="layui-input" lay-verify="" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('用量')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="quantity" placeholder="{:__('请输入用量')}" class="layui-input" lay-verify="" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('单位')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="unit" placeholder="{:__('请输入单位')}" class="layui-input" lay-verify="" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('排序号')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="sort" placeholder="{:__('默认自动生成')}" type="number" class="layui-input" />
|
||
</div>
|
||
</div> -->
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('BOM备注')}</label>
|
||
<div class="layui-input-block">
|
||
<textarea name="content" id="content" style="min-height: 80px;" placeholder="{:__('请输入BOM备注')}"
|
||
class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-footer layui-form-item layui-center">
|
||
<button class="layui-btn layui-btn-primary" type="button"
|
||
sa-event="closePageDialog">{:__('取消')}</button>
|
||
<button class="layui-btn" lay-add="{:url('/PdmPartlist/add')}" lay-edit="{:url('/PdmPartlist/edit')}"
|
||
lay-filter="submitPage" lay-submit>{:__('提交')}</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
<!-- // 添加编辑数据 -->
|
||
<section id="editforms" class="layui-hide">
|
||
<div class="layui-fluid layui-bg-white">
|
||
<form class="layui-form layui-form-fixed" lay-filter="editforms">
|
||
<input type="text" name="id" hidden="">
|
||
<input type="text" class="pid" name="pid" value="{$pid}" hidden="">
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('Item')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="item" placeholder="{:__('请输入item')}" type="text" class="layui-input"
|
||
lay-verify="" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span style="color: red; ">* </span>{:__('BOM编码')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="partnumber" placeholder="{:__('请输入BOM编码')}" type="text" class="layui-input"
|
||
lay-verify="required" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('位号')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="reference" placeholder="{:__('请输入位号')}" class="layui-input" lay-verify="" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('用量')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="quantity" placeholder="{:__('请输入用量')}" class="layui-input" lay-verify="" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('单位')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="unit" placeholder="{:__('请输入单位')}" class="layui-input" lay-verify="" />
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('排序号')}</label>
|
||
<div class="layui-input-block">
|
||
<input name="sort" placeholder="{:__('默认自动生成')}" type="number" class="layui-input" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:__('BOM备注')}</label>
|
||
<div class="layui-input-block">
|
||
<textarea name="content" id="content" style="min-height: 80px;" placeholder="{:__('请输入BOM备注')}"
|
||
class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-footer layui-form-item layui-center">
|
||
<button class="layui-btn layui-btn-primary" type="button"
|
||
sa-event="closePageDialog">{:__('取消')}</button>
|
||
<button class="layui-btn" lay-add="{:url('/PdmPartlist/add')}" lay-edit="{:url('/PdmPartlist/edit')}"
|
||
lay-filter="submitPage" lay-submit>{:__('提交')}</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- // 列表编辑框 -->
|
||
<script type="text/html" id="tableBar">
|
||
<a class="layui-table-text" data-title="{:__('编辑BOM项')}" data-url="#editforms" data-area="600px" lay-event="edit" >{:__('编辑')}</a>
|
||
<div class="layui-divider layui-divider-vertical"></div>
|
||
<a class="layui-table-text" data-url="{:url('/PdmPartlist/del')}?id={{d.id}}" lay-event="del" >{:__('删除')}</a>
|
||
</script>
|
||
|
||
|
||
<script type="text/html" id="tableButton"></script>
|
||
|
||
|
||
<!-- 在页面底部（通常在 </body> 标签之前）引入 SheetJS 库 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
|
||
|
||
<include file="/public/footer" />
|
||
<script>
|
||
layui.use(['admin', 'jquery', 'table', 'form'], function () {
|
||
|
||
let admin = layui.admin;
|
||
let $ = layui.jquery;
|
||
let table = layui.table;
|
||
let form = layui.form;
|
||
let count = {$count|default=300};
|
||
|
||
// 定义表格URL
|
||
let tableURL = "{:url('/PdmPartlist/index')}";
|
||
|
||
// 字典类表格
|
||
let isClass = table.render({
|
||
elem: "#lay-tableGroup"
|
||
, url: tableURL + "?pid=0"
|
||
, toolbar: '#toolbar'
|
||
, defaultToolbar: []
|
||
, page: true
|
||
, limit: 18
|
||
, cols: [[
|
||
{ type: 'radio', align: 'left', title: '{:__("ID")}' },
|
||
{ field: 'partnumber', align: 'center', title: '{:__("BOM编码")}' },
|
||
// { field: 'reference', align: 'center', title: '{:__("位号")}' },
|
||
{ field: 'content', align: 'center', title: '{:__("备注")}' },
|
||
]]
|
||
})
|
||
|
||
// 基础表格
|
||
let isTable = table.render({
|
||
elem: "#lay-tableList"
|
||
, url: tableURL
|
||
,toolbar: '#tableButton'
|
||
// ,defaultToolbar: ['filter', 'exports', 'print', 'search']
|
||
,defaultToolbar: ['filter', 'print', 'search']
|
||
, page: true
|
||
//, page: false
|
||
, limit: 18
|
||
, cols: [[
|
||
{type: 'checkbox'},
|
||
// {field: 'id', align: 'center',sort: true,width: 80, title: 'ID'},
|
||
{ field: 'item', align: 'center', width: 40,title: '{:__("Item")}' },
|
||
{ field: 'partnumber', align: 'left', width: 180,title: '{:__("Partnumber")}' },
|
||
|
||
{ field: 'parttype', align: 'left', width: 100,title: '{:__("Parttype")}' },
|
||
{ field: 'purchasecode', align: 'left', width: 160,title: '{:__("Purchasecode")}' },
|
||
{ field: 'value', align: 'left', width: 100,title: '{:__("Value")}' },
|
||
{ field: 'description', align: 'left', width: 200,title: '{:__("Description")}' },
|
||
{ field: 'mpn', align: 'left', width: 150,title: '{:__("MPN")}' },
|
||
{ field: 'mfgname', align: 'left', width: 150,title: '{:__("MFG")}' },
|
||
{ field: 'footprint', align: 'left', width: 150,title: '{:__("Footprint")}' },
|
||
{ field: 'manufacture', align: 'left', width: 120,title: '{:__("Manufacture")}' },
|
||
|
||
|
||
{ field: 'reference', align: 'left',width: 250, title: '{:__("位号")}' },
|
||
// {field: 'sort', align: 'center', width: 135, title: '{:__("排序号")}'},
|
||
{ field: 'quantity', align: 'center', width: 100, title: '{:__("Quantity")}' },
|
||
{ field: 'unit', align: 'center', width: 80, title: '{:__("Unit")}' },
|
||
{ field: 'content', align: 'left', title: '{:__("备注")}' },
|
||
// {field: 'create_time', align: 'center', width: 180,title: '{:__("创建时间")}'},
|
||
{ align: 'center', toolbar: '#tableBar', width: 135, fixed:'right', title: '{:__("操作")}' },
|
||
]]
|
||
})
|
||
// 表格选择行事件
|
||
table.on('radio(lay-tableGroup)', function (obj) {
|
||
let data = table.checkStatus('lay-tableGroup').data;
|
||
let ids = [];
|
||
if (data.length) {
|
||
for (const key in data) {
|
||
ids.push(data[key].id);
|
||
}
|
||
|
||
let url = tableURL + '?pid=' + ids.join(',');
|
||
table.reloadData('lay-tableList', {
|
||
url: url
|
||
});
|
||
|
||
// 获取最后点击
|
||
if (obj.checked === true) {
|
||
$('#editforms').find('.pid').attr('value', obj.data.id);
|
||
$('#editforms_bom').find('.pid').attr('value', obj.data.id);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 自定义导出按钮点击事件
|
||
document.getElementById('exportExcel').addEventListener('click', function () {
|
||
// 确认用户希望导出全部数据
|
||
layer.confirm('确定导出所有数据到 Excel 吗？', { icon: 3, title: '导出确认' }, function(index){
|
||
layer.close(index);
|
||
exportAllDataToExcel();
|
||
});
|
||
});
|
||
|
||
// 自定义导出功能
|
||
function exportAllDataToExcel(){
|
||
// 获取当前的过滤条件（例如，pid）
|
||
let selectedData = table.checkStatus('lay-tableGroup').data;
|
||
let pid = selectedData.length ? selectedData[0].id : 0;
|
||
// 异步获取所有数据（不分页）
|
||
layer.msg('异步获取所有数据（不分页），超时限制：30s');
|
||
$.ajax({
|
||
url: tableURL + "?pid=" + pid + "&export=1&limit=" +count ,// 后端需要根据 'export=1' 返回所有数据
|
||
// method: 'GET',
|
||
type: 'POST',
|
||
dataType: 'json',
|
||
timeout: 30000,
|
||
success: function(res){
|
||
if(res.code === 200){
|
||
layer.msg('获取数据总数:'+ res.data.length);
|
||
let data = res.data;
|
||
if(data.length === 0){
|
||
layer.msg('没有数据可导出');
|
||
return;
|
||
}
|
||
// 转换数据为 SheetJS 格式
|
||
layer.msg('转换数据为 SheetJS 格式');
|
||
// let worksheetData = data.map(row => {
|
||
let worksheetData = data.map(row => {
|
||
return {
|
||
'Item': row.item,
|
||
'Partnumber': row.partnumber,
|
||
'Parttype': row.parttype,
|
||
'Purchasecode': row.purchasecode,
|
||
'Value': row.value,
|
||
'Description': row.description,
|
||
'MPN': row.mpn,
|
||
'MFG': row.mfgname,
|
||
'Footprint': row.footprint,
|
||
'Manufacture': row.manufacture,
|
||
'Reference': row.reference,
|
||
'Quantity': row.quantity,
|
||
'Unit': row.unit,
|
||
'备注': row.content,
|
||
// 添加其他需要导出的字段
|
||
};
|
||
});
|
||
// 创建工作簿和工作表
|
||
layer.msg('创建工作簿和工作表');
|
||
let worksheet = XLSX.utils.json_to_sheet(worksheetData);
|
||
let workbook = XLSX.utils.book_new();
|
||
XLSX.utils.book_append_sheet(workbook, worksheet, "BOM数据");
|
||
// 生成 Excel 文件并下载，设置自定义文件名
|
||
|
||
const filename = "BOM_Export_" + new Date().toISOString().slice(0,10) + ".xlsx"; // 自定义文件名
|
||
layer.msg('生成 Excel 文件并下载，设置自定义文件名：'+filename);
|
||
XLSX.writeFile(workbook, filename);
|
||
layer.msg('生成 Excel 文件并下载，文件名：'+filename);
|
||
}
|
||
|
||
},
|
||
error: function(res){
|
||
layer.msg('数据获取失败，请稍后重试:'+res.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 全局回调函数
|
||
admin.callback.edit = function (clickthis, colletction, config) {
|
||
|
||
let status = true;
|
||
let action = clickthis.attr('lay-open');
|
||
let data = table.checkStatus('lay-tableGroup').data;
|
||
if (action === 'edit') {
|
||
status = false;
|
||
form.val('editforms', data[0]);
|
||
form.val('editforms_bom', data[0]);
|
||
}
|
||
|
||
form.on("submit(submitPage)", function (post) {
|
||
let pageThat = $(this),
|
||
_pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
|
||
post.field.pid = 0;
|
||
// 开始POST提交数据
|
||
$.post(_pageUrl,
|
||
post.field, function (res) {
|
||
if (res.code === 200) {
|
||
table.reloadData('lay-tableGroup');
|
||
table.reloadData('lay-tableList');
|
||
// 关闭当前窗口
|
||
layer.msg(res.msg);
|
||
layer.close(colletction.index);
|
||
pageThat.attr("disabled", true);
|
||
}
|
||
else {
|
||
layui.show.error(res.msg);
|
||
}
|
||
|
||
}, 'json');
|
||
|
||
return false;
|
||
})
|
||
}
|
||
});
|
||
</script> |