elementui Notification通知自定义按钮(官方只有两个按钮:确认和取消,我的需求是三个按钮)

1、二次封装Notification

 openMessageBox(val) {
      return new Promise((resolve, reject) => {
        const h = this.$createElement
        this.$msgbox({
          title: '告警确认处理',
          showClose:false,
          closeOnClickModal:false,
          closeOnHashChange:false,
          message: h('div', null, [
            h('i', {
              class: 'el-icon-warning',
              style: 'color: #FCBE2D;font-size: 18px !important;margin-right: 10px;'
            }),
            h('div', {style:'margin-bottom:10px;'}, `确认内容: ${val.confirmContent}?`),
            h('div', {style:'margin-bottom:10px;'}, `规则名:【${val.ruleName || ''}】${val.alarmValue}`),
            h('div', {style:'margin-bottom:10px;'}, `规则类型: ${val.ruleTypeName || ''}`),
            h('div', {style:'margin-bottom:10px;'}, `推送类型: ${val.pushTypeName || ''}`),
            h(
              'div',
              {
                style: 'display:flex;justify-content: flex-end;justify-content: flex-end;margin-top: 10px;margin-bottom: -10px;'
              },
              [
                h(
                  'el-button',
                  {
                    class: 'el-button--warning',
                    on: {
                      click: () => {
                        resolve('0')
                      }
                    }
                  },
                  '误报'
                ),
                h(
                  'el-button',
                  {
                    class: 'el-button--primary',
                    on: {
                      click: () => {
                        resolve('1')
                      }
                    }
                  },
                  '正确报警'
                ),
                h(
                  'el-button',
                  {
                    class: 'el-button--success',
                    on: {
                      click: () => {
                        resolve('2')
                      }
                    }
                  },
                  '正确报警并执行控制指令'
                )
              ]
            )
          ]),
          showCancelButton: false,
          showConfirmButton: false,
          callback: () => {}
        })
      })
    },

 2、使用:传递对象

this.openMessageBox(val).then((res)=>{
   this.dealWithConfirm(res); // res为区分按钮点击的参数
})

// 告警确认处理
dealWithConfirm(_type) {
//confirmStatus 确认状态(0误报、1正确报警、2正确报警并执行控制指令)
let params = {
alarmRecordNo: this.$store.state.user.confirmData.alarmRecordNo,
confirmStatus: _type
}
handleConfirm(params).then(res => {
this.$message.success(res.message);
this.$msgbox.close()
}).catch(err=>{

})
}
 

 

posted on 2024-07-23 14:11  小虾米吖~  阅读(267)  评论(0编辑  收藏  举报