vue页面加载时同时请求两个接口

王大锤4391

已于 2023-05-17 15:33:29 修改

阅读量5.9k

点赞数 2

分类专栏： vue 文章标签： vue.js node.js javascript

于 2021-09-29 10:40:21 首次发布

本文链接：https://blog.csdn.net/weixin_41037490/article/details/120543589

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

请求接口数据：

代码：

<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.系统设计开发建设咨询/报价
微信建议本人，或使用淘宝搜索【店铺】【大锤软件开发设计】。推荐成功有现金回馈哦

王大锤4391

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
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="1.5"> <el-b...
复制链接

扫一扫