Appearance
Ajax错误信息提示
数据请求时,对于错误提示信息,建议应该在页面中统一调用这些请求数据子函数的地方进行提示,不应该在每一个子函数中进行错误信息提示
代码示例:
- TODO:页面在进行初始化时,分别调用了getReportInfo、getPageData、getReportSetting三个函数来获取页面数据,子函数如果执行报错,比如请求数据报错,应该将错误信息统一抛出,由调用这些子函数的大函数来统一进行错误提示
- TODO:子函数将错误抛出
- TODO:如果err.msg为空,则需要提示一个自定义的错误信息
vue
<!-- 部门-编制并上报财务报告 -->
<template>
<!-- 容器 -->
<div class="gfr-base-report" :key="unique" v-if="pageVisible">
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { GET_LOGIN_INFO } from '@/store/login';
import util from '@/assets/js/util';
import fetch from '@/config/fetch';
import { getViewParams } from '@/mixin/system';
import { REPORT_TYPE } from '@/modules/gfr/common/constant';
export default {
name: 'GFR_BASE_REPORT',
data() {
return {
unique: '', //页面key,用于刷新页面用
queryParams: '', //URL携带的参数
contextInfo: {}, //页面上下文数据(保存导航页跳转时的参数)
reportInfo: {
attachment: {
attachId: '',
fileName: '',
},
submitStatus: '', //上报状态 2未上报、0已上报、1已退回
returnCreateUser: '', //审核人
returnTime: '', //审核时间
returnCause: '', //上报退回原因
}, //报告状态信息
pageData: {
template: [], //模板数据
report: {}, //财务报告数据
attachment: [], //附件数据
}, //页面数据
reportSetting: {}, //财报控制规则
};
},
beforeRouteEnter(to, from, next) {
next((vm) => {
vm.init();
});
},
methods: {
/**
* 初始化
* 1、重置页面数据
* 2、设置上下文信息
* 3、获取报告信息、获取页面数据
*/
async init() {
try {
if (this.queryParams !== this.$route.query.query) {
await this.resetData();
this.queryParams = this.$route.query.query;
let contextInfo = getViewParams(this.queryParams);
this.$set(this.$data, 'contextInfo', util.freezeDeep(contextInfo));
// TODO:页面在进行初始化时,分别调用了getReportInfo、getPageData、getReportSetting三个函数来获取页面数据,子函数如果执行报错,比如请求数据报错,应该将错误信息统一抛出,由调用这些子函数的大函数来统一进行错误提示
await Promise.all([this.getReportInfo(), this.getPageData(), this.getReportSetting()]);
this.unique = util.generateShortId(true);
}
} catch (err) {
console.error(err);
// TODO:如果err.msg为空,则需要提示一个自定义的错误信息
this.$message({
type: 'error',
message: err.msg || '页面初始化错误!',
});
}
},
/**
* 获取财报控制规则
*/
getReportSetting(){
return new Promise((resolve, reject) => {
fetch.post('/gfr/v1/report/rule/setting/selectRule', {
fiscalYear: this.contextInfo.setYear,
reportCode: 'GFR_REPORT_RULE',
}).then(({data}) => {
this.$set(this.$data, 'reportSetting', data);
return resolve();
// TODO:子函数将错误抛出
}).catch(reject);
});
},
/**
* 重置页面数据
*/
async resetData() {
try {
this.unique = '';
this.$set(this.$data, 'contextInfo', {});
this.reportInfo.submitStatus = '';
this.reportInfo.returnCreateUser = '';
this.reportInfo.returnTime = '';
this.reportInfo.cause = '';
this.pageData.template = [];
this.pageData.report = [];
this.pageData.attachment = [];
await this.$nextTick();
} catch (err) {
return Promise.reject(err);
}
},
/**
* 获取报告状态信息
*/
getReportInfo() {
return new Promise((resolve, reject) => {
let { dwCode, dwType, mofDivCode, setYear } = this.contextInfo;
fetch
.get('/gfr/v1/main/getSubmitInfo', {
params: {
submitAgencyCode: dwCode,
submitMofDivCode: mofDivCode,
dwType,
fiscalYear: setYear,
submitType: REPORT_TYPE.BM, //此参数传固定值,部门、综合、行政区三个页面传的参数不同
},
})
.then(({ data }) => {
util.copyProperties(this.reportInfo, data);
return resolve();
})
// TODO:子函数将错误抛出
.catch(reject);
});
},
/**
* 获取页面数据
*/
getPageData() {
return new Promise((resolve, reject) => {
let { dwCode, dwName, dwType, mofDivCode, setYear } = this.contextInfo;
fetch
.post('/gfr/v1/docu/queryAllGfrInfo', {
agencyCode: dwCode,
agencyName: dwName,
dwType,
mofDivCode: mofDivCode,
fiscalYear: setYear,
catalogueType: REPORT_TYPE.BM, //此参数传固定值,部门、综合、行政区三个页面传的参数不同
})
.then(({ data }) => {
this.$set(this.pageData, 'template', data.template);
this.$set(this.pageData, 'report', data.report);
this.$set(this.pageData, 'attachment', data.attachment);
return resolve();
})
// TODO:子函数将错误抛出
.catch(reject);
});
},
},
computed: {
...mapGetters([GET_LOGIN_INFO]),
/**
* 页面是否显示
*/
pageVisible() {
return util.isNotEmpty(this.unique);
},
},
};
</script>
<style lang="scss" scoped>
@import '~@/assets/style/variables.scss';
.gfr-base-report {
position: relative;
margin-top: 5px;
padding: 10px;
background: $-bs-bg-white;
}
</style>