历史项目画面

src/api/earlywarning/index.ts

@@ -1,11 +1,19 @@
 import { defHttp } from '@/utils/http/axios';
 enum Api {
+  // 到期预警
   TimeoutWarning = '/api/DroneSsny/TimeoutWarning',
+  // 超期预警
   TimeOutAlarmList = '/api/DroneSsny/TimeOutAlarmList',
+  // 到期预警导出
   TimeoutWarningExport = '/api/DroneSsny/TimeoutWarningExport',
+  // 超期预警导出
   TimeoutAlarmExport = '/api/DroneSsny/TimeoutAlarmExport',
+  // 历史项目
   HistoryProject = '/api/DroneSsny/HistoryProject',
+  // 历史项目导出
   HistoryProjectExport = '/api/DroneSsny/HistoryProjectExport',
+  // 项目列表
+  GetDronssnydList = '/api/DroneSsny/GetDronssnydList',
 }
 
 export function TimeoutWarning(params) {
@@ -39,4 +47,7 @@ export function HistoryProjectExport(params) {
     params,
     responseType: 'blob',
   });
+}
+export function GetDronssnydList(params) {
+  return defHttp.get({ url: Api.GetDronssnydList, params });
 }

src/views/demo/projectlist/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 { GetDronssnydList } 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: GetDronssnydList,
+  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();
+//     TimeoutAlarmExport(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/projectlist/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',
+      };
+    },
+  },
+];