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>
|