查询消息详情的时候展示消费情况

ui/src/views/message/Message.vue

@@ -5,10 +5,10 @@
         <a-tab-pane key="1" tab="根据时间查询消息">
           <SearchByTime :topic-list="topicList"></SearchByTime>
         </a-tab-pane>
-        <a-tab-pane key="2" tab="根据位移查询消息" force-render>
+        <a-tab-pane key="2" tab="根据偏移查询消息" force-render>
           <SearchByOffset :topic-list="topicList"></SearchByOffset>
         </a-tab-pane>
-        <a-tab-pane key="3" tab="消息发送"> 消息发送1 </a-tab-pane>
+        <!--        <a-tab-pane key="3" tab="消息发送"> 消息发送1 </a-tab-pane>-->
       </a-tabs>
     </a-spin>
   </div>

ui/src/views/message/MessageDetail.vue

@@ -92,6 +92,21 @@
             </p>
           </div>
         </div>
+        <div>
+          <h4>消费信息</h4>
+          <hr />
+          <a-table
+            :columns="columns"
+            :data-source="data.consumers"
+            bordered
+            row-key="groupId"
+          >
+            <div slot="status" slot-scope="text">
+              <span v-if="text == 'consumed'">已消费</span
+              ><span v-else style="color: red">未消费</span>
+            </div>
+          </a-table>
+        </div>
       </a-spin>
     </div>
   </a-modal>
@@ -120,6 +135,8 @@ export default {
       deserializerList: [],
       keyDeserializer: "String",
       valueDeserializer: "String",
+      consumerDetail: [],
+      columns,
     };
   },
   watch: {
@@ -184,6 +201,19 @@ export default {
     },
   },
 };
+const columns = [
+  {
+    title: "消费组",
+    dataIndex: "groupId",
+    key: "groupId",
+  },
+  {
+    title: "消费情况",
+    dataIndex: "status",
+    key: "status",
+    scopedSlots: { customRender: "status" },
+  },
+];
 </script>
 
 <style scoped>