部分修改

src/views/dataService/serviceManage/callerManage/callerManage.data.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
+type CheckedType = boolean | string | number;
+
+/** 列表筛选项*/
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+export const detailSchemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+
+export const detailsColumns: BasicColumn[] = [
+  {
+    title: 'API名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '调用次数',
+    dataIndex: 'callNum',
+    width: 120,
+  },
+  {
+    title: '调用成功次数',
+    dataIndex: 'callSuccessNum',
+    width: 120,
+  },
+  {
+    title: '调用失败次数',
+    dataIndex: 'callFailNum',
+    width: 120,
+  },
+  {
+    title: '调用状态',
+    dataIndex: 'flag',
+    width: 120,
+  },
+  {
+    title: '调用开始时间',
+    dataIndex: 'startTime',
+    width: 120,
+  },
+  {
+    title: '调用结束时间',
+    dataIndex: 'endTime',
+    width: 120,
+  },
+]
+/** 列表展示字段*/
+export const columns: BasicColumn[] = [
+  {
+    title: '账号',
+    dataIndex: 'account',
+    width: 120,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '服务数',
+    dataIndex: 'serviceNum',
+    width: 120,
+  },
+  {
+    title: '调用次数',
+    dataIndex: 'callNum',
+    width: 140,
+  },
+  {
+    title: '调用成功次数',
+    dataIndex: 'callSuccessNum',
+    width: 140,
+  },
+  {
+    title: '调用失败次数',
+    dataIndex: 'callFailNum',
+    width: 180,
+  },
+];
+
+
+export const formSchema: any[] = [
+  {
+    field: 'account',
+    label: '账号',
+    component: 'Input',
+    defaultValue:'admin',
+    componentProps: {
+      readOnly:true,
+      disabled: true,
+    },
+  },
+  {
+    field: 'name',
+    label: '用户名称',
+    component: 'Input',
+    defaultValue:'admin',
+    componentProps: {
+      readOnly:true,
+      disabled: true,
+    },
+  },
+  {
+    field: 'token',
+    label: '用户token',
+    component: 'InputTextArea',
+    defaultValue:'13248123468126348asdfyi9adfa8ya8d67f8adyf8as67df86as87df',
+    componentProps: {
+      rows: 4,
+      readOnly:true,
+      disabled: true,
+    },
+  },
+
+
+
+]

src/views/dataService/serviceManage/callerManage/details.vue

+<template>
+  <div class="callerManage_details">
+    <div class="header">
+      <Icon @click="handleGoBack" class="backBtn" icon="ant-design:left-outlined" :size="20"  :color="'#666C81'" />
+      <Icon icon="ant-design:user-switch-outlined" :size="20"  :color="'#AFBAFE'" />
+      <div class="header_info">
+        <div>admin</div>
+        <div>调用方管理/admin</div>
+      </div>
+    </div>
+    <step-header title="基本信息"/>
+    <BasicForm @register="registerForm" />
+    <step-header title="已使用服务"/>
+    <BasicTable @register="registerTable"  :rowSelection="rowSelection">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '取消调用',
+                onClick: handleCancelCall.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Icon from '@/components/Icon/Icon.vue';
+import {router} from "@/router";
+import { BasicForm, useForm } from '@/components/Form';
+import {detailsColumns, formSchema, detailSchemas} from "./callerManage.data";
+import StepHeader from "@/components/stepHeader.vue";
+import {tableListDetails} from "./mock";
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+
+const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { lg: 12, md: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
+  title: ' ',
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableListDetails.length,
+      code:'',
+      message:'',
+      data: tableListDetails,
+    };
+
+    return { ...response};
+  },
+  columns:detailsColumns,
+  formConfig: {
+    showActionButtonGroup:false,
+    labelWidth: 120,
+    schemas: detailSchemas,
+    autoSubmitOnEnter: true,
+  },
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  actionColumn: {
+    width: 120,
+    title: '操作',
+    dataIndex: 'action',
+  },
+});
+
+function handleGoBack() {
+  router.go(-1);
+}
+function handleCancelCall() {
+
+}
+</script>
+
+<style scoped lang="scss">
+.callerManage_details{
+  background-color: white;
+  padding: 20px;
+  .header{
+    display: flex;
+    align-items: center;
+    padding-bottom: 20px;
+    .backBtn{
+      cursor: pointer;
+    }
+    .header_info{
+      padding-left: 15px;
+    }
+  }
+
+}
+</style>

src/views/dataService/serviceManage/callerManage/index.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable"  :rowSelection="rowSelection">
+
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                onClick: handleDetails.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { reactive, onMounted,ref } from 'vue';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+import { useMessage } from '@/hooks/web/useMessage';
+import { columns, searchFormSchema } from './callerManage.data';
+import {tableList} from "./mock";
+
+import { useRoute, onBeforeRouteLeave } from 'vue-router';
+import { router } from '@/router';
+
+defineOptions({ name: 'safetyLevelManage' });
+const { createMessage,createConfirm } = useMessage();
+const route = useRoute();
+
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
+  title: '调用方管理列表',
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableList.length,
+      code:'',
+      message:'',
+      data: tableList,
+    };
+
+    return { ...response};
+  },
+  rowKey: 'businessId',
+  rowSelection: true,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+  },
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+  actionColumn: {
+    width: 120,
+    title: '操作',
+    dataIndex: 'action',
+    // slots: { customRender: 'action' },
+  },
+});
+
+function handleDeleteIds() {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '确认批量删除选中数据吗？',
+    onOk() {
+      createMessage.success('批量删除成功!');
+    },
+  });
+}
+
+function handleDetails() {
+  router.push({
+    path: '/dataService/serviceManage/callerManage/details',
+  });
+}
+
+
+
+onMounted(() => {
+
+});
+
+</script>

src/views/dataService/serviceManage/callerManage/mock.ts

+
+
+export const tableList: any[] = [
+  {
+    businessId: 1,
+    account:'admin',
+    name:'admin',
+    serviceNum:'17',
+    callNum:'28',
+    callSuccessNum:'18',
+    callFailNum:'10',
+  },
+  {
+    businessId: 1,
+    account:'admin',
+    name:'admin',
+    serviceNum:'17',
+    callNum:'28',
+    callSuccessNum:'18',
+    callFailNum:'10',
+  },
+  {
+    businessId: 1,
+    account:'admin',
+    name:'admin',
+    serviceNum:'17',
+    callNum:'28',
+    callSuccessNum:'18',
+    callFailNum:'10',
+  },
+]
+
+export const tableListDetails: any[] = [
+  {
+    businessId: 1,
+    name:'test1',
+    callNum:'0',
+    callSuccessNum:'0',
+    callFailNum:'0',
+    flag:'调用中',
+    startTime:'2023-12-05',
+    endTime:'2023-12-05',
+  },
+  {
+    businessId: 1,
+    name:'test1',
+    callNum:'0',
+    callSuccessNum:'0',
+    callFailNum:'0',
+    flag:'调用中',
+    startTime:'2023-12-05',
+    endTime:'2023-12-05',
+  },
+  {
+    businessId: 1,
+    name:'test1',
+    callNum:'0',
+    callSuccessNum:'0',
+    callFailNum:'0',
+    flag:'调用中',
+    startTime:'2023-12-05',
+    endTime:'2023-12-05',
+  },
+]

src/views/dataService/serviceManage/onlineManage/index.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #toolbar>
+        <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" @click="handleDeleteIds">创建商城API</a-button>
+        <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" @click="handleDeleteIds">下载API Doc</a-button>
+        <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" @click="handleDeleteIds">删除</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+
+              {
+                label: '血缘',
+                onClick: handleConsanguinity.bind(null, record),
+              },
+                 {
+                label: '上线',
+                onClick: handleOnline.bind(null, record),
+              },
+                    {
+                label: '下线',
+                onClick: handleOffline.bind(null, record),
+              },
+
+              {
+                // icon: 'ant-design:delete-outlined',
+                color: 'error',
+                label: '删除',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <sensitiveTypeModal @register="registerModal" @success="handleSuccess" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { reactive, onMounted,ref } from 'vue';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+import { useMessage } from '@/hooks/web/useMessage';
+import { columns, searchFormSchema } from './onlineManage.data';
+import {tableList} from "./mock";
+
+import { useRoute, onBeforeRouteLeave } from 'vue-router';
+import { router } from '@/router';
+
+defineOptions({ name: 'safetyLevelManage' });
+const { createMessage,createConfirm } = useMessage();
+const route = useRoute();
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
+  title: 'API上线管理列表',
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableList.length,
+      code:'',
+      message:'',
+      data: tableList,
+    };
+
+    return { ...response};
+  },
+  rowKey: 'businessId',
+  rowSelection: true,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+  },
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+  actionColumn: {
+    width: 120,
+    title: '操作',
+    dataIndex: 'action',
+    // slots: { customRender: 'action' },
+  },
+});
+
+function handleDeleteIds() {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '确认批量删除选中数据吗？',
+    onOk() {
+      createMessage.success('批量删除成功!');
+    },
+  });
+}
+function handleOffline() {
+
+}
+function handleOnline() {
+
+}
+function handleConsanguinity() {
+
+}
+
+
+/** 删除按钮*/
+function handleDelete(record: Recordable) {
+  const rowSelection = getRowSelection().selectedRowKeys;
+  console.log('11111111111',rowSelection);
+  createMessage.success('删除成功!');
+  reload();
+}
+
+
+/** 新增/编辑成功*/
+function handleSuccess({ isUpdate, values }) {
+  if (isUpdate) {
+    // 演示不刷新表格直接更新内部数据。
+    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+    const result = updateTableDataRecord(values.id, values);
+    console.log(result);
+    reload();
+  } else {
+    reload();
+  }
+}
+
+
+onMounted(() => {
+
+});
+
+</script>

src/views/dataService/serviceManage/onlineManage/mock.ts

+
+
+export const tableList: any[] = [
+  {
+    businessId: 1,
+    name:'tuo_api',
+    flag:'开发中',
+    mode:'托管模式',
+    timeout:'5秒',
+    versionNum:'-',
+    createDate:'2023/12/05 14:38:37',
+    updateDate:'2023/12/05 14:38:37',
+    owner:'admin',
+  },
+  {
+    businessId: 2,
+    name:'sql_api',
+    flag:'未上线',
+    mode:'SQL模式',
+    timeout:'5秒',
+    versionNum:'-',
+    createDate:'2023/12/05 14:38:37',
+    updateDate:'2023/12/05 14:38:37',
+    owner:'admin',
+  },
+  {
+    businessId: 3,
+    name:'test1',
+    flag:'已上线',
+    mode:'向导模式',
+    timeout:'5秒',
+    versionNum:'-',
+    createDate:'2023/12/05 14:38:37',
+    updateDate:'2023/12/05 14:38:37',
+    owner:'admin',
+  },
+]

src/views/dataService/serviceManage/onlineManage/onlineManage.data.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
+type CheckedType = boolean | string | number;
+
+/** 列表筛选项*/
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+
+/** 列表展示字段*/
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'flag',
+    width: 120,
+  },
+  {
+    title: '模式',
+    dataIndex: 'mode',
+    width: 120,
+  },
+  {
+    title: '超时时间',
+    dataIndex: 'timeout',
+    width: 140,
+  },
+  {
+    title: '上线版本号',
+    dataIndex: 'versionNum',
+    width: 140,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 180,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateDate',
+    width: 180,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'owner',
+    width: 180,
+  },
+];
+
+/** 新增编辑表单字段*/
+export const formSchema: any[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    rules: [
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  },
+  {
+    field: 'describe',
+    component: 'InputTextArea',
+    label: '描述',
+    componentProps: {
+      placeholder: '请输入描述',
+      rows: 4,
+    },
+  },
+  {
+    field: 'sort',
+    label: '最低安全分级',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'G1', value: 'G1' },
+        { label: 'G2', value: 'G2' },
+        { label: 'G3', value: 'G3' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择推荐保护动作',
+      },
+    ],
+  },
+  {
+    field: 'protectAction',
+    label: '推荐脱敏算法',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'BlockFront', value: 'BlockFront' },
+        { label: 'Delete', value: 'Delete' },
+        { label: 'Mask', value: 'Mask' },
+        { label: 'Base64', value: 'Base64' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择推荐保护动作',
+      },
+    ],
+  },
+  {
+    field: 'params',
+    label: '算法参数',
+    component: 'Input',
+
+  },
+
+
+]