|
|
<!DOCTYPE html>
|
|
|
<html xmlns="http://www.w3.org/1999/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">
|
|
|
<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>
|
|
|
<style>
|
|
|
textarea {
|
|
|
resize: none!important;
|
|
|
}
|
|
|
</style>
|
|
|
<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="addCourse">添加应用</button>
|
|
|
</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 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: '课程中心'
|
|
|
, parseData: function (res) {
|
|
|
console.log('data', res)
|
|
|
return {
|
|
|
"code": res.code, //解析接口状态
|
|
|
"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:'appName', title:'应用名称', width:300}
|
|
|
,{field:'appBrief', title:'应用简介', width:300}
|
|
|
,{field:'appUrl', 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
|
|
|
//console.log(obj)
|
|
|
if (obj.event === 'addData') {
|
|
|
addDir(data)
|
|
|
} else if (obj.event === 'addCourse') {
|
|
|
addCourse(data)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
//监听行工具事件
|
|
|
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 deleteCourseId = data.id
|
|
|
|
|
|
$.get("http://localhost:8080/application/deleteApplication", { "id": deleteCourseId }, 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)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
} else if (obj.event === 'edit') {
|
|
|
selectOne(data)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
function selectOne (data) {
|
|
|
layui.use(['form'], function () {
|
|
|
var form = layui.form
|
|
|
var appIcon = ''
|
|
|
//弹框
|
|
|
layer.open({
|
|
|
type: 1,
|
|
|
content: $("#updateForm").html(),
|
|
|
title: ['修改页面', 'font-size:18px;'],
|
|
|
area: ['600px', '600px'],
|
|
|
|
|
|
//弹出后回调
|
|
|
success: function () {
|
|
|
$("#id").val(data.id);
|
|
|
$("#appName").val(data.appName);
|
|
|
$("#appBrief").val(data.appBrief);
|
|
|
$("#appUrl").val(data.appUrl);
|
|
|
$("#dirName").val(data.dirName);
|
|
|
$("#appIcon").val(data.appIcon)
|
|
|
|
|
|
//渲染页面
|
|
|
layui.form.render()
|
|
|
},
|
|
|
btn: ['提交', '取消']
|
|
|
, yes: function (index, layero) {
|
|
|
var formData = form.val('updateCourse') // 表单取值
|
|
|
Object.assign(formData, { appIcon: appIcon })
|
|
|
//修改操作
|
|
|
$.post("http://localhost:8080/application/updateApplication", formData,
|
|
|
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("取消")
|
|
|
}
|
|
|
})
|
|
|
$.ajax({
|
|
|
url: 'http://localhost:8080/application/queryDir',
|
|
|
type: "get",
|
|
|
success: function (res) {
|
|
|
if (res.msg === "success") {
|
|
|
//给一个默认值（‘请选择’）
|
|
|
var opt = ''
|
|
|
//获取返回的数据
|
|
|
var value = res.data
|
|
|
//循环遍历
|
|
|
for (var i in value) {
|
|
|
opt += `<option value="${value[i].dirName}" ${data.dirName===value[i].dirName?`selected="${data.dirName}`:''}">${value[i].dirName}</option>`
|
|
|
}
|
|
|
$("#directorId").html(opt)
|
|
|
form.render('select')//需要渲染一下
|
|
|
} else {
|
|
|
layer.alert(res.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",
|
|
|
},
|
|
|
})
|
|
|
|
|
|
$.each($(".icon-swiper .swiper-slide>img"), function (){
|
|
|
var src = $(this).attr('src')
|
|
|
if(data.appIcon === src) {
|
|
|
const parentEl = $(this).parent('.swiper-slide')
|
|
|
parentEl.addClass('active')
|
|
|
}
|
|
|
})
|
|
|
|
|
|
$(".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 layui-form-pane" id="updateCourse" lay-filter="updateCourse" 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">
|
|
|
<input type="text" name="appName" id="appName" 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="inviteBrief" id="inviteBrief" required lay-verify="article_desc" autocomplete="off"-->
|
|
|
<!-- class="layui-input">-->
|
|
|
<textarea name="appBrief" id="appBrief" lay-verify="content" placeholder="请输入内容" class="layui-textarea"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">添加链接</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input type="text" name="appUrl" id="appUrl" 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" 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://zhiyun03.oss-cn-beijing.aliyuncs.com/images/31.png">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<img class="image-item" src="https://zhiyun03.oss-cn-beijing.aliyuncs.com/images/32.png">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<img class="image-item" src="https://zhiyun03.oss-cn-beijing.aliyuncs.com/images/33.png">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<img class="image-item" src="https://zhiyun03.oss-cn-beijing.aliyuncs.com/images/34.png">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<img class="image-item" src="https://zhiyun03.oss-cn-beijing.aliyuncs.com/images/35.png">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<img class="image-item" src="https://zhiyun03.oss-cn-beijing.aliyuncs.com/images/36.png">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<img class="image-item" src="https://zhiyun03.oss-cn-beijing.aliyuncs.com/images/37.png">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<img class="image-item" src="https://zhiyun03.oss-cn-beijing.aliyuncs.com/images/38.png">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<img class="image-item" src="https://zhiyun03.oss-cn-beijing.aliyuncs.com/images/39.png">
|
|
|
</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) {
|
|
|
var $ = layui.jquery
|
|
|
var dirIcon = ''
|
|
|
//弹框
|
|
|
layer.open({
|
|
|
type: 1,
|
|
|
content: $("#addForm").html(),
|
|
|
title: ['添加目录', 'font-size:18px;'],
|
|
|
area: ['600px', '600px'],
|
|
|
btn: ['提交', '取消']
|
|
|
, yes: function (index, layero) {
|
|
|
// 获取所有图标元素
|
|
|
var dirName = $('#dirName').val()
|
|
|
var params = {
|
|
|
dirName: dirName,
|
|
|
dirIcon: dirIcon,
|
|
|
}
|
|
|
//修改操作
|
|
|
$.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)
|
|
|
} 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">
|
|
|
<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 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">
|
|
|
<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>
|
|
|
<div class="layui-row layui-col-space20 select-img-wrap">
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
<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) {
|
|
|
layui.use(['form'], function () {
|
|
|
var form = layui.form
|
|
|
var appIcon = ''
|
|
|
//弹框
|
|
|
layer.open({
|
|
|
type: 1,
|
|
|
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", formData,
|
|
|
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("取消")
|
|
|
}
|
|
|
})
|
|
|
$.ajax({
|
|
|
url: 'http://localhost:8080/application/queryDir',
|
|
|
type: "get",
|
|
|
success: function (data) {
|
|
|
if (data.msg === "success") {
|
|
|
//给一个默认值（‘请选择’）
|
|
|
var opt = '<option value="" selected=""></option>'
|
|
|
//获取返回的数据
|
|
|
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)
|
|
|
|
|
|
// $.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()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
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="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">
|
|
|
<input type="text" name="appName" id="appName" 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="appBrief" id="appBrief" 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="appUrl" id="appUrl" 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" 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>
|
|
|
</html>
|