quality.jsp 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8" %>
  3. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>产品知识列表</title>
  9. <%@include file="/views/common.jsp" %>
  10. <style type="text/css">
  11. .layui-table-cell {
  12. height: 32px;
  13. line-height: 32px;
  14. }
  15. .layui-table td, .layui-table th, .layui-table-header, .layui-table-page, .layui-table-tool, .layui-table-total, .layui-table-view {
  16. border-color: #6666;
  17. font-size: 16px;
  18. }
  19. .ztree * {
  20. font-size: 20px;
  21. }
  22. .edge .layui-edge {
  23. right: 35px;
  24. }
  25. </style>
  26. </head>
  27. <script type="text/html" id="toolbarDemo">
  28. </script>
  29. <body>
  30. <br>
  31. <form class="layui-form" action="">
  32. <div class="layui-inline">
  33. <label class="layui-form-label">内容</label>
  34. <div class="layui-input-inline">
  35. <input type="text" id="content" name="content" placeholder="请输入内容"
  36. autocomplete="off" class="layui-input">
  37. </div>
  38. </div>
  39. <div class="layui-inline">
  40. <div class="layui-input-inline">
  41. <button class="layui-btn" id="searchBtn" lay-submit lay-filter="formDemo" style="margin-left: 15px">
  42. <i class="layui-icon layui-icon-search"></i> 查询
  43. </button>
  44. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  45. </div>
  46. </div>
  47. </form>
  48. <table class="layui-hide" id="informationTable" lay-filter="informationTable"></table>
  49. <style>
  50. .layui-table-body .layui-table tr {
  51. height: 80px;
  52. }
  53. </style>
  54. <script type="text/javascript">
  55. function viewImage(item) {
  56. let html = "<div style='width: 100%;height: 100%;display: flex;align-items: center;justify-content: center'>";
  57. if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
  58. html += "<video src='" + item + "' class='layui-upload-img' controls style='width: 400px;height: 400px;margin-right: 5px;'/>";
  59. } else if (item != "" && (item.indexOf(".PDF") > -1 || item.indexOf(".pdf") > -1)) {
  60. let pdfUrl = "/js/pdf/web/viewer.html?file=" + item.replace("https://dfdiyfile.oss-cn-fuzhou.aliyuncs.com/", "http://imagediy.lingtao8.com/");
  61. html += "<iframe src='" + pdfUrl + "' style='width: 400px;height: 400px;margin-right: 5px;'/>";
  62. } else if (item != "") {
  63. html += "<img src='" + item + "' class='layui-upload-img' style='width: 400px;height: 400px;margin-right: 5px;'/>";
  64. }
  65. html += "</div>";
  66. layer.open({
  67. type: 1,
  68. title: false,
  69. closeBtn: 0,
  70. offset: 'auto',
  71. area: ['400px', '400px'],
  72. skin: 'layui-layer-nobg', //没有背景色
  73. shadeClose: true,
  74. content: html
  75. });
  76. }
  77. layui.use(['element', 'table', 'laydate', 'form'], function () {
  78. var $ = layui.jquery;
  79. var table = layui.table;
  80. var laydate = layui.laydate;
  81. var element = layui.element;
  82. var form = layui.form;
  83. // 生成表格
  84. table.render({
  85. elem: '#informationTable',
  86. url: '../../../../getInformations',
  87. toolbar: '#toolbarDemo',
  88. title: '用户表',// 导出文件名
  89. id: 'informationTableAll',
  90. // 开启分页
  91. // page : true,
  92. page: {
  93. layout: ['count', 'prev', 'page', 'next', 'skip', 'limit']
  94. },
  95. limits: [10, 30, 50, 80, 100, 999],
  96. /*request : {
  97. 'limitName' : 'pageSize' // 分页每页条数默认字段改为pageSize
  98. },*/
  99. where: {
  100. content: '', type: '2'
  101. },
  102. cellMinWidth: 80, // 全局定义常规单元格的最小宽度,layui 2.2.1 新增
  103. cols: [[{
  104. type: 'numbers',
  105. title: '序号',
  106. width: 50,
  107. fixed: "left"
  108. }, {
  109. field: 'content',
  110. title: '内容',
  111. }, {
  112. field: 'content',
  113. title: '图片视频',
  114. templet: function (d) {
  115. let html = "<div style='width: 100%;height: 100%;display: flex;align-items: center;justify-content: center'>";
  116. if (d.attachment) {
  117. let list = d.attachment.split(",");
  118. for (let i = 0; i < list.length; i++) {
  119. let item = list[i];
  120. if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
  121. html += "<video src='" + item + "' class='layui-upload-img' style='width: 40px;height: 40px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
  122. } else if (item != "" && (item.indexOf(".PDF") > -1 || item.indexOf(".pdf") > -1)) {
  123. html += "<img src='https://dfdiyfile.oss-cn-fuzhou.aliyuncs.com/priceImages/20250905/PDF.png' class='layui-upload-img' style='width: 40px;height: 40px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
  124. } else if (item != "") {
  125. html += "<img src='" + item + "' class='layui-upload-img' style='width: 40px;height: 40px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
  126. }
  127. }
  128. }
  129. html += "</div>";
  130. return html;
  131. }
  132. }, {
  133. field: 'createBy',
  134. align: 'center',
  135. width: 150,
  136. title: '创建人'
  137. }, {
  138. field: 'createDate',
  139. title: '创建时间',
  140. width: 220,
  141. align: 'center',
  142. templet: function (d) {
  143. return d.createDate != null ? layui.util.toDateString(d.createDate, "yyyy-MM-dd HH:mm:ss") : "";
  144. }
  145. }]],
  146. parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
  147. return {
  148. "code": 0, //解析接口状态
  149. "msg": "", //解析提示文本
  150. "count": res.data.list.total,//解析数据长度
  151. "data": res.data.list.list//解析数据列表
  152. };
  153. }
  154. });
  155. //点击查询按钮,重载表格
  156. $('#searchBtn').on('click', function () {
  157. table.reload('informationTableAll', {
  158. method: 'get',
  159. where: {
  160. content: $("#content").val()
  161. },
  162. page: {
  163. curr: 1
  164. }
  165. });
  166. return false;
  167. });
  168. })
  169. </script>
  170. </body>
  171. </html>