feat: (项目库-详情-招标计划): 年度资金计划高级筛选

src/views/project/annualDrawer/drawerData.ts

-import { FormSchema } from '@/components/Table';
+import {FormProps, FormSchema} from '@/components/Table';
 
 // 3-年度资金计划详情
 export const annualFormSchema: FormSchema[] = [
@@ -173,3 +173,187 @@ export const annualFormSchema: FormSchema[] = [
     component: 'Input',
   },
 ];
+
+export const exportUrl = '/pro/export/yearEngineer';
+
+//查询条件
+export function getFormConfig(): Partial<FormProps> {
+  return {
+    labelWidth: 100,
+    schemas: [
+      {
+        field: 'year',
+        label: '填报周期',
+        component: 'DatePicker',
+        componentProps: {
+          placeholder: '选择填报周期',
+          picker: 'year',
+          valueFormat: 'YYYY',
+          format: 'YYYY',
+          style: {
+            width: '100%',
+          },
+        },
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '公司名称',
+        field: 'companyName',
+        labelWidth: '140px',
+        component: 'Input',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '项目名称',
+        field: 'projectName',
+        labelWidth: '140px',
+        component: 'Input',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '建设地点',
+        field: 'constructionSite',
+        labelWidth: '140px',
+        component: 'Input',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '立项总投资',
+        field: 'totalInvestment',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '年资金计划额合计',
+        field: 'plannedQuotaTotal',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '专项拨款合计',
+        field: 'specialFundTotal',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '银行融资合计',
+        field: 'bankFinancingTotal',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '自有资金合计',
+        field: 'ownFundsTotal',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '当年资金缺口',
+        field: 'fundingGap',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '建设性质',
+        field: 'attribute',
+        labelWidth: '140px',
+        component: 'Select',
+        componentProps: {
+          options: [
+            { label: '新建', value: '0' },
+            { label: '结转', value: '1' },
+            { label: '缓建', value: '2' },
+          ],
+        },
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '开工竣工时间',
+        field: 'beginTime',
+        labelWidth: '140px',
+        component: 'DatePicker',
+        componentProps: {
+          picker: 'DatePicker',
+          valueFormat: 'YYYY-MM-DD',
+          format: 'YYYY-MM-DD',
+          style: {
+            width: '100%',
+          },
+        },
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '当年底预计形象进度',
+        field: 'schedule',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '项目主管部门',
+        field: 'competentDepartment',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+      {
+        label: '备注',
+        field: 'remark',
+        labelWidth: '140px',
+        component: 'InputNumber',
+        colProps: {
+          xl: 8,
+          xxl: 4,
+        },
+      },
+    ],
+  };
+}

src/views/project/annualDrawer/exportModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="导出筛选结果"
+    :minHeight="30"
+    okText="导出"
+    @ok="handleSubmit"
+    @visible-change="handleVisibleChange"
+  >
+    <BasicForm @register="registerForm" :model="modelRef" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, nextTick, defineProps, defineEmits, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { uploadApi } from '@/api/sys/upload';
+  import { AnnexAdd } from '@/api/project/project';
+  import { tenderPlanExport } from '@/api/project/export';
+  import { reject } from 'lodash-es';
+  import { downloadByData } from '@/utils/file/download';
+
+  const projectId = ref(0);
+  const schemas: FormSchema[] = [
+    {
+      field: 'colums',
+      component: 'CheckboxGroup',
+      label: '',
+      required: true,
+      componentProps: {
+        options: [],
+      },
+      colProps: {
+        span: 24,
+      },
+    },
+  ];
+  const props = defineProps({
+    userData: { type: Object },
+  });
+  function handleVisibleChange(v) {
+    v && props.userData && nextTick(() => onDataReceive(props.userData));
+  }
+  const emit = defineEmits(['close', 'register']);
+  const modelRef = ref({});
+  const [
+    registerForm,
+    {
+      getFieldsValue,
+      validate,
+      updateSchema,
+      //   // setFieldsValue,
+      // setProps,
+    },
+  ] = useForm({
+    labelWidth: 120,
+    schemas,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+
+  const [register, { closeModal }] = useModalInner((data) => {
+    console.log(111);
+
+    data && onDataReceive(data);
+  });
+
+  // function handleVisibleChange(v) {
+  //   v && props.userData && nextTick(() => onDataReceive(props.userData));
+  // }
+
+  function onDataReceive(data) {
+    console.log('Data Received', data.exportData);
+    updateSchema({
+      field: 'colums',
+      componentProps: {
+        options: data.exportData,
+      },
+    });
+    // console.log(props.userData);
+
+    // projectId.value = data.projectId;
+    // console.log(projectId.value);
+  }
+  function handleSubmit() {
+    validate().then(async () => {
+      const value = getFieldsValue();
+      console.log(value);
+      const data = await tenderPlanExport({
+        colums: value.colums,
+        searchField: { biddingType: '施工' },
+      });
+      downloadByData(data, '招标计划.xlsx');
+      emit('close');
+      closeModal();
+    });
+  }
+</script>

src/views/project/tabs/annualPlan.vue

 <template>
   <BasicTable @register="registerTable">
+    <template #toolbar>
+      <a-button type="primary" preIcon="mdi:plus" @click="handleExport"> 导出筛选结果 </a-button>
+    </template>
     <template #bodyCell="{ column, record, index }">
       <template v-if="column.key === 'serialNumber'">
         {{ index + 1 }}
@@ -16,28 +19,28 @@
       </template>
     </template>
   </BasicTable>
-
+  <exportModal @register="registerModal" />
   <AnnualDrawer @register="registerDrawer" @success="handleSuccess" />
 </template>
 <script lang="ts" setup>
+  import exportModal from '../annualDrawer/exportModal.vue';
   import { annualPlanColumns, searchFormSchema } from './listData';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import {exportUrl, getFormConfig} from '@/views/project/annualDrawer/drawerData';
   import { inject } from 'vue';
   //引进列表api
   import { yearList } from '@/api/project/detail/years';
   import AnnualDrawer from '@/views/project/annualDrawer/annualDrawer.vue';
+  import { useModal } from '@/components/Modal';
+  const [registerModal, { openModal: openModal }] = useModal();
   import { useDrawer } from '@/components/Drawer';
-
   const [registerDrawer, { openDrawer }] = useDrawer();
   let detailId = inject('detailId');
   console.log('年度资金计划的detailId', detailId);
-  const [registerTable, { reload }] = useTable({
+  const [registerTable, { reload, getForm }] = useTable({
     api: yearList,
     columns: annualPlanColumns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-    },
+    formConfig: getFormConfig(),
     searchInfo: {
       proId: detailId,
     },
@@ -53,6 +56,27 @@
       fixed: undefined,
     },
   });
+  function handleExport() {
+    openModal(true, {
+      projectId: null,
+      exportUrl: exportUrl,
+      title: '年度资金计划',
+      searchData: getForm().getFieldsValue(),
+      exportData: getExportData(),
+    });
+  }
+
+  //导出相关操作
+  function getExportData() {
+    let exportData = [];
+    annualPlanColumns.map((i) => {
+      exportData.push({
+        label: i.title,
+        value: i.dataIndex,
+      });
+    });
+    return exportData;
+  }
   function handleDetail(record: Recordable, disabled: number) {
     openDrawer(true, {
       record,