edit.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>添加运维宝典</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport"
  9. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  10. <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  11. <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  12. </head>
  13. <body>
  14. <div class="layui-fluid">
  15. <div class="layui-row layui-col-space15">
  16. <div class="layui-col-md6">
  17. <div class="layui-card">
  18. <div class="layui-card-body">
  19. <form class="layui-form" action="" lay-filter="component-form-element">
  20. <!-- 企业名称 -->
  21. <div class="layui-form-item">
  22. <label class="layui-form-label"><font color='red' size="4">*</font>标题:</label>
  23. <div class="layui-input-block">
  24. <input type="text" name="title" lay-verify="required" placeholder="请输入标题"
  25. autocomplete="off" class="layui-input">
  26. </div>
  27. </div>
  28. <div class="layui-form-item">
  29. <label class="layui-form-label"><font color='red' size="4">*</font>内容:</label>
  30. <div class="layui-input-block">
  31. <textarea class="layui-textarea" placeholder="请输内容" id="content_demo"></textarea>
  32. </div>
  33. </div>
  34. <div class="layui-form-item">
  35. <label class="layui-form-label"><font color='red' size="4">*</font>是否在用:</label>
  36. <div class="layui-input-block">
  37. <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
  38. value="1">
  39. </div>
  40. </div>
  41. <button class="layui-btn" id="id_save" lay-submit lay-filter="component-form-element"
  42. style="display: none">保存
  43. </button>
  44. <button class="layui-btn" type="button" id="upload_image" style="display: none"></button>
  45. </form>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <script src="../../layuiadmin/layui/layui.js"></script>
  52. <script>
  53. layui.config({
  54. base: '../../../layuiadmin/' //静态资源所在路径
  55. }).extend({
  56. index: 'lib/index',
  57. }).use(['index', 'form', 'utils', 'upload', 'layedit'], function () {
  58. var $ = layui.$
  59. , admin = layui.admin
  60. ,upload = layui.upload
  61. ,layedit = layui.layedit
  62. , form = layui.form;
  63. var id = layui.view.getParameterByName('id');
  64. var oldContent = '';
  65. var editIndex = layedit.build('content_demo', {
  66. height: 180,
  67. tool: [
  68. 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
  69. , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
  70. , '|', 'fullScreen'
  71. ],
  72. uploadImage: {
  73. url: '/tenant/operation_help/upload_image/',
  74. accept: 'image',
  75. acceptMime: 'image/*',
  76. exts: 'jpg|png|gif|bmp|jpeg',
  77. size: '10240'
  78. },
  79. uploadVideo: {
  80. url: '/tenant/operation_help/upload_radio/',
  81. accept: 'video',
  82. acceptMime: 'video/*',
  83. exts: 'mp4|flv|avi|rm|rmvb',
  84. size: '20480'
  85. }
  86. });
  87. // function compareStr(oldStr, newStr){
  88. // //如果字符串相同的话就不在比较
  89. // if(oldStr === newStr) return [];
  90. // // 比较旧的字符串中的src是否还包含在新的字符串中,如果没有表示需要删掉该file
  91. // let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配字符串中的src
  92. // let imgReg = /<img.*?(?:>|\/>)/gi //匹配img标签
  93. // let videoReg = /<video.*?(?:>|\/>)/gi //匹配video标签
  94. // let arrImg = oldStr.match(imgReg);
  95. // let arrVideo = oldStr.match(videoReg);
  96. // let tagArr = [...arrImg, ...arrVideo];
  97. // let srcArr = [];
  98. // //获取旧字符串中的所有src,push进srcArr数组。
  99. // if(tagArr && tagArr.length > 0){
  100. // tagArr.forEach(item=>{
  101. // let src = item.match(srcReg);
  102. // srcArr.push(src[1])
  103. // })
  104. // }
  105. // //遍历srcArr数组,并与新字符串对比,获取需要删除的src(新字符串中不包含旧的路径需要删除)
  106. // let delArr = [];
  107. // if(srcArr && srcArr.length > 0){
  108. // srcArr.forEach(item=>{
  109. // if(newStr.indexOf(item) === -1){
  110. // delArr.push(item)
  111. // }
  112. // })
  113. // }
  114. // return delArr
  115. // }
  116. form.render(null, 'component-form-element');
  117. if (id) {
  118. var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
  119. oldContent = editdata.content;
  120. form.val("component-form-element", editdata);
  121. if(editdata.content){
  122. layedit.setContent(editIndex, editdata.content, false);
  123. }
  124. }
  125. var url = id ? '/tenant/operation_help/' + id + "/" : '/tenant/operation_help/',
  126. method = id ? 'put' : 'post'
  127. form.on('submit(component-form-element)', function (data) {
  128. //layer.msg(JSON.stringify(data.field));
  129. //富文本中的内容
  130. data.field.content = layedit.getContent(editIndex);
  131. let newContent = data.field.content;
  132. // let delArr = compareStr(oldContent, newContent);
  133. if(!data.field.enable){
  134. data.field.enable = 0
  135. }
  136. admin.req({
  137. url: url
  138. , data: data.field
  139. , type: method
  140. , done: function (res) {
  141. if (res.code != 0) {
  142. layer.msg(res.msg);
  143. } else {
  144. layer.open({
  145. type: 1
  146. , content: '<div style="padding: 20px 100px;">保存成功</div>'
  147. , btn: '关闭'
  148. , btnAlign: 'c' //按钮居中
  149. , shade: 0 //不显示遮罩
  150. , yes: function () {
  151. parent.layer.closeAll('iframe');
  152. parent.layui.table.reload('datagrid', {});
  153. }
  154. });
  155. }
  156. }
  157. });
  158. return false;
  159. });
  160. parent.layui.submitChild = function () {
  161. $("#id_save").click();
  162. };
  163. });
  164. </script>
  165. </body>
  166. </html>