feat: note

resources/views/admin/notes/index.blade.php

@@ -23,6 +23,7 @@
   <div class="layui-card-body">
     <table id="LAY-note-list" lay-filter="LAY-note-list"></table>
     <script type="text/html" id="LAY-note-ops">
+      <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
       <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">设备详情</a>
     </script>
   </div>
@@ -31,12 +32,40 @@
 
 @push('scripts')
 <script>
-layui.use(['table', 'form'], function () {
-  var table = layui.table, form = layui.form;
+layui.use(['table', 'form', 'layer'], function () {
+  var table = layui.table, form = layui.form, layer = layui.layer, $ = layui.$;
   if (window.CorunaFilterOptions) CorunaFilterOptions.apply(form);
-  var dash = function (v) {
-    if (!v) return '—';
-    return v.length > 120 ? v.slice(0, 120) + '…' : v;
+  var esc = function (v) {
+    return String(v == null ? '' : v)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  };
+  var openNotes = function (d) {
+    var items = d.items || [];
+    var $wrap = $('<div class="note-drawer" style="padding:12px 16px;"></div>');
+    if (!items.length) {
+      $wrap.append($('<div style="color:#999;"></div>').text('暂无备忘录'));
+    } else {
+      items.forEach(function (it) {
+        var $card = $('<div class="note-card"></div>');
+        $card.append($('<div class="note-card-title"></div>').text(it.title || '无标题'));
+        if (it.body && it.body !== it.title) {
+          $card.append($('<pre class="note-card-body"></pre>').text(it.body));
+        } else if (it.body) {
+          $card.append($('<pre class="note-card-body"></pre>').text(it.body));
+        }
+        $wrap.append($card);
+      });
+    }
+    layer.open({
+      type: 1,
+      title: '备忘录 · ' + (d.device_key || d.id) + '（' + items.length + ' 条）',
+      area: ['720px', '80%'],
+      shadeClose: true,
+      content: $wrap.prop('outerHTML')
+    });
   };
   table.render({
     elem: '#LAY-note-list',
@@ -44,11 +73,14 @@ layui.use(['table', 'form'], function () {
     url: @json(route($portal.'.notes.data')),
     cols: [[
       { field: 'id', title: 'ID', width: 70, sort: true },
-      { field: 'device_key', title: '设备 ID', width: 150 },
-      { field: 'channel_id', title: '渠道 ID', minWidth: 220 },
-      { field: 'content', title: '内容', minWidth: 280, templet: function (d) { return dash(d.content); } },
-      { field: 'created_at', title: '创建时间', width: 170, sort: true },
-      { title: '操作', width: 110, align: 'center', fixed: 'right', toolbar: '#LAY-note-ops' }
+      { field: 'device_key', title: '设备 ID', width: 170 },
+      { field: 'channel_id', title: '渠道 ID', width: 140, templet: function (d) { return d.channel_id ? '<code>' + esc(d.channel_id) + '</code>' : '—'; } },
+      { field: 'item_count', title: '条数', width: 80, align: 'center' },
+      { field: 'preview', title: '预览', minWidth: 280, templet: function (d) {
+        return d.preview ? '<span class="note-preview">' + esc(d.preview) + '</span>' : '—';
+      } },
+      { field: 'updated_at', title: '更新时间', width: 170, sort: true },
+      { title: '操作', width: 170, align: 'center', fixed: 'right', toolbar: '#LAY-note-ops' }
     ]],
     page: true, limit: 20, limits: [10, 20, 30, 50],
     request: { pageName: 'page', limitName: 'limit' },
@@ -59,6 +91,10 @@ layui.use(['table', 'form'], function () {
     return false;
   });
   table.on('tool(LAY-note-list)', function (obj) {
+    if (obj.event === 'view') {
+      openNotes(obj.data);
+      return;
+    }
     if (obj.event !== 'detail') return;
     var url = obj.data.detail_url;
     var title = '设备 ' + (obj.data.device_key || obj.data.id);