修改api接入安全页面

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab2.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <!-- <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">{{ formParams.fieldName }}</div>
+        <div class="path">{{ formParams.path }}</div>
+      </div>
+    </div> -->
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './classificationAndGrading.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '新增分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
+        { field: 'level', required: false, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 0 0 20px 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab3.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <!-- <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">{{ formParams.fieldName }}</div>
+        <div class="path">{{ formParams.path }}</div>
+      </div>
+    </div> -->
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './classificationAndGrading.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '新增分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
+        { field: 'level', required: false, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 0 0 20px 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab4.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <!-- <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">{{ formParams.fieldName }}</div>
+        <div class="path">{{ formParams.path }}</div>
+      </div>
+    </div> -->
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './classificationAndGrading.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '新增分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
+        { field: 'level', required: false, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 0 0 20px 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab5.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <!-- <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">{{ formParams.fieldName }}</div>
+        <div class="path">{{ formParams.path }}</div>
+      </div>
+    </div> -->
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './classificationAndGrading.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '新增分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
+        { field: 'level', required: false, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 0 0 20px 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/classificationAndGrading.data.ts

@@ -7,7 +7,7 @@ import { changeFlagApi } from '@/api/system/user/user';
 // 引入开关组件
 type CheckedType = boolean | string | number;
 
-/** 列表筛选项*/
+/** 列表筛选项tab1*/
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'fieldCode',
@@ -34,7 +34,7 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
-/** 列表展示字段*/
+/** 列表展示字段tab1*/
 export const columns: BasicColumn[] = [
   {
     title: 'IP',
@@ -50,7 +50,7 @@ export const columns: BasicColumn[] = [
   },
 ];
 
-/** 新增编辑表单字段*/
+/** 新增编辑表单字段tab1*/
 export const formSchema: any[] = [
   {
     field: 'ruleType',
@@ -79,7 +79,429 @@ export const formSchema: any[] = [
     componentProps: {
       placeholder: '敏感类型',
       options: [
-        { label: '钱包类型', value: '钱包类型' },
+        { label: '敏感类型', value: '敏感类型' },
+        { label: 'AccessKey ID', value: 'AccessKey ID' },
+        { label: '担保方式', value: '担保方式' },
+      ],
+    },
+  },
+  {
+    field: 'ip',
+    label: 'IP',
+    component: 'Input',
+    componentProps: {
+      style: {
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+      readOnly: true,
+    },
+  },
+];
+/** 列表筛选项tab2*/
+export const searchFormSchematab2: FormSchema[] = [
+  {
+    field: 'ip',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索IP',
+    },
+  },
+  {
+    field: 'fieldName',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索域名',
+    },
+  },
+  {
+    field: 'protectAction',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 2 },
+    componentProps: {
+      placeholder: '保护动作',
+      options: [
+        { label: 'SQL模式', value: 'SQL模式' },
+        { label: '托管模式', value: '托管模式' },
+        { label: '向导模式', value: '向导模式' },
+      ],
+    },
+  },
+];
+
+/** 列表展示字段tab2*/
+export const columnstab2: BasicColumn[] = [
+  {
+    title: 'IP',
+    dataIndex: 'ip',
+    width: 120,
+    fixed: 'left',
+  },
+  {
+    title: '域名',
+    dataIndex: 'fieldName',
+    width: 120,
+    fixed: 'left',
+  },
+  {
+    title: '保护动作',
+    dataIndex: 'protectAction',
+    width: 120,
+    fixed: 'left',
+  },
+];
+
+/** 新增编辑表单字段tab2*/
+export const formSchematab2: any[] = [
+  {
+    field: 'ruleType',
+    label: '规则类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '规则类型',
+      options: [
+        { label: '默认', value: '默认' },
+        { label: '规则类型1', value: '规则类型1' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择规则类型',
+      },
+    ],
+  },
+  {
+    field: 'sensitiveType',
+    label: '敏感类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感类型',
+      options: [
+        { label: '敏感类型', value: '敏感类型' },
+        { label: 'AccessKey ID', value: 'AccessKey ID' },
+        { label: '担保方式', value: '担保方式' },
+      ],
+    },
+  },
+  {
+    field: 'ip',
+    label: 'IP',
+    component: 'Input',
+    componentProps: {
+      style: {
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+      readOnly: true,
+    },
+  },
+]; /** 列表筛选项tab3*/
+export const searchFormSchematab3: FormSchema[] = [
+  {
+    field: 'fieldCode',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索IP',
+    },
+  },
+  {
+    field: 'featureTraffic',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索特征流量',
+    },
+  },
+  {
+    field: 'protectAction',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 2 },
+    componentProps: {
+      placeholder: '保护动作',
+      options: [
+        { label: 'SQL模式', value: 'SQL模式' },
+        { label: '托管模式', value: '托管模式' },
+        { label: '向导模式', value: '向导模式' },
+      ],
+    },
+  },
+];
+
+/** 列表展示字段tab3*/
+export const columnstab3: BasicColumn[] = [
+  {
+    title: 'IP',
+    dataIndex: 'ip',
+    width: 120,
+    fixed: 'left',
+  },
+  {
+    title: '特征流量',
+    dataIndex: 'featureTraffic',
+    width: 120,
+    fixed: 'left',
+  },
+  {
+    title: '保护动作',
+    dataIndex: 'protectAction',
+    width: 120,
+    fixed: 'left',
+  },
+];
+
+/** 新增编辑表单字段tab3*/
+export const formSchematab3: any[] = [
+  {
+    field: 'ruleType',
+    label: '规则类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '规则类型',
+      options: [
+        { label: '默认', value: '默认' },
+        { label: '规则类型1', value: '规则类型1' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择规则类型',
+      },
+    ],
+  },
+  {
+    field: 'sensitiveType',
+    label: '敏感类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感类型',
+      options: [
+        { label: '敏感类型', value: '敏感类型' },
+        { label: 'AccessKey ID', value: 'AccessKey ID' },
+        { label: '担保方式', value: '担保方式' },
+      ],
+    },
+  },
+  {
+    field: 'ip',
+    label: 'IP',
+    component: 'Input',
+    componentProps: {
+      style: {
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+      readOnly: true,
+    },
+  },
+]; /** 列表筛选项tab4*/
+export const searchFormSchematab4: FormSchema[] = [
+  {
+    field: 'fieldCode',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索IP',
+    },
+  },
+  {
+    field: 'url',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索URL',
+    },
+  },
+  {
+    field: 'protectAction',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 2 },
+    componentProps: {
+      placeholder: '保护动作',
+      options: [
+        { label: 'SQL模式', value: 'SQL模式' },
+        { label: '托管模式', value: '托管模式' },
+        { label: '向导模式', value: '向导模式' },
+      ],
+    },
+  },
+];
+
+/** 列表展示字段tab4*/
+export const columnstab4: BasicColumn[] = [
+  {
+    title: 'IP',
+    dataIndex: 'ip',
+    width: 120,
+    fixed: 'left',
+  },
+  {
+    title: 'URL',
+    dataIndex: 'url',
+    width: 120,
+    fixed: 'left',
+  },
+  {
+    title: '保护动作',
+    dataIndex: 'protectAction',
+    width: 120,
+    fixed: 'left',
+  },
+];
+
+/** 新增编辑表单字段tab4*/
+export const formSchematab4: any[] = [
+  {
+    field: 'ruleType',
+    label: '规则类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '规则类型',
+      options: [
+        { label: '默认', value: '默认' },
+        { label: '规则类型1', value: '规则类型1' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择规则类型',
+      },
+    ],
+  },
+  {
+    field: 'sensitiveType',
+    label: '敏感类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感类型',
+      options: [
+        { label: '敏感类型', value: '敏感类型' },
+        { label: 'AccessKey ID', value: 'AccessKey ID' },
+        { label: '担保方式', value: '担保方式' },
+      ],
+    },
+  },
+  {
+    field: 'ip',
+    label: 'IP',
+    component: 'Input',
+    componentProps: {
+      style: {
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+      readOnly: true,
+    },
+  },
+];
+/** 列表筛选项tab5*/
+export const searchFormSchematab5: FormSchema[] = [
+  {
+    field: 'fieldCode',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索IP',
+    },
+  },
+  {
+    field: 'api',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '搜索API',
+    },
+  },
+  {
+    field: 'protectAction',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 2 },
+    componentProps: {
+      placeholder: '保护动作',
+      options: [
+        { label: 'SQL模式', value: 'SQL模式' },
+        { label: '托管模式', value: '托管模式' },
+        { label: '向导模式', value: '向导模式' },
+      ],
+    },
+  },
+];
+
+/** 列表展示字段tab5*/
+export const columnstab5: BasicColumn[] = [
+  {
+    title: 'IP',
+    dataIndex: 'ip',
+    width: 120,
+    fixed: 'left',
+  },
+  {
+    title: 'API',
+    dataIndex: 'api',
+    width: 120,
+    fixed: 'left',
+  },
+  {
+    title: '保护动作',
+    dataIndex: 'protectAction',
+    width: 120,
+    fixed: 'left',
+  },
+];
+
+/** 新增编辑表单字段tab5*/
+export const formSchematab5: any[] = [
+  {
+    field: 'ruleType',
+    label: '规则类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '规则类型',
+      options: [
+        { label: '默认', value: '默认' },
+        { label: '规则类型1', value: '规则类型1' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择规则类型',
+      },
+    ],
+  },
+  {
+    field: 'sensitiveType',
+    label: '敏感类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感类型',
+      options: [
+        { label: '敏感类型', value: '敏感类型' },
         { label: 'AccessKey ID', value: 'AccessKey ID' },
         { label: '担保方式', value: '担保方式' },
       ],

src/views/dataService/APIIntegrationSecurity/AccessControl/index.vue

@@ -36,12 +36,152 @@
             </template>
           </template> </BasicTable
       ></Tabs.TabPane>
-      <Tabs.TabPane key="2" tab="域名" />
-      <Tabs.TabPane key="3" tab="特征流量" />
-      <Tabs.TabPane key="4" tab="URL" />
-      <Tabs.TabPane key="5" tab="API" />
+      <Tabs.TabPane key="2" tab="域名"
+        ><BasicTable @register="registerTabletab2" :searchInfo="searchInfo">
+          <template #toolbar>
+            <a-button type="primary" @click="handleCreate">新增</a-button>
+            <a-button
+              type="error"
+              @click="handleDeleteBatch"
+              :disabled="getRowSelection().selectedRowKeys.length <= 0"
+              >删除选中</a-button
+            >
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'clarity:note-edit-line',
+                    label: '编辑',
+                    onClick: handleEdit.bind(null, record, true),
+                  },
+                  {
+                    icon: 'ant-design:delete-outlined',
+                    label: '删除',
+                    color: 'error',
+                    popConfirm: {
+                      title: '是否确认删除',
+                      placement: 'left',
+                      confirm: handleDelete.bind(null, record),
+                    },
+                  },
+                ]"
+              />
+            </template>
+          </template> </BasicTable
+      ></Tabs.TabPane>
+      <Tabs.TabPane key="3" tab="特征流量"
+        ><BasicTable @register="registerTabletab3" :searchInfo="searchInfo">
+          <template #toolbar>
+            <a-button type="primary" @click="handleCreate">新增</a-button>
+            <a-button
+              type="error"
+              @click="handleDeleteBatch"
+              :disabled="getRowSelection().selectedRowKeys.length <= 0"
+              >删除选中</a-button
+            >
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'clarity:note-edit-line',
+                    label: '编辑',
+                    onClick: handleEdit.bind(null, record, true),
+                  },
+                  {
+                    icon: 'ant-design:delete-outlined',
+                    label: '删除',
+                    color: 'error',
+                    popConfirm: {
+                      title: '是否确认删除',
+                      placement: 'left',
+                      confirm: handleDelete.bind(null, record),
+                    },
+                  },
+                ]"
+              />
+            </template>
+          </template> </BasicTable
+      ></Tabs.TabPane>
+      <Tabs.TabPane key="4" tab="URL"
+        ><BasicTable @register="registerTabletab4" :searchInfo="searchInfo">
+          <template #toolbar>
+            <a-button type="primary" @click="handleCreate">新增</a-button>
+            <a-button
+              type="error"
+              @click="handleDeleteBatch"
+              :disabled="getRowSelection().selectedRowKeys.length <= 0"
+              >删除选中</a-button
+            >
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'clarity:note-edit-line',
+                    label: '编辑',
+                    onClick: handleEdit.bind(null, record, true),
+                  },
+                  {
+                    icon: 'ant-design:delete-outlined',
+                    label: '删除',
+                    color: 'error',
+                    popConfirm: {
+                      title: '是否确认删除',
+                      placement: 'left',
+                      confirm: handleDelete.bind(null, record),
+                    },
+                  },
+                ]"
+              />
+            </template>
+          </template> </BasicTable
+      ></Tabs.TabPane>
+      <Tabs.TabPane key="5" tab="API"
+        ><BasicTable @register="registerTabletab5" :searchInfo="searchInfo">
+          <template #toolbar>
+            <a-button type="primary" @click="handleCreate">新增</a-button>
+            <a-button
+              type="error"
+              @click="handleDeleteBatch"
+              :disabled="getRowSelection().selectedRowKeys.length <= 0"
+              >删除选中</a-button
+            >
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'clarity:note-edit-line',
+                    label: '编辑',
+                    onClick: handleEdit.bind(null, record, true),
+                  },
+                  {
+                    icon: 'ant-design:delete-outlined',
+                    label: '删除',
+                    color: 'error',
+                    popConfirm: {
+                      title: '是否确认删除',
+                      placement: 'left',
+                      confirm: handleDelete.bind(null, record),
+                    },
+                  },
+                ]"
+              />
+            </template>
+          </template> </BasicTable
+      ></Tabs.TabPane>
     </Tabs>
     <ClassificationAndGradingModal @register="registerModal" @success="handleSuccess" />
+    <ClassificationAndGradingModaltab2 @register="registerModaltab2" @success="handleSuccess" />
+    <ClassificationAndGradingModaltab3 @register="registerModaltab3" @success="handleSuccess" />
+    <ClassificationAndGradingModaltab4 @register="registerModaltab4" @success="handleSuccess" />
+    <ClassificationAndGradingModaltab5 @register="registerModaltab5" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -55,9 +195,21 @@
   import { useRoute, onBeforeRouteLeave } from 'vue-router';
   import { router } from '@/router';
   import ClassificationAndGradingModal from '@/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModal.vue';
+  import ClassificationAndGradingModaltab2 from '@/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab2.vue';
+  import ClassificationAndGradingModaltab3 from '@/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab3.vue';
+  import ClassificationAndGradingModaltab4 from '@/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab4.vue';
+  import ClassificationAndGradingModaltab5 from '@/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab5.vue';
   import {
     columns,
+    columnstab2,
+    columnstab3,
+    columnstab4,
+    columnstab5,
     searchFormSchema,
+    searchFormSchematab2,
+    searchFormSchematab3,
+    searchFormSchematab4,
+    searchFormSchematab5,
   } from '@/views/dataService/APIIntegrationSecurity/AccessControl/classificationAndGrading.data';
   import { t } from '@/hooks/web/useI18n';
 
@@ -65,6 +217,10 @@
   const route = useRoute();
   let tableData = ref(tableList);
   const [registerModal, { openModal }] = useModal();
+  const [registerModaltab2, { openModal: openModaltab2 }] = useModal();
+  const [registerModaltab3, { openModal: openModaltab3 }] = useModal();
+  const [registerModaltab4, { openModal: openModaltab4 }] = useModal();
+  const [registerModaltab5, { openModal: openModaltab5 }] = useModal();
   const [registerImport, { openModal: openImportModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
   /** 切换标签页 */
@@ -112,6 +268,187 @@
       dataIndex: 'action',
     },
   });
+  const [
+    registerTabletab2,
+    {
+      reload: reloadtab2,
+      updateTableDataRecord: updateTableDataRecordtab2,
+      getSearchInfo: getSearchInfotab2,
+      getForm: getFormtab2,
+      getRowSelection: getRowSelectiontab2,
+    },
+  ] = useTable({
+    title: '分类分级结果',
+
+    api: async (params) => {
+      // console.log(params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: tableData.value,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'id',
+    columns: columnstab2,
+    rowSelection: true,
+
+    formConfig: {
+      // labelWidth: 10,
+      schemas: searchFormSchematab2,
+      autoSubmitOnEnter: true,
+    },
+    customRow: customRow,
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  const [
+    registerTabletab3,
+    {
+      reload: reloadtab3,
+      updateTableDataRecord: updateTableDataRecordtab3,
+      getSearchInfo: getSearchInfotab3,
+      getForm: getFormtab3,
+      getRowSelection: getRowSelectiontab3,
+    },
+  ] = useTable({
+    title: '分类分级结果',
+    api: async (params) => {
+      // console.log(params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: tableData.value,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'id',
+    columns: columnstab3,
+    rowSelection: true,
+
+    formConfig: {
+      // labelWidth: 10,
+      schemas: searchFormSchematab3,
+      autoSubmitOnEnter: true,
+    },
+    customRow: customRow,
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  const [
+    registerTabletab4,
+    {
+      reload: reloadtab4,
+      updateTableDataRecord: updateTableDataRecordtab4,
+      getSearchInfo: getSearchInfotab4,
+      getForm: getFormtab4,
+      getRowSelection: getRowSelectiontab4,
+    },
+  ] = useTable({
+    title: '分类分级结果',
+    api: async (params) => {
+      // console.log(params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: tableData.value,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'id',
+    columns: columnstab4,
+    rowSelection: true,
+
+    formConfig: {
+      // labelWidth: 10,
+      schemas: searchFormSchematab4,
+      autoSubmitOnEnter: true,
+    },
+    customRow: customRow,
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  const [
+    registerTabletab5,
+    {
+      reload: reloadtab5,
+      updateTableDataRecord: updateTableDataRecordtab5,
+      getSearchInfo: getSearchInfotab5,
+      getForm: getFormtab5,
+      getRowSelection: getRowSelectiontab5,
+    },
+  ] = useTable({
+    title: '分类分级结果',
+    api: async (params) => {
+      // console.log(params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: tableData.value,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'id',
+    columns: columnstab5,
+    rowSelection: true,
+
+    formConfig: {
+      // labelWidth: 10,
+      schemas: searchFormSchematab5,
+      autoSubmitOnEnter: true,
+    },
+    customRow: customRow,
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
   /** 新增按钮*/
   function handleCreate() {
     openModal(true, {

src/views/dataService/APIIntegrationSecurity/AccessControl/mock.ts

@@ -7,6 +7,10 @@ export const tableList: any[] = [
     ip: '127.0.0.1',
     protectAction: '阻断',
     markTime: '2023-12-08 15:27:07',
+    fieldName: 'user',
+    featureTraffic: '1000',
+    api: 'login',
+    url: 'https://www.badu.com',
   },
   {
     id: '2',
@@ -14,6 +18,10 @@ export const tableList: any[] = [
     ip: '127.0.0.1',
     protectAction: '阻断',
     markTime: '2023-12-08 15:06:44',
+    fieldName: 'user',
+    featureTraffic: '1000',
+    api: 'login',
+    url: 'https://www.badu.com',
   },
   {
     id: '3',
@@ -21,6 +29,10 @@ export const tableList: any[] = [
     ip: '127.0.0.1',
     protectAction: '阻断',
     markTime: '2023-12-08 15:48:56',
+    fieldName: 'user',
+    featureTraffic: '1000',
+    api: 'login',
+    url: 'https://www.badu.com',
   },
   {
     id: '4',
@@ -28,5 +40,9 @@ export const tableList: any[] = [
     ip: '127.0.0.1',
     protectAction: '阻断',
     markTime: '2023-12-08 15:27:07',
+    fieldName: 'user',
+    featureTraffic: '1000',
+    api: 'login',
+    url: 'https://www.badu.com',
   },
 ];