历史项目画面

src/api/earlywarning/index.ts

@@ -3,7 +3,9 @@ enum Api {
   TimeoutWarning = '/api/DroneSsny/TimeoutWarning',
   TimeOutAlarmList = '/api/DroneSsny/TimeOutAlarmList',
   TimeoutWarningExport = '/api/DroneSsny/TimeoutWarningExport',
-  TimeoutAlarmExport = '/api/DroneSsny/TimeoutAlarmExport'
+  TimeoutAlarmExport = '/api/DroneSsny/TimeoutAlarmExport',
+  HistoryProject = '/api/DroneSsny/HistoryProject',
+  HistoryProjectExport = '/api/DroneSsny/HistoryProjectExport',
 }
 
 export function TimeoutWarning(params) {
@@ -27,4 +29,14 @@ export function TimeoutAlarmExport(params) {
     params,
     responseType: 'blob',
   });
+}
+export function HistoryProject(params) {
+  return defHttp.get({ url: Api.HistoryProject, params });
+}
+export function HistoryProjectExport(params) {
+  return defHttp.get({ 
+    url: Api.HistoryProjectExport,
+    params,
+    responseType: 'blob',
+  });
 }

src/views/demo/historyproject/index.vue

@@ -0,0 +1,103 @@
+<template>
+<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
+    <template #toolbar>
+      <a-button type="primary" @click="download">导出</a-button>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              onClick: () => {
+                handleInfo(record);
+              },
+            }
+          ]"
+        />
+      </template>
+    </template>
+  </BasicTable>
+  <a-modal
+    style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+    wrap-class-name="full-modal"
+    v-model:open="showInfoOpen"
+    title="详情"
+    :footer="null"
+    :maskClosable="true"
+    :destroyOnClose="true"
+    @cancel="showInfoOpen = false"
+  >
+    <ShowInfoModal :showInfoData="showInfoData"/>
+  </a-modal>
+</PageWrapper>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { PageWrapper } from '@/components/Page';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { columns, searchFormSchema } from './utils';
+import { HistoryProject, HistoryProjectExport } from '@/api/earlywarning/index'
+import ShowInfoModal from '@/components/EarlyWarning/InfoModal/index.vue'
+
+const showInfoOpen = ref(false)
+const showInfoData = ref();
+
+const [registerTable, { getForm }] = useTable({
+  title: '历史项目',
+  api: HistoryProject,
+  columns,
+  rowKey: 'id',
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+  },
+  actionColumn: {
+    width: 80,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+  },
+});
+function handleInfo(record) {
+  showInfoData.value = record
+  showInfoOpen.value = true
+}
+const download = () => {
+  const form = getForm();
+  const filterValues = form.getFieldsValue();
+  HistoryProjectExport(filterValues).then(res => {
+    const elink = document.createElement('a');
+    elink.download = '历史项目数据' + new Date().getTime() + '.xls';
+    elink.style.display = 'none';
+    elink.href = URL.createObjectURL(res);
+    document.body.appendChild(elink);
+    elink.click();
+    URL.revokeObjectURL(elink.href);
+    document.body.removeChild(elink);
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.full-modal {
+  .ant-modal {
+    min-width: 100vw;
+    top: 0px;
+    padding: 0px;
+    margin: 0px;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+</style>

src/views/demo/historyproject/utils.ts

@@ -0,0 +1,76 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { getChildrenTree } from '@/api/demo/system';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '项目编号',
+    dataIndex: 'xiangmu_no',
+  },
+  {
+    title: '项目名称',
+    dataIndex: 'xiangmu_name',
+    width: 200,
+  },
+  {
+    title: '行政区划',
+    dataIndex: 'xingzhengquhua',
+  },
+  {
+    title: '备案编号',
+    dataIndex: 'beian_no',
+  },
+  {
+    title: '项目开始时间',
+    dataIndex: 'start_time',
+    width: 200,
+  },
+  {
+    title: '项目结束时间',
+    dataIndex: 'end_time',
+  },
+  {
+    title: '项目当前用途',
+    dataIndex: 'xiangmu_yt',
+    width: 110,
+  },
+  {
+    title: '设施农业申请用地面积(公顷)',
+    dataIndex: 'shenqing_area',
+    width: 200,
+  },
+  {
+    title: '生产设施用地(公顷)',
+    dataIndex: 'shengchan_area',
+    width: 200,
+  },
+  {
+    title: '辅助设施用地(公顷)',
+    dataIndex: 'fuzhu_area',
+    width: 200,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'xiangmumc',
+    component: 'Input',
+    colProps: { span: 5 },
+    label: '项目名称',
+  },
+  {
+    field: 'streetid',
+    label: '乡镇',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getChildrenTree,
+        params: { parentId: 371324 },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+      };
+    },
+  },
+];