新增API接入安全页面

src/views/dataQuality/dataSheet/task/index.vue

@@ -149,6 +149,7 @@
   const filterStore = useFilterStore();
   const route = useRoute();
   const go = useGo();
+  const isWhite = ref(false);
   const isOnline = ref(true);
   const isOffline = ref(false);
   // const isRunning = ref(false);
@@ -261,7 +262,7 @@
   }
   /** 查看报告 正在做 应为跳转到报告页面*/
   function handleQualityTaskRunLog() {
-    go('/dataQuality/dataSheet/task/viewTaskOperation');
+    go('/dataQuality/dataSheet/task/viewTaskOperation', false);
   }
   /** 添加检查范围*/
   function handleAddCheckRangePlus() {

src/views/dataQuality/dataSheet/task/qualityReport/detailModal.vue

@@ -55,7 +55,7 @@
   const { createMessage } = useMessage();
   const title = ref();
   const tableData = ref([]);
-  const isWhite = ref(true);
+  const isWhite = ref(false);
   const [
     registerWhiteListModal,
     { setModalProps: setWhiteListModalProps, openModal: openWhiteListModal },
@@ -132,5 +132,6 @@
 
   onMounted(() => {
     tableData.value = detailHookData;
+    isWhite.value = false;
   });
 </script>

src/views/dataQuality/dataSheet/task/qualityReport/index.vue

@@ -73,7 +73,7 @@
   import { columns, columnsRight } from './data';
   import { Data, DataRight, searchFormSchema, formSchemaRight } from './kinshipOperationsData';
   import modEditModal from './modEditModal.vue';
-  import ruleModal from './ruleModal.vue';
+  import ruleModal from './addRuleModal.vue';
   import detailModal from './detailModal.vue';
   import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
   import { formSchema } from '../mainBody.data';

src/views/dataQuality/dataSheet/task/viewTaskOperation/detailModal.vue

@@ -37,6 +37,7 @@
   import { onMounted, ref } from 'vue';
   import { BasicModal, useModalInner, useModal } from '@/components/Modal';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { useRoute } from 'vue-router';
   import { BasicTable, useTable } from '@/components/Table';
   import Description from '@/components/Description/src/Description.vue';
   import { detailHookColumns, KafkaColumns, refundSchema } from './data';
@@ -53,6 +54,7 @@
   const title = ref();
   const tableData = ref([]);
   const isWhite = ref(true);
+  const route = useRoute();
   const [
     registerWhiteListModal,
     { setModalProps: setWhiteListModalProps, openModal: openWhiteListModal },
@@ -119,7 +121,8 @@
   function handleAddWhite() {
     openWhiteListModal(true, {});
   }
-  onMounted(() => {
+  onMounted((props) => {
     tableData.value = detailHookData;
+    isWhite.value = Boolean(route.params[0]);
   });
 </script>

src/views/dataQuality/dataSheet/task/viewTaskOperation/index.vue

@@ -66,12 +66,13 @@
   <detail-modal @register="registerDetailModal" />
 </template>
 <script lang="ts" setup>
-  import { reactive } from 'vue';
+  import { onMounted, reactive, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { BasicForm, useForm } from '@/components/Form';
   import { PageWrapper } from '@/components/Page';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
+  import { useRoute } from 'vue-router';
   import { Tag, Switch } from 'ant-design-vue';
   import { columns, columnsRight } from './data';
   import { Data, DataRight, searchFormSchema, formSchemaRight } from './kinshipOperationsData';
@@ -87,8 +88,11 @@
   const state = reactive({
     checked1: true,
   });
+
   const { createMessage, createConfirm } = useMessage();
   const [registerModal, { openModal }] = useModal();
+  const route = useRoute();
+  const isWhite = route.params[0];
   const [registerRuleModal, { openModal: openRuleModal }] = useModal();
   const [registerDetailModal, { openModal: openDetailModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
@@ -175,6 +179,7 @@
   function handleDetail() {
     openDetailModal(true, {
       title: '问题规则',
+      // isWhite: isWhite,
     });
   }
   //导出报告
@@ -184,4 +189,8 @@
     const data = await exportRoleList(params);
     downloadByData(data, '报告' + '.xlsx');
   }
+  onMounted(() => {
+    const isWhite = route.params[0];
+    console.log(isWhite); // 这里可以访问传递过来的 boolean 值
+  });
 </script>

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModal.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: 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 } },
+      ]);
+    }
+    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 {
+    padding: 0 0 20px 20px;
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/classificationAndGrading.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: 'fieldCode',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '请输入字段code进行搜索',
+    },
+  },
+  {
+    field: 'APIName',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '输入API名称进行搜索',
+    },
+  },
+  {
+    field: 'APIModel',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 2 },
+    componentProps: {
+      placeholder: 'API模式',
+      options: [
+        { label: 'SQL模式', value: 'SQL模式' },
+        { label: '托管模式', value: '托管模式' },
+        { label: '向导模式', value: '向导模式' },
+      ],
+    },
+  },
+  {
+    field: 'sensitiveState',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 2 },
+    componentProps: {
+      placeholder: '敏感状态',
+      options: [
+        { label: '敏感', value: '敏感' },
+        { label: '非敏感', value: '非敏感' },
+      ],
+    },
+  },
+  {
+    field: 'level',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 2 },
+    componentProps: {
+      placeholder: '安全分级',
+      options: [
+        { label: 'G1', value: 'G1' },
+        { label: 'G2', value: 'G2' },
+        { label: 'G3', value: 'G3' },
+        { label: 'G4', value: 'G4' },
+        { label: 'G5', value: 'G5' },
+      ],
+    },
+  },
+  {
+    field: 'sensitiveType',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感类型',
+      options: [
+        { label: '钱包类型', value: '钱包类型' },
+        { label: 'AccessKey ID', value: 'AccessKey ID' },
+        { label: '担保方式', value: '担保方式' },
+      ],
+    },
+  },
+];
+
+/** 列表展示字段*/
+export const columns: BasicColumn[] = [
+  {
+    title: '字段名',
+    dataIndex: 'fieldName',
+    width: 120,
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'fieldType',
+    width: 120,
+  },
+  {
+    title: '字段code',
+    dataIndex: 'fieldCode',
+    width: 120,
+  },
+  {
+    title: 'API名称',
+    dataIndex: 'APIName',
+    width: 140,
+  },
+  {
+    title: '路径',
+    dataIndex: 'path',
+    width: 140,
+  },
+  {
+    title: 'API模式',
+    dataIndex: 'APIModel',
+    width: 140,
+  },
+  {
+    title: '敏感状态',
+    dataIndex: 'sensitiveState',
+    width: 180,
+  },
+  {
+    title: '安全分级',
+    dataIndex: 'level',
+    width: 180,
+  },
+  {
+    title: '敏感类型',
+    dataIndex: 'sensitiveType',
+    width: 180,
+  },
+  {
+    title: '来源',
+    dataIndex: 'source',
+    width: 180,
+  },
+  {
+    title: '标记时间',
+    dataIndex: 'markTime',
+    width: 180,
+  },
+];
+
+/** 新增编辑表单字段*/
+export const formSchema: any[] = [
+  {
+    field: 'sensitiveState',
+    label: '敏感状态',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感状态',
+      options: [
+        { label: '敏感', value: '敏感' },
+        { label: '非敏感', value: '非敏感' },
+      ],
+    },
+    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: '担保方式' },
+      ],
+    },
+    dynamicRules: ({ values }) => {
+      return values.flag === '敏感' ? [{ required: true, message: '说明必填' }] : [];
+    },
+  },
+
+  {
+    field: 'level',
+    label: '安全分级',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '安全分级',
+      options: [
+        { label: 'G1', value: 'G1' },
+        { label: 'G2', value: 'G2' },
+        { label: 'G3', value: 'G3' },
+        { label: 'G4', value: 'G4' },
+        { label: 'G5', value: 'G5' },
+      ],
+    },
+    dynamicRules: ({ values }) => {
+      return values.flag === '敏感' ? [{ required: true, message: '说明必填' }] : [];
+    },
+  },
+  {
+    field: 'markTime',
+    label: '标记时间',
+    component: 'Input',
+    componentProps: {
+      allowClear: false,
+      style: {
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+      readOnly: true,
+    },
+  },
+];

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

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary" @click="handleImport">批量导入</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'material-symbols:pageview-outline-rounded',
+                label: '查看',
+                onClick: handleEdit.bind(null, record, false),
+              },
+              {
+                icon: 'clarity:note-edit-line',
+                label: '编辑',
+                onClick: handleEdit.bind(null, record, true),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <ClassificationAndGradingModal @register="registerModal" @success="handleSuccess" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+
+  import { columns, searchFormSchema } from './classificationAndGrading.data';
+  import { tableList } from './mock';
+
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { router } from '@/router';
+  import ClassificationAndGradingModal from '@/views/dataService/APIDataSecurity/classificationAndGrading/ClassificationAndGradingModal.vue';
+  import { metadataData } from '@/views/metadata/metadataData';
+
+  const { createMessage } = useMessage();
+  const route = useRoute();
+  let tableData = ref(tableList);
+  const [registerModal, { openModal }] = useModal();
+  const [registerImport, { openModal: openImportModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = 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,
+    formConfig: {
+      // labelWidth: 10,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    customRow: customRow,
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      // console.log('handleSearchInfoFn', info);
+      tableData.value = tableList.filter(
+        (item) =>
+          (info.fieldCode === undefined || item.fieldCode.includes(info.fieldCode)) &&
+          (info.APIName === undefined || item.APIName.includes(info.APIName)) &&
+          (info.APIModel === undefined || item.APIModel === info.APIModel) &&
+          (info.sensitiveState === undefined || item.sensitiveState === info.sensitiveState) &&
+          (info.sensitiveType === undefined || item.sensitiveType === info.sensitiveType) &&
+          (info.level === undefined || item.level === info.level),
+      );
+      // console.log('tableData', tableData.value);
+      return info;
+    },
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+  /** 新增按钮*/
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  /** 编辑按钮*/
+  function handleEdit(record: Recordable, isUpdate) {
+    console.log(isUpdate);
+    openModal(true, {
+      record,
+      isUpdate: isUpdate,
+    });
+  }
+
+  /** 重置密码弹窗确定按钮*/
+  /** 删除按钮*/
+  function handleDelete(record: Recordable) {
+    console.log(record);
+    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();
+    }
+  }
+
+  let source = 0; // 源目标数据序号
+  let target = 0; // 目标数据序号
+  // Table拖拽
+  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;
+        // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
+        console.log(tableData);
+        // [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
+        const temp = ref();
+        temp.value = tableData.value[source];
+        tableData.value[source] = tableData.value[target];
+        tableData.value[target] = temp.value;
+        console.log(record, index, 'target', source, target);
+      },
+    };
+  }
+  onMounted(() => {});
+</script>

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

+export const tableList: any[] = [
+  {
+    businessId: '301',
+    fieldName: '.data.idCard',
+    fieldType: '返回出参',
+    fieldCode: '.data.idCard',
+    APIName: '托管数据服务',
+    path: '共享工作区/test/托管系统',
+    APIModel: '托管模式',
+    sensitiveState: '非敏感',
+    level: 'G2',
+    sensitiveType: '钱包类型',
+    source: '人工标记',
+    markTime: '2023-12-08 15:27:07',
+  },
+  {
+    businessId: '120',
+    fieldName: 'uuid',
+    fieldType: '请求入参',
+    fieldCode: 'uuid',
+    APIName: '向导API',
+    path: '独收/向导API',
+    APIModel: '向导模式',
+    sensitiveState: '非敏感',
+    level: 'G5',
+    sensitiveType: 'AccessKey ID',
+    source: '人工标记',
+    markTime: '2023-12-08 15:06:44',
+  },
+  {
+    businessId: '210',
+    fieldName: 'maxRows',
+    fieldType: '请求入参',
+    fieldCode: 'maxRows',
+    APIName: 'sql_api',
+    path: 'sql_api',
+    APIModel: 'SQL 模式',
+    sensitiveState: '敏感',
+    level: 'G2',
+    sensitiveType: '钱包类型',
+    source: '人工标记',
+    markTime: '2023-12-08 15:48:56',
+  },
+  {
+    businessId: '300',
+    fieldName: 'valueSize',
+    fieldType: '返回出参',
+    fieldCode: 'valueSize',
+    APIName: 'sql_api',
+    path: 'sql_api',
+    APIModel: 'SQL 模式',
+    sensitiveState: '非敏感',
+    level: '-',
+    sensitiveType: '',
+    source: '数据库血缘',
+    markTime: '',
+  },
+];