GlobalPublicConfiguration.vue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script lang="ts" setup>
import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
import { icon } from '@/plugins';
import { NButton, NCard, NCollapseTransition, NIcon, NInput, NInputGroup, NInputNumber, NSelect, NSpace, NTag, NTooltip, SelectOption } from 'naive-ui';
import { computed, ref, unref } from 'vue';
import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
import { ChevronDown, ChevronUp } from '@vicons/carbon'
import { useDesignStore } from '@/store/modules/designStore/designStore';
import { selectTimeOptions } from '../../../index.d';
import { useTargetData } from '../../../../hooks/useTargetData.hook';
import { RequestHttpIntervalEnum } from '@/enums/httpEnum';
const { PencilIcon } = icon.ionicons5
const designStore = useDesignStore()
const editDisabled = ref(false)
const collapseHeaderTable = ref(false)
const { chartEditStore } = useTargetData()
const handleCollapse = () => {
collapseHeaderTable.value = !unref(collapseHeaderTable)
}
// 颜色
const themeColor = computed(() => {
return designStore.getAppTheme
})
</script>
<template>
<NCard>
<template #header>
<NTag type="info">全局公共配置</NTag>
</template>
<NSpace vertical>
<SettingItemBox name="服务" :itemRightStyle="{
gridTemplateColumns: '5fr 2fr 1fr'
}">
<!-- 源地址 -->
<SettingItem name="前置 URL">
<NInput v-model:value="chartEditStore.requestGlobalConfig.requestOriginUrl" default-value="http://127.0.0.1" :disabled="editDisabled"
size="small" placeholder="例:http://127.0.0.1"></NInput>
</SettingItem>
<SettingItem name="更新间隔，为 0 只会初始化">
<NInputGroup>
<NInputNumber v-model:value="chartEditStore.requestGlobalConfig.requestInterval" class="select-time-number"
size="small" min="0" :show-button="false" :disabled="editDisabled" placeholder="请输入数字">
</NInputNumber>
<!-- 单位 -->
<NSelect v-model:value="chartEditStore.requestGlobalConfig.requestIntervalUnit" class="select-time-options"
size="small" :default-value="RequestHttpIntervalEnum.SECOND" :options="selectTimeOptions as SelectOption[]"
:disabled="editDisabled" />
</NInputGroup>
</SettingItem>
<NButton v-show="editDisabled" type="primary" ghost @click="editDisabled = false">
<template #icon>
<NIcon>
<PencilIcon />
</NIcon>
</template>
编辑配置
</NButton>
</SettingItemBox>
<NCollapseTransition :show="collapseHeaderTable">
<GlobalParamsConfiguration />
</NCollapseTransition>
<section class="arrow">
<NTooltip>
<template #trigger>
<NIcon @click="handleCollapse" size="30">
<ChevronDown v-show="!collapseHeaderTable" />
<ChevronUp v-show="collapseHeaderTable" />
</NIcon>
</template>
<span>{{ collapseHeaderTable ? '收起' : '展开' }}</span>
</NTooltip>
</section>
</NSpace>
</NCard>
</template>
<style lang="scss" scoped>
.arrow {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&:hover {
color: v-bind('themeColor');
}
}
</style>