Browse Source
* [Improvement-3878]Tenant list delete user name * [Improvement-3878][ui]Fix the list style * [Improvement][ui] List vacancy optimization and icon icon repair * Add font-awesome license and delete ans-ui license * Introduce remixicon * Plug-in front-end function * optimizationpull/3/MERGE
break60
4 years ago
committed by
GitHub
20 changed files with 663 additions and 231 deletions
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2018 xaboy |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,197 @@ |
|||||||
|
/* |
||||||
|
* 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 Instance') : $t('Create Alarm Instance')" |
||||||
|
@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="instanceName" |
||||||
|
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" disabled="true" v-if="item.id"> |
||||||
|
<el-option |
||||||
|
v-for="items in pulginInstance" |
||||||
|
:key="items.id" |
||||||
|
:value="items.id" |
||||||
|
:label="items.pluginName"> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<el-select v-model="pluginDefineId" size="small" style="width: 100%" @change="changePlugin" v-else> |
||||||
|
<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, |
||||||
|
instanceName: '', |
||||||
|
pluginDefineId: null, |
||||||
|
$f: {}, |
||||||
|
rule: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
item: Object, |
||||||
|
pulginInstance: Array |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
_ok () { |
||||||
|
if (this._verification()) { |
||||||
|
// The name is not verified |
||||||
|
if (this.item && this.item.instanceName === this.instanceName) { |
||||||
|
this._submit() |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
// Verify username |
||||||
|
this.store.dispatch('security/verifyName', { |
||||||
|
type: 'alarmInstance', |
||||||
|
instanceName: this.instanceName |
||||||
|
}).then(res => { |
||||||
|
this._submit() |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
_verification () { |
||||||
|
// group name |
||||||
|
if (!this.instanceName.replace(/\s*/g, '')) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter group name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
return true |
||||||
|
}, |
||||||
|
// Select plugin |
||||||
|
changePlugin () { |
||||||
|
this.store.dispatch('security/getUiPluginById', { |
||||||
|
pluginId: this.pluginDefineId |
||||||
|
}).then(res => { |
||||||
|
this.rule = JSON.parse(res.pluginParams) |
||||||
|
this.rule.forEach(item => { |
||||||
|
if (item.title.indexOf('$t') !== -1) { |
||||||
|
item.title = $t(item.field) |
||||||
|
} |
||||||
|
}) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}) |
||||||
|
}, |
||||||
|
_submit () { |
||||||
|
this.$f.rule.forEach(item => { |
||||||
|
item.title = item.name |
||||||
|
}) |
||||||
|
let param = { |
||||||
|
instanceName: this.instanceName, |
||||||
|
pluginDefineId: this.pluginDefineId, |
||||||
|
pluginInstanceParams: JSON.stringify(this.$f.rule) |
||||||
|
} |
||||||
|
if (this.item) { |
||||||
|
param.alertPluginInstanceId = this.item.id |
||||||
|
param.pluginDefineId = null |
||||||
|
} |
||||||
|
this.$refs.popup.spinnerLoading = true |
||||||
|
this.store.dispatch(`security/${this.item ? 'updateAlertPluginInstance' : 'createAlertPluginInstance'}`, 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 () { |
||||||
|
let pluginInstanceParams = [] |
||||||
|
if (this.item) { |
||||||
|
this.instanceName = this.item.instanceName |
||||||
|
this.pluginDefineId = this.item.pluginDefineId |
||||||
|
JSON.parse(this.item.pluginInstanceParams).forEach(item => { |
||||||
|
if (item.title.indexOf('$t') !== -1) { |
||||||
|
item.title = $t(item.field) |
||||||
|
} |
||||||
|
pluginInstanceParams.push(item) |
||||||
|
}) |
||||||
|
this.rule = pluginInstanceParams |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
}, |
||||||
|
components: { mPopup, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.alertForm { |
||||||
|
label { |
||||||
|
span { |
||||||
|
font-weight: 10!important; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-form-item__label { |
||||||
|
width: 144px!important; |
||||||
|
color: #606266!important; |
||||||
|
} |
||||||
|
.el-form-item__content { |
||||||
|
margin-left: 144px!important; |
||||||
|
width: calc(100% - 162px); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
/* |
||||||
|
* 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="instanceName" :label="$t('Alarm instance name')"></el-table-column> |
||||||
|
<el-table-column :label="$t('Create Time')"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{scope.row.createTime | formatDate}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column :label="$t('Update Time')"> |
||||||
|
<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"></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', ['deletAelertPluginInstance']), |
||||||
|
_delete (item, i) { |
||||||
|
this.deletAelertPluginInstance({ |
||||||
|
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) |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.transferDialog = false |
||||||
|
} |
||||||
|
}, |
||||||
|
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 instance 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 Instance')}}</el-button> |
||||||
|
<el-dialog |
||||||
|
:visible.sync="createWarningDialog" |
||||||
|
width="45%"> |
||||||
|
<m-create-warning-instance :item="item" :pulginInstance="pulginInstance" @onUpdate="onUpdate" @close="close"></m-create-warning-instance> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
</m-conditions> |
||||||
|
</template> |
||||||
|
<template slot="content"> |
||||||
|
<template v-if="alertgroupList!==null || 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===null && 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 mCreateWarningInstance from './_source/createWarningInstance' |
||||||
|
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-instance-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', ['queryAlertPluginInstanceListPaging', '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.queryAlertPluginInstanceListPaging(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, mCreateWarningInstance } |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue