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