如何使用Vue 2的Composition API 对现有的页面进行重构，仅保留 mounted 生命周期钩子和返回部分的方法，同时保持其余组件逻辑不变？模板（template）内的代码不需要修改。

为了将现有页面从Options API重构为Vue 2的Composition API，并只保留`mounted`生命周期钩子和部分方法，可以按照以下步骤进行：

1. **安装 `@vue/composition-api` 插件**：

   npm install @vue/composition-api

2. **在入口文件中引入并使用 `@vue/composition-api`**：

   import Vue from 'vue';
   import CompositionAPI from '@vue/composition-api';

   Vue.use(CompositionAPI);

3. **重构组件**：
- 使用 `<script setup>` 语法（如果使用 Vue 3），或者在 `<script>` 标签中使用 `setup` 函数（适用于 Vue 2）。
- 将 `mounted` 生命周期钩子和需要保留的方法迁移到 `setup` 函数中。
- 使用 `ref` 和 `reactive` 来定义响应式数据。
- 返回需要在模板中使用的变量和方法。

以下是具体的重构示例：

<template>
  <!-- 模板部分保持不变 -->
  <!-- ... -->
</template>

<script>
import { ref, onMounted } from '@vue/composition-api';
import { PRINT_DOM } from "@/store/mutation-types";
import MyFastDatePicker from '@/components/date/MyFastDatePicker';
import '@/assets/less/TableExpand.less';
import { mixinDevice } from '@/utils/mixin';
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import { getAction, postAction } from '@/api/manage';

export default {
  name: 'ProjectMaterialDetails',
  mixins: [JeecgListMixin, mixinDevice],
  components: { MyFastDatePicker },
  setup(props, context) {
    const nowFirst = ref('projectCode');
    const columnsKey = ref(0);
    const projectNameList = ref([]);
    const projectName_Code = ref("");
    const projectBudgetMarginWarning = ref(0);
    const expandedRowKeys = ref([]);
    const workorderProjectList = ref([]);
    const description = ref('营业报表管理页面');
    const fastTime = ref(['本月', '上月', '近半年']);
    const noCreate = ref(true);
    const hasUpdateTime = ref(true);
    const configOrderSubTypeList = ref([]);
    const configOrderSubTypeTemp = ref(undefined);
    const allDepartList = ref([]);
    const hallCodeDataList = ref([]);
    const spinning = ref(false);
    const checkFlag = ref(true);
    const updateTime = ref('');
    const url = ref({
      list: "/web/materialVoucherDetails/getProjectMaterialStatistic",
      exportXlsxUrl: "/web/materialVoucherDetails/exportProjectMaterialStatisticExcel",
      exportPdfUrl: "/web/bizBusinessRecord/exportpdf",
      exportDetailUrl: "/web/bizBusinessRecord/exportDetailExcel",
    });
    const keyList = ref(['saleNum', 'saleName', 'terminalTypeName', 'userTypeName', 'configOrderMainTypeName', 'configOrderSubTypeName']);
    const ipagination = ref({
      current: 1,
      pageSize: 20,
      pageSizeOptions: ['20', '50', '80'],
      showTotal: (total, range) => `${range[0]}-${range[1]} 共${total}条`,
      showQuickJumper: true,
      showSizeChanger: true,
      total: 0
    });
    const originColums = ref([]);
    const columns = ref([
      { title: '项目编号', align: "center", dataIndex: 'projectCode', customRender: (text, row, index) => renderMergedCells(text, row, index, 'projectCode') },
      { title: '项目名称', align: "center", dataIndex: 'projectCode_dictText', customRender: (text, row, index) => renderMergedCells(text, row, index, 'projectCode_dictText') },
      { title: '（子）项目名称', align: "center", dataIndex: 'subProjectCode_dictText', customRender: (text, row, index) => renderMergedCells(text, row, index, 'subProjectCode_dictText') },
      { title: '部门名称', align: "center", dataIndex: 'orgCode_dictText', customRender: (text, row, index) => renderMergedCells(text, row, index, 'orgCode_dictText') },
      { title: '物资编号', align: "center", dataIndex: 'materialCode', scopedSlots: { customRender: 'publicText' } },
      { title: '物资名称', align: "center", dataIndex: 'materialName', scopedSlots: { customRender: 'publicText' } },
      { title: '厂商', align: "center", dataIndex: 'producerId_dictText', scopedSlots: { customRender: 'publicText' } },
      { title: '规格型号', align: "center", dataIndex: 'specification', scopedSlots: { customRender: 'publicText' } },
      { title: '单位', align: "center", dataIndex: 'unit', scopedSlots: { customRender: 'publicText' } },
      { title: '成本价（元）', align: "center", dataIndex: 'originPrice', scopedSlots: { customRender: 'publicText' } },
      { title: '领用总数', align: "center", dataIndex: 'requisitionNum', slots: { title: 'requisitionNum_title' }, scopedSlots: { customRender: 'publicText' } },
      { title: '施工用料', align: "center", dataIndex: 'constructionNum', scopedSlots: { customRender: 'publicText' } },
      { title: '验收用料', align: "center", dataIndex: 'acceptanceNum', scopedSlots: { customRender: 'publicText' } },