保护规则

src/views/dataSecurity/protectionRules/addObjectModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+
+    <Tabs default-active-key="1" @change="changeTabs">
+      <Tabs.TabPane key="1" tab="用户">
+        <BasicTree
+          :treeData="treeData"
+          :checkable="true"
+          :defaultExpandAll="true"
+          @check="handleCheck"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="2" tab="角色">
+        <a-input placeholder="请输入" v-model:value="valueRef" />
+        <div>
+          <Checkbox
+            v-model:checked="state.checkAll"
+            :indeterminate="state.indeterminate"
+            @change="onCheckAllChange"
+          >
+            全部角色
+          </Checkbox>
+        </div>
+        <a-divider />
+        <CheckboxGroup v-model:value="state.checkedList" :options="plainOptions" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="3" tab="机构">
+        <BasicTree
+          :treeData="treeDataTwo"
+          :checkable="true"
+          :defaultExpandAll="true"
+          @check="handleCheck"
+        />
+      </Tabs.TabPane>
+    </Tabs>
+
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { Card, Col, Row, Space, message,Tabs,Badge,Checkbox,CheckboxGroup } from 'ant-design-vue';
+import {ref, computed, unref, reactive,watch} from 'vue';
+import {BasicModal, useModal, useModalInner} from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import { formSchema } from './protectionRules.data';
+import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
+import {treeData,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 plainOptions = ['系统管理员', '工作组管理员', '工作组开发者', '工作组访客'];
+const state = reactive({
+  indeterminate: true,
+  checkAll: false,
+  checkedList: ['工作组管理员'],
+});
+
+const onCheckAllChange = (e: any) => {
+  Object.assign(state, {
+    checkedList: e.target.checked ? plainOptions : [],
+    indeterminate: false,
+  });
+};
+
+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,
+    });
+  }
+
+
+});
+
+const getTitle = computed(() => ('添加对象'));
+
+
+function changeTabs(activeKey: any) {
+  console.log('activeKey',activeKey)
+}
+
+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;
+}
+</style>

src/views/dataSecurity/protectionRules/index.vue

@@ -3,6 +3,8 @@
     <BasicTable @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate">新增</a-button>
+        <a-button type="primary" @click="handleImport">导入</a-button>
+        <a-button type="primary" @click="handleExport">导出</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -30,7 +32,7 @@
         </template>
       </template>
     </BasicTable>
-    <sensitiveRulesModal @register="registerModal" @success="handleSuccess" />
+    <protectionRulesModal @register="registerModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -39,7 +41,7 @@ import { BasicTable, useTable, TableAction } from '@/components/Table';
 import { PageWrapper } from '@/components/Page';
 import { useMessage } from '@/hooks/web/useMessage';
 import { useModal } from '@/components/Modal';
-import sensitiveRulesModal from './protectionRulesModal.vue';
+import protectionRulesModal from './protectionRulesModal.vue';
 
 import { columns, searchFormSchema } from './protectionRules.data';
 import {tableList} from "./mock";

src/views/dataSecurity/protectionRules/mock.ts

+import {TreeItem} from "@/components/Tree";
 
 
 export const tableList: any[] = [
@@ -65,3 +66,52 @@ export const tableList: any[] = [
     "protectiveAction" : "脱敏",
   },
 ]
+
+
+export const treeData: TreeItem[] = [
+  {
+    title: '机构管理 ',
+    key: '0-0',
+    icon: 'ion:settings-outline',
+    children: [
+      { title: '机构1', key: '0-0-1' },
+      { title: '机构2', key: '0-0-2' },
+    ],
+  },
+  {
+    title: 'admin',
+    key: '1-1',
+    children: [],
+  },
+  {
+    title: 'ttt',
+    key: '1-2',
+    children: [],
+  },
+  {
+    title: 'tttt2',
+    key: '1-3',
+    children: [],
+  },
+];
+
+export const treeDataTwo: TreeItem[] = [
+  {
+    title: '机构管理 ',
+    key: '0-0',
+    icon: 'ion:settings-outline',
+    children: [
+      { title: '数据平台治理部', key: '0-0-1' },
+    ],
+  },
+  {
+    title: '系统管理',
+    key: '1-1',
+    children: [],
+  },
+  {
+    title: '数据资源管理部',
+    key: '1-2',
+    children: [],
+  },
+];

src/views/dataSecurity/protectionRules/protectionRules.data.ts

@@ -108,72 +108,85 @@ export const columns: BasicColumn[] = [
 /** 新增编辑表单字段*/
 export const formSchema: any[] = [
   {
-    field: 'name',
-    label: '名称',
-    component: 'Input',
+    field: 'sensitiveType',
+    label: '敏感类型',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '敏感类型',
+      options: [
+        { label: '血缘关系', value: '血缘关系' },
+        { label: '钱包类型', value: '钱包类型' },
+        { label: '员工号（对外员工）', value: '员工号（对外员工）' },
+      ],
+    },
     rules: [
       {
         required: true,
-        message: '请输入名称',
+        message: '请选择敏感类型',
       },
     ],
   },
   {
-    field: 'functionName',
-    label: '函数名',
-    component: 'Input',
+    field: 'safetyLevel',
+    label: '安全分级',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '安全分级',
+      options: [
+        { label: 'G1', value: 'G1' },
+        { label: 'G2', value: 'G2' },
+        { label: 'G3', value: 'G3' },
+        { label: 'G4', value: 'G4' },
+      ],
+    },
     rules: [
       {
         required: true,
-        message: '请输入函数名',
+        message: '请选择安全分级',
       },
     ],
   },
   {
-    field: 'algorithmDes',
-    label: '算法描述',
-    component: 'Input',
+    field: 'priority',
+    label: '优先级',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '优先级',
+      options: [
+        { label: '放行', value: '放行' },
+        { label: '脱敏', value: '脱敏' },
+        { label: '拒绝', value: '拒绝' },
+      ],
+    },
     rules: [
       {
         required: true,
-        message: '请输入算法描述',
+        message: '请选择保护动作',
       },
     ],
   },
   {
-    field: 'params',
-    label: '参数',
+    field: 'protectiveAction',
+    label: '保护动作',
     component: 'Select',
+    colProps: { span: 4 },
     componentProps: {
+      placeholder: '保护动作',
       options: [
-        { label: 'STRING', value: 'STRING' },
-        { label: 'INT', value: 'INT' },
+        { label: '放行', value: '放行' },
+        { label: '脱敏', value: '脱敏' },
+        { label: '拒绝', value: '拒绝' },
       ],
     },
     rules: [
       {
         required: true,
-        message: '请选择敏感类型',
+        message: '请选择保护动作',
       },
     ],
   },
-  {
-    field: 'describe',
-    component: 'InputTextArea',
-    label: '参数描述',
-    componentProps: {
-      placeholder: '请输入参数描述',
-      rows: 1,
-    },
-  },
-  {
-    field: 'achieveMethod',
-    component: 'Checkbox',
-    label: '实现方式',
-    colProps: {
-      span: 8,
-    },
-    renderComponentContent: 'API',
-  },
 
 ]

src/views/dataSecurity/protectionRules/protectionRulesModal.vue

 <template>
   <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
-    <!--    <BasicForm @register="registerForm" />-->
-    <Tabs default-active-key="1">
-      <Tabs.TabPane key="1" tab="用户">
-        aaa
-      </Tabs.TabPane>
-      <Tabs.TabPane key="2" tab="角色">
-        bbb
-      </Tabs.TabPane>
-      <Tabs.TabPane key="2" tab="机构">
-        bbb
-      </Tabs.TabPane>
-    </Tabs>
+    <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">
+            <a-input placeholder="请输入" v-model:value="valueRef" />
+            <CheckboxGroup v-model="selectedValues">
+                <div v-for="(item, index) in plainOptions" :key="item.value" :span="24" class="checkRow">
+                  <Checkbox :value="item.value">{{ item.label }}</Checkbox>
+                  <Icon icon="ant-design:delete-outlined" :size="25"  :color="'#ED6F6F'" />
+                </div>
+            </CheckboxGroup>
+          </div>
+              <BasicForm @register="registerForm" />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="2" tab="角色">
+          <div class="addDialogBG">
+            <a-input placeholder="请输入" v-model:value="valueRef" />
+            <CheckboxGroup v-model="selectedValues">
+              <div v-for="(item, index) in plainOptionsRole" :key="item.value" :span="24" class="checkRow">
+                <Checkbox :value="item.value">{{ item.label }}</Checkbox>
+                <Icon icon="ant-design:delete-outlined" :size="25"  :color="'#ED6F6F'" />
+              </div>
+            </CheckboxGroup>
+          </div>
+          <BasicForm @register="registerForm" />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="3" tab="机构">
+          <div class="addDialogBG">
+            <a-input placeholder="请输入" v-model:value="valueRef" />
+            <CheckboxGroup v-model="selectedValues">
+              <div v-for="(item, index) in plainOptionsThree" :key="item.value" :span="24" class="checkRow">
+                <Checkbox :value="item.value">{{ item.label }}</Checkbox>
+                <Icon icon="ant-design:delete-outlined" :size="25"  :color="'#ED6F6F'" />
+              </div>
+            </CheckboxGroup>
+          </div>
+          <BasicForm @register="registerForm" />
+        </Tabs.TabPane>
+      </Tabs>
+    <addObjectModal @register="registeraddObjectModal" @success="handleSuccess" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { Card, Col, Row, Space, message,Tabs,Badge } from 'ant-design-vue';
+import Icon from '@/components/Icon/Icon.vue';
+import { Card, Col, Row, Space, message,Tabs,Badge,Checkbox,CheckboxGroup } from 'ant-design-vue';
 import {ref, computed, unref, reactive} from 'vue';
-import { BasicModal, useModalInner } from '@/components/Modal';
+import {BasicModal, useModal, useModalInner} from '@/components/Modal';
 import { BasicForm, useForm } from '@/components/Form';
 import { formSchema } from './protectionRules.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(
+  [
+    {label:'admin',value: 1 },
+    {label:'ttt',value: 2 },
+    {label:'dytest',value: 3 },
+  ]
+) ;
+const state = reactive({
+  indeterminate: true,
+  checkAll: false,
+  checkedList: [],
+});
+const plainOptionsRole = reactive(
+  [
+    {label:'管理员',value: 1 },
+    {label:'普通角色',value: 2 },
+    {label:'超级管理员',value: 3 },
+  ]
+) ;
+const plainOptionsThree = reactive(
+  [
+    {label:'机构一',value: 1 },
+    {label:'机构二',value: 2 },
+    {label:'机构三',value: 3 },
+  ]
+) ;
 //获取接口数据并放在下拉框里（这里是打开了一个弹框）
 //初始化表单
 const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
@@ -59,6 +118,15 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
 const getTitle = computed(() => (!unref(isUpdate) ? '新建保护规则' : '编辑保护规则'));
 
 
+function changeTabs(activeKey: any) {
+  console.log('activeKey',activeKey)
+}
+
+function handleAddObject() {
+  openModal(true, {
+
+  });
+}
 
 async function handleSubmit() {
   try {
@@ -72,3 +140,23 @@ async function handleSubmit() {
   }
 }
 </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;
+}
+</style>