You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

533 lines
22 KiB
HTML

2 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
2 years ago
<!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 -->
<style>
.select-img-wrap {
width: calc(100% - 40px);
margin: 0 20px;
}
.select-img-wrap .dir-img-icon {
position: relative;
}
.select-img-wrap .dir-img-icon .icon {
width: 70px;
height: 70px;
cursor: pointer;
vertical-align: bottom;
background: #e7e7e7;
}
.select-img-wrap .dir-img-icon.active::before {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
}
.select-img-wrap .dir-img-icon.active::after {
content: "";
width: 16px;
height: 8px;
2 years ago
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(135deg);
}
</style>
2 years ago
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addData">添加目录</button>
<button class="layui-btn layui-btn-sm" lay-event="addKnowledge">添加知识</button>
2 years ago
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//温馨提示:默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据。
//详见http://www.ilayuis.com/doc/modules/table.html#totalRow
table.render({
elem: '#test'
,url:'http://localhost:8080/knowledge/queryKnowledge'
,toolbar: '#toolbarDemo'
,title: '知识中心'
,parseData: function(res){
// var parse = JSON.parse(res.data.data);
console.log('data',res)
return {
"code" : res.code, //解析接口状态
"count":res.count, //解析总页数
"msg" : res.msg, //解析提示文本
"data" : res.data.list //解析数据列表
2 years ago
};
}
,response:{
statusCode:200 //规定成功的状态码为200
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'编号', width:300, sort: true, }
,{field:'knowledgeName', title:'知识名称', width:300}
,{field:'knowledgeBrief', title:'知识简介', width:300}
,{field:'knowledgeUrl', title:'超链接', width:300}
,{field:'dirName', title:'归属目录', width:300}
2 years ago
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
});
//工具栏事件
table.on('toolbar(test)', function (obj) {
var data = obj.data;
//console.log(obj)
if (obj.event === 'addData') {
addDir(data);
} else if (obj.event === 'addKnowledge') {
addKnowledge(data);
}
2 years ago
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
//obj.del();//删除表结构
layer.close(index);
//获取要删除的服务的id
var deleteKnowledge = data.id;
//发送Ajax到后台进行删除操作
$.get("http://localhost:8080/knowledge/deleteKnowledge", { "id": deleteKnowledge},
function(result){
if (result.code==200){
// 删除成功之后 弹出msg
layer.msg(result.msg);
// 重点:继续显示当前页
$(".layui-laypage-btn").click();
} else {
layer.msg(result.msg, {icon: 2});
layer.close(index);
2 years ago
}
});
});
} else if(obj.event === 'edit'){
selectOne(data);
2 years ago
}
});
});
</script>
<script>
function selectOne(data) {
//弹框
layer.open({
type: 1,
content: $("#updateForm").html(),
title: ['修改页面', 'font-size:18px;'],
area: ['600px', '600px'],
//弹出后回调
success: function () {
$("#id").val(data.id);
$("#knowledgeName").val(data.knowledgeName);
$("#knowledgeBrief").val(data.knowledgeBrief);
$("#knowledgeUrl").val(data.knowledgeUrl);
$("#dirName").val(data.dirName);
$("#knowledgeImg").val(data.knowledgeImg);
//渲染页面
layui.form.render();
},
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
$.post("http://localhost:8080/knowledge/updateKnowledge", $("#updateKnowledge").serialize(),
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
} else {
layer.msg(data.msg);
}
});
}
, btn2: function (index, layero) {
// alert("取消")
}
});
layui.use(['form'], function () {
var form = layui.form;
$.ajax({
2 years ago
url: 'http://localhost:8080/knowledge/queryDir',
type: "get",
2 years ago
success: function (res) {
if (res.msg === "success") {
//给一个默认值(‘请选择’)
2 years ago
var opt = ''
//获取返回的数据
2 years ago
var value = res.data
//循环遍历
for (var i in value) {
2 years ago
opt += `<option value="${value[i].dirName}" ${data.dirName===value[i].dirName?`selected="${data.dirName}`:''}">${value[i].dirName}</option>`
}
2 years ago
$("#directorId").html(opt)
form.render('select')//需要渲染一下
} else {
2 years ago
layer.alert(res.msg, {icon: 2, title: '提示'}, function (i) {
layer.closeAll()
})
}
}
});
});
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
//拖拽上传
upload.render({
elem: '#test10'
,url: 'http://localhost:8080/knowledge/upload?file=upload' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
, accept: 'file'
,done: function(res){
layer.msg('上传成功');
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
console.log(res)
}
});
});
}
</script>
<script type="text/html" id="updateForm">
2 years ago
<form class="layui-form layui-form-pane" style="padding: 15px" id="updateKnowledge">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">课程名称</label>
<div class="layui-input-block">
<input type="text" name="knowledgeName" id="knowledgeName" required lay-verify="required" autocomplete="off"
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="knowledgeBrief" id="knowledgeBrief" required lay-verify="required" autocomplete="off"
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="knowledgeUrl" id="knowledgeUrl" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">归属目录</label>
<div class="layui-input-block">
<select name="dirName" id="directorId" >
<option value="">直接选择或搜索选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上传资料</label>
<div class="layui-input-inline">
<div class="layui-upload-drag" id="test10">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
<div name="knowledgeImg" class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 196px">
</div>
</div>
</div>
</div>
</form>
</script>
<script>
function addDir(data) {
var $ = layui.jquery
2 years ago
var dirIcon = ''
//弹框
layer.open({
type: 1,
content: $("#addForm").html(),
2 years ago
title: ['添加目录', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
var params = {
dirName: dirName,
2 years ago
dirIcon: dirIcon,
}
//修改操作
$.get("http://localhost:8080/knowledge/addDirectory", params,
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
} else {
layer.msg(data.msg);
}
});
}
, btn2: function (index, layero) {
// alert("取消")
}
});
$(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
const parentEl = $(this).parent('.dir-img-icon')
const siblingsEl = $(parentEl).siblings('.dir-img-icon')
parentEl.addClass('active')
const name=$(this).attr('name')
console.log(name,"name")
Array.from(siblingsEl).forEach(item=>{
$(item).removeClass('active')
})
dirIcon = $(this).attr('name')
})
}
</script>
<script type="text/html" id="addForm">
2 years ago
<form class="layui-form layui-form-pane" style="padding: 15px" id="addDirectory">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
<input type="text" name="dirName" id="dirName" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
2 years ago
<!-- <input type="hidden" name="dirIcon" id="dirIcon" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1" name="compman">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1" name="financial">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="English">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="Computers">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="graduate" >
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="science">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="Industry">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="professional">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="Zhaopin">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="boss">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="hunting">
</div>
2 years ago
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="retractor">
</div>
<div name="dirIcon" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1" name="Future">
</div>
</div>
</div>
</form>
</script>
<script>
function addKnowledge(data) {
//弹框
layer.open({
type: 1,
content: $("#addForm1").html(),
2 years ago
title: ['添加知识', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
$.post("http://localhost:8080/knowledge/addKnowledge", $("#addKnowledge").serialize(),
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
} else {
layer.msg(data.msg);
}
});
}
, btn2: function (index, layero) {
// alert("取消")
}
});
layui.use(['form'], function() {
var form = layui.form;
$.ajax({
2 years ago
url: 'http://localhost:8080/knowledge/queryDir',
type:"get",
success: function(data) {
if(data.msg === "success"){
//给一个默认值(‘请选择’)
var opt = '<option value="" selected=""></option>';
//获取返回的数据
var value = data.data;
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
$("#directorId").html(opt);
form.render('select');//需要渲染一下
}else{
layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
}
}
});
});
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
upload.render({
elem: '#test10'
,url: 'http://localhost:8080/knowledge/upload?param=file' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
,accept: 'file'
,done: function(res){
layer.msg('上传成功');
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
console.log(res.data)
}
});
});
}
</script>
<script type="text/html" id="addForm1">
2 years ago
<form class="layui-form layui-form-pane" style="padding: 15px" id="addKnowledge" enctype="multipart/form-data">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">课程名称</label>
<div class="layui-input-block">
<input type="text" name="knowledgeName" id="knowledgeName" required lay-verify="required" autocomplete="off"
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="knowledgeBrief" id="knowledgeBrief" required lay-verify="required" autocomplete="off"
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="knowledgeUrl" id="knowledgeUrl" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">归属目录</label>
<div class="layui-input-block">
<select name="dirName" id="directorId" >
<option value="">直接选择或搜索选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上传资料</label>
<div class="layui-input-inline">
<div class="layui-upload-drag" id="test10">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
<div name="knowledgeImg" class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 196px">
</div>
</div>
</div>
</div>
</form>
</script>
2 years ago
</body>
</html>