數據服務-API數據安全-分類分級bug修改&敏感識別列表頁修正&詳細/編輯頁&添加敏感規則

src/views/dataService/APIDataSecurity/classificationAndGrading/ClassificationAndGradingModal.vue

@@ -17,7 +17,7 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, unref } from 'vue';
+  import { ref, unref } from 'vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
   import { formSchema } from './classificationAndGrading.data';

src/views/dataService/APIDataSecurity/classificationAndGrading/classificationAndGrading.data.ts

@@ -208,6 +208,7 @@ export const formSchema: any[] = [
     label: '标记时间',
     component: 'Input',
     componentProps: {
+      allowClear: false,
       style: {
         border: 'none',
         backgroundColor: 'transparent',

src/views/dataService/APIDataSecurity/sensitiveRecognition/GroupTree.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { h, nextTick, onMounted, ref, unref } from 'vue';
+  import { nextTick, onMounted, ref, unref } from 'vue';
   import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
   import { Nullable } from '@vben/types';
   import { TreeData } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock.ts';

src/views/dataService/APIDataSecurity/sensitiveRecognition/addSensitiveRulersModal.vue

+<template>
+  <BasicModal
+    width="50%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <BasicTable @register="registerTable1">
+      <template #form-slot>
+        <a-button
+          type="primary"
+          @click="addReview"
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          >添加至预览</a-button
+        >
+      </template>
+    </BasicTable>
+    <Divider style="margin: 0 0 0 0" />
+    <BasicTable @register="registerTable2" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Divider } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { rulerFormSchema1, rulerFormSchema2 } from './sensitiveRecognition.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import { columnsTable3 } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognition.data';
+  import { ruleTtableList } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const title = ref('添加敏感规则');
+  let rulerTableData1 = ref(ruleTtableList);
+  let rulerTableData2 = ref();
+
+  const [registerTable1, { reload: reload1, getRowSelection }] = useTable({
+    api: async () => {
+      // console.log(params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: rulerTableData1.value.length,
+        code: '',
+        message: '',
+        data: rulerTableData1.value,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    columns: columnsTable3,
+    formConfig: {
+      labelWidth: 10,
+      showActionButtonGroup: false,
+      schemas: rulerFormSchema1,
+      autoSubmitOnEnter: true,
+    },
+    rowSelection: true,
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    scroll: { y: 300 },
+    handleSearchInfoFn(info) {
+      console.log('rulerTableData1', rulerTableData1.value);
+      rulerTableData1.value = ruleTtableList.filter(
+        (item) => info.name === undefined || item.name.includes(info.name),
+      );
+      console.log('rulerTableData1', rulerTableData1.value);
+      return info;
+    },
+  });
+  const [registerTable2, { reload: reload2 }] = useTable({
+    api: async () => {
+      console.log('111111------');
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: rulerTableData2.value.length,
+        code: '',
+        message: '',
+        data: rulerTableData2.value,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'id',
+    columns: columnsTable3,
+    formConfig: {
+      labelWidth: 10,
+      showActionButtonGroup: false,
+      schemas: rulerFormSchema2,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    scroll: { y: 300 },
+    handleSearchInfoFn(info) {
+      console.log('rulerTableData2', rulerTableData2.value);
+      rulerTableData2.value = ruleTtableList.filter(
+        (item) => info.name === undefined || item.name.includes(info.name),
+      );
+      console.log('rulerTableData2', rulerTableData2.value);
+      return info;
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
+    setModalProps({ confirmLoading: false });
+  });
+
+  function addReview() {
+    const idList = getRowSelection().selectedRowKeys;
+    console.log('idList', idList);
+
+    // 过滤 rulerTableData1 中与 idList 中 businessId 相同的项，并将其添加到 rulerTableData2
+    rulerTableData2.value = rulerTableData1.value.filter((item) =>
+      idList.includes(item.businessId),
+    );
+    // 更新 rulerTableData1，移除已添加到 rulerTableData2 的项
+    rulerTableData1.value = rulerTableData1.value.filter(
+      (item) => !idList.includes(item.businessId),
+    );
+
+    console.log('rulerTableData1 after:', rulerTableData1.value);
+    console.log('rulerTableData2 after:', rulerTableData2.value);
+
+    reload1();
+    reload2();
+  }
+
+  async function handleSubmit() {
+    try {
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('添加成功');
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    padding: 0 0 20px 20px;
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIDataSecurity/sensitiveRecognition/index.vue

@@ -37,11 +37,11 @@
   import { useModal } from '@/components/Modal';
   import { columns, searchFormSchema } from './sensitiveRecognition.data';
   import { tableList } from './mock';
-  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { useRoute } from 'vue-router';
   import SensitiveRecognitionModal from '@/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognitionEdit.vue';
   import GroupTree from '@/views/dataService/APIDataSecurity/sensitiveRecognition/GroupTree.vue';
   import { TreeData } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock.ts';
-  import {router} from "@/router";
+  import { router } from '@/router';
 
   const { createMessage } = useMessage();
   const route = useRoute();

src/views/dataService/APIDataSecurity/sensitiveRecognition/mock.ts

@@ -146,7 +146,7 @@ export const tableList: any[] = [
     path: '敏感识别/共享工作区/test/托管系统',
     APIModel: '托管模式',
     sensitiveState: '非敏感',
-    policyState: '非敏感',
+    policyState: '关',
     level: 'G2',
     sensitiveType: '钱包类型',
     source: '人工标记',
@@ -163,7 +163,7 @@ export const tableList: any[] = [
     path: '敏感识别/admin-个人工作区/独收/向导API',
     APIModel: '向导模式',
     sensitiveState: '非敏感',
-    policyState: '非敏感',
+    policyState: '开',
     level: 'G5',
     sensitiveType: 'AccessKey ID',
     source: '人工标记',
@@ -180,7 +180,7 @@ export const tableList: any[] = [
     path: '敏感识别/高级工作区/sql_api',
     APIModel: 'SQL 模式',
     sensitiveState: '敏感',
-    policyState: '敏感',
+    policyState: '开',
     level: 'G2',
     sensitiveType: '钱包类型',
     source: '人工标记',
@@ -197,7 +197,7 @@ export const tableList: any[] = [
     path: '敏感识别/高级工作区/sql_api',
     APIModel: 'SQL 模式',
     sensitiveState: '非敏感',
-    policyState: '非敏感',
+    policyState: '关',
     level: '-',
     sensitiveType: '',
     source: '数据库血缘',
@@ -205,3 +205,171 @@ export const tableList: any[] = [
     recentRecognitionTime: '',
   },
 ];
+export const tableList1: any[] = [
+  {
+    businessId: '301',
+    name: '.data.idCard',
+  },
+  {
+    businessId: '120',
+    name: 'uuid',
+  },
+  {
+    businessId: '210',
+    name: 'maxRows',
+  },
+  {
+    businessId: '300',
+    name: 'valueSize',
+  },
+];
+export const tableList2: any[] = [
+  {
+    businessId: '301',
+    name: '.data.idCard',
+  },
+  {
+    businessId: '120',
+    name: 'uuid',
+  },
+  {
+    businessId: '210',
+    name: 'maxRows',
+  },
+  {
+    businessId: '300',
+    name: 'valueSize',
+  },
+];
+export const tableList3: any[] = [
+  {
+    businessId: '301',
+    fieldName: '.data.idCard',
+    name: '.data.idCard',
+    fieldType: '返回出参',
+    fieldCode: '.data.idCard',
+    APIName: '托管数据服务',
+    path: '敏感识别/共享工作区/test/托管系统',
+    APIModel: '托管模式',
+    sensitiveState: '非敏感',
+    policyState: '关',
+    level: 'G2',
+    sensitiveType: '钱包类型',
+    source: '人工标记',
+    markTime: '2023-12-08 15:27:07',
+    recentRecognitionTime: '2023-12-08 15:27:07',
+  },
+  {
+    businessId: '120',
+    fieldName: 'uuid',
+    name: 'uuid',
+    fieldType: '请求入参',
+    fieldCode: 'uuid',
+    APIName: '向导API',
+    path: '敏感识别/admin-个人工作区/独收/向导API',
+    APIModel: '向导模式',
+    sensitiveState: '非敏感',
+    policyState: '开',
+    level: 'G5',
+    sensitiveType: 'AccessKey ID',
+    source: '人工标记',
+    markTime: '2023-12-08 15:06:44',
+    recentRecognitionTime: '2023-12-08 15:06:44',
+  },
+  {
+    businessId: '210',
+    fieldName: 'maxRows',
+    name: 'maxRows',
+    fieldType: '请求入参',
+    fieldCode: 'maxRows',
+    APIName: 'sql_api',
+    path: '敏感识别/高级工作区/sql_api',
+    APIModel: 'SQL 模式',
+    sensitiveState: '敏感',
+    policyState: '开',
+    level: 'G2',
+    sensitiveType: '钱包类型',
+    source: '人工标记',
+    markTime: '2023-12-08 15:48:56',
+    recentRecognitionTime: '2023-12-08 15:48:56',
+  },
+  {
+    businessId: '300',
+    fieldName: 'valueSize',
+    name: 'valueSize',
+    fieldType: '返回出参',
+    fieldCode: 'valueSize',
+    APIName: 'sql_api',
+    path: '敏感识别/高级工作区/sql_api',
+    APIModel: 'SQL 模式',
+    sensitiveState: '非敏感',
+    policyState: '关',
+    level: '-',
+    sensitiveType: '',
+    source: '数据库血缘',
+    markTime: '',
+    recentRecognitionTime: '',
+  },
+];
+export const ruleTtableList: any[] = [
+  {
+    businessId: 1,
+    name: 'ip地址',
+    describe: '-------',
+    sensitiveType: 'ip地址',
+    level: 'G2',
+    owner: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+  {
+    businessId: 2,
+    name: '军官证',
+    describe: '-------',
+    sensitiveType: '军官证',
+    level: 'G2',
+    owner: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+  {
+    businessId: 3,
+    name: '手机号码（美国）',
+    describe: '-------',
+    sensitiveType: '固定电话',
+    level: 'G3',
+    owner: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+  {
+    businessId: 4,
+    name: '身份证（中国香港）',
+    describe: '-------',
+    sensitiveType: '身份证',
+    level: 'G5',
+    owner: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+  {
+    businessId: 5,
+    name: '身份证（马来西亚）',
+    describe: '-------',
+    sensitiveType: '身份证',
+    level: 'G5',
+    owner: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+  {
+    businessId: 6,
+    name: '中国内地护照',
+    describe: '-------',
+    sensitiveType: '护照号',
+    level: 'G2',
+    owner: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+];

src/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognition.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[] = [
@@ -33,8 +26,8 @@ export const searchFormSchema: FormSchema[] = [
     componentProps: {
       placeholder: '策略状态',
       options: [
-        { label: '敏感', value: '敏感' },
-        { label: '非敏感', value: '非敏感' },
+        { label: '开', value: '开' },
+        { label: '关', value: '关' },
       ],
     },
   },
@@ -76,75 +69,189 @@ export const columns: BasicColumn[] = [
     width: 180,
   },
 ];
+export const columnsTable1: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    edit: true,
+    editable: true,
+  },
+];
+export const columnsTable2: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    edit: true,
+    editable: true,
+  },
+];
+export const columnsTable3: BasicColumn[] = [
+  {
+    title: '规则名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '敏感类型',
+    dataIndex: 'sensitiveType',
+    width: 180,
+  },
+  {
+    title: '安全分级',
+    dataIndex: 'level',
+    width: 180,
+  },
+];
 
 /** 新增编辑表单字段*/
 export const formSchema: any[] = [
   {
-    field: 'sensitiveState',
-    label: '敏感状态',
-    component: 'Select',
+    field: 'policyState',
+    label: '策略状态',
+    component: 'RadioGroup',
     colProps: { span: 3 },
     componentProps: {
-      placeholder: '敏感状态',
+      placeholder: '策略状态',
+      defaultValue: '关',
       options: [
-        { label: '敏感', value: '敏感' },
-        { label: '非敏感', value: '非敏感' },
+        { label: '开', value: '开' },
+        { label: '关', value: '关' },
       ],
     },
-    rules: [
-      {
-        required: true,
-        message: '请选择敏感状态',
+  },
+  {
+    field: 'fieldRange',
+    label: '字段范围',
+    component: 'BasicTitle',
+    // colProps: { offset: 1 },
+    componentProps: {
+      style: {
+        fontsize: 16,
+        fontWeight: 'bold',
+        marginLeft: '25px',
       },
-    ],
+    },
   },
   {
-    field: 'sensitiveType',
-    label: '敏感类型',
+    field: 'requestParametersTitle',
+    label: '请求参数',
+    component: 'Input',
+    colProps: { lg: 2, md: 2 },
+    componentProps: {
+      readonly: true,
+      allowClear: false,
+      placeholder: ' ',
+      style: {
+        cursor: 'default',
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  {
+    field: 'requestParametersScannerRange',
+    label: '扫描状态',
     component: 'Select',
-    colProps: { span: 3 },
+    colProps: { lg: 4, md: 4 },
     componentProps: {
-      placeholder: '敏感类型',
+      placeholder: '扫描状态',
+      defaultValue: '全部不扫描',
       options: [
-        { label: '钱包类型', value: '钱包类型' },
-        { label: 'AccessKey ID', value: 'AccessKey ID' },
-        { label: '担保方式', value: '担保方式' },
+        { label: '全部扫描', value: '全部扫描' },
+        { label: '全部不扫描', value: '全部不扫描' },
       ],
     },
-    dynamicRules: ({ values }) => {
-      return values.flag === '敏感' ? [{ required: true, message: '说明必填' }] : [];
+  },
+  {
+    field: 'requestParameters',
+    component: 'Slot',
+    label: ' ',
+    labelWidth: 20,
+    slot: 'requestParameters',
+  },
+  {
+    field: 'returnParameterTitle',
+    label: '返回参数',
+    component: 'Input',
+    colProps: { lg: 2, md: 2 },
+    componentProps: {
+      readonly: true,
+      allowClear: false,
+      placeholder: ' ',
+      style: {
+        cursor: 'default',
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
     },
   },
-
   {
-    field: 'level',
-    label: '安全分级',
+    field: 'returnParameterScannerRange',
+    label: '扫描状态',
     component: 'Select',
-    colProps: { span: 3 },
+    colProps: { lg: 4, md: 4 },
     componentProps: {
-      placeholder: '安全分级',
+      placeholder: '扫描状态',
+      defaultValue: '全部扫描',
       options: [
-        { label: 'G1', value: 'G1' },
-        { label: 'G2', value: 'G2' },
-        { label: 'G3', value: 'G3' },
-        { label: 'G4', value: 'G4' },
-        { label: 'G5', value: 'G5' },
+        { label: '全部扫描', value: '全部扫描' },
+        { label: '全部不扫描', value: '全部不扫描' },
       ],
     },
-    dynamicRules: ({ values }) => {
-      return values.flag === '敏感' ? [{ required: true, message: '说明必填' }] : [];
-    },
   },
   {
-    field: 'markTime',
-    label: '标记时间',
-    component: 'Input',
+    field: 'returnParameter',
+    label: ' ',
+    labelWidth: 20,
+    component: 'Slot',
+    slot: 'returnParameter',
+  },
+  {
+    field: 'sensitiveRulesTitle',
+    label: '敏感规则',
+    component: 'BasicTitle',
+    // colProps: { offset: 1 },
     componentProps: {
       style: {
-        border: 'none',
-        backgroundColor: 'transparent',
+        fontsize: 16,
+        fontWeight: 'bold',
+        marginLeft: '25px',
       },
-      readOnly: true,
+    },
+  },
+  {
+    field: 'sensitiveRules',
+    component: 'Slot',
+    label: ' ',
+    labelWidth: 16,
+    slot: 'sensitiveRules',
+  },
+];
+
+export const rulerFormSchema1: any[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 9 },
+    componentProps: {
+      placeholder: '输入规则',
+    },
+  },
+  {
+    field: 'slot',
+    label: '',
+    slot: 'slot',
+  },
+];
+export const rulerFormSchema2: any[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    colProps: { span: 9 },
+    componentProps: {
+      placeholder: '输入规则',
     },
   },
 ];

src/views/dataService/APIDataSecurity/sensitiveRecognition/sensitiveRecognitionEdit.vue

 <template>
   <PageWrapper :title="title" class="content-padding" contentBackground @back="goBack">
-    <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>
+    <template #headerContent>
+      <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>
+        <a-button type="primary" class="save-button" @click="handleSave">保存</a-button>
       </div>
+    </template>
+    <div>
+      <BasicForm @register="registerForm" style="margin-top: 20px">
+        <template #requestParameters>
+          <BasicTable @register="registerTable1" title="例外参数">
+            <template #toolbar>
+              <a-button type="primary" @click="handleAddTable1">添加</a-button>
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <TableAction
+                  :actions="[
+                    {
+                      color: 'error',
+                      label: '删除',
+                      popConfirm: {
+                        title: '是否确认删除',
+                        placement: 'left',
+                        confirm: handleDelete.bind(null, record),
+                      },
+                    },
+                    {
+                      label: '移动',
+                    },
+                  ]"
+                />
+              </template>
+            </template>
+          </BasicTable>
+        </template>
+        <template #returnParameter>
+          <BasicTable @register="registerTable2" title="例外参数">
+            <template #toolbar>
+              <a-button type="primary" @click="handleAddTable2">添加</a-button>
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <TableAction
+                  :actions="[
+                    {
+                      color: 'error',
+                      label: '删除',
+                      popConfirm: {
+                        title: '是否确认删除',
+                        placement: 'left',
+                        confirm: handleDelete.bind(null, record),
+                      },
+                    },
+                    {
+                      label: '移动',
+                    },
+                  ]"
+                />
+              </template>
+            </template>
+          </BasicTable>
+        </template>
+        <template #sensitiveRules>
+          <BasicTable @register="registerTable3">
+            <template #toolbar>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  width: 100%;
+                  height: 100%;
+                "
+              >
+                <div style="display: flex; flex-grow: 1; align-items: center">
+                  <Select
+                    v-model:value="sensitiveTypeValue"
+                    show-search
+                    placeholder="敏感类型"
+                    style="width: 200px; margin-right: 10px; margin-bottom: 10px"
+                    :default-active-first-option="false"
+                    :filter-option="false"
+                    :not-found-content="null"
+                    :options="sensitiveTypeOptions"
+                    @search="handleSearch"
+                  />
+                  <Select
+                    v-model:value="levelValue"
+                    show-search
+                    placeholder="安全分级"
+                    style="width: 200px; margin-right: 10px; margin-bottom: 10px"
+                    :default-active-first-option="false"
+                    :filter-option="false"
+                    :not-found-content="null"
+                    :options="levelOptions"
+                    @search="handleSearch"
+                  />
+                </div>
+                <a-button type="primary" :disabled="isUpdate === 'false'" @click="handleNewRules"
+                  >添加敏感规则</a-button
+                >
+              </div>
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'action'">
+                <TableAction
+                  :actions="[
+                    {
+                      color: 'error',
+                      label: '删除',
+                      popConfirm: {
+                        title: '是否确认删除',
+                        placement: 'left',
+                        confirm: handleDelete.bind(null, record),
+                      },
+                    },
+                    {
+                      label: '移动',
+                    },
+                  ]"
+                />
+              </template>
+            </template>
+          </BasicTable>
+        </template>
+      </BasicForm>
     </div>
-    <BasicForm @register="registerForm" />
+    <AddSensitiveRulersModal @register="registerModal"/>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref, unref, onMounted } from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { ref, onMounted, reactive } from 'vue';
   import { BasicForm, useForm } from '@/components/Form';
-  import { formSchema } from './sensitiveRecognition.data';
+  import {
+    columnsTable1,
+    columnsTable2,
+    columnsTable3,
+    formSchema,
+  } from './sensitiveRecognition.data';
   import Icon from '@/components/Icon/Icon.vue';
   import { useMessage } from '@/hooks/web/useMessage';
   import { PageWrapper } from '@/components/Page';
+  import { useRoute } from 'vue-router';
+  import {
+    tableList,
+    tableList1,
+    tableList2,
+    tableList3,
+  } from '@/views/dataService/APIDataSecurity/sensitiveRecognition/mock';
+  import { router } from '@/router';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { Select } from 'ant-design-vue';
+  import AddSensitiveRulersModal from '@/views/dataService/APIDataSecurity/sensitiveRecognition/addSensitiveRulersModal.vue';
+  import { useModal } from '@/components/Modal';
 
+  const route = useRoute();
   const emit = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
+  const { createMessage, createConfirm } = useMessage();
+  const [registerModal, { openModal }] = useModal();
   const isUpdate = ref(true);
   const rowId = ref('');
-  const formParams = ref('');
+  const formParams = reactive({ fieldName: '', path: '' });
   const title = ref();
+  let tableData1 = ref(tableList1);
+  let tableData2 = ref(tableList2);
+  let tableData3 = ref(tableList3);
+  // 定义敏感类型选择器
+  const sensitiveTypeOptions = [
+    { label: 'IP地址', value: 'IP地址' },
+    { label: '姓名', value: '姓名' },
+    { label: '金额（账号）', value: '金额（账号）' },
+    { label: '存储卡', value: '存储卡' },
+    { label: '信用卡', value: '信用卡' },
+  ];
+
+  // 定义安全分级选择器
+  const levelOptions = [
+    { label: 'G1', value: 'G1' },
+    { label: 'G2', value: 'G2' },
+    { label: 'G3', value: 'G3' },
+    { label: 'G4', value: 'G4' },
+    { label: 'G5', value: 'G5' },
+  ];
+  const sensitiveTypeValue = ref();
+  const levelValue = ref();
+  const [registerTable1, { reload1, setColumns1 }] = useTable({
+    api: async () => {
+      // console.log(params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData1.value.length,
+        code: '',
+        message: '',
+        data: tableData1.value,
+      };
+      return { ...response };
+    },
+    rowKey: 'id',
+    customRow: customRow,
+    columns: columnsTable1,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    scroll: { y: 300 },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+  const [registerTable2, { reload2, setColumns2 }] = useTable({
+    api: async () => {
+      // console.log(params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData2.value.length,
+        code: '',
+        message: '',
+        data: tableData2.value,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'id',
+    customRow: customRow,
+    columns: columnsTable2,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    scroll: { y: 300 },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+  const [registerTable3, { reload }] = useTable({
+    api: async () => {
+      // console.log(params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData3.value.length,
+        code: '',
+        message: '',
+        data: tableData3.value,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'id',
+    columns: columnsTable3,
+    // formConfig: {
+    //   // labelWidth: 10,
+    //   showActionButtonGroup: false,
+    //   schemas: sensitiveRulersSearchFormSchema,
+    //   autoSubmitOnEnter: true,
+    // },
+    // // customRow: customRow,
+    // useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    scroll: { y: 300 },
+    handleSearchInfoFn(info) {
+      // console.log('handleSearchInfoFn', info);
+      // tableData3.value = tableList.filter(
+      //   (item) =>
+      //     (info.name === undefined || item.name.includes(info.name))
+      // );
+      // console.log('tableData', tableData.value);
+      return info;
+    },
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
-  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+  const [registerForm, { setFieldsValue, updateSchema, resetFields }] = useForm({
     labelWidth: 100,
     baseColProps: { lg: 24, md: 24 },
     schemas: formSchema,
@@ -36,35 +309,138 @@
       span: 23,
     },
   });
-
   onMounted(() => {
-    // route.query.id
-    // resetFields();
-    // isUpdate.value = data.isUpdate;
-    // if (data.isUpdate === false) {
-    //   title.value = '查看分类分级';
-    //   updateSchema([
-    //     { field: 'sensitiveState', required: false, componentProps: { disabled: true } },
-    //     { field: 'sensitiveType', required: false, componentProps: { disabled: true } },
-    //     { field: 'level', required: false, componentProps: { disabled: true } },
-    //   ]);
-    // } else {
-    //   title.value = '编辑分类分级';
-    //   updateSchema([
-    //     { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
-    //     { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
-    //     { field: 'level', required: true, componentProps: { disabled: false } },
-    //   ]);
-    // }
-    // formParams.value = data.record;
-    // setFieldsValue({
-    //   ...data.record,
-    // });
+    const data = tableList.filter((item) => item.businessId === route.query.id);
+    // formParams.value = data[0];
+    Object.assign(formParams, data[0]); // 使用 Object.assign 赋值
+    resetFields();
+    isUpdate.value = route.query.isUpdate;
+    if (isUpdate.value === 'false') {
+      title.value = '查看分类分级';
+      updateSchema([
+        { field: 'policyState', required: false, componentProps: { disabled: true } },
+        {
+          field: 'returnParameterScannerRange',
+          required: false,
+          componentProps: { disabled: true },
+        },
+        {
+          field: 'requestParametersScannerRange',
+          required: false,
+          componentProps: { disabled: true },
+        },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'policyState', required: true, componentProps: { disabled: false } },
+        {
+          field: 'returnParameterScannerRange',
+          required: true,
+          componentProps: { disabled: false },
+        },
+        {
+          field: 'requestParametersScannerRange',
+          required: true,
+          componentProps: { disabled: false },
+        },
+      ]);
+    }
+    setFieldsValue({
+      ...data[0],
+    });
   });
+
+  function handleDelete(record) {
+    // console.log('record', record);
+    createMessage.success('删除成功!');
+  }
+
+  function handleAddTable1() {
+    const data = {
+      name: '',
+    };
+    tableData1.value.push(data);
+    reload();
+  }
+
+  function handleAddTable2() {
+    const data = {
+      name: '',
+    };
+    tableData2.value.push(data);
+    reload();
+  }
+
+  let source = 0; // 源目标数据序号
+  let target = 0; // 目标数据序号
+
+  function customRow(record, index) {
+    // console.log(record, index); // 这里输出是表格全部的数据
+    return {
+      props: {
+        // draggable: 'true'
+      },
+      style: {
+        cursor: 'pointer',
+      },
+      // 鼠标移入
+      onMouseenter: (event) => {
+        // 兼容IE
+        let ev = event || window.event;
+        ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
+      },
+      // 开始拖拽
+      onDragstart: (event) => {
+        // 兼容IE
+        let ev = event || window.event;
+        // 阻止冒泡
+        ev.stopPropagation();
+        // 得到源目标数据序号
+        source = index;
+        // console.log(record, index, 'source');
+      },
+      // 拖动元素经过的元素
+      onDragover: (event) => {
+        // 兼容 IE
+        let ev = event || window.event;
+        // 阻止默认行为
+        ev.preventDefault();
+      },
+      // 鼠标松开
+      onDrop: (event) => {
+        // 兼容IE
+        let ev = event || window.event;
+        // 阻止冒泡
+        ev.stopPropagation();
+        // 得到目标数据序号
+        target = index;
+        // 这里就是让数据位置互换，让视图更新
+        [tableData.value[source], tableData.value[target]] = [
+          tableData.value[target],
+          tableData.value[source],
+        ];
+        // console.log(record, index, 'target', source, target);
+      },
+    };
+  }
+
+  function goBack() {
+    router.back();
+  }
+  function handleSave() {
+    createMessage.success('保存成功'), router.back();
+  }
+
+  function handleNewRules() {
+    openModal(true, {
+      // isUpdate: false,
+    });
+  }
 </script>
 <style lang="scss" scoped>
   .modal_top {
-    padding: 0 0 20px 20px;
+    padding: 20px 0 20px 20px;
     display: flex;
     align-items: center;
     .title {
@@ -72,4 +448,10 @@
       font-weight: 500;
     }
   }
+  .save-button {
+    position: absolute; /* 绝对定位 */
+    top: 15px; /* 顶部对齐 */
+    right: 10px; /* 右侧对齐 */
+    margin: 10px; /* 可选：增加一些边缘间距 */
+  }
 </style>