Skip to content

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

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

parent 5894fe8e
Show 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 @@
:title="title"
@ok="handleSubmit"
>
<div class="modal_top">
<!-- <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>
</div> -->
<BasicForm @register="registerForm" />
</BasicModal>
</template>
......@@ -46,18 +46,18 @@
resetFields();
isUpdate.value = data.isUpdate;
if (data.isUpdate === false) {
title.value = '查看分类分级';
title.value = '新增分类分级';
updateSchema([
{ field: 'sensitiveState', required: false, componentProps: { disabled: true } },
{ field: 'sensitiveType', required: false, componentProps: { disabled: true } },
{ field: 'level', required: false, componentProps: { disabled: true } },
{ 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: true, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: true, componentProps: { disabled: false } },
{ field: 'level', required: true, componentProps: { disabled: false } },
{ field: 'sensitiveState', required: false, componentProps: { disabled: false } },
{ field: 'sensitiveType', required: false, componentProps: { disabled: false } },
{ field: 'level', required: false, componentProps: { disabled: false } },
]);
}
setModalProps({ confirmLoading: false });
......@@ -84,9 +84,10 @@
</script>
<style lang="scss" scoped>
.modal_top {
padding: 0 0 20px 20px;
display: flex;
align-items: center;
padding: 0 0 20px 20px;
.title {
font-size: 16px;
font-weight: 500;
......
src/views/dataService/APIIntegrationSecurity/AccessControl/classificationAndGrading.data.ts
View file @ f51c6e20
......@@ -15,25 +15,16 @@ export const searchFormSchema: FormSchema[] = [
component: 'Input',
colProps: { span: 4 },
componentProps: {
placeholder: '请输入字段code进行搜索',
placeholder: '搜索IP',
},
},
{
field: 'APIName',
label: ' ',
component: 'Input',
colProps: { span: 4 },
componentProps: {
placeholder: '输入API名称进行搜索',
},
},
{
field: 'APIModel',
field: 'protectAction',
label: ' ',
component: 'Select',
colProps: { span: 2 },
componentProps: {
placeholder: 'API模式',
placeholder: '保护动作',
options: [
{ label: 'SQL模式', value: 'SQL模式' },
{ label: '托管模式', value: '托管模式' },
......@@ -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[] = [
{
title: '字段名',
dataIndex: 'fieldName',
title: 'IP',
dataIndex: 'ip',
width: 120,
fixed: 'left',
},
{
title: '字段类型',
dataIndex: 'fieldType',
title: '保护动作',
dataIndex: 'protectAction',
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,
fixed: 'left',
},
];
/** 新增编辑表单字段*/
export const formSchema: any[] = [
{
field: 'sensitiveState',
label: '敏感状态',
field: 'ruleType',
label: '规则类型',
component: 'Select',
colProps: { span: 3 },
componentProps: {
placeholder: '敏感状态',
placeholder: '规则类型',
options: [
{ label: '敏感', value: '敏感' },
{ label: '非敏感', value: '非敏感' },
{ label: '默认', value: '默认' },
{ label: '规则类型1', value: '规则类型1' },
],
},
rules: [
{
required: true,
message: '请选择敏感状态',
message: '请选择规则类型',
},
],
},
......@@ -179,36 +84,12 @@ export const formSchema: any[] = [
{ 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: '标记时间',
field: 'ip',
label: 'IP',
component: 'Input',
componentProps: {
allowClear: false,
style: {
border: 'none',
backgroundColor: 'transparent',
......
src/views/dataService/APIIntegrationSecurity/AccessControl/index.vue
View file @ f51c6e20
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<Tabs v-model:value="activeKey" @change="handleTabChange" class="ml-5">
<Tabs.TabPane key="1" tab="默认"
><BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleImport">批量导入</a-button>
<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: 'material-symbols:pageview-outline-rounded',
label: '查看',
onClick: handleEdit.bind(null, record, false),
},
{
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>
</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" />
</PageWrapper>
</template>
......@@ -32,14 +50,16 @@
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { columns, searchFormSchema } from './classificationAndGrading.data';
import { Modal, Tabs } from 'ant-design-vue';
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';
import ClassificationAndGradingModal from '@/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModal.vue';
import {
columns,
searchFormSchema,
} from '@/views/dataService/APIIntegrationSecurity/AccessControl/classificationAndGrading.data';
import { t } from '@/hooks/web/useI18n';
const { createMessage } = useMessage();
const route = useRoute();
......@@ -47,7 +67,16 @@
const [registerModal, { openModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
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: '分类分级结果',
api: async (params) => {
// console.log(params);
......@@ -65,6 +94,8 @@
},
rowKey: 'id',
columns,
rowSelection: true,
formConfig: {
// labelWidth: 10,
schemas: searchFormSchema,
......@@ -75,25 +106,10 @@
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,
width: 120,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
/** 新增按钮*/
......@@ -114,7 +130,10 @@
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
console.log(record);
tableData.value.splice(
tableData.value.findIndex((item) => item.businessId === record.businessId),
1,
);
createMessage.success('删除成功!');
reload();
}
......@@ -131,7 +150,43 @@
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 target = 0; // 目标数据序号
// Table拖拽
......@@ -186,5 +241,8 @@
},
};
}
onMounted(() => {});
onMounted(() => {
tableData.value = tableList;
});
</script>
src/views/dataService/APIIntegrationSecurity/AccessControl/mock.ts
View file @ f51c6e20
import { idText } from 'typescript';
export const tableList: any[] = [
{
id: '1',
businessId: '301',
fieldName: '.data.idCard',
fieldType: '返回出参',
fieldCode: '.data.idCard',
APIName: '托管数据服务',
path: '共享工作区/test/托管系统',
APIModel: '托管模式',
sensitiveState: '非敏感',
level: 'G2',
sensitiveType: '钱包类型',
source: '人工标记',
ip: '127.0.0.1',
protectAction: '阻断',
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: '人工标记',
id: '2',
businessId: '302',
ip: '127.0.0.1',
protectAction: '阻断',
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: '人工标记',
id: '3',
businessId: '303',
ip: '127.0.0.1',
protectAction: '阻断',
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: '',
id: '4',
businessId: '304',
ip: '127.0.0.1',
protectAction: '阻断',
markTime: '2023-12-08 15:27:07',
},
];
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