完善资源模块

This commit is contained in:
云泽网
2025-05-16 23:56:21 +08:00
parent 02b21dcc6d
commit f6f8f6ac52
21 changed files with 3622 additions and 285 deletions
+113 -23
View File
@@ -14,15 +14,15 @@
<div class="layui-form-item">
<label class="layui-form-label">资源名称</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="请输入资源名称" autocomplete="off"
class="layui-input">
<input type="text" name="title" required lay-verify="required" placeholder="请输入资源名称" autocomplete="off"
class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类</label>
<div class="layui-input-block">
<select name="cate_id" lay-verify="required">
<select name="cate" lay-verify="required">
<option value="">请选择分类</option>
</select>
</div>
@@ -31,15 +31,15 @@
<div class="layui-form-item">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入资源描述" class="layui-textarea"></textarea>
<textarea name="desc" placeholder="请输入资源描述" class="layui-textarea" lay-affix="clear"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上传者</label>
<div class="layui-input-block">
<input type="text" name="uploader" required lay-verify="required" placeholder="请输入上传者" autocomplete="off"
class="layui-input">
<input type="text" name="uploader" required lay-verify="required" placeholder="请输入上传者"
autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
@@ -55,7 +55,7 @@
style="width: 118px; height: 118px;object-fit: cover;">
<div id="upload-text"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="icon-progress">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
<input type="hidden" name="icon" id="icon" value="">
@@ -64,26 +64,50 @@
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">资源文件</label>
<div class="layui-input-block">
<input type="text" name="fileurl" required placeholder="本地资源地址" autocomplete="off"
class="layui-input" value="" style="margin-bottom: 10px;" lay-affix="clear">
<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
<i class="layui-icon layui-icon-upload"></i>
<div>点击上传,或将文件拖拽到此处</div>
<div class="layui-hide" id="ID-upload-demo-preview">
<hr>
<div class="file-info">
<i class="layui-icon layui-icon-file"></i>
<span class="file-name"></span>
<span class="file-size"></span>
</div>
</div>
</div>
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="file-progress" style="margin-top: 10px;">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
<input type="hidden" name="file" id="file" value="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">资源链接</label>
<div class="layui-input-block">
<input type="text" name="url" required lay-verify="required" placeholder="请输入资源链接" autocomplete="off"
class="layui-input">
<input type="text" name="url" required placeholder="百度网盘、115网盘、蓝奏云等" autocomplete="off"
class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分享码</label>
<div class="layui-input-block">
<input type="text" name="code" required lay-verify="required" placeholder="请输入分享码" autocomplete="off"
class="layui-input">
<input type="text" name="code" required placeholder="请输入分享码" autocomplete="off"
class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="number" name="sort" value="0" class="layui-input" placeholder="数字越大越靠前">
<input type="number" name="sort" value="0" class="layui-input" placeholder="数字越大越靠前" lay-affix="clear">
</div>
</div>
@@ -100,46 +124,89 @@
layui.use(['form', 'layer'], function () {
var form = layui.form;
var layer = layui.layer;
var $ = layui.jquery;
var $ = layui.$;
var upload = layui.upload;
var element = layui.element;
// 图标上传
var uploadInst = upload.render({
var iconUpload = upload.render({
elem: '#upload-btn',
url: '{:url("index/upload_img")}',
before: function (obj) {
obj.preview(function (index, file, result) {
$('#upload-img').attr('src', result);
});
element.progress('filter-demo', '0%');
layer.msg('上传中', { icon: 16, time: 0 });
element.progress('icon-progress', '0%');
layer.msg('图标上传中', { icon: 16, time: 0 });
},
done: function (res) {
if (res.code > 0) {
return layer.msg('上传失败');
return layer.msg('图标上传失败');
}
$('#icon').val(res.data);
$('#upload-text').html('');
layer.msg('上传成功', { icon: 1 });
layer.msg('图标上传成功', { icon: 1 });
},
uploadError: function () {
var demoText = $('#upload-text');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
iconUpload.upload();
});
},
progress: function (n, elem, e) {
element.progress('filter-demo', n + '%');
element.progress('icon-progress', n + '%');
if (n == 100) {
layer.msg('上传完毕', { icon: 1 });
layer.msg('图标上传完毕', { icon: 1 });
}
}
});
// 文件上传
var fileUpload = upload.render({
elem: '#ID-upload-demo-drag',
url: '{:url("index/upload_file")}',
accept: 'file',
exts: 'doc|docx|xls|xlsx|ppt|pptx|pdf|txt|zip|rar|7z',
before: function (obj) {
obj.preview(function (index, file, result) {
$('#ID-upload-demo-preview').show();
$('.file-name').text(file.name);
$('.file-size').text(formatFileSize(file.size));
});
element.progress('file-progress', '0%');
layer.msg('文件上传中', { icon: 16, time: 0 });
},
done: function (res) {
if (res.code > 0) {
return layer.msg('文件上传失败');
}
$('#file').val(res.data.src);
$('input[name="fileurl"]').val(res.data.src);
layer.msg('文件上传成功', { icon: 1 });
},
uploadError: function () {
layer.msg('文件上传失败', { icon: 2 });
},
progress: function (n, elem, e) {
element.progress('file-progress', n + '%');
if (n == 100) {
layer.msg('文件上传完毕', { icon: 1 });
}
}
});
// 格式化文件大小
function formatFileSize(bytes) {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
// 获取分类列表
$.get('{:url("resources/cate")}', function (res) {
$.get('{:url("resources/getcate")}', function (res) {
if (res.code == 0) {
var html = '<option value="">请选择分类</option>';
res.data.forEach(function (item) {
@@ -151,7 +218,7 @@
});
}
});
$('select[name="cate_id"]').html(html);
$('select[name="cate"]').html(html);
form.render('select');
} else {
layer.msg(res.msg, { icon: 2 });
@@ -179,6 +246,29 @@
});
return false;
});
// 重置按钮点击事件
$('button[type="reset"]').on('click', function() {
// 重新加载分类列表
$.get('{:url("resources/getcate")}', function (res) {
if (res.code == 0) {
var html = '<option value="">请选择分类</option>';
res.data.forEach(function (item) {
var disabled = item.cid == 0 ? 'disabled' : '';
html += '<option value="' + item.id + '" ' + disabled + '>' + item.name + '</option>';
if (item.children && item.children.length > 0) {
item.children.forEach(function (child) {
html += '<option value="' + child.id + '">├─ ' + child.name + '</option>';
});
}
});
$('select[name="cate"]').html(html);
form.render('select');
} else {
layer.msg(res.msg, { icon: 2 });
}
});
});
});
</script>