149 lines
4.3 KiB
Plaintext
149 lines
4.3 KiB
Plaintext
<template>
|
|
<BaseContainer>
|
|
<template slot="main-container">
|
|
<div v-loading="loading" 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="请输入按键"
|
|
style="width:170px"
|
|
/>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-if="hotKeyList.length>0" style="text-align:right;width:680px;">
|
|
<el-button size="small" @click="handleReset"> {{ $t('common:button:reset') }}</el-button>
|
|
<el-button size="small" type="primary" @click="handleSave"> {{ $t('common:button:save') }}</el-button>
|
|
</div>
|
|
</template>
|
|
</BaseContainer>
|
|
</template>
|
|
<script>
|
|
import { getDoctorShortcutKey, setShortcutKey, restoreDefaultShortcutKey } from '@/api/user'
|
|
import BaseContainer from '@/components/BaseContainer'
|
|
import HotkeyInput from './HotKeyInput.vue'
|
|
export default {
|
|
name: 'HotKeysListApp',
|
|
components: { BaseContainer, 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() {
|
|
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 })
|
|
})
|
|
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 => {
|
|
console.log(res)
|
|
this.loading = false
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
handleReset() {
|
|
this.$confirm('是否确认重置？', {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true
|
|
})
|
|
.then(() => {
|
|
this.loading = true
|
|
restoreDefaultShortcutKey({ imageToolType: this.readingTool }).then(res => {
|
|
this.$message.success('重置成功！')
|
|
this.getHotkeys()
|
|
}).catch(() => { this.loading = false })
|
|
})
|
|
.catch(action => {})
|
|
},
|
|
handleHotkeyVerify(hotkey) {
|
|
for (const item of this.hotKeyList) {
|
|
if (item.keys.text === hotkey.text && item.id !== hotkey.id) {
|
|
this.$notify({
|
|
title: '提示',
|
|
message: `此快捷键已被“${this.$fd('ShortcutKey', item.label)}”绑定`,
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.hot-keys-container {
|
|
width: 800px;
|
|
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>
|