添加目录的完成

main
whb 2 years ago
parent 71755c09a0
commit 10da020885

@ -7,13 +7,44 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
<!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 --> <style>
<!-- <style>--> .select-img-wrap {
<!-- .layui-container {--> width: calc(100% - 40px);
<!-- display: flex;--> margin: 0 20px;
<!-- }--> }
<!-- </style>--> .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>
</head> </head>
@ -236,6 +267,8 @@
</script> </script>
<script> <script>
function addDir(data) { function addDir(data) {
var $ = layui.jquery
var dirImg = ''
//弹框 //弹框
layer.open({ layer.open({
type: 1, type: 1,
@ -246,8 +279,13 @@
, yes: function (index, layero) { , yes: function (index, layero) {
// 获取所有图标元素 // 获取所有图标元素
var dirName = $('#dirName').val()
var params = {
dirName: dirName,
dirImg: dirImg,
}
//修改操作 //修改操作
$.get("http://localhost:8080/api/course/addCourseDirectory", $("#addDirectory").serialize(), $.get("http://localhost:8080/api/course/addCourseDirectory", params,
function (data) { function (data) {
if ("success" == data.msg) { if ("success" == data.msg) {
layer.msg(data.msg); layer.msg(data.msg);
@ -261,17 +299,16 @@
, btn2: function (index, layero) { , btn2: function (index, layero) {
// alert("取消") // alert("取消")
} }
}); });
var icons = document.getElementsByClassName("icon"); $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
// 为每个图标添加点击事件监听器 const parentEl = $(this).parent('.dir-img-icon')
Array.from(icons).forEach(function(icon) { const siblingsEl = $(parentEl).siblings('.dir-img-icon')
icon.addEventListener("click", function () { parentEl.addClass('active')
// 获取被点击图标的图片地址 Array.from(siblingsEl).forEach(item=>{
var imageUrl = icon.src; $(item).removeClass('active')
$("#dirImg").val(icon.src);
console.log(imageUrl)
})
}) })
dirImg = $(this).attr('src')
})
} }
</script> </script>
@ -289,21 +326,45 @@
class="layui-input"> class="layui-input">
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item" style="display: flex;flex-direction: column">
<input type="hide" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input> <label class="layui-form-label">选择icon</label>
<div class="layui-container" id="test10"> <!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row"> <div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" class="layui-col-md4" lay-event="addData"> <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon1" class="icon" src="./images/01.png" alt="图片1"> <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
<img id="icon2" class="icon" src="./images/01.png" alt="图片1"> </div>
<img id="icon3" class="icon" src="./images/01.png" alt="图片1"> <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon4" class="icon" src="./images/01.png" alt="图片1"> <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
<img id="icon5" class="icon" src="./images/01.png" alt="图片1"> </div>
<img id="icon6" class="icon" src="./images/01.png" alt="图片1"> <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<img id="icon7" class="icon" src="./images/01.png" alt="图片1"> <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<img id="icon8" class="icon" src="./images/01.png" alt="图片1"> </div>
<img id="icon9" class="icon" src="./images/01.png" alt="图片1"> <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
</div> <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</div> </div>
</div> </div>
</div> </div>

@ -9,6 +9,45 @@
<link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all"> <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
<!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 --> <!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 -->
</head> </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> <body>
<table class="layui-hide" id="test" lay-filter="test"></table> <table class="layui-hide" id="test" lay-filter="test"></table>
@ -254,6 +293,8 @@
<script> <script>
function addDir(data) { function addDir(data) {
var $ = layui.jquery
var dirImg = ''
//弹框 //弹框
layer.open({ layer.open({
type: 1, type: 1,
@ -261,9 +302,16 @@
title: ['添加页面', 'font-size:18px;'], title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'], area: ['600px', '600px'],
btn: ['提交', '取消'] btn: ['提交', '取消']
, yes: function (index, layero) { , yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
var params = {
dirName: dirName,
dirImg: dirImg,
}
//修改操作 //修改操作
$.get("http://localhost:8080/download/addDownloadDirectory", $("#addDirectory").serialize(), $.get("http://localhost:8080/download/addDownloadDirectory", params,
function (data) { function (data) {
if ("success" == data.msg) { if ("success" == data.msg) {
layer.msg(data.msg); layer.msg(data.msg);
@ -278,6 +326,15 @@
// alert("取消") // 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')
Array.from(siblingsEl).forEach(item=>{
$(item).removeClass('active')
})
dirImg = $(this).attr('src')
})
} }
</script> </script>
@ -295,22 +352,48 @@
class="layui-input"> class="layui-input">
</div> </div>
</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> <label class="layui-form-label">选择icon</label>
<div class="layui-input-block"> <!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<input type="text" name="dirImg" id="dirImg" required lay-verify="required" autocomplete="off" <div class="layui-row layui-col-space20 select-img-wrap">
class="layui-input"> <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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</div>
</div> </div>
</div> </div>
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">选择icon</label>-->
<!-- <div name="dirImg" class="layui-container" id="test10">-->
<!-- <div><img src="./images/01.png"></div>-->
<!-- <div><img src="./images/01.png"></div>-->
<!-- <div><img src="./images/01.png"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</form> </form>
</script> </script>
<script> <script>

@ -9,432 +9,528 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
<!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 --> <!-- 注意如果你直接复制所有代码到本地上述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 #00FFFF;*/
border: 3px solid #FF5722;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(135deg);
}
</style>
</head> </head>
<body> <body>
<table class="layui-hide" id="test" lay-filter="test"></table> <table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo"> <script type="text/html" id="toolbarDemo">
<div class="layui-btn-container"> <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="addData">添加目录</button>
<button class="layui-btn layui-btn-sm" lay-event="addInvite">添加招聘</button> <button class="layui-btn layui-btn-sm" lay-event="addInvite">添加招聘</button>
</div> </div>
</script> </script>
<script type="text/html" id="barDemo"> <script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <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> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script> </script>
<script src="layui/layui.js" charset="utf-8"></script> <script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 --> <!-- 注意:如果你直接复制所有代码到本地,上述 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/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"> <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script> <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script> <script>
layui.use('table', function () { layui.use('table', function () {
var table = layui.table var table = layui.table
table.render({ //温馨提示:默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据。
elem: '#test' //详见http://www.ilayuis.com/doc/modules/table.html#totalRow
, url: 'http://localhost:8080/api/invite/queryInvite' table.render({
, toolbar: '#toolbarDemo' elem: '#test'
, title: '就业中心' , url: 'http://localhost:8080/api/invite/queryInvite'
, totalRow: true , toolbar: '#toolbarDemo'
, parseData: function (res) { , title: '就业中心'
console.log('data', res) , totalRow: true
return { , parseData: function (res) {
"code": res.code, //解析接口状态 console.log('data', res)
"count": res.count, //解析总页数 return {
"msg": res.msg, //解析提示文本 "code": res.code, //解析接口状态
"data": res.data.list //解析数据列表 "count": res.count, //解析总页数
} "msg": res.msg, //解析提示文本
} "data": res.data.list //解析数据列表
, response: {
statusName: 'code', //规定返回的状态码字段为code
statusCode: 200 //规定成功的状态码为200
} }
, cols: [[ }
{ type: 'checkbox', fixed: 'left' } , response: {
, { field: 'id', title: '序号', width: 300, sort: true, } statusName: 'code', //规定返回的状态码字段为code
, { field: 'inviteName', title: '招聘名称', width: 300 } statusCode: 200 //规定成功的状态码为200
, { field: 'inviteBrief', title: '招聘简介', width: 300 } }
, { field: 'inviteUrl', title: '超链接', width: 300 } , cols: [[
, { field: 'dirName', title: '归属目录', width: 300 } { type: 'checkbox', fixed: 'left' }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 } , { field: 'id', title: '序号', width: 300, sort: true, }
]] , { field: 'inviteName', title: '招聘名称', width: 300 }
, page: true , { field: 'inviteBrief', title: '招聘简介', width: 300 }
}) , { field: 'inviteUrl', title: '超链接', width: 300 }
, { field: 'dirName', title: '归属目录', width: 300 }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
, page: true
})
//工具栏事件 //工具栏事件
table.on('toolbar(test)', function (obj) { table.on('toolbar(test)', function (obj) {
var data = obj.data var data = obj.data
//console.log(obj) //console.log(obj)
if (obj.event === 'addData') { if (obj.event === 'addData') {
addDir(data) addDir(data)
} else if (obj.event === 'addInvite') { } else if (obj.event === 'addInvite') {
addInvite(data) addInvite(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 deleteDownloadId = data.id
$.get("http://localhost:8080/api/invite/delInviteById", { "id": deleteDownloadId }, 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)
}
})
//监听行工具事件
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 deleteDownloadId = data.id
$.get("http://localhost:8080/api/invite/delInviteById", { "id": deleteDownloadId }, 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) })
} } else if (obj.event === 'edit') {
}) selectOne(data)
}); }
</script> })
<script> });
function selectOne(data) { </script>
<script>
function selectOne (data) {
layui.use(['form', 'layedit'], function () {
var form = layui.form
, layedit = layui.layedit
, $ = layui.jquery
, editorIndex
//弹框 //弹框
layer.open({ layer.open({
type: 1, type: 1,
content: $("#updateForm").html(), content: $("#updateForm").html(),
title: ['修改页面', 'font-size:18px;'], title: ['修改页面', 'font-size:18px;'],
area: ['600px', '600px'], area: ['600px', '600px'],
//弹出后回调
success: function () {
$("#id").val(data.id);
$("#inviteName").val(data.inviteName);
$("#inviteBrief").val(data.inviteBrief);
$("#inviteUrl").val(data.inviteUrl);
$("#dirName").val(data.dirName);
//渲染页面
layui.form.render();
},
btn: ['提交', '取消'] btn: ['提交', '取消']
, success: function (layero, index) {
// 添加form标识
layero.addClass('layui-form')
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'update-form1',
'lay-submit': ''
})
form.val('updateServeForm', {
"id": data.id
, "inviteName": data.inviteName
, "inviteBrief": data.inviteBrief
, "inviteUrl": data.inviteUrl
, "dirName": data.dirName
});
// layedit.setContent(editorIndex, data.inviteBrief, false)
form.render()
}
, yes: function (index, layero) { , yes: function (index, layero) {
var formData = form.val('updateServeForm') // 表单取值
var inviteBrief = layedit.getContent(editorIndex) // 富文本取值
Object.assign(formData, { inviteBrief: inviteBrief }) // 合并数据
var params = $.param(formData) // 是否需要序列化,不需要直接用 formData
console.log(params, inviteBrief)
// $("#updateServe").serialize()
//修改操作 //修改操作
$.post("http://localhost:8080/api/invite/updateById", $("#updateServe").serialize(), form.on('submit(update-form1)', function (data) {
function (data) { $.post("http://localhost:8080/api/invite/updateById", params,
if ("success" == data.msg) { function (data) {
layer.msg(data.msg); if ("success" == data.msg) {
$(".layui-laypage-btn").click(); layer.msg(data.msg)
parent.layer.close(index); $(".layui-laypage-btn").click()
} else { parent.layer.close(index)
layer.msg(data.msg); } else {
layer.msg(data.msg)
}
} }
}); )
return false
})
} }
, btn2: function (index, layero) { , btn2: function (index, layero) {
// alert("取消") // alert("取消")
} },
}); })
layui.use(['form'], function () { $.ajax({
var form = layui.form; url: 'http://localhost:8080/api/invite/queryInviteDirectory',
$.ajax({ type: "get",
url: 'http://localhost:8080/api/invite/queryInviteDirectory', success: function (data) {
type: "get", if (data.msg === "success") {
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>'
for (var i in value) { console.log(value[i].dirName)
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)
form.render('select')//需要渲染一下
} else {
layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
layer.closeAll()
})
} }
}); }
})
layui.use(['form', 'layedit'], function () { /**
var layedit = layui.layedit; * 自定义富文本编辑器工具栏
/** */
* 自定义富文本编辑器工具栏 var layeditTool = {
*/ tool: [
var layeditTool = { 'strong' //加粗
tool: [ , 'italic' //斜体F
'strong' //加粗 , 'underline' //下划线
, 'italic' //斜体 , 'del' //删除线
, 'underline' //下划线 , '|' //分割线
, 'del' //删除线 , 'left' //左对齐
, '|' //分割线 , 'center' //居中对齐
, 'left' //左对齐 , 'right' //右对齐
, 'center' //居中对齐 , '|' //分割线
, 'right' //右对齐 , 'link' //超链接
, '|' //分割线 , 'unlink' //清除链接
, 'link' //超链接 ]
, 'unlink' //清除链接 }
] editorIndex = layedit.build('inviteBrief', layeditTool)
}; form.verify({
var editIndex = layedit.build('inviteBrief',layeditTool); inviteName: function (value) {
if (value.length < 5) {
return '招聘名称至少得5个字符啊'
}
},
inviteBrief: function () {
var value = layedit.getContent(editorIndex)
if (value.length < 5) {
layedit.sync(editorIndex)
return '招聘简介至少得5个字符啊'
}
}
})
})
}
</script>
<script type="text/html" id="updateForm" >
<form class="layui-form" id="updateServe" lay-filter="updateServeForm">
<!-- 把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="inviteName" id="inviteName" 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">
<textarea name="inviteBrief" id="inviteBrief" required lay-verify="inviteBrief" placeholder="请输入招聘简介" class="layui-textarea" style="display: none"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">招聘链接</label>
<div class="layui-input-block">
<input type="text" name="inviteUrl" id="inviteUrl" 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>
</form>
</script>
<script>
function addDir(data) {
var $ = layui.jquery
var dirImg = ''
//弹框
layer.open({
type: 1,
content: $("#addForm").html(),
title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
console.log(content,"231231") , yes: function (index, layero) {
form.verify({ // 获取所有图标元素
inviteBrief: function(value){ var dirName = $('#dirName').val()
layedit.sync(editIndex); var params = {
dirName: dirName,
dirImg: dirImg,
}
//修改操作
$.get("http://localhost:8080/api/invite/addInviteDirectory", 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')
Array.from(siblingsEl).forEach(item=>{
$(item).removeClass('active')
})
dirImg = $(this).attr('src')
})
}
}); </script>
<script type="text/html" id="addForm">
}); <form class="layui-form" id="addDirectory">
}
</script>
<script type="text/html" id="updateForm" lay-filter="updateForm">
<form class="layui-form" id="updateServe">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item"> <!-- 把id 作为隐藏域传过去 -->
<label class="layui-form-label">招聘名称</label> <input type="hidden" name="id" id="id">
<div class="layui-input-block">
<input type="text" name="inviteName" id="inviteName" required lay-verify="required" autocomplete="off" <div class="layui-form-item">
class="layui-input"> <label class="layui-form-label">目录名称</label>
</div> <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"> </div>
<label class="layui-form-label">招聘简介</label> <div class="layui-form-item" style="display: flex;flex-direction: column">
<div class="layui-input-block"> <label class="layui-form-label">选择icon</label>
<textarea name="inviteBrief" id="inviteBrief" required lay-verify="inviteBrief" placeholder="请输入招聘简介" class="layui-textarea" style="display: none"></textarea> <!-- <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">
</div> </div>
</div> <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<div class="layui-form-item"> <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
<label class="layui-form-label">招聘链接</label>
<div class="layui-input-block">
<input type="text" name="inviteUrl" id="inviteUrl" class="layui-input">
</div> </div>
</div> <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<div class="layui-form-item"> <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<label class="layui-form-label">归属目录</label> </div>
<div class="layui-input-block"> <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
<select name="dirName" id="directorId" > <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
<option value="">直接选择或搜索选择</option> </div>
</select> <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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</div> </div>
</div> </div>
</form> </div>
</script> </form>
</script>
<script> <script>
function addDir (data) { function addInvite (data) {
layui.use(['form', 'layedit'], function () {
var form = layui.form
, layedit = layui.layedit
, $ = layui.jquery
, editorIndex
//弹框 //弹框
layer.open({ layer.open({
type: 1, type: 1,
content: $("#addForm").html(), content: $("#addForm1").html(),
title: ['添加页面', 'font-size:18px;'], title: ['添加下载', 'font-size:18px;'],
area: ['600px', '600px'], area: ['600px', '600px'],
btn: ['提交', '取消'] btn: ['提交', '取消']
, success: function (layero, index) {
// 添加form标识
layero.addClass('layui-form')
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'add-form1',
'lay-submit': ''
})
form.render()
}
, yes: function (index, layero) { , yes: function (index, layero) {
var formData = form.val('addInviteForm') // 表单取值
var inviteBrief = layedit.getContent(editorIndex) // 富文本取值
Object.assign(formData, { inviteBrief: inviteBrief }) // 合并数据
var params = $.param(formData) // 是否需要序列化,不需要直接用 formData
console.log(params, inviteBrief)
// 参考地址http://layui.apixx.net/demo/form.html
// $("#addInvite").serialize() 方式获取不到 form 表单 textarea name 为 inviteBrief
// 的值,需要单独用 layedit 提供的方式获取textarea 对应的 id 建议唯一区分下
//修改操作 //修改操作
$.get("http://localhost:8080/api/invite/addInviteDirectory", $("#addDirectory").serialize(),
function (data) { form.on('submit(add-form1)', function (data) {
if ("success" == data.msg) { $.post("http://localhost:8080/api/invite/addInvite", params,
layer.msg(data.msg) function (data) {
$(".layui-laypage-btn").click() if ("success" == data.msg) {
parent.layer.close(index) layer.msg(data.msg)
} else { $(".layui-laypage-btn").click()
layer.msg(data.msg) parent.layer.close(index)
} else {
layer.msg(data.msg)
}
} }
}) )
return false
})
} }
, btn2: function (index, layero) { , btn2: function (index, layero) {
// alert("取消") // alert("取消")
} }
}) })
} // 创建富文本编辑器
editorIndex = layedit.build('addInviteBrief')
</script>
<script type="text/html" id="addForm">
<form class="layui-form" id="addDirectory">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
<input type="text" name="dirName" id="dirName" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择icon</label>
<div class="layui-input-block">
<input type="text" name="dirImg" id="dirImg" required lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
</form>
</script>
<script>
function addInvite (data) {
layui.use(['form', 'layedit'], function () {
var form = layui.form
, layedit = layui.layedit
, $ = layui.jquery
, editorIndex
//弹框
layer.open({
type: 1,
content: $("#addForm1").html(),
title: ['添加服务', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
, success: function (layero, index) {
// 添加form标识
layero.addClass('layui-form')
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'add-form1',
'lay-submit': ''
})
form.render()
}
, yes: function (index, layero) {
var formData = form.val('addInviteForm') // 表单取值
var inviteBrief = layedit.getContent(editorIndex) // 富文本取值
Object.assign(formData, { inviteBrief: inviteBrief }) // 合并数据
var params = $.param(formData) // 是否需要序列化,不需要直接用 formData
console.log(params, inviteBrief) $.ajax({
// 参考地址http://layui.apixx.net/demo/form.html url: 'http://localhost:8080/api/invite/queryInviteDirectory',
// $("#addInvite").serialize() 方式获取不到 form 表单 textarea name 为 inviteBrief type: "get",
// 的值,需要单独用 layedit 提供的方式获取textarea 对应的 id 建议唯一区分下 success: function (data) {
//修改操作 if (data.msg === "success") {
//给一个默认值(‘请选择’)
var opt = '<option value="" selected=""></option>'
//获取返回的数据
var value = data.data
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
$("#directorId").html(opt)
form.render('select')//需要渲染一下
form.on('submit(add-form1)', function (data) { } else {
$.post("http://localhost:8080/api/invite/addInvite", params, layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) { layer.closeAll() })
function (data) {
if ("success" == data.msg) {
layer.msg(data.msg)
$(".layui-laypage-btn").click()
parent.layer.close(index)
} else {
layer.msg(data.msg)
}
}
)
return false
})
}
, btn2: function (index, layero) {
// alert("取消")
} }
})
var layeditTool = {
tool: [
'strong' //加粗
, 'italic' //斜体F
, 'underline' //下划线
, 'del' //删除线
, '|' //分割线
, 'left' //左对齐
, 'center' //居中对齐
, 'right' //右对齐
, '|' //分割线
, 'link' //超链接
, 'unlink' //清除链接
]
} }
// 创建富文本编辑器 })
editorIndex = layedit.build('inviteBrief',layeditTool) form.verify({
inviteName: function (value) {
$.ajax({ if (value.length < 5) {
url: 'http://localhost:8080/api/invite/queryInviteDirectory', return '招聘名称至少得5个字符啊'
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值(‘请选择’)
var opt = '<option value="" selected=""></option>'
//获取返回的数据
var value = data.data
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
$("#directorId").html(opt)
form.render('select')//需要渲染一下
} else {
layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) { layer.closeAll() })
}
} }
}) },
form.verify({ inviteBrief: function () {
inviteName: function (value) { var value = layedit.getContent(editorIndex)
if (value.length < 5) { if (value.length < 5) {
return '招聘名称至少得5个字符啊' layedit.sync(editorIndex)
} return '招聘简介至少得5个字符啊'
},
inviteBrief: function () {
var value = layedit.getContent(editorIndex)
if (value.length < 5) {
layedit.sync(editorIndex)
return '招聘简介至少得5个字符啊'
}
} }
}) }
}) })
} })
</script> }
</script>
<script type="text/html" id="addForm1"> <script type="text/html" id="addForm1">
<form class="layui-form" id="addInvite" lay-filter="addInviteForm"> <form class="layui-form" id="addInvite" lay-filter="addInviteForm">
<!-- 把id 作为隐藏域传过去 --> <!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id"> <input type="hidden" name="id" id="id">
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">招聘名称</label> <label class="layui-form-label">招聘名称</label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" name="inviteName" id="inviteName" required lay-verify="inviteName" autocomplete="off" <input type="text" name="inviteName" id="inviteName" required lay-verify="inviteName" autocomplete="off"
class="layui-input"> class="layui-input">
</div>
</div> </div>
<div class="layui-form-item"> </div>
<label class="layui-form-label">招聘简介</label> <div class="layui-form-item">
<div class="layui-input-block"> <label class="layui-form-label">招聘简介</label>
<textarea type="text" name="inviteBrief" id="inviteBrief" placeholder="请输入招聘简介" required lay-verify="inviteBrief" class="layui-textarea" style="display: none"></textarea> <div class="layui-input-block">
</div> <textarea type="text" name="inviteBrief" id="addInviteBrief" placeholder="请输入招聘简介" required lay-verify="inviteBrief" class="layui-textarea" style="display: none"></textarea>
</div> </div>
<div class="layui-form-item"> </div>
<label class="layui-form-label">招聘链接</label> <div class="layui-form-item">
<div class="layui-input-block"> <label class="layui-form-label">招聘链接</label>
<input type="text" name="inviteUrl" id="inviteUrl" class="layui-input"> <div class="layui-input-block">
</div> <input type="text" name="inviteUrl" id="inviteUrl" class="layui-input">
</div> </div>
<div class="layui-form-item"> </div>
<label class="layui-form-label">归属目录</label> <div class="layui-form-item">
<div class="layui-input-block"> <label class="layui-form-label">归属目录</label>
<select name="dirName" id="directorId" > <div class="layui-input-block">
<option value="">直接选择或搜索选择</option> <select name="dirName" id="directorId" >
</select> <option value="">直接选择或搜索选择</option>
</div> </select>
</div> </div>
</form> </div>
</script> </form>
</script>
</body> </body>
</html>
</html>

@ -8,6 +8,81 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=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="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
<!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 --> <!-- 注意如果你直接复制所有代码到本地上述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 #00FFFF;*/
border: 3px solid #FF5722;
border-bottom: 0;
border-left: 0;
position: absolute;
right: 10px;
bottom: 10px;
transform: rotate(135deg);
}
</style> <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>
</head> </head>
<body> <body>
@ -256,6 +331,8 @@
<script> <script>
function addDir(data) { function addDir(data) {
var $ = layui.jquery
var dirImg = ''
//弹框 //弹框
layer.open({ layer.open({
type: 1, type: 1,
@ -263,9 +340,16 @@
title: ['添加页面', 'font-size:18px;'], title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'], area: ['600px', '600px'],
btn: ['提交', '取消'] btn: ['提交', '取消']
, yes: function (index, layero) { , yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
var params = {
dirName: dirName,
dirImg: dirImg,
}
//修改操作 //修改操作
$.get("http://localhost:8080/api/serve/addServiceDirectory", $("#addDirectory").serialize(), $.get("http://localhost:8080/api/serve/addServiceDirectory", params,
function (data) { function (data) {
if ("success" == data.msg) { if ("success" == data.msg) {
layer.msg(data.msg); layer.msg(data.msg);
@ -280,6 +364,15 @@
// alert("取消") // 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')
Array.from(siblingsEl).forEach(item=>{
$(item).removeClass('active')
})
dirImg = $(this).attr('src')
})
} }
</script> </script>
@ -297,22 +390,48 @@
class="layui-input"> class="layui-input">
</div> </div>
</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> <label class="layui-form-label">选择icon</label>
<div class="layui-input-block"> <!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<input type="text" name="dirImg" id="dirImg" required lay-verify="required" autocomplete="off" <div class="layui-row layui-col-space20 select-img-wrap">
class="layui-input"> <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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</div>
</div> </div>
</div> </div>
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">选择icon</label>-->
<!-- <div name="dirImg" class="layui-container" id="test10">-->
<!-- <div><img src="./images/01.png"></div>-->
<!-- <div><img src="./images/01.png"></div>-->
<!-- <div><img src="./images/01.png"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</form> </form>
</script> </script>
<script> <script>

Loading…
Cancel
Save