gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改折叠后 报错看不到的问题

Browse Source
This commit is contained in:
zhangyu
2022-03-15 11:14:42 +08:00
parent 30015d86ba
commit 25d9bd4680
6 changed files with 57 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
nezha-fronted/src/assets/css/common/rightBoxCommon.scss
View File

@@ -132,7 +132,14 @@
border-color: $--border-color-light-focus; border-color: $--border-color-light-focus;
} }
} }
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus { .el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus,
.el-message-box__input input.invalid,
.el-message-box__input input.invalid:focus,
{
border-color: #F56C6C border-color: #F56C6C
} }

3
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -103,6 +103,9 @@
cursor: pointer; cursor: pointer;
} }
} }
.is-item-box-error .chart-title-config {
border-color: #F56C6C
}
.chart-title .nz-icon-arrow-down{ .chart-title .nz-icon-arrow-down{
display: inline-block; display: inline-block;
transition: transform .3s; transition: transform .3s;

19
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -461,7 +461,7 @@
<div class="form__sub-title"> <div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.columns')}}</span> <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
</div> </div>
<div v-for="(item,index) in chartConfig.param.columns" :key="index"> <div v-for="(item,index) in chartConfig.param.columns" :key="index" :class="item.error? 'is-item-box-error' : ''">
<div class="chart-title chart-title-config"> <div class="chart-title chart-title-config">
<span class="chart-title-content"> <span class="chart-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i> <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
@@ -489,7 +489,7 @@
<div class='mapping-display'>Title</div> <div class='mapping-display'>Title</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1"> <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
<el-input size="small" v-model="item.title" @change="change"></el-input> <el-input size="small" v-model="item.title" @change="change('columns',index)"></el-input>
</el-form-item> </el-form-item>
<div> <div>
<div class='mapping-display'>Unit</div> <div class='mapping-display'>Unit</div>
@@ -508,7 +508,7 @@
<div class='mapping-display'>Display</div> <div class='mapping-display'>Display</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change"/> <el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('columns',index)"/>
</el-form-item> </el-form-item>
</el-row> </el-row>
</transition-group> </transition-group>
@@ -533,6 +533,7 @@
<div <div
v-for="(item,index) in chartConfig.param.valueMapping" v-for="(item,index) in chartConfig.param.valueMapping"
:key="index" :key="index"
:class="item.error? 'is-item-box-error' : ''"
> >
<div class="chart-title chart-title-config"> <div class="chart-title chart-title-config">
<span class="chart-title-content"> <span class="chart-title-content">
@@ -597,7 +598,7 @@
size="small" size="small"
v-model.number="item.value" v-model.number="item.value"
placeholder="value" placeholder="value"
@change="change" @change="change('valueMapping', index)"
></el-input-number> ></el-input-number>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -611,7 +612,7 @@
size="small" size="small"
v-model.number="item.from" v-model.number="item.from"
placeholder="from" placeholder="from"
@change="change" @change="change('valueMapping', index)"
></el-input-number> ></el-input-number>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -624,7 +625,7 @@
:controls="false" :controls="false"
size="small" size="small"
v-model.number="item.to" v-model.number="item.to"
@change="change" @change="change('valueMapping', index)"
placeholder="to" placeholder="to"
></el-input-number> ></el-input-number>
</el-form-item> </el-form-item>
@@ -638,7 +639,7 @@
size="small" size="small"
v-model="item.regx" v-model="item.regx"
placeholder="regx" placeholder="regx"
@change="change" @change="change('valueMapping', index)"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-row> </el-row>
@@ -647,13 +648,13 @@
<div class='mapping-display'>Columns</div> <div class='mapping-display'>Columns</div>
</div> </div>
<el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.column" style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/> <el-input v-model="item.column" style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change('valueMapping', index)"/>
</el-form-item> </el-form-item>
<div> <div>
<div class='mapping-display'>Display</div> <div class='mapping-display'>Display</div>
</div> </div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/> <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
</el-form-item> </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)}"/> <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)}"/>
</el-row> </el-row>

1
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -267,6 +267,7 @@ export default {
}) })
} }
}).catch(res => { }).catch(res => {
this.$refs['childrenFrom' + this.editChart.datasource].showError()
console.info(res) console.info(res)
}) })
}, },

26
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -389,8 +389,11 @@ export default {
} }
this.change() this.change()
}, },
change () { change (key, index) {
this.$nextTick(() => { this.$nextTick(() => {
if (key) {
this.hideError(key, index)
}
this.$emit('change', this.chartConfig) this.$emit('change', this.chartConfig)
}) })
}, },
@@ -429,6 +432,27 @@ export default {
break break
} }
this.change() this.change()
},
showError () {
this.$refs.chartForm.validate((blooen, object) => {
console.log(blooen, object)
Object.keys(object).forEach(item => {
const keyArr = item.split('.')
if (keyArr.length >= 4) {
this.chartConfig[keyArr[0]][keyArr[1]][keyArr[2]].error = true
}
})
if (!blooen) {
this.$forceUpdate()
}
})
},
hideError (key, index) {
if (!this.chartConfig.param[key] || !this.chartConfig.param[key].length) {
return
}
this.chartConfig.param[key][index].error = false
this.$forceUpdate()
} }
} }
} }

19
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -378,7 +378,7 @@
<div class="form__sub-title"> <div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.columns')}}</span> <span>{{$t('dashboard.panel.chartForm.columns')}}</span>
</div> </div>
<div v-for="(item,index) in chartConfig.param.columns" :key="index"> <div v-for="(item,index) in chartConfig.param.columns" :key="index" :class="item.error? 'is-item-box-error' : ''">
<div class="chart-title chart-title-config"> <div class="chart-title chart-title-config">
<span class="chart-title-content"> <span class="chart-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i> <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
@@ -406,7 +406,7 @@
<div class='mapping-display'>Title</div> <div class='mapping-display'>Title</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1"> <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item" style="flex: 1">
<el-input size="small" v-model="item.title" @change="change"></el-input> <el-input size="small" v-model="item.title" @change="change('columns',index)"></el-input>
</el-form-item> </el-form-item>
<div> <div>
<div class='mapping-display'>Unit</div> <div class='mapping-display'>Unit</div>
@@ -425,7 +425,7 @@
<div class='mapping-display'>Display</div> <div class='mapping-display'>Display</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change"/> <el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('columns',index)"/>
</el-form-item> </el-form-item>
</el-row> </el-row>
</transition-group> </transition-group>
@@ -450,6 +450,7 @@
<div <div
v-for="(item,index) in chartConfig.param.valueMapping" v-for="(item,index) in chartConfig.param.valueMapping"
:key="index" :key="index"
:class="item.error? 'is-item-box-error' : ''"
> >
<div class="chart-title chart-title-config"> <div class="chart-title chart-title-config">
<span class="chart-title-content"> <span class="chart-title-content">
@@ -514,7 +515,7 @@
size="small" size="small"
v-model.number="item.value" v-model.number="item.value"
placeholder="value" placeholder="value"
@change="change" @change="change('valueMapping', index)"
></el-input-number> ></el-input-number>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -528,7 +529,7 @@
size="small" size="small"
v-model.number="item.from" v-model.number="item.from"
placeholder="from" placeholder="from"
@change="change" @change="change('valueMapping', index)"
></el-input-number> ></el-input-number>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -541,7 +542,7 @@
:controls="false" :controls="false"
size="small" size="small"
v-model.number="item.to" v-model.number="item.to"
@change="change" @change="change('valueMapping', index)"
placeholder="to" placeholder="to"
></el-input-number> ></el-input-number>
</el-form-item> </el-form-item>
@@ -555,7 +556,7 @@
size="small" size="small"
v-model="item.regx" v-model="item.regx"
placeholder="regx" placeholder="regx"
@change="change" @change="change('valueMapping', index)"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-row> </el-row>
@@ -564,13 +565,13 @@
<div class='mapping-display'>Columns</div> <div class='mapping-display'>Columns</div>
</div> </div>
<el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.column" style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/> <el-input v-model="item.column" style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change('valueMapping', index)"/>
</el-form-item> </el-form-item>
<div> <div>
<div class='mapping-display'>Display</div> <div class='mapping-display'>Display</div>
</div> </div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/> <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
</el-form-item> </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)}"/> <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)}"/>
</el-row> </el-row>