im_manager/web/src/views/imGroup/members.vue

<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      :title="'群成员 ' + current.topic"
      :style="{ width: dialogWidth }"
    >
      <BasicTable
        ref="actionRef"
        :columns="memberColumns"
        :request="loadDataTable"
        :row-key="(row) => row.userId"
        :actionColumn="actionColumn"
        :scroll-x="scrollX"
        :resizeHeightOffset="-10000"
      />
      <template #action>
        <n-space>
          <n-button @click="closeForm">关闭</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
  import { computed, h, reactive, ref } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { BasicTable, TableAction } from '@/components/Table';
  import { usePermission } from '@/hooks/web/usePermission';
  import { MemberList, Mute, OwnerTransfer, RoleUpdate } from '@/api/imGroup';
  import { memberColumns, newState, State } from './model';
  import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';

  const message = useMessage();
  const dialog = useDialog();
  const { hasPermission } = usePermission();
  const showModal = ref(false);
  const current = ref<State>(newState(null));
  const actionRef = ref();
  const dialogWidth = computed(() => adaModalWidth(980));
  const actionColumn = reactive({
    width: 210,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '禁言',
            type: 'warning',
            ifShow: () => record.memberStatus === 'active',
            disabled: !hasPermission(['/imGroup/mute']),
            onClick: () => handleMute(record),
          },
          {
            label: '设管理员',
            type: 'primary',
            ifShow: () => record.memberStatus === 'active' && record.role === 'member',
            auth: ['/imGroup/roleUpdate'],
            onClick: () => handleRoleUpdate(record, 'admin'),
          },
          {
            label: '取消管理员',
            type: 'default',
            ifShow: () => record.memberStatus === 'active' && record.role === 'admin',
            auth: ['/imGroup/roleUpdate'],
            onClick: () => handleRoleUpdate(record, 'member'),
          },
          {
            label: '转群主',
            type: 'error',
            ifShow: () => record.memberStatus === 'active' && record.role !== 'owner',
            auth: ['/imGroup/ownerTransfer'],
            onClick: () => handleOwnerTransfer(record),
          },
        ],
      });
    },
  });
  const scrollX = computed(() => adaTableScrollX(memberColumns, actionColumn.width));

  // 加载表格数据
  const loadDataTable = async (res) => {
    if (!current.value.tenantId || !current.value.topic) {
      return { list: [], page: 1, pageCount: 0, totalCount: 0 };
    }
    return await MemberList({
      tenantId: current.value.tenantId,
      topic: current.value.topic,
      ...res,
    });
  };

  // 关闭弹窗
  function closeForm() {
    showModal.value = false;
  }

  function handleMute(record) {
    dialog.warning({
      title: '禁言成员',
      content: '将该成员禁言 24 小时，是否确认？',
      positiveText: '确认',
      negativeText: '取消',
      onPositiveClick: async () => {
        await Mute({
          tenantId: current.value.tenantId,
          topic: current.value.topic,
          userId: record.userId,
          expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
          reason: '后台管理员禁言',
        });
        message.success('操作成功');
        actionRef.value?.reload();
      },
    });
  }

  function handleRoleUpdate(record, role: string) {
    dialog.warning({
      title: role === 'admin' ? '设置管理员' : '取消管理员',
      content: role === 'admin' ? '确定将该成员设置为管理员？' : '确定取消该成员管理员身份？',
      positiveText: '确认',
      negativeText: '取消',
      onPositiveClick: async () => {
        await RoleUpdate({
          tenantId: current.value.tenantId,
          topic: current.value.topic,
          userId: record.userId,
          role,
        });
        message.success('操作成功');
        actionRef.value?.reload();
      },
    });
  }

  function handleOwnerTransfer(record) {
    dialog.error({
      title: '转让群主',
      content: '转让后原群主会变为管理员，是否确认？',
      positiveText: '确认',
      negativeText: '取消',
      onPositiveClick: async () => {
        await OwnerTransfer({
          tenantId: current.value.tenantId,
          topic: current.value.topic,
          userId: record.userId,
        });
        message.success('操作成功');
        actionRef.value?.reload();
      },
    });
  }

  // 打开弹窗
  function openModal(state: State) {
    current.value = newState(state);
    showModal.value = true;
    setTimeout(() => {
      actionRef.value?.reload();
    });
  }

  defineExpose({
    openModal,
  });
</script>

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