398 lines
12 KiB
Vue
398 lines
12 KiB
Vue
<template>
|
||
<div v-clickoutside="{obj: editChartTemp, func: esc}" class="right-box right-box-asset">
|
||
<div class="right-box__header">
|
||
<div class="header__title">{{editChartTemp.id ? $t('config.user.editChartTemp') : $t('config.user.createUser')}}</div>
|
||
<div class="header__operation">
|
||
<span v-cancel="{obj: editChartTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||
</div>
|
||
</div>
|
||
<div class="right-box__container">
|
||
<div class="container__form">
|
||
<el-form ref="userForm" :model="editChartTemp" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
|
||
<!--type-->
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
|
||
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group" @change="varTypeChange">
|
||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
|
||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!--chartTemp list-->
|
||
<el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
|
||
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group" >
|
||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
|
||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- 选择资产，穿梭框 -->
|
||
<div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
|
||
<nz-transfer ref="transfer"
|
||
:page-obj="transfer.pageObj"
|
||
:search-msg="transfer.searchMsg"
|
||
:table-data="transfer.tableData"
|
||
style="margin-bottom: 20px;"
|
||
:tableTitle="transferTableTitle"
|
||
@leftToRight="addAsset"
|
||
@search="search"
|
||
@rightToLeft="removeAsset">
|
||
<template v-slot:title>Selected</template>
|
||
</nz-transfer>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="right-box__footer">
|
||
<button id="asset-edit-cancel" v-cancel="{obj: editChartTemp, 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 nzTransfer from '@/components/common/nzTransfer'
|
||
export default {
|
||
name: 'chartTemp',
|
||
components: {
|
||
nzTransfer
|
||
},
|
||
props: {
|
||
obj: {
|
||
type: Object
|
||
}
|
||
},
|
||
computed: {
|
||
isCurrentUser () {
|
||
return function (username) {
|
||
return localStorage.getItem('nz-username') == username
|
||
}
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
editChartTemp: {},
|
||
url: 'visual/panel/chart/fromTmpl',
|
||
rightBox: { model: { show: false } },
|
||
rules: { // 表单校验规则
|
||
varType: [
|
||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
],
|
||
pid: [
|
||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
]
|
||
},
|
||
varTypeArr: [
|
||
{ name: 'Asset', id: 1 },
|
||
{ name: 'Endpoint', id: 2 }
|
||
],
|
||
chartTempArr: [],
|
||
tableData: [],
|
||
transfer: {
|
||
tableData: [],
|
||
selectedData: [],
|
||
searchLabel: {},
|
||
searchMsg: { // 给搜索框子组件传递的信息
|
||
zheze_none: true,
|
||
searchLabelList: [
|
||
{
|
||
id: 1,
|
||
name: 'ID',
|
||
type: 'input',
|
||
label: 'id',
|
||
disabled: false
|
||
}, {
|
||
id: 20,
|
||
name: 'SN',
|
||
type: 'input',
|
||
label: 'sn',
|
||
disabled: false
|
||
}, {
|
||
id: 21,
|
||
name: 'Host',
|
||
type: 'input',
|
||
label: 'host',
|
||
disabled: false
|
||
}, {
|
||
id: 22,
|
||
name: this.$t('asset.state'),
|
||
type: 'select',
|
||
label: 'assetState',
|
||
disabled: false
|
||
}, {
|
||
id: 23,
|
||
name: 'pingStatus',
|
||
type: 'select',
|
||
label: 'pingStatus',
|
||
disabled: false
|
||
}, {
|
||
id: 23,
|
||
name: this.$t('asset.cabinet'),
|
||
type: 'input',
|
||
label: 'cabinetName',
|
||
disabled: false
|
||
}
|
||
]
|
||
},
|
||
pageObj: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
pages: 1,
|
||
total: 0
|
||
}
|
||
},
|
||
transferTableTitle: [
|
||
{
|
||
label: this.$t('overall.name'),
|
||
prop: 'name',
|
||
show: true
|
||
},
|
||
{
|
||
label: this.$t('asset.host'),
|
||
prop: 'manageIp',
|
||
show: true
|
||
}
|
||
]
|
||
}
|
||
},
|
||
watch: {
|
||
obj: {
|
||
deep: true,
|
||
immediate: true,
|
||
handler (n) {
|
||
this.editChartTemp = JSON.parse(JSON.stringify(n))
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getChartTempData()
|
||
this.getTableData()
|
||
},
|
||
methods: {
|
||
clickOutside () {
|
||
this.esc(false)
|
||
},
|
||
/* 关闭弹框 */
|
||
esc (refresh) {
|
||
this.prevent_opt.save = false
|
||
this.$emit('close', refresh)
|
||
},
|
||
save () {
|
||
if (this.prevent_opt.save) { return } ;
|
||
this.prevent_opt.save = true
|
||
if (!this.transfer.selectedData.length) {
|
||
this.prevent_opt.save = false
|
||
if (this.editChartTemp.varType === 1) {
|
||
this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
|
||
} else {
|
||
this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
|
||
}
|
||
return
|
||
}
|
||
this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
|
||
this.$refs.userForm.validate((valid) => {
|
||
if (valid) {
|
||
if (this.editChartTemp.id) {
|
||
this.$put(this.url, this.editChartTemp).then(res => {
|
||
this.prevent_opt.save = false
|
||
if (res.code === 200) {
|
||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||
this.$emit('on-create-success')
|
||
this.esc(true)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
} else {
|
||
this.$post(this.url, this.editChartTemp).then(res => {
|
||
this.prevent_opt.save = false
|
||
if (res.code === 200) {
|
||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||
this.esc(true)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
this.prevent_opt.save = false
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
search (searchLabel, page) {
|
||
this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
|
||
this.transfer.pageObj = JSON.parse(JSON.stringify(page))
|
||
this.getTableData()
|
||
},
|
||
addAsset (toAdd) {
|
||
this.transfer.selectedData = toAdd
|
||
this.transfer.tableData.forEach(d => {
|
||
this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
|
||
})
|
||
},
|
||
removeAsset (toRemove) {
|
||
this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
|
||
this.transfer.tableData.forEach(d => {
|
||
this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
|
||
})
|
||
// dc, brand, model, type
|
||
},
|
||
getChartTempData () {
|
||
this.$get('visual/panel/chart', { pageSize: -1, panelId: 0, returnChildren: 0, varType: this.editChartTemp.varType }).then(response => {
|
||
if (response.code === 200) {
|
||
this.chartTempArr = response.data.list
|
||
}
|
||
})
|
||
},
|
||
getTableData () {
|
||
if (this.editChartTemp.varType === 1) {
|
||
this.getAssetData()
|
||
} else {
|
||
this.getEndpointData()
|
||
}
|
||
},
|
||
getAssetData () {
|
||
this.$refs.transfer.startLoading()
|
||
this.$get('asset/asset', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
|
||
this.$refs.transfer.endLoading()
|
||
if (response.code === 200) {
|
||
this.transfer.tableData = response.data.list
|
||
this.transfer.pageObj.total = response.data.total
|
||
}
|
||
})
|
||
},
|
||
getEndpointData () {
|
||
this.$refs.transfer.startLoading()
|
||
this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
|
||
this.$refs.transfer.endLoading()
|
||
if (response.code === 200) {
|
||
this.transfer.tableData = response.data.list
|
||
this.transfer.pageObj.total = response.data.total
|
||
}
|
||
})
|
||
},
|
||
varTypeChange () {
|
||
this.getChartTempData()
|
||
this.editChartTemp.pid = ''
|
||
this.transfer.selectedData = []
|
||
this.$refs.transfer.selectedData = []
|
||
if (this.editChartTemp.varType === 1) {
|
||
this.transferTableTitle = [
|
||
{
|
||
label: this.$t('overall.name'),
|
||
prop: 'name',
|
||
show: true
|
||
},
|
||
{
|
||
label: this.$t('asset.host'),
|
||
prop: 'manageIp',
|
||
show: true
|
||
}
|
||
]
|
||
this.transfer.searchMsg.searchLabelList = [
|
||
{
|
||
id: 1,
|
||
name: 'ID',
|
||
type: 'input',
|
||
label: 'id',
|
||
disabled: false
|
||
}, {
|
||
id: 20,
|
||
name: 'SN',
|
||
type: 'input',
|
||
label: 'sn',
|
||
disabled: false
|
||
}, {
|
||
id: 21,
|
||
name: 'Host',
|
||
type: 'input',
|
||
label: 'host',
|
||
disabled: false
|
||
}, {
|
||
id: 22,
|
||
name: this.$t('asset.state'),
|
||
type: 'select',
|
||
label: 'assetState',
|
||
disabled: false
|
||
}, {
|
||
id: 23,
|
||
name: 'pingStatus',
|
||
type: 'select',
|
||
label: 'pingStatus',
|
||
disabled: false
|
||
}, {
|
||
id: 23,
|
||
name: this.$t('asset.cabinet'),
|
||
type: 'input',
|
||
label: 'cabinetName',
|
||
disabled: false
|
||
}
|
||
]
|
||
} else {
|
||
this.transferTableTitle = [
|
||
{
|
||
label: 'ID',
|
||
prop: 'id',
|
||
show: true
|
||
},
|
||
{
|
||
label: this.$t('project.endpoint.name'),
|
||
prop: 'name',
|
||
show: true
|
||
}
|
||
]
|
||
this.transfer.searchMsg.searchLabelList = [
|
||
{
|
||
id: 11,
|
||
name: 'project id',
|
||
type: 'input',
|
||
label: 'projectIds',
|
||
disabled: false
|
||
}, {
|
||
id: 12,
|
||
name: 'endpoint name',
|
||
type: 'input',
|
||
label: 'name',
|
||
disabled: false
|
||
},
|
||
{
|
||
id: 13,
|
||
name: 'endpoint id',
|
||
type: 'input',
|
||
label: 'id',
|
||
disabled: false
|
||
}, {
|
||
id: 14,
|
||
name: this.$t('asset.asset'),
|
||
type: 'query',
|
||
label: 'query',
|
||
disabled: false
|
||
}, {
|
||
id: 34,
|
||
name: this.$t('project.project.project'),
|
||
// name: this.$t('asset.asset'),
|
||
type: 'input',
|
||
label: 'projectName',
|
||
disabled: false
|
||
}, {
|
||
id: 35,
|
||
name: this.$t('project.module.module'),
|
||
// name: this.$t('asset.asset'),
|
||
type: 'input',
|
||
label: 'moduleName',
|
||
disabled: false
|
||
}]
|
||
}
|
||
this.getTableData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
@import '@/assets/css/common/rightBoxCommon.scss';
|
||
</style>
|