break60
4 years ago
11 changed files with 568 additions and 6 deletions
@ -0,0 +1,192 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
<template> |
||||
<m-popup |
||||
ref="popup" |
||||
:ok-text="item ? $t('Edit') : $t('Submit')" |
||||
:nameText="item ? $t('Edit alarm group') : $t('Create alarm group')" |
||||
@ok="_ok" |
||||
@close="close"> |
||||
<template slot="content"> |
||||
<div class="create-warning-model"> |
||||
<m-list-box-f> |
||||
<template slot="name"><strong>*</strong>{{$t('Alarm instance name')}}</template> |
||||
<template slot="content"> |
||||
<el-input |
||||
type="input" |
||||
v-model="groupName" |
||||
maxlength="60" |
||||
size="small" |
||||
:placeholder="$t('Please enter group name')"> |
||||
</el-input> |
||||
</template> |
||||
</m-list-box-f> |
||||
<m-list-box-f> |
||||
<template slot="name"><strong>*</strong>{{$t('Select plugin')}}</template> |
||||
<template slot="content"> |
||||
<el-select v-model="pluginDefineId" size="small" style="width: 100%" @change="changePlugin"> |
||||
<el-option |
||||
v-for="items in pulginInstance" |
||||
:key="items.id" |
||||
:value="items.id" |
||||
:label="items.pluginName"> |
||||
</el-option> |
||||
</el-select> |
||||
</template> |
||||
</m-list-box-f> |
||||
<div> |
||||
<template> |
||||
<div class="alertForm"><form-create v-model="$f" :rule="rule" :option="{submitBtn:false}" size="mini"></form-create></div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</m-popup> |
||||
</template> |
||||
<script> |
||||
import i18n from '@/module/i18n' |
||||
import store from '@/conf/home/store' |
||||
import mPopup from '@/module/components/popup/popup' |
||||
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||
|
||||
export default { |
||||
name: 'create-warning', |
||||
data () { |
||||
return { |
||||
store, |
||||
groupName: '', |
||||
pluginDefineId: null, |
||||
description: '', |
||||
options: [{ code: `${i18n.$t('Email')}`, id: 'EMAIL' }, { code: `${i18n.$t('SMS')}`, id: 'SMS' }], |
||||
$f: {}, |
||||
rule: [ |
||||
{ |
||||
type: 'input', |
||||
field: 'dingTalkWebHook', |
||||
className: 'user-name-dom', |
||||
title: 'dingtalk.webhook', |
||||
value: null, |
||||
props: { |
||||
placeholder: '请输入用户名称！', |
||||
size: 'small', |
||||
disabled: false, |
||||
readonly: false, |
||||
clearable: true |
||||
}, |
||||
validate: [ |
||||
{ |
||||
trigger: 'blur', |
||||
required: true, |
||||
message: '用户名称不能为空！' |
||||
} |
||||
] |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
props: { |
||||
item: Object, |
||||
pulginInstance: Array |
||||
}, |
||||
methods: { |
||||
_ok () { |
||||
if (this._verification()) { |
||||
// The name is not verified |
||||
if (this.item && this.item.groupName === this.groupName) { |
||||
this._submit() |
||||
return |
||||
} |
||||
|
||||
// Verify username |
||||
this.store.dispatch('security/verifyName', { |
||||
type: 'alertgroup', |
||||
groupName: this.groupName |
||||
}).then(res => { |
||||
this._submit() |
||||
}).catch(e => { |
||||
this.$message.error(e.msg || '') |
||||
}) |
||||
} |
||||
}, |
||||
_verification () { |
||||
// group name |
||||
if (!this.groupName.replace(/\s*/g, '')) { |
||||
this.$message.warning(`${i18n.$t('Please enter group name')}`) |
||||
return false |
||||
} |
||||
return true |
||||
}, |
||||
changePlugin () { |
||||
console.log(this.rule) |
||||
console.log(this.pluginDefineId) |
||||
this.store.dispatch('security/getUiPluginsByID', { |
||||
pluginId: this.pluginDefineId |
||||
}).then(res => { |
||||
console.log(res) |
||||
}).catch(e => { |
||||
this.$message.error(e.msg || '') |
||||
}) |
||||
}, |
||||
_submit () { |
||||
let param = { |
||||
groupName: this.groupName, |
||||
groupType: this.groupType, |
||||
description: this.description |
||||
} |
||||
if (this.item) { |
||||
param.id = this.item.id |
||||
} |
||||
this.$refs.popup.spinnerLoading = true |
||||
this.store.dispatch(`security/${this.item ? 'updateAlertgrou' : 'createAlertgrou'}`, param).then(res => { |
||||
this.$emit('onUpdate') |
||||
this.$message.success(res.msg) |
||||
setTimeout(() => { |
||||
this.$refs.popup.spinnerLoading = false |
||||
}, 800) |
||||
}).catch(e => { |
||||
this.$message.error(e.msg || '') |
||||
this.$refs.popup.spinnerLoading = false |
||||
}) |
||||
}, |
||||
close () { |
||||
this.$emit('close') |
||||
} |
||||
}, |
||||
watch: {}, |
||||
created () { |
||||
if (this.item) { |
||||
this.groupName = this.item.groupName |
||||
this.groupType = this.item.groupType |
||||
this.description = this.item.description |
||||
} |
||||
}, |
||||
mounted () { |
||||
}, |
||||
components: { mPopup, mListBoxF } |
||||
} |
||||
</script> |
||||
<style lang="scss" rel="stylesheet/scss"> |
||||
.alertForm { |
||||
.el-form-item__label { |
||||
width: 144px!important; |
||||
} |
||||
.el-form-item__content { |
||||
margin-left: 144px!important; |
||||
width: calc(100% - 162px); |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,131 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
<template> |
||||
<div class="list-model"> |
||||
<div class="table-box"> |
||||
<el-table :data="list" size="mini" style="width: 100%"> |
||||
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column> |
||||
<el-table-column prop="groupName" :label="$t('Group Name')"></el-table-column> |
||||
<el-table-column :label="$t('Group Type')" width="100"> |
||||
<template slot-scope="scope"> |
||||
{{scope.row.groupType === 'EMAIL' ? `${$t('Email')}` : `${$t('SMS')}`}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="description" :label="$t('Remarks')" width="200"></el-table-column> |
||||
<el-table-column :label="$t('Create Time')" width="140"> |
||||
<template slot-scope="scope"> |
||||
<span>{{scope.row.createTime | formatDate}}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column :label="$t('Update Time')" width="140"> |
||||
<template slot-scope="scope"> |
||||
<span>{{scope.row.updateTime | formatDate}}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column :label="$t('Operation')" width="130"> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip :content="$t('Edit')" placement="top"> |
||||
<span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" circle></el-button></span> |
||||
</el-tooltip> |
||||
<el-tooltip :content="$t('delete')" placement="top"> |
||||
<el-popconfirm |
||||
:confirmButtonText="$t('Confirm')" |
||||
:cancelButtonText="$t('Cancel')" |
||||
icon="el-icon-info" |
||||
iconColor="red" |
||||
:title="$t('Delete?')" |
||||
@onConfirm="_delete(scope.row,scope.row.id)" |
||||
> |
||||
<el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference" :disabled="scope.row.id==1?true: false"></el-button> |
||||
</el-popconfirm> |
||||
</el-tooltip> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { mapActions } from 'vuex' |
||||
|
||||
export default { |
||||
name: 'user-list', |
||||
data () { |
||||
return { |
||||
list: [], |
||||
transferDialog: false, |
||||
item: {} |
||||
} |
||||
}, |
||||
props: { |
||||
alertgroupList: Array, |
||||
pageNo: Number, |
||||
pageSize: Number |
||||
}, |
||||
methods: { |
||||
...mapActions('security', ['deleteAlertgrou', 'grantAuthorization']), |
||||
_delete (item, i) { |
||||
this.deleteAlertgrou({ |
||||
id: item.id |
||||
}).then(res => { |
||||
this.$emit('on-update') |
||||
this.$message.success(res.msg) |
||||
}).catch(e => { |
||||
this.$message.error(e.msg || '') |
||||
}) |
||||
}, |
||||
_edit (item) { |
||||
this.$emit('on-edit', item) |
||||
}, |
||||
onUpdate (userIds) { |
||||
this._grantAuthorization('alert-group/grant-user', { |
||||
userIds: userIds, |
||||
alertgroupId: this.item.id |
||||
}) |
||||
this.transferDialog = false |
||||
}, |
||||
close () { |
||||
this.transferDialog = false |
||||
}, |
||||
|
||||
_grantAuthorization (api, param) { |
||||
this.grantAuthorization({ |
||||
api: api, |
||||
param: param |
||||
}).then(res => { |
||||
this.$message.success(res.msg) |
||||
}).catch(e => { |
||||
this.$message.error(e.msg || '') |
||||
}) |
||||
} |
||||
}, |
||||
watch: { |
||||
alertgroupList (a) { |
||||
this.list = [] |
||||
setTimeout(() => { |
||||
this.list = a |
||||
}) |
||||
} |
||||
}, |
||||
created () { |
||||
this.list = this.alertgroupList |
||||
}, |
||||
mounted () { |
||||
}, |
||||
components: {} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,169 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
<template> |
||||
<m-list-construction :title="$t('Warning group manage')"> |
||||
<template slot="conditions"> |
||||
<m-conditions @on-conditions="_onConditions"> |
||||
<template slot="button-group" v-if="isADMIN"> |
||||
<el-button size="mini" @click="_create('')">{{$t('Create alarm group')}}</el-button> |
||||
<el-dialog |
||||
:visible.sync="createWarningDialog" |
||||
width="auto"> |
||||
<m-create-warning :item="item" :pulginInstance="pulginInstance" @onUpdate="onUpdate" @close="close"></m-create-warning> |
||||
</el-dialog> |
||||
</template> |
||||
</m-conditions> |
||||
</template> |
||||
<template slot="content"> |
||||
<template v-if="alertgroupList.length || total>0"> |
||||
<m-list @on-edit="_onEdit" |
||||
@on-update="_onUpdate" |
||||
:alertgroup-list="alertgroupList" |
||||
:page-no="searchParams.pageNo" |
||||
:page-size="searchParams.pageSize"> |
||||
</m-list> |
||||
<div class="page-box"> |
||||
<el-pagination |
||||
background |
||||
@current-change="_page" |
||||
@size-change="_pageSize" |
||||
:page-size="searchParams.pageSize" |
||||
:current-page.sync="searchParams.pageNo" |
||||
:page-sizes="[10, 30, 50]" |
||||
layout="sizes, prev, pager, next, jumper" |
||||
:total="total"> |
||||
</el-pagination> |
||||
</div> |
||||
</template> |
||||
<template v-if="!alertgroupList.length && total<=0"> |
||||
<m-no-data></m-no-data> |
||||
</template> |
||||
<m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin> |
||||
</template> |
||||
</m-list-construction> |
||||
</template> |
||||
<script> |
||||
import _ from 'lodash' |
||||
import { mapActions } from 'vuex' |
||||
import mList from './_source/list' |
||||
import store from '@/conf/home/store' |
||||
import mSpin from '@/module/components/spin/spin' |
||||
import mCreateWarning from './_source/createWarning' |
||||
import mNoData from '@/module/components/noData/noData' |
||||
import listUrlParamHandle from '@/module/mixin/listUrlParamHandle' |
||||
import mConditions from '@/module/components/conditions/conditions' |
||||
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||
|
||||
export default { |
||||
name: 'warning-groups-index', |
||||
data () { |
||||
return { |
||||
total: null, |
||||
isLoading: false, |
||||
alertgroupList: [], |
||||
searchParams: { |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
searchVal: '' |
||||
}, |
||||
isLeft: true, |
||||
isADMIN: store.state.user.userInfo.userType === 'ADMIN_USER', |
||||
createWarningDialog: false, |
||||
item: {}, |
||||
pulginInstance: [] |
||||
} |
||||
}, |
||||
mixins: [listUrlParamHandle], |
||||
props: {}, |
||||
methods: { |
||||
...mapActions('security', ['getAlertgroupP', 'getPlugins']), |
||||
/** |
||||
* Inquire |
||||
*/ |
||||
_onConditions (o) { |
||||
this.searchParams = _.assign(this.searchParams, o) |
||||
this.searchParams.pageNo = 1 |
||||
}, |
||||
_page (val) { |
||||
this.searchParams.pageNo = val |
||||
}, |
||||
_pageSize (val) { |
||||
this.searchParams.pageSize = val |
||||
}, |
||||
_onUpdate () { |
||||
this._debounceGET() |
||||
}, |
||||
_onEdit (item) { |
||||
this._create(item) |
||||
}, |
||||
_create (item) { |
||||
this.getPlugins({ pluginType: 'ALERT' }).then(res => { |
||||
this.pulginInstance = res |
||||
}).catch(e => { |
||||
this.$message.error(e.msg) |
||||
}) |
||||
this.item = item |
||||
this.createWarningDialog = true |
||||
}, |
||||
|
||||
onUpdate () { |
||||
this._debounceGET('false') |
||||
this.createWarningDialog = false |
||||
}, |
||||
|
||||
close () { |
||||
this.createWarningDialog = false |
||||
}, |
||||
|
||||
_getList (flag) { |
||||
if (sessionStorage.getItem('isLeft') === 0) { |
||||
this.isLeft = false |
||||
} else { |
||||
this.isLeft = true |
||||
} |
||||
this.isLoading = !flag |
||||
this.getAlertgroupP(this.searchParams).then(res => { |
||||
if (this.searchParams.pageNo > 1 && res.totalList.length === 0) { |
||||
this.searchParams.pageNo = this.searchParams.pageNo - 1 |
||||
} else { |
||||
this.alertgroupList = [] |
||||
this.alertgroupList = res.totalList |
||||
this.total = res.total |
||||
this.isLoading = false |
||||
} |
||||
}).catch(e => { |
||||
this.isLoading = false |
||||
}) |
||||
} |
||||
}, |
||||
watch: { |
||||
// router |
||||
'$route' (a) { |
||||
// url no params get instance list |
||||
this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo |
||||
} |
||||
}, |
||||
created () { |
||||
}, |
||||
mounted () { |
||||
}, |
||||
beforeDestroy () { |
||||
sessionStorage.setItem('isLeft', 1) |
||||
}, |
||||
components: { mList, mListConstruction, mConditions, mSpin, mNoData, mCreateWarning } |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue