118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { ref, shallowRef, onMounted, computed, defineProps } from 'vue';
|
|||
|
|
import WebHookItem from './WebHookItem.vue';
|
|||
|
|
import { Message } from 'vue-devui/message';
|
|||
|
|
|
|||
|
|
const visible = ref(false);
|
|||
|
|
const currentId = ref('');
|
|||
|
|
const loading = ref(true);
|
|||
|
|
|
|||
|
|
// 请求API都由父级决定 抽离方便复用
|
|||
|
|
const props = withDefaults(defineProps<{
|
|||
|
|
getRepoWebhooks: Function,
|
|||
|
|
editWebhook: Function,
|
|||
|
|
deleteWebHook: Function,
|
|||
|
|
repoId: string | null
|
|||
|
|
}>(), {
|
|||
|
|
getRepoWebhooks: () => {},
|
|||
|
|
editWebhook: () => {},
|
|||
|
|
deleteWebHook: () => {},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const empty = computed(() => {
|
|||
|
|
return !loading.value && !webHookList.value.length;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['create', 'edit']);
|
|||
|
|
|
|||
|
|
const webHookList = shallowRef<any[]>([]);
|
|||
|
|
|
|||
|
|
const getConfig = async() => {
|
|||
|
|
const res = await props.getRepoWebhooks({ repoId: props.repoId, conf: { page: 1, per_page: 50 }});
|
|||
|
|
if (!res.error) {
|
|||
|
|
webHookList.value = res?.data?.data;
|
|||
|
|
}
|
|||
|
|
loading.value = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDeal = async(data: Record<string, any>) => {
|
|||
|
|
const { hook_id, ...config } = data;
|
|||
|
|
const res = await props.editWebhook({ repoId: props.repoId, hook_id, conf: config });
|
|||
|
|
if (!res.error) {
|
|||
|
|
Message.success('操作成功');
|
|||
|
|
getConfig();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDel = (data: { hook_id: string }) => {
|
|||
|
|
const { hook_id } = data;
|
|||
|
|
visible.value = true;
|
|||
|
|
currentId.value = hook_id;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleConfirm = async() => {
|
|||
|
|
|
|||
|
|
const res = await props.deleteWebHook({ repoId: props.repoId, hook_id: currentId.value });
|
|||
|
|
if (!res.error) {
|
|||
|
|
Message.success('webhook移除成功');
|
|||
|
|
getConfig();
|
|||
|
|
visible.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEdit = (data: any) => {
|
|||
|
|
emit('edit', data);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getConfig();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="box-border py-[24px]">
|
|||
|
|
<div class="repo-settings-title">
|
|||
|
|
<div>WebHook</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="g-content-card pb-[18px]">
|
|||
|
|
<div class="text-sm mb-[18px] flex items-center justify-between p-[18px] border-box border-b-[1px] border-solid border-[var(--color-CG200)]">
|
|||
|
|
<div class="mr-2">
|
|||
|
|
WebHook 将允许 GitCode 向你的外部服务进行通知，当某些特定事件发生时，我们将向你指定的 URL中发送一个 POST 请求。
|
|||
|
|
</div>
|
|||
|
|
<d-button variant="solid" color="primary" icon="add" @click="emit('create')">新建 WebHook</d-button>
|
|||
|
|
</div>
|
|||
|
|
<DataPanel :loading="loading" :empty="empty" :skeleton="loading" :card="false">
|
|||
|
|
<div class="border-box px-[18px]">
|
|||
|
|
<div class="repo-table-item" v-for="hook of webHookList" :key="hook.id">
|
|||
|
|
<WebHookItem
|
|||
|
|
:hook="hook"
|
|||
|
|
@edit="handleEdit"
|
|||
|
|
@run="handleDeal"
|
|||
|
|
@pause="handleDeal"
|
|||
|
|
@delete="handleDel"
|
|||
|
|
></WebHookItem>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</DataPanel>
|
|||
|
|
</div>
|
|||
|
|
<GModal v-model="visible" title="你正在删除webhook" @confirm="handleConfirm">
|
|||
|
|
<div class="px-[8px]">删除后将无法恢复, 确认继续么?</div>
|
|||
|
|
</GModal>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.repo-table-item {
|
|||
|
|
&:nth-last-of-type(1) {
|
|||
|
|
@apply border-b-[1px];
|
|||
|
|
}
|
|||
|
|
@apply flex items-center py-[14px] px-[24px] justify-between border-t-[1px] border-l-[1px] border-r-[1px] border-solid border-[var(--color-CG200)];
|
|||
|
|
}
|
|||
|
|
.g-content-card{
|
|||
|
|
.devui-button{
|
|||
|
|
min-width: 155px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|