vue页面加载时同时请求两个接口 |
您所在的位置：网站首页 › vue如何优化定时调用接口 › vue页面加载时同时请求两个接口 |
vue页面加载时同时请求两个接口
|
请求接口数据：
代码： 职务信息 新增 刷新 {{ parseTime(scope.row.dtStartDate, '{y}-{m}-{d}') }} {{ parseTime(scope.row.dtEndDate, '{y}-{m}-{d}') }} 两代一委员 新增 刷新 {{ parseTime(scope.row.dtStartDate, '{y}-{m}-{d}') }} {{ parseTime(scope.row.dtEndDate, '{y}-{m}-{d}') }} 保 存 选择 保 存 import { listJobinformation, getJobinformation, delJobinformation, addJobinformation, updateJobinformation, exportJobinformation } from '@/api/XXX/jobinformation' import CreateInfo from '@/components/XXX/XXX/CreateInfo' import MisSelectTree from '@/components/XXX/XXX/MisSelectTree' import store from '@/store/index' import { parseTime } from '@/utils/ruoyi' export default { name: 'Jobinformation', components: { CreateInfo,MisSelectTree }, data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, total2: 0, // 党员信息- 职务信息（01）、两代一委员（02）表格数据 jobinformationList1: [], jobinformationList2: [], // 弹出层标题 title: '', // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, ctIdP: null, ctName: null, ctType: null, ctBranch: null, ctBranchName: null, ctPositionName: null, ctRepresentativeType: null, ctSession: null, ctPositionInstruction: null, ctPositionLevel: null, dtStartDate: null, dtEndDate: null, ctMark: null, ctState: null, ctCreateUser: null, dtCreateDate: null, ctUpdateUser: null, dtUpdateDate: null, ctOther1: null, ctOther2: null, ctOther3: null }, queryParams2: { pageNum: 1, pageSize: 10, ctType: null, }, // 表单参数 form: {}, // 表单校验 rules: {}, isSelect:false, // 可否保存和表单控件disable标识 canSave: false, funNo: location.hash.slice(-4), singleStore: null, subSingleStore: null } }, created() { //原始列表使用，直接删除mounted方法即可 this.getList(), this.getDeputationAndCommitteeList() //框架内使用 mounted方法 }, mounted() { this.singleStore = store.getters.singleStore['main' + this.funNo] this.subSingleStore = this.singleStore.subSingleStore['sub' + this.subFunNo] this.canSave = (this.singleStore.handleType == 'edit' && !this.subSingleStore.ifEnd) || this.singleStore.handleType == 'add' this.getRecord() }, watch: { form: { handler(newval) { if (newval && this.subSingleStore) { store.dispatch('updateSingleStore', newval) } }, immediate: true, deep: true } }, methods: { refresh() { this.masterRefresh() }, /** 查询党员信息- 职务信息（01）、两代一委员（02）列表 */ getList(){ this.getList1(); this.getList2(); }, getList1() { this.loading = true; this.queryParams.ctIdP = this.bussId this.queryParams.ctType = '01'; listJobinformation(this.queryParams).then(response => { this.jobinformationList1 = response.rows; this.total = response.total; this.loading = false }) }, getList2() { this.loading2 = true; this.queryParams2.ctIdP = this.bussId this.queryParams2.ctType = '02'; listJobinformation(this.queryParams2).then(response => { this.jobinformationList2 = response.rows; this.total2 = response.total this.loading2 = false }) }, /** 构建字典相关*/ // 取消按钮 cancel() { this.open = false this.reset() }, // 表单重置 reset() { //但数据输入可以直接删除 this.form = { ctId: null, ctIdP: null, ctName: null, ctType: null, ctBranch: null, ctBranchName: null, ctPositionName: null, ctRepresentativeType: null, ctSession: null, ctPositionInstruction: null, ctPositionLevel: null, dtStartDate: null, dtEndDate: null, ctMark: null, ctState: null, ctCreateUser: null, dtCreateDate: null, ctUpdateUser: null, dtUpdateDate: null, ctOther1: null, ctOther2: null, ctOther3: null } this.resetForm('form') }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1 this.getList() }, /** 重置按钮操作 */ resetQuery() { this.resetForm('queryForm') this.handleQuery() }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.ctId) this.single = selection.length !== 1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd(e) { this.reset() this.form.ctType = e.currentTarget.attributes["title"].value; this.form.ctIdP = this.bussId this.open = true this.title = this.form.ctType == '01'?'添加党员信息- 职务信息':'添加党员信息- 两代一委员' }, /** 修改按钮操作 */ handleUpdate(row) { this.reset() const ctId = row.ctId || this.ids getJobinformation(ctId).then(response => { this.form = response.data this.open = true this.title = this.form.ctType == '01'?'添加党员信息- 职务信息':'添加党员信息- 两代一委员' }) }, updateSelectTreeValctPositionName(value) { this.form.ctPositionName = value }, updateSelectTreeValctBranchName(value) { this.form.ctBranchName = value }, updateSelectTreeValctPositionLevel(value) { this.form.ctPositionLevel = value }, /** 提交按钮 */ submitForm() { this.$refs['form'].validate(valid => { if (valid) { if (this.form.ctId != null) { updateJobinformation(this.form).then(response => { this.msgSuccess('修改成功') this.open = false this.form.ctType == '01'?this.getList1():this.getList2() }) } else { addJobinformation(this.form).then(response => { this.msgSuccess(response.msg) this.open = false this.form.ctType == '01'?this.getList1():this.getList2() }) } } }) }, /** 删除按钮操作 */ handleDelete(row) { const ctIds = row.ctId || this.ids const title = row.ctType == '01'?'职务信息':'两代一委员' this.$confirm('是否确认删除党员信息- ' + title + '编号为"' + ctIds + '"的数据项?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(function() { return delJobinformation(ctIds) }).then(() => { row.ctType == '01'?this.getList1():this.getList2() this.msgSuccess('删除成功') }) }, /** 导出按钮操作 */ handleExport() { const queryParams = this.queryParams this.$confirm('是否确认导出所有党员信息- 职务信息（01）、两代一委员（02）数据项?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(function() { return exportJobinformation(queryParams) }).then(response => { this.download(response.msg) }) }, /** 根据不同字段，创建不同的树构建方法 */ /** 获取单条记录*/ getRecord() { if (this.singleStore.handleType != 'add' && this.bussId) { getJobinformation(this.bussId).then((response) => { if(response.data){ this.form = response.data this.form.subFunNo = this.subFunNo this.form.funNo = this.funNo store.dispatch('setStoreForm', this.form) }else{ this.$nextTick(() => { this.formInit() store.dispatch('setStoreForm', this.form) }) } }) } else if (this.singleStore.handleType == 'add') { // 新增 this.$nextTick(() => { this.formInit() store.dispatch('setStoreForm', this.form) }) } }, // 表单数据信息初始化 formInit() { //获取默认组织，默认创建人员等，其他默认值根据业务自行创建 const branchInfo = store.state.user.branchInfo this.form = {} this.form.ctBranch = branchInfo.manageBranchCode this.form.ctId = undefined this.form.ctFunNo = this.funNo this.form.subFunNo = this.funNo this.form.funNo = this.funNo // 登录账号，后台会修改的，无所谓。 this.form.ctCreateUser = branchInfo.partymanName this.form.ctUpdateUser = branchInfo.partymanName this.form.dtCreateDate = parseTime(new Date()) this.form.dtUpdateDate = parseTime(new Date()) } } } .main-form .vue-treeselect__control { width: 100%; } .select-td{ width: 80%; }代码解释：listJobinformation 为请求的后台接口 。 this.queryParams2.ctIdP = this.bussId this.queryParams2.ctType = '02'; 为请求后台接口时 /XXX/XXX/list 为此接口传递过滤数据的参数值 js脚本 // 查询党员信息- 职务信息（01）、两代一委员（02）列表 export function listJobinformation(query) { return request({ url: '/XXX/XXX/list', method: 'get', params: query }) }说明： 知识点： created:在模板渲染成 html前调用，即通常初始化某些属性值，然后再渲染成视图。 created() { //原始列表使用，直接删除mounted方法即可 this.getList(), this.getDeputationAndCommitteeList() //框架内使用 mounted方法 }, import { listJobinformation, getJobinformation, delJobinformation, addJobinformation, updateJobinformation, exportJobinformation } from '@/api/XXX/jobinformation' getList(){ this.getList1(); this.getList2(); }, getList1() { this.loading = true; this.queryParams.ctIdP = this.bussId this.queryParams.ctType = '01'; listJobinformation(this.queryParams).then(response => { this.jobinformationList1 = response.rows; this.total = response.total; this.loading = false }) }, getList2() { this.loading2 = true; this.queryParams2.ctIdP = this.bussId this.queryParams2.ctType = '02'; listJobinformation(this.queryParams2).then(response => { this.jobinformationList2 = response.rows; this.total2 = response.total this.loading2 = false }) },承接 1.管理类系统， 2.企业OA系统， 3.财务报表/统计管理类系统， 4.微信小程序， 5.党建党务系统， 6.可视化数据大屏BI 7.企业门户网站， 8.支付系统/对接银联系统 开发， 9.系统设计开发建设咨询/报价 微信建议本人，或使用淘宝搜索【店铺】 【大锤软件开发设计】。推荐成功有现金回馈哦 |
【本文地址】
今日新闻 |
推荐新闻 |