fix: 修改 el-input-number 输入就校验的问题
This commit is contained in:
@@ -177,10 +177,10 @@
|
||||
:label="$t('dashboard.panel.chartForm.limit')"
|
||||
class="form-item--half-width"
|
||||
prop="param.limit">
|
||||
<el-input-number
|
||||
<el-input
|
||||
size="small"
|
||||
:placeholder="$t('placeholder.log.limit')"
|
||||
v-model="chartConfig.param.limit"
|
||||
v-model.number="chartConfig.param.limit"
|
||||
:controls="false"
|
||||
@change="change"/>
|
||||
</el-form-item>
|
||||
@@ -389,11 +389,11 @@
|
||||
:color-val="item.color"
|
||||
@colorChange="(color,key)=>{colorChange(color,key,index)}"
|
||||
/>
|
||||
<el-input-number
|
||||
<el-input
|
||||
size="small"
|
||||
style="margin-top: 3px"
|
||||
:placeholder="$t('placeholder.chart.threshold')"
|
||||
v-model="item.value"
|
||||
v-model.number="item.value"
|
||||
:controls="false"
|
||||
@blur="sortThresholds"
|
||||
@change="change"
|
||||
@@ -481,29 +481,29 @@
|
||||
</div>
|
||||
<el-form-item
|
||||
v-if="item.type === 'value'"
|
||||
:prop="'param.valueMapping.mapping.' + index + 'value'"
|
||||
:prop="'param.valueMapping.mapping.' + index + '.value'"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
<el-input
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.value"
|
||||
v-model.number="item.value"
|
||||
placeholder="value"
|
||||
></el-input-number>
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'range'"
|
||||
:prop="'param.valueMapping.mapping.' + index + 'from'"
|
||||
:prop="'param.valueMapping.mapping.' + index + '.from'"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
<el-input
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.from"
|
||||
v-model.number="item.from"
|
||||
placeholder="from"
|
||||
></el-input-number>
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'range'"
|
||||
@@ -511,16 +511,16 @@
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
<el-input
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.to"
|
||||
v-model.number="item.to"
|
||||
placeholder="to"
|
||||
></el-input-number>
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'regx'"
|
||||
:prop="'param.valueMapping.mapping.' + index + 'regx'"
|
||||
:prop="'param.valueMapping.mapping.' + index + '.regx'"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
@@ -535,7 +535,7 @@
|
||||
<div>
|
||||
<div class='mapping-display'>Display</div>
|
||||
</div>
|
||||
<el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
|
||||
<el-form-item :prop="'param.valueMapping.mapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
|
||||
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small"/>
|
||||
</el-form-item>
|
||||
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
|
||||
@@ -581,7 +581,7 @@
|
||||
<div>
|
||||
<div class='mapping-display'>Title</div>
|
||||
</div>
|
||||
<el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
|
||||
<el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
|
||||
<el-input size="small" v-model="item.title" placeholder="regx"></el-input>
|
||||
</el-form-item>
|
||||
<div>
|
||||
@@ -600,7 +600,7 @@
|
||||
<div>
|
||||
<div class='mapping-display'>Display</div>
|
||||
</div>
|
||||
<el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
|
||||
<el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
|
||||
<el-input v-model="item.display" style="margin-right: 10px" size="small"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
|
||||
@@ -187,6 +187,7 @@ export default {
|
||||
},
|
||||
selectPanel (panel) {
|
||||
this.panelName = panel.name
|
||||
this.editChart.panelName = panel.name
|
||||
this.panelId = panel.id
|
||||
this.editChart.groupId = ''
|
||||
this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
class="form-item--half-width"
|
||||
prop="param.limit"
|
||||
>
|
||||
<el-input-number :controls="false" v-model="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')" size="small"/>
|
||||
<el-input :controls="false" v-model.number="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')" size="small"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
@@ -252,12 +252,12 @@
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
<el-input
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.value"
|
||||
v-model.number="item.value"
|
||||
placeholder="value"
|
||||
></el-input-number>
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'range'"
|
||||
@@ -265,12 +265,12 @@
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
<el-input
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.from"
|
||||
v-model.number="item.from"
|
||||
placeholder="from"
|
||||
></el-input-number>
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'range'"
|
||||
@@ -278,12 +278,12 @@
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
<el-input
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.to"
|
||||
v-model.number="item.to"
|
||||
placeholder="to"
|
||||
></el-input-number>
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'regx'"
|
||||
|
||||
@@ -292,7 +292,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
</div>
|
||||
</div>
|
||||
<transition name="right-box">
|
||||
<chart-box v-if="rightBox.show" ref="addChartModal" :chart="chart" :from="$CONSTANTS.fromRoute.explore" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'explore'}" @close="handleBox(false)" @on-create-success="createSuccess"></chart-box>
|
||||
<chartRightBox v-if="rightBox.show" ref="addChartModal" :chart="chart" :from="$CONSTANTS.fromRoute.explore" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'explore'}" @close="handleBox(false)" @on-create-success="createSuccess"></chartRightBox>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
@@ -307,12 +307,14 @@ import { getUUID } from '../../../common/js/common'
|
||||
import chartDataFormat from '../../../charts/chartDataFormat'
|
||||
import logTab from './logTab'
|
||||
import promqlInputMixin from '@/components/common/mixin/promqlInput'
|
||||
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
|
||||
|
||||
export default {
|
||||
name: 'exploreItem',
|
||||
components: {
|
||||
'promql-input': promqlInput,
|
||||
'chart-box': chartBox,
|
||||
chartRightBox,
|
||||
chart,
|
||||
logTab
|
||||
},
|
||||
@@ -911,23 +913,29 @@ export default {
|
||||
},
|
||||
saveChart () {
|
||||
const chart = {
|
||||
id: '',
|
||||
name: '',
|
||||
panelName: '',
|
||||
type: 'line',
|
||||
span: 12,
|
||||
height: '400',
|
||||
unit: this.chartUnit,
|
||||
span: 4,
|
||||
datasource: '1',
|
||||
height: 4,
|
||||
unit: 2,
|
||||
param: {
|
||||
url: '',
|
||||
threshold: ''
|
||||
stack: 0,
|
||||
nullType: 'null',
|
||||
legend: { placement: 'bottom', values: [], show: true },
|
||||
thresholdShow: true,
|
||||
thresholds: [{ value: undefined, color: '#eeeeeeff' }]
|
||||
},
|
||||
elements: [],
|
||||
panel: '',
|
||||
sync: 0,
|
||||
groupId: '',
|
||||
remark: ''
|
||||
remark: '',
|
||||
groupId: -1
|
||||
}
|
||||
this.expressions.forEach((exp) => {
|
||||
chart.elements.push({ expression: exp, legend: '', type: 'expert', id: '' })
|
||||
this.expressions.forEach((exp, index) => {
|
||||
chart.elements.push({ expression: exp, legend: '', type: 'expert', id: '', name: 'A' })
|
||||
})
|
||||
this.chart = chart
|
||||
this.rightBox.show = true
|
||||
|
||||
Reference in New Issue
Block a user