NEZ-1876 fix：Endpoint 批量修改页面开发
This commit is contained in:
zhangyu
@@ -224,7 +224,7 @@
|
||||
}
|
||||
}
|
||||
.list-page.profile-right {
|
||||
width: calc(100% - 370px);
|
||||
width: calc(100% - 360px);
|
||||
padding: 0;
|
||||
pxbox-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
|
||||
border-radius: 2px;
|
||||
|
||||
@@ -504,10 +504,12 @@ export default {
|
||||
tempList = null
|
||||
setTimeout(() => {
|
||||
this.gridLayoutShow = true
|
||||
if (!this.isGroup && !this.isExportHtml) {
|
||||
this.onScroll()
|
||||
} else {
|
||||
this.onScroll(999999)
|
||||
if (!this.isGroup) {
|
||||
if (!this.isExportHtml) {
|
||||
this.onScroll()
|
||||
} else {
|
||||
this.onScroll(999999)
|
||||
}
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -184,7 +184,13 @@ export const asset = {
|
||||
dateTime: 'dateTime'
|
||||
}
|
||||
}
|
||||
|
||||
export const endpoint = {
|
||||
editTypeOptions: [
|
||||
{ value: 1, label: i18n.t('endpoint.metricLabel') },
|
||||
{ value: 2, label: i18n.t('endpoint.metricEnable') },
|
||||
{ value: 3, label: i18n.t('endpoint.logEnable') }
|
||||
],
|
||||
}
|
||||
export const alertMessage = {
|
||||
severityData: [
|
||||
{ value: 'P1', label: i18n.t('alert.config.P1') },
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
v-for="(item,index) in tableTitle"
|
||||
:key="index"
|
||||
>
|
||||
<template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop]}}</template>
|
||||
<template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop].name || scope.row[item.prop]}}</template>
|
||||
<slot :name="item.prop" v-else></slot>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div v-clickoutside="{obj: editData, func: esc}" class="right-box right-box-endpoint-batch">
|
||||
<div class="right-box__header">
|
||||
<div class="header__title">{{$t('endpoint.batchEditendpoint')}}</div>
|
||||
<div class="header__operation">
|
||||
<span @click="esc"><i class="nz-icon nz-icon-close"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__container">
|
||||
<div class="container__form">
|
||||
<!-- Edit type -->
|
||||
<el-form ref="endpointEditForm" :model="editData" :rules="rules" label-position="top" label-width="120px">
|
||||
<el-form-item :label="$t('overall.editType')" prop="editType">
|
||||
<el-select v-model="editData.editType" @change="endpointBatch" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
|
||||
<el-option v-for="type in endpointConfig.editTypeOptions" :key="type.value" :label="$t(type.label)" :value="type.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="form__sub-title" style="margin-top: 20px">{{$t(endpointConfig.editTypeOptions.find(title=>title.value === editData.editType).label)}}</div>
|
||||
<!-- Edit type === 1 metric label-->
|
||||
<template v-if="editData.editType === 1">
|
||||
<!-- <div class="form__sub-title">{{$t('overall.labels')}}</div>-->
|
||||
<div v-for="(item, index) in editData.labels" :key="index" class="form__dotted-item">
|
||||
<el-form-item :prop="'labels.' + index + '.value'">
|
||||
<template v-slot:label>
|
||||
<div class="form__labels-label">
|
||||
<span>{{item.name}}</span>
|
||||
<div>
|
||||
<el-checkbox v-model="item.action" :false-label="0" :label="$t('overall.delete')" :true-label="1" size="small" style="padding-right: 20px;"></el-checkbox>
|
||||
<span @click="removeLabels(index)"><i class="nz-icon nz-icon-minus"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item :prop="'labels.' + index + '.key'" class="param-box-row-key" :rules="[{ pattern: /[a-zA-Z_][a-zA-Z0-9_]*/, message: $t('overall.ASCIIKey') ,trigger: 'blur'}]">
|
||||
<el-input v-model="item.key" placeholder="key" size="mini" ></el-input>
|
||||
</el-form-item>
|
||||
<span class="param-box-row-eq">=</span>
|
||||
<el-form-item :prop="'labels.' + index + '.value'" class="param-box-row-value">
|
||||
<el-input v-model="item.value" placeholder="value" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- label的新增按钮 -->
|
||||
<div class="form__flex-container hide-casc-input">
|
||||
<div style="text-align: center">
|
||||
<span id="module-add-param" class="right-box-form-add module-add-label" type="button" @click="addLabels">
|
||||
<span><i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Edit type === 2 || 3 metric enable-->
|
||||
<el-form-item :label="$t('overall.state')" prop="enable" v-if="editData.editType!==1">
|
||||
<el-select v-model="editData.enable" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
|
||||
<el-option :value="1" :label="$t('overall.enabled')">{{$t('overall.enabled')}}</el-option>
|
||||
<el-option :value="0" :label="$t('overall.disabled')">{{$t('overall.disabled')}}</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 选择Endpoint，穿梭框 -->
|
||||
<div class="form__sub-title" style="margin-top: 20px">{{$t('overall.select')}}</div>
|
||||
<div style="position: relative">
|
||||
<nz-transfer ref="transfer"
|
||||
:showError="showError"
|
||||
style="margin-bottom: 20px;"
|
||||
:page-obj="transfer.pageObj"
|
||||
:search-msg="transfer.searchMsg"
|
||||
:table-data="transfer.tableData"
|
||||
:tableTitle="transfer.tableTitle"
|
||||
@pageNo="pageNoChange"
|
||||
@search="search"
|
||||
@leftToRight="addEndpoint"
|
||||
@rightToLeft="removeEndpoint">
|
||||
<template v-slot:title>{{$t('overall.selected')}}</template>
|
||||
</nz-transfer>
|
||||
<div v-if="showError" class="el-form-item__error">{{$t('validate.required')}}</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__footer">
|
||||
<button id="endpoint-edit-cancel" v-cancel="{obj: editData, func: esc}" class="footer__btn footer__btn--light">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<button id="endpoint-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'
|
||||
import { endpoint as endpointConfig } from '@/components/common/js/constants'
|
||||
import editRigthBox from '@/components/common/mixin/editRigthBox'
|
||||
export default {
|
||||
name: 'endpointBatchEditBox',
|
||||
components: {
|
||||
nzTransfer
|
||||
},
|
||||
props: {
|
||||
fieldGroupData: {
|
||||
type: Array
|
||||
},
|
||||
stateData: {
|
||||
type: Array
|
||||
},
|
||||
snmpCredentialData: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
mixins: [editRigthBox],
|
||||
data () {
|
||||
const vm = this
|
||||
return {
|
||||
endpointConfig,
|
||||
url: 'monitor/endpoint',
|
||||
editData: {
|
||||
editType: 1,
|
||||
labels: [],
|
||||
enable: 1
|
||||
},
|
||||
transfer: {
|
||||
tableData: [],
|
||||
selectedData: [],
|
||||
searchLabel: {},
|
||||
searchMsg: { // 给搜索框子组件传递的信息
|
||||
searchLabelList: [
|
||||
{
|
||||
id: 13,
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
label: 'ids',
|
||||
disabled: false
|
||||
}, {
|
||||
name: this.$t('overall.name'),
|
||||
type: 'input',
|
||||
label: 'name',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: this.$t('overall.asset'),
|
||||
type: 'input',
|
||||
label: 'assetName',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: this.$t('overall.projectName'),
|
||||
type: 'project',
|
||||
label: 'projectIds',
|
||||
id: 11,
|
||||
readonly: true,
|
||||
disabled: false
|
||||
}, {
|
||||
name: this.$t('overall.module'),
|
||||
type: 'module',
|
||||
label: 'moduleIds',
|
||||
id: 11,
|
||||
readonly: true,
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
slot: false
|
||||
}, {
|
||||
label: this.$t('project.module.module'),
|
||||
prop: 'module',
|
||||
show: true
|
||||
}
|
||||
],
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
pages: 1,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
editType: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
metaData: [],
|
||||
showError: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search (searchLabel, page) {
|
||||
this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
|
||||
this.transfer.pageObj = JSON.parse(JSON.stringify(page))
|
||||
this.getTableData()
|
||||
},
|
||||
endpointBatch () {
|
||||
// this.getTableData()
|
||||
this.editData.enable = 1
|
||||
this.editData.labels = []
|
||||
},
|
||||
esc (refresh) {
|
||||
this.$emit('close', refresh)
|
||||
},
|
||||
save () {
|
||||
this.editData.ids = this.transfer.selectedData.map(d => d.id)
|
||||
if (this.editData.ids.length === 0) {
|
||||
this.showError = true
|
||||
}
|
||||
this.$refs.endpointEditForm.validate((valid) => {
|
||||
if (valid && !this.showError) {
|
||||
const params = this.$loadsh.cloneDeep(this.editData)
|
||||
if (params.editType === 1) {
|
||||
delete params.enable
|
||||
} else {
|
||||
delete params.labels
|
||||
}
|
||||
this.$put('monitor/endpoint/bulk', params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
pageNoChange (val) {
|
||||
this.transfer.pageObj.pageNo = val
|
||||
this.getTableData()
|
||||
},
|
||||
getTableData () {
|
||||
this.$refs.transfer && this.$refs.transfer.startLoading()
|
||||
const searchLabel = { ...this.transfer.searchLabel }
|
||||
this.$get(this.url, { ...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
|
||||
this.transfer.pageObj.pages = response.data.pages
|
||||
}
|
||||
})
|
||||
},
|
||||
addEndpoint (toAdd) {
|
||||
this.transfer.selectedData = toAdd
|
||||
this.transfer.tableData.forEach(d => {
|
||||
this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
|
||||
})
|
||||
this.showError = false
|
||||
},
|
||||
removeEndpoint (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
|
||||
},
|
||||
addLabels () {
|
||||
this.editData.labels.push({
|
||||
action: 0,
|
||||
key: '',
|
||||
value: ''
|
||||
})
|
||||
},
|
||||
removeLabels (i) {
|
||||
this.editData.labels.splice(i, 1)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getTableData()
|
||||
},
|
||||
watch: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -926,7 +926,7 @@ export default {
|
||||
} else if (val.type === 'asset') {
|
||||
objectInfo.asset = val.val
|
||||
} else if (val.type === 'module') {
|
||||
objectInfo.moduleId = val.valnum
|
||||
objectInfo.moduleIds = val.valnum
|
||||
} else if (val.type === 'project') {
|
||||
objectInfo.projectIds = val.valnum
|
||||
} else if (val.label === 'assetState') {
|
||||
@@ -1510,6 +1510,10 @@ export default {
|
||||
if (this.$route.path === '/module') {
|
||||
this.getProjectData()
|
||||
}
|
||||
if (this.$route.path === '/endpoint') {
|
||||
this.getProjectData()
|
||||
this.getModuleData()
|
||||
}
|
||||
if (this.$route.path === '/alertRule') {
|
||||
this.getSeverityData()
|
||||
}
|
||||
|
||||
@@ -166,8 +166,12 @@
|
||||
<transition name="right-box">
|
||||
<batchAddEndpoint v-if="rightBox.batchAdd" @close="closeRightBatchAdd"></batchAddEndpoint>
|
||||
</transition>
|
||||
<transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
|
||||
</transition>
|
||||
<transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box></transition>
|
||||
<transition name="right-box">
|
||||
<batchEditEndpoint v-if="rightBox.batchShow"
|
||||
@close="closeRightBox"
|
||||
@refresh="getTableData"></batchEditEndpoint>
|
||||
</transition>
|
||||
<el-dialog :close-on-click-modal="false" :show-close="true" destroy-on-close :title='$t("overall.batchAddEndpoint")' :visible.sync="importBoxShow" :width="'600px'" append-to-body class="nz-dialog" @close="closeDialog">
|
||||
<div class="upload-body result-body">
|
||||
<div v-if="importResult&&importResult.failNum">
|
||||
@@ -238,6 +242,7 @@ import detailViewMixin from '@/components/common/mixin/detailViewMixin'
|
||||
import endpointDetail from '@/components/common/detailView/list/endpoint/endpointDetail'
|
||||
import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'
|
||||
import routerPathParams from '@/components/common/mixin/routerPathParams'
|
||||
import batchEditEndpoint from '@/components/common/rightBox/batchEditEndpoint'
|
||||
import lodash from 'lodash'
|
||||
|
||||
export default {
|
||||
@@ -255,7 +260,8 @@ export default {
|
||||
batchAddEndpoint,
|
||||
nzDetailView,
|
||||
endpointDetail,
|
||||
detailViewTopSearch
|
||||
detailViewTopSearch,
|
||||
batchEditEndpoint
|
||||
},
|
||||
mixins: [dataListMixin, detailViewMixin, routerPathParams],
|
||||
data () {
|
||||
@@ -885,7 +891,7 @@ export default {
|
||||
if (this.$route.query && this.$route.query.assetId) {
|
||||
this.object = {
|
||||
...this.newObject(),
|
||||
assetId: JSON.stringify(this.$route.query.assetId),
|
||||
assetId: JSON.stringify(this.$route.query.assetId)
|
||||
}
|
||||
this.rightBox.show = true
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user