irc_web/.svn/pristine/f1/f1189eac39613b9911a171fdb07ff0abb495ffb0.svn-base

<template>
  <div v-loading="loading">
    <div class="base-dialog-body" style="height:380px;overflow-y: auto;">
      <div class="hot-keys-container">
        <div v-for="(item, index) in hotKeyList" :key="`${item.tag}_${index}`" class="wrapper">
          <template>
            <div class="hot-keys-label">{{ $fd('ShortcutKey',item.label) }}</div>
            <HotkeyInput
              class="hotkey"
              :hotkey.sync="hotKeyList[index].keys"
              :verify="handleHotkeyVerify"
              :hotkey-id="hotKeyList[index].id"
              :placeholder="$t('trials:hotkeys:message:input')"
              style="width:170px"
            />
          </template>
        </div>

      </div>
    </div>
    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">

      <el-button size="small" type="primary" @click="handleReset"> {{ $t('common:button:reset') }}</el-button>
      <el-button size="small" type="primary" @click="handleSave"> {{ $t('common:button:save') }}</el-button>

    </div>
  </div>
</template>
<script>
import { getDoctorShortcutKey, setShortcutKey, restoreDefaultShortcutKey } from '@/api/user'
import HotkeyInput from './HotKeyInput'
export default {
  name: 'HotKeys',
  components: { HotkeyInput },
  props: {
    readingTool: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      hotKeyList: [],
      loading: false
    }
  },
  watch: {
    hotKeyList: {
      handler: function(val) {
        // console.log(val)
      },
      immediate: true
    }
  },
  mounted() {
    this.getHotkeys()
  },
  methods: {
    getHotkeys(isReset = false) {
      this.loading = true
      this.hotKeyList = []
      getDoctorShortcutKey({ imageToolType: this.readingTool }).then(res => {
        res.Result.map(item => {
          this.hotKeyList.push({ id: item.Id, keys: { controlKey: { altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code }, text: item.Text }, label: item.ShortcutKeyEnum })
        })
        if (isReset) {
          this.$emit('reset', this.hotKeyList)
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSave() {
      this.loading = true
      var params = {
        imageToolType: this.readingTool,
        shortcutKeyList: []
      }
      var shortcutKeyList = []
      this.hotKeyList.map(item => {
        shortcutKeyList.push(
          {
            shortcutKeyEnum: item.label,
            keyboardkey: item.keys.controlKey.key,
            code: item.keys.controlKey.code,
            text: item.keys.text,
            altKey: item.keys.controlKey.altKey,
            ctrlKey: item.keys.controlKey.ctrlKey,
            shiftKey: item.keys.controlKey.shiftKey,
            metaKey: item.keys.controlKey.metaKey }
        )
      })
      params.shortcutKeyList = shortcutKeyList
      setShortcutKey(params).then(res => {
        this.$emit('reset', this.hotKeyList)
        // this.$emit('close')
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleReset() {
      // '是否确认重置？'
      this.$confirm(this.$t('trials:hotkeys:message:confirmReset'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.loading = true
          restoreDefaultShortcutKey({ imageToolType: this.readingTool }).then(res => {
            this.$message.success(this.$t('trials:hotkeys:message:resetSuccessfully')) // '重置成功！'
            this.getHotkeys(true)
          }).catch(() => { this.loading = false })
        })
        .catch(action => {})
    },
    handleHotkeyVerify(hotkey) {
      for (const item of this.hotKeyList) {
        if (item.keys.text === hotkey.text && item.id !== hotkey.id) {
          const msg = this.$t('trials:hotkeys:message:tip1').replace('xxx', this.$fd('ShortcutKey', item.label))
          this.$notify({
            title: this.$t('trials:hotkeys:message:tip'),
            message: msg,
            type: 'warning'
          })
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="scss">
.hot-keys-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  .wrapper{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 49%;
    .hot-keys-label{
      padding: 5px;
      font-size: 13px;
      width:120px;
      text-align: right;
    }
  }
}
</style>