xk-admin/apps/web-antd/src/views/log/api-log/index.vue

<script lang="ts" setup>
import { ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';
import {
  getApiOpLogOperatorLabel,
  getApiOpLogPlatformLabel,
} from './config/platform';
import { getIcon } from '#/util/tool';
import {Icon} from "#/components/icon";

ref(false);

let gridApiRef: ReturnType<typeof useVbenVxeGrid>[1];

function syncPlatformType(platformType: 0 | 1 | 2) {
  gridApiRef?.formApi?.setFieldValue('platform_type', platformType);
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    ...formOptions,
    schema: formOptions.schema?.map((item) =>
      item.fieldName === 'user_filter'
        ? {
            ...item,
            componentProps: {
              onPlatformTypeChange: syncPlatformType,
            },
          }
        : item,
    ),
  },
  gridOptions,
});
gridApiRef = gridApi;

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

const showModal = (data = {}, isUpdate = false) => {
  formModalApi.setData({
    // 表单值
    values: data,
    update: isUpdate,
    gridApi,
  });
  formModalApi.open();
};
</script>

<template>
  <Page auto-content-height title="Api访问日志管理">
    <FormModal />
    <Grid>
      <template #toolbar-buttons>
      </template>
      <template #type="{ row }">
        <Tag v-if="row.type === 0" color="green"> 访问成功 </Tag>
        <Tag v-else color="red"> 访问失败 </Tag>
      </template>
      <template #admin="{ row }">
        <span>{{ getApiOpLogOperatorLabel(row) }}</span>
      </template>
      <template #platform_type="{ row }">
        <span>{{ getApiOpLogPlatformLabel(row.platform_type) }}</span>
      </template>
      <template #method="{ row }">
        <Tag v-if="row.method === 1" color="blue">GET</Tag>
        <Tag v-else-if="row.method === 2" color="green">POST</Tag>
        <Tag v-else color="default">未知</Tag>
      </template>
      <template #toolbar-tools></template>
      <template #equipment="{ row }">
        <Icon :icon="getIcon(row.equipment)" :size="20" />
      </template>
      <template #browser="{ row }">
        <Icon :icon="getIcon(row.browser)" :size="20" />
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              // auth: ['op-log', 'sys:role:detail'],
              onClick: showModal.bind(null, row, true),
            },
          ]"
          :drop-down-actions="[]"
        />
      </template>
    </Grid>
  </Page>
</template>