Files
BuYuHouDuan/AdminSrc/AdminHost/wwwroot/admin/dist/views/gameconfig/propfragment.html
T
2026-10-12 16:22:04 +08:00

527 lines
26 KiB
HTML

<title>道具碎片配置</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>游戏管理</cite></a>
<a><cite>道具碎片配置</cite></a>
</div>
</div>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body">
<table id="table-propfragment" lay-filter="table-propfragment"></table>
</div>
</div>
</div>
<script type="text/html" id="toolbar-propfragment">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-filter="init-propfragment"><i class="layui-icon layui-icon-refresh"></i> 初始化配置</button>
<button class="layui-btn layui-btn-sm" lay-filter="save-propfragment"><i class="layui-icon layui-icon-ok"></i> 保存配置</button>
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-filter="reload-propfragment"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
<button class="layui-btn layui-btn-sm" lay-filter="add-propfragment">添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-filter="batchdel-propfragment">批量删除</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" onclick="saveSection('PropFragments')"><i class="layui-icon layui-icon-export"></i> 保存到初始化文件</button>
</div>
</script>
<script type="text/html" id="tpl-type">
{{# var t = d.type + ''; }}
{{# if(t === '3') { }}
炮塔碎片
{{# } else if(t === '4') { }}
翅膀碎片
{{# } else if(t === '6') { }}
战神碎片
{{# } else { }}
未知({{= t}})
{{# } }}
</script>
<script type="text/html" id="tpl-saleType">
{{# var saleTypeMap = {'1':'金币','2':'钻石'}; }}
{{= saleTypeMap[d.saleType] || '金币' }}
</script>
<script type="text/html" id="tpl-isEnable">
<input type="checkbox" name="isEnable" lay-skin="switch" lay-text="启用|禁用" {{ d.isEnable ? 'checked' : '' }} lay-filter="isEnable-switch">
</script>
<script type="text/html" id="tpl-isSale">
<input type="checkbox" name="isSale" lay-skin="switch" lay-text="销售|停售" {{ d.isSale ? 'checked' : '' }} lay-filter="isSale-switch">
</script>
<script type="text/html" id="tpl-image">
{{# if(d.imageUrl){ }}
<img src="{{d.imageUrl}}" style="width:40px;height:40px;object-fit:cover;cursor:pointer;border-radius:4px;" onclick="previewImage('{{d.imageUrl}}')" alt="图标">
{{# } else { }}
<span style="color:#999;">无</span>
{{# } }}
</script>
<script type="text/html" id="table-operate">
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<style>
.icon-upload-box { position: relative; display: inline-block; }
.icon-upload-box .upload-btn { position: absolute; top: 0; left: 0; width: 80px; height: 80px; opacity: 0; cursor: pointer; }
.icon-upload-preview { width: 80px; height: 80px; border: 1px dashed #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #fafafa; cursor: pointer; }
.icon-upload-preview:hover { border-color: #009688; }
.icon-upload-preview img { max-width: 100%; max-height: 100%; }
.icon-upload-preview .placeholder { color: #999; font-size: 12px; text-align: center; }
</style>
<script>
layui.use(['admin', 'table', 'form', 'layer'], function () {
var $ = layui.$,
admin = layui.admin,
table = layui.table,
form = layui.form,
layer = layui.layer,
setter = layui.setter;
var gameConfig = null;
var propList = [];
function getProductName(number) {
if (!number) return '-';
var prop = propList.find(function(p) { return String(p.number) === String(number); });
return prop ? prop.name : number;
}
setTimeout(function() {
if (window.parent && window.parent.$ && window.parent.layer) {
window.parent.$('.layui-layer-shade').remove();
window.parent.layer.closeAll();
}
$('.layui-layer-shade').remove();
layer.closeAll();
}, 100);
function loadConfig() {
admin.req({
method: "get",
url: setter.baseurl + "adminapi/GameConfig",
done: function (res) {
if (res.code === 0 && res.data) {
gameConfig = res.data;
propList = gameConfig.propConfig || [];
renderTable();
}
}
});
}
function renderTable() {
table.render({
elem: '#table-propfragment',
data: gameConfig ? gameConfig.propFragments || [] : [],
cols: [[
{ type: 'checkbox', fixed: 'left' },
{ field: "number", title: "编号", width: 80 },
{ field: "name", title: "名称", width: 100 },
{ field: "type", title: "类型", width: 100, templet: '#tpl-type' },
{ field: "desc", title: "描述", width: 150 },
{ field: "imageUrl", title: "图标", width: 100, templet: '#tpl-image' },
{ field: "saleType", title: "售卖方式", width: 100, templet: '#tpl-saleType' },
{ field: "price", title: "价格", width: 80 },
{ field: "vipPrice", title: "VIP价格", width: 90 },
{ field: "dealerPrice", title: "经销商价", width: 100 },
{ field: "saleCount", title: "每日限购", width: 90 },
{ field: "fragmentCount", title: "合成数量", width: 90 },
{ field: "productNumber", title: "成品编号", width: 120, templet: function(d) { return getProductName(d.productNumber); }},
{ field: "isEnable", title: "启用", width: 80, templet: '#tpl-isEnable' },
{ field: "isSale", title: "销售", width: 80, templet: '#tpl-isSale' },
{ title: "操作", width: 180, fixed: 'right', toolbar: '#table-operate' }
]],
toolbar: '#toolbar-propfragment',
defaultToolbar: ['filter', 'exports', 'print']
});
}
window.previewImage = function(url) {
layer.open({
type: 1,
title: '图片预览',
area: ['auto', 'auto'],
shadeClose: true,
content: '<div style="padding:20px;text-align:center;"><img src="' + url + '" style="max-width:400px;max-height:400px;border-radius:8px;"></div>'
});
};
function initConfig() {
layer.confirm('确定要初始化全部配置数据吗?此操作将清空现有数据!', function(idx) {
layer.close(idx);
admin.req({
method: "get",
url: setter.baseurl + "adminapi/GameConfig/InitSection/PropFragments",
done: function (res) {
if (res.code === 0 || res.code === 200) {
layer.msg('初始化成功');
loadConfig();
} else {
layer.msg(res.info || '初始化失败');
}
},
fail: function(res) {
layer.msg(res.info || '初始化失败');
}
});
});
}
$(document).on('click', '[lay-filter="init-propfragment"]', function() {
if (window.parent && window.parent.$ && window.parent.layer) {
window.parent.$('.layui-layer-shade').remove();
window.parent.layer.closeAll();
}
initConfig();
});
$(document).on('click', '[lay-filter="reload-propfragment"]', function() {
loadConfig();
layer.msg('刷新成功');
});
$(document).on('click', '[lay-filter="save-propfragment"]', function() {
if (window.parent && window.parent.$ && window.parent.layer) {
window.parent.$('.layui-layer-shade').remove();
window.parent.layer.closeAll();
}
admin.req({
method: "post",
contentType: "application/json;charset=UTF-8",
url: setter.baseurl + "adminapi/GameConfig/Update",
data: JSON.stringify(gameConfig),
done: function (res) {
if (res.code === 0 || res.code === 200) {
layer.msg('保存成功');
loadConfig();
} else {
layer.msg(res.info || '保存失败');
}
}
});
});
form.on('switch(isEnable-switch)', function(obj) {
var tr = $(obj.elem).closest('tr');
var dataIndex = tr.attr('data-index');
var tableData = gameConfig.propFragments;
if (tableData && tableData[dataIndex]) {
tableData[dataIndex].isEnable = obj.elem.checked;
}
});
form.on('switch(isSale-switch)', function(obj) {
var tr = $(obj.elem).closest('tr');
var dataIndex = tr.attr('data-index');
var tableData = gameConfig.propFragments;
if (tableData && tableData[dataIndex]) {
tableData[dataIndex].isSale = obj.elem.checked;
}
});
table.on('tool(table-propfragment)', function(obj) {
var data = obj.data;
// Layui 返回的是行副本,按碎片编号定位原始配置。
var trIndex = gameConfig.propFragments.findIndex(function(x) {
return String(x.number) === String(data.number);
});
if (obj.event === 'edit') {
showEditDialog(trIndex > -1 ? gameConfig.propFragments[trIndex] : data, false, trIndex);
} else if (obj.event === 'del') {
layer.confirm('确定删除该配置吗?', function(idx) {
if (trIndex > -1) gameConfig.propFragments.splice(trIndex, 1);
obj.del();
layer.close(idx);
});
} else if (obj.event === 'preview') {
if (data.imageUrl) {
previewImage(data.imageUrl);
} else {
layer.msg('暂无图片');
}
}
});
function showAddDialog() {
if (!gameConfig.propFragments) gameConfig.propFragments = [];
var newData = {
number: '',
name: '',
type: 7,
desc: '',
imageUrl: '/uploads/',
saleType: 1,
price: 0,
saleCount: 1,
vipPrice: 0,
dealerPrice: 0,
fragmentCount: 60,
productNumber: '',
isEnable: true,
isSale: true
};
showEditDialog(newData, true);
}
$(document).on('click', '[lay-filter="add-propfragment"]', function() {
showAddDialog();
});
$(document).on('click', '[lay-filter="batchdel-propfragment"]', function() {
var checkStatus = table.checkStatus('table-propfragment');
var checkData = checkStatus.data;
if (checkData.length === 0) {
return layer.msg('请选择要删除的数据');
}
layer.confirm('确定删除选中的 ' + checkData.length + ' 条数据吗?', function(idx) {
var ids = checkData.map(function(item) { return item.number; });
gameConfig.propFragments = gameConfig.propFragments.filter(function(item) {
return !ids.includes(item.number);
});
renderTable();
layer.close(idx);
});
});
function showEditDialog(data, isAdd, rowIndex) {
var dialogTitle = isAdd ? '添加道具碎片' : '编辑道具碎片';
var typeOptions = [
{value: '3', text: '炮塔碎片'},
{value: '4', text: '翅膀碎片'},
{value: '6', text: '战神碎片'}
];
var saleTypeOptions = [
{value: '1', text: '金币'},
{value: '2', text: '钻石'}
];
var typeHtml = '';
typeOptions.forEach(function(opt) {
typeHtml += '<option value="' + opt.value + '"' + (String(data.type) === opt.value ? ' selected' : '') + '>' + opt.text + '</option>';
});
var saleTypeHtml = '';
saleTypeOptions.forEach(function(opt) {
saleTypeHtml += '<option value="' + opt.value + '"' + (String(data.saleType) === opt.value ? ' selected' : '') + '>' + opt.text + '</option>';
});
var productOptions = '<option value="">请选择成品</option>';
propList.forEach(function(p) {
productOptions += '<option value="' + p.number + '"' + (String(data.productNumber) === String(p.number) ? ' selected' : '') + '>' + p.number + ' - ' + p.name + '</option>';
});
var imagePreviewHtml = data.imageUrl
? '<img src="' + data.imageUrl + '" style="max-width:100%;max-height:100%;">'
: '<div class="placeholder">点击上传图片</div>';
var html = '<div class="edit-dialog" style="padding:20px;">' +
'<form class="layui-form">' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">编号</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="number" value="' + (data.number || '') + '" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">名称</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="name" value="' + (data.name || '') + '" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">类型</label>' +
'<div class="layui-input-block">' +
'<select name="type">' + typeHtml + '</select>' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">描述</label>' +
'<div class="layui-input-block">' +
'<input type="text" name="desc" value="' + (data.desc || '') + '" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">图标</label>' +
'<div class="layui-input-block">' +
'<div class="icon-upload-box">' +
'<div class="icon-upload-preview" id="iconPreview">' + imagePreviewHtml + '</div>' +
'<input type="file" name="file" class="upload-btn" accept="image/png" id="propIconUpload">' +
'</div>' +
'<input type="hidden" name="imageUrl" id="imageUrlInput" value="' + (data.imageUrl || '') + '">' +
'<div style="margin-top:8px;color:#999;font-size:12px;">点击图片可预览,仅支持 PNG 格式</div>' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">售卖方式</label>' +
'<div class="layui-input-block">' +
'<select name="saleType">' + saleTypeHtml + '</select>' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">价格</label>' +
'<div class="layui-input-block">' +
'<input type="number" name="price" value="' + (data.price || 0) + '" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">VIP价格</label>' +
'<div class="layui-input-block">' +
'<input type="number" name="vipPrice" value="' + (data.vipPrice || 0) + '" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">经销商价</label>' +
'<div class="layui-input-block">' +
'<input type="number" name="dealerPrice" value="' + (data.dealerPrice || 0) + '" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">每日限购</label>' +
'<div class="layui-input-block">' +
'<input type="number" name="saleCount" value="' + (data.saleCount || 1) + '" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">合成数量</label>' +
'<div class="layui-input-block">' +
'<input type="number" name="fragmentCount" value="' + (data.fragmentCount || 60) + '" class="layui-input">' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">成品编号</label>' +
'<div class="layui-input-block">' +
'<select name="productNumber">' + productOptions + '</select>' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">启用</label>' +
'<div class="layui-input-block">' +
'<input type="checkbox" name="isEnable" lay-skin="switch" lay-text="启用|禁用" ' + (data.isEnable ? 'checked' : '') + '>' +
'</div>' +
'</div>' +
'<div class="layui-form-item">' +
'<label class="layui-form-label">销售</label>' +
'<div class="layui-input-block">' +
'<input type="checkbox" name="isSale" lay-skin="switch" lay-text="销售|停售" ' + (data.isSale ? 'checked' : '') + '>' +
'</div>' +
'</div>' +
'</form>' +
'</div>';
layer.open({
type: 1,
title: dialogTitle,
area: ['520px', '650px'],
content: html,
btn: ['保存', '取消'],
shadeClose: true,
success: function(layero) {
form.render('select');
var $preview = layero.find('#iconPreview');
var $input = layero.find('#imageUrlInput');
var $fileInput = layero.find('#propIconUpload');
$preview.on('click', function() {
var url = $input.val();
if (url) {
previewImage(url);
}
});
$fileInput.on('change', function() {
var file = this.files[0];
if (file) {
var number = layero.find('input[name="number"]').val();
if (!number) {
layer.msg('请先填写碎片编号');
$(this).val('');
return;
}
var formData = new FormData();
formData.append('file', file);
formData.append('number', number);
$.ajax({
// 配置图片按碎片编号覆盖,并通过 timespan 参数刷新浏览器缓存。
url: setter.baseurl + 'adminapi/ImageUpload/upload/config',
type: 'POST',
data: formData,
processData: false,
contentType: false,
headers: { 'token': layui.data(setter.tableName)[setter.request.tokenName] },
success: function(res) {
if (res.code === 0 || res.code === 200) {
var path = res.data.path;
$input.val(path);
$preview.html('<img src="' + path + '" style="max-width:100%;max-height:100%;">');
layer.msg('上传成功');
} else {
layer.msg(res.info || '上传失败');
}
},
error: function() {
layer.msg('上传失败');
}
});
}
});
},
yes: function(index, layero) {
if (isAdd) {
var newItem = {
number: layero.find('input[name="number"]').val(),
name: layero.find('input[name="name"]').val(),
type: parseInt(layero.find('select[name="type"]').val()),
desc: layero.find('input[name="desc"]').val(),
imageUrl: layero.find('input[name="imageUrl"]').val(),
saleType: parseInt(layero.find('select[name="saleType"]').val()),
price: parseFloat(layero.find('input[name="price"]').val()) || 0,
vipPrice: parseFloat(layero.find('input[name="vipPrice"]').val()) || 0,
dealerPrice: parseFloat(layero.find('input[name="dealerPrice"]').val()) || 0,
saleCount: parseInt(layero.find('input[name="saleCount"]').val()) || 1,
fragmentCount: parseInt(layero.find('input[name="fragmentCount"]').val()) || 60,
productNumber: layero.find('select[name="productNumber"]').val(),
isEnable: layero.find('input[name="isEnable"]').prop('checked'),
isSale: layero.find('input[name="isSale"]').prop('checked')
};
gameConfig.propFragments.unshift(newItem);
} else if (rowIndex > -1) {
// 上传后的 imageUrl 必须写回原数组,否则表格重载仍会使用旧图片。
var original = gameConfig.propFragments[rowIndex];
original.number = layero.find('input[name="number"]').val();
original.name = layero.find('input[name="name"]').val();
original.type = parseInt(layero.find('select[name="type"]').val());
original.desc = layero.find('input[name="desc"]').val();
original.imageUrl = layero.find('input[name="imageUrl"]').val();
original.saleType = parseInt(layero.find('select[name="saleType"]').val());
original.price = parseFloat(layero.find('input[name="price"]').val()) || 0;
original.vipPrice = parseFloat(layero.find('input[name="vipPrice"]').val()) || 0;
original.dealerPrice = parseFloat(layero.find('input[name="dealerPrice"]').val()) || 0;
original.saleCount = parseInt(layero.find('input[name="saleCount"]').val()) || 1;
original.fragmentCount = parseInt(layero.find('input[name="fragmentCount"]').val()) || 60;
original.productNumber = layero.find('select[name="productNumber"]').val();
original.isEnable = layero.find('input[name="isEnable"]').prop('checked');
original.isSale = layero.find('input[name="isSale"]').prop('checked');
}
layer.close(index);
table.reload('table-propfragment', {
data: gameConfig.propFragments
});
}
});
}
window.saveSection=function(n){layui.admin.req({method:'get',url:(layui.setter.baseurl||'/')+'adminapi/GameConfig/SaveSection/'+n,done:function(r){layui.layer.msg(r.info||(r.code===0?'保存成功':'保存失败'))}})}
loadConfig();
});
</script>