93 lines
2.9 KiB
Vue
93 lines
2.9 KiB
Vue
<script setup lang="ts">
|
||
const props = defineProps<{
|
||
onSubmit: (data: ZodInfer<typeof schema>) => Promise<void>
|
||
}>()
|
||
|
||
const schema = z.object({
|
||
endPoint: z.string({
|
||
required_error: 'endpoint字段不能为空',
|
||
}),
|
||
accessKey: z.string({
|
||
required_error: 'accesskey字段不能为空',
|
||
}),
|
||
secretKey: z.string({
|
||
required_error: 'secretkey字段不能为空',
|
||
}),
|
||
port: z.number({
|
||
required_error: 'port字段不能为空',
|
||
}).optional(),
|
||
region: z.string().optional(),
|
||
useSSL: z.boolean(),
|
||
})
|
||
|
||
const formValues = {
|
||
endPoint: 'fgws3.jwanfs.ocloud.ihep.ac.cn',
|
||
accessKey: 'NsccczIb9DsAQ7RNMIkv',
|
||
secretKey: 'gBGR9UdhESQntF7wbMqB',
|
||
region: 'us-east-1',
|
||
useSSL: true,
|
||
}
|
||
|
||
const open = ref(false)
|
||
|
||
async function onSubmit(values: ZodInfer<typeof schema>) {
|
||
open.value = false
|
||
await props.onSubmit(values)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<Dialog v-model:open="open">
|
||
<DialogTrigger as-child>
|
||
<Button class="font-bold tracking-wide" size="xs">
|
||
添加资源化技术
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogScrollContent class="sm:max-w-[425px]">
|
||
<DialogHeader>
|
||
<DialogTitle>资源化技术信息</DialogTitle>
|
||
<DialogDescription>
|
||
请填写所需要的资源化技术信息等。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<Form class="space-y-4" :schema="schema" :initial-values="formValues" @submit="onSubmit">
|
||
<FormFieldItem v-slot="{ componentField }" label="EndPoint" name="endPoint" required>
|
||
<Input type="text" v-bind="componentField" placeholder="" />
|
||
</FormFieldItem>
|
||
<FormFieldItem v-slot="{ componentField }" label="AccessKey" name="accessKey" required>
|
||
<Input type="text" v-bind="componentField" />
|
||
</FormFieldItem>
|
||
<FormFieldItem v-slot="{ componentField }" label="SecretKey" name="secretKey" required>
|
||
<Input type="text" v-bind="componentField" />
|
||
</FormFieldItem>
|
||
<FormFieldItem v-slot="{ componentField }" label="端口" name="port">
|
||
<Input type="number" v-bind="componentField" />
|
||
</FormFieldItem>
|
||
<FormFieldItem name="useSSL">
|
||
<template #content="{ value, handleChange }">
|
||
<div class="col-span-1" />
|
||
<div class="flex col-span-3 gap-x-3">
|
||
<FormControl>
|
||
<Checkbox :checked="value" @update:checked="handleChange" />
|
||
</FormControl>
|
||
<div class="space-y-1 leading-none">
|
||
<FormLabel>useSSL</FormLabel>
|
||
<FormDescription>
|
||
是否启用安全（HTTPS）认证
|
||
</FormDescription>
|
||
<FormMessage />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</FormFieldItem>
|
||
|
||
<DialogFooter class="mt-4">
|
||
<Button type="submit" class="font-bold tracking-wide">
|
||
保存
|
||
</Button>
|
||
</DialogFooter>
|
||
</Form>
|
||
</DialogScrollContent>
|
||
</Dialog>
|
||
</template>
|