Skip to content

B
bigDataSystem
Commit 8ee5a309 authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改API安全

parent e8dd05d6
Hide whitespace changes
Inline Side-by-side
Showing with 409 additions and 485 deletions
src/views/dataService/APIDataSecurity/SensitiveProtection/addDataSecurityPolicyRulesModal.vue
View file @ 8ee5a309
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
<div style="display: flex;align-items: center;justify-content: space-between"> width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<div style="display: flex; align-items: center; justify-content: space-between">
<div class="choseOB_title">已选择字段</div> <div class="choseOB_title">已选择字段</div>
<a-button type="primary">选择字段</a-button> <a-button type="primary">选择字段</a-button>
</div> </div>
<Tabs default-active-key="1" @change="changeTabs"> <Tabs default-active-key="1" @change="changeTabs">
<Tabs.TabPane key="3">
<Tabs.TabPane key="3" >
<div class="addDialogBG"> <div class="addDialogBG">
<div style="float: right"> <div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
<a-input /> <a-input />
</div> </div>
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs>
<div style="float: right"> <div style="float: right">
<a-button type="primary" @click="handleAddObject" style="margin-left: 88px; margin-top: 10px">添加对象</a-button> <a-button type="primary" @click="handleAddObject" style="margin-left: 88px; margin-top: 20px"
>添加对象</a-button
>
</div> </div>
<Tabs default-active-key="1" @change="changeTabs" style="width: 544px;" > <Tabs default-active-key="1" @change="changeTabs" style="width: 100%">
<Tabs.TabPane key="1" tab="用户"> <Tabs.TabPane key="1" tab="用户">
<div class="addDialogBG"> <div class="addDialogBG">
<div style="float: right"> <div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
<a-input /> <a-input />
<CheckboxGroup v-model="selectedValues"> <CheckboxGroup v-model="selectedValues">
<div v-for="(item) in plainOptions" :span="24" class="checkRow"> <div v-for="item in plainOptions" :span="24" class="checkRow">
<Checkbox>{{ item }}</Checkbox> <Checkbox>{{ item }}</Checkbox>
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
</CheckboxGroup> </CheckboxGroup>
</div> </div>
...@@ -46,146 +44,126 @@ ...@@ -46,146 +44,126 @@
<Tabs.TabPane key="2" tab="角色"> <Tabs.TabPane key="2" tab="角色">
<div class="addDialogBG"> <div class="addDialogBG">
<div style="float: right"> <div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
<a-input /> <a-input />
<CheckboxGroup v-model="selectedValues"> <CheckboxGroup v-model="selectedValues">
<div v-for="(item) in plainOptionsRole" :span="24" class="checkRow"> <div v-for="item in plainOptionsRole" :span="24" class="checkRow">
<Checkbox >{{ item}}</Checkbox> <Checkbox>{{ item }}</Checkbox>
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
</CheckboxGroup> </CheckboxGroup>
</div> </div>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane key="3" tab="机构" > <Tabs.TabPane key="3" tab="机构">
<div class="addDialogBG"> <div class="addDialogBG">
<div style="float: right"> <div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
<a-input /> <a-input />
<CheckboxGroup v-model="selectedValues"> <CheckboxGroup v-model="selectedValues">
<div v-for="(item) in plainOptionsThree" :span="24" class="checkRow"> <div v-for="item in plainOptionsThree" :span="24" class="checkRow">
<Checkbox :value="item">{{ item }}</Checkbox> <Checkbox :value="item">{{ item }}</Checkbox>
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
</CheckboxGroup> </CheckboxGroup>
</div> </div>
<BasicForm @register="registerForm" /> <BasicForm @register="registerForm" />
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs>
<addObjectModal @register="registeraddObjectModal" /> <addObjectModal @register="registeraddObjectModal" />
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { Tabs,Checkbox,CheckboxGroup } from 'ant-design-vue'; import { Tabs, Checkbox, CheckboxGroup } from 'ant-design-vue';
import {ref, computed, unref, reactive} from 'vue'; import { ref, computed, unref, reactive } from 'vue';
import {BasicModal, useModal, useModalInner} from '@/components/Modal'; import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './sensitiveProtection.data'; import { formSchema } from './sensitiveProtection.data';
import addObjectModal from './addObjectModal.vue'; import addObjectModal from './addObjectModal.vue';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const [registeraddObjectModal, { openModal }] = useModal(); defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']); const [registeraddObjectModal, { openModal }] = useModal();
const { createMessage } = useMessage(); const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true); const { createMessage } = useMessage();
const rowId = ref(''); const isUpdate = ref(true);
const selectedValues = reactive([]) const rowId = ref('');
const plainOptions = reactive( const selectedValues = reactive([]);
[ const plainOptions = reactive([]);
const state = reactive({
indeterminate: true,
] checkAll: false,
) ; checkedList: [],
const state = reactive({ });
indeterminate: true, const plainOptionsRole = reactive([]);
checkAll: false, const plainOptionsThree = reactive([]);
checkedList: [], //获取接口数据并放在下拉框里（这里是打开了一个弹框）
}); //初始化表单
const plainOptionsRole = reactive( const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
[ labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
] schemas: formSchema,
) ; showActionButtonGroup: false,
const plainOptionsThree = reactive( actionColOptions: {
[ span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
});
] const getTitle = computed(() => '新建数据安全策略');
) ;
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
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();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息 function changeTabs(activeKey: any) {
// 塞值 console.log('activeKey', activeKey);
setFieldsValue({
...data.record,
});
} }
function handleAddObject() {
openModal(true, {});
}
}); async function handleSubmit() {
try {
const getTitle = computed(() => ('新建数据安全策略')); const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
function changeTabs(activeKey: any) { closeModal();
console.log('activeKey',activeKey) emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} } finally {
setModalProps({ confirmLoading: false });
function handleAddObject() { }
openModal(true, {
});
}
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.choseOB_title{ .choseOB_title {
font-weight: 600; font-weight: 600;
} }
::v-deep.ant-checkbox-group{ ::v-deep.ant-checkbox-group {
display: grid; display: grid;
} }
.checkRow{ .checkRow {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 5px; padding-bottom: 5px;
} }
.addDialogBG{ .addDialogBG {
padding: 20px; padding: 20px;
background-color: #E8ECF7; background-color: #e8ecf7;
width: 100%; width: 100%;
height: 400px; height: 400px;
} }
</style> </style>
src/views/dataService/APIDataSecurity/SensitiveProtection/addObjectModal.vue
View file @ 8ee5a309
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<Tabs default-active-key="1" @change="changeTabs"> <Tabs default-active-key="1" @change="changeTabs">
<Tabs.TabPane key="1" tab="用户"> <Tabs.TabPane key="1" tab="用户">
<a-input placeholder="请输姓名或者账号搜索" v-model:value="valueRef" /> <a-input-search placeholder="请输姓名或者账号搜索" v-model:value="valueRef" />
<BasicTable @register="userListTable" :searchInfo="searchInfo" /> <BasicTree :treeData="treeData" :checkable="true" :defaultExpandAll="true" />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane key="2" tab="角色"> <Tabs.TabPane key="2" tab="角色">
<a-input v-model:value="valueRef" /> <a-input-search v-model:value="valueRef" />
<a-divider /> <a-divider />
<BasicTree :treeData="treeDataTwo" :checkable="true" :defaultExpandAll="true" />
<BasicTable @register="roleListTable" :searchInfo="searchInfo" />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane key="3" tab="机构"> <Tabs.TabPane key="3" tab="机构">
<BasicTree <BasicTree :treeData="treeDataThree" :checkable="true" :defaultExpandAll="true" />
:treeData="treeDataTwo"
:checkable="true"
:defaultExpandAll="true"
/>
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Tabs } from 'ant-design-vue'; import { Tabs } from 'ant-design-vue';
import {ref, computed, unref, reactive,watch} from 'vue'; import { ref, computed, unref } from 'vue';
import {BasicModal, useModalInner} from '@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
import { useForm } from '@/components/Form'; import { useForm } from '@/components/Form';
import {formSchema, roleColumn,roleColumn2} from './sensitiveProtection.data'; import { formSchema } from './sensitiveProtection.data';
import { BasicTree, } from '@/components/Tree'; import { BasicTree } from '@/components/Tree';
import {treeData, treeDataTwo} from './mock' import { treeData, treeDataThree, treeDataTwo } from './mock';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import {BasicTable, useTable} from "@/components/Table";
defineOptions({ name: 'AccountModal' }); defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const isUpdate = ref(true); const isUpdate = ref(true);
const rowId = ref(''); const rowId = ref('');
const valueRef = ref(''); const valueRef = ref('');
let treeTableData = ref(treeData);
const searchInfo = reactive<Recordable>({}); //获取接口数据并放在下拉框里（这里是打开了一个弹框）
const plainOptions = [ //初始化表单
{ id: 0, name: "本页角色" }, const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
{ id: 1, name: "系统管理员(全局角色)" }, labelWidth: 100,
{ id: 2, name: "工作组管理员(工作组角色)" }, baseColProps: { lg: 24, md: 24 },
{ id: 3, name: "工作组开发者(工作组角色)" }, schemas: formSchema,
{ id: 4, name: "工作组访客(工作组角色)" }, showActionButtonGroup: false,
{ id: 5, name: "安全管理员(全局角色)" }, actionColOptions: {
{ id: 6, name: "需求管理员(全局角色)" }, span: 23,
{ id: 7, name: "架构师(全局角色)" }, },
{ id: 8, name: "技术管理员(全局角色)" }, });
{ id: 9, name: "普通工作区管理员(工作区角色)" }, //初始化弹框
{ id: 10, name: "商城管理员(全局角色)" }, const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
]; setModalProps({ confirmLoading: false });
const state = reactive({ isUpdate.value = !!data?.isUpdate;
indeterminate: true, if (unref(isUpdate)) {
checkAll: false, // 通过id获取行详情信息
checkedList: ['工作组管理员'], // 塞值
}); setFieldsValue({
const [roleListTable, {}] = useTable({ ...data.record,
api: async (params) => { });
const response = { }
pageNu: '1', });
pageSize: '10',
pages: '1', const getTitle = computed(() => '添加对象');
total: plainOptions.length,
object: '', function changeTabs(activeKey: any) {
message: '', console.log('activeKey', activeKey);
data: plainOptions,
};
return { ...response };
},
columns: roleColumn,
rowKey: 'id',
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
rowSelection: true,
bordered: true,
});
const [userListTable, {}] = useTable({
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: treeTableData.value.length,
object: '',
message: '',
data: treeTableData.value,
};
return { ...response };
},
columns: roleColumn2,
rowKey: 'id',
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
rowSelection: true,
bordered: true,
});
watch(
() => state.checkedList,
val => {
state.indeterminate = !!val.length && val.length < plainOptions.length;
state.checkAll = val.length === plainOptions.length;
},
);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
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();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
} }
async function handleSubmit() {
}); closeModal();
}
const getTitle = computed(() => ('添加对象'));
function changeTabs(activeKey: any) {
console.log('activeKey',activeKey)
}
async function handleSubmit() {
closeModal();
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.choseOB_title{ .choseOB_title {
font-weight: 600; font-weight: 600;
} }
::v-deep.ant-checkbox-group{ ::v-deep.ant-checkbox-group {
display: grid; display: grid;
} }
</style> </style>
src/views/dataService/APIDataSecurity/SensitiveProtection/index.vue
View file @ 8ee5a309
<template> <template>
<PageWrapper title="敏感保护" contentBackground headerSticky> <PageWrapper contentBackground headerSticky>
<template #headerContent>
<div class="modal_top">
<div><Icon icon="icon-park:protect" :size="40" :color="'#1e7cd7'" /></div>
<span style="font-size: 20px; font-weight: bold">敏感保护</span>
</div>
</template>
<template #extra> <template #extra>
<a-button type="primary" @click="AddDataSecurityPolicy">添加数据安全策略</a-button> <a-button type="primary" @click="AddDataSecurityPolicy">添加数据安全策略</a-button>
</template> </template>
...@@ -12,47 +18,54 @@ ...@@ -12,47 +18,54 @@
:searchInfo="searchInfo" :searchInfo="searchInfo"
/> />
<div class="w-1/2"> <div class="w-1/2">
<div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div> <div style="display: flex; align-items: center; padding-left: 20px">
<Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" />
<div style="margin-left: 10px">
<span class="title">id</span>
<div>
<span class="path">/共享工作区/xw/xw_inptu</span>
</div>
</div>
</div>
<Description <Description
size="middle" size="middle"
:bordered="false" :bordered="false"
:column="2" :column="2"
:data="info" :data="info"
:schema="personSchema" :schema="personSchema"
/> />
<BasicTable @register="rightTable" :searchInfo="searchInfo"> <BasicTable @register="rightTable" :searchInfo="searchInfo">
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{ {
icon: 'material-symbols:pageview-outline-rounded', icon: 'material-symbols:pageview-outline-rounded',
onClick: handleEdit.bind(null, record, false), onClick: handleEdit.bind(null, record, false),
}, },
{ {
icon: 'clarity:note-edit-line', icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record, true), onClick: handleEdit.bind(null, record, true),
}, },
{ {
icon: 'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
onClick: deleteButton.bind(null, record, 1), onClick: deleteButton.bind(null, record, 1),
}, },
]" ]"
/> />
</template> </template>
</template> </template>
<template #toolbar> <template #toolbar>
<a-button <a-button
:disabled="getRowSelection().selectedRowKeys <= 0" :disabled="getRowSelection().selectedRowKeys <= 0"
type="primary" type="primary"
style="background: #cc0000" @click="deleteButton"
@click="deleteButton"
> >
删除 删除
</a-button> </a-button>
<a-button type="primary">批量编辑</a-button> <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
>批量编辑</a-button
>
<a-button @click="addRules" type="primary">添加规则</a-button> <a-button @click="addRules" type="primary">添加规则</a-button>
</template> </template>
</BasicTable> </BasicTable>
...@@ -60,35 +73,30 @@ ...@@ -60,35 +73,30 @@
</div> </div>
</template> </template>
<protectionRulesModal @register="registerModal" /> <protectionRulesModal @register="registerModal" />
<addDataSecurityPolicyRulesModal @register="addDataSecurityModal"/> <addDataSecurityPolicyRulesModal @register="addDataSecurityModal" />
<sensitiveProtectionMode @register="SensProtMod" @success="handleSuccess" /> <sensitiveProtectionMode @register="SensProtMod" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import {BasicTable, TableAction, useTable} from '@/components/Table'; import { BasicTable, TableAction, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import protectionRulesModal from './sensitiveRuleMode.vue'; import protectionRulesModal from './sensitiveRuleMode.vue';
import addDataSecurityPolicyRulesModal from './addDataSecurityPolicyRulesModal.vue'; import addDataSecurityPolicyRulesModal from './addDataSecurityPolicyRulesModal.vue';
import sensitiveProtectionMode from './sensitiveProtectionMode.vue'; import sensitiveProtectionMode from './sensitiveProtectionMode.vue';
import { import { columns, searchFormSchema, FieldProtectionRules } from './sensitiveProtection.data';
columns,
searchFormSchema,
FieldProtectionRules,
} from './sensitiveProtection.data';
import { tableList, tableRulesList } from './mock'; import { tableList, tableRulesList } from './mock';
import { import {
infoList, infoList,
personSchema, personSchema,
} from '@/views/dataService/APIDataSecurity/SensitiveProtection/mock'; } from '@/views/dataService/APIDataSecurity/SensitiveProtection/mock';
import { Description } from '@/components/Description'; import { Description } from '@/components/Description';
import {useMessage} from "@/hooks/web/useMessage"; import { useMessage } from '@/hooks/web/useMessage';
import Icon from "@/components/Icon/Icon.vue"; import Icon from '@/components/Icon/Icon.vue';
let tableData = ref(tableList); let tableData = ref(tableList);
const { createMessage, createConfirm } = useMessage(); const { createMessage, createConfirm } = useMessage();
let tableDataRules = ref(tableRulesList); let tableDataRules = ref(tableRulesList);
...@@ -97,10 +105,7 @@ ...@@ -97,10 +105,7 @@
const [addDataSecurityModal, { openModal: openAddDataSecurityModal }] = useModal(); const [addDataSecurityModal, { openModal: openAddDataSecurityModal }] = useModal();
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
let info = ref(infoList[0]); let info = ref(infoList[0]);
const [ const [registerTable, { getSelectRowKeys }] = useTable({
registerTable,
{ getSelectRowKeys },
] = useTable({
api: async (params) => { api: async (params) => {
const response = { const response = {
pageNu: '1', pageNu: '1',
...@@ -129,9 +134,7 @@ ...@@ -129,9 +134,7 @@
bordered: true, bordered: true,
}); });
const [rightTable, { reload, updateTableDataRecord, getRowSelection }] = useTable({
const [rightTable, {reload, updateTableDataRecord, getRowSelection}] = useTable({
title: '字段保护规则', title: '字段保护规则',
api: async (params) => { api: async (params) => {
const response = { const response = {
...@@ -165,7 +168,7 @@ ...@@ -165,7 +168,7 @@
const key = getSelectRowKeys()[0]; const key = getSelectRowKeys()[0];
console.log('key', key); console.log('key', key);
info.value = infoList.find((item) => item.businessId === key); info.value = infoList.find((item) => item.businessId === key);
} }
/** 编辑按钮*/ /** 编辑按钮*/
...@@ -209,7 +212,6 @@ ...@@ -209,7 +212,6 @@
}); });
} }
function AddDataSecurityPolicy() { function AddDataSecurityPolicy() {
openAddDataSecurityModal(true, { openAddDataSecurityModal(true, {
isUpdate: false, isUpdate: false,
...@@ -218,3 +220,21 @@ ...@@ -218,3 +220,21 @@
onMounted(() => {}); onMounted(() => {});
</script> </script>
<style lang="scss" scoped>
.modal_top {
display: flex;
align-items: center;
.title {
font-size: 16px;
font-weight: 500;
}
}
.title {
font-size: 16px;
font-weight: 500;
}
.path {
font-size: 14px;
color: gray;
}
</style>
src/views/dataService/APIDataSecurity/SensitiveProtection/mock.ts
View file @ 8ee5a309
...@@ -67,14 +67,14 @@ export const tableRulesList: any[] = [ ...@@ -67,14 +67,14 @@ export const tableRulesList: any[] = [
{ {
businessId: '402', businessId: '402',
object: 'admin', object: 'admin',
objectProperties:'用户', objectProperties: '用户',
priority: '中', priority: '中',
ProtectiveAction: '脱敏', ProtectiveAction: '脱敏',
}, },
{ {
businessId: '403', businessId: '403',
object: '数据平台整理部', object: '数据平台整理部',
objectProperties:'机构', objectProperties: '机构',
priority: '高', priority: '高',
ProtectiveAction: '放行', ProtectiveAction: '放行',
}, },
...@@ -82,19 +82,55 @@ export const tableRulesList: any[] = [ ...@@ -82,19 +82,55 @@ export const tableRulesList: any[] = [
export const treeData: TreeItem[] = [ export const treeData: TreeItem[] = [
{ {
name: '本页用户', title: '全部用户 ',
key: '1-2', key: '0-0',
icon: 'lucide:user-round',
}, },
{ {
name: 'admin(admin)', title: '本页用户 ',
key: '1-3', key: '0-1',
icon: 'lucide:user-round',
},
{
title: 'admin(admin)',
key: '0-2',
icon: 'lucide:user-round',
}, },
]; ];
export const treeDataTwo: TreeItem[] = [ export const treeDataTwo: TreeItem[] = [
{
title: '全部用角色',
key: '0-1',
icon: 'mynaui:user-waves',
},
{
title: '本页角色',
key: '0-2',
icon: 'mynaui:user-waves',
},
{
title: '系统管理员(全局角色)',
key: '0-3',
icon: 'mynaui:user-waves',
},
{
title: '工作组管理员(工作组角色)',
key: '0-4',
icon: 'mynaui:user-waves',
},
{
title: '工作组开发者(工作组角色)',
key: '0-5',
icon: 'mynaui:user-waves',
},
{
title: '架构师(全局角色)',
key: '0-6',
icon: 'mynaui:user-waves',
},
];
export const treeDataThree: TreeItem[] = [
{ {
title: '全部结构 ', title: '全部结构 ',
key: '1-0', key: '1-0',
...@@ -121,7 +157,7 @@ export const treeDataTwo: TreeItem[] = [ ...@@ -121,7 +157,7 @@ export const treeDataTwo: TreeItem[] = [
children: [ children: [
{ {
key: '0-0-2-1', key: '0-0-2-1',
} },
], ],
}, },
{ {
...@@ -131,7 +167,7 @@ export const treeDataTwo: TreeItem[] = [ ...@@ -131,7 +167,7 @@ export const treeDataTwo: TreeItem[] = [
children: [ children: [
{ {
key: '0-0-3-1', key: '0-0-3-1',
} },
], ],
}, },
], ],
......
src/views/dataService/APIDataSecurity/SensitiveProtection/sensitiveProtectionMode.vue
View file @ 8ee5a309
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
@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> <div>
<div class="title">{{ formParams.fieldCode }}</div> <div class="title">{{ formParams.fieldCode }}</div>
<div class="path">{{ formParams.sensitiveState }}</div> <div class="path">{{ formParams.sensitiveState }}</div>
......
src/views/dataService/APIDataSecurity/SensitiveProtection/sensitiveRuleMode.vue
View file @ 8ee5a309
<template> <template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> <BasicModal
<div style="display: flex;align-items: center;justify-content: space-between"> width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<div style="display: flex; align-items: center; justify-content: space-between">
<div class="choseOB_title">对象选择</div> <div class="choseOB_title">对象选择</div>
<a-button type="primary" @click="handleAddObject">添加对象</a-button> <a-button type="primary" @click="handleAddObject">添加对象</a-button>
</div> </div>
<Tabs default-active-key="1" @change="changeTabs"> <Tabs default-active-key="1" @change="changeTabs">
<Tabs.TabPane key="1" tab="用户"> <Tabs.TabPane key="1" tab="用户">
<div class="addDialogBG"> <div class="addDialogBG">
<div style="float: right"> <div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div>
<a-input />
<CheckboxGroup v-model="selectedValues">
<div v-for="(item) in plainOptions" :span="24" class="checkRow">
<Checkbox>{{ item }}</Checkbox>
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div>
</CheckboxGroup>
</div> </div>
<BasicForm @register="registerForm" /> <a-input />
</Tabs.TabPane> <CheckboxGroup v-model="selectedValues">
<Tabs.TabPane key="2" tab="角色"> <div v-for="item in plainOptions" :span="24" class="checkRow">
<div class="addDialogBG"> <Checkbox>{{ item }}</Checkbox>
<div style="float: right"> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
<a-input /> </CheckboxGroup>
<CheckboxGroup v-model="selectedValues"> </div>
<div v-for="(item) in plainOptionsRole" :span="24" class="checkRow"> <BasicForm style="margin-top: 10px" @register="registerForm" />
<Checkbox >{{ item}}</Checkbox> </Tabs.TabPane>
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Tabs.TabPane key="2" tab="角色">
</div> <div class="addDialogBG">
</CheckboxGroup> <div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
<BasicForm @register="registerForm" /> <a-input />
</Tabs.TabPane> <CheckboxGroup v-model="selectedValues">
<Tabs.TabPane key="3" tab="机构"> <div v-for="item in plainOptionsRole" :span="24" class="checkRow">
<div class="addDialogBG"> <Checkbox>{{ item }}</Checkbox>
<div style="float: right"> <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
<a-input /> </CheckboxGroup>
<CheckboxGroup v-model="selectedValues"> </div>
<div v-for="(item) in plainOptionsThree" :span="24" class="checkRow"> <BasicForm style="margin-top: 10px" @register="registerForm" />
<Checkbox :value="item">{{ item }}</Checkbox> </Tabs.TabPane>
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" /> <Tabs.TabPane key="3" tab="机构">
</div> <div class="addDialogBG">
</CheckboxGroup> <div style="float: right">
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div> </div>
<BasicForm @register="registerForm" /> <a-input />
</Tabs.TabPane> <CheckboxGroup v-model="selectedValues">
</Tabs> <div v-for="item in plainOptionsThree" :span="24" class="checkRow">
<Checkbox :value="item">{{ item }}</Checkbox>
<Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
</div>
</CheckboxGroup>
</div>
<BasicForm style="margin-top: 10px" @register="registerForm" />
</Tabs.TabPane>
</Tabs>
<addObjectModal @register="registeraddObjectModal" /> <addObjectModal @register="registeraddObjectModal" />
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { Tabs,Checkbox,CheckboxGroup } from 'ant-design-vue'; import { Tabs, Checkbox, CheckboxGroup } from 'ant-design-vue';
import {ref, computed, unref, reactive} from 'vue'; import { ref, computed, unref, reactive } from 'vue';
import {BasicModal, useModal, useModalInner} from '@/components/Modal'; import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './sensitiveProtection.data'; import { formSchema } from './sensitiveProtection.data';
import addObjectModal from './addObjectModal.vue'; import addObjectModal from './addObjectModal.vue';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const [registeraddObjectModal, { openModal }] = useModal();
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const selectedValues = reactive([])
const plainOptions = reactive(
[
] defineOptions({ name: 'AccountModal' });
) ; const [registeraddObjectModal, { openModal }] = useModal();
const state = reactive({ const emit = defineEmits(['success', 'register']);
indeterminate: true, const { createMessage } = useMessage();
checkAll: false, const isUpdate = ref(true);
checkedList: [], const rowId = ref('');
}); const selectedValues = reactive([]);
const plainOptionsRole = reactive( const plainOptions = reactive([]);
[ const state = reactive({
indeterminate: true,
] checkAll: false,
) ; checkedList: [],
const plainOptionsThree = reactive( });
[ const plainOptionsRole = reactive([]);
const plainOptionsThree = reactive([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
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();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息
// 塞值
setFieldsValue({
...data.record,
});
}
});
] const getTitle = computed(() => '新建数据安全策略');
) ;
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
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();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 通过id获取行详情信息 function changeTabs(activeKey: any) {
// 塞值 console.log('activeKey', activeKey);
setFieldsValue({
...data.record,
});
} }
function handleAddObject() {
openModal(true, {});
}
}); function handleSubmit() {
createMessage.success('提交成功!');
const getTitle = computed(() => ('新建数据安全策略'));
function changeTabs(activeKey: any) {
console.log('activeKey',activeKey)
}
function handleAddObject() {
openModal(true, {
});
}
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
closeModal(); closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
} finally {
setModalProps({ confirmLoading: false });
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.choseOB_title{ .choseOB_title {
font-weight: 600; font-weight: 600;
} }
::v-deep.ant-checkbox-group{ ::v-deep.ant-checkbox-group {
display: grid; display: grid;
} }
.checkRow{ .checkRow {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 5px; padding-bottom: 5px;
} }
.addDialogBG{ .addDialogBG {
padding: 20px; padding: 20px;
background-color: #E8ECF7; background-color: #e8ecf7;
width: 100%; width: 100%;
height: 400px; height: 400px;
} }
</style> </style>
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