SoonWorkerD/src/renderer/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
const dayjs = require('dayjs')

export default {
  name: 'App',
  data() {
    return {
      errors: []
    }
  },
  mounted() {
    let that = this
    // if (that.$store.getters.token) {
      
    // }
    that.$store.dispatch('chat/initWebSocket') // 初始化websocket
  },
  watch: {
    '$store.state.chat.printer_error': {
      handler(val) {
        let that = this
        const currentTime = dayjs().format('HH:mm:ss')
        if (val.message) {
          if (that.errors.indexOf(val.message) === -1) {
            that.errors.push(val.message)
            that.showNotify({ time: currentTime, message: val.message, ...val })
          }
        }
        if (val.notify) {
          if (that.errors.indexOf(val.notify) === -1) {
            that.errors.push(val.notify)
            that.showNotify({ time: currentTime, message: val.notify, ...val })
          }
        }
        if (val.confirm) {
          if (that.errors.indexOf(val.confirm) === -1) {
            that.errors.push(val.confirm)
            that.showNotify({ time: currentTime, message: val.confirm, ...val })
          }
        }
      },
      deep: true,
      immediate: true
    },
    '$store.state.chat.isConnect': {
      handler(val) {
        let that = this
        if (val) {
          that.errors = []
        } else {
          that.$notify.closeAll()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    showNotify(data) {
      let that = this
      let notifyInstance
      function renderNotifyContent() {
        let btns = [
          that.$createElement(
            'el-button',
            {
              props: { size: 'mini' },
              on: {
                click: () => {
                  notifyInstance.close()
                }
              }
            },
            '跳过'
          ),
          that.$createElement(
            'el-button',
            {
              props: { type: 'primary', size: 'mini' },
              style: { marginLeft: '10px' },
              on: {
                click: () => {
                  that.errors.splice(that.errors.indexOf(data.message), 1)
                  notifyInstance.close()
                }
              }
            },
            '确定'
          )
        ]
        if (data.confirm) {
          btns[1] = that.$createElement(
            'el-button',
            {
              props: { type: 'primary', size: 'mini' },
              style: { marginLeft: '10px' },
              on: {
                click: () => {
                  // 下一个任务
                  that.$store
                    .dispatch('chat/websocketsend', {
                      req_name: 'continue_task',
                      req_type: 1,
                      req_info: {}
                    })
                    .then(() => {
                      notifyInstance.close()
                      setTimeout(() => {
                        that.errors.splice(that.errors.indexOf(data.message), 1)
                      }, 10000);
                    })
                    .catch(() => {})
                }
              }
            },
            '重试'
          )
        }
        return that.$createElement('div', [that.$createElement('p', { style: 'margin-top: 8px; line-height: 24px' }, data.message), that.$createElement('div', { style: 'margin-top: 8px; text-align: right' }, btns)])
      }
      // 创建通知实例
      notifyInstance = that.$notify({
        title: '温馨提示：' + data.time,
        message: renderNotifyContent(), // 初始化时直接生成内容
        duration: 0,
        type: data.type,
        showClose: false,
      })
    }
  }
}
</script>
<style lang="scss">
@use './styles/index.scss'; // 全局自定义的css样式
.el-notification__group {
  width: 100%;
}
.el-notification__content {
  margin: 0;
  line-height: 24px;
}
.notify_btns {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 10px 0 0;
  gap: 14px;
  .notify_btn {
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
  }
  .notify_btn1 {
    border: 1px solid #ccc;
  }
  .notify_btn2 {
    background-color: #409eff;
    color: #fff;
  }
}
</style>