|
|
@@ -3,7 +3,7 @@
|
|
|
<h1>Webhooks</h1>
|
|
|
<div class="block">
|
|
|
<router-view></router-view>
|
|
|
- <div class="top" v-show="$route.meta.showfather">
|
|
|
+ <div class="top" v-show="showfather">
|
|
|
<h2>Webhooks
|
|
|
<el-tooltip class="item" effect="dark" content="Webhooks are reverse APIs that automatically send task or file information to the client you specify when our server updates it in the Webhooks paradigm. You can set up Webhooks to avoid periodic calls to APIs." placement="bottom">
|
|
|
<img src="@/assets/images/common/info_black.svg" alt="info">
|
|
|
@@ -16,7 +16,7 @@
|
|
|
</el-button>
|
|
|
</router-link>
|
|
|
</div>
|
|
|
- <div class="keys-table" v-show="$route.meta.showfather">
|
|
|
+ <div class="keys-table" v-show="showfather">
|
|
|
<el-table :data="tableData" style="width: 100%">
|
|
|
<el-table-column prop="url" label="URL" min-width="140">
|
|
|
<template slot-scope="scope">
|
|
|
@@ -77,122 +77,133 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script lang="ts">
|
|
|
+import { Vue, Component, Watch } from 'vue-property-decorator'
|
|
|
import { getWebhooksList, apiDeleteWebhook } from '@/request/api'
|
|
|
import Clipboard from 'clipboard'
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
-export default {
|
|
|
- data () {
|
|
|
- return {
|
|
|
- tableData: [],
|
|
|
- showEye: -1,
|
|
|
- pageType: '',
|
|
|
- passItem: {},
|
|
|
- showTooltip: '',
|
|
|
- isCopyActive: ''
|
|
|
- }
|
|
|
- },
|
|
|
+interface ItableData{
|
|
|
+ id: number,
|
|
|
+ userId: number,
|
|
|
+ projectId: number|null,
|
|
|
+ url: string,
|
|
|
+ secretToken: string,
|
|
|
+ status: number,
|
|
|
+ responseTime: string|null,
|
|
|
+ events: Array<string>
|
|
|
+}
|
|
|
+
|
|
|
+@Component
|
|
|
+export default class webhooks extends Vue {
|
|
|
+ tableData: Array<ItableData> = []
|
|
|
+ showEye = -1
|
|
|
+ pageType = ''
|
|
|
+ passItem = {}
|
|
|
+ showTooltip = ''
|
|
|
+ isCopyActive = ''
|
|
|
+
|
|
|
created () {
|
|
|
this.getList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取列表
|
|
|
- getList () {
|
|
|
- getWebhooksList({}).then(res => {
|
|
|
+ }
|
|
|
+
|
|
|
+ get showfather () {
|
|
|
+ return (this as any).$route.meta.showfather
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取列表
|
|
|
+ getList () {
|
|
|
+ getWebhooksList({
|
|
|
+ timeZone: (0 - new Date().getTimezoneOffset() / 60) === 8 ? '8' : '0'
|
|
|
+ }).then((res: any) => {
|
|
|
+ if (res.code === '200') {
|
|
|
+ this.tableData = []
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ this.tableData.push(res.data[i])
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error('Failed to connect.')
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ this.$message.error('Failed to connect.')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ handleDelete (index: number, row: any) {
|
|
|
+ this.$confirm('Are you sure you want to delete this information?', {
|
|
|
+ confirmButtonText: 'Delete',
|
|
|
+ cancelButtonText: 'Cancel',
|
|
|
+ customClass: 'message-box-delete'
|
|
|
+ }).then(() => {
|
|
|
+ apiDeleteWebhook(row.id).then((res: any) => {
|
|
|
if (res.code === '200') {
|
|
|
- this.tableData = []
|
|
|
- for (let i = 0; i < res.data.length; i++) {
|
|
|
- this.tableData.push(res.data[i])
|
|
|
- }
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: 'Deleted!'
|
|
|
+ })
|
|
|
+ this.tableData.splice(index, 1)
|
|
|
} else {
|
|
|
- this.$message.error('Failed to connect.')
|
|
|
+ this.$message.error('Deleted Failed.')
|
|
|
}
|
|
|
}).catch(err => {
|
|
|
console.log(err)
|
|
|
- this.$message.error('Failed to connect.')
|
|
|
- })
|
|
|
- },
|
|
|
- // 删除
|
|
|
- handleDelete (index, row) {
|
|
|
- this.$confirm('Are you sure you want to delete this information?', {
|
|
|
- confirmButtonText: 'Delete',
|
|
|
- cancelButtonText: 'Cancel',
|
|
|
- customClass: 'message-box-delete'
|
|
|
- }).then(() => {
|
|
|
- apiDeleteWebhook(row.id).then(res => {
|
|
|
- if (res.code === '200') {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: 'Deleted!'
|
|
|
- })
|
|
|
- this.tableData.splice(index, 1)
|
|
|
- } else {
|
|
|
- this.$message.error('Deleted Failed.')
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- console.log(err)
|
|
|
- this.$message.error('Deleted Failed.')
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
this.$message.error('Deleted Failed.')
|
|
|
})
|
|
|
- },
|
|
|
- // 显示小眼睛
|
|
|
- toggleShowEye (index) {
|
|
|
- this.showEye = this.showEye === index ? -1 : index
|
|
|
- },
|
|
|
- // 切换创建/编辑页
|
|
|
- changePage (type, item) {
|
|
|
- this.pageType = type
|
|
|
- if (type === 'create') {
|
|
|
- this.passItem = {}
|
|
|
- } else {
|
|
|
- this.passItem = item
|
|
|
- }
|
|
|
- },
|
|
|
- // 点击复制input中的内容
|
|
|
- copy (id) {
|
|
|
- console.log(id)
|
|
|
- var clipboard = new Clipboard(id)
|
|
|
- clipboard.on('success', () => {
|
|
|
- this.showTooltip = id
|
|
|
- this.isCopyActive = id
|
|
|
- setTimeout(() => {
|
|
|
- this.showTooltip = ''
|
|
|
- this.isCopyActive = ''
|
|
|
- }, 1000)
|
|
|
- clipboard.destroy()
|
|
|
- })
|
|
|
- clipboard.on('error', () => {
|
|
|
- this.$message.error('Copied Failed.')
|
|
|
- clipboard.destroy()
|
|
|
- })
|
|
|
- },
|
|
|
- // 转换event标签首字母大写
|
|
|
- changeEventTag (str) {
|
|
|
- str = str.toLowerCase()
|
|
|
- const arr = str.split('.')
|
|
|
- let res = ''
|
|
|
- for (const i in arr) {
|
|
|
- res += arr[i].substring(0, 1).toUpperCase() + arr[i].substring(1) + ''
|
|
|
- }
|
|
|
- return res
|
|
|
- },
|
|
|
- // 日期自定格式
|
|
|
- formatterDate (row, column) {
|
|
|
- const val = row[column.property]
|
|
|
- if (!val) return ''
|
|
|
- return dayjs(val).format('MMM D,YYYY HH:mm')
|
|
|
- },
|
|
|
- // 用*隐藏值
|
|
|
- formatterKey (key) {
|
|
|
- let str = ''
|
|
|
- for (let i = 0; i < key.length; i++) {
|
|
|
- str += '*'
|
|
|
- }
|
|
|
- return str
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('Deleted Failed.')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示小眼睛
|
|
|
+ toggleShowEye (index: number) {
|
|
|
+ this.showEye = this.showEye === index ? -1 : index
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击复制input中的内容
|
|
|
+ copy (id: string) {
|
|
|
+ var clipboard = new Clipboard(id)
|
|
|
+ clipboard.on('success', () => {
|
|
|
+ this.showTooltip = id
|
|
|
+ this.isCopyActive = id
|
|
|
+ setTimeout(() => {
|
|
|
+ this.showTooltip = ''
|
|
|
+ this.isCopyActive = ''
|
|
|
+ }, 1000)
|
|
|
+ clipboard.destroy()
|
|
|
+ })
|
|
|
+ clipboard.on('error', () => {
|
|
|
+ this.$message.error('Copied Failed.')
|
|
|
+ clipboard.destroy()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 转换event标签首字母大写
|
|
|
+ changeEventTag (str: string) {
|
|
|
+ str = str.toLowerCase()
|
|
|
+ const arr = str.split('.')
|
|
|
+ let res = ''
|
|
|
+ for (const i in arr) {
|
|
|
+ res += arr[i].substring(0, 1).toUpperCase() + arr[i].substring(1) + ''
|
|
|
+ }
|
|
|
+ return res
|
|
|
+ }
|
|
|
+
|
|
|
+ // 日期自定格式
|
|
|
+ formatterDate (row: any, column: any) {
|
|
|
+ const val = row[column.property]
|
|
|
+ if (!val) return ''
|
|
|
+ return dayjs(val).format('MMM D,YYYY HH:mm')
|
|
|
+ }
|
|
|
+
|
|
|
+ // 用*隐藏值
|
|
|
+ formatterKey (key: string) {
|
|
|
+ let str = ''
|
|
|
+ for (let i = 0; i < key.length; i++) {
|
|
|
+ str += '*'
|
|
|
}
|
|
|
+ return str
|
|
|
}
|
|
|
}
|
|
|
</script>
|
