241 lines
12 KiB
HTML
241 lines
12 KiB
HTML
<resource-share type="script" src="/assets/js/formConfigs/ItemForm.js"></resource-share>
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<table class="layui-hide" id="ID-treeTable"></table>
|
|
<script type="text/html" id="TPL-treeTable">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="NewItem">新建物品</button>
|
|
<button class="layui-btn layui-btn-sm" lay-event="FullChecked">展开全部</button>
|
|
<button class="layui-btn layui-btn-sm" lay-event="FullOutChecked">收起全部</button>
|
|
<button class="layui-btn layui-btn-sm" lay-event="Refresh">刷新</button>
|
|
</div>
|
|
</script>
|
|
<script type="text/html" id="TPL-treeTable-tools">
|
|
<div class="layui-btn-container">
|
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
|
|
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
|
|
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
|
|
</div>
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
layui.use(['treeTable', 'layer', 'dropdown', 'form', 'formEngine'], function() {
|
|
const treeTable = layui.treeTable;
|
|
const layer = layui.layer;
|
|
const dropdown = layui.dropdown;
|
|
const form = layui.form;
|
|
const formEngine = layui.formEngine;
|
|
|
|
// 渲染树形表格
|
|
const tableInst = treeTable.render({
|
|
elem: '#ID-treeTable',
|
|
id: 'ID-treeTable',
|
|
url: '/API/Item/GetItems',
|
|
tree: {
|
|
view: {
|
|
iconLeaf: '<i class="layui-icon layui-icon-username"></i>'
|
|
}
|
|
},
|
|
toolbar: '#TPL-treeTable',
|
|
cols: [[
|
|
{ type: 'checkbox', fixed: 'left' },
|
|
{ field: 'ItemUUID', title: '物品编号', width: 270 },
|
|
{ field: 'ItemName', title: '物品名称', width: 250 },
|
|
{ field: 'ItemIcon', title: '物品图标', width: 150 },
|
|
{ field: 'ItemIconColor', title: '物品图标颜色', width: 100 },
|
|
{ field: 'ItemTags', title: '物品标签', width: 200 },
|
|
{ field: 'ItemMetaData', title: '物品元数据', width: 300},
|
|
{ field: 'ItemDescription', title: '物品介绍', minWidth: 300 },
|
|
{
|
|
fixed: 'right',
|
|
title: '操作',
|
|
width: 200,
|
|
align: 'center',
|
|
toolbar: '#TPL-treeTable-tools'
|
|
}
|
|
]],
|
|
page: false
|
|
});
|
|
|
|
// 表头工具栏事件
|
|
treeTable.on('toolbar(ID-treeTable)', function(obj) {
|
|
const tableId = obj.config.id;
|
|
|
|
switch (obj.event) {
|
|
case 'FullChecked':
|
|
layer.msg('成功展开全部', {icon: 1});
|
|
treeTable.expandAll(tableId, true);
|
|
break;
|
|
case 'FullOutChecked':
|
|
layer.msg('成功收起全部', {icon: 1});
|
|
treeTable.expandAll(tableId, false);
|
|
break;
|
|
case 'Refresh':
|
|
tableInst.reload();
|
|
layer.msg('已刷新', {icon: 1});
|
|
break;
|
|
case 'NewItem':
|
|
formEngine.openRegisteredForm('item-add', {
|
|
confirm: function(data, close) {
|
|
$.post('/API/Item/AddItem', data, function(res) {
|
|
if (res.code == 0) {
|
|
layer.msg('成功添加物品', {icon: 1});
|
|
tableInst.reload();
|
|
close();
|
|
} else {
|
|
layer.msg(`添加失败：${res.msg}`, {icon: 5});
|
|
}
|
|
}).fail(() => layer.msg('网络错误', {icon: 5}));
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
});
|
|
|
|
// 单元格工具事件
|
|
treeTable.on(`tool(${tableInst.config.id})`, function(obj) {
|
|
const { event: layEvent, data: trData, tr: trElem, config: { id: tableId } } = obj;
|
|
|
|
if (layEvent === 'detail') {
|
|
// 构建查看窗口的HTML内容
|
|
let detailHtml = `
|
|
<div class="layui-form layui-form-pane" style="padding: 20px;">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: 120px;">物品编号</label>
|
|
<div class="layui-input-inline" style="width: 300px;">
|
|
<input type="text" value="${trData.ItemUUID || '-'}" readonly class="layui-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: 120px;">物品名称</label>
|
|
<div class="layui-input-inline" style="width: 300px;">
|
|
<input type="text" value="${trData.ItemName || '-'}" readonly class="layui-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: 120px;">物品元数据</label>
|
|
<div class="layui-input-inline" style="width: 300px;">
|
|
<textarea readonly class="layui-textarea" style="width: 300px; min-height: 100px;">${trData.ItemMetaData || '-'}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: 120px;">物品图标</label>
|
|
<div class="layui-input-inline" style="width: 300px;">
|
|
${trData.ItemIcon ?
|
|
`<img src="${trData.ItemIcon}" alt="物品图标" style="width: 300px; height: 300px; border: 1px solid #eee; padding: 5px;" />` :
|
|
'<span style="color: #999;">无图标</span>'
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: 120px;">图标颜色</label>
|
|
<div class="layui-input-inline" style="width: 300px;">
|
|
<div style="display: flex; align-items: center;">
|
|
<input type="text" value="${trData.ItemIconColor || '-'}" readonly class="layui-input" style="width: 200px;">
|
|
${trData.ItemIconColor ?
|
|
`<div style="width: 30px; height: 30px; background-color: ${trData.ItemIconColor}; margin-left: 10px; border: 1px solid #ddd;"></div>` :
|
|
''
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: 120px;">物品介绍</label>
|
|
<div class="layui-input-block" style="margin-left: 130px;">
|
|
<textarea readonly class="layui-textarea" style="width: 300px; min-height: 100px;">${trData.ItemDescription || '-'}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 弹出layer窗口
|
|
layer.open({
|
|
type: 1,
|
|
title: `物品详情 - ${trData.ItemName || '未知物品'}`,
|
|
area: ['700px', '500px'],
|
|
shade: 0.8,
|
|
shadeClose: true,
|
|
scrollbar: false,
|
|
content: detailHtml,
|
|
btn: ['关闭'],
|
|
btnAlign: 'c',
|
|
yes: function(index) {
|
|
layer.close(index);
|
|
},
|
|
success: function(layero, index) {
|
|
// 可以在这里添加一些初始化操作
|
|
}
|
|
});
|
|
}
|
|
else if (layEvent === 'edit') {
|
|
// 打开已注册的编辑物品表单
|
|
formEngine.openRegisteredForm('item-edit', {
|
|
data: trData,
|
|
confirm: function(data, close) {
|
|
data.ItemUUID = trData.ItemUUID;
|
|
$.post('/API/Item/ModifyItemSettings', data, function(res) {
|
|
if (res.code == 0) {
|
|
layer.msg('成功修改物品信息', {icon: 1});
|
|
tableInst.reload();
|
|
close();
|
|
} else {
|
|
layer.msg(`修改失败：${res.msg}`, {icon: 5});
|
|
}
|
|
}).fail(() => layer.msg('网络错误', {icon: 5}));
|
|
}
|
|
});
|
|
}
|
|
else if (layEvent === 'more') {
|
|
dropdown.render({
|
|
elem: this,
|
|
show: true,
|
|
align: 'right',
|
|
data: [{ title: '删除', id: 'del' }],
|
|
click: function(menudata) {
|
|
if (menudata.id === 'del') {
|
|
Toast.warning('物品变更操作', '注销物品应由组织决定！', 3000);
|
|
Toast.warning('物品变更操作', '验权在后端实现，前端未作限制！', 3000);
|
|
Toast.warning('物品变更操作', '请考虑后果！', 3000);
|
|
layer.confirm("确定要删除此物品吗？删除后不可恢复！", {
|
|
title: '删除确认',
|
|
icon: 3
|
|
}, function(index) {
|
|
$.post("/API/Item/DeleteItem", {
|
|
ItemUUID: trData.ItemUUID
|
|
}, function(data) {
|
|
if (data.code == 0) {
|
|
layer.msg('删除成功', {icon: 1});
|
|
obj.del();
|
|
tableInst.reload();
|
|
} else {
|
|
layer.msg(`删除失败：${data.msg}`, {icon: 5});
|
|
}
|
|
}).fail(() => layer.msg('网络错误', {icon: 5}));
|
|
layer.close(index);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script> |