案件撤回优化时间范围取值

src/views/demo/workflow/revocation/index.vue

@@ -1,24 +1,29 @@
 <template>
   <div style="width: 100%">
-    <BasicTable @register="registerTable" :searchInfo="searchInfo">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                label: '详情',
-                onClick: handleDetail.bind(null, record),
-              },
-              {
-                label: '撤回',
-                color: 'error',
-                onClick: revokeBtnClick.bind(null, record),
-              },
-            ]"
-          />
+    <div class="search-box">
+      <BasicForm @register="registerForm" :labelWidth="100" :actionColOptions="{ span: 24 }" />
+    </div>
+    <div class="table-box">
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  label: '详情',
+                  onClick: handleDetail.bind(null, record),
+                },
+                {
+                  label: '撤回',
+                  color: 'error',
+                  onClick: revokeBtnClick.bind(null, record),
+                },
+              ]"
+            />
+          </template>
         </template>
-      </template>
-    </BasicTable>
+      </BasicTable>
+    </div>
     <a-modal
       width="100%"
       wrap-class-name="full-modal"
@@ -39,16 +44,17 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, h, ref, watch, onMounted } from 'vue';
+  import { reactive, ref, watch, onMounted } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { getRetractPageList } from '@/api/sys/WFTask';
   import { getDetail } from '@/api/sys/WFSchemeInfo';
-  import { Tag } from 'ant-design-vue';
   import { flowStore } from '@/store/modules/flow';
-  import { useRoute, useRouter } from 'vue-router';
+  import { useRoute } from 'vue-router';
   import { retract } from '@/api/sys/WFProcess';
   import { useMessage } from '@/hooks/web/useMessage';
   import { Look } from '@/views/demo/workflow/task/process/page';
+  import { BasicForm, useForm } from '@/components/Form';
+  import dayjs from 'dayjs';
 
   const { createConfirm, createMessage } = useMessage();
   const props = defineProps({
@@ -72,8 +78,92 @@
   const route: any = useRoute();
   const code = ref(route.params.id);
   searchInfo.Code = code.value;
-  const [registerTable, { reload }] = useTable({
-    api: getRetractPageList,
+  const tableData = ref([]);
+  const searchParams = ref({
+    page: 1,
+    limit: 10,
+    Code: code.value,
+  });
+  const tablePaginationRight = ref({
+    current: 1,
+    pageSize: 10,
+    size: 'small',
+    defaultPageSize: 10,
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '50', '80', '100'],
+    showQuickJumper: true,
+    total: 0,
+  });
+  const [registerForm, { validate, getFieldsValue }] = useForm({
+    schemas: [
+      {
+        field: '[StartDate, EndDate]',
+        label: '日期范围',
+        component: 'RangePicker',
+        colProps: { span: 8 },
+        componentProps: {
+          format: 'YYYY-MM-DD',
+          placeholder: ['开始日期', '结束日期'],
+        },
+      },
+      {
+        field: 'CaseNo',
+        label: '图斑编号',
+        component: 'Input',
+        colProps: { span: 6 },
+      },
+    ],
+    labelWidth: 100,
+    baseColProps: { span: 6 },
+    actionColOptions: { span: 24 },
+    autoSubmitOnEnter: true,
+    submitFunc: handleSubmit,
+    resetFunc: handleReset,
+    autoSubmitOnEnter: handleSubmit,
+  });
+  function handleSubmit() {
+    searchParams.value = getFieldsValue();
+    searchParams.value.page = 1;
+    searchParams.value.Code = code.value;
+    tablePaginationRight.value.current = 1;
+    searchParams.value.limit = tablePaginationRight.value.pageSize;
+    getTableData(searchParams.value);
+  }
+  async function getTableData(querys) {
+    if (querys.StartDate && querys.EndDate) {
+      querys.StartDate = dayjs(querys.StartDate).format('YYYY-MM-DD');
+      querys.EndDate = dayjs(querys.EndDate).endOf('day').format('YYYY-MM-DD HH:mm:ss');
+    }
+    setLoading(true);
+    await getRetractPageList(querys).then((res) => {
+      tableData.value = res.items;
+      tablePaginationRight.value.total = res.total;
+      setTableData(tableData.value);
+      setPagination(tablePaginationRight.value);
+      setLoading(false);
+    });
+  }
+  function handleReset() {
+    searchParams.value = {
+      page: 1,
+      limit: 10,
+      Code: code.value,
+    };
+    tablePaginationRight.value.current = 1;
+    getTableData(searchParams.value);
+  }
+  function handleChange(data) {
+    searchParams.value.page = data.current;
+    searchParams.value.limit = data.pageSize;
+    tablePaginationRight.value = data;
+    getTableData(searchParams.value);
+  }
+  onMounted(() => {
+    getTableData(searchParams.value);
+  });
+  const [registerTable, { setTableData, reload, setPagination, setLoading }] = useTable({
+    // api: getRetractPageList,
+    dataSource: tableData.value,
     columns: [
       {
         title: '图斑编号',
@@ -106,32 +196,12 @@
       },
     ],
     rowKey: 'id',
-    formConfig: {
-      labelWidth: 120,
-      showAdvancedButton: false,
-      autoSubmitOnEnter: true,
-      schemas: [
-        {
-          field: '[StartDate, EndDate]',
-          label: '日期范围',
-          component: 'RangePicker',
-          componentProps: {
-            format: 'YYYY-MM-DD',
-            placeholder: ['开始日期', '结束日期'],
-          },
-        },
-        {
-          field: 'CaseNo',
-          label: '图斑编号',
-          component: 'Input',
-          colProps: { span: 8 },
-        },
-      ],
-    },
-    useSearchForm: true,
+    useSearchForm: false,
     showTableSetting: true,
     bordered: true,
+    // 搜索
     handleSearchInfoFn(info) {
+      searchParams.value = info;
       return info;
     },
     actionColumn: {
@@ -140,10 +210,11 @@
       dataIndex: 'action',
       // slots: { customRender: 'action' },
     },
+    pagination: tablePaginationRight.value,
   });
   function closeMolder() {
     auditOpen.value = false;
-    reload();
+    getTableData(searchParams.value);
   }
   //   详情
   async function handleDetail(record) {
@@ -170,7 +241,7 @@
           des: '',
         });
         if (data) {
-          reload();
+          getTableData(searchParams.value);
           return createMessage.success('成功');
         } else {
           return createMessage.error('失败');
@@ -199,3 +270,18 @@
     height: 95% !important;
   }
 </style>
+<style lang="less" scoped>
+  .search-box {
+    background: @component-background;
+    margin: 16px;
+    padding: 16px;
+  }
+  ::v-deep .search-box .ant-col-24 {
+    display: inline-block;
+    max-width: fit-content;
+    margin-left: 20px;
+  }
+  .table-box {
+    margin: 16px;
+  }
+</style>