import $Api from '@/api/index.js' Vue.prototype.$Api = $Api 没有第二行代码就无法直接在所有 Vue 组件中通过 this.$Api访问Api对象吗

是的，如果没有第二行代码，就无法直接在所有 Vue 组件中通过 `this.$Api` 访问 `Api` 对象。因为 `$Api` 是在 `index.js` 中定义并导出的，Vue 实例默认无法引用到它。通过将 `$Api` 挂载到 `Vue.prototype` 上，就可以在所有 Vue 组件实例中访问到它。

相关问题

把文件中的页面使用Composition API重构要求用vue2完成并详细到每个方法只要export default 下面的内容不用template内的主体内容

好的，以下是将 `ProjectMaterialStatistics.vue` 页面使用 Composition API 重构后的代码，只包含了 `export default` 下面的内容。由于 Vue 2 并不原生支持 Composition API，我们需要借助第三方库 `@vue/composition-api` 来实现这一功能。

首先，安装 `@vue/composition-api`：

npm install @vue/composition-api

然后，在项目入口文件 `main.js` 中全局启用 Composition API：

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

Vue.use(VueCompositionAPI);

接下来是重构后的 `ProjectMaterialStatistics.vue` 文件内容：

import Vue from 'vue';
import { reactive, toRefs, onMounted, computed } 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: 'ProjectMaterialStatistics',
  mixins: [JeecgListMixin, mixinDevice],
  components: { MyFastDatePicker },
  setup() {
    const state = reactive({
      projectNameList: [],
      projectName_Code: "",
      projectBudgetMarginWarning: 0,
      expandedRowKeys: [],
      workorderProjectList: [],
      description: '营业报表管理页面',
      fastTime: ['本月', '上月', '近半年'],
      noCreate: true,
      hasUpdateTime: true,
      configOrderSubTypeList: [],
      configOrderSubTypeTemp: undefined,
      allDepartList: [],
      hallCodeDataList: [],
      spinning: false,
      checkFlag: true,
      updateTime: '',
      url: {
        list: "/web/projectUseMaterial/list",
        exportXlsxUrl: "/web/projectUseMaterial/export",
        exportPdfUrl: "/web/bizBusinessRecord/exportpdf",
        exportDetailUrl: "/web/bizBusinessRecord/exportDetailExcel",
      },
      keyList: ['saleNum', 'saleName', 'terminalTypeName', 'userTypeName', 'configOrderMainTypeName', 'configOrderSubTypeName'],
      ipagination: {
        current: 1,
        pageSize: 20,
        pageSizeOptions: ['20', '50', '80'],
        showTotal: (total, range) => `${range[0]}-${range[1]} 共${total}条`,
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      columns: [
        { title: '项目编号', align: "center", dataIndex: 'projectCode', customRender: (text, row, index) => renderMergedCells1(text, row, index) },
        { title: '项目名称', align: "center", dataIndex: 'projectName', customRender: (text, row, index) => renderMergedCells(text, row, index) },
        { title: '物资编号', align: "center", dataIndex: 'materialCode' },
        { title: '物资名称', align: "center", dataIndex: 'materialName' },
        { title: '厂商', align: "center", dataIndex: 'producerId_dictText' },
        { title: '规格型号', align: "center", dataIndex: 'specification' },
        { title: '单位', align: "center", dataIndex: 'unit' },
        { title: '预算总数', align: "center", dataIndex: 'budgetTotalAmount', scopedSlots: { customRender: 'budgetTotalAmount' } },
        { align: "center", slots: { title: 'receivingFreezeAmount' }, dataIndex: 'receivingFreezeAmount' },
        { align: "center", slots: { title: 'requisitionAmount_title' }, dataIndex: 'receivingTotalAmount' },
        { title: '领用余料', align: "center", dataIndex: 'receivingSurplusAmount' },
        { title: '领料使用', align: "center", dataIndex: 'receivingUseAmount' },
        { align: "center", dataIndex: 'budgetSurplusAmount', slots: { title: 'receivingFreezeAmount_title' }, scopedSlots: { customRender: 'budgetSurplusAmount' } },
        { title: '库存可用数', align: "center", dataIndex: 'inventoryAmount', scopedSlots: { customRender: 'inventoryAmount' } },
      ],
      queryParam: {
        projectCode: '',
        keyWord: '',
        producerId: '',
        specification: '',
        projectName_Code: '',
        projectName: '',
        beginDate: '',
        endDate: '',
        hiddenZeroTotalAmountFlag: 0,
        configOrderMainType: '',
        configOrderSubType: '',
        incomeExpenseType: ''
      },
      dataSource: []
    });

    const renderMergedCells = (value, row, index) => {
      const obj = { children: value, attrs: {} };
      if (index === 0 || row.projectName !== state.dataSource[index - 1].projectName) {
        let rowSpan = 1;
        for (let i = index + 1; i < state.dataSource.length; i++) {
          if (state.dataSource[i].projectName === row.projectName) {
            rowSpan++;
          } else {
            break;
          }
        }
        obj.attrs.rowSpan = rowSpan;
      } else {
        obj.attrs.rowSpan = 0;
      }
      return obj;
    };

    const renderMergedCells1 = (value, row, index) => {
      const obj = { children: value, attrs: {} };
      if (index === 0 || row.projectCode !== state.dataSource[index - 1].projectCode) {
        let rowSpan = 1;
        for (let i = index + 1; i < state.dataSource.length; i++) {
          if (state.dataSource[i].projectCode === row.projectCode) {
            rowSpan++;
          } else {
            break;
          }
        }
        obj.attrs.rowSpan = rowSpan;
      } else {
        obj.attrs.rowSpan = 0;
      }
      return obj;
    };

    const projectCodeSearch = (value) => {
      getAction('/web/projectRecord/searchMainProject', { order: 'desc', pageNo: 1, pageSize: 100, keyword: value }).then(res => {
        state.projectNameList = res.result.map(item => ({ id: item.id, value: item.projectCode, text: item.projectName }));
      });
    };

    const projectCodeChange = (value) => {
      state.queryParam.projectName_Code = value;
      const obj = state.projectNameList.find(item => item.id === value);
      if (obj) {
        state.exportParams.projectName = obj.text;
        state.queryParam.projectName = obj.text;
      } else {
        state.exportParams.projectName = '';
        state.queryParam.projectName = '';
      }
    };

    const change = (val1, val2, val3) => {
      state.exportParams.dateTpye = val3 === 2 ? 1 : 2;
      state.queryParam.beginDate = val1;
      state.queryParam.endDate = val2;
      state.queryParam.hiddenZeroTotalAmountFlag = state.checkFlag ? 1 : 0;
    };

    const handelChange = () => {
      state.configOrderSubTypeTemp = undefined;
      state.queryParam.configOrderSubType = undefined;
      state.queryParam.incomeExpenseType = '';
      getConfigOrderSubTypeList();
    };

    const getConfigOrderSubTypeList = () => {
      if (state.queryParam.configOrderMainType) {
        getAction('/web/bizTransactionOrder/getOrderSubType', { configOrderMainType: state.queryParam.configOrderMainType }).then(res => {
          if (res.code == 200) {
            switch (state.queryParam.configOrderMainType) {
              case '1':
                let arr = [];
                for (let i = 0; i < res.result.length; i++) {
                  arr.push(res.result.slice(i, i + 1));
                }
                arr.forEach(v => {
                  v.push({ value: v[0].value, label: v[0].label + '（退）' });
                });
                state.configOrderSubTypeList = [].concat.apply([], arr).filter(v => v.value != 96 && v.value != 98);
                break;
              case '2':
                state.configOrderSubTypeList = res.result.filter(v => Number(v.value) <= 7 || Number(v.value) == 15 || Number(v.value) == 16 || Number(v.value) == 20 || Number(v.value) == 21);
                break;
              case '3':
                state.configOrderSubTypeList = res.result.filter(v => v.value !== 7 && v.value !== 8 && v.value !== 12 && v.value !== 14 && v.value !== 10 && v.value !== 16);
                break;
              default:
                state.configOrderSubTypeList = res.result;
            }
          }
        });
      } else {
        Vue.prototype.$message.warning('请选择业务类型！');
      }
    };

    const handleChange = () => {
      state.configOrderSubTypeList = [];
      state.queryParam.configOrderSubType = '';
      state.configOrderSubTypeTemp = undefined;
      state.queryParam.incomeExpenseType = '';
    };

    const handleConfigOrderSubTypeChange = (val) => {
      state.configOrderSubTypeTemp = val;
      if (state.queryParam.configOrderMainType == 1) {
        state.queryParam.incomeExpenseType = val.key.substr(val.key.length - 1, 1);
      } else {
        state.queryParam.incomeExpenseType = '';
      }
    };

    const handleOpen = (record) => {
    };

    const filterOption = (input, option) => {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

    const searchQuery = () => {
      let val = state.configOrderSubTypeTemp;
      if (val) {
        if (state.queryParam.configOrderMainType == 1) {
          state.queryParam.configOrderSubType = val.key.length == 2 ? val.key.substr(0, 1) : val.key.substr(0, 2);
        } else {
          state.queryParam.configOrderSubType = val.key;
        }
      }
      loadData(1);
    };

    const searchReset = () => {
      state.queryParam.projectCode = '';
      state.queryParam.keyWord = '';
      state.queryParam.producerId = '';
      state.queryParam.specification = '';
      state.queryParam.projectName_Code = '';
      state.queryParam.projectName = '';
      loadData(1);
    };

    const onChangeOrgCode = () => {
      getAction('/sys/sysDepart/listAll').then(res => {
        if (res.success) {
          state.allDepartList = res.result.map(v => ({ text: v.departName, value: v.orgCode }));
        }
      });
    };

    onMounted(() => {
      onChangeOrgCode();
      loadData(1);
      getAction('/web/bizWorkorder/getWorkorderProject', { workorderType: state.queryParam.workorderType }).then(res => {
        state.workorderProjectList = res.result?.values || [];
      });
      postAction('/web/sysCompany/queryLoginCompany').then(res => {
        state.projectBudgetMarginWarning = res.result.projectBudgetMarginWarning || 0;
      });
    });

    return {
      ...toRefs(state),
      renderMergedCells,
      renderMergedCells1,
      projectCodeSearch,
      projectCodeChange,
      change,
      handelChange,
      getConfigOrderSubTypeList,
      handleChange,
      handleConfigOrderSubTypeChange,
      handleOpen,
      filterOption,
      searchQuery,
      searchReset,
      onChangeOrgCode
    };
  }
};

### 解释
1. **Reactive State**: 使用 `reactive` 创建响应式数据对象，并使用 `toRefs` 将其转换为响应式引用。
2. **Methods**: 所有的方法都直接在 `setup` 函数内部定义，并返回给组件使用。
3. **Life Cycle Hooks**: 使用 `onMounted` 替代 `mounted` 生命周期钩子。
4. **Props and Events**: 如果需要传递或监听事件，可以在 `setup` 函数中进行处理。

这样就完成了将 `ProjectMaterialStatistics.vue` 页面使用 Composition API 重构的工作。希望对你有帮助！