feat: add db selection for new key dialog
refactor: remove unused code
This commit is contained in:
parent
0f29a3c34f
commit
62d6924541
|
@ -5,7 +5,6 @@ import (
|
||||||
"errors"
|
"errors"
|
||||||
"fmt"
|
"fmt"
|
||||||
"github.com/redis/go-redis/v9"
|
"github.com/redis/go-redis/v9"
|
||||||
"log"
|
|
||||||
"strconv"
|
"strconv"
|
||||||
"strings"
|
"strings"
|
||||||
"sync"
|
"sync"
|
||||||
|
@ -308,7 +307,6 @@ func (c *connectionService) parseDBItemInfo(info string) map[string]int {
|
||||||
// OpenDatabase open select database, and list all keys
|
// OpenDatabase open select database, and list all keys
|
||||||
// @param path contain connection name and db name
|
// @param path contain connection name and db name
|
||||||
func (c *connectionService) OpenDatabase(connName string, db int) (resp types.JSResp) {
|
func (c *connectionService) OpenDatabase(connName string, db int) (resp types.JSResp) {
|
||||||
log.Println("open db:" + strconv.Itoa(db))
|
|
||||||
rdb, ctx, err := c.getRedisClient(connName, db)
|
rdb, ctx, err := c.getRedisClient(connName, db)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
resp.Msg = err.Error()
|
resp.Msg = err.Error()
|
||||||
|
|
|
@ -51,7 +51,7 @@ const onConfirmDelete = async () => {
|
||||||
<redis-type-tag :type="props.keyType" size="large"></redis-type-tag>
|
<redis-type-tag :type="props.keyType" size="large"></redis-type-tag>
|
||||||
<n-input v-model:value="props.keyPath">
|
<n-input v-model:value="props.keyPath">
|
||||||
<template #suffix>
|
<template #suffix>
|
||||||
<icon-button :icon="Refresh" :tooltip="$t('reload_key')" size="18" @click="onReloadKey" />
|
<icon-button :icon="Refresh" t-tooltip="reload_key" size="18" @click="onReloadKey" />
|
||||||
</template>
|
</template>
|
||||||
</n-input>
|
</n-input>
|
||||||
</n-input-group>
|
</n-input-group>
|
||||||
|
@ -70,12 +70,19 @@ const onConfirmDelete = async () => {
|
||||||
</template>
|
</template>
|
||||||
TTL
|
TTL
|
||||||
</n-tooltip>
|
</n-tooltip>
|
||||||
<n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">
|
<icon-button
|
||||||
<template #icon>
|
border
|
||||||
<n-icon :component="Edit" size="18" />
|
:icon="Edit"
|
||||||
</template>
|
t-tooltip="rename_key"
|
||||||
{{ $t('rename_key') }}
|
size="18"
|
||||||
</n-button>
|
@click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)"
|
||||||
|
/>
|
||||||
|
<!-- <n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">-->
|
||||||
|
<!-- <template #icon>-->
|
||||||
|
<!-- <n-icon :component="Edit" size="18" />-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- {{ $t('rename_key') }}-->
|
||||||
|
<!-- </n-button>-->
|
||||||
</n-button-group>
|
</n-button-group>
|
||||||
<n-tooltip>
|
<n-tooltip>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
|
|
|
@ -20,20 +20,10 @@ const props = defineProps({
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 3,
|
default: 3,
|
||||||
},
|
},
|
||||||
|
border: Boolean,
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
})
|
})
|
||||||
|
|
||||||
const disableColor = computed(() => {
|
|
||||||
const baseColor = props.color
|
|
||||||
const grayScale = Math.round(
|
|
||||||
0.299 * parseInt(baseColor.substring(1, 2), 16) +
|
|
||||||
0.587 * parseInt(baseColor.substring(3, 2), 16) +
|
|
||||||
0.114 * parseInt(baseColor.substring(5, 2), 16)
|
|
||||||
)
|
|
||||||
const color = `#${grayScale.toString(16).repeat(3)}`
|
|
||||||
return color
|
|
||||||
})
|
|
||||||
|
|
||||||
const hasTooltip = computed(() => {
|
const hasTooltip = computed(() => {
|
||||||
return props.tooltip || props.tTooltip
|
return props.tooltip || props.tTooltip
|
||||||
})
|
})
|
||||||
|
@ -42,7 +32,7 @@ const hasTooltip = computed(() => {
|
||||||
<template>
|
<template>
|
||||||
<n-tooltip v-if="hasTooltip">
|
<n-tooltip v-if="hasTooltip">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<n-button text :disabled="disabled" @click="emit('click')">
|
<n-button :text="!border" :disabled="disabled" @click="emit('click')">
|
||||||
<n-icon :size="props.size" :color="props.color">
|
<n-icon :size="props.size" :color="props.color">
|
||||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
|
@ -50,7 +40,7 @@ const hasTooltip = computed(() => {
|
||||||
</template>
|
</template>
|
||||||
{{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
|
{{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
|
||||||
</n-tooltip>
|
</n-tooltip>
|
||||||
<n-button v-else text :disabled="disabled" @click="emit('click')">
|
<n-button v-else :text="!border" :disabled="disabled" @click="emit('click')">
|
||||||
<n-icon :size="props.size" :color="props.color">
|
<n-icon :size="props.size" :color="props.color">
|
||||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
|
|
|
@ -167,7 +167,7 @@ const onClose = () => {
|
||||||
<n-input v-model:value="generalForm.name" :placeholder="$t('conn_name_tip')" />
|
<n-input v-model:value="generalForm.name" :placeholder="$t('conn_name_tip')" />
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
<n-form-item v-if="!isEditMode" :label="$t('conn_group')" required>
|
<n-form-item v-if="!isEditMode" :label="$t('conn_group')" required>
|
||||||
<n-select v-model:value="generalForm.group" :options="groupOptions"></n-select>
|
<n-select v-model:value="generalForm.group" :options="groupOptions" />
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
<n-form-item :label="$t('conn_addr')" path="addr" required>
|
<n-form-item :label="$t('conn_addr')" path="addr" required>
|
||||||
<n-input v-model:value="generalForm.addr" :placeholder="$t('conn_addr_tip')" />
|
<n-input v-model:value="generalForm.addr" :placeholder="$t('conn_addr_tip')" />
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import { computed, reactive, ref, watch } from 'vue'
|
import { computed, reactive, ref, watch } from 'vue'
|
||||||
import { types } from '../../consts/support_redis_type'
|
import { types } from '../../consts/support_redis_type'
|
||||||
import useDialog from '../../stores/dialog'
|
import useDialog from '../../stores/dialog'
|
||||||
import { isEmpty } from 'lodash'
|
import { isEmpty, keys, map } from 'lodash'
|
||||||
import NewStringValue from '../new_value/NewStringValue.vue'
|
import NewStringValue from '../new_value/NewStringValue.vue'
|
||||||
import NewHashValue from '../new_value/NewHashValue.vue'
|
import NewHashValue from '../new_value/NewHashValue.vue'
|
||||||
import NewListValue from '../new_value/NewListValue.vue'
|
import NewListValue from '../new_value/NewListValue.vue'
|
||||||
|
@ -28,6 +28,12 @@ const formRules = computed(() => {
|
||||||
ttl: { required: true, message: requiredMsg, trigger: 'input' },
|
ttl: { required: true, message: requiredMsg, trigger: 'input' },
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const dbOptions = computed(() =>
|
||||||
|
map(keys(connectionStore.databases[newForm.server]), (key) => ({
|
||||||
|
label: key,
|
||||||
|
value: parseInt(key),
|
||||||
|
}))
|
||||||
|
)
|
||||||
const newFormRef = ref(null)
|
const newFormRef = ref(null)
|
||||||
|
|
||||||
const formLabelWidth = '60px'
|
const formLabelWidth = '60px'
|
||||||
|
@ -119,6 +125,9 @@ const onClose = () => {
|
||||||
<n-form-item :label="$t('key')" path="key" required>
|
<n-form-item :label="$t('key')" path="key" required>
|
||||||
<n-input v-model:value="newForm.key" placeholder="" />
|
<n-input v-model:value="newForm.key" placeholder="" />
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
<n-form-item label="DB" path="db" required>
|
||||||
|
<n-select v-model:value="newForm.db" :options="dbOptions" />
|
||||||
|
</n-form-item>
|
||||||
<n-form-item :label="$t('type')" path="type" required>
|
<n-form-item :label="$t('type')" path="type" required>
|
||||||
<n-select v-model:value="newForm.type" :options="options" />
|
<n-select v-model:value="newForm.type" :options="options" />
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
|
@ -8,46 +8,18 @@ const props = defineProps({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
:stroke-width="props.strokeWidth"
|
d="M24.0605 10L24.0239 38"
|
||||||
d="M8 28H24"
|
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
|
:stroke-width="strokeWidth"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
:stroke-width="props.strokeWidth"
|
d="M10 24L38 24"
|
||||||
d="M8 37H24"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
:stroke-width="props.strokeWidth"
|
|
||||||
d="M8 19H40"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
:stroke-width="props.strokeWidth"
|
|
||||||
d="M8 10H40"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
:stroke-width="props.strokeWidth"
|
|
||||||
d="M30 33H40"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
:stroke-width="props.strokeWidth"
|
|
||||||
d="M35 28L35 38"
|
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
|
:stroke-width="strokeWidth"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -0,0 +1,59 @@
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
strokeWidth: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 3,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M20 5.91406H28V13.9141H43V21.9141H5V13.9141H20V5.91406Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
:stroke-width="props.strokeWidth"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M8 40H40V22H8V40Z"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
:stroke-width="props.strokeWidth"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M16 39.8976V33.9141"
|
||||||
|
stroke="currentColor"
|
||||||
|
:stroke-width="props.strokeWidth"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M24 39.8977V33.8977"
|
||||||
|
stroke="currentColor"
|
||||||
|
:stroke-width="props.strokeWidth"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M32 39.8976V33.9141"
|
||||||
|
stroke="currentColor"
|
||||||
|
:stroke-width="props.strokeWidth"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12 40H36"
|
||||||
|
stroke="currentColor"
|
||||||
|
:stroke-width="props.strokeWidth"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
|
@ -3,7 +3,6 @@ import useDialogStore from '../../stores/dialog.js'
|
||||||
import { NIcon } from 'naive-ui'
|
import { NIcon } from 'naive-ui'
|
||||||
import AddGroup from '../icons/AddGroup.vue'
|
import AddGroup from '../icons/AddGroup.vue'
|
||||||
import AddLink from '../icons/AddLink.vue'
|
import AddLink from '../icons/AddLink.vue'
|
||||||
import Sort from '../icons/Sort.vue'
|
|
||||||
import IconButton from '../common/IconButton.vue'
|
import IconButton from '../common/IconButton.vue'
|
||||||
import Filter from '../icons/Filter.vue'
|
import Filter from '../icons/Filter.vue'
|
||||||
import ConnectionTree from './ConnectionTree.vue'
|
import ConnectionTree from './ConnectionTree.vue'
|
||||||
|
|
|
@ -313,8 +313,6 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
|
||||||
connectionStore.connections = Array.from(connectionStore.connections)
|
connectionStore.connections = Array.from(connectionStore.connections)
|
||||||
saveSort()
|
saveSort()
|
||||||
}
|
}
|
||||||
|
|
||||||
const saveDrop = () => {}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -8,6 +8,8 @@ import Filter from '../icons/Filter.vue'
|
||||||
import useTabStore from '../../stores/tab.js'
|
import useTabStore from '../../stores/tab.js'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { get } from 'lodash'
|
import { get } from 'lodash'
|
||||||
|
import Delete from '../icons/Delete.vue'
|
||||||
|
import Refresh from '../icons/Refresh.vue'
|
||||||
|
|
||||||
const tabStore = useTabStore()
|
const tabStore = useTabStore()
|
||||||
const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
|
const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
|
||||||
|
@ -19,8 +21,9 @@ const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
|
||||||
|
|
||||||
<!-- bottom function bar -->
|
<!-- bottom function bar -->
|
||||||
<div class="nav-pane-bottom flex-box-h">
|
<div class="nav-pane-bottom flex-box-h">
|
||||||
<icon-button :icon="AddLink" color="#555" size="20" stroke-width="4" t-tooltip="new_conn" />
|
<icon-button :icon="AddLink" color="#555" size="20" stroke-width="4" t-tooltip="new_key" />
|
||||||
<icon-button :icon="AddGroup" color="#555" size="20" stroke-width="4" t-tooltip="new_group" />
|
<icon-button :icon="Delete" color="#555" size="20" stroke-width="4" t-tooltip="remove_key" />
|
||||||
|
<icon-button :icon="Refresh" color="#555" size="20" stroke-width="4" t-tooltip="reload" />
|
||||||
<n-input placeholder="">
|
<n-input placeholder="">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-icon :component="Filter" color="#aaa" size="20" />
|
<n-icon :component="Filter" color="#aaa" size="20" />
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { h, nextTick, onMounted, reactive, ref } from 'vue'
|
import { h, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||||
import { ConnectionType } from '../../consts/connection_type.js'
|
import { ConnectionType } from '../../consts/connection_type.js'
|
||||||
import { NIcon, useDialog, useMessage } from 'naive-ui'
|
import { NIcon, useDialog, useMessage } from 'naive-ui'
|
||||||
import Key from '../icons/Key.vue'
|
import Key from '../icons/Key.vue'
|
||||||
import ToggleDb from '../icons/ToggleDb.vue'
|
import ToggleDb from '../icons/ToggleDb.vue'
|
||||||
import { get, indexOf } from 'lodash'
|
import { get, indexOf, size } from 'lodash'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import Refresh from '../icons/Refresh.vue'
|
import Refresh from '../icons/Refresh.vue'
|
||||||
import CopyLink from '../icons/CopyLink.vue'
|
import CopyLink from '../icons/CopyLink.vue'
|
||||||
|
@ -142,7 +142,7 @@ const expandKey = (key) => {
|
||||||
|
|
||||||
const message = useMessage()
|
const message = useMessage()
|
||||||
const dialog = useDialog()
|
const dialog = useDialog()
|
||||||
const onUpdateExpanded = (value, option) => {
|
const onUpdateExpanded = (value, option, meta) => {
|
||||||
expandedKeys.value = value
|
expandedKeys.value = value
|
||||||
if (!meta.node) {
|
if (!meta.node) {
|
||||||
return
|
return
|
||||||
|
@ -162,6 +162,15 @@ const onUpdateSelectedKeys = (keys, option) => {
|
||||||
selectedKeys.value = keys
|
selectedKeys.value = keys
|
||||||
}
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => selectedKeys,
|
||||||
|
(keys) => {
|
||||||
|
if (size(keys) > 0) {
|
||||||
|
console.log('selected')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const renderPrefix = ({ option }) => {
|
const renderPrefix = ({ option }) => {
|
||||||
switch (option.type) {
|
switch (option.type) {
|
||||||
case ConnectionType.RedisDB:
|
case ConnectionType.RedisDB:
|
||||||
|
@ -211,7 +220,10 @@ const renderSuffix = ({ option }) => {
|
||||||
const nodeProps = ({ option }) => {
|
const nodeProps = ({ option }) => {
|
||||||
return {
|
return {
|
||||||
onClick() {
|
onClick() {
|
||||||
connectionStore.select(option)
|
const { key, name, db, type, redisKey } = option
|
||||||
|
if (option.type === ConnectionType.RedisValue) {
|
||||||
|
connectionStore.loadKeyValue(name, db, redisKey)
|
||||||
|
}
|
||||||
// console.log('[click]:' + JSON.stringify(option))
|
// console.log('[click]:' + JSON.stringify(option))
|
||||||
},
|
},
|
||||||
onDblclick: async () => {
|
onDblclick: async () => {
|
||||||
|
@ -219,16 +231,6 @@ const nodeProps = ({ option }) => {
|
||||||
console.warn('TODO: alert to ignore double click when loading')
|
console.warn('TODO: alert to ignore double click when loading')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
switch (option.type) {
|
|
||||||
case ConnectionType.Server:
|
|
||||||
option.isLeaf = false
|
|
||||||
break
|
|
||||||
|
|
||||||
case ConnectionType.RedisDB:
|
|
||||||
option.isLeaf = false
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
// default handle is expand current node
|
// default handle is expand current node
|
||||||
nextTick().then(() => expandKey(option.key))
|
nextTick().then(() => expandKey(option.key))
|
||||||
},
|
},
|
||||||
|
@ -279,6 +281,9 @@ const handleSelectContextMenu = (key) => {
|
||||||
// case 'db_reload':
|
// case 'db_reload':
|
||||||
// connectionStore.loadKeyValue()
|
// connectionStore.loadKeyValue()
|
||||||
// break
|
// break
|
||||||
|
case 'db_open':
|
||||||
|
nextTick().then(() => expandKey(nodeKey))
|
||||||
|
break
|
||||||
case 'db_newkey':
|
case 'db_newkey':
|
||||||
case 'key_newkey':
|
case 'key_newkey':
|
||||||
dialogStore.openNewKeyDialog(redisKey, name, db)
|
dialogStore.openNewKeyDialog(redisKey, name, db)
|
||||||
|
|
|
@ -457,23 +457,6 @@ const useConnectionStore = defineStore('connections', {
|
||||||
updateChildrenNum(dbs[db])
|
updateChildrenNum(dbs[db])
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* select node
|
|
||||||
* @param key
|
|
||||||
* @param name
|
|
||||||
* @param db
|
|
||||||
* @param type
|
|
||||||
* @param redisKey
|
|
||||||
*/
|
|
||||||
select({ key, name, db, type, redisKey }) {
|
|
||||||
if (type === ConnectionType.RedisValue) {
|
|
||||||
console.log(`[click]key:${key} db: ${db} redis key: ${redisKey}`)
|
|
||||||
|
|
||||||
// async get value for key
|
|
||||||
this.loadKeyValue(name, db, redisKey).then(() => {})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* load redis key
|
* load redis key
|
||||||
* @param server
|
* @param server
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { find, findIndex, size } from 'lodash'
|
import { find, findIndex, get, size } from 'lodash'
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
const useTabStore = defineStore('tab', {
|
const useTabStore = defineStore('tab', {
|
||||||
|
@ -44,21 +44,13 @@ const useTabStore = defineStore('tab', {
|
||||||
* @returns {TabItem|null}
|
* @returns {TabItem|null}
|
||||||
*/
|
*/
|
||||||
currentTab() {
|
currentTab() {
|
||||||
return this.tabs[this.activatedIndex || 0]
|
return get(this.tabs, this.activatedIndex)
|
||||||
// let current = find(this.tabs, {name: this.activatedTab})
|
// let current = find(this.tabs, {name: this.activatedTab})
|
||||||
// if (current == null) {
|
// if (current == null) {
|
||||||
// current = this.tabs[0]
|
// current = this.tabs[0]
|
||||||
// }
|
// }
|
||||||
// return current
|
// return current
|
||||||
},
|
},
|
||||||
|
|
||||||
currentTabIndex() {
|
|
||||||
const len = size(this.tabs)
|
|
||||||
if (this.activatedIndex < 0 || this.activatedIndex >= len) {
|
|
||||||
this._setActivatedIndex(0)
|
|
||||||
}
|
|
||||||
return this.tabs[this.activatedIndex]
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
/**
|
/**
|
||||||
|
@ -165,6 +157,12 @@ const useTabStore = defineStore('tab', {
|
||||||
// }
|
// }
|
||||||
// this.activatedIndex = tabIndex
|
// this.activatedIndex = tabIndex
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {number} tabIndex
|
||||||
|
* @returns {*|null}
|
||||||
|
*/
|
||||||
removeTab(tabIndex) {
|
removeTab(tabIndex) {
|
||||||
const len = size(this.tabs)
|
const len = size(this.tabs)
|
||||||
// ignore remove last blank tab
|
// ignore remove last blank tab
|
||||||
|
@ -191,12 +189,21 @@ const useTabStore = defineStore('tab', {
|
||||||
|
|
||||||
return size(removed) > 0 ? removed[0] : null
|
return size(removed) > 0 ? removed[0] : null
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {string} tabName
|
||||||
|
*/
|
||||||
removeTabByName(tabName) {
|
removeTabByName(tabName) {
|
||||||
const idx = findIndex(this.tabs, { name: tabName })
|
const idx = findIndex(this.tabs, { name: tabName })
|
||||||
if (idx !== -1) {
|
if (idx !== -1) {
|
||||||
this.removeTab(idx)
|
this.removeTab(idx)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
removeAllTab() {
|
removeAllTab() {
|
||||||
this.tabList = []
|
this.tabList = []
|
||||||
this._setActivatedIndex(-1, false)
|
this._setActivatedIndex(-1, false)
|
||||||
|
|
Loading…
Reference in New Issue