API数据安全-分类分级-列表bug

src/views/dataService/APIDataSecurity/classificationAndGrading/classificationAndGrading.data.ts

@@ -31,7 +31,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'APIModel',
     label: ' ',
     component: 'Select',
-    colProps: { span: 2 },
+    colProps: { span:3 },
     componentProps: {
       placeholder: 'API模式',
       options: [
@@ -45,7 +45,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'sensitiveState',
     label: ' ',
     component: 'Select',
-    colProps: { span: 2 },
+    colProps: { span: 3},
     componentProps: {
       placeholder: '敏感状态',
       options: [
@@ -58,7 +58,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'level',
     label: ' ',
     component: 'Select',
-    colProps: { span: 2 },
+    colProps: { span: 3 },
     componentProps: {
       placeholder: '安全分级',
       options: [

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

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <template #title>
+      <div style="display: flex;align-items: center">
+        <Icon icon="ant-design:switcher-outlined" :size="24" style="color:#0960BD;"/>
+        <span style="margin-left: 10px">分类分级</span>
+      </div>
+    </template>
     <BasicTable @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
         <a-button type="primary" @click="handleImport">批量导入</a-button>
@@ -23,168 +29,177 @@
         </template>
       </template>
     </BasicTable>
-    <ClassificationAndGradingModal @register="registerModal" @success="handleSuccess" />
+    <ClassificationAndGradingModal @register="registerModal" @success="handleSuccess"/>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref, 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 {ref, 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 Icon from "@/components/Icon/Icon.vue";
+import {columns, searchFormSchema} from './classificationAndGrading.data';
+import {tableList} from './mock';
 
-  import { columns, searchFormSchema } from './classificationAndGrading.data';
-  import { tableList } from './mock';
+import {useRoute, onBeforeRouteLeave} from 'vue-router';
+import {router} from '@/router';
+import ClassificationAndGradingModal
+  from '@/views/dataService/APIDataSecurity/classificationAndGrading/ClassificationAndGradingModal.vue';
+import {metadataData} from '@/views/metadata/metadataData';
 
-  import { useRoute, onBeforeRouteLeave } from 'vue-router';
-  import { router } from '@/router';
-  import ClassificationAndGradingModal from '@/views/dataService/APIDataSecurity/classificationAndGrading/ClassificationAndGradingModal.vue';
-  import { metadataData } from '@/views/metadata/metadataData';
-
-  const { createMessage } = useMessage();
-  const route = useRoute();
-  let tableData = ref(tableList);
-  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: tableData.value.length,
-        code: '',
-        message: '',
-        data: tableData.value,
-      };
+const {createMessage} = useMessage();
+const route = useRoute();
+let tableData = ref(tableList);
+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: tableData.value.length,
+      code: '',
+      message: '',
+      data: tableData.value,
+    };
 
-      return { ...response };
-    },
-    rowKey: 'id',
-    columns,
-    formConfig: {
-      // labelWidth: 10,
-      schemas: searchFormSchema,
-      autoSubmitOnEnter: true,
-    },
-    customRow: customRow,
-    useSearchForm: true,
-    showTableSetting: false,
-    showIndexColumn: false,
-    bordered: true,
-    handleSearchInfoFn(info) {
-      // console.log('handleSearchInfoFn', info);
-      tableData.value = tableList.filter(
-        (item) =>
-          (info.fieldCode === undefined || item.fieldCode.includes(info.fieldCode)) &&
-          (info.APIName === undefined || item.APIName.includes(info.APIName)) &&
-          (info.APIModel === undefined || item.APIModel === info.APIModel) &&
-          (info.sensitiveState === undefined || item.sensitiveState === info.sensitiveState) &&
-          (info.sensitiveType === undefined || item.sensitiveType === info.sensitiveType) &&
-          (info.level === undefined || item.level === info.level),
-      );
-      // console.log('tableData', tableData.value);
-      return info;
-    },
-    actionColumn: {
-      width: 160,
-      title: '操作',
-      dataIndex: 'action',
-      // slots: { customRender: 'action' },
+    return {...response};
+  },
+  rowKey: 'id',
+  columns,
+  formConfig: {
+    // labelWidth: 10,
+    actionColOptions: {
+      span: 3,
     },
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+  },
+  customRow: customRow,
+  useSearchForm: true,
+  showTableSetting: false,
+  showIndexColumn: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    // console.log('handleSearchInfoFn', info);
+    tableData.value = tableList.filter(
+      (item) =>
+        (info.fieldCode === undefined || item.fieldCode.includes(info.fieldCode)) &&
+        (info.APIName === undefined || item.APIName.includes(info.APIName)) &&
+        (info.APIModel === undefined || item.APIModel === info.APIModel) &&
+        (info.sensitiveState === undefined || item.sensitiveState === info.sensitiveState) &&
+        (info.sensitiveType === undefined || item.sensitiveType === info.sensitiveType) &&
+        (info.level === undefined || item.level === info.level),
+    );
+    // console.log('tableData', tableData.value);
+    return info;
+  },
+  actionColumn: {
+    width: 160,
+    title: '操作',
+    dataIndex: 'action',
+    // slots: { customRender: 'action' },
+  },
+});
+
+/** 新增按钮*/
+function handleCreate() {
+  openModal(true, {
+    isUpdate: false,
   });
-  /** 新增按钮*/
-  function handleCreate() {
-    openModal(true, {
-      isUpdate: false,
-    });
-  }
-  /** 编辑按钮*/
-  function handleEdit(record: Recordable, isUpdate) {
-    console.log(isUpdate);
-    openModal(true, {
-      record,
-      isUpdate: isUpdate,
-    });
-  }
+}
+
+/** 编辑按钮*/
+function handleEdit(record: Recordable, isUpdate) {
+  console.log(isUpdate);
+  openModal(true, {
+    record,
+    isUpdate: isUpdate,
+  });
+}
+
+/** 重置密码弹窗确定按钮*/
+/** 删除按钮*/
+function handleDelete(record: Recordable) {
+  console.log(record);
+  createMessage.success('删除成功!');
+  reload();
+}
 
-  /** 重置密码弹窗确定按钮*/
-  /** 删除按钮*/
-  function handleDelete(record: Recordable) {
-    console.log(record);
-    createMessage.success('删除成功!');
+/** 新增/编辑成功*/
+function handleSuccess({isUpdate, values}) {
+  if (isUpdate) {
+    // 演示不刷新表格直接更新内部数据。
+    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+    const result = updateTableDataRecord(values.id, values);
+    console.log(result);
+    reload();
+  } else {
     reload();
   }
+}
 
-  /** 新增/编辑成功*/
-  function handleSuccess({ isUpdate, values }) {
-    if (isUpdate) {
-      // 演示不刷新表格直接更新内部数据。
-      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
-      const result = updateTableDataRecord(values.id, values);
-      console.log(result);
-      reload();
-    } else {
-      reload();
-    }
-  }
+let source = 0; // 源目标数据序号
+let target = 0; // 目标数据序号
+// Table拖拽
+function customRow(record, index) {
+  console.log(record, index); // 这里输出是表格全部的数据
+  return {
+    props: {
+      // draggable: 'true'
+    },
+    style: {
+      cursor: 'pointer',
+    },
+    // 鼠标移入
+    onMouseenter: (event) => {
+      // 兼容IE
+      let ev = event || window.event;
+      ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
+    },
+    // 开始拖拽
+    onDragstart: (event) => {
+      // 兼容IE
+      let ev = event || window.event;
+      // 阻止冒泡
+      ev.stopPropagation();
+      // 得到源目标数据序号
+      source = index;
+      console.log(record, index, 'source');
+    },
+    // 拖动元素经过的元素
+    onDragover: (event) => {
+      // 兼容 IE
+      let ev = event || window.event;
+      // 阻止默认行为
+      ev.preventDefault();
+    },
+    // 鼠标松开
+    onDrop: (event) => {
+      // 兼容IE
+      let ev = event || window.event;
+      // 阻止冒泡
+      ev.stopPropagation();
+      // 得到目标数据序号
+      target = index;
+      // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
+      console.log(tableData);
+      // [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
+      const temp = ref();
+      temp.value = tableData.value[source];
+      tableData.value[source] = tableData.value[target];
+      tableData.value[target] = temp.value;
+      console.log(record, index, 'target', source, target);
+    },
+  };
+}
 
-  let source = 0; // 源目标数据序号
-  let target = 0; // 目标数据序号
-  // Table拖拽
-  function customRow(record, index) {
-    console.log(record, index); // 这里输出是表格全部的数据
-    return {
-      props: {
-        // draggable: 'true'
-      },
-      style: {
-        cursor: 'pointer',
-      },
-      // 鼠标移入
-      onMouseenter: (event) => {
-        // 兼容IE
-        let ev = event || window.event;
-        ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
-      },
-      // 开始拖拽
-      onDragstart: (event) => {
-        // 兼容IE
-        let ev = event || window.event;
-        // 阻止冒泡
-        ev.stopPropagation();
-        // 得到源目标数据序号
-        source = index;
-        console.log(record, index, 'source');
-      },
-      // 拖动元素经过的元素
-      onDragover: (event) => {
-        // 兼容 IE
-        let ev = event || window.event;
-        // 阻止默认行为
-        ev.preventDefault();
-      },
-      // 鼠标松开
-      onDrop: (event) => {
-        // 兼容IE
-        let ev = event || window.event;
-        // 阻止冒泡
-        ev.stopPropagation();
-        // 得到目标数据序号
-        target = index;
-        // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
-        console.log(tableData);
-        // [tableData.value[source], tableData.value[target]] = [tableData.value[target], tableData.value[source]];
-        const temp = ref();
-        temp.value = tableData.value[source];
-        tableData.value[source] = tableData.value[target];
-        tableData.value[target] = temp.value;
-        console.log(record, index, 'target', source, target);
-      },
-    };
-  }
-  onMounted(() => {});
+onMounted(() => {
+});
 </script>
+