feat: add im kafka admin integration

2026-08-28 00:05:54 +08:00
parent d53b0c1b62
commit 4779214591
75 changed files with 9053 additions and 185 deletions
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="IM Kafka死信"></n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm
+        ref="searchFormRef"
+        @register="register"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
+      />
+      <BasicTable
+        ref="actionRef"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.deadId"
+        :actionColumn="actionColumn"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+      />
+    </n-card>
+    <ViewModal ref="viewRef" @reload="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { List } from '@/api/imDeadLetter';
+  import { columns, loadOptions, loadTenantOptions, schemas, State } from './model';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import ViewModal from './view.vue';
+
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const viewRef = ref();
+  const cursor = ref('');
+  const hasMore = ref(false);
+
+  const actionColumn = reactive({
+    width: 110,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record: State) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [{ label: '详情', onClick: () => viewRef.value.openModal(record, currentTenantId.value), auth: ['/imDeadLetter/view'] }],
+      });
+    },
+  });
+
+  const scrollX = computed(() => adaTableScrollX(columns, actionColumn.width));
+  const currentTenantId = computed(() => searchFormRef.value?.formModel?.tenantId || 0);
+
+  const [register] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 90,
+    schemas,
+  });
+
+  const loadDataTable = async (res) => {
+    if (!currentTenantId.value) {
+      return { list: [], totalCount: 0 };
+    }
+    const params = { ...searchFormRef.value?.formModel, limit: res.pageSize || res.perPage || 50, cursor: cursor.value };
+    const data = await List(params);
+    hasMore.value = !!data?.hasMore;
+    cursor.value = data?.nextCursor || '';
+    return { list: data?.list || [], totalCount: data?.list?.length || 0 };
+  };
+
+  function reloadTable() {
+    cursor.value = '';
+    hasMore.value = false;
+    actionRef.value?.reload();
+  }
+
+  onMounted(async () => {
+    loadOptions();
+    await loadTenantOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>