135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<template>
|
|
<Dialog
|
|
:options="{
|
|
title: '激活Webhook'
|
|
}"
|
|
>
|
|
<template #body-content>
|
|
<div class="space-y-4">
|
|
<FormControl label="端点" v-model="webhook.endpoint" disabled />
|
|
<div v-if="request">
|
|
<p class="text-xs text-gray-600">请求</p>
|
|
<pre
|
|
class="mt-2 whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-600"
|
|
>{{ request }}</pre
|
|
>
|
|
</div>
|
|
|
|
<FormControl
|
|
v-if="response_status_code"
|
|
label="响应状态码"
|
|
v-model="response_status_code"
|
|
disabled
|
|
/>
|
|
<div v-if="response">
|
|
<p class="text-xs text-gray-600">响应</p>
|
|
<pre
|
|
class="mt-2 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-600"
|
|
>{{ response }}</pre
|
|
>
|
|
</div>
|
|
<div class="flex items-center" v-if="validated">
|
|
<ILucideCheck class="h-4 text-green-600" />
|
|
<div class="ml-2 text-sm font-medium text-gray-700">
|
|
端点已验证
|
|
</div>
|
|
</div>
|
|
|
|
<ErrorMessage :message="errorMessage" />
|
|
</div>
|
|
</template>
|
|
<template v-slot:actions>
|
|
<Button
|
|
class="w-full"
|
|
theme="gray"
|
|
variant="solid"
|
|
@click="$resources.validateEndpoint.submit()"
|
|
:loading="$resources.validateEndpoint.loading"
|
|
loadingText="正在验证Webhook"
|
|
v-if="!validated"
|
|
>验证Webhook</Button
|
|
>
|
|
<Button
|
|
class="w-full"
|
|
theme="gray"
|
|
variant="solid"
|
|
@click="$resources.activateWebhook.submit()"
|
|
:loading="$resources.activateWebhook.loading"
|
|
loadingText="正在激活Webhook"
|
|
v-if="validated"
|
|
>激活Webhook</Button
|
|
>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { toast } from 'vue-sonner';
|
|
|
|
export default {
|
|
emits: ['success'],
|
|
props: ['webhook'],
|
|
data() {
|
|
return {
|
|
errorMessage: '',
|
|
validated: false,
|
|
request: null,
|
|
response: null,
|
|
response_status_code: null
|
|
};
|
|
},
|
|
resources: {
|
|
validateEndpoint() {
|
|
return {
|
|
url: 'jcloud.api.client.run_pg_method',
|
|
makeParams() {
|
|
return {
|
|
dt: 'Jcloud Webhook',
|
|
dn: this.webhook.name,
|
|
method: 'validate_endpoint'
|
|
};
|
|
},
|
|
onSuccess: result => {
|
|
const data = result.message;
|
|
this.request = data.request;
|
|
this.response = data.response;
|
|
this.response_status_code = data.response_status_code;
|
|
if (data.success) {
|
|
this.errorMessage = '';
|
|
this.validated = true;
|
|
} else {
|
|
this.validated = false;
|
|
|
|
this.errorMessage =
|
|
'端点应返回200到300之间的状态\n请检查端点并重试';
|
|
}
|
|
},
|
|
onError: e => {
|
|
console.error(e);
|
|
this.errorMessage = e.message;
|
|
}
|
|
};
|
|
},
|
|
activateWebhook() {
|
|
return {
|
|
url: 'jcloud.api.client.run_pg_method',
|
|
makeParams() {
|
|
return {
|
|
dt: 'Jcloud Webhook',
|
|
dn: this.webhook.name,
|
|
method: 'activate'
|
|
};
|
|
},
|
|
onSuccess(e) {
|
|
toast.success('Webhook激活成功');
|
|
this.$emit('success');
|
|
},
|
|
onError(e) {
|
|
console.error(e);
|
|
this.errorMessage = e.message;
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script> |