2025-12-28 00:20:10 +08:00

85 lines
1.8 KiB
Vue

<template>
<Dialog
v-model="showDialog"
:options="{
title: '添加区域',
actions: [
{
label: '添加区域',
variant: 'solid',
loading: groupDocResource.addRegion.loading,
disabled: !selectedRegion,
onClick: () =>
groupDocResource.addRegion.submit(
{
region: selectedRegion.value
},
{
onSuccess: () => {
this.$emit('success');
this.showDialog = false;
}
}
)
}
]
}"
>
<template #body-content>
<div class="space-y-4">
<FormControl
type="autocomplete"
label="选择区域"
:options="regionOptions"
v-model="selectedRegion"
>
<template #prefix>
<img :src="selectedRegion?.image" class="mr-2 h-4" />
</template>
<template #item-prefix="{ active, selected, option }">
<img v-if="option?.image" :src="option.image" class="mr-2 h-4" />
</template>
</FormControl>
<ErrorMessage :message="groupDocResource.addRegion.error" />
</div>
</template>
</Dialog>
</template>
<script>
import { getCachedDocumentResource } from 'jingrow-ui';
export default {
name: 'AddRegionDialog',
props: ['group'],
data() {
return {
showDialog: true,
selectedRegion: null,
groupDocResource: getCachedDocumentResource('Release Group', this.group)
};
},
computed: {
regionOptions() {
return this.$resources.availableRegions.data.map(r => ({
label: r.title || r.name,
value: r.name,
image: r.image,
beta: r.beta
}));
}
},
resources: {
availableRegions() {
return {
url: 'jcloud.api.bench.available_regions',
params: {
name: this.group
},
auto: true,
initialData: []
};
}
}
};
</script>