vue前端调取数据接口方法：接口为封装方法的js文件(一)

1.获取列表：并在mounted()中调用此方法，即this.getEmergencyResponseList()

//获取列表
        getEmergencyResponseList(){
          //分页
          this.queryParams.pageNum = this.pagination.current
          this.queryParams.pageSize = this.pagination.size
          this.loading = true  //数据加载动画
          listEmergencyAccidentProcessInfo(this.queryParams).then(res =>{          
            this.tableData = res.rows
            this.total = res.total
            this.loading=false
            // console.log(res)
          })
        },

2.新增、查看、修改为同一弹窗时，根据title判断操作，显示不同功能弹窗

 1）二项时： :title="oprateType=='add'?'新增':'修改'"
 2）三项时： :title="oprateType=='add'?'新增':oprateType=='edit'?'修改':'查看'" 

2.增、删、改、查

 <el-table-column slot="action" label="操作" width="150">
     <template slot-scope="scope">
        <el-button type="text" size="small" @click="checkDrillPlan(scope.row.planId)" class="qgreen" v-hasPermi="['system:emergencyDrillingPlan:query']">查看</el-button>
        <el-button type="text" size="small" @click="editDrillPlan(scope.row)" class="qgreen" v-hasPermi="['system:emergencyDrillingPlan:edit']">修改</el-button>
        <el-button type="text" size="small" @click="delDrillPlan(scope.row.planId)" class="orange" v-hasPermi="['system:emergencyDrillingPlan:remove']">删除</el-button>
      </template>
  </el-table-column>

 //新增
      addEmerDrillPlan() {
        this.oprateType = 'add'
        this.isShowDialog = true
      },
      //修改
      editDrillPlan(data) {
        this.oprateType = 'edit'
        this.isShowDialog = true
        this.isDisable = false
        this.isBtnShow = true
        this.DillPlanDetail = data
      },

      //查看
      checkDrillPlan(planId) {
        this.oprateType = 'check'
        this.isShowDialog = true
        this.isBtnShow = false
        this.isDisable = true
        getEmergencyWarnGradeInfo(planId).then(res => {
          this.DillPlanDetail = res.data       
        })
      },
       //保存
      saveUpdate() {
        this.$refs.addDrillPlanRef.validate((valid) => {
          if (valid) {
            //新增
            if (this.oprateType === 'add') {
              addEmergencyWarnGradeInfo(this.DillPlanDetail).then(res => {
                this.getEmerDrillPlanList()
                this.$message.success("新增成功！")
              })
              this.isShowDialog = false
              this.resetForm() //清空表单方法
            } else {
              //修改
              this.oprateType = 'edit'
              updateEmergencyWarnGradeInfo(this.DillPlanDetail).then(res => {
                this.getEmerDrillPlanList()
                this.$message.success("修改成功！")
              })
              this.isShowDialog = false
              this.resetForm()  //清空表单方法
            }
          }
        })
      },
      //删除
      async delDrillPlan(planId) {
        const confirmResult = await this.$confirm('此操作将永久删除该信息, 是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delEmergencyWarnGradeInfo(planId).then(res => {
            this.getEmerDrillPlanList();
          });
        });
      },
       //清空表单
      clearForm() {
        this.queryParams = {
          planName: '',
          assessment: '',
          organizationalUnit: ''
        }
        this.getEmerDrillPlanList(); //清空后重新获取列表
      },
       //批量删除
      delRegionBatch(data){
        let  newCheckRowData =  this.checkRowData.map(item => {
          if (item.planId != undefined && item.planId != null && item.planId != '') {
            return item.planId;
          }
        });
        this.$confirm('此操作将永久删除该信息, 是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delEmergencyWarnGradeInfo(newCheckRowData).then(res=>{
            this.$modal.msgSuccess(res.msg);
            this.getEmerDrillPlanList();
          });
        });
      },