feat: 登录回车,处理动态请求,全局请求弹窗ESC的问题

This commit is contained in:
奔跑的面条 2024-03-21 08:50:23 +08:00
parent 796c844df7
commit 79590f973b
10 changed files with 157 additions and 99 deletions

View File

@ -81,8 +81,8 @@
</SettingItem>
</SettingItemBox>
<SettingItemBox name="悬浮 (预览可见)">
<SettingItem name="禁用">
<SettingItemBox name="鼠标悬停聚焦">
<SettingItem name="禁用(预览可见)">
<n-space>
<n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
</n-space>

View File

@ -1,80 +1,80 @@
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { ScatterCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {
type: 'scatter',
emphasis: {
focus: 'series'
},
symbolSize: 12,
markArea: {
silent: true,
itemStyle: {
color: 'transparent',
borderWidth: 1,
borderType: 'dashed'
},
data: [
[
{
xAxis: 'min',
yAxis: 'min'
},
{
xAxis: 'max',
yAxis: 'max'
}
]
]
},
markPoint: {
symbol: 'pin',
symbolSize: 50,
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
}
}
export const option = {
dataset: dataJson,
tooltip: {
showDelay: 0,
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
return params.value.length > 1
? `${params.seriesName}<br />${params.value[0]} ${params.value[1]}`
: `${params.name} ${params.value}`
},
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
xAxis: {
scale: true
},
yAxis: {
scale: true
},
series: dataJson.map((item, index) => ({
...seriesItem,
datasetIndex: index
}))
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ScatterCommonConfig.key
public chartConfig = cloneDeep(ScatterCommonConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { ScatterCommonConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
export const seriesItem = {
type: 'scatter',
emphasis: {
focus: 'series'
},
symbolSize: 12,
markArea: {
silent: true,
itemStyle: {
color: 'transparent',
borderWidth: 1,
borderType: 'dashed'
},
data: [
[
{
xAxis: 'min',
yAxis: 'min'
},
{
xAxis: 'max',
yAxis: 'max'
}
]
]
},
markPoint: {
symbol: 'pin',
symbolSize: 50,
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
}
}
export const option = {
dataset: dataJson,
tooltip: {
showDelay: 0,
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
return params.value.length > 1
? `${params.seriesName}<br />${params.value[0]} ${params.value[1]}`
: `${params.name} ${params.value}`
},
axisPointer: {
show: true,
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
xAxis: {
scale: true
},
yAxis: {
scale: true
},
series: dataJson.map((item, index) => ({
...seriesItem,
datasetIndex: index
}))
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ScatterCommonConfig.key
public chartConfig = cloneDeep(ScatterCommonConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}

View File

@ -1,5 +1,11 @@
<template>
<n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false" :close-on-esc="false">
<n-modal
class="go-chart-data-pond-control"
v-model:show="modelShowRef"
:mask-closable="false"
:close-on-esc="true"
:onEsc="onEsc"
>
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
<template #header></template>
<template #header-extra> </template>
@ -29,7 +35,10 @@
</n-icon>
</template>
</n-button>
<n-button type="primary" @click="closeHandle">保存 & 发送请求</n-button>
<div>
<n-button class="go-mr-3" @click="closeHandle">取消</n-button>
<n-button type="primary" @click="closeAndSendHandle">保存 & 发送请求</n-button>
</div>
</n-space>
</template>
</n-card>
@ -82,9 +91,12 @@ const pondData = computed(() => {
return data[0]
})
watch(() => props.modelShow, (newValue) => {
modelShowRef.value = newValue
})
watch(
() => props.modelShow,
newValue => {
modelShowRef.value = newValue
}
)
watch(
() => pondData.value,
@ -189,7 +201,7 @@ const deletePond = (targetData: RequestDataPondItemType) => {
}
//
const closeHandle = () => {
const closeAndSendHandle = () => {
//
if (pondData.value) {
targetData.value.request = {
@ -200,6 +212,14 @@ const closeHandle = () => {
emit('update:modelShow', false)
emit('sendHandle')
}
const closeHandle = () => {
emit('update:modelShow', false)
}
const onEsc = () => {
closeHandle()
}
</script>
<style lang="scss" scoped>

View File

@ -10,7 +10,11 @@
>
<!-- 源地址 -->
<setting-item name="前置 URL">
<n-input v-model:value.trim="requestOriginUrl" :disabled="editDisabled" placeholder="例http://127.0.0.1/"></n-input>
<n-input
v-model:value.trim="requestOriginUrl"
:disabled="editDisabled"
placeholder="例http://127.0.0.1/"
></n-input>
</setting-item>
<setting-item name="更新间隔,为 0 只会初始化">
<n-input-group>

View File

@ -1,5 +1,11 @@
<template>
<n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
<n-modal
class="go-chart-data-request"
v-model:show="modelShowRef"
:mask-closable="false"
:closeOnEsc="true"
:onEsc="onEsc"
>
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
<template #header></template>
<template #header-extra> </template>
@ -21,7 +27,10 @@
{{ requestContentTypeObj[requestContentType] }}
</n-tag>
</div>
<n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
<div>
<n-button class="go-mr-3" @click="closeHandle">取消</n-button>
<n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
</div>
</n-space>
</template>
</n-card>
@ -70,6 +79,10 @@ const closeAndSendHandle = () => {
emit('update:modelShow', false)
emit('sendHandle')
}
const onEsc = () => {
closeHandle()
}
</script>
<style lang="scss" scoped>

View File

@ -1,5 +1,11 @@
<template>
<n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
<n-modal
class="go-chart-data-request"
v-model:show="modelShowRef"
:mask-closable="false"
:closeOnEsc="true"
:onEsc="onEsc"
>
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
<template #header></template>
<template #header-extra> </template>
@ -17,7 +23,7 @@
<template #action>
<n-space justify="space-between">
<n-space v-if="targetDataRequest">
<n-tag :bordered="false" type="primary">名称</n-tag>
<n-tag :bordered="false" type="primary">名称</n-tag>
<n-input
v-model:value="targetDataRequest.dataPondName"
ref="inputInstRef"
@ -60,10 +66,12 @@ const pondName = ref()
const inputInstRef = ref()
const modelShowRef = ref(false)
watch(() => props.modelShow, (newValue) => {
modelShowRef.value = newValue
})
watch(
() => props.modelShow,
newValue => {
modelShowRef.value = newValue
}
)
const closeHandle = () => {
emit('update:modelShow', false)
@ -85,6 +93,10 @@ const closeAndSendHandle = () => {
}
})
}
const onEsc = () => {
closeHandle()
}
</script>
<style lang="scss" scoped>

View File

@ -148,6 +148,7 @@ $max-width: 670px;
min-width: $min-width;
min-width: $max-width;
padding: 0 10px;
padding-left: 20px;
display: flex;
align-items: center;
justify-content: space-between;

View File

@ -95,4 +95,10 @@ const comBtnList = computed(() => {
cloneList.shift()
return cloneList
})
</script>
</script>
<style lang="scss" scoped>
.align-center {
margin-top: -4px;
}
</style>

View File

@ -56,6 +56,7 @@
type="text"
maxlength="16"
:placeholder="$t('global.form_account')"
@keydown.enter="handleSubmit"
>
<template #prefix>
<n-icon size="18">
@ -71,6 +72,7 @@
maxlength="16"
show-password-on="click"
:placeholder="$t('global.form_password')"
@keydown.enter="handleSubmit"
>
<template #prefix>
<n-icon size="18">

View File

@ -1,8 +1,8 @@
<template>
<!-- mask-closable 暂时是失效的不知道为啥 -->
<n-modal
class="go-modal-box"
v-model:show="showRef"
:mask-closable="true"
@afterLeave="closeHandle"
>
<n-card hoverable size="small">