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,31 +29,32 @@
         </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 { columns, searchFormSchema } from './classificationAndGrading.data';
-  import { tableList } from './mock';
+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 { 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({
+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);
@@ -61,12 +68,15 @@
       data: tableData.value,
     };
 
-      return { ...response };
+    return {...response};
   },
   rowKey: 'id',
   columns,
   formConfig: {
     // labelWidth: 10,
+    actionColOptions: {
+      span: 3,
+    },
     schemas: searchFormSchema,
     autoSubmitOnEnter: true,
   },
@@ -95,32 +105,34 @@
     dataIndex: 'action',
     // slots: { customRender: 'action' },
   },
-  });
-  /** 新增按钮*/
-  function handleCreate() {
+});
+
+/** 新增按钮*/
+function handleCreate() {
   openModal(true, {
     isUpdate: false,
   });
-  }
-  /** 编辑按钮*/
-  function handleEdit(record: Recordable, isUpdate) {
+}
+
+/** 编辑按钮*/
+function handleEdit(record: Recordable, isUpdate) {
   console.log(isUpdate);
   openModal(true, {
     record,
     isUpdate: isUpdate,
   });
-  }
+}
 
-  /** 重置密码弹窗确定按钮*/
-  /** 删除按钮*/
-  function handleDelete(record: Recordable) {
+/** 重置密码弹窗确定按钮*/
+/** 删除按钮*/
+function handleDelete(record: Recordable) {
   console.log(record);
   createMessage.success('删除成功!');
   reload();
-  }
+}
 
-  /** 新增/编辑成功*/
-  function handleSuccess({ isUpdate, values }) {
+/** 新增/编辑成功*/
+function handleSuccess({isUpdate, values}) {
   if (isUpdate) {
     // 演示不刷新表格直接更新内部数据。
     // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
@@ -130,12 +142,12 @@
   } else {
     reload();
   }
-  }
+}
 
-  let source = 0; // 源目标数据序号
-  let target = 0; // 目标数据序号
-  // Table拖拽
-  function customRow(record, index) {
+let source = 0; // 源目标数据序号
+let target = 0; // 目标数据序号
+// Table拖拽
+function customRow(record, index) {
   console.log(record, index); // 这里输出是表格全部的数据
   return {
     props: {
@@ -185,6 +197,9 @@
       console.log(record, index, 'target', source, target);
     },
   };
-  }
-  onMounted(() => {});
+}
+
+onMounted(() => {
+});
 </script>
+