zyy/quote_price
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
zhuyiyi
2025-08-23 09:40:45 +08:00
parent f5c2d30424
commit e9f79ac015
11 changed files with 871 additions and 539 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/webapp/views/system/customerTrain/knowledge/showCustomerKnowledgeContent.jsp
+213 -120
View File
@@ -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>