feat: 月度工程资金计划页面开发

src/api/project/monthlyPlan.ts

+import { ProjectParams, ProjectListGetResultModel, ProjectModel } from './model/projectModel';
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+    GetList = '/statement/list/page',
+}
+export const getMonthlyPlanList = (params?: ProjectParams) =>
+    defHttp.post<ProjectModel>({ url: Api.GetList, data: params });

src/views/annualPlan/index.vue

 <template>
   <div>
-    <BasicTable @register="registerTable" :title="'工程项目投资计划完成情况'">
+    <BasicTable @register="registerTable" :title="'年度工程资金计划'">
       <template #toolbar>
         <a-button class="btn" type="primary" @click="Import"> 新建年度工程资金计划 </a-button>
       </template>

src/views/monthlyPlan/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: 'serialNumber', // 这个dataIndex仅作为标识，不对应实际数据字段
+    width: 50, // 可以自定义宽度
+    scopedSlots: { customRender: 'bodyCell' }, // 对应模板中的具名插槽
+  },
+  {
+    title: '月份',
+    dataIndex: 'project_name',
+    width: 200,
+  },
+  {
+    title: '类型',
+    dataIndex: 'implementing_entity',
+    width: 180,
+  },
+  {
+    title: '合同额总计',
+    dataIndex: 'construction_mode',
+    width: 180,
+  },
+  {
+    title: '资金缺口总计',
+    dataIndex: 'project_type',
+    width: 180,
+  },
+  {
+    title: '年资金缺口',
+    dataIndex: 'funding_source',
+    width: 180,
+  },
+  {
+    title: '公司名称',
+    dataIndex: 'construction_purpose',
+    width: 180,
+  },
+  {
+    title: '最新更新人',
+    dataIndex: '国construction_scale',
+    width: 180,
+  },
+  {
+    title: '最新更新时间',
+    dataIndex: '国construction_scale',
+    width: 180,
+  },
+  {
+    title: '审核状态',
+    dataIndex: '国construction_scale',
+    width: 180,
+  },
+  {
+    title: '审核人',
+    dataIndex: '国construction_scale',
+    width: 180,
+  },
+  {
+    title: '审核时间',
+    dataIndex: '国construction_scale',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'data',
+    label: '',
+    component: 'DatePicker',
+    componentProps: {
+      placeholder: '选择填报周期',
+      style: { width: '100%' }
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'type',
+    label: '',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '工程', value: '1' },
+        { label: '承建', value: '0' },
+        { label: '储备', value: '2' },
+      ],
+      placeholder: '类型',
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'ProjecName',
+    label: '',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '公司A', value: '0' },
+        { label: '公司B', value: '1' },
+        { label: '公司C', value: '2' },
+      ],
+      placeholder: '公司名称',
+    },
+    colProps: { span: 4 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  // {
+  //   field: 'projectName',
+  //   label: '项目名称',
+  //   required: true,
+  //   component: 'Input',
+  // },
+  // {
+  //   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' },
+  //     ],
+  //   },
+  // },
+  // {
+  //   label: '建设模式',
+  //   field: 'constructionMode',
+  //   component: 'InputTextArea',
+  // },
+  // {
+  //   label: '项目类型',
+  //   field: 'projectType',
+  //   required: true,
+  //   component: 'Input',
+  // },
+  // {
+  //   label: '项目概况',
+  //   field: 'projectOverview',
+  //   required: true,
+  //   component: 'InputTextArea',
+  // },
+  // {
+  //   label: '建设目的及项目功能',
+  //   field: 'constructionPurpose',
+  //   required: true,
+  //   component: 'InputTextArea',
+  // },
+];

src/views/monthlyPlan/index.vue

 <template>
   <div>
-    <BasicTable :title="'月度工程资金计划'"></BasicTable>
+    <BasicTable @register="registerTable" :title="'月度工程资金计划'">
+      <template #toolbar>
+        <a-button class="btn" type="primary" @click="Import"> 新建月度工程资金计划 </a-button>
+      </template>
+      <template #bodyCell="{ column, text, record, index }">
+
+        <!-- 当前列是序号列时，显示序号 -->
+        <span v-if="column.dataIndex === 'serialNumber'">{{ index + 1 }}</span>
+        <!-- 其他列正常显示 -->
+        <span v-else>{{ text }}</span>
+
+
+        <template v-if="column.key === 'action'">
+          <TableAction
+              :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
   </div>
 </template>
-
 <script lang="ts" setup>
-import { BasicTable } from '@/components/Table';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { getMonthlyPlanList } from '@/api/project/monthlyPlan';
+
+import { getListByPage } from '@/api/project/biddingPlan';
+
+import { useDrawer } from '@/components/Drawer';
+
+import { columns, searchFormSchema } from './data';
+
+defineOptions({ name: 'MonthlyPlan' });
+
+const [registerDrawer, { openDrawer }] = useDrawer();
+const [registerTable, { reload }] = useTable({
+  api: getListByPage,
+  title: '123',
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+  },
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  showIndexColumn: false,
+  actionColumn: {
+    width: 80,
+    title: '操作',
+    dataIndex: 'action',
+    // slots: { customRender: 'action' },
+    fixed: undefined,
+  },
+});
+
+
+function handleEdit(record: Recordable) {
+  openDrawer(true, {
+    record,
+    isUpdate: true,
+  });
+}
+
+function handleDelete(record: Recordable) {
+  console.log(record);
+}
+
+function handleSuccess() {
+  reload();
+}
+
+const Import = () => {
+  console.log('导入数据');
+};
+
+const change = (key: string) => {
+  reload();
+};
 </script>
+<style scoped>
+.btn {
+  margin-right: 10px;
+}
+</style>