api数据安全-敏感保护

src/views/dataService/APIDataSecurity/SensitiveProtection/addDataSecurityPolicyRulesModal.vue

@@ -31,13 +31,20 @@
           <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>
+          <!--          <a-input />-->
+          <BasicTree
+            ref="tree1"
+            :treeData="data.tree1"
+            :search="true"
+            :checkable="true"
+            :defaultExpandAll="true"
+          />
+          <!--          <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>
         <BasicForm @register="registerForm" />
       </Tabs.TabPane>
@@ -46,13 +53,20 @@
           <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 plainOptionsRole" :span="24" class="checkRow">
-              <Checkbox>{{ item }}</Checkbox>
-              <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
-            </div>
-          </CheckboxGroup>
+          <!--          <a-input />-->
+          <BasicTree
+            ref="tree2"
+            :treeData="data.tree2"
+            :search="true"
+            :checkable="true"
+            :defaultExpandAll="true"
+          />
+          <!--          <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>-->
         </div>
         <BasicForm @register="registerForm" />
       </Tabs.TabPane>
@@ -61,18 +75,25 @@
           <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 plainOptionsThree" :span="24" class="checkRow">
-              <Checkbox :value="item">{{ item }}</Checkbox>
-              <Icon icon="ant-design:delete-outlined" :size="25" :color="'#ED6F6F'" />
-            </div>
-          </CheckboxGroup>
+          <!--          <a-input />-->
+          <BasicTree
+            ref="tree2"
+            :treeData="data.tree3"
+            :search="true"
+            :checkable="true"
+            :defaultExpandAll="true"
+          />
+          <!--          <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 @register="registerForm" />
       </Tabs.TabPane>
     </Tabs>
-    <addObjectModal @register="registeraddObjectModal" />
+    <addObjectModal @register="registeraddObjectModal" @success="addObjectSuccess" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -84,6 +105,7 @@
   import { formSchema } from './sensitiveProtection.data';
   import addObjectModal from './addObjectModal.vue';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicTree } from '@/components/Tree';
 
   defineOptions({ name: 'AccountModal' });
   const [registeraddObjectModal, { openModal }] = useModal();
@@ -98,6 +120,11 @@
     checkAll: false,
     checkedList: [],
   });
+  const data = ref({
+    tree1: [],
+    tree2: [],
+    tree3: [],
+  });
   const plainOptionsRole = reactive([]);
   const plainOptionsThree = reactive([]);
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
@@ -124,7 +151,9 @@
       });
     }
   });
-
+  const tree1 = ref();
+  const tree2 = ref();
+  const tree3 = ref();
   const getTitle = computed(() => '新建数据安全策略');
 
   function changeTabs(activeKey: any) {
@@ -146,6 +175,9 @@
       setModalProps({ confirmLoading: false });
     }
   }
+  function addObjectSuccess(successData) {
+    data.value = successData;
+  }
 </script>
 <style lang="scss" scoped>
   .choseOB_title {

src/views/dataService/APIDataSecurity/SensitiveProtection/addObjectModal.vue

@@ -9,22 +9,27 @@
     <Tabs default-active-key="1" @change="changeTabs">
       <Tabs.TabPane key="1" tab="用户">
         <a-input-search placeholder="请输姓名或者账号搜索" v-model:value="valueRef" />
-        <BasicTree :treeData="treeData" :checkable="true" :defaultExpandAll="true" />
+        <BasicTree ref="tree1" :treeData="treeData" :checkable="true" :defaultExpandAll="true" />
       </Tabs.TabPane>
       <Tabs.TabPane key="2" tab="角色">
         <a-input-search v-model:value="valueRef" />
         <a-divider />
-        <BasicTree :treeData="treeDataTwo" :checkable="true" :defaultExpandAll="true" />
+        <BasicTree ref="tree2" :treeData="treeDataTwo" :checkable="true" :defaultExpandAll="true" />
       </Tabs.TabPane>
       <Tabs.TabPane key="3" tab="机构">
-        <BasicTree :treeData="treeDataThree" :checkable="true" :defaultExpandAll="true" />
+        <BasicTree
+          ref="tree3"
+          :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 } from 'vue';
+  import { ref, computed, unref, toRaw } from 'vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { useForm } from '@/components/Form';
   import { formSchema } from './sensitiveProtection.data';
@@ -32,35 +37,22 @@
   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 tree1 = ref();
+  const tree2 = ref();
+  const tree3 = 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,
-      });
     }
   });
 
@@ -71,8 +63,48 @@
   }
 
   async function handleSubmit() {
+    console.log('被调用');
+    const data = {
+      tree1: [],
+      tree2: [],
+      tree3: [],
+    };
+
+    data.tree1 = [...getSelectTree(tree1)];
+    data.tree2 = [...getSelectTree(tree2)];
+    data.tree3 = [...getSelectTree(tree3)];
+    console.log('data', data);
+    emit('success', data);
     closeModal();
   }
+  function getSelectTree(treeRef) {
+    const treeInstance = unref(treeRef);
+    if (treeInstance) {
+      return findSelectedNodes(treeInstance.getTreeData(), treeInstance.getCheckedKeys());
+    } else {
+      return [];
+    }
+  }
+  function findSelectedNodes(node, selectedKeys) {
+    let result = [];
+    node.forEach((item) => {
+      if (selectedKeys.includes(item.key)) {
+        result.push(item);
+        console.log('result', result);
+      }
+    });
+
+    // 如果有子节点，递归查找
+    if (node.children && node.children.length > 0) {
+      for (let child of node.children) {
+        result.children = findSelectedNodes(child, selectedKeys);
+      }
+    }
+
+    return result;
+  }
+
+  // 使用递归函数获取选中的节点
 </script>
 <style lang="scss" scoped>
   .choseOB_title {