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

<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="IM实名审核" />
    </div>
    <n-card :bordered="false" class="proCard">
      <BasicForm
        ref="searchFormRef"
        @register="register"
        @submit="reloadTable"
        @reset="onSearchReset"
      />
      <BasicTable
        ref="actionRef"
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.tenantId + '-' + 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 { List, Review } from '@/api/imRealname';
  import { columns, loadOptions, loadTenantOptions, schemas, State, tenantOptions } from './model';
  import { imSearchReset } from '../imTenantOptions';
  import { adaTableScrollX } from '@/utils/hotgo';
  import ViewModal from './view.vue';

  const message = useMessage();
  const dialog = useDialog();
  const actionRef = ref();
  const searchFormRef = ref<any>({});
  const viewRef = ref();

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

  const actionColumn = reactive({
    width: 200,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record: State) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '详情',
            onClick: () => viewRef.value.openModal(record),
            auth: ['/imRealname/view'],
          },
          {
            label: '通过',
            onClick: () => handleReview(record, 'verified'),
            ifShow: () => record.status === 'pending',
            auth: ['/imRealname/review'],
          },
          {
            label: '拒绝',
            onClick: () => handleReject(record),
            ifShow: () => record.status === 'pending',
            auth: ['/imRealname/review'],
          },
        ],
      });
    },
  });

  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 (!params.tenantId)
      return { list: [], page: 1, pageCount: 0, totalCount: 0 };
    return await List(params);
  };

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

  // 重置后回填商户下拉第一个选项再查询（避免 tenantId 被清空导致列表为空）
  const onSearchReset = imSearchReset(setFieldsValue, tenantOptions, reloadTable);

  function handleReview(record: State, status: string, reviewReason = '') {
    Review({ tenantId: record.tenantId, id: record.id, status, reviewReason }).then(() => {
      message.success('操作成功');
      reloadTable();
    });
  }

  function handleReject(record: State) {
    dialog.warning({
      title: '拒绝实名审核',
      content: '确定拒绝该实名提交？拒绝原因将记录为“信息不符合要求”。',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => handleReview(record, 'rejected', '信息不符合要求'),
    });
  }

  onMounted(async () => {
    loadOptions();
    await loadTenantOptions();
    if (tenantOptions.value.length > 0) {
      await setFieldsValue({ tenantId: tenantOptions.value[0].value });
    }
    reloadTable();
  });
</script>