edit
This commit is contained in:
+213
-120
@@ -1,129 +1,222 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
pageEncoding="UTF-8" %>
|
||||
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<%@include file="/views/common.jsp"%>
|
||||
<meta charset="UTF-8">
|
||||
<title>产品知识列表</title>
|
||||
<%@include file="/views/common.jsp" %>
|
||||
<style type="text/css">
|
||||
.layui-table-cell {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.layui-table td, .layui-table th, .layui-table-header, .layui-table-page, .layui-table-tool, .layui-table-total, .layui-table-view {
|
||||
border-color: #6666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ztree * {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.edge .layui-edge {
|
||||
right: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<style>
|
||||
.price-layout-page{
|
||||
background:#eeeeee;
|
||||
padding:18px;
|
||||
}
|
||||
.edge .layui-edge{
|
||||
right:30px;
|
||||
}
|
||||
.layui-form-radio, .layui-form-radio *{
|
||||
vertical-align:baseline;
|
||||
}
|
||||
</style>
|
||||
<script id="trainContent" type="text/html">
|
||||
{{# layui.each(d.list, function(index, item){ }}
|
||||
<ul class="layui-timeline">
|
||||
<li class="layui-timeline-item">
|
||||
<i class="layui-icon layui-timeline-axis"></i>
|
||||
<div class="layui-timeline-content layui-text">
|
||||
<p>
|
||||
{{item.content}}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{{# }); }}
|
||||
|
||||
<script type="text/html" id="toolbarDemo">
|
||||
<div class="layui-btn-container demoTable">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle-fine"
|
||||
style="font-size:20px;font-weight:bold"></i> 新增内容
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
<body class="price-layout-page">
|
||||
<form class="layui-form" action="" id="form">
|
||||
<input type="hidden" id="type" name="type" value="产品知识">
|
||||
<label class="layui-form-label"></label>
|
||||
<div class="layui-form-item" id="myRadio"></div>
|
||||
</form>
|
||||
<div class="layui-col-md12" style="padding: 7px;">
|
||||
<div style="background: white; padding: 7px;">
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||||
<legend style="color:red;"><h1>产品知识:</h1></legend>
|
||||
</fieldset>
|
||||
<!-- 渲染到这 -->
|
||||
<div id="view"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/html" id="barDemo">
|
||||
<a class="layui-btn layui-btn-xs" lay-event="view">
|
||||
<i class="layui-icon layui-icon-view" style="color:white;font-size:20px"></i>查看
|
||||
</a>
|
||||
|
||||
</script>
|
||||
<body>
|
||||
<br>
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">内容</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="content" name="content" placeholder="请输入内容" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-inline">
|
||||
<button class="layui-btn" id="searchBtn" lay-submit lay-filter="formDemo" style="margin-left: 15px">
|
||||
<i class="layui-icon layui-icon-search"></i> 查询
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<table class="layui-hide" id="informationTable" lay-filter="informationTable"></table>
|
||||
<script type="text/javascript">
|
||||
function viewImage(item) {
|
||||
let html = "<div style='width: 100%;height: 100%;display: flex;align-items: center;justify-content: center'>";
|
||||
if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
|
||||
html += "<video src='" + item + "' class='layui-upload-img' controls style='width: 400px;height: 400px;margin-right: 5px;'/>";
|
||||
} else if (item != "") {
|
||||
html += "<img src='" + item + "' class='layui-upload-img' style='width: 400px;height: 400px;margin-right: 5px;'/>";
|
||||
}
|
||||
html += "</div>";
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
offset: 'auto',
|
||||
area: ['400px', '400px'],
|
||||
skin: 'layui-layer-nobg', //没有背景色
|
||||
shadeClose: true,
|
||||
content: html
|
||||
});
|
||||
}
|
||||
|
||||
layui.use(['element', 'table', 'laydate', 'form'], function () {
|
||||
var $ = layui.jquery;
|
||||
var table = layui.table;
|
||||
var laydate = layui.laydate;
|
||||
var element = layui.element;
|
||||
var form = layui.form;
|
||||
|
||||
// 生成表格
|
||||
table.render({
|
||||
elem: '#informationTable',
|
||||
url: '../../../../getInformations',
|
||||
toolbar: '#toolbarDemo',
|
||||
title: '用户表',// 导出文件名
|
||||
id: 'informationTableAll',
|
||||
// 开启分页
|
||||
// page : true,
|
||||
page: {
|
||||
layout: ['count', 'prev', 'page', 'next', 'skip', 'limit']
|
||||
},
|
||||
limits: [10, 30, 50, 80, 100, 999],
|
||||
/*request : {
|
||||
'limitName' : 'pageSize' // 分页每页条数默认字段改为pageSize
|
||||
},*/
|
||||
where: {
|
||||
content: ''
|
||||
},
|
||||
cellMinWidth: 80, // 全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
||||
cols: [[{
|
||||
type: 'numbers',
|
||||
title: '序号',
|
||||
width: 50,
|
||||
fixed: "left"
|
||||
}, {
|
||||
field: 'content',
|
||||
title: '内容',
|
||||
}, {
|
||||
field: 'content',
|
||||
title: '图片视频',
|
||||
templet: function (d) {
|
||||
let html = "<div style='width: 100%;height: 100%;display: flex;align-items: center;justify-content: center'>";
|
||||
if (d.attachment) {
|
||||
let list = d.attachment.split(",");
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i];
|
||||
if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
|
||||
html += "<video src='" + item + "' class='layui-upload-img' style='width: 40px;height: 40px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
|
||||
} else if (item != "") {
|
||||
html += "<img src='" + item + "' class='layui-upload-img' style='width: 40px;height: 40px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
|
||||
}
|
||||
}
|
||||
}
|
||||
html += "</div>";
|
||||
return html;
|
||||
}
|
||||
}, {
|
||||
field: 'createBy',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
title: '创建人'
|
||||
}, {
|
||||
field: 'createDate',
|
||||
title: '创建时间',
|
||||
width: 220,
|
||||
align: 'center',
|
||||
templet: function (d) {
|
||||
return d.createDate != null ? layui.util.toDateString(d.createDate, "yyyy-MM-dd HH:mm:ss") : "";
|
||||
}
|
||||
}, {
|
||||
fixed: 'right',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
toolbar: '#barDemo'
|
||||
}]],
|
||||
parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
|
||||
return {
|
||||
"code": 0, //解析接口状态
|
||||
"msg": "", //解析提示文本
|
||||
"count": res.data.list.total,//解析数据长度
|
||||
"data": res.data.list.list//解析数据列表
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
//点击查询按钮，重载表格
|
||||
$('#searchBtn').on('click', function () {
|
||||
table.reload('informationTableAll', {
|
||||
method: 'get',
|
||||
where: {
|
||||
content: $("#content").val()
|
||||
},
|
||||
page: {
|
||||
curr: 1
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
table.on('tool(informationTable)', function (obj) {
|
||||
console.log(obj)
|
||||
let data = obj.data;
|
||||
if (obj.event === 'view') {
|
||||
// 在此处输入 layer 的任意代码
|
||||
let html = '<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 10px"><div>' + data.content + '</div>';
|
||||
if (data.attachment) {
|
||||
html += '<div style="display: flex;justify-content: center;align-items: center;gap: 10px">';
|
||||
let list = data.attachment.split(",");
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i];
|
||||
if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
|
||||
html += "<video src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
|
||||
} else if (item != "") {
|
||||
html += "<img src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
|
||||
}
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
console.log(html)
|
||||
layer.open({
|
||||
type: 1, // page 层类型
|
||||
area: ['500px', '300px'],
|
||||
title: '查看',
|
||||
shade: 0.6, // 遮罩透明度
|
||||
shadeClose: true, // 点击遮罩区域，关闭弹层
|
||||
maxmin: true, // 允许全屏最小化
|
||||
anim: 0, // 0-6 的动画形式，-1 不开启
|
||||
content: html
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
layui.use(['form', 'laytpl', 'layer'], function(){ //独立版的layer无需执行这一句
|
||||
var $ = layui.jquery,
|
||||
form = layui.form,
|
||||
layer = layui.layer,
|
||||
laytpl = layui.laytpl;
|
||||
form.render();
|
||||
|
||||
//一访问页面就调用
|
||||
$.ajax({
|
||||
url:"/quote_price/getCustomerTrainProTypes",
|
||||
type : "GET",
|
||||
async: false, // 同步
|
||||
data:{
|
||||
type:$("#type").val()
|
||||
},
|
||||
dataType : "json",
|
||||
success : function(proTypeResult) {
|
||||
var proTypeData = proTypeResult.list
|
||||
|
||||
for(var proTypeItem in proTypeData){
|
||||
var str="<label class='layui-form-label'>"+ proTypeData[proTypeItem].proType +"：</label>"
|
||||
$("#myRadio").append(str);
|
||||
$.ajax({
|
||||
url:"/quote_price/getCustomerTrainKindLabelsByProType",
|
||||
type : "GET",
|
||||
dataType : "json",
|
||||
async: false, // 同步
|
||||
data:{
|
||||
proType :proTypeData[proTypeItem].proType,
|
||||
type :$("#type").val(),
|
||||
needPage:"0"
|
||||
},
|
||||
success : function(kindResult) {
|
||||
var kindData = kindResult.list
|
||||
for(var kindItem in kindData){
|
||||
var kindStr="<input type='radio' name='kind' lay-filter='kind' value="+ JSON.stringify(proTypeData[proTypeItem].proType+ '+' +kindData[kindItem].kindLabel)+ " title="+ JSON.stringify(kindData[kindItem].kindLabel)+">"
|
||||
$("#myRadio").append(kindStr)
|
||||
}
|
||||
$("#myRadio").append("</br>")
|
||||
}
|
||||
});
|
||||
}
|
||||
$("#form")[0].reset();
|
||||
}
|
||||
});
|
||||
|
||||
form.on('radio(kind)', function(kindData) {
|
||||
// 传过来的数据是proType+kind拼接的
|
||||
var data = kindData.value.split("+");
|
||||
//获取后台数据后渲染
|
||||
$.ajax({
|
||||
url: "/quote_price/getCustomerTrainContents",
|
||||
datatype: "json",
|
||||
// data:$("form").serialize(),
|
||||
data:{
|
||||
proType :data[0],
|
||||
kind :data[1],
|
||||
type :$("#type").val()
|
||||
},
|
||||
type: "GET",
|
||||
async: false,//关闭异步，否则popover组件无法渲染出值
|
||||
context: document.body,
|
||||
success: function (data) {
|
||||
var getTpl = document.getElementById('trainContent').innerHTML,
|
||||
view = document.getElementById('view');
|
||||
laytpl(getTpl).render(data, function (html) {
|
||||
view.innerHTML = html;
|
||||
});
|
||||
form.render();
|
||||
}
|
||||
})
|
||||
return false;
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -1,81 +1,198 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
pageEncoding="UTF-8" %>
|
||||
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>添加产品须知</title>
|
||||
<%@include file="/views/common.jsp"%>
|
||||
<style>
|
||||
.layui-input,.layui-input-inline{
|
||||
width:350px
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<title>添加产品须知</title>
|
||||
<%@include file="/views/common.jsp" %>
|
||||
<style>
|
||||
.layui-input, .layui-input-inline {
|
||||
width: 350px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-input-block layui-form" lay-filter="addUser"
|
||||
style="margin-top: 30px">
|
||||
<form class="layui-form " action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">内容</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="content" placeholder="请输入内容" class="layui-input" lay-verify="required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="type" placeholder="请输入类型" class="layui-input" lay-verify="required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-input-block layui-form" lay-filter="addUser"
|
||||
style="margin-top: 30px">
|
||||
<form class="layui-form " action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">内容</label>
|
||||
<div class="layui-input-inline">
|
||||
<textarea type="text" name="content" placeholder="请输入内容" class="layui-textarea"
|
||||
lay-verify="required"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="enadd">确认添加</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<input type="hidden" name="type" placeholder="请输入类型" class="layui-input" value="1">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片或视频</label>
|
||||
<div class="layui-input-inline">
|
||||
<button type="button" class="layui-btn" id="uploaderImage">上传</button>
|
||||
<input type="file" id="upload" style="display: none"/>
|
||||
<input name="attachment" type="hidden" id="images"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" style="color: #FF5722">点击图片可以删除</label>
|
||||
<div class="layui-input-inline" id="preview" style="display: flex;"></div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="enadd">确认添加</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="${path}/js/alioss.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use([ 'form', 'layer'],function() {
|
||||
var $ = layui.$,
|
||||
form = layui.form,
|
||||
layer = layui.layer;
|
||||
function delImage(index) {
|
||||
layer.confirm('是否确认删除该图片', {
|
||||
btn: ['确定', '关闭'] //按钮
|
||||
}, function (layIndex) {
|
||||
let textImage = $("#images").val();
|
||||
let list = textImage == "" ? [] : textImage.split(",");
|
||||
list.splice(index, 1);
|
||||
$("#images").val(list.join(","));
|
||||
previewImage($("#images").val());
|
||||
layer.close(layIndex);
|
||||
}, function () {
|
||||
});
|
||||
|
||||
//监听提交
|
||||
form.on('submit(enadd)', function(data) {
|
||||
$.ajax({
|
||||
url : '${path}/addInformation',
|
||||
dataType : 'json',
|
||||
data : $(data.form).serialize(),
|
||||
type : 'post',
|
||||
success : function(data) {
|
||||
if (data.code == 200) {
|
||||
layer.msg('录入成功！', {
|
||||
icon : 6,
|
||||
offset : "auto",
|
||||
time : 2000
|
||||
});//提示框
|
||||
} else {
|
||||
layer.msg('录入失败！', {
|
||||
icon : 5,
|
||||
offset : "auto",
|
||||
time : 2000
|
||||
});//提示框
|
||||
}
|
||||
setTimeout(function(){
|
||||
var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
|
||||
parent.layer.close(index);//关闭弹出层
|
||||
parent.layui.table.reload("informationTableAll"); //重新加载页面表格
|
||||
}, 2100);
|
||||
}
|
||||
})
|
||||
return false;
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
$("#images").val("");
|
||||
$("#preview").empty();
|
||||
const client = new OSS({
|
||||
// yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
|
||||
region: "oss-cn-fuzhou",
|
||||
// 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
|
||||
accessKeyId: "LTAI5tE7wuNkeT9jZ42bQnyr",
|
||||
accessKeySecret: "NnutvWhKl4HbQFSad3HosYbCkEkbjN",
|
||||
// 填写存储空间名称。
|
||||
bucket: "dfdiyfile",
|
||||
endpoint: "https://oss-cn-fuzhou.aliyuncs.com",
|
||||
});
|
||||
|
||||
function previewImage(textImage) {
|
||||
let textImageList = textImage == "" ? [] : textImage.split(",");
|
||||
let html = "";
|
||||
textImageList.forEach((item, index) => {
|
||||
if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
|
||||
html += "<video src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='delImage(\"" + index + "\")'/>";
|
||||
} else if (item != "") {
|
||||
html += "<img src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='delImage(\"" + index + "\")'/>";
|
||||
}
|
||||
})
|
||||
$("#preview").empty().append(html);
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function putObject(file) {
|
||||
try {
|
||||
let fileDir = dateFtt("yyyyMMdd", new Date())
|
||||
let name = "priceImages/" + fileDir + "/" + guid() + getSuff(file.name);
|
||||
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
|
||||
// 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
|
||||
// data对象可以自定义为file对象、Blob数据或者OSS Buffer。
|
||||
const options = {
|
||||
headers: {"Content-Type": "text/plain"},
|
||||
};
|
||||
let index = layer.load();
|
||||
const result = await client.put(name, file, options);
|
||||
layer.close(index);
|
||||
let textImage = $("#images").val();
|
||||
let list = textImage == "" ? [] : textImage.split(",");
|
||||
list.push(result.url);
|
||||
$("#images").val(list.join(","));
|
||||
previewImage($("#images").val());
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('uploaderImage').addEventListener('click', function (e) {
|
||||
document.getElementById('upload').click();
|
||||
});
|
||||
document.getElementById('upload').addEventListener('change', function (e) {
|
||||
const file = e.target?.files[0];
|
||||
putObject(file);
|
||||
document.getElementById('upload').value = "";
|
||||
});
|
||||
|
||||
function dateFtt(fmt, date) {
|
||||
var o = {
|
||||
"M+": date.getMonth() + 1, //月份
|
||||
"d+": date.getDate(), //日
|
||||
"h+": date.getHours(), //小时
|
||||
"m+": date.getMinutes(), //分
|
||||
"s+": date.getSeconds(), //秒
|
||||
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
||||
"S": date.getMilliseconds() //毫秒
|
||||
};
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for (var k in o) {
|
||||
if (new RegExp("(" + k + ")").test(fmt))
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
|
||||
}
|
||||
return fmt;
|
||||
|
||||
}
|
||||
|
||||
function getSuff(name) {
|
||||
return name.substring(name.lastIndexOf("."));
|
||||
}
|
||||
|
||||
function guid() {
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx".replace(/[xy]/g, function (c) {
|
||||
var r = (Math.random() * 16) | 0,
|
||||
v = c == "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
layui.use(['form', 'layer'], function () {
|
||||
var $ = layui.$,
|
||||
form = layui.form,
|
||||
layer = layui.layer;
|
||||
|
||||
//监听提交
|
||||
form.on('submit(enadd)', function (data) {
|
||||
$.ajax({
|
||||
url: '${path}/addInformation',
|
||||
dataType: 'json',
|
||||
data: $(data.form).serialize(),
|
||||
type: 'post',
|
||||
success: function (data) {
|
||||
if (data.code == 200) {
|
||||
layer.msg('录入成功！', {
|
||||
icon: 6,
|
||||
offset: "auto",
|
||||
time: 2000
|
||||
});//提示框
|
||||
} else {
|
||||
layer.msg('录入失败！', {
|
||||
icon: 5,
|
||||
offset: "auto",
|
||||
time: 2000
|
||||
});//提示框
|
||||
}
|
||||
setTimeout(function () {
|
||||
var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
|
||||
parent.layer.close(index);//关闭弹出层
|
||||
parent.layui.table.reload("informationTableAll"); //重新加载页面表格
|
||||
}, 2100);
|
||||
}
|
||||
})
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -32,7 +32,7 @@
|
||||
</script>
|
||||
<script type="text/html" id="barDemo">
|
||||
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"style="color:white;font-size:20px"></i>编辑</a>
|
||||
<a class="layui-btn layui-btn-xs layui-btn-danger"" lay-event="del"><i class="layui-icon layui-icon-delete" ></i>删除</a>
|
||||
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete" ></i>删除</a>
|
||||
</script>
|
||||
<body>
|
||||
<br>
|
||||
@@ -46,8 +46,7 @@
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-inline">
|
||||
<button class="layui-btn" id="searchBtn" lay-submit
|
||||
lay-filter="formDemo" style="margin-left: 15px">
|
||||
<button class="layui-btn" id="searchBtn" lay-submit lay-filter="formDemo" style="margin-left: 15px">
|
||||
<i class="layui-icon layui-icon-search"></i> 查询
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
|
||||
@@ -1,75 +1,192 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
pageEncoding="UTF-8" %>
|
||||
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>修改产品须知</title>
|
||||
<%@include file="/views/common.jsp"%>
|
||||
<style>
|
||||
.layui-input,.layui-input-inline{
|
||||
width:350px
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<title>修改产品须知</title>
|
||||
<%@include file="/views/common.jsp" %>
|
||||
<style>
|
||||
.layui-input, .layui-input-inline {
|
||||
width: 350px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-input-block layui-form" lay-filter="addUser"
|
||||
style="margin-top: 30px">
|
||||
<form class="layui-form " action="">
|
||||
<input type="hidden" name="id" id="id">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">内容</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="content" placeholder="请输入内容" class="layui-input" id="contentUpdate">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">类型</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="type" placeholder="请输入类型" class="layui-input" id="type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-input-block layui-form" lay-filter="addUser"
|
||||
style="margin-top: 30px">
|
||||
<form class="layui-form " action="">
|
||||
<input type="hidden" name="id" id="id">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">内容</label>
|
||||
<div class="layui-input-inline">
|
||||
<textarea type="text" name="content" placeholder="请输入内容" class="layui-textarea"
|
||||
id="contentUpdate"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="type" placeholder="请输入类型" class="layui-input" id="type" value="=1">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片或视频</label>
|
||||
<div class="layui-input-inline">
|
||||
<button type="button" class="layui-btn" id="uploaderImage">上传</button>
|
||||
<input type="file" id="upload" style="display: none"/>
|
||||
<input name="attachment" type="hidden" id="images"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" style="color: #FF5722">点击图片可以删除</label>
|
||||
<div class="layui-input-inline" id="preview" style="display: flex;"></div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="enadd">确认修改</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="${path}/js/alioss.js"></script>
|
||||
<script type="text/javascript">
|
||||
function delImage(index) {
|
||||
layer.confirm('是否确认删除该图片', {
|
||||
btn: ['确定', '关闭'] //按钮
|
||||
}, function (layIndex) {
|
||||
let textImage = $("#images").val();
|
||||
let list = textImage == "" ? [] : textImage.split(",");
|
||||
list.splice(index, 1);
|
||||
$("#images").val(list.join(","));
|
||||
previewImage($("#images").val());
|
||||
layer.close(layIndex);
|
||||
}, function () {
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$("#images").val("");
|
||||
$("#preview").empty();
|
||||
const client = new OSS({
|
||||
// yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
|
||||
region: "oss-cn-fuzhou",
|
||||
// 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
|
||||
accessKeyId: "LTAI5tE7wuNkeT9jZ42bQnyr",
|
||||
accessKeySecret: "NnutvWhKl4HbQFSad3HosYbCkEkbjN",
|
||||
// 填写存储空间名称。
|
||||
bucket: "dfdiyfile",
|
||||
endpoint: "https://oss-cn-fuzhou.aliyuncs.com",
|
||||
});
|
||||
|
||||
function previewImage(textImage) {
|
||||
let textImageList = textImage == "" ? [] : textImage.split(",");
|
||||
let html = "";
|
||||
textImageList.forEach((item, index) => {
|
||||
if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
|
||||
html += "<video src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='delImage(\"" + index + "\")'/>";
|
||||
} else if (item != "") {
|
||||
html += "<img src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='delImage(\"" + index + "\")'/>";
|
||||
}
|
||||
})
|
||||
$("#preview").empty().append(html);
|
||||
|
||||
}
|
||||
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="enadd">确认修改</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
layui.use([ 'table', 'laydate', 'form','layer' ], function() {
|
||||
var $ = layui.jquery;
|
||||
var table = layui.table;
|
||||
var laydate = layui.laydate;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
form.on('submit(enadd)',function(data){
|
||||
$.ajax({
|
||||
url:'${path}/updateInformation',
|
||||
dataType : 'json',
|
||||
data:$(data.form).serialize(),
|
||||
type : 'post',
|
||||
success:function(data){
|
||||
if (data.code == 200) {
|
||||
layer.msg('修改成功！',{icon:6,offset:"auto",time:2000});//提示框
|
||||
}else {
|
||||
layer.msg('修改失败！',{icon:5,offset:"auto",time:2000});//提示框
|
||||
}
|
||||
setTimeout(function(){
|
||||
var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
|
||||
parent.layer.close(index);//关闭弹出层
|
||||
parent.layui.table.reload("informationTableAll"); //重新加载页面表格
|
||||
}, 2100);
|
||||
}
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
async function putObject(file) {
|
||||
try {
|
||||
let fileDir = dateFtt("yyyyMMdd", new Date())
|
||||
let name = "priceImages/" + fileDir + "/" + guid() + getSuff(file.name);
|
||||
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
|
||||
// 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
|
||||
// data对象可以自定义为file对象、Blob数据或者OSS Buffer。
|
||||
const options = {
|
||||
headers: {"Content-Type": "text/plain"},
|
||||
};
|
||||
let index = layer.load();
|
||||
const result = await client.put(name, file, options);
|
||||
layer.close(index);
|
||||
let textImage = $("#images").val();
|
||||
let list = textImage == "" ? [] : textImage.split(",");
|
||||
list.push(result.url);
|
||||
$("#images").val(list.join(","));
|
||||
previewImage($("#images").val());
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('uploaderImage').addEventListener('click', function (e) {
|
||||
document.getElementById('upload').click();
|
||||
});
|
||||
document.getElementById('upload').addEventListener('change', function (e) {
|
||||
const file = e.target?.files[0];
|
||||
putObject(file);
|
||||
document.getElementById('upload').value = "";
|
||||
});
|
||||
|
||||
function dateFtt(fmt, date) {
|
||||
var o = {
|
||||
"M+": date.getMonth() + 1, //月份
|
||||
"d+": date.getDate(), //日
|
||||
"h+": date.getHours(), //小时
|
||||
"m+": date.getMinutes(), //分
|
||||
"s+": date.getSeconds(), //秒
|
||||
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
||||
"S": date.getMilliseconds() //毫秒
|
||||
};
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for (var k in o) {
|
||||
if (new RegExp("(" + k + ")").test(fmt))
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
|
||||
}
|
||||
return fmt;
|
||||
|
||||
}
|
||||
|
||||
function getSuff(name) {
|
||||
return name.substring(name.lastIndexOf("."));
|
||||
}
|
||||
|
||||
function guid() {
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx".replace(/[xy]/g, function (c) {
|
||||
var r = (Math.random() * 16) | 0,
|
||||
v = c == "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
layui.use(['table', 'laydate', 'form', 'layer'], function () {
|
||||
var $ = layui.jquery;
|
||||
var table = layui.table;
|
||||
var laydate = layui.laydate;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
form.on('submit(enadd)', function (data) {
|
||||
$.ajax({
|
||||
url: '${path}/updateInformation',
|
||||
dataType: 'json',
|
||||
data: $(data.form).serialize(),
|
||||
type: 'post',
|
||||
success: function (data) {
|
||||
if (data.code == 200) {
|
||||
layer.msg('修改成功！', {icon: 6, offset: "auto", time: 2000});//提示框
|
||||
} else {
|
||||
layer.msg('修改失败！', {icon: 5, offset: "auto", time: 2000});//提示框
|
||||
}
|
||||
setTimeout(function () {
|
||||
var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
|
||||
parent.layer.close(index);//关闭弹出层
|
||||
parent.layui.table.reload("informationTableAll"); //重新加载页面表格
|
||||
}, 2100);
|
||||
}
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user