Skip to content

C
center-applications
提交 b154b6a3 authored 作者: haodaking's avatar haodaking
浏览文件
操作

feat: 新增事件通知

上级 da782ef1
隐藏空白字符变更
内嵌 并排
正在显示 包含 512 行增加 和 7 行删除
package-lock.json
浏览文件 @ b154b6a3
......@@ -12,6 +12,7 @@
"lodash": "^4.17.21",
"query-string": "^7.1.0",
"vue": "^2.6.14",
"vue-json-viewer": "^2.2.21",
"vue-router": "^3.5.3",
"vuex": "^3.6.2"
},
......@@ -2019,6 +2020,16 @@
"fsevents": "~2.3.2"
}
},
"node_modules/clipboard": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
"dependencies": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"node_modules/co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
......@@ -2260,6 +2271,11 @@
"node": ">= 6"
}
},
"node_modules/delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"node_modules/depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
......@@ -3625,6 +3641,14 @@
"node": ">=4"
}
},
"node_modules/good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"dependencies": {
"delegate": "^3.1.2"
}
},
"node_modules/graceful-fs": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
......@@ -5216,6 +5240,11 @@
"get-ready": "~1.0.0"
}
},
"node_modules/select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
......@@ -5670,6 +5699,11 @@
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},
"node_modules/tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"node_modules/to-arraybuffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
......@@ -6024,6 +6058,17 @@
"node": ">=6.0.0"
}
},
"node_modules/vue-json-viewer": {
"version": "2.2.21",
"resolved": "https://registry.npmjs.org/vue-json-viewer/-/vue-json-viewer-2.2.21.tgz",
"integrity": "sha512-FZL5pZM63nJjAWqOIkiA9KtAesIhUwmFkAaBZ4eCIPb0jDczL59bHgbdJOkvP7rsFVuQox5SHAxj7O7SrJrTvw==",
"dependencies": {
"clipboard": "^2.0.4"
},
"peerDependencies": {
"vue": "^2.6.9"
}
},
"node_modules/vue-router": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
......@@ -7827,6 +7872,16 @@
"readdirp": "~3.6.0"
}
},
"clipboard": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
......@@ -8001,6 +8056,11 @@
"esprima": "^4.0.0"
}
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
......@@ -9003,6 +9063,14 @@
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
"dev": true
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
......@@ -10228,6 +10296,11 @@
"get-ready": "~1.0.0"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
......@@ -10586,6 +10659,11 @@
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"to-arraybuffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
......@@ -10863,6 +10941,14 @@
}
}
},
"vue-json-viewer": {
"version": "2.2.21",
"resolved": "https://registry.npmjs.org/vue-json-viewer/-/vue-json-viewer-2.2.21.tgz",
"integrity": "sha512-FZL5pZM63nJjAWqOIkiA9KtAesIhUwmFkAaBZ4eCIPb0jDczL59bHgbdJOkvP7rsFVuQox5SHAxj7O7SrJrTvw==",
"requires": {
"clipboard": "^2.0.4"
}
},
"vue-router": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
......
package.json
浏览文件 @ b154b6a3
......@@ -15,6 +15,7 @@
"lodash": "^4.17.21",
"query-string": "^7.1.0",
"vue": "^2.6.14",
"vue-json-viewer": "^2.2.21",
"vue-router": "^3.5.3",
"vuex": "^3.6.2"
},
......
src/components/layout/Header.vue
浏览文件 @ b154b6a3
......@@ -4,7 +4,7 @@
<div class="logo">
<router-link to="/"><img src="https://zws-imgs-pub.ezijing.com/pc/base/ezijing-logo-white.svg" /></router-link>
</div>
<div class="app-name" v-if="app && sidebar">{{ app.name }}</div>
<div class="app-name" v-if="hasTitle && app">{{ app.name }}</div>
</div>
<div class="app-header-right">
<el-dropdown>
......@@ -33,7 +33,7 @@
<script>
export default {
name: 'AppHeader',
props: { sidebar: { type: Boolean, default: true } },
props: { hasTitle: { type: Boolean, default: true } },
computed: {
user() {
return this.$store.state.user
......
src/components/layout/Index.vue
浏览文件 @ b154b6a3
<template>
<div class="app-layout">
<app-header :sidebar="sidebar"></app-header>
<app-header :hasTitle="hasTitle"></app-header>
<div class="app-layout-container">
<app-aside v-if="sidebar"></app-aside>
<app-main></app-main>
......@@ -15,7 +15,7 @@ import AppMain from './Main.vue'
export default {
name: 'AppLayout',
props: { sidebar: { type: Boolean, default: true } },
props: { sidebar: { type: Boolean, default: true }, hasTitle: { type: Boolean, default: true } },
components: { AppHeader, AppAside, AppMain }
}
</script>
......
src/modules/app/api.js
浏览文件 @ b154b6a3
......@@ -64,3 +64,46 @@ export function createUser(appid, data) {
export function createAppAdminUsers(appid, data) {
return httpRequest.post(`/api/permissions/admin/v1/${appid}/application/assign/users-to-app`, data)
}
/**
* 获取事件列表
*/
export function getEventList(params) {
return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/events`, { params })
}
/**
* 创建事件
*/
export function createEvent(appid, data) {
return httpRequest.post(`/api/permissions/admin/v1/${appid}/event/create`, data)
}
/**
* 更新事件
*/
export function updateEvent(id, data) {
return httpRequest.put(`/api/permissions/admin/v1/event/${id}/update`, data)
}
/**
* 删除事件
*/
export function deleteEvents(data) {
return httpRequest.post('/api/permissions/admin/v1/event/batch-delete', data)
}
/**
* 获取事件详情
*/
export function getEvent(params) {
return httpRequest.get(`/api/permissions/admin/v1/event/${params.id}/detail`, { params })
}
/**
* 刷新事件token
*/
export function refreshEventToken(params) {
return httpRequest.patch(`/api/permissions/admin/v1/event/${params.id}/refresh-token`, { params })
}
/**
* 获取获取事件回调记录列表
*/
export function getEventRecordList(params) {
return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/event/records`, { params })
}
src/modules/app/components/EventNotification.vue 0 → 100644
浏览文件 @ b154b6a3
<template>
<app-card title="事件通知">
<app-list v-bind="tableOptions" ref="list">
<template #header-aside>
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加事件</el-button>
<el-button icon="el-icon-coin" @click="handleView">接口调用明细</el-button>
</template>
<template v-slot:table-type="{ row }">
<el-tag v-for="(item, index) in row.typeList" :key="index" class="type-tag">{{ item }}</el-tag>
</template>
<template v-slot:table-token="{ row }">
{{ row.token }} <el-button type="text" icon="el-icon-refresh" @click="onRefreshToken(row)"></el-button>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleUpdate(row)">修改</el-button>
<el-button type="text" @click="onRemove(row)">删除</el-button>
</template>
</app-list>
<event-notification-editform
:visible.sync="visible"
:isEdit="isEdit"
:data="editRaw"
@success="handleSuccess"
v-if="visible"
></event-notification-editform>
</app-card>
</template>
<script>
import { getEventList, deleteEvents, refreshEventToken } from '../api'
export default {
components: {
EventNotificationEditform: () => import('./EventNotificationEditform.vue')
},
data() {
return {
visible: false,
isEdit: false, // 是否是编辑状态
editRaw: {} // 编辑的数据
}
},
computed: {
appid() {
return this.$route.params.id
},
tableOptions() {
return {
remote: {
httpRequest: getEventList,
params: { app_id: this.appid, name: '', url: '' },
callback(list) {
return list.map(item => {
const typeList = item.type.split(',') || []
return { ...item, typeList }
})
}
},
filters: [
{
type: 'input',
prop: 'name',
placeholder: '事件名称'
},
{
type: 'input',
prop: 'url',
placeholder: '回调URL'
}
],
columns: [
{ label: '事件名称', prop: 'name', width: 200 },
{ label: '回调地址', prop: 'url' },
{ label: '事件类型', prop: 'type', slots: 'table-type' },
{ label: 'Token', prop: 'token', slots: 'table-token', width: 220 },
{ label: '更新时间', prop: 'updated_at', width: 170 },
{ label: '操作', slots: 'table-x', align: 'center', width: 120, fixed: 'right' }
]
}
}
},
methods: {
// 创建
handleCreate() {
this.isEdit = false
this.editRaw = {}
this.visible = true
},
// 编辑
handleUpdate(row) {
this.isEdit = true
this.editRaw = row
this.visible = true
},
// 更新成功
handleSuccess() {
this.$refs.list.refetch()
},
// 查看
handleView() {
this.$router.push({ name: 'appEventView', params: { appid: this.appid } })
},
// 删除
onRemove(row) {
this.$confirm('事件通知删除请谨慎操作，确定删除？', '删除事件通知', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.handleRemove(row)
})
},
// 删除
handleRemove(row) {
const ids = [row.id]
deleteEvents({ ids }).then(res => {
this.$message({ type: 'success', message: '删除成功' })
this.$refs.list.refetch()
})
},
// 刷新Token
onRefreshToken(row) {
this.$confirm('Token刷新请谨慎操作，确定刷新？', '刷新Token通知', {
confirmButtonText: '刷新',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.handleRefreshToken(row)
})
},
// 刷新Token
handleRefreshToken(row) {
refreshEventToken({ id: row.id }).then(res => {
this.$message({ type: 'success', message: '删除成功' })
this.$refs.list.refetch()
})
}
}
}
</script>
<style lang="scss" scoped>
.type-tag {
margin-right: 5px;
margin-bottom: 5px;
}
</style>
src/modules/app/components/EventNotificationEditform.vue 0 → 100644
浏览文件 @ b154b6a3
<template>
<el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
<el-form ref="form" :model="form" :rules="rules" label-position="top">
<el-form-item label="事件名称" prop="name">
<el-input v-model="form.name" clearable></el-input>
</el-form-item>
<el-form-item label="回调URL" prop="url">
<el-input type="textarea" v-model="form.url" clearable></el-input>
</el-form-item>
<el-form-item label="事件类型" prop="type">
<el-tree
:data="eventTypes"
show-checkbox
node-key="tag"
:props="{ children: 'list', label: 'name' }"
:default-checked-keys="form.typeList"
ref="tree"
>
</el-tree>
</el-form-item>
</el-form>
<template #footer>
<el-button type="text" @click="onCancel">取消</el-button>&nbsp;&nbsp;
<el-button type="primary" size="medium" @click="onPrimary">保存</el-button>
</template>
</el-dialog>
</template>
<script>
import { createEvent, updateEvent } from '../api.js'
export default {
props: {
isEdit: { type: Boolean, default: false },
data: { type: Object, default: () => ({}) }
},
data() {
return {
form: { name: '', url: '', type: '' },
rules: {
name: [{ required: true, message: '请输入事件名称', trigger: 'blur' }],
url: [
{ required: true, message: '请输入事件回调地址', trigger: 'blur' },
{ pattern: /(http|https):\/\/([\w.]+\/?)\S*/, message: '请输入正确的回调地址', trigger: 'blur' }
],
type: [{ required: true, message: '请选择事件类型', trigger: 'blur' }]
}
}
},
watch: {
data: {
deep: true,
immediate: true,
handler(data) {
this.form = Object.assign({}, this.form, data)
}
}
},
computed: {
title() {
return this.isEdit ? '修改事件' : '添加事件'
},
appid() {
return this.$route.params.id
},
eventTypes() {
return this.$store.state.eventTypes
}
},
methods: {
// 取消
onCancel() {
this.$emit('update:visible', false)
},
// 确定
onPrimary() {
this.$refs.form.validate().then(() => {
this.isEdit ? this.edit() : this.create()
})
},
// 添加事件
create() {
const checkedKeys = this.$refs.tree.getCheckedKeys(true)
const params = Object.assign({}, this.form, { type: checkedKeys.join(',') })
createEvent(this.appid, params).then(res => {
this.$message.success('添加成功')
this.$emit('update:visible', false)
this.$emit('success', res.data)
})
},
// 编辑事件
edit() {
const checkedKeys = this.$refs.tree.getCheckedKeys(true)
const params = Object.assign({}, this.form, { type: checkedKeys.join(',') })
updateEvent(this.form.id, params).then(res => {
this.$message.success('修改成功')
this.$emit('update:visible', false)
this.$emit('success', res.data)
})
}
}
}
</script>
src/modules/app/index.js
浏览文件 @ b154b6a3
import AppLayout from '@/components/layout/Index.vue'
const routes = [
{
path: '/app',
component: AppLayout,
props: { sidebar: false, hasTitle: false },
meta: { title: '应用管理' },
children: [
{
path: '',
component: () => import('./views/List.vue'),
meta: { title: '应用列表' }
}
]
},
{
path: '/app',
component: AppLayout,
props: { sidebar: false },
meta: { title: '应用管理' },
children: [
{ path: '', component: () => import('./views/List.vue'), meta: { title: '应用列表' } },
{
name: 'appView',
path: ':id',
component: () => import('./views/Detail.vue'),
props: true,
meta: { title: '应用详情' }
},
{
name: 'appEventView',
path: ':appid/event',
component: () => import('./views/EventView.vue'),
props: true,
meta: { title: '接口调用明细' }
}
]
}
......
src/modules/app/views/Detail.vue
浏览文件 @ b154b6a3
......@@ -26,6 +26,7 @@
<el-descriptions-item label="创建者ID">{{ createUser.id }}</el-descriptions-item>
</el-descriptions>
</app-card>
<event-notification></event-notification>
<admin-users></admin-users>
<editform
:visible.sync="visible"
......@@ -39,11 +40,12 @@
<script>
import AdminUsers from '../components/AdminUsers.vue'
import EventNotification from '../components/EventNotification.vue'
import { getApp, deleteApp, updateAppSecretKey } from '../api.js'
export default {
props: { id: { type: String } },
components: { Editform: () => import('../components/Editform.vue'), AdminUsers },
components: { Editform: () => import('../components/Editform.vue'), AdminUsers, EventNotification },
data() {
return {
visible: false,
......
src/modules/app/views/EventView.vue 0 → 100644
浏览文件 @ b154b6a3
<template>
<app-card title="接口调用明细">
<app-list v-bind="tableOptions" ref="list">
<template v-slot:table-context="{ row }">
<json-viewer :value="row.context" :expand-depth="5" copyable boxed style="margin: 0 2px"></json-viewer>
</template>
</app-list>
</app-card>
</template>
<script>
import { getEventRecordList } from '../api'
import JsonViewer from 'vue-json-viewer'
export default {
components: { JsonViewer },
data() {
return {
visible: false,
isEdit: false, // 是否是编辑状态
editRaw: {} // 编辑的数据
}
},
computed: {
appid() {
return this.$route.params.appid
},
tableOptions() {
return {
remote: {
httpRequest: getEventRecordList,
params: { app_id: this.appid, search_str: '' },
callback(list) {
return list.map(item => {
const typeList = item.type.split(',') || []
return { ...item, typeList }
})
}
},
filters: [
{
type: 'input',
prop: 'search_str',
placeholder: '搜索'
}
],
columns: [
{ type: 'expand', slots: 'table-context' },
{ label: '时间', prop: 'updated_at' },
{ label: '状态', prop: 'context.response' },
{ label: '事件名称', prop: 'name' },
{ label: '事件类型', prop: 'context.event' },
{ label: '接口地址', prop: 'url' }
]
}
}
}
}
</script>
src/store/index.js
浏览文件 @ b154b6a3
......@@ -8,7 +8,55 @@ const store = new Vuex.Store({
state: {
user: {},
appid: localStorage.getItem('appid') || '',
app: {}
app: {},
eventTypes: [
{
name: '应用事件',
tag: 'app',
desc: '包含应用的修改事件',
list: [{ name: '应用修改', tag: 'app.updated', desc: '在统一权限系统修改应用详情时触发事件通知' }]
},
{
name: '用户事件',
tag: 'user',
desc: '包含用户的添加、停用、启用、角色变更事件',
list: [
{ name: '用户添加(绑定)', tag: 'user.binded', desc: '在统一权限系统添加用户时触发事件通知' },
{ name: '用户停用', tag: 'user.stoped', desc: '在统一权限系统停用用户时触发事件通知' },
{ name: '用户启用', tag: 'user.enable', desc: '在统一权限系统启用用户时触发事件通知' },
{
name: '用户角色变更',
tag: 'user.role.updated',
desc: '在统一权限系统在角色管理中分配用户、删除角色时触发事件通知'
}
]
},
{
name: '角色事件',
tag: 'role',
desc: '包含角色的添加、删除、修改、权限变更事件',
list: [
{ name: '角色添加', tag: 'role.created', desc: '在统一权限系统创建角色时触发事件通知' },
{ name: '角色修改', tag: 'role.updated', desc: '在统一权限系统修改权限时触发事件通知' },
{ name: '角色删除', tag: 'role.deleted', desc: '在统一权限系统删除角色时 触发事件通知' },
{
name: '权限变更通知',
tag: 'role.permission.updated',
desc: '在统一权限系统中分配权限、删除角色、添加权限、修改权限、删除权限时触发权限变更事件通知'
}
]
},
{
name: '权限事件',
tag: 'permission',
desc: '包含权限的添加、删除、修改、事件',
list: [
{ name: '权限添加', tag: 'permission.created', desc: '在统一权限系统创建权限时触发事件通知' },
{ name: '权限修改', tag: 'permission.updated', desc: '在统一权限更新权限时触发事件通知' },
{ name: '权限删除', tag: 'permission.deleted', desc: '在统一权限系统删除权限时触发事件通知' }
]
}
]
},
mutations: {
setUser(state, user) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论