Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

.env.tiankongdi

@@ -13,9 +13,9 @@ VITE_BUILD_COMPRESS = 'none'
 # Basic interface address SPA
 # 天空地项目
 # VITE_GLOB_API_URL=http://120.222.154.7:6050
-VITE_GLOB_API_URL=http://192.168.10.102:9023
-# VITE_GLOB_API_URL=http://120.222.154.7:6050
+# VITE_GLOB_API_URL=http://192.168.10.102:9023
 # VITE_GLOB_API_URL=http://120.222.154.7:6050
+ VITE_GLOB_API_URL=http://120.222.154.7:6050
 # VITE_GLOB_API_URL=http://192.168.10.131:8989
 
 VITE_GLOB_INFO_IMAGE_URL=http://120.222.154.48:6050

src/views/demo/statistical/patchsummary/index.vue

@@ -1,26 +1,36 @@
 <template>
-  <div>
-    <BasicTable @register="registerTable" :searchInfo="searchInfo">
-      <template #toolbar>
-        <PermissionBtn @btn-event="onBtnClicked" />
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                // icon: 'ant-design:ellipsis-outlined',
-                label: '查看',
-                onClick: viewAccount.bind(null, record),
-              },
-            ]"
-          />
+  <PageWrapper dense contentFullHeight fixedHeight>
+    <div class="search-box">
+      <BasicForm
+        @register="registerForm"
+        :labelWidth="100"
+        :schemas="searchFormSchema"
+        :actionColOptions="{ span: 24 }"
+      />
+    </div>
+    <div class="table-box">
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
+        <template #toolbar>
+          <PermissionBtn @btn-event="onBtnClicked" />
         </template>
-        <template v-if="['area','gengdiarea'].includes(column.key)">
-          {{ dataProcessingCount(record[column.key]) }}
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  // icon: 'ant-design:ellipsis-outlined',
+                  label: '查看',
+                  onClick: viewAccount.bind(null, record),
+                },
+              ]"
+            />
+          </template>
+          <template v-if="['area', 'gengdiarea'].includes(column.key)">
+            {{ dataProcessingCount(record[column.key]) }}
+          </template>
         </template>
-      </template>
-    </BasicTable>
+      </BasicTable>
+    </div>
     <a-modal v-model:open="open" title="导出文件类型" :footer="null">
       <div>
         <a-button class="exportbutton" @click="handleExport('excel')">
@@ -45,10 +55,10 @@
         <ShowInfoModal :showInfoData="showInfoData" />
       </div>
     </a-modal>
-  </div>
+  </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
+  import { ref, reactive, onMounted } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { loadCaseInfoTuBanList } from '@/api/demo/system';
   import { PermissionBtn } from '@/components/PermissionBtn/index';
@@ -57,7 +67,9 @@
   import axios from 'axios';
   import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
   import { getCaseInfoById } from '@/api/tiankongdi/index';
-  import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts'
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { PageWrapper } from '@/components/Page';
 
   const { VITE_GLOB_API_URL } = getAppEnvConfig();
 
@@ -68,33 +80,52 @@
   });
   const showInfoData = ref();
   const showInfoOpen = ref(false);
-  const searchParams = ref();
-  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
-    title: '图斑汇总',
-    api: loadCaseInfoTuBanList,
-    columns,
-    rowKey: 'id',
-    formConfig: {
-      labelWidth: 120,
-      showAdvancedButton: false,
-      schemas: searchFormSchema,
-    },
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    // 搜索
-    handleSearchInfoFn(info) {
-      searchParams.value = info;
-      return info;
-    },
-    actionColumn: {
-      width: 80,
-      title: '操作',
-      dataIndex: 'action',
-      // slots: { customRender: 'action' },
-      fixed: 'right',
-    },
+  const searchParams = ref({
+    page: 1,
+    limit: 10,
   });
+  const tableData = ref([]);
+  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: searchFormSchema,
+    labelWidth: 80,
+    baseColProps: { span: 6 },
+    actionColOptions: { span: 24 },
+    autoSubmitOnEnter: true,
+    submitFunc: handleSubmit,
+  });
+  const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
+    useTable({
+      title: '图斑汇总',
+      dataSource: tableData.value,
+      columns,
+      rowKey: 'id',
+      useSearchForm: false,
+      showTableSetting: true,
+      bordered: true,
+      // 搜索
+      handleSearchInfoFn(info) {
+        searchParams.value = info;
+        return info;
+      },
+      actionColumn: {
+        width: 80,
+        title: '操作',
+        dataIndex: 'action',
+        // slots: { customRender: 'action' },
+        fixed: 'right',
+      },
+      pagination: tablePaginationRight.value,
+    });
 
   // 直接下载接口返回的二进制流
   function handleExport(exportType) {
@@ -139,14 +170,39 @@
     }
   }
   function viewAccount(record) {
-    console.log(record);
     getCaseInfoById({ id: record.Id }).then((res) => {
       showInfoData.value = res;
       showInfoOpen.value = true;
     });
   }
+  function handleChange(data) {
+    searchParams.value.page = data.current;
+    searchParams.value.limit = data.pageSize;
+    tablePaginationRight.value = data;
+    getTableData();
+  }
+  function handleSubmit() {
+    searchParams.value = getFieldsValue();
+    searchParams.value.page = 1;
+    tablePaginationRight.value.current = 1;
+    searchParams.value.limit = tablePaginationRight.value.pageSize;
+    getTableData();
+  }
+  function getTableData() {
+    setLoading(true);
+    loadCaseInfoTuBanList(searchParams.value).then((res) => {
+      tableData.value = res.items;
+      tablePaginationRight.value.total = res.total;
+      setTableData(tableData.value);
+      setPagination(tablePaginationRight.value);
+      setLoading(false);
+    });
+  }
+  onMounted(() => {
+    getTableData();
+  });
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
   .data-preview-container {
     width: 100%;
     height: calc(100% - 0px);
@@ -191,4 +247,17 @@
     height: 60px;
     margin: 5px;
   }
+  .search-box {
+    background: @component-background;
+    margin: 16px;
+    padding: 16px;
+  }
+  ::v-deep .ant-col-24 {
+    display: inline-block;
+    max-width: fit-content;
+    margin-left: 20px;
+  }
+  .table-box {
+    margin: 16px;
+  }
 </style>