數據服務-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: '输入规则',
     },
   },
 ];