149 lines
3.5 KiB
Vue
149 lines
3.5 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="filter-container">
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
@click="handleCreate('IP')"
|
|
>
|
|
{{ $t('pages.requestBlacklist.action.addIp') }}
|
|
</el-button>
|
|
<el-button
|
|
class="filter-item"
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
@click="handleCreate('PHONE_MODEL')"
|
|
>
|
|
{{ $t('pages.requestBlacklist.action.addPhoneModel') }}
|
|
</el-button>
|
|
</div>
|
|
<div v-loading="listLoading" class="content">
|
|
<div v-for="(item, index) in list" :key="index">
|
|
<div class="item">
|
|
{{ item }}
|
|
<i class="el-icon-delete-solid" @click="handlDel(item)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
requestBlackList,
|
|
addBlackListPhoneModel,
|
|
addBlackListIP,
|
|
delBlackList
|
|
} from '@/api/sys'
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
listQuery: {
|
|
cursor: 1,
|
|
limit: 20,
|
|
sysOrigin: '',
|
|
startTime: '',
|
|
endTime: ''
|
|
},
|
|
listLoading: true
|
|
}
|
|
},
|
|
created() {
|
|
const that = this
|
|
that.renderData()
|
|
},
|
|
methods: {
|
|
renderData() {
|
|
const that = this
|
|
that.listLoading = true
|
|
requestBlackList()
|
|
.then(res => {
|
|
that.listLoading = false
|
|
const { body } = res
|
|
that.list = body || []
|
|
})
|
|
.catch(er => {
|
|
that.listLoading = false
|
|
})
|
|
},
|
|
handlDel(content) {
|
|
this.$confirm(
|
|
this.$t('pages.requestBlacklist.confirm.delete'),
|
|
this.$t('pages.requestBlacklist.confirm.title'),
|
|
{
|
|
type: 'warning'
|
|
}
|
|
)
|
|
.then(() => {
|
|
delBlackList(content).then(res => {
|
|
this.$opsMessage.success()
|
|
this.renderData()
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
handleCreate(type) {
|
|
const that = this
|
|
let tips = this.$t('pages.requestBlacklist.prompt.invalidType')
|
|
if (type === 'IP') {
|
|
tips = this.$t('pages.requestBlacklist.prompt.ipTip')
|
|
}
|
|
|
|
if (type === 'PHONE_MODEL') {
|
|
tips = this.$t('pages.requestBlacklist.prompt.phoneModelTip')
|
|
}
|
|
this.$prompt(tips, this.$t('pages.requestBlacklist.prompt.title'), {
|
|
confirmButtonText: this.$t('pages.requestBlacklist.prompt.confirm'),
|
|
cancelButtonText: this.$t('pages.requestBlacklist.prompt.cancel')
|
|
})
|
|
.then(({ value }) => {
|
|
if (type === 'IP') {
|
|
addBlackListIP(value)
|
|
.then(res => {
|
|
that.$opsMessage.success()
|
|
that.renderData()
|
|
})
|
|
.catch(er => {})
|
|
return
|
|
}
|
|
|
|
if (type === 'PHONE_MODEL') {
|
|
addBlackListPhoneModel(value)
|
|
.then(res => {
|
|
that.$opsMessage.success()
|
|
that.renderData()
|
|
})
|
|
.catch(er => {})
|
|
return
|
|
}
|
|
that.$opsMessage.fail(this.$t('pages.requestBlacklist.message.paramTypeError'))
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
.item {
|
|
background-color: #9e9ee64f;
|
|
color: #909399;
|
|
margin-bottom: 5px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
i {
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
color: #fa0e0e;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 5px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|