vue页面加载时同时请求两个接口
请求接口数据：代码：<template><div style="margin: 0 10px;"><h4 style="float:left;margin:10px 0px 5px 5px">职务信息</h4><div style="float:right;margin:5px 0px 5px 5px"><el-col :span=
·
请求接口数据：
代码：
<template>
<div style="margin: 0 10px;">
<h4 style="float:left;margin:10px 0px 5px 5px">职务信息</h4>
<div style="float:right;margin:5px 0px 5px 5px">
<el-col :span="1.5">
<el-button
type="primary"
plain
title='01'
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:function:add']"
>新增
</el-button>
<el-button
type="success"
plain
icon="el-icon-refresh"
size="mini"
@click="getList"
>刷新
</el-button>
</el-col>
</div>
<el-table v-loading="loading" :data="jobinformationList1" @selection-change="handleSelectionChange" border>
<el-table-column label="任职党组织" align="center" prop="ctBranchName"/>
<el-table-column label="任职机构名称" align="center" prop="ctBranchName"/>
<el-table-column label="职务名称" align="center" prop="ctPositionNameName"/>
<el-table-column label="职务说明" align="center" prop="ctPositionInstruction"/>
<el-table-column label="职务级别" align="center" prop="ctPositionLevelName"/>
<el-table-column label="任职日期" align="center" prop="dtStartDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dtStartDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="免职日期" align="center" prop="dtEndDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dtEndDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="120px"
>
<template slot-scope="scope">
<el-button
size="medium"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
title="修改/浏览"
></el-button>
<el-button
size="medium"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-if="canSave"
title="删除"
></el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList1"
/>
<h4 style="float:left;margin:35px 0px 5px 5px">两代一委员</h4>
<div style="float:right;margin:35px 0px 5px 5px">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
title='02'
size="mini"
@click="handleAdd"
v-hasPermi="['system:function:add']"
>新增
</el-button>
<el-button
type="success"
plain
icon="el-icon-refresh"
size="mini"
@click="getDeputationAndCommitteeList"
>刷新
</el-button>
</el-col>
</div>
<el-table v-loading="loading2" :data="jobinformationList2" @selection-change="handleSelectionChange" border>
<el-table-column label="任职党组织" align="center" prop="ctBranchName"/>
<el-table-column label="任职机构名称" align="center" prop="ctBranchName"/>
<el-table-column label="职务名称" align="center" prop="ctPositionNameName"/>
<el-table-column label="职务说明" align="center" prop="ctPositionInstruction"/>
<el-table-column label="职务级别" align="center" prop="ctPositionLevelName"/>
<el-table-column label="任职日期" align="center" prop="dtStartDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dtStartDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="免职日期" align="center" prop="dtEndDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dtEndDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="120px"
>
<template slot-scope="scope">
<el-button
size="medium"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
title="修改/浏览"
></el-button>
<el-button
size="medium"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-if="canSave"
title="删除"
></el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total2>0"
:total="total2"
:page.sync="queryParams2.pageNum"
:limit.sync="queryParams2.pageSize"
@pagination="getList2"
/>
<!-- 添加或修改党员信息- 两代一委员（02）对话框 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<!-- 当前form在符合模板前提下，保留，其他部分删除即可-->
<el-row class="mb8">
<div style="float:right;">
<el-button type="primary" size="mini" @click="submitForm">保 存</el-button>
</div>
</el-row>
<el-form ref="form" :model="form" :rules="rules" label-width="100px" class="main-form">
<el-row :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="任职机构" prop="ctBranchName" >
<el-input v-if="!isSelect" v-model="form.ctBranchName" style="width:75%" placeholder="请输入任职机构名称" :readonly="!canSave"/>
<div style="width:75%;float:left">
<mis-select-tree
:mis-tree-type="100"
:setValue="form.ctBranchName"
v-model="form.ctBranch"
@updateSelectTreeVal="updateSelectTreeValctBranchName"
v-if="isSelect"
></mis-select-tree>
</div>
<input type="checkbox" v-model="isSelect" :value="true">选择
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="职务名称" prop="ctPositionName">
<mis-select-tree
:mis-tree-type="159"
:select-multiple="false"
:disable-branch-nodes="true"
@updateSelectTreeVal="updateSelectTreeValctPositionName"
:setValue="form.ctPositionName"
:disabled="!canSave"
></mis-select-tree>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="职务说明" prop="ctPositionInstruction">
<el-input v-model="form.ctPositionInstruction" placeholder="请输入职务说明" :readonly="!canSave"/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="职务级别" prop="ctPositionLevel">
<mis-select-tree
:mis-tree-type="160"
:select-multiple="false"
:disable-branch-nodes="true"
@updateSelectTreeVal="updateSelectTreeValctPositionLevel"
:setValue="form.ctPositionLevel"
:disabled="!canSave"
></mis-select-tree></el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="任职日期" prop="dtStartDate">
<el-date-picker clearable size="small" style="width:100%;"
v-model="form.dtStartDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择任职日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item label="免职日期" prop="dtEndDate">
<el-date-picker clearable size="small" style="width:100%;"
v-model="form.dtEndDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择免职日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item label="备注说明" prop="ctMark">
<el-input v-model="form.ctMark" type="textarea" placeholder="请输入内容" :readonly="!canSave"
:autosize="{ minRows: 4, maxRows: 4}"/>
</el-form-item>
</el-col>
</el-row>
<create-info
:ct-create-user="form.ctCreateUser"
:dt-create-date="form.dtCreateDate"
:ct-update-user="form.ctUpdateUser"
:dt-update-date="form.dtUpdateDate"
></create-info>
</el-form>
<el-row class="mb8">
<div style="float:right;">
<el-button type="primary" size="mini" @click="submitForm">保 存</el-button>
</div>
</el-row>
</el-dialog>
</div>
</template>
<script>
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())
}
}
}
</script>
<style>
.main-form .vue-treeselect__control {
width: 100%;
}
.select-td{
width: 80%;
}
</style>
代码解释：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方法
},
<script>
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.系统设计开发建设咨询/报价
微信建议本人，或使用淘宝搜索【店铺】 【大锤软件开发设计】。推荐成功有现金回馈哦
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)