mirror of https://github.com/veops/cmdb.git
150 lines
4.1 KiB
Python
150 lines
4.1 KiB
Python
<template>
|
|
<div>
|
|
<a-input-group compact>
|
|
<treeselect
|
|
:disable-branch-nodes="true"
|
|
class="custom-treeselect custom-treeselect-bgcAndBorder"
|
|
:style="{
|
|
'--custom-height': '30px',
|
|
lineHeight: '30px',
|
|
'--custom-bg-color': '#fff',
|
|
'--custom-border': '1px solid #d9d9d9',
|
|
display: 'inline-block',
|
|
width: '100px',
|
|
}"
|
|
v-model="method"
|
|
:multiple="false"
|
|
:clearable="false"
|
|
searchable
|
|
:options="methodList"
|
|
value-consists-of="LEAF_PRIORITY"
|
|
:placeholder="$t('cmdb.components.selectMethods')"
|
|
>
|
|
</treeselect>
|
|
<a-input :style="{ display: 'inline-block', width: 'calc(100% - 100px)' }" v-model="url" />
|
|
</a-input-group>
|
|
<a-tabs>
|
|
<a-tab-pane key="Parameters" tab="Parameters">
|
|
<Parameters ref="Parameters" />
|
|
</a-tab-pane>
|
|
<a-tab-pane key="Body" tab="Body" force-render>
|
|
<Body ref="Body" />
|
|
</a-tab-pane>
|
|
<a-tab-pane key="Headers" tab="Headers" force-render>
|
|
<Header ref="Header" />
|
|
</a-tab-pane>
|
|
<a-tab-pane key="Authorization" tab="Authorization" force-render>
|
|
<Authorization ref="Authorization" />
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'lodash'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import Parameters from './paramaters.vue'
|
|
import Body from './body.vue'
|
|
import Header from './header.vue'
|
|
import Authorization from './authorization.vue'
|
|
export default {
|
|
name: 'Webhook',
|
|
components: { Parameters, Body, Header, Authorization },
|
|
data() {
|
|
const methodList = [
|
|
{
|
|
id: 'GET',
|
|
label: 'GET',
|
|
},
|
|
{
|
|
id: 'POST',
|
|
label: 'POST',
|
|
},
|
|
{
|
|
id: 'PUT',
|
|
label: 'PUT',
|
|
},
|
|
{
|
|
id: 'DELETE',
|
|
label: 'DELETE',
|
|
},
|
|
]
|
|
return {
|
|
methodList,
|
|
method: 'GET',
|
|
url: '',
|
|
}
|
|
},
|
|
methods: {
|
|
getParams() {
|
|
const parameters = {}
|
|
this.$refs.Parameters.parameters.forEach((item) => {
|
|
parameters[item.key] = item.value
|
|
})
|
|
let body = this.$refs.Body.jsonData
|
|
try {
|
|
JSON.parse(body)
|
|
body = JSON.parse(body)
|
|
} catch {}
|
|
const headers = {}
|
|
this.$refs.Header.headers.forEach((item) => {
|
|
if (item.key) {
|
|
headers[item.key] = item.value
|
|
}
|
|
})
|
|
let authorization = {}
|
|
const type = this.$refs.Authorization.authorizationType
|
|
if (type !== 'none') {
|
|
if (type === 'OAuth2.0') {
|
|
authorization = { ...this.$refs.Authorization['OAuth2'], type }
|
|
} else {
|
|
authorization = { ...this.$refs.Authorization[type], type }
|
|
}
|
|
}
|
|
const { method, url } = this
|
|
return { method, url, parameters, body, headers, authorization }
|
|
},
|
|
setParams(params) {
|
|
const { method = 'GET', url = '', parameters = {}, body = '', headers = {}, authorization = {} } = params ?? {}
|
|
this.method = method
|
|
this.url = url
|
|
this.$refs.Parameters.parameters =
|
|
Object.keys(parameters).map((key) => {
|
|
return {
|
|
id: uuidv4(),
|
|
key: key,
|
|
value: parameters[key],
|
|
}
|
|
}) || []
|
|
if (body && Object.prototype.toString.call(body) === '[object Object]') {
|
|
this.$refs.Body.jsonData = JSON.stringify(body)
|
|
} else {
|
|
this.$refs.Body.jsonData = body
|
|
}
|
|
this.$refs.Header.headers =
|
|
Object.keys(headers).map((key) => {
|
|
return {
|
|
id: uuidv4(),
|
|
key: key,
|
|
value: headers[key],
|
|
}
|
|
}) || []
|
|
const { type = 'none' } = authorization
|
|
console.log(type)
|
|
this.$refs.Authorization.authorizationType = type
|
|
if (type !== 'none') {
|
|
const _authorization = _.cloneDeep(authorization)
|
|
delete _authorization.type
|
|
if (type === 'OAuth2.0') {
|
|
this.$refs.Authorization.OAuth2 = _authorization
|
|
} else {
|
|
this.$refs.Authorization[type] = _authorization
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|