用ele-ui做表格展示时常用到的操作功能

一些常用的功能会用到的如下：

<el-button v-show="scope.row.state !== 1" type="text" size="small" @click="startB(scope.row)">启用</el-button>
 <el-button v-show="scope.row.state !== 0" type="text" size="small" @click="end(scope.row)" >禁用</el-button>
 
 <el-dropdown trigger="click">
 
 更多
 
 
 <el-dropdown-menu slot="dropdown">
 <el-dropdown-item command="1">
 <el-button type="text" size="small" @click="alertHistory(scope.row)" >告警历史</el-button>
 </el-dropdown-item>
 <el-dropdown-item command="2">
 <el-button type="text" size="small" @click="del(scope.row)" >删除</el-button>
 </el-dropdown-item>
 </el-dropdown-menu>
 </el-dropdown>

对以上操作会用到的方法是：

startB(row) {
      this.$confirm('确定要启用这条告警规则吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal:false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            // let req = {
            //   id: row.id,
            //   adminEmail: this.$store.state.user.userMail,
            //   userId:this.$store.state.user.userId,
            //   clusterJson:row.clusterJson
            // }
            let req = {
              ids: row.id,
              adminEmail: this.$store.state.user.userMail,
             //userId:this.$store.state.user.userId,
              names: row.alert
            }
             this.$http.startMonitor(req).then((res) => {
            //   done();
            //   instance.confirmButtonLoading = false;
            //   if (res && res.data.state=='success') {
            //     this.$popSuccess('启用告警规则成功')
            //     this.search()
            //   } else {
            //     this.$popError(res.data.message)
            //   }
             })
          } else {
            done();
          }
        }
      }).then(() => {
      }).catch(() => {
      });
    },

end(row) {
      this.$confirm('确定要禁用这条告警规则吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal:false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            // let req = {
            //   id: row.id,
            //   adminEmail: this.$store.state.user.userMail,
            //   userId:this.$store.state.user.userId,
            //   clusterJson:row.clusterJson
            // }
            let req = {
              ids: row.id,
              adminEmail: this.$store.state.user.userMail,
             // userId:this.$store.state.user.userId,
              names: row.alert
            }
            /this.$http.stopMonitor(req).then((res) => {
            //   done();
            //   instance.confirmButtonLoading = false;
            //   if (res && res.data.state=='success') {
            //     this.$popSuccess('禁用告警规则成功')
            //     this.search()
            //   } else {
            //     this.$popError(res.data.message)
            //   }
             })
          } else {
            done();
          }
        }
      }).then(() => {
      }).catch(() => {
      });
    }

alertHistory (item) {
      let path;
      if (this.$store.state.productType == 2){
        path= "/app/boc-logAlarmHistory"
      } else{
        path= "/app/boms/monitorHistory"
      }
      let obj = {
        path:path,
        query: {
          id: item.id,
              //sysId: this.query.sysId,
              //: this.query.userId,
              pageNum: 1,
              pageSize: 10,
              alert: item.alert,
              monitorType: item.monitorType
        }
    };
        this.$router.push(obj)
    },

用ele-ui做表格展示时常用到的操作功能

猜你喜欢