数据整合-任务运维-左上筛选表单

src/views/dataIntegration/taskOM/index.vue

@@ -5,15 +5,20 @@
     <Row :gutter="16" class="homePage_left">
       <Col :span="24">
         <Card>
+          <div style="flex: 1">
+            <div class="ml-1 mt-1">
+              <BasicForm @register="registerForm"/>
+            </div>
             <div class="card_content">
-            <Col :span="4">
+              <col :span="3" />
+              <Col :span="3">
                 <div class="card_item">
                   <div class="card_itemInfo">
                     <div ref="chartRef" :style="{ width, height }"></div>
                   </div>
                 </div>
               </Col>
-            <Col :span="4" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }">
+              <Col :span="3" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }">
                 <div class="card_item">
                   <div class="card_itemInfo">
                     <div class="dataNum">10</div>
@@ -21,7 +26,7 @@
                   </div>
                 </div>
               </Col>
-            <Col :span="4" @click="clickButton(2)" :class="{ 'listItemClass': selectedItem === 2 }">
+              <Col :span="3" @click="clickButton(2)" :class="{ 'listItemClass': selectedItem === 2 }">
                 <div class="card_item">
                   <Icon icon="ant-design:check-circle-filled" :size="30" :color="'rgb(84,198,159)'" />
                   <div class="card_itemInfo">
@@ -30,7 +35,7 @@
                   </div>
                 </div>
               </Col>
-            <Col :span="4" @click="clickButton(3)" :class="{ 'listItemClass': selectedItem === 3 }">
+              <Col :span="3" @click="clickButton(3)" :class="{ 'listItemClass': selectedItem === 3 }">
                 <div class="card_item">
                   <Icon icon="line-md:loading-twotone-loop" :size="30" :color="'rgb(81, 160, 248)'" />
                   <div class="card_itemInfo">
@@ -39,7 +44,7 @@
                   </div>
                 </div>
               </Col>
-            <Col :span="4" @click="clickButton(4)" :class="{ 'listItemClass': selectedItem === 4 }">
+              <Col :span="3" @click="clickButton(4)" :class="{ 'listItemClass': selectedItem === 4 }">
                 <div class="card_item">
                   <Icon icon="line-md:close-circle-filled" :size="30" :color="'rgb(212, 115, 113)'" />
                   <div class="card_itemInfo">
@@ -48,7 +53,7 @@
                   </div>
                 </div>
               </Col>
-            <Col :span="4" @click="clickButton(5)" :class="{ 'listItemClass': selectedItem === 5 }">
+              <Col :span="3" @click="clickButton(5)" :class="{ 'listItemClass': selectedItem === 5 }">
                 <div class="card_item">
                   <Icon icon="ri:hourglass-fill" :size="30" :color="'rgb(147, 140, 206)'" />
                   <div class="card_itemInfo">
@@ -57,6 +62,8 @@
                   </div>
                 </div>
               </Col>
+              <col :span="3" />
+            </div>
           </div>
         </Card>
       </Col>
@@ -109,10 +116,11 @@ import {useGo} from "@/hooks/web/usePage";
 import DeptTree from "./DeptTable.vue";
 import {BasicTable, TableAction, useTable} from "@/components/Table";
 import {tableList,mockData} from "./mock";
-import { columns,searchFormSchema,schema } from "./taskOM.data"
+import { columns,searchFormSchema,schema,resetNameFormSchema } from "./taskOM.data"
 import {Description, useDescription} from "@/components/Description";
 import {push} from "echarts/types/src/component/dataZoom/history";
 import {router} from "@/router";
+import {BasicForm,useForm} from "@/components/Form";
 
 defineOptions({ name: 'AccountManagement' });
 
@@ -193,6 +201,17 @@ watch(
   },
   { immediate: true },
 );
+//初始化表单
+const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { lg: 24, md: 24 },
+  schemas: resetNameFormSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+
 /**列表right*/
 const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
   title: '执行记录',
@@ -279,7 +298,8 @@ function clickButton(item){
   ::v-deep(.ant-card-body) {
     display: flex;
     justify-content: center;
-    height: 180px;
+    height: 150px;
+    padding: 0;
   }
   .homePage_left {
     ::v-deep(.ant-tabs-tab) {
@@ -287,7 +307,7 @@ function clickButton(item){
       font-weight: 600;
     }
     .card_content {
-      width: 70%;
+      width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;

src/views/dataIntegration/taskOM/taskOM.data.ts

@@ -65,6 +65,103 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
+/**左上角表单*/
+export const resetNameFormSchema: FormSchema[] = [
+  {
+    field: 'schedulingTime',
+    component: 'RadioButtonGroup',
+    colProps: {
+      lg: 4, md: 4,
+    },
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        {
+          label: '调度时间',
+          value: '1',
+        },
+        {
+          label: '执行时间',
+          value: '2',
+        },
+      ],
+      onChange: (e) => {
+        console.log(e);
+      },
+    },
+  },
+ {
+    field: 'days',
+    component: 'DatePicker',
+    colProps: {
+        lg: 3,
+        md: 3,
+    },
+    defaultValue: new Date(),
+    componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: '选择日期范围',
+    },
+},
+
+  {
+    field: 'schedulingType',
+    component: 'Select',
+    label: '调度类型',
+    colProps: {
+      lg: 4, md: 4,
+    },
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        {
+          label: '不限',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: '不限2',
+          value: '2',
+          key: '2',
+        },
+        {
+          label: '不限3',
+          value: '3',
+          key: '3',
+        },
+      ],
+    },
+  },
+  {
+    field: 'publishingStatus',
+    component: 'Select',
+    label: '发布状态',
+    colProps: {
+      lg: 4, md: 4,
+    },
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        {
+          label: '不限',
+          value: '1',
+          key: '1',
+        },
+        {
+          label: '不限2',
+          value: '2',
+          key: '2',
+        },
+        {
+          label: '不限3',
+          value: '3',
+          key: '3',
+        },
+      ],
+    },
+  },
+];
+
 export const schema: DescItem[] = [
   {
     field: 'schedulingCycle',