wanghaobo
/
zhiyun
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

目录归属修改

Browse Source
main
whb 2 years ago
parent 9ed9c64bf5
commit c81052b0b9
12 changed files with 1920 additions and 677 deletions
Show Stats Download Patch File Download Diff File

4
src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java
Unescape Escape View File

@ -49,10 +49,6 @@ public class CourseServiceImpl extends ServiceImpl<CourseMapper,Course> implemen
PageHelper.startPage(page,limit);
//查询所有课程
List<CourseVo> courseVoList = courseMapper.queryCourse();
if (courseVoList.isEmpty())
{
throw new ServiceException("400","课程数据为空");
}
PageInfo<CourseVo> pageInfo = new PageInfo<CourseVo>(courseVoList);
PageVO<CourseVo> courseVoPageInfo = new PageVO<>();
//当前页

2
src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java
Unescape Escape View File

@ -17,7 +17,7 @@ import java.io.IOException;
* @author: Jie
* @date: 2022/8/10 9:48
**/
@WebFilter(filterName = "LoginCheckFilter", urlPatterns = "/*")
//@WebFilter(filterName = "LoginCheckFilter", urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {

3
src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java
Unescape Escape View File

@ -42,9 +42,6 @@ public class InviteServieImpl extends ServiceImpl<InviteMapper, Invite> implemen
PageHelper.startPage(page, limit);
//查询所有课程
List<InviteVo> inviteVoList = inviteMapper.queryInvite();
if (inviteVoList.isEmpty()) {
throw new ServiceException("400", "课程数据为空");
}
PageInfo<InviteVo> pageInfo = new PageInfo<InviteVo>(inviteVoList);
PageVO<InviteVo> inviteVoPageVO = new PageVO<>();
//当前页

4
src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java
Unescape Escape View File

@ -43,10 +43,6 @@ public class ServeServiceImpl extends ServiceImpl<ServeMapper, Serve> implements
PageHelper.startPage(page,limit);
//查询所有课程
List<ServeVo> serveVoList = serveMapper.queryService();
if (serveVoList.isEmpty())
{
throw new ServiceException("400","服务数据为空");
}
PageInfo<ServeVo> pageInfo = new PageInfo<ServeVo>(serveVoList);
PageVO<ServeVo> serveVoPageVO = new PageVO<>();
//当前页

2
src/main/resources/application.yml
Unescape Escape View File

@ -19,7 +19,7 @@ spring:
druid:
url: jdbc:mysql://localhost:3306/zhiyun?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 123456
password: root
thymeleaf:
cache: false
prefix: classpath:/templates

182
src/main/resources/templates/layui-v2.6.8/academicList.html
Unescape Escape View File

@ -7,44 +7,10 @@
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- 注意：如果你直接复制所有代码到本地，上述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;
border: 3px solid #FF5722;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(135deg);
}
</style>
</head>
<body>
@ -338,7 +304,55 @@
</script>
<script type="text/html" id="addForm">
<style>
/* 取消弹框拖拽 */
.layui-layer-resize {
display: none;
}
.select-img-wrap {
width: calc(100% - 90px);
margin: 10px auto 0;
}
.select-img-wrap .dir-img-icon {
position: relative;
padding: 5px !important;
}
.select-img-wrap .dir-img-icon .icon {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
}
.select-img-wrap .dir-img-icon.active {
background: #007aff;
}
.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;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
</style>
<form class="layui-form" id="addDirectory">
<!-- 把id 作为隐藏域传过去 -->
@ -353,48 +367,116 @@
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" 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">
<img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
</div>
<div name="dirImg" 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">
<img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
</div>
</div>
</div>
</form>
</script>
<style>
.icon-swiper-wrap {
position: relative;
}
.icon-swiper-wrap .swiper {
box-sizing: border-box;
width: calc(100% - 60px);
height: 162px;
margin: 20px 30px 20px 30px;
}
.icon-swiper-wrap .swiper-slide {
height: calc((100% - 10px) / 2);
text-align: center;
font-size: 12px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.icon-swiper-wrap .swiper-slide.active::before {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
}
.icon-swiper-wrap .swiper-slide.active::after {
content: "";
width: 16px;
height: 8px;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
.icon-swiper-wrap .swiper-slide img {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
border: 3px solid transparent;
}
.icon-swiper-wrap .swiper-slide.active img {
border: 3px solid #007aff;
}
.icon-swiper-wrap .swiper-pagination {
bottom: 0 !important;
}
.icon-swiper-wrap .swiper-button-prev {
margin-left: -10px !important;
}
.icon-swiper-wrap .swiper-button-next {
margin-right: -10px !important;
}
</style>
<script>
function addAcademic(data) {
//弹框

695
src/main/resources/templates/layui-v2.6.8/applicationList.html
Unescape Escape View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>Layui</title>
@ -7,45 +8,11 @@
<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">
<!-- 注意：如果你直接复制所有代码到本地，上述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;
border: 3px solid #FF5722;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(135deg);
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
@ -53,7 +20,7 @@
<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="addApplication">添加应用</button>
<button class="layui-btn layui-btn-sm" lay-event="addCourse">添加应用</button>
</div>
</script>
<script type="text/html" id="barDemo">
@ -65,15 +32,20 @@
<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 src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></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/application/queryApplication'
, toolbar: '#toolbarDemo'
, title: '应用中心'
, title: '课程中心'
, totalRow: true
, parseData: function (res) {
console.log('data', res)
@ -88,64 +60,62 @@
statusName: 'code', //规定返回的状态码字段为code
statusCode: 200 //规定成功的状态码为200
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
, cols: [[
{ type: 'checkbox', fixed: 'left' }
,{field:'id', title:'编号', width:250, sort: true, }
,{field:'appName', title:'应用名称', width:250}
,{field:'appBrief', title:'应用简介', width:250}
,{field:'appUrl', title:'超链接', width:250}
,{field:'dirName', title:'归属目录', width:250}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
,page: true
});
, page: true
})
//工具栏事件
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var data = obj.data;
var data = obj.data
//console.log(obj)
if (obj.event === 'addData') {
addDir(data);
} else if (obj.event === 'addApplication') {
addApplication(data);
addDir(data)
} else if (obj.event === 'addCourse') {
addCourse(data)
}
});
})
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
table.on('tool(test)', function (obj) {
var data = obj.data
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
//obj.del();//删除表结构
layer.close(index);
layer.close(index)
//获取要删除的服务的id
var deleteApplication = data.id;
var deleteCourseId = data.id
//发送Ajax到后台，进行删除操作
$.get("http://localhost:8080/application/deleteApplication", { "id": deleteApplication},
function(result){
if (result.code==200){
$.get("http://localhost:8080/application/deleteApplication", { "id": deleteCourseId }, function (result) {
if (result.code == 200) {
// 删除成功之后 弹出msg
layer.msg(result.msg);
layer.msg(result.msg)
// 重点：继续显示当前页
$(".layui-laypage-btn").click();
$(".layui-laypage-btn").click()
} else {
layer.msg(result.msg, {icon: 2});
layer.close(index);
layer.msg(result.msg, { icon: 2 })
layer.close(index)
}
});
});
}else if(obj.event === 'edit'){
selectOne(data);
})
})
} else if (obj.event === 'edit') {
selectOne(data)
}
});
})
});
</script>
<script>
function selectOne(data) {
function selectOne (data) {
//弹框
layer.open({
type: 1,
@ -160,61 +130,89 @@
$("#appBrief").val(data.appBrief);
$("#appUrl").val(data.appUrl);
$("#dirName").val(data.dirName);
$("#appIcon").val(data.appIcon)
//渲染页面
layui.form.render();
layui.form.render()
},
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
$.post("http://localhost:8080/application/updateApplication", $("#updateApplication").serialize(),
$.post("http://localhost:8080/application/updateApplication", $("#updateCourse").serialize(),
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
})
layui.use(['form'], function () {
var form = layui.form;
var form = layui.form
$.ajax({
url: 'http://localhost:8080/application/queryDir',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
var opt = '<option value="" selected="' + data.dirName + '"></option>';
var opt = '<option value="" selected="' + data.dirName + '"></option>'
//获取返回的数据
var value = data.data;
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');//需要渲染一下
$("#directorId").html(opt)
form.render('select')//需要渲染一下
} else {
layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
layer.closeAll();
});
layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
layer.closeAll()
})
}
}
});
});
})
})
var swiper = new Swiper(".icon-swiper", {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 12,
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
$(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
const parentEl = $(this).parent('.swiper-slide')
const siblingsEl = $(parentEl).siblings('.swiper-slide')
parentEl.addClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
appIcon = $(this).attr('src')
})
}
</script>
<script type="text/html" id="updateForm">
<form class="layui-form" id="updateApplication">
<form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
@ -252,19 +250,132 @@
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<div class="layui-input-block">
<input type="text" name="appIcon" id="appIcon" class="layui-input">
<div class="icon-swiper-wrap">
<div #swiperRef="" class="swiper icon-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/500/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/501/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/502/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/503/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/504/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/505/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/506/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/507/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/508/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/509/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/510/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/511/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/512/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/520/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/521/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/523/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/533/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/534/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/535/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/536/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/550/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/551/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/552/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/553/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/554/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/555/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/556/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/557/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/558/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/559/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/560/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/562/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/563/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/564/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/565/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/566/70/70">
</div>
</div>
</div>
<div class="swiper-button-next" style="margin-right: -5px;"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 弹框错乱，多了这个 div 闭合标签 -->
<!-- </div> -->
</form>
</script>
<script>
function addDir(data) {
function addDir (data) {
var $ = layui.jquery
var dirImg = ''
//弹框
@ -274,7 +385,6 @@
title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
@ -286,24 +396,24 @@
$.get("http://localhost:8080/application/addDirectory", params,
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
$(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
})
$(".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')
Array.from(siblingsEl).forEach(item=>{
$(item).removeClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
dirImg = $(this).attr('src')
})
@ -311,12 +421,58 @@
</script>
<script type="text/html" id="addForm">
<style>
/* 取消弹框拖拽 */
.layui-layer-resize {
display: none;
}
.select-img-wrap {
width: calc(100% - 90px);
margin: 10px auto 0;
}
.select-img-wrap .dir-img-icon {
position: relative;
padding: 5px !important;
}
.select-img-wrap .dir-img-icon .icon {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
}
<form class="layui-form" id="addDirectory">
.select-img-wrap .dir-img-icon.active {
background: #007aff;
}
.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;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
</style>
<form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
@ -326,106 +482,209 @@
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" 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">
<img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
</div>
<div name="dirImg" 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">
<img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
</div>
</div>
</div>
</form>
</script>
<style>
.icon-swiper-wrap {
position: relative;
}
.icon-swiper-wrap .swiper {
box-sizing: border-box;
width: calc(100% - 60px);
height: 162px;
margin: 20px 30px 20px 30px;
}
.icon-swiper-wrap .swiper-slide {
height: calc((100% - 10px) / 2);
text-align: center;
font-size: 12px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.icon-swiper-wrap .swiper-slide.active::before {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
}
.icon-swiper-wrap .swiper-slide.active::after {
content: "";
width: 16px;
height: 8px;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
.icon-swiper-wrap .swiper-slide img {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
border: 3px solid transparent;
}
.icon-swiper-wrap .swiper-slide.active img {
border: 3px solid #007aff;
}
.icon-swiper-wrap .swiper-pagination {
bottom: 0 !important;
}
.icon-swiper-wrap .swiper-button-prev {
margin-left: -10px !important;
}
.icon-swiper-wrap .swiper-button-next {
margin-right: -10px !important;
}
</style>
<script>
function addApplication(data) {
function addCourse (data) {
layui.use(['form'], function () {
var form = layui.form
var appIcon = ''
//弹框
layer.open({
type: 1,
content: $("#addForm1").html(),
title: ['添加应用', 'font-size:18px;'],
area: ['600px', '600px'],
content: $("#addCourseTemplate").html(),
title: ['添加课程', 'font-size:18px;'],
area: ['600px', '650px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
var formData = form.val('addCourseForm') // 表单取值
Object.assign(formData, { appIcon: appIcon })
//修改操作
$.post("http://localhost:8080/application/addApplication", $("#addApplication").serialize(),
$.post("http://localhost:8080/application/addApplication", formData,
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
layui.use(['form'], function() {
var form = layui.form;
})
$.ajax({
url: 'http://localhost:8080/application/queryDir',
type:"get",
success: function(data) {
if(data.msg === "success"){
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
var opt = '<option value="" selected=""></option>';
var opt = '<option value="" selected=""></option>'
//获取返回的数据
var value = data.data;
var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
//循环遍历
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();});
$("#directorId").html(opt)
// $.each($("#directorId").children(), function () {
// $(this).removeProp('selected')
// if ($(this).text() === data.dirName) {
// $(this).prop('selected', data.dirName)
// }
// })
form.render('select')//需要渲染一下
} else {
layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
layer.closeAll()
})
}
}
});
});
}
</script>
})
<script type="text/html" id="addForm1">
var swiper = new Swiper(".icon-swiper", {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 12,
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
<form class="layui-form" id="addApplication" enctype="multipart/form-data">
$(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
const parentEl = $(this).parent('.swiper-slide')
const siblingsEl = $(parentEl).siblings('.swiper-slide')
parentEl.addClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
appIcon = $(this).attr('src')
})
})
}
</script>
<script type="text/html" id="addCourseTemplate">
<form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
@ -460,14 +719,128 @@
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<div class="layui-input-block">
<input type="text" name="appIcon" id="appIcon" class="layui-input">
<div class="icon-swiper-wrap">
<div #swiperRef="" class="swiper icon-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/500/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/501/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/502/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/503/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/504/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/505/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/506/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/507/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/508/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/509/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/510/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/511/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/512/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/520/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/521/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/523/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/533/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/534/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/535/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/536/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/550/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/551/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/552/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/553/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/554/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/555/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/556/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/557/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/558/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/559/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/560/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/562/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/563/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/564/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/565/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/566/70/70">
</div>
</div>
</div>
<div class="swiper-button-next" style="margin-right: -5px;"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 弹框错乱，多了这个 div 闭合标签 -->
<!-- </div> -->
</form>
</script>
</body>

707
src/main/resources/templates/layui-v2.6.8/courseList.html
Unescape Escape View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>Layui</title>
@ -7,45 +8,9 @@
<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">
<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;
/*border: 3px solid #00FFFF;*/
border: 3px solid #FF5722;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(135deg);
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
@ -67,9 +32,12 @@
<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 src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
layui.use('table', function () {
var table = layui.table;
var table = layui.table
//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
//详见：http://www.ilayuis.com/doc/modules/table.html#totalRow
@ -86,68 +54,68 @@
"count": res.count, //解析总页数
"msg": res.msg, //解析提示文本
"data": res.data.list //解析数据列表
};
}
}
, response: {
statusName: 'code', //规定返回的状态码字段为code
statusCode: 200 //规定成功的状态码为200
}
, cols: [[
{type: 'checkbox', fixed: 'left'}
, {field: 'id', title: '序号', width: 300, sort: true,}
, {field: 'courseName', title: '课程名称', width: 300}
, {field: 'courseBrief', title: '课程简介', width: 300}
, {field: 'courseUrl', title: '超链接', width: 300}
, {field: 'dirName', title: '归属目录', width: 300}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
{ type: 'checkbox', fixed: 'left' }
, { field: 'id', title: '序号', width: 300, sort: true, }
, { field: 'courseName', title: '课程名称', width: 300 }
, { field: 'courseBrief', title: '课程简介', width: 300 }
, { field: 'courseUrl', title: '超链接', width: 300 }
, { field: 'dirName', title: '归属目录', width: 300 }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
, page: true
});
})
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var data = obj.data;
var data = obj.data
//console.log(obj)
if (obj.event === 'addData') {
addDir(data);
addDir(data)
} else if (obj.event === 'addCourse') {
addCourse(data);
addCourse(data)
}
});
})
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
var data = obj.data
//console.log(obj)
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
//obj.del();//删除表结构
layer.close(index);
layer.close(index)
//获取要删除的服务的id
var deleteCourseId = data.id;
var deleteCourseId = data.id
$.get("http://localhost:8080/api/course/delCourseById", {"id": deleteCourseId}, function (result) {
$.get("http://localhost:8080/api/course/delCourseById", { "id": deleteCourseId }, function (result) {
if (result.code == 200) {
// 删除成功之后 弹出msg
layer.msg(result.msg);
layer.msg(result.msg)
// 重点：继续显示当前页
$(".layui-laypage-btn").click();
$(".layui-laypage-btn").click()
} else {
layer.msg(result.msg, {icon: 2});
layer.close(index);
layer.msg(result.msg, { icon: 2 })
layer.close(index)
}
});
});
})
})
} else if (obj.event === 'edit') {
selectOne(data);
selectOne(data)
}
});
})
});
</script>
<script>
function selectOne(data) {
function selectOne (data) {
//弹框
layer.open({
type: 1,
@ -157,70 +125,94 @@
//弹出后回调
success: function () {
$("#id").val(data.id);
$("#courseName").val(data.courseName);
$("#courseBrief").val(data.courseBrief);
$("#courseUrl").val(data.courseUrl);
$("#dirName").val(data.dirName);
$("#courseIcon").val(data.courseIcon);
$("#id").val(data.id)
$("#courseName").val(data.courseName)
$("#courseBrief").val(data.courseBrief)
$("#courseUrl").val(data.courseUrl)
$("#dirName").val(data.dirName)
$("#courseIcon").val(data.courseIcon)
//渲染页面
layui.form.render();
layui.form.render()
},
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
$.get("http://localhost:8080/api/course/updateById", $("#updateCourse").serialize(),
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
})
layui.use(['form'], function () {
var form = layui.form;
var form = layui.form
$.ajax({
url: 'http://localhost:8080/api/course/queryCourseDirectory',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
var opt = '<option value="" selected="' + data.dirName + '"></option>';
var opt = '<option value="" selected="' + data.dirName + '"></option>'
//获取返回的数据
var value = data.data;
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');//需要渲染一下
$("#directorId").html(opt)
form.render('select')//需要渲染一下
} else {
layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
layer.closeAll();
});
layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
layer.closeAll()
})
}
}
});
});
})
})
var swiper = new Swiper(".icon-swiper", {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 12,
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
$(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
const parentEl = $(this).parent('.swiper-slide')
const siblingsEl = $(parentEl).siblings('.swiper-slide')
parentEl.addClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
courseIcon = $(this).attr('src')
})
}
</script>
<script type="text/html" id="updateForm">
<form class="layui-form" id="updateCourse">
<form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
@ -256,17 +248,132 @@
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程图标</label>
<div class="layui-input-block">
<input type="text" name="courseIcon" id="courseIcon" class="layui-input">
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<div class="icon-swiper-wrap">
<div #swiperRef="" class="swiper icon-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/500/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/501/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/502/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/503/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/504/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/505/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/506/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/507/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/508/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/509/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/510/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/511/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/512/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/520/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/521/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/523/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/533/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/534/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/535/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/536/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/550/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/551/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/552/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/553/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/554/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/555/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/556/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/557/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/558/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/559/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/560/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/562/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/563/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/564/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/565/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/566/70/70">
</div>
</div>
</div>
<div class="swiper-button-next" style="margin-right: -5px;"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 弹框错乱，多了这个 div 闭合标签 -->
<!-- </div> -->
</form>
</script>
<script>
function addDir(data) {
function addDir (data) {
var $ = layui.jquery
var dirImg = ''
//弹框
@ -276,7 +383,6 @@
title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
@ -288,24 +394,24 @@
$.get("http://localhost:8080/api/course/addCourseDirectory", params,
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
$(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
})
$(".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')
Array.from(siblingsEl).forEach(item=>{
$(item).removeClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
dirImg = $(this).attr('src')
})
@ -313,12 +419,58 @@
</script>
<script type="text/html" id="addForm">
<style>
/* 取消弹框拖拽 */
.layui-layer-resize {
display: none;
}
.select-img-wrap {
width: calc(100% - 90px);
margin: 10px auto 0;
}
<form class="layui-form" id="addDirectory">
.select-img-wrap .dir-img-icon {
position: relative;
padding: 5px !important;
}
.select-img-wrap .dir-img-icon .icon {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
}
.select-img-wrap .dir-img-icon.active {
background: #007aff;
}
.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;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
</style>
<form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
@ -328,120 +480,211 @@
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" 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">
<img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
</div>
<div name="dirImg" 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">
<img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
</div>
</div>
</div>
</form>
</script>
<style>
.icon-swiper-wrap {
position: relative;
}
.icon-swiper-wrap .swiper {
box-sizing: border-box;
width: calc(100% - 60px);
height: 162px;
margin: 20px 30px 20px 30px;
}
.icon-swiper-wrap .swiper-slide {
height: calc((100% - 10px) / 2);
text-align: center;
font-size: 12px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.icon-swiper-wrap .swiper-slide.active::before {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
}
.icon-swiper-wrap .swiper-slide.active::after {
content: "";
width: 16px;
height: 8px;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
.icon-swiper-wrap .swiper-slide img {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
border: 3px solid transparent;
}
.icon-swiper-wrap .swiper-slide.active img {
border: 3px solid #007aff;
}
.icon-swiper-wrap .swiper-pagination {
bottom: 0 !important;
}
.icon-swiper-wrap .swiper-button-prev {
margin-left: -10px !important;
}
.icon-swiper-wrap .swiper-button-next {
margin-right: -10px !important;
}
</style>
<script>
function addCourse(data) {
function addCourse (data) {
layui.use(['form'], function () {
var form = layui.form
var courseIcon = ''
//弹框
layer.open({
type: 1,
content: $("#addForm1").html(),
content: $("#addCourseTemplate").html(),
title: ['添加课程', 'font-size:18px;'],
area: ['600px', '600px'],
area: ['600px', '650px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
var formData = form.val('addCourseForm') // 表单取值
Object.assign(formData, { courseIcon: courseIcon })
//修改操作
$.get("http://localhost:8080/api/course/addCourse", $("#addCourse1").serialize(),
$.get("http://localhost:8080/api/course/addCourse", formData,
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
layui.use(['form'], function () {
var form = layui.form;
})
$.ajax({
url: 'http://localhost:8080/api/course/queryCourseDirectory',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
var opt = '<option value="" selected=""></option>';
var opt = '<option value="" selected=""></option>'
//获取返回的数据
var value = data.data;
var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
//循环遍历
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');//需要渲染一下
$("#directorId").html(opt)
// $.each($("#directorId").children(), function () {
// $(this).removeProp('selected')
// if ($(this).text() === data.dirName) {
// $(this).prop('selected', data.dirName)
// }
// })
form.render('select')//需要渲染一下
} else {
layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
layer.closeAll();
});
layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
layer.closeAll()
})
}
}
});
});
layui.use(['carousel', 'form'], function(){
var carousel = layui.carousel
,form = layui.form;
//常规轮播
carousel.render({
elem: '#test1'
,arrow: 'always'
});
});
}
</script>
<script type="text/html" id="addForm1">
})
<form class="layui-form" id="addCourse1">
var swiper = new Swiper(".icon-swiper", {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 12,
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
$(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
const parentEl = $(this).parent('.swiper-slide')
const siblingsEl = $(parentEl).siblings('.swiper-slide')
parentEl.addClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
courseIcon = $(this).attr('src')
})
})
}
</script>
<script type="text/html" id="addCourseTemplate">
<form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">课程名称</label>
<div class="layui-input-block">
@ -456,40 +699,140 @@
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="courseUrl" id="courseUrl" 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>
<select name="dirName" id="directorId"></select>
</div>
</div>
<div class="layui-carousel" id="test1">
<div carousel-item="">
<img class="image-item" src="./images/01.png" alt="Image 1">
<img class="image-item" src="./images/02.png" alt="Image 2">
<img class="image-item" src="./images/03.png" alt="Image 1">
<img class="image-item" src="./images/04.png" alt="Image 2">
<img class="image-item" src="./images/05.png" alt="Image 1">
<img class="image-item" src="./images/06.png" alt="Image 2">
<img class="image-item" src="./images/01.png" alt="Image 1">
<img class="image-item" src="./images/02.png" alt="Image 2">
<img class="image-item" src="./images/03.png" alt="Image 1">
<img class="image-item" src="./images/04.png" alt="Image 2">
<img class="image-item" src="./images/05.png" alt="Image 1">
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<div class="icon-swiper-wrap">
<div #swiperRef="" class="swiper icon-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/500/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/501/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/502/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/503/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/504/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/505/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/506/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/507/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/508/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/509/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/510/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/511/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/512/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/520/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/521/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/523/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/533/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/534/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/535/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/536/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/550/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/551/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/552/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/553/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/554/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/555/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/556/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/557/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/558/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/559/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/560/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/562/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/563/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/564/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/565/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/566/70/70">
</div>
</div>
</div>
<div class="swiper-button-next" style="margin-right: -5px;"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 弹框错乱，多了这个 div 闭合标签 -->
<!-- </div> -->
</form>
</script>
</body>

156
src/main/resources/templates/layui-v2.6.8/downloadList.html
Unescape Escape View File

@ -47,44 +47,6 @@
</style>
</head>
<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;
/*border: 3px solid #00FFFF;*/
border: 3px solid #FF5722;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(135deg);
}
</style>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
@ -252,6 +214,7 @@
});
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
@ -376,7 +339,55 @@
</script>
<script type="text/html" id="addForm">
<style>
/* 取消弹框拖拽 */
.layui-layer-resize {
display: none;
}
.select-img-wrap {
width: calc(100% - 90px);
margin: 10px auto 0;
}
.select-img-wrap .dir-img-icon {
position: relative;
padding: 5px !important;
}
.select-img-wrap .dir-img-icon .icon {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
}
.select-img-wrap .dir-img-icon.active {
background: #007aff;
}
.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;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
</style>
<form class="layui-form" id="addDirectory">
<!-- 把id 作为隐藏域传过去 -->
@ -433,6 +444,75 @@
</div>
</form>
</script>
<style>
.icon-swiper-wrap {
position: relative;
}
.icon-swiper-wrap .swiper {
box-sizing: border-box;
width: calc(100% - 60px);
height: 162px;
margin: 20px 30px 20px 30px;
}
.icon-swiper-wrap .swiper-slide {
height: calc((100% - 10px) / 2);
text-align: center;
font-size: 12px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.icon-swiper-wrap .swiper-slide.active::before {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
}
.icon-swiper-wrap .swiper-slide.active::after {
content: "";
width: 16px;
height: 8px;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
.icon-swiper-wrap .swiper-slide img {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
border: 3px solid transparent;
}
.icon-swiper-wrap .swiper-slide.active img {
border: 3px solid #007aff;
}
.icon-swiper-wrap .swiper-pagination {
bottom: 0 !important;
}
.icon-swiper-wrap .swiper-button-prev {
margin-left: -10px !important;
}
.icon-swiper-wrap .swiper-button-next {
margin-right: -10px !important;
}
</style>
<script>
function addDownload(data) {
//弹框

7
src/main/resources/templates/layui-v2.6.8/inviteList.html
Unescape Escape View File

@ -169,6 +169,13 @@
, "inviteUrl": data.inviteUrl
, "dirName": data.dirName
});
$.each($("#directorId").children(), function () {
$(this).removeProp('selected')
if ($(this).text() === data.dirName) {
$(this).prop('selected', data.dirName)
}
})
// layedit.setContent(editorIndex, data.inviteBrief, false)
form.render()
}

2
src/main/resources/templates/layui-v2.6.8/login.html
Unescape Escape View File

@ -60,7 +60,7 @@
})
}else {
layer.msg(result.msg)
// location.href="http://localhost:63342/zhiyun/src/main/resources/templates/layui-v2.6.8/login.html"
location.href="http://localhost:63342/zhiyun/src/main/resources/templates/layui-v2.6.8/login.html"
}
},

715
src/main/resources/templates/layui-v2.6.8/textualList.html
Unescape Escape View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>Layui</title>
@ -7,45 +8,11 @@
<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">
<!-- 注意：如果你直接复制所有代码到本地，上述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;
border: 3px solid #FF5722;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(135deg);
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
@ -53,7 +20,7 @@
<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="addText">添加考证</button>
<button class="layui-btn layui-btn-sm" lay-event="addCourse">添加考证</button>
</div>
</script>
<script type="text/html" id="barDemo">
@ -65,89 +32,89 @@
<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 src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
layui.use('table', function(){
var table = layui.table;
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/textual/queryTextual'
,toolbar: '#toolbarDemo'
, toolbar: '#toolbarDemo'
,title: '考证中心'
,totalRow: true
,parseData: function(res){
// var parse = JSON.parse(res.data.data);
console.log('data',res)
, totalRow: true
, parseData: function (res) {
// console.log('data', res)
return {
"code" : res.code, //解析接口状态
"count":res.count, //解析总页数
"msg" : res.msg, //解析提示文本
"data" : res.data.list //解析数据列表
};
"code": res.code, //解析接口状态
"count": res.count, //解析总页数
"msg": res.msg, //解析提示文本
"data": res.data.list //解析数据列表
}
,response:{
statusCode:200 //规定成功的状态码为200
}
,cols: [[
, response: {
statusName: 'code', //规定返回的状态码字段为code
statusCode: 200 //规定成功的状态码为200
}
, cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'编号', width:250, sort: true, }
,{field:'textualName', title:'考证名称', width:250}
,{field:'textualUrl', title:'超链接', width:250}
,{field:'dirName', title:'归属目录', width:250}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
,{field:'id', title:'编号', width:300, sort: true, }
,{field:'textualName', title:'考证名称', width:300}
,{field:'textualUrl', title:'超链接', width:300}
,{field:'dirName', title:'归属目录', width:300}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:300}
]]
,page: true
});
, page: true
})
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var data = obj.data;
var data = obj.data
//console.log(obj)
if (obj.event === 'addData') {
addDir(data);
} else if (obj.event === 'addText') {
addText(data);
addDir(data)
} else if (obj.event === 'addCourse') {
addCourse(data)
}
});
})
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
table.on('tool(test)', function (obj) {
var data = obj.data
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
//obj.del();//删除表结构
layer.close(index);
layer.close(index)
//获取要删除的服务的id
var deleteTextual = data.id;
var deleteCourseId = data.id
//发送Ajax到后台，进行删除操作
$.get("http://localhost:8080/textual/deleteTextual", { "id": deleteTextual},
function(result){
$.get("http://localhost:8080/textual/deleteTextual", { "id": deleteCourseId }, function (result) {
if (result.code == 200) {
// 删除成功之后 弹出msg
layer.msg(result.msg);
layer.msg(result.msg)
// 重点：继续显示当前页
$(".layui-laypage-btn").click();
$(".layui-laypage-btn").click()
} else {
layer.msg(result.msg, {icon: 2});
layer.close(index);
layer.msg(result.msg, { icon: 2 })
layer.close(index)
}
});
});
}else if (obj.event === 'edit') {
selectOne(data);
})
})
} else if (obj.event === 'edit') {
selectOne(data)
}
});
})
});
</script>
<script>
function selectOne(data) {
function selectOne (data) {
//弹框
layer.open({
type: 1,
@ -162,64 +129,88 @@
$("#textualUrl").val(data.textualUrl);
$("#dirName").val(data.dirName);
$("#textualImg").val(data.textualImg);
//渲染页面
layui.form.render();
layui.form.render()
},
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
$.post("http://localhost:8080/textual/updateTextual", $("#updateText").serialize(),
$.post("http://localhost:8080/textual/updateTextual", $("#updateCourse").serialize(),
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
})
layui.use(['form'], function () {
var form = layui.form;
var form = layui.form
$.ajax({
url: 'http://localhost:8080/textual/queryDir',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
var opt = '<option value="" selected="' + data.dirName + '"></option>';
var opt = '<option value="" selected="' + data.dirName + '"></option>'
//获取返回的数据
var value = data.data;
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');//需要渲染一下
$("#directorId").html(opt)
form.render('select')//需要渲染一下
} else {
layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
layer.closeAll();
});
layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
layer.closeAll()
})
}
}
});
});
})
})
var swiper = new Swiper(".icon-swiper", {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 12,
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
$(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
const parentEl = $(this).parent('.swiper-slide')
const siblingsEl = $(parentEl).siblings('.swiper-slide')
parentEl.addClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
textualImg = $(this).attr('src')
})
}
</script>
<script type="text/html" id="updateForm">
<form class="layui-form" id="updateText">
<form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
@ -247,17 +238,132 @@
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<div class="layui-input-block">
<input type="text" name="textualImg" id="textualImg" class="layui-input">
<div class="icon-swiper-wrap">
<div #swiperRef="" class="swiper icon-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/500/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/501/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/502/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/503/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/504/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/505/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/506/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/507/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/508/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/509/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/510/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/511/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/512/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/520/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/521/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/523/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/533/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/534/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/535/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/536/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/550/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/551/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/552/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/553/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/554/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/555/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/556/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/557/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/558/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/559/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/560/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/562/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/563/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/564/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/565/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/566/70/70">
</div>
</div>
</div>
<div class="swiper-button-next" style="margin-right: -5px;"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 弹框错乱，多了这个 div 闭合标签 -->
<!-- </div> -->
</form>
</script>
<script>
function addDir(data) {
function addDir (data) {
var $ = layui.jquery
var dirImg = ''
//弹框
@ -267,7 +373,6 @@
title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
@ -279,24 +384,24 @@
$.get("http://localhost:8080/textual/addDirectory", params,
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
$(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
})
$(".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')
Array.from(siblingsEl).forEach(item=>{
$(item).removeClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
dirImg = $(this).attr('src')
})
@ -304,12 +409,58 @@
</script>
<script type="text/html" id="addForm">
<style>
/* 取消弹框拖拽 */
.layui-layer-resize {
display: none;
}
.select-img-wrap {
width: calc(100% - 90px);
margin: 10px auto 0;
}
.select-img-wrap .dir-img-icon {
position: relative;
padding: 5px !important;
}
.select-img-wrap .dir-img-icon .icon {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
}
<form class="layui-form" id="addDirectory">
.select-img-wrap .dir-img-icon.active {
background: #007aff;
}
.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;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
</style>
<form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
@ -319,109 +470,211 @@
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" 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">
<img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
</div>
<div name="dirImg" 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">
<img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
</div>
</div>
</div>
</form>
</script>
<style>
.icon-swiper-wrap {
position: relative;
}
.icon-swiper-wrap .swiper {
box-sizing: border-box;
width: calc(100% - 60px);
height: 162px;
margin: 20px 30px 20px 30px;
}
.icon-swiper-wrap .swiper-slide {
height: calc((100% - 10px) / 2);
text-align: center;
font-size: 12px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.icon-swiper-wrap .swiper-slide.active::before {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
}
.icon-swiper-wrap .swiper-slide.active::after {
content: "";
width: 16px;
height: 8px;
border: 3px solid #007aff;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 15px;
transform: rotate(135deg);
}
.icon-swiper-wrap .swiper-slide img {
width: 70px;
height: 70px;
cursor: pointer;
object-fit: cover;
vertical-align: bottom;
background: #e7e7e7;
border: 3px solid transparent;
}
.icon-swiper-wrap .swiper-slide.active img {
border: 3px solid #007aff;
}
.icon-swiper-wrap .swiper-pagination {
bottom: 0 !important;
}
.icon-swiper-wrap .swiper-button-prev {
margin-left: -10px !important;
}
.icon-swiper-wrap .swiper-button-next {
margin-right: -10px !important;
}
</style>
<script>
function addText(data) {
function addCourse (data) {
layui.use(['form'], function () {
var form = layui.form
var textualImg = ''
//弹框
layer.open({
type: 1,
content: $("#addForm1").html(),
content: $("#addCourseTemplate").html(),
title: ['添加课程', 'font-size:18px;'],
area: ['600px', '600px'],
area: ['600px', '650px'],
btn: ['提交', '取消']
, yes: function (index, layero) {
var formData = form.val('addCourseForm') // 表单取值
Object.assign(formData, { textualImg: textualImg })
//修改操作
$.post("http://localhost:8080/textual/addTextual", $("#addText").serialize(),
$.post("http://localhost:8080/textual/addTextual", formData,
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg);
$(".layui-laypage-btn").click();
parent.layer.close(index);
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg);
layer.msg(data.msg)
}
});
})
}
, btn2: function (index, layero) {
// alert("取消")
}
});
layui.use(['form'], function () {
var form = layui.form;
})
$.ajax({
url: 'http://localhost:8080/textual/queryDir',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
var opt = '<option value="" selected=""></option>';
var opt = '<option value="" selected=""></option>'
//获取返回的数据
var value = data.data;
var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
//循环遍历
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');//需要渲染一下
$("#directorId").html(opt)
// $.each($("#directorId").children(), function () {
// $(this).removeProp('selected')
// if ($(this).text() === data.dirName) {
// $(this).prop('selected', data.dirName)
// }
// })
form.render('select')//需要渲染一下
} else {
layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
layer.closeAll();
});
}
layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
layer.closeAll()
})
}
});
});
}
</script>
<script type="text/html" id="addForm1">
})
<form class="layui-form" id="addText">
var swiper = new Swiper(".icon-swiper", {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 12,
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
$(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
const parentEl = $(this).parent('.swiper-slide')
const siblingsEl = $(parentEl).siblings('.swiper-slide')
parentEl.addClass('active')
$.each(siblingsEl, function () {
$(this).removeClass('active')
})
textualImg = $(this).attr('src')
})
})
}
</script>
<script type="text/html" id="addCourseTemplate">
<form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">考证名称</label>
<div class="layui-input-block">
@ -445,12 +698,128 @@
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
<div class="layui-input-block">
<input type="text" name="textualImg" id="textualImg" class="layui-input">
<div class="icon-swiper-wrap">
<div #swiperRef="" class="swiper icon-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/500/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/501/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/502/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/503/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/504/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/505/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/506/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/507/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/508/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/509/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/510/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/511/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/512/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/520/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/521/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/523/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/533/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/534/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/535/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/536/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/550/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/551/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/552/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/553/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/554/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/555/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/556/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/557/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/558/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/559/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/560/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/562/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/563/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/564/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/565/70/70">
</div>
<div class="swiper-slide">
<img class="image-item" src="https://picsum.photos/id/566/70/70">
</div>
</div>
</div>
<div class="swiper-button-next" style="margin-right: -5px;"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 弹框错乱，多了这个 div 闭合标签 -->
<!-- </div> -->
</form>
</script>
</body>

Write Preview
Loading…
Cancel
Save