222 lines
11 KiB
HTML
222 lines
11 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" id="Item-Card"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const TABLE_CONFIG = {
|
|
base: {
|
|
cardId: 'Item-Card',
|
|
primaryKey: 'ItemUUID',
|
|
title: '物品管理',
|
|
full: true,
|
|
api: {
|
|
get: '/API/FormAPI/Get/Item',
|
|
modify: '/API/FormAPI/ModifyItem/Item',
|
|
add: '/API/FormAPI/Add/Item',
|
|
edit: '/API/FormAPI/Modify/Item',
|
|
delete: '/API/FormAPI/Delete/Item'
|
|
},
|
|
editableFields: ['ItemName', 'ItemIcon', 'ItemIconColor', 'ItemTags', 'ItemDescription', 'ItemMetaData'],
|
|
toolbarBtns: [
|
|
{ name: "新建物品", class: 'primary', event: 'NewItem' },
|
|
{ name: "批量删除", class: '', event: 'BatchDelete' },
|
|
{ name: "展开全部", class: '', event: 'FullChecked' },
|
|
{ name: "收起全部", class: '', event: 'FullOutChecked' },
|
|
{ name: "刷新", class: '', event: 'Refresh' }
|
|
],
|
|
toolsBtns: [
|
|
{ name: "查看", class: 'view', event: 'detail' },
|
|
{ name: "编辑", class: '', event: 'edit' },
|
|
{ name: "更多 <i class=\"fas fa-chevron-down\"></i>", class: '', event: 'more' }
|
|
],
|
|
/* filterList: [
|
|
{ field: 'ItemName', name: '物品名称', type: 'text', placeholder: '请输入物品名称' },
|
|
{ field: 'ItemTags', name: '物品标签', type: 'text', placeholder: '请输入物品标签' }
|
|
], */
|
|
// 构建表单提交数据
|
|
buildSubmitData: (submitData, trData, formData) => {
|
|
return submitData;
|
|
},
|
|
// 构建字段更新数据
|
|
buildUpdateData: (updateData, rowData, field, value) => {
|
|
return updateData;
|
|
},
|
|
// 构建删除数据
|
|
buildDeleteData: (deleteData, rowData) => {
|
|
return deleteData;
|
|
},
|
|
// 构建批量删除数据
|
|
buildBatchDeleteData: (batchDeleteData, lineIds, primaryIds, firstRowData) => {
|
|
return batchDeleteData;
|
|
}
|
|
},
|
|
render: {
|
|
method: 'GET',
|
|
tree: { view: { iconLeaf: '<i class="layui-icon layui-icon-username"></i>' } },
|
|
cols: [[
|
|
{ type: 'checkbox', fixed: 'left', sticky: true },
|
|
{ field: 'ItemUUID', title: '物品编号', width: 270, sticky: true },
|
|
{ field: 'ItemName', title: '物品名称', width: 250, edit: 'text' },
|
|
{ field: 'ItemIcon', title: '物品图标', width: 150, templet: d => d.ItemIcon ? `<img src="${d.ItemIcon}" style="height:30px;width:30px;">` : '' },
|
|
{ field: 'ItemIconColor', title: '物品图标颜色', width: 100, templet: d => {
|
|
// 确保颜色值是字符串且不为空
|
|
const colorValue = typeof d.ItemIconColor === 'string' ? d.ItemIconColor.trim() : '';
|
|
return colorValue ? `<div style="width: 30px; height: 30px; background-color: ${colorValue}; border: 1px solid #ddd;"></div>` : '';
|
|
} },
|
|
{ field: 'ItemTags', title: '物品标签', width: 200, edit: 'text' },
|
|
{ field: 'ItemMetaData', title: '物品元数据', width: 300, edit: 'text' },
|
|
{ field: 'ItemDescription', title: '物品介绍', minWidth: 300, edit: 'text' },
|
|
{ fixed: 'right', title: '操作', width: 200, sticky: true }
|
|
]],
|
|
height: 580,
|
|
page: {
|
|
limits: [10, 20, 50, 100],
|
|
limit: 10,
|
|
},
|
|
request: { pageName: 'PageIndex', limitName: 'PageSize' }
|
|
},
|
|
events: {
|
|
toolbar: {
|
|
FullChecked: (manager) => {
|
|
console.log('成功展开全部');
|
|
},
|
|
FullOutChecked: (manager) => {
|
|
console.log('成功收起全部');
|
|
},
|
|
Refresh: (manager) => {
|
|
manager.reloadTable();
|
|
console.log('已刷新');
|
|
},
|
|
NewItem: (manager) => {
|
|
manager.confirmAddFormSubmit({
|
|
formKey: 'item-add',
|
|
successMessage: '成功添加物品'
|
|
});
|
|
}
|
|
},
|
|
tool: {
|
|
detail: (trData, trObj, manager) => {
|
|
console.log('查看物品:', trData);
|
|
// 构建查看窗口的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);
|
|
}
|
|
});
|
|
},
|
|
edit: (trData, trObj, manager) => {
|
|
manager.confirmFormSubmit({
|
|
formKey: 'item-edit',
|
|
openForm: { data: trData },
|
|
trData: trData,
|
|
successMessage: '成功修改物品'
|
|
});
|
|
},
|
|
more: (trData, trObj, manager) => {
|
|
dropdown.render({
|
|
elem: trObj,
|
|
show: true,
|
|
align: 'right',
|
|
data: [{ title: '删除', id: 'del' }],
|
|
click: (menudata) => {
|
|
if (menudata.id === 'del') {
|
|
Toast.warning('物品变更操作', '注销物品应由组织决定！', 3000);
|
|
Toast.warning('物品变更操作', '验权在后端实现，前端未作限制！', 3000);
|
|
Toast.warning('物品变更操作', '请考虑后果！', 3000);
|
|
manager.confirmAction({
|
|
title: "物品管理",
|
|
message: "确认要删除此物品吗？",
|
|
api: manager.config.base.api.delete,
|
|
params: { ItemUUID: trData.ItemUUID },
|
|
successMessage: "删除成功"
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
window.tableManager = new tableEngine.TableManager(TABLE_CONFIG);
|
|
</script> |