mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
feat: 登录回车,处理动态请求,全局请求弹窗ESC的问题
This commit is contained in:
parent
796c844df7
commit
79590f973b
@ -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>
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -95,4 +95,10 @@ const comBtnList = computed(() => {
|
||||
cloneList.shift()
|
||||
return cloneList
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.align-center {
|
||||
margin-top: -4px;
|
||||
}
|
||||
</style>
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user