Skip to content

B
bigDataSystem
Commit f51c6e20 authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改数据服务-接入安全页面

parent 5894fe8e
Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 238 deletions
src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModal.vue
View file @ f51c6e20
...@@ -6,13 +6,13 @@ ...@@ -6,13 +6,13 @@
:title="title" :title="title"
@ok="handleSubmit" @ok="handleSubmit"
> >
<div class="modal_top"> <!-- <div class="modal_top">
<div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div> <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
<div> <div>
<div class="title">{{ formParams.fieldName }}</div> <div class="title">{{ formParams.fieldName }}</div>
<div class="path">{{ formParams.path }}</div> <div class="path">{{ formParams.path }}</div>
</div> </div>
</div> </div> -->
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</BasicModal> </BasicModal>
</template> </template>
...@@ -46,18 +46,18 @@ ...@@ -46,18 +46,18 @@
resetFields(); resetFields();
isUpdate.value = data.isUpdate; isUpdate.value = data.isUpdate;
if (data.isUpdate === false) { if (data.isUpdate === false) {
title.value = '查看分类分级'; title.value = '新增分类分级';
updateSchema([ updateSchema([
{ field: 'sensitiveState', required: false, componentProps: { disabled: true } }, { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: false, componentProps: { disabled: true } }, { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
{ field: 'level', required: false, componentProps: { disabled: true } }, { field: 'level', required: true, componentProps: { disabled: false } },
]); ]);
} else { } else {
title.value = '编辑分类分级'; title.value = '编辑分类分级';
updateSchema([ updateSchema([
{ field: 'sensitiveState', required: true, componentProps: { disabled: false } }, { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: true, componentProps: { disabled: false } }, { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
{ field: 'level', required: true, componentProps: { disabled: false } }, { field: 'level', required: false, componentProps: { disabled: false } },
]); ]);
} }
setModalProps({ confirmLoading: false }); setModalProps({ confirmLoading: false });
...@@ -84,9 +84,10 @@ ...@@ -84,9 +84,10 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.modal_top { .modal_top {
padding: 0 0 20px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0 20px 20px;
.title { .title {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
......
src/views/dataService/APIIntegrationSecurity/AccessControl/classificationAndGrading.data.ts
View file @ f51c6e20
...@@ -15,25 +15,16 @@ export const searchFormSchema: FormSchema[] = [ ...@@ -15,25 +15,16 @@ export const searchFormSchema: FormSchema[] = [
component: 'Input', component: 'Input',
colProps: { span: 4 }, colProps: { span: 4 },
componentProps: { componentProps: {
placeholder: '请输入字段code进行搜索', placeholder: '搜索IP',
}, },
}, },
{ {
field: 'APIName', field: 'protectAction',
label: ' ',
component: 'Input',
colProps: { span: 4 },
componentProps: {
placeholder: '输入API名称进行搜索',
},
},
{
field: 'APIModel',
label: ' ', label: ' ',
component: 'Select', component: 'Select',
colProps: { span: 2 }, colProps: { span: 2 },
componentProps: { componentProps: {
placeholder: 'API模式', placeholder: '保护动作',
options: [ options: [
{ label: 'SQL模式', value: 'SQL模式' }, { label: 'SQL模式', value: 'SQL模式' },
{ label: '托管模式', value: '托管模式' }, { label: '托管模式', value: '托管模式' },
...@@ -41,128 +32,42 @@ export const searchFormSchema: FormSchema[] = [ ...@@ -41,128 +32,42 @@ export const searchFormSchema: FormSchema[] = [
], ],
}, },
}, },
{
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[] = [ export const columns: BasicColumn[] = [
{ {
title: '字段名', title: 'IP',
dataIndex: 'fieldName', dataIndex: 'ip',
width: 120, width: 120,
fixed: 'left',
}, },
{ {
title: '字段类型', title: '保护动作',
dataIndex: 'fieldType', dataIndex: 'protectAction',
width: 120, width: 120,
}, fixed: 'left',
{
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[] = [ export const formSchema: any[] = [
{ {
field: 'sensitiveState', field: 'ruleType',
label: '敏感状态', label: '规则类型',
component: 'Select', component: 'Select',
colProps: { span: 3 }, colProps: { span: 3 },
componentProps: { componentProps: {
placeholder: '敏感状态', placeholder: '规则类型',
options: [ options: [
{ label: '敏感', value: '敏感' }, { label: '默认', value: '默认' },
{ label: '非敏感', value: '非敏感' }, { label: '规则类型1', value: '规则类型1' },
], ],
}, },
rules: [ rules: [
{ {
required: true, required: true,
message: '请选择敏感状态', message: '请选择规则类型',
}, },
], ],
}, },
...@@ -179,36 +84,12 @@ export const formSchema: any[] = [ ...@@ -179,36 +84,12 @@ export const formSchema: any[] = [
{ label: '担保方式', value: '担保方式' }, { 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', field: 'ip',
label: '标记时间', label: 'IP',
component: 'Input', component: 'Input',
componentProps: { componentProps: {
allowClear: false,
style: { style: {
border: 'none', border: 'none',
backgroundColor: 'transparent', backgroundColor: 'transparent',
......
src/views/dataService/APIIntegrationSecurity/AccessControl/index.vue
View file @ f51c6e20
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable" :searchInfo="searchInfo"> <Tabs v-model:value="activeKey" @change="handleTabChange" class="ml-5">
<template #toolbar> <Tabs.TabPane key="1" tab="默认"
<a-button type="primary" @click="handleImport">批量导入</a-button> ><BasicTable @register="registerTable" :searchInfo="searchInfo">
</template> <template #toolbar>
<template #bodyCell="{ column, record }"> <a-button type="primary" @click="handleCreate">新增</a-button>
<template v-if="column.key === 'action'"> <a-button
<TableAction type="error"
:actions="[ @click="handleDeleteBatch"
{ :disabled="getRowSelection().selectedRowKeys.length <= 0"
icon: 'material-symbols:pageview-outline-rounded', >删除选中</a-button
label: '查看', >
onClick: handleEdit.bind(null, record, false), </template>
}, <template #bodyCell="{ column, record }">
{ <template v-if="column.key === 'action'">
icon: 'clarity:note-edit-line', <TableAction
label: '编辑', :actions="[
onClick: handleEdit.bind(null, record, true), {
}, icon: 'clarity:note-edit-line',
]" label: '编辑',
/> onClick: handleEdit.bind(null, record, true),
</template> },
</template> {
</BasicTable> 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="2" tab="域名" />
<Tabs.TabPane key="3" tab="特征流量" />
<Tabs.TabPane key="4" tab="URL" />
<Tabs.TabPane key="5" tab="API" />
</Tabs>
<ClassificationAndGradingModal @register="registerModal" @success="handleSuccess" /> <ClassificationAndGradingModal @register="registerModal" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
...@@ -32,14 +50,16 @@ ...@@ -32,14 +50,16 @@
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { Modal, Tabs } from 'ant-design-vue';
import { columns, searchFormSchema } from './classificationAndGrading.data';
import { tableList } from './mock'; import { tableList } from './mock';
import { useRoute, onBeforeRouteLeave } from 'vue-router'; import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { router } from '@/router'; import { router } from '@/router';
import ClassificationAndGradingModal from '@/views/dataService/APIDataSecurity/classificationAndGrading/ClassificationAndGradingModal.vue'; import ClassificationAndGradingModal from '@/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModal.vue';
import { metadataData } from '@/views/metadata/metadataData'; import {
columns,
searchFormSchema,
} from '@/views/dataService/APIIntegrationSecurity/AccessControl/classificationAndGrading.data';
import { t } from '@/hooks/web/useI18n';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const route = useRoute(); const route = useRoute();
...@@ -47,7 +67,16 @@ ...@@ -47,7 +67,16 @@
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal(); const [registerImport, { openModal: openImportModal }] = useModal();
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({ /** 切换标签页 */
const activeKey = ref('1');
const handleTabChange = (key) => {
console.log(`切换到标签页${key}`);
};
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '分类分级结果', title: '分类分级结果',
api: async (params) => { api: async (params) => {
// console.log(params); // console.log(params);
...@@ -65,6 +94,8 @@ ...@@ -65,6 +94,8 @@
}, },
rowKey: 'id', rowKey: 'id',
columns, columns,
rowSelection: true,
formConfig: { formConfig: {
// labelWidth: 10, // labelWidth: 10,
schemas: searchFormSchema, schemas: searchFormSchema,
...@@ -75,25 +106,10 @@ ...@@ -75,25 +106,10 @@
showTableSetting: false, showTableSetting: false,
showIndexColumn: false, showIndexColumn: false,
bordered: true, 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: { actionColumn: {
width: 160, width: 120,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
// slots: { customRender: 'action' },
}, },
}); });
/** 新增按钮*/ /** 新增按钮*/
...@@ -114,7 +130,10 @@ ...@@ -114,7 +130,10 @@
/** 重置密码弹窗确定按钮*/ /** 重置密码弹窗确定按钮*/
/** 删除按钮*/ /** 删除按钮*/
function handleDelete(record: Recordable) { function handleDelete(record: Recordable) {
console.log(record); tableData.value.splice(
tableData.value.findIndex((item) => item.businessId === record.businessId),
1,
);
createMessage.success('删除成功!'); createMessage.success('删除成功!');
reload(); reload();
} }
...@@ -131,7 +150,43 @@ ...@@ -131,7 +150,43 @@
reload(); reload();
} }
} }
/**批量删除*/
function handleDeleteBatch() {
Modal.confirm({
title: '确认删除',
content: '是否删除选中的访问规则?',
onOk: () => {
const rowSelection = getRowSelection().selectedRowKeys;
for (let i = 0; i < rowSelection.length; i++) {
tableData.value.splice(
tableData.value.findIndex((item) => item.businessId === rowSelection[i]),
1,
);
}
createMessage.success('删除成功!');
rowSelection.length = 0;
reload();
},
});
}
/** 移动*/
function handleMoveSuccess({ isMove, values }) {
const rowSelection = getRowSelection().selectedRowKeys;
if (rowSelection.length > 0) {
//批量移动
for (let i = 0; i < rowSelection.length; i++) {
const result = updateTableDataRecord(values[i].institutionId, values[i]);
}
} else {
//单个移动
const result = updateTableDataRecord(values.businessId, values);
}
reload();
}
/** 折叠操作列内的事件:启用事件*/
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
}
let source = 0; // 源目标数据序号 let source = 0; // 源目标数据序号
let target = 0; // 目标数据序号 let target = 0; // 目标数据序号
// Table拖拽 // Table拖拽
...@@ -186,5 +241,8 @@ ...@@ -186,5 +241,8 @@
}, },
}; };
} }
onMounted(() => {});
onMounted(() => {
tableData.value = tableList;
});
</script> </script>
src/views/dataService/APIIntegrationSecurity/AccessControl/mock.ts
View file @ f51c6e20
import { idText } from 'typescript';
export const tableList: any[] = [ export const tableList: any[] = [
{ {
id: '1',
businessId: '301', businessId: '301',
fieldName: '.data.idCard', ip: '127.0.0.1',
fieldType: '返回出参', protectAction: '阻断',
fieldCode: '.data.idCard',
APIName: '托管数据服务',
path: '共享工作区/test/托管系统',
APIModel: '托管模式',
sensitiveState: '非敏感',
level: 'G2',
sensitiveType: '钱包类型',
source: '人工标记',
markTime: '2023-12-08 15:27:07', markTime: '2023-12-08 15:27:07',
}, },
{ {
businessId: '120', id: '2',
fieldName: 'uuid', businessId: '302',
fieldType: '请求入参', ip: '127.0.0.1',
fieldCode: 'uuid', protectAction: '阻断',
APIName: '向导API',
path: '独收/向导API',
APIModel: '向导模式',
sensitiveState: '非敏感',
level: 'G5',
sensitiveType: 'AccessKey ID',
source: '人工标记',
markTime: '2023-12-08 15:06:44', markTime: '2023-12-08 15:06:44',
}, },
{ {
businessId: '210', id: '3',
fieldName: 'maxRows', businessId: '303',
fieldType: '请求入参', ip: '127.0.0.1',
fieldCode: 'maxRows', protectAction: '阻断',
APIName: 'sql_api',
path: 'sql_api',
APIModel: 'SQL 模式',
sensitiveState: '敏感',
level: 'G2',
sensitiveType: '钱包类型',
source: '人工标记',
markTime: '2023-12-08 15:48:56', markTime: '2023-12-08 15:48:56',
}, },
{ {
businessId: '300', id: '4',
fieldName: 'valueSize', businessId: '304',
fieldType: '返回出参', ip: '127.0.0.1',
fieldCode: 'valueSize', protectAction: '阻断',
APIName: 'sql_api', markTime: '2023-12-08 15:27:07',
path: 'sql_api',
APIModel: 'SQL 模式',
sensitiveState: '非敏感',
level: '-',
sensitiveType: '',
source: '数据库血缘',
markTime: '',
}, },
]; ];
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment