分类分级结果

src/views/dataSecurity/gradingResults/gradingResults.data.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
+type CheckedType = boolean | string | number;
+
+/** 列表筛选项*/
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'dataLink',
+    label: '',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '请选择数据链接',
+      options: [
+        { label: '17kundb', value: '17kundb' },
+        { label: 'postgres', value: 'postgres' },
+        { label: '18inceptor', value: '18inceptor' },
+      ],
+    },
+  },
+  {
+    field: 'databaseLink',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '请选择数据库链接',
+      options: [
+        { label: 'DEMO', value: 'DEMO' },
+        { label: 'test_zhongjiao', value: 'test_zhongjiao' },
+      ],
+    },
+  },
+  {
+    field: 'dataTable',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '请选择数据表链接',
+      options: [
+        { label: 'fs_assets', value: 'fs_assets' },
+        { label: 'company_base', value: 'company_base' },
+      ],
+    },
+  },
+  {
+    field: 'name',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '字段名',
+    },
+  },
+  {
+    field: 'flag',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感状态',
+      options: [
+        { label: '敏感', value: '敏感' },
+        { label: '不敏感', value: '不敏感' },
+      ],
+    },
+  },
+  {
+    field: 'level',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '安全分级',
+      options: [
+        { label: 'G1', value: 'G1' },
+        { label: 'G2', value: 'G2' },
+        { label: 'G3', value: 'G3' },
+      ],
+    },
+  },
+  {
+    field: 'sensitiveType',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感类型',
+      options: [
+        { label: 'dy类型1', value: 'dy类型1' },
+        { label: 'dy类型2', value: 'dy类型2' },
+        { label: '担保方式', value: '担保方式' },
+      ],
+    },
+  },
+];
+
+/** 列表展示字段*/
+export const columns: BasicColumn[] = [
+  {
+    title: '数据链接',
+    dataIndex: 'dataLink',
+    width: 120,
+  },
+  {
+    title: '数据目录',
+    dataIndex: 'dataContents',
+    width: 120,
+  },
+  {
+    title: '数据库',
+    dataIndex: 'databaseLink',
+    width: 120,
+  },
+  {
+    title: '数据表',
+    dataIndex: 'dataTable',
+    width: 140,
+  },
+  {
+    title: '字段名',
+    dataIndex: 'name',
+    width: 140,
+  },
+  {
+    title: '敏感状态',
+    dataIndex: 'flag',
+    width: 180,
+  },
+  {
+    title: '安全分级',
+    dataIndex: 'level',
+    width: 180,
+  },
+  {
+    title: '敏感类型',
+    dataIndex: 'sensitiveType',
+    width: 180,
+  },
+];
+
+/** 新增编辑表单字段*/
+export const formSchema: any[] = [
+  {
+    field: 'flag',
+    label: '敏感状态',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感状态',
+      options: [
+        { label: '敏感', value: '敏感' },
+        { label: '不敏感', value: '不敏感' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择敏感状态',
+      },
+    ],
+  },
+  {
+    field: 'sensitiveType',
+    label: '敏感类型',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '敏感类型',
+      options: [
+        { label: 'dy类型1', value: 'dy类型1' },
+        { label: 'dy类型2', value: 'dy类型2' },
+        { label: '担保方式', value: '担保方式' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择敏感类型',
+      },
+    ],
+  },
+  {
+    field: 'level',
+    label: '安全分级',
+    component: 'Select',
+    colProps: { span: 3 },
+    componentProps: {
+      placeholder: '安全分级',
+      options: [
+        { label: 'G1', value: 'G1' },
+        { label: 'G2', value: 'G2' },
+        { label: 'G3', value: 'G3' },
+        { label: 'G4', value: 'G4' },
+        { label: 'G5', value: 'G5' },
+      ],
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择安全分级',
+      },
+    ],
+  },
+]

src/views/dataSecurity/gradingResults/gradingResultsModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">uuid</div>
+        <div class="path">17kundb/foresight_foresight1/fs_assets/uuid</div>
+      </div>
+    </div>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive} from 'vue';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import { formSchema } from './gradingResults.data';
+import Icon from '@/components/Icon/Icon.vue';
+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 [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(() => ( '编辑分类分级'));
+
+
+
+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>
+.modal_top{
+  padding: 0 0 20px 20px;
+  display: flex;
+  align-items: center;
+  .title{
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+</style>

src/views/dataSecurity/gradingResults/importModal.vue

+<template>
+  <BasicModal min-height="100"  width="30%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <div class="modalBody">
+      <div class="title">导入文件选择</div>
+      <a-button style="margin-right: 10px"  >下载模板</a-button>
+      <a-button style="margin-right: 10px" type="primary" >选择</a-button>
+      <div style="width: 200px">只能导入单个Excel文件，且单次导入不超过100000条数据</div>
+    </div>
+
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive} from 'vue';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import { formSchema } from './gradingResults.data';
+import Icon from '@/components/Icon/Icon.vue';
+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 [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(() => ( '分类分级导入'));
+
+
+
+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>
+.modalBody{
+  display: flex;
+  align-items: center;
+  .title{
+    padding-right: 15px;
+
+  }
+}
+</style>

src/views/dataSecurity/gradingResults/index.vue

 <template>
-  <div>分类分级结果</div>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary" @click="handleImport">批量导入</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                label: '编辑',
+                onClick: handleEdit.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <gradingResultsModal @register="registerModal" @success="handleSuccess" />
+    <importModal @register="registerImport" @success="handleImportSuccess" />
+  </PageWrapper>
 </template>
-
 <script lang="ts" setup>
-</script>
+import { reactive, onMounted } from 'vue';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+import { useMessage } from '@/hooks/web/useMessage';
+import { useModal } from '@/components/Modal';
+import gradingResultsModal from './gradingResultsModal.vue';
+import importModal from './importModal.vue';
+
+import { columns, searchFormSchema } from './gradingResults.data';
+import {tableList} from "./mock";
+
+import { useRoute, onBeforeRouteLeave } from 'vue-router';
+import { router } from '@/router';
+
+defineOptions({ name: 'sensitiveRules' });
+const { createMessage } = useMessage();
+const route = useRoute();
+const [registerModal, { openModal }] = useModal();
+const [registerImport, { openModal: openImportModal }] = useModal();
+const searchInfo = reactive<Recordable>({});
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
+  title: '脱敏算法',
+  api: async (params) => {
+    console.log(params)
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableList.length,
+      code:'',
+      message:'',
+      data: tableList,
+    };
+
+    return { ...response};
+  },
+  rowKey: 'id',
+  columns,
+  formConfig: {
+    labelWidth: 10,
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+
+  },
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+  actionColumn: {
+    width: 120,
+    title: '操作',
+    dataIndex: 'action',
+    // slots: { customRender: 'action' },
+  },
+});
+/** 新增按钮*/
+function handleCreate() {
+  openModal(true, {
+    isUpdate: false,
+  });
+}
+/** 编辑按钮*/
+function handleEdit(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+  });
+}
 
-<style scoped>
+function handleImport() {
+  openImportModal(true, {
+  });
+}
 
-</style>
+/** 重置密码弹窗确定按钮*/
+/** 删除按钮*/
+function handleDelete(record: Recordable) {
+  console.log(record);
+  createMessage.success('删除成功!');
+  reload();
+}
+
+
+/** 新增/编辑成功*/
+function handleSuccess({ isUpdate, values }) {
+  if (isUpdate) {
+    // 演示不刷新表格直接更新内部数据。
+    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+    const result = updateTableDataRecord(values.id, values);
+    console.log(result);
+    reload();
+  } else {
+    reload();
+  }
+}
+
+
+onMounted(() => {
+
+});
+
+</script>

src/views/dataSecurity/gradingResults/mock.ts

+
+
+export const tableList: any[] = [
+  {
+    "dataLink" : "17kundb",
+    "dataContents" : "tangyibo",
+    "databaseLink" : "DEMO",
+    "dataTable" : "fs_assets",
+    "name" : "id",
+    "flag" : "敏感",
+    "level" : "G5",
+    "sensitiveType" : "dy类型1",
+  },
+  {
+    "dataLink" : "17kundb",
+    "dataContents" : "tangyibo",
+    "databaseLink" : "DEMO",
+    "dataTable" : "fs_assets",
+    "name" : "id",
+    "flag" : "敏感",
+    "level" : "G5",
+    "sensitiveType" : "dy类型1",
+  },
+  {
+    "dataLink" : "17kundb",
+    "dataContents" : "tangyibo",
+    "databaseLink" : "DEMO",
+    "dataTable" : "fs_assets",
+    "name" : "id",
+    "flag" : "敏感",
+    "level" : "G5",
+    "sensitiveType" : "dy类型1",
+  },
+  {
+    "dataLink" : "17kundb",
+    "dataContents" : "tangyibo",
+    "databaseLink" : "DEMO",
+    "dataTable" : "fs_assets",
+    "name" : "id",
+    "flag" : "敏感",
+    "level" : "G5",
+    "sensitiveType" : "dy类型1",
+  },
+  {
+    "dataLink" : "17kundb",
+    "dataContents" : "tangyibo",
+    "databaseLink" : "DEMO",
+    "dataTable" : "fs_assets",
+    "name" : "id",
+    "flag" : "敏感",
+    "level" : "G5",
+    "sensitiveType" : "dy类型1",
+  },
+  {
+    "dataLink" : "17kundb",
+    "dataContents" : "tangyibo",
+    "databaseLink" : "DEMO",
+    "dataTable" : "fs_assets",
+    "name" : "id",
+    "flag" : "敏感",
+    "level" : "G5",
+    "sensitiveType" : "dy类型1",
+  },
+  {
+    "dataLink" : "17kundb",
+    "dataContents" : "tangyibo",
+    "databaseLink" : "DEMO",
+    "dataTable" : "fs_assets",
+    "name" : "id",
+    "flag" : "敏感",
+    "level" : "G5",
+    "sensitiveType" : "dy类型1",
+  },
+
+
+
+]

src/views/homePage/index.vue

@@ -82,7 +82,7 @@
         <Card>
           <div class="process_title">
             <div class="title_info">流程</div>
-            <div class="process_more">全部流程>></div>
+            <div @click="handleJumpProcess" class="process_more">全部流程>></div>
           </div>
           <Row :gutter="16" class="process_content">
             <Col :span="12">
@@ -102,7 +102,7 @@
         <Card class="notice_card">
           <div class="process_title">
             <div class="title_info">通知<Badge :count="99" /></div>
-            <div class="process_more">通知中心>></div>
+            <div @click="handleJumpNotice" class="process_more">通知中心>></div>
           </div>
           <div
             v-for="(item,index) in processOptions"
@@ -126,7 +126,7 @@ import { Card, Col, Row, Space, message,Tabs,Badge } from 'ant-design-vue';
 import Icon from '@/components/Icon/Icon.vue';
 import { ref,reactive } from 'vue';
 import {AdvanceState} from "@/components/Form/src/types/hooks";
-
+import { router } from '@/router';
 const activeKey = ref('1');
 const processOptions = reactive<any>(
   [
@@ -137,6 +137,17 @@ const processOptions = reactive<any>(
     {level: '高',title: '[元数据变更]元数据变更通知',time: '2023-10-12 21:11:57'},
   ]
 );
+
+ function handleJumpProcess() {
+   router.push({
+     path: '/processCenter/index',
+   });
+ }
+ function handleJumpNotice() {
+   router.push({
+     path: '/notifications/noticeManage',
+   });
+ }
 </script>
 <style lang="scss" scoped>
 .homePage_module{