敏感保护-页面

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

+<template>
+  <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" >
+        <div class="addDialogBG">
+          <div style="float: right">
+            <Icon icon="ant-design:delete-outlined" :size="25"  :color="'#ED6F6F'" />
+          </div>
+          <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>
+    </div>
+    <Tabs default-active-key="1" @change="changeTabs"  style="width: 544px;"   >
+
+      <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>
+        </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'" />
+          </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>
+        </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'" />
+          </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>
+        </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(
+  [
+
+  ]
+) ;
+//获取接口数据并放在下拉框里（这里是打开了一个弹框）
+//初始化表单
+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)
+}
+
+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>
+<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>

src/views/dataService/APIDataSecurity/SensitiveProtection/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="用户">
+        <a-input placeholder="请输姓名或者账号搜索" v-model:value="valueRef" />
+        <BasicTable @register="userListTable"  :searchInfo="searchInfo" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="2" tab="角色">
+        <a-input  v-model:value="valueRef" />
+        <a-divider />
+
+
+        <BasicTable @register="roleListTable"  :searchInfo="searchInfo" />
+
+
+      </Tabs.TabPane>
+      <Tabs.TabPane key="3" tab="机构">
+        <BasicTree
+          :treeData="treeDataTwo"
+          :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,
+    });
+  }
+
+
+});
+
+const getTitle = computed(() => ('添加对象'));
+
+
+function changeTabs(activeKey: any) {
+  console.log('activeKey',activeKey)
+}
+
+async function handleSubmit() {
+  closeModal();
+}
+</script>
+<style lang="scss" scoped>
+.choseOB_title{
+  font-weight: 600;
+}
+::v-deep.ant-checkbox-group{
+  display: grid;
+}
+</style>

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

+<template>
+  <PageWrapper title="敏感保护" contentBackground headerSticky>
+    <template #extra>
+      <a-button type="primary" @click="AddDataSecurityPolicy">添加数据安全策略</a-button>
+    </template>
+    <template #footer>
+      <div style="display: flex">
+        <BasicTable
+          @selection-change="getKeys"
+          class="w-1/2"
+          @register="registerTable"
+          :searchInfo="searchInfo"
+        />
+        <div class="w-1/2">
+          <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+
+          <Description
+            size="middle"
+
+            :bordered="false"
+            :column="2"
+            :data="info"
+            :schema="personSchema"
+          />
+          <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),
+                  },
+                ]"
+                />
+              </template>
+            </template>
+            <template #toolbar>
+              <a-button
+                  :disabled="getRowSelection().selectedRowKeys <= 0"
+                  type="primary"
+                  style="background: #cc0000"
+                  @click="deleteButton"
+              >
+                删除
+              </a-button>
+              <a-button type="primary">批量编辑</a-button>
+              <a-button @click="addRules" type="primary">添加规则</a-button>
+            </template>
+          </BasicTable>
+        </div>
+      </div>
+    </template>
+    <protectionRulesModal @register="registerModal" />
+    <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 { 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 { 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";
+  let tableData = ref(tableList);
+  const { createMessage, createConfirm } = useMessage();
+  let tableDataRules = ref(tableRulesList);
+  const [registerModal, { openModal }] = useModal();
+  const [SensProtMod, { openModal: SensProtMo }] = useModal();
+  const [addDataSecurityModal, { openModal: openAddDataSecurityModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+  let info = ref(infoList[0]);
+  const [
+    registerTable,
+    { getSelectRowKeys },
+  ] = useTable({
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        fieldName: '',
+        message: '',
+        data: tableData.value,
+      };
+
+      return { ...response };
+    },
+    striped: false,
+    rowKey: 'businessId',
+    columns,
+    clickToRowSelect: true,
+    formConfig: {
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    rowSelection: { type: 'radio' },
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+  });
+
+
+
+  const [rightTable, {reload, updateTableDataRecord, getRowSelection}] = useTable({
+    title: '字段保护规则',
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableDataRules.value.length,
+        object: '',
+        message: '',
+        data: tableDataRules.value,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    columns: FieldProtectionRules,
+    useSearchForm: false,
+    rowSelection: true,
+    autoSubmitOnEnter: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  function getKeys() {
+    console.log('keys', getSelectRowKeys());
+    const key = getSelectRowKeys()[0];
+    console.log('key', key);
+
+     info.value = infoList.find((item) => item.businessId === key);
+  }
+
+  /** 编辑按钮*/
+  function handleEdit(record: Recordable, isUpdate) {
+    console.log(isUpdate);
+    SensProtMo(true, {
+      record,
+      isUpdate: isUpdate,
+    });
+  }
+
+  /** 新增/编辑成功*/
+  function handleSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      // 演示不刷新表格直接更新内部数据。
+      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+      const result = updateTableDataRecord(values.id, values);
+      console.log(result);
+      reload();
+    } else {
+      reload();
+    }
+  }
+
+  /**删除按钮*/
+  function deleteButton() {
+    createConfirm({
+      iconType: 'warning',
+      title: '确认删除',
+      content: '确认批量删除选中数据吗？',
+      onOk() {
+        createMessage.success('删除成功!');
+        reload();
+      },
+    });
+  }
+
+  function addRules() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+
+  function AddDataSecurityPolicy() {
+    openAddDataSecurityModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  onMounted(() => {});
+</script>

src/views/dataService/APIDataSecurity/SensitiveProtection/mock.ts

+import { DescItem } from '@/components/Description';
+import { TreeItem } from '@/components/Tree';
+
+export const personSchema: DescItem[] = [
+  {
+    field: 'fieldCode',
+    label: '字段code',
+  },
+  {
+    field: 'sensitiveState',
+    label: '敏感状态',
+  },
+  {
+    field: 'level',
+    label: '安全分级',
+  },
+  {
+    field: 'sensitiveType',
+    label: '敏感类型',
+  },
+];
+export const infoList = [
+  {
+    businessId: '301',
+    fieldCode: 'id',
+    sensitiveState: '非敏感',
+    level: 'G2',
+    sensitiveType: 'AccessKey ID',
+  },
+  {
+    businessId: '120',
+    fieldCode: 'password',
+    sensitiveState: '敏感',
+    level: 'G1',
+    sensitiveType: '钱包类型',
+  },
+];
+
+export const tableList: any[] = [
+  {
+    businessId: '301',
+    fieldName: 'id',
+    fieldType: '请求入参',
+    fieldCode: 'id',
+    APIName: 'xw-input&o..',
+    path: '共享工作区/test/托管系统',
+    APIModel: '向导模式',
+  },
+  {
+    businessId: '120',
+    fieldName: 'password',
+    fieldType: '请求入参',
+    fieldCode: 'password',
+    APIName: 'WARP-106319',
+    path: '共享工作区/test/托管系统',
+    APIModel: '托管模式',
+  },
+];
+
+export const tableRulesList: any[] = [
+  {
+    businessId: '401',
+    object: '系统管理员',
+    priority: '高',
+    ProtectiveAction: '放行',
+  },
+  {
+    businessId: '402',
+    object: 'admin',
+    objectProperties:'用户',
+    priority: '中',
+    ProtectiveAction: '脱敏',
+  },
+  {
+    businessId: '403',
+    object: '数据平台整理部',
+    objectProperties:'机构',
+    priority: '高',
+    ProtectiveAction: '放行',
+  },
+];
+
+export const treeData: TreeItem[] = [
+  {
+    name: '本页用户',
+    key: '1-2',
+
+
+  },
+  {
+    name: 'admin(admin)',
+    key: '1-3',
+
+  },
+];
+
+export const treeDataTwo: TreeItem[] = [
+  {
+    title: '全部结构 ',
+    key: '1-0',
+    children: [],
+  },
+  {
+    title: '机构管理 ',
+    key: '0-0',
+    icon: 'ion:settings-outline',
+    children: [
+      {
+        title: '数据平台治理部',
+        key: '0-0-1',
+        children: [
+          {
+            key: '0-0-1-1',
+          },
+        ],
+      },
+      {
+        title: '系统管理',
+        key: '0-0-2',
+        icon: 'ion:settings-outline',
+        children: [
+          {
+            key: '0-0-2-1',
+          }
+        ],
+      },
+      {
+        title: '数据资源管理部',
+        key: '0-0-3',
+        icon: 'ion:settings-outline',
+        children: [
+          {
+            key: '0-0-3-1',
+          }
+        ],
+      },
+    ],
+  },
+];

src/views/dataService/APIDataSecurity/SensitiveProtection/sensitiveProtection.data.ts

+
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+
+/** 列表筛选项*/
+export const searchFormSchema: FormSchema[] = [
+
+  {
+    field: 'APIName',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 8.1 },
+    componentProps: {
+      placeholder: '输入API名称进行搜索',
+    },
+  },
+  {
+    field: 'APIModel',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      placeholder: 'API模式',
+      options: [
+        { label: 'SQL模式', value: 'SQL模式' },
+        { label: '托管模式', value: '托管模式' },
+        { label: '向导模式', value: '向导模式' },
+      ],
+    },
+  },
+
+
+];
+
+/** 列表展示字段*/
+export const columns: BasicColumn[] = [
+  {
+    title: '字段名',
+    dataIndex: 'fieldName',
+    width: 120,
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'fieldType',
+    width: 100,
+  },
+  {
+    title: '字段code',
+    dataIndex: 'fieldCode',
+    width: 100,
+  },
+  {
+    title: 'API名称',
+    dataIndex: 'APIName',
+    width: 140,
+  },
+  {
+    title: '路径',
+    dataIndex: 'path',
+    width: 140,
+  },
+  {
+    title: 'API模式',
+    dataIndex: 'APIModel',
+    width: 140,
+  },
+];
+
+
+export const FieldProtectionRules: BasicColumn[] = [
+  {
+    title: '对象',
+    dataIndex: 'object',
+    width: 120,
+  },
+  {
+    title: '对象属性',
+    dataIndex: 'objectProperties',
+    width: 120,
+  },
+  {
+    title: '优先级',
+    dataIndex: 'priority',
+    width: 100,
+  },
+  {
+    title: '保护动作',
+    dataIndex: 'ProtectiveAction',
+    width: 100,
+  },
+
+];
+
+
+/** 添加规则表单字段*/
+export const formSchema: any[] = [
+  {
+    field: 'priority',
+    label: '优先级',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      // placeholder: '优先级',
+      options: [
+
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        // message: '请选择保护动作',
+      },
+    ],
+  },
+  {
+    field: 'ProtectiveAction',
+    label: '保护动作',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      // placeholder: '保护动作',
+      options: [
+        // { label: '放行', value: '放行' },
+        // { label: '脱敏', value: '脱敏' },
+        // { label: '拒绝', value: '拒绝' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        // message: '请选择保护动作',
+      },
+    ],
+  },
+  {
+    field: 'protectiveActionFun',
+    label: '脱敏算法',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '脱敏算法',
+      options: [
+        { label: 'Unbase64', value: 'Unbase64' },
+      ],
+    },
+    ifShow: ({ values }) => values.protectiveAction === '脱敏',
+    rules: [
+      {
+        required: true,
+        message: '请选择脱敏算法',
+      },
+    ],
+  },
+  {
+    field: 'name',
+    label: '算法参数',
+    component: 'Input',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '算法参数',
+    },
+    ifShow: ({ values }) => values.protectiveAction === '脱敏',
+  },
+]
+
+
+/** 查看编辑表单字段*/
+export const sensitiveFormSchema: any[] = [
+  {
+    field: 'object',
+    label: '对象',
+    component: 'Input',
+    colProps: { span: 3 },
+  },
+  {
+    field: 'objectProperties',
+    label: '对象属性',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '属性类型',
+      options: [
+        { label: '用户', value: '用户' },
+        { label: '机构', value: '机构' },
+
+      ],
+    },
+  },
+  {
+    field: 'priority',
+    label: '优先级',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      // placeholder: '优先级',
+      options: [
+
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        // message: '请选择保护动作',
+      },
+    ],
+  },
+  {
+    field: 'ProtectiveAction',
+    label: '保护动作',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      // placeholder: '保护动作',
+      options: [
+        { label: '放行', value: '放行' },
+        { label: '脱敏', value: '脱敏' },
+        { label: '拒绝', value: '拒绝' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        // message: '请选择保护动作',
+      },
+    ],
+  },
+]
+
+
+export const roleColumn: BasicColumn[] = [
+  {
+    title: '全部角色',
+    dataIndex: 'name'
+  },
+];
+export const roleColumn2: BasicColumn[] = [
+  {
+    title: '全部用户',
+    dataIndex: 'name'
+  },
+];
+
+

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

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @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>
+      </div>
+    </div>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { sensitiveFormSchema } from './sensitiveProtection.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: sensitiveFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '查看字段保护规则';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: true } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: true } },
+        { field: 'level', required: false, componentProps: { disabled: true } },
+      ]);
+    } else {
+      title.value = '编辑字段保护规则';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    padding: 0 0 20px 20px;
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

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

+<template>
+  <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>
+          </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'" />
+            </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>
+          </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'" />
+            </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>
+          </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(
+  [
+
+  ]
+) ;
+//获取接口数据并放在下拉框里（这里是打开了一个弹框）
+//初始化表单
+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)
+}
+
+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>
+<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>