mes-web/src/components/base/dk-message/index.vue

<!-- @desc:Message信息  @auth:周兴  @time:2022/11/15 14:31 -->
<template>
  <DkModal ref="modal_message" v-model="visible" width="300" :title="title"
           @modalOk="onOk"
           @modalCancel="onCancel"
           @on-cancel="onCancel">
    <!--  主体部分  -->
    <div class="content-div">
      <Icon type="md-help-circle" color="#2d8cf0" class="content-icon"/>
      {{ content }}
    </div>
  </DkModal>
</template>

<script>
import {button as buttonList} from "@/locale/lang/zh-CN";

export default {
  name: "MyMessage",
  data() {
    const vm = window.vm;
    return {
      documentKeyDownContent: Object,
      vm: vm,
      title: '系统提示',//标题
      content: '确定要这么做吗？',//主体内容
      visible: false,//显示控制
      cancelFunc: () => {
      },//取消回调
      okFunc: () => {
      },//确定回调
      okText: vm.$t('confirm'),
      cancelText: vm.$t('cancel'),
    }
  },
  methods: {
    /**
     * @desc   : 监听全局键盘按钮按下的事件
     * @author : 周兴
     * @date   : 2022/3/4 16:57
     */
    addKeyBoardEvent() {
      let code = 0
      let self = this
      this.documentKeyDownContent = document.onkeydown;
      document.onkeydown = function (e) {
        const evn = e || event
        const key = evn.keyCode || evn.which || evn.charCode
        // alt：code = 18
        if (key === 18) {
          code = 18
        }
        let btList = []
        for (let itKey in buttonList) {
          if (!buttonList[itKey].includes('(')) {
            continue
          }
          btList.push({
            name: itKey,
            hotKey: buttonList[itKey].substring(buttonList[itKey].length - 2, buttonList[itKey].length - 1)
          })
        }

        // 查询子模块是否开着
        let currentModal = null
        let modalName = ''
        for (let it of Object.keys(self.$refs)) {
          // 如果没有放大镜的查询，那么就看这个界面的查询
          if (it.startsWith('modal_') && self.$refs[it] && self.$refs[it].showModal) {
            currentModal = self.$refs[it]
            modalName = it
            break
          }
        }
        // Q：code = 81 查询
        btList.forEach(forIt => {
          if (code != 18 || forIt.hotKey.toLowerCase() != e.key.toLowerCase()) return
          e.returnValue = false
          // 如果模块开着，在前面加上模块的ref名
          if (currentModal != null) {
            if (self.$refs[modalName].$refs[forIt.name]) {
              self.$refs[modalName].$refs[forIt.name].$el.click()
            }
          } else {
            if (self.$refs[forIt.name]) {
              self.$refs[forIt.name].$el.click()
            }
          }
        })
      }
      // 监听全局键盘按钮松开的事件
      document.onkeyup = function (e) {
        const evn = e || event
        const key = evn.keyCode || evn.which || evn.charCode
        if (key === 18) {
          code = 0
        }
      }
    },
    /**
     * @author : 沈博
     * @date   : 2022/2/28 16:57
     * @desc   : 点击取消
     */
    onCancel() {
      this.visible = false
      this.cancelFunc()
      this.displayFlag = false;
    },
    /**
     * @author : 沈博
     * @date   : 2022/2/28 16:57
     * @desc   : 点击确定
     */
    onOk() {
      this.visible = false
      this.okFunc()
    }
  },
  watch: {
    visible(n, o) {
      if (!n) {
        //回复快捷键
        document.onkeydown = this.documentKeyDownContent;
      }else{
        this.addKeyBoardEvent() // 增加快捷键
      }
    }
  },
  created() {
  }
}
</script>
<style scoped>

/deep/ .ivu-modal-body {
  padding: 0;
}

.close-div {
  color: #fff;
}

.close-icon {
  font-size: 20px;
  margin-top: -1px;
}

.content-div {
  height: 105px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.content-icon {
  font-size: 28px;
  margin-right: 10px;
}
</style>