api数据安全-敏感保护

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

@@ -16,13 +16,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>
+          <BasicTree
+            ref="tree1"
+            :treeData="data.tree1"
+            :search="true"
+            :checkable="true"
+            :defaultExpandAll="true"
+          />
+<!--          <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>
         <BasicForm style="margin-top: 10px" @register="registerForm" />
       </Tabs.TabPane>
@@ -31,13 +38,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>
+          <BasicTree
+            ref="tree2"
+            :treeData="data.tree2"
+            :search="true"
+            :checkable="true"
+            :defaultExpandAll="true"
+          />
+<!--          <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>-->
         </div>
         <BasicForm style="margin-top: 10px" @register="registerForm" />
       </Tabs.TabPane>
@@ -46,18 +60,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>
+          <BasicTree
+            ref="tree3"
+            :treeData="data.tree3"
+            :search="true"
+            :checkable="true"
+            :defaultExpandAll="true"
+          />
+<!--          <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" />
+    <addObjectModal @register="registeraddObjectModal" @success="addObjectSuccess" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -69,6 +90,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();
@@ -85,6 +107,11 @@
   });
   const plainOptionsRole = reactive([]);
   const plainOptionsThree = reactive([]);
+  const data = ref({
+    tree1: [],
+    tree2: [],
+    tree3: [],
+  });
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
   const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
@@ -124,6 +151,9 @@
     createMessage.success('提交成功!');
     closeModal();
   }
+  function addObjectSuccess(successData) {
+    data.value = successData;
+  }
 </script>
 <style lang="scss" scoped>
   .choseOB_title {