NEZ-2124 feat：dashboard variables支持拖动调整位置
This commit is contained in:
zyh
@@ -48,128 +48,146 @@
|
||||
<div class="form__sub-title" style="margin-bottom:0px">
|
||||
<span>{{$t('dashboard.panel.variables')}}</span>
|
||||
</div>
|
||||
<el-row
|
||||
:key="index"
|
||||
v-for="(item,index) of editPanel.param.variables"
|
||||
>
|
||||
<div class="variable-title">
|
||||
<span class="variable-title-left">
|
||||
<i class="nz-icon nz-icon-arrow-down" :class="item.collapse?'is-active':''" @click.stop="dropVariable(index,item)"></i>
|
||||
<span v-show="item.collapse">{{item.name}}</span>
|
||||
</span>
|
||||
<span style="display:flex;align-items:center">
|
||||
<span @click="showVariable(index,item)" class="nz-icon-minus-medium" style="margin-right: 6px;padding-left: 10px">
|
||||
<i v-if="item.show" class="nz-icon nz-icon-mimakejian" :title="$t('overall.visible')"></i>
|
||||
<i v-else class="nz-icon nz-icon-mimabukejian" :title="$t('overall.invisible')"></i>
|
||||
<draggable
|
||||
v-model="editPanel.param.variables"
|
||||
:scroll-sensitivity="150"
|
||||
:options="{
|
||||
dragClass:'drag-columns-class',
|
||||
fallbackClass:'fallback-class',
|
||||
forceFallback:true,
|
||||
ghostClass:'chart-ghost',
|
||||
chosenClass:'choose-class',
|
||||
scroll:true,
|
||||
filter: '.drag-disabled',
|
||||
animation: 150,
|
||||
handle: '.drag-sort'
|
||||
}">
|
||||
<el-row
|
||||
v-for="(item,index) of editPanel.param.variables"
|
||||
:key="item.uid"
|
||||
>
|
||||
<div class="variable-title">
|
||||
<span class="variable-title-left">
|
||||
<i class="nz-icon nz-icon-arrow-down" :class="item.collapse?'is-active':''" @click.stop="dropVariable(index,item)"></i>
|
||||
<span v-show="item.collapse">{{item.name}}</span>
|
||||
</span>
|
||||
<span @click="addVariable()" style="margin-right: 6px" :title="$t('tip.add')">
|
||||
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
|
||||
<span style="display:flex;align-items:center">
|
||||
<span @click="showVariable(index,item)" class="nz-icon-minus-medium" style="margin-right: 6px;padding-left: 10px">
|
||||
<i v-if="item.show" class="nz-icon nz-icon-mimakejian" :title="$t('overall.visible')"></i>
|
||||
<i v-else class="nz-icon nz-icon-mimabukejian" :title="$t('overall.invisible')"></i>
|
||||
</span>
|
||||
<span @click="addVariable()" style="margin-right: 6px" :title="$t('tip.add')">
|
||||
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
|
||||
</span>
|
||||
<span @click="copyVariable(item)" style="margin-right: 6px" :title="$t('overall.duplicate')">
|
||||
<i class="nz-icon nz-icon-override"></i>
|
||||
</span>
|
||||
<span @click="removeVariable(index)" class="nz-icon-minus-medium" style="margin-right: 6px" :title="$t('overall.delete')">
|
||||
<i class="nz-icon nz-icon-minus"></i>
|
||||
</span>
|
||||
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
|
||||
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span @click="copyVariable(item)" style="margin-right: 6px" :title="$t('overall.duplicate')">
|
||||
<i class="nz-icon nz-icon-override"></i>
|
||||
</span>
|
||||
<span @click="removeVariable(index)" class="nz-icon-minus-medium" style="margin-right: 6px" :title="$t('overall.delete')">
|
||||
<i class="nz-icon nz-icon-minus"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="form-items--half-width-group" v-if="!item.collapse" style="margin-top: 16px">
|
||||
<!-- Name -->
|
||||
<el-form-item class="form-item--half-width" :label='$t("overall.name")' :prop="'param.variables.' + index + '.name'"
|
||||
:rules="[
|
||||
{ required: true, message: $t('validate.required'), trigger: 'blur'},
|
||||
{ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.panel.matchRegex'), trigger: 'blur'},
|
||||
{ validator: variableValidator,trigger: 'blur'},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"/>
|
||||
</el-form-item>
|
||||
<!-- Type -->
|
||||
<el-form-item class="form-item--half-width" :label='$t("overall.type")' :prop="'param.variables.' + index + '.type'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
|
||||
<el-select
|
||||
v-model="item.type"
|
||||
:placeholder="$t('overall.placeHolder')"
|
||||
size="small"
|
||||
@change="variableTypeChange(index)"
|
||||
>
|
||||
<el-option label="Query" value="query"></el-option>
|
||||
<el-option label="Custom" value="custom"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- Query expression -->
|
||||
<el-form-item class="query-expression" v-if="item.type==='query'" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
|
||||
<div slot="label">
|
||||
<span>{{$t('dashboard.panel.queryExpression')}}</span>
|
||||
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
|
||||
<table class="query-variable-table" width="640" cellspacing="5">
|
||||
<thead>
|
||||
<th>{{$t('overall.name')}}</th>
|
||||
<th>{{$t('overall.remark')}}</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in queryVariableList" :key="item.name">
|
||||
<td width="200">{{item.name}}</td>
|
||||
<td>{{item.description}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span slot="reference">
|
||||
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
|
||||
</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
|
||||
</el-form-item>
|
||||
<!-- Regex -->
|
||||
<el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
|
||||
<el-input v-model="item.regex" placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/" size="small"/>
|
||||
</el-form-item>
|
||||
<!-- Custom values -->
|
||||
<el-form-item v-if="item.type==='custom'" :label="$t('dashboard.panel.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
|
||||
<el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
|
||||
</el-form-item>
|
||||
<!-- Multi-value -->
|
||||
<el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
|
||||
<div slot="label">
|
||||
<span>{{$t('dashboard.panel.multi')}}</span>
|
||||
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside multiTip">
|
||||
<span>{{$t('dashboard.panel.multiTip')}}</span>
|
||||
<span slot="reference">
|
||||
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
|
||||
</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-select
|
||||
v-model="item.multi"
|
||||
size="small"
|
||||
>
|
||||
<el-option :label="$t('overall.enabled')" :value="true"></el-option>
|
||||
<el-option :label="$t('overall.disabled')" :value="false"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- All option -->
|
||||
<el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.allOption'" style="margin-bottom: 0px">
|
||||
<div slot="label">
|
||||
<span>{{$t('dashboard.panel.allOption')}}</span>
|
||||
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside allOptionTip">
|
||||
<span>{{$t('dashboard.panel.allOptionTip')}}</span>
|
||||
<span slot="reference">
|
||||
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
|
||||
</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-select
|
||||
v-model="item.allOption"
|
||||
size="small"
|
||||
>
|
||||
<el-option :label="$t('overall.enabled')" :value="true"></el-option>
|
||||
<el-option :label="$t('overall.disabled')" :value="false"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</transition>
|
||||
</el-row>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="form-items--half-width-group" v-if="!item.collapse" style="margin-top: 16px">
|
||||
<!-- Name -->
|
||||
<el-form-item class="form-item--half-width" :label='$t("overall.name")' :prop="'param.variables.' + index + '.name'"
|
||||
:rules="[
|
||||
{ required: true, message: $t('validate.required'), trigger: 'blur'},
|
||||
{ pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: $t('dashboard.panel.matchRegex'), trigger: 'blur'},
|
||||
{ validator: variableValidator,trigger: 'blur'},
|
||||
]"
|
||||
>
|
||||
<el-input v-model="item.name" :placeholder="$t('overall.placeHolder')" size="small"/>
|
||||
</el-form-item>
|
||||
<!-- Type -->
|
||||
<el-form-item class="form-item--half-width" :label='$t("overall.type")' :prop="'param.variables.' + index + '.type'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
|
||||
<el-select
|
||||
v-model="item.type"
|
||||
:placeholder="$t('overall.placeHolder')"
|
||||
size="small"
|
||||
@change="variableTypeChange(index)"
|
||||
>
|
||||
<el-option label="Query" value="query"></el-option>
|
||||
<el-option label="Custom" value="custom"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- Query expression -->
|
||||
<el-form-item class="query-expression" v-if="item.type==='query'" :prop="'param.variables.' + index + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="expression" style="width: 100%;" >
|
||||
<div slot="label">
|
||||
<span>{{$t('dashboard.panel.queryExpression')}}</span>
|
||||
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
|
||||
<table class="query-variable-table" width="640" cellspacing="5">
|
||||
<thead>
|
||||
<th>{{$t('overall.name')}}</th>
|
||||
<th>{{$t('overall.remark')}}</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in queryVariableList" :key="item.name">
|
||||
<td width="200">{{item.name}}</td>
|
||||
<td>{{item.description}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span slot="reference">
|
||||
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
|
||||
</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-input v-model="item.expression" placeholder="labels_names()" size="small"/>
|
||||
</el-form-item>
|
||||
<!-- Regex -->
|
||||
<el-form-item v-if="item.type==='query'" :label="$t('dashboard.panel.regex')" :prop="'param.variables.' + index + '.regex'" key="regex" style="width: 100%;" >
|
||||
<el-input v-model="item.regex" placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/" size="small"/>
|
||||
</el-form-item>
|
||||
<!-- Custom values -->
|
||||
<el-form-item v-if="item.type==='custom'" :label="$t('dashboard.panel.customValues')" :prop="'param.variables.' + index + '.customOptions'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" key="customOptions" style="width: 100%;" >
|
||||
<el-input v-model="item.customOptions" placeholder="1,10,myKey:myValue" size="small"/>
|
||||
</el-form-item>
|
||||
<!-- Multi-value -->
|
||||
<el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.multi'" style="margin-bottom: 0px">
|
||||
<div slot="label">
|
||||
<span>{{$t('dashboard.panel.multi')}}</span>
|
||||
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside multiTip">
|
||||
<span>{{$t('dashboard.panel.multiTip')}}</span>
|
||||
<span slot="reference">
|
||||
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
|
||||
</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-select
|
||||
v-model="item.multi"
|
||||
size="small"
|
||||
>
|
||||
<el-option :label="$t('overall.enabled')" :value="true"></el-option>
|
||||
<el-option :label="$t('overall.disabled')" :value="false"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- All option -->
|
||||
<el-form-item class="form-item--half-width" :prop="'param.variables.' + index + '.allOption'" style="margin-bottom: 0px">
|
||||
<div slot="label">
|
||||
<span>{{$t('dashboard.panel.allOption')}}</span>
|
||||
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside allOptionTip">
|
||||
<span>{{$t('dashboard.panel.allOptionTip')}}</span>
|
||||
<span slot="reference">
|
||||
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
|
||||
</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-select
|
||||
v-model="item.allOption"
|
||||
size="small"
|
||||
>
|
||||
<el-option :label="$t('overall.enabled')" :value="true"></el-option>
|
||||
<el-option :label="$t('overall.disabled')" :value="false"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</transition>
|
||||
</el-row>
|
||||
</draggable>
|
||||
<div @click="addVariable()" class="add-variable">{{$t('dashboard.panel.addVariable')}}</div>
|
||||
</div>
|
||||
|
||||
@@ -317,8 +335,13 @@
|
||||
import editRigthBox from '../mixin/editRigthBox'
|
||||
import bus from '@/libs/bus'
|
||||
import { arrLength, datePicker } from '@/components/common/js/validate'
|
||||
import draggable from 'vuedraggable'
|
||||
import { getUUID } from '@/components/common/js/common'
|
||||
export default {
|
||||
name: 'panelBox',
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
props: {
|
||||
obj: {
|
||||
type: Object
|
||||
@@ -453,9 +476,6 @@ export default {
|
||||
// 展开 折叠变量
|
||||
dropVariable (index, item) {
|
||||
this.$set(this.editPanel.param.variables[index], 'collapse', !item.collapse)
|
||||
this.$refs.form.clearValidate('param.variables.' + index + '.name')
|
||||
this.$refs.form.clearValidate('param.variables.' + index + '.customOptions')
|
||||
this.$refs.form.clearValidate('param.variables.' + index + '.expression')
|
||||
},
|
||||
// 显示 隐藏变量
|
||||
showVariable (index, item) {
|
||||
@@ -467,7 +487,9 @@ export default {
|
||||
show: true,
|
||||
type: 'query',
|
||||
multi: false,
|
||||
allOption: false
|
||||
allOption: false,
|
||||
collapse: false,
|
||||
uid: getUUID()
|
||||
}
|
||||
this.editPanel.param.variables.push(temp)
|
||||
},
|
||||
@@ -476,6 +498,7 @@ export default {
|
||||
const temp = JSON.parse(JSON.stringify(item))
|
||||
temp.name = temp.name ? temp.name + '_copy' : ''
|
||||
temp.collapse = false
|
||||
temp.uid = getUUID()
|
||||
this.editPanel.param.variables.push(temp)
|
||||
},
|
||||
// 删除变量
|
||||
@@ -510,10 +533,11 @@ export default {
|
||||
|
||||
/* 保存 */
|
||||
save () {
|
||||
// 保存时把collapse属性删除 再传入后台
|
||||
// 保存时把无用属性删除 再传入后台
|
||||
const variables = this.editPanel.param.variables.map((item) => {
|
||||
const temp = JSON.parse(JSON.stringify(item))
|
||||
delete temp.collapse
|
||||
delete temp.uid
|
||||
return temp
|
||||
})
|
||||
const params = {
|
||||
@@ -624,10 +648,14 @@ export default {
|
||||
handler (n, o) {
|
||||
this.isEdit = true
|
||||
this.editPanel = JSON.parse(JSON.stringify(n))
|
||||
// 如果是空数组 则添加一条变量数据
|
||||
// 若没有数据 默认设置为空数组
|
||||
if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
|
||||
const temp = []
|
||||
this.$set(this.editPanel.param, 'variables', temp)
|
||||
} else {
|
||||
this.editPanel.param.variables.forEach(item => {
|
||||
item.uid = getUUID()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user