im_manager/web/src/views/imOutbox/index.vue

<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="IM Outbox运维" />
    </div>
    <n-card :bordered="false" class="proCard">
      <BasicForm
        ref="searchFormRef"
        @register="register"
        @submit="reloadTable"
        @reset="handleReset"
        @keyup.enter="reloadTable"
      />
      <BasicTable
        ref="actionRef"
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.tenantId + '-' + row.source + '-' + row.id"
        :actionColumn="actionColumn"
        :scroll-x="scrollX"
        :resizeHeightOffset="-10000"
      />
    </n-card>
    <ViewModal ref="viewRef" />
  </div>
</template>

<script lang="ts" setup>
  import { computed, h, onMounted, reactive, ref } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { usePermission } from '@/hooks/web/usePermission';
  import { useUserStore } from '@/store/modules/user';
  import { Dead, List, Retry } from '@/api/imOutbox';
  import { columns, loadOptions, loadTenantOptions, schemas, State, tenantOptions } from './model';
  import { adaTableScrollX } from '@/utils/hotgo';
  import ViewModal from './view.vue';

  const message = useMessage();
  const dialog = useDialog();
  const { hasPermission } = usePermission();
  const userStore = useUserStore();
  const isPlatformAdmin = computed(() => userStore.isCompanyDept);
  const actionRef = ref();
  const searchFormRef = ref<any>({});
  const viewRef = ref();

  const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
  if (tenantSchema) {
    tenantSchema.ifShow = () => isPlatformAdmin.value;
  }

  const actionColumn = reactive({
    width: 210,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record: State) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '详情',
            onClick: () => viewRef.value.openModal(record),
            auth: ['/imOutbox/view'],
          },
          {
            label: '重试',
            type: 'warning',
            ifShow: () => record.status !== 'delivered',
            onClick: () => handleRetry(record),
            auth: ['/imOutbox/retry'],
          },
          {
            label: '死信',
            type: 'error',
            ifShow: () => !['delivered', 'dead'].includes(record.status),
            onClick: () => handleDead(record),
            auth: ['/imOutbox/dead'],
          },
        ],
      });
    },
  });

  const scrollX = computed(() => adaTableScrollX(columns, actionColumn.width));

  const [register, { setFieldsValue }] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 90,
    schemas,
  });

  const loadDataTable = async (res) => {
    const params = { ...searchFormRef.value?.formModel, ...res };
    if (isPlatformAdmin.value && !params.tenantId)
      return { list: [], page: 1, pageCount: 0, totalCount: 0 };
    if (!params.source) params.source = 'business';
    return await List(params);
  };

  function reloadTable() {
    actionRef.value?.reload();
  }

  async function handleReset() {
    const defaults: Recordable = { source: 'business' };
    if (isPlatformAdmin.value && tenantOptions.value.length > 0)
      defaults.tenantId = tenantOptions.value[0].value;
    await setFieldsValue(defaults);
    reloadTable();
  }

  function handleRetry(record: State) {
    dialog.warning({
      title: '重试Outbox事件',
      content: '将事件状态改回待投递，并清空下次重试时间，等待 IM 服务端消费，是否确认？',
      positiveText: '确认',
      negativeText: '取消',
      onPositiveClick: async () => {
        await Retry({ tenantId: record.tenantId, source: record.source, id: record.id });
        message.success('操作成功');
        reloadTable();
      },
    });
  }

  function handleDead(record: State) {
    dialog.error({
      title: '标记死信',
      content: '标记死信后 IM 服务端不会自动重试该事件，是否确认？',
      positiveText: '确认',
      negativeText: '取消',
      onPositiveClick: async () => {
        await Dead({ tenantId: record.tenantId, source: record.source, id: record.id });
        message.success('操作成功');
        reloadTable();
      },
    });
  }

  onMounted(async () => {
    loadOptions();
    await setFieldsValue({ source: 'business' });
    if (isPlatformAdmin.value) {
      await loadTenantOptions();
      if (tenantOptions.value.length > 0) {
        await setFieldsValue({ tenantId: tenantOptions.value[0].value });
      } else {
        message.warning('暂无可用商户');
      }
    }
    reloadTable();
  });
</script>

<style lang="less" scoped></style>