vent-template/src/views/vent/dataCenter/APICenter/index.vue

<template>
  <div class="safetyList">
    <customHeader>数据中心-API管理</customHeader>
    <div class="device-manager-box">
      <!-- 分站监测 -->
      <BasicTable @register="registerTable">
        <template #tableTitle>
          <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
        </template>
        <template #action="{ record }">
          <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
          <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record)">
            <a class="table-action-link">删除</a>
          </a-popconfirm>
        </template>
      </BasicTable>
    </div>
    <ApiAddModal @register="registerAddModal" @success="reload" />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, computed, reactive, onMounted, onUnmounted, inject } from 'vue';
import { BasicTable } from '/@/components/Table';
import { usePermission } from '/@/hooks/web/usePermission';
import customHeader from '/@/components/vent/customHeader.vue';
import { apiManageList, apiManageDelete } from './apiManger.api';
import { useModal } from '/@/components/Modal';
import { tableColumns } from './apiManger.data';
import ApiAddModal from './ApiAddModal.vue';
import { useListPage } from '/@/hooks/system/useListPage';
const { hasPermission } = usePermission();
const [registerAddModal, { openModal: openAddModal }] = useModal();
// 列表页面公共参数、方法
const { prefixCls, tableContext } = useListPage({
  designScope: 'API-list',
  tableProps: {
    title: 'Api列表',
    api: apiManageList,
    columns: tableColumns,
    size: 'small',
    actionColumn: {
      width: 120,
    },
    beforeFetch(params) {
      return Object.assign(
        {
          column: 'createTime',
        },
        params
      );
    },
    showActionColumn: false,
  },
});
const [registerTable, { reload, updateTableDataRecord }, { selectedRows }] = tableContext;
// 注册table数据

// async function getAPIList(params) {
//   const result = await apiManageList(params);
//   // tableData.value = result.records;
// }
function handleCreate() {
  openAddModal(true, { isAdd: true });
  reload();
}
async function handlerEdit(record) {
  openAddModal(true, { record, isAdd: false });
}
async function handleDelete(record) {
  await apiManageDelete({ id: record.id });
  reload();
}
onMounted(async () => {
  // await getAPIList({
  //   pageNo: 1,
  //   pageSize: 1000,
  // });
});
onUnmounted(() => {});
</script>

<style lang="less" scoped>
.safetyList {
  width: calc(100% - 20px);
  height: calc(100% - 80px);
  position: relative;
  margin: 40px 10px 10px 10px;
}
</style>