feat: 月度工程资金计划列表接口对接

src/api/project/monthlyPlan.ts

@@ -3,6 +3,10 @@ import { defHttp } from '@/utils/http/axios';
 
 enum Api {
   GetList = '/pro/monthEngineer/page',
+  GetMonthlyPlanProjectList = '',
 }
 export const getMonthlyPlanList = (params?: ProjectParams) =>
   defHttp.post<ProjectModel>({ url: Api.GetList, data: params });
+
+export const getMonthlyPlanProjectList = (params?: ProjectParams) =>
+  defHttp.post<ProjectModel>({ url: Api.GetMonthlyPlanProjectList, data: params });

src/router/routes/modules/annualPlan.ts

@@ -24,6 +24,16 @@ const annualPlan: AppRouteModule = {
         orderNo: 10,
       },
     },
+    {
+      path: 'annualPlanEdit',
+      name: 'annualPlanEdit',
+      component: () => import('@/views/annualPlan/annualPlanEdit/annualPlanEdit.vue'),
+      meta: {
+        // affix: true,
+        title: '新建计划（储备）',
+        orderNo: 8,
+      },
+    },
   ],
 };
 

src/views/annualPlan/annualPlanEdit/tableData.tsx

+import { optionsListApi } from '@/api/demo/select';
+import { FormProps, FormSchema, BasicColumn } from '@/components/Table';
+import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable';
+import { ref } from 'vue';
+import { Input } from 'ant-design-vue';
+
+export function getBasicColumns(): BasicColumn[] {
+  return [
+    {
+      title: '年份',
+      dataIndex: 'year',
+      width: 80,
+    },
+    {
+      title: '金额(万元)',
+      dataIndex: 'amount',
+      width: 150,
+      // sorter: true,
+      // defaultHidden: true,
+      edit: true,
+    },
+  ];
+}
+export const formSchema: ({ colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { readonly: boolean; style: { border: string } }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { valueFormat: string; format: string; style: { width: string }; placeholder: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { addonAfter: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { addonAfter: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { addonAfter: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { addonAfter: string }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { options: ({ label: string; value: string } | { label: string; value: string } | { label: string; value: string })[] }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; icon: string; componentProps: { style: { width: string }; placeholder: string[] }; label: string; required: boolean } | { colProps: { offset: number; span: number }; component: string; field: string; componentProps: { options: ({ label: string; value: string } | { label: string; value: string } | { label: string; value: string })[] }; label: string; required: boolean })[] = [
+  {
+    field: 'projectName',
+    label: '项目名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'constructionSite',
+    label: '建设地点',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'constructionMode',
+    label: '建设模式',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'projectType',
+    label: '项目类型',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'constructionScale',
+    label: '建设规模',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'projectOverview',
+    label: '项目概况:',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'fundingSource',
+    label: '资金来源:',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'implementingEntity',
+    label: '实施主体:',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'projectOverview',
+    label: '项目概况:',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      readonly: true,
+      style: { border: 'none' },
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'filingCycle',
+    label: '填报年度:',
+    required: true,
+    component: 'DatePicker',
+    componentProps: {
+      placeholder: '选择填报周期',
+      picker: 'year',
+      style: { width: '100%' },
+      valueFormat: 'YYYY',
+      format: 'YYYY',
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'totalInvestment',
+    label: '总投资',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      addonAfter: '万元',
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'competentDepartment',
+    label: '项目主管部门',
+    required: true,
+    component: 'Input',
+    colProps: { span: 7, offset: 1 },
+  },
+
+  {
+    field: 'matchingFunds',
+    label: '2024年财政预算匹配资金',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      addonAfter: '万元',
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'specialBondFunds',
+    label: '其中专项债项目2024年预计使用专项债资金',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      addonAfter: '万元',
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'planFunds',
+    label: '2024年计划资金',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      addonAfter: '万元',
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'attribute',
+    label: '建设性质',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '新建', value: '0' },
+        { label: '结转', value: '1' },
+        { label: '缓建', value: '2' },
+      ],
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    field: 'time',
+    component: 'RangePicker',
+    label: '开竣工时间',
+    required: true,
+    icon: 'healthicons:i-schedule-school-date-time-outline',
+    colProps: { span: 7, offset: 1 },
+    componentProps: {
+      placeholder: ['开始日期', '结束日期'],
+      style: { width: '100%' },
+      valueFormat: 'YYYY-MM-DD',
+      format: 'YYYY-MM-DD',
+    },
+  },
+  {
+    field: 'schedule',
+    label: '2024年底预计形象进度',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'A(已经立项实施的跨年工程)', value: '0' },
+        { label: 'B(该年度必须建设的项目)', value: '1' },
+        { label: 'C(该年度必须建设的项目)', value: '2' },
+      ],
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  {
+    label: '备注',
+    field: 'remarks',
+    required: true,
+    component: 'InputTextArea',
+    componentProps: {
+      maxlength: 100,
+      showCount: true,
+    },
+    colProps: { span: 7, offset: 1 },
+  },
+  // {
+  //   field: 'isReserveProject',
+  //   label: '是否为储备项目',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '是', value: '1' },
+  //       { label: '否', value: '0' },
+  //     ],
+  //   },
+  // },
+  // {
+  //   field: 'status',
+  //   label: '状态',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '启用', value: '1' },
+  //       { label: '停用', value: '0' },
+  //     ],
+  //   },
+  // },
+];

src/views/annualPlan/annualPlanModel/annualPlanModel.vue

+<template>
+  <BasicModal
+    width="70%"
+    v-bind="$attrs"
+    @register="register"
+    title="选择投资计划"
+    :minHeight="30"
+    okText="导入"
+    @ok="handleSubmit"
+    @visible-change="handleVisibleChange"
+  >
+    <BasicTable @register="registerTable">
+      <template #bodyCell="{ column, text, record, index }">
+        <!-- 当前列是序号列时，显示序号 -->
+        <span v-if="column.dataIndex === 'serialNumber'">{{ index + 1 }}</span>
+        <!-- 其他列正常显示 -->
+        <span v-else>{{ text }}</span>
+      </template>
+    </BasicTable>
+    <!--    <button @click="getSelectRowList">获取数据</button>-->
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getListByPage } from '@/api/project/project';
+  import { columns, searchFormSchema } from './data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { getMonthlyPlanProjectList } from "@/api/project/monthlyPlan";
+
+  const [registerTable, { reload, getSelectRows }] = useTable({
+    api: getMonthlyPlanProjectList,
+    title: '123',
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    searchInfo: { type: 'engineering' },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+    rowSelection: {
+      type: 'checkbox',
+    },
+    // actionColumn: {
+    //   width: 80,
+    //   title: '操作',
+    //   dataIndex: 'action',
+    //   // slots: { customRender: 'action' },
+    //   fixed: undefined,
+    // },
+  });
+
+  const { createMessage } = useMessage();
+  function getSelectRowList() {
+    // createMessage.info('请在控制台查看！');
+    // console.log(getSelectRows());
+    emit('close', getSelectRows());
+  }
+
+  const emit = defineEmits(['close']);
+
+  function handleVisibleChange(v) {}
+  const [register, { closeModal }] = useModalInner((data) => {
+    data;
+  });
+
+  function handleSubmit() {
+    getSelectRowList();
+    closeModal();
+  }
+</script>

src/views/annualPlan/annualPlanModel/data.tsx

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { setRoleStatus } from '@/api/demo/system';
+import { useMessage } from '@/hooks/web/useMessage';
+
+type CheckedType = boolean | string | number;
+export const columns: (
+  | { dataIndex: string; width: number; title: string }
+  | { dataIndex: string; width: number; title: string }
+  | { dataIndex: string; width: number; title: string }
+  | { dataIndex: string; width: number; title: string }
+  | { dataIndex: string; width: number; title: string }
+  | { dataIndex: string; width: number; title: string }
+  | { dataIndex: string; width: number; title: string }
+)[] = [
+  {
+    title: '年度',
+    dataIndex: 'projectName',
+    width: 180,
+  },
+  {
+    title: '类型',
+    dataIndex: 'implementingEntity',
+    width: 180,
+  },
+  {
+    title: '项目数量',
+    dataIndex: 'constructionMode',
+    width: 200,
+  },
+  {
+    title: '总投资',
+    dataIndex: 'constructionSite',
+    width: 180,
+  },
+  {
+    title: '合同总额合计',
+    dataIndex: 'projectType',
+    width: 180,
+  },
+  {
+    title: '三年滚动投资计划合计',
+    dataIndex: 'fundingSource',
+    width: 180,
+  },
+  {
+    title: '公司名称',
+    dataIndex: 'constructionPurpose',
+    width: 180,
+  },
+  {
+    title: '最新更新人',
+    dataIndex: 'constructionScale',
+    width: 180,
+  },
+  {
+    title: '最新更新时间',
+    dataIndex: 'constructionScale',
+    width: 180,
+  },
+  {
+    title: '审核状态',
+    dataIndex: 'constructionScale',
+    width: 180,
+  },
+  {
+    title: '审核人',
+    dataIndex: 'constructionScale',
+    width: 180,
+  },
+  {
+    title: '审核时间',
+    dataIndex: 'constructionScale',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'projectName',
+    label: '',
+    component: 'Input',
+    componentProps: {
+      placeholder: '搜索关键字',
+    },
+    colProps: { span: 4 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'projectName',
+    label: '项目名称',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: 'XXXX项目',
+      disabled: true,
+      style: {
+        background: 'none',
+        border: 'none',
+      },
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'projectName',
+    label: '建设地点',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: '华苑片区',
+      disabled: true,
+      style: {
+        background: 'none',
+        border: 'none',
+      },
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'projectName',
+    label: '建设模式',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: '自建',
+      disabled: true,
+      style: {
+        background: 'none',
+        border: 'none',
+      },
+    },
+    colProps: { span: 8 },
+  },
+  // {
+  //   field: 'isReserveProject',
+  //   label: '是否为储备项目',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '是', value: '1' },
+  //       { label: '否', value: '0' },
+  //     ],
+  //   },
+  // },
+  // {
+  //   field: 'status',
+  //   label: '状态',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '启用', value: '1' },
+  //       { label: '停用', value: '0' },
+  //     ],
+  //   },
+  // },
+];

src/views/annualPlan/index.vue

@@ -2,7 +2,7 @@
   <div>
     <BasicTable @register="registerTable" :title="'年度工程资金计划'">
       <template #toolbar>
-        <a-button class="btn" type="primary" @click="Import"> 新建年度工程资金计划 </a-button>
+        <a-button class="btn" type="primary" @click="addAnnualPlan"> 新建年度工程资金计划 </a-button>
       </template>
       <template #bodyCell="{ column, text, record, index }">
 
@@ -33,17 +33,23 @@
         </template>
       </template>
     </BasicTable>
+    <yearModal @register="register" @close="handleNew" />
   </div>
 </template>
 <script lang="ts" setup>
 import { BasicTable, useTable, TableAction } from '@/components/Table';
 import { getAnnualPlanList } from '@/api/project/annualPlan';
+import yearModal from '@/components/yearModal.vue';
 
 import { getListByPage } from '@/api/project/biddingPlan';
 
 import { useDrawer } from '@/components/Drawer';
 
 import { columns, searchFormSchema } from './data';
+import {useModal} from "@/components/Modal";
+import {router} from "@/router";
+
+const [register, { openModal: openModal }] = useModal();
 
 defineOptions({ name: 'Performance' });
 
@@ -85,8 +91,18 @@ function handleSuccess() {
   reload();
 }
 
-const Import = () => {
-  console.log('新建年度工程资金计划');
+const addAnnualPlan = () => {
+  openModal(true, {
+    data: ['year'],
+  });
+};
+
+const handleNew = (e) => {
+  console.log('eeee', e);
+  router.push({
+    path: '/annualPlan/annualPlanEdit',
+    query: e,
+  });
 };
 
 const change = (key: string) => {