把文件中的页面使用Composition API重构要求用vue2完成并详细到每个方法只要export default 下面的内容不用template内的主体内容
时间: 2024-11-09 11:20:36 浏览: 7
Vue3新特性之在Composition API中使用CSS Modules
5星 · 资源好评率100%
好的,以下是将 `ProjectMaterialStatistics.vue` 页面使用 Composition API 重构后的代码,只包含了 `export default` 下面的内容。由于 Vue 2 并不原生支持 Composition API,我们需要借助第三方库 `@vue/composition-api` 来实现这一功能。
首先,安装 `@vue/composition-api`:
```sh
npm install @vue/composition-api
```
然后,在项目入口文件 `main.js` 中全局启用 Composition API:
```js
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);
```
接下来是重构后的 `ProjectMaterialStatistics.vue` 文件内容:
```javascript
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 重构的工作。希望对你有帮助!
阅读全文