NEZ-2445 feat：新增通过dashboard template创建
This commit is contained in:
18317449825
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div v-clickoutside="{obj: editDashboard, func: esc}" class="right-box right-box-dashboard-temp">
|
||||
<div class="right-box__header">
|
||||
<div class="header__title">{{$t("dashboard.panel.createPanelTitle")}}</div>
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: editDashboard, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__container">
|
||||
<div class="container__form">
|
||||
<el-form ref="form" :model="editDashboard" :rules="rules" label-position="top" label-width="120px">
|
||||
<!-- name -->
|
||||
<el-form-item :label='$t("overall.name")' prop="name">
|
||||
<el-input v-model="editDashboard.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
|
||||
</el-form-item>
|
||||
<!-- dashboardTemplate -->
|
||||
<el-form-item :label="$t('upload.template')" prop="tmplId">
|
||||
<v-selectpage
|
||||
:data="dashboardList"
|
||||
:tb-columns="ChartSearchShowFields"
|
||||
:multiple="false"
|
||||
:language="language"
|
||||
key-field="id"
|
||||
show-field="name"
|
||||
:width="640"
|
||||
v-model="editDashboard.tmplId"
|
||||
class="form-control"
|
||||
:result-format="resultFormat"
|
||||
@values="tempChange"
|
||||
></v-selectpage>
|
||||
</el-form-item>
|
||||
<!-- link(asset) -->
|
||||
<el-form-item :label="$t('asset.asset')" prop="link" v-if="selectedTemp.varType==1" key="asset">
|
||||
<v-selectpage
|
||||
:data="dataList"
|
||||
:tb-columns="assetColumns"
|
||||
:multiple="false"
|
||||
:language="language"
|
||||
key-field="id"
|
||||
show-field="name"
|
||||
:width="640"
|
||||
v-model="editDashboard.link"
|
||||
class="form-control"
|
||||
:result-format="resultFormat"
|
||||
@values="linkChange"
|
||||
></v-selectpage>
|
||||
</el-form-item>
|
||||
<!-- link(endpoint) -->
|
||||
<el-form-item :label="$t('asset.endpoint')" prop="link" v-else-if="selectedTemp.varType==2" key="endpoint">
|
||||
<v-selectpage
|
||||
:data="dataList"
|
||||
:tb-columns="endpointColumns"
|
||||
:multiple="false"
|
||||
:language="language"
|
||||
key-field="id"
|
||||
show-field="name"
|
||||
:width="640"
|
||||
v-model="editDashboard.link"
|
||||
class="form-control"
|
||||
:result-format="resultFormat"
|
||||
@values="linkChange"
|
||||
></v-selectpage>
|
||||
</el-form-item>
|
||||
<!--description-->
|
||||
<el-form-item :label='$t("overall.remark")' prop="description">
|
||||
<el-input
|
||||
v-model="editDashboard.description"
|
||||
maxlength="256"
|
||||
:rows="2"
|
||||
show-word-limit
|
||||
size="small"
|
||||
type="textarea">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__footer">
|
||||
<button id="asset-edit-cancel" v-cancel="{obj: editDashboard, func: esc}" class="footer__btn footer__btn--light">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/libs/bus'
|
||||
export default {
|
||||
props: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: 'visual/panel/fromTmpl',
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
tmplId: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||||
],
|
||||
link: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
|
||||
{ title: 'ID', data: 'id' },
|
||||
{
|
||||
title: this.$t('overall.name'),
|
||||
data: function (row) {
|
||||
if (row.name.length > 15) {
|
||||
return row.name.substring(0, 12) + '...'
|
||||
}
|
||||
return row.name
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('dashboard.panel.chartForm.varType'),
|
||||
data: function (row) {
|
||||
let str
|
||||
switch (row.varType) {
|
||||
case 0 : str = 'None'; break
|
||||
case 1 : str = 'Asset'; break
|
||||
case 2 : str = 'Endpoint'; break
|
||||
}
|
||||
return str
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('overall.remark'),
|
||||
data: function (row) {
|
||||
if (row.remark && row.remark.length > 15) {
|
||||
return row.remark.substring(0, 12) + '...'
|
||||
}
|
||||
return row.remark
|
||||
}
|
||||
}
|
||||
],
|
||||
// asset表头
|
||||
assetColumns: [
|
||||
{ title: 'id', data: 'id' },
|
||||
{
|
||||
title: this.$t('overall.name'),
|
||||
data: function (row) {
|
||||
if (row.name.length > 15) {
|
||||
return row.name.substring(0, 12) + '...'
|
||||
}
|
||||
return row.name
|
||||
}
|
||||
},
|
||||
{ title: 'Manage Ip', data: 'manageIp' },
|
||||
{
|
||||
title: this.$t('overall.type'),
|
||||
data: (row) => {
|
||||
return row.type ? row.type.name : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('asset.model'),
|
||||
data: (row) => {
|
||||
return row.model ? row.model.name : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('overall.dc'),
|
||||
data: (row) => {
|
||||
return row.dc ? row.dc.name : ''
|
||||
}
|
||||
}
|
||||
],
|
||||
// endpoint表头
|
||||
endpointColumns: [
|
||||
{ title: 'ID', data: 'id' },
|
||||
{
|
||||
title: this.$t('overall.name'),
|
||||
data: function (row) {
|
||||
if (row.name.length > 15) {
|
||||
return row.name.substring(0, 12) + '...'
|
||||
}
|
||||
return row.name
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('overall.project'),
|
||||
data: (row) => {
|
||||
return row.project ? row.project.name : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('asset.asset'),
|
||||
data: (row) => {
|
||||
return row.asset ? row.asset.name : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('overall.module'),
|
||||
data: (row) => {
|
||||
return row.module ? row.module.name : ''
|
||||
}
|
||||
}
|
||||
],
|
||||
editDashboard: {
|
||||
name: '',
|
||||
type: 'dashboard',
|
||||
tmplId: '',
|
||||
link: '',
|
||||
description: ''
|
||||
},
|
||||
dashboardList: [],
|
||||
dataList: [],
|
||||
selectedTemp: {} // 选中的dashboard模板
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
language () { return this.$store.getters.getLanguage }
|
||||
},
|
||||
mounted () {
|
||||
this.getDashboardTempData()
|
||||
},
|
||||
methods: {
|
||||
// 选中的模板变化
|
||||
tempChange: bus.debounce(function (val) {
|
||||
this.editDashboard.link = ''
|
||||
const newValue = val.length ? val[0] : {}
|
||||
const oldValue = this.$loadsh.cloneDeep(this.selectedTemp)
|
||||
this.selectedTemp = this.$loadsh.cloneDeep(newValue)
|
||||
// 判断varType是否变化
|
||||
if (oldValue.varType != newValue.varType) {
|
||||
this.getTableData()
|
||||
}
|
||||
this.$refs.form.validateField('tmplId')
|
||||
}, 50),
|
||||
// 校验
|
||||
linkChange: bus.debounce(function () {
|
||||
this.$refs.form.validateField('link')
|
||||
}, 50),
|
||||
// 获取dashboard模板列表
|
||||
getDashboardTempData () {
|
||||
this.$get('visual/panel', { type: 'template', pageSize: -1 }).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.dashboardList = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
// 根据选中模板vartype请求数据
|
||||
getTableData () {
|
||||
this.dataList = []
|
||||
if (this.selectedTemp.varType === 1) {
|
||||
this.getAssetData()
|
||||
} else if (this.selectedTemp.varType === 2) {
|
||||
this.getEndpointData()
|
||||
}
|
||||
},
|
||||
// 获取asset列表
|
||||
getAssetData () {
|
||||
this.$get('asset/asset', { pageSize: -1 }).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.dataList = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取endpoint列表
|
||||
getEndpointData () {
|
||||
this.$get('monitor/endpoint', { pageSize: -1 }).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.dataList = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
save () {
|
||||
if (this.prevent_opt.save) {
|
||||
return
|
||||
}
|
||||
this.prevent_opt.save = true
|
||||
const params = this.$loadsh.cloneDeep(this.editDashboard)
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
// 模板varType ≠ 0时有效且必填
|
||||
if (this.selectedTemp.varType == 0) {
|
||||
delete params.link
|
||||
}
|
||||
this.$post(this.url, params).then(response => {
|
||||
this.prevent_opt.save = false
|
||||
if (response.code === 200) {
|
||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.prevent_opt.save = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resultFormat (resp) {
|
||||
if (resp && resp.data) {
|
||||
const assetData = {}
|
||||
assetData.list = resp.data.list
|
||||
assetData.totalRow = resp.data.total
|
||||
return assetData
|
||||
}
|
||||
},
|
||||
/* 关闭弹框 */
|
||||
esc (refresh) {
|
||||
this.prevent_opt.save = false
|
||||
this.$emit('close', refresh)
|
||||
},
|
||||
clickOutside () {
|
||||
this.esc(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user