111 lines
3.0 KiB
Vue
111 lines
3.0 KiB
Vue
<script setup lang="ts">
|
||
import type { FormSubmitEvent } from '#ui/types'
|
||
|
||
// 定义单位数组
|
||
const units = [
|
||
'GB', 'TB',
|
||
]
|
||
|
||
// 定义双向绑定模态框的显示
|
||
const model = defineModel({
|
||
type: Boolean
|
||
})
|
||
// 定义加载状态
|
||
const loading = ref(false)
|
||
|
||
// 定义当前单位
|
||
const unit = ref(units[0])
|
||
|
||
// 根据单位转换大小，并监听单位变化
|
||
watch(unit, (val, old) => {
|
||
if (old === 'GB') {
|
||
state.BucketLimitSize = byteTrans.g2t(state.BucketLimitSize, 'ceil')
|
||
} else {
|
||
state.BucketLimitSize = byteTrans.t2g(state.BucketLimitSize, 'ceil')
|
||
}
|
||
})
|
||
|
||
// 定义外部传入的操作
|
||
const { onCreate } = defineProps<{
|
||
onCreate: (item: BucketCreateAndEditParams) => Promise<void>
|
||
}>()
|
||
|
||
|
||
// 定义表单数据
|
||
const schema = z.object({
|
||
BucketName: z.string({
|
||
required_error: '桶名称不能为空'
|
||
}),
|
||
BucketLimitSize: z.number({
|
||
required_error: '配额大小不能为空'
|
||
}).min(1, '配额大小不能小于1')
|
||
})
|
||
|
||
// 定义双向绑定表单数据
|
||
const state = reactive({
|
||
BucketName: '',
|
||
BucketLimitSize: 0
|
||
})
|
||
|
||
|
||
// 提交事件
|
||
async function onSubmit(event: FormSubmitEvent<BucketCreateAndEditParams>) {
|
||
loading.value = true
|
||
model.value = false
|
||
|
||
let size = 0
|
||
// 根据当前单位进行转换为KB之后再提交
|
||
if (unit.value === 'GB') {
|
||
size = byteTrans.g2k(event.data.BucketLimitSize)
|
||
} else {
|
||
size = byteTrans.t2k(event.data.BucketLimitSize)
|
||
}
|
||
await onCreate({ ...event.data, BucketLimitSize: size })
|
||
|
||
loading.value = false
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<UButton
|
||
:label="$t('user.bucket.modal.create.title')"
|
||
trailing-icon="i-heroicons-plus"
|
||
:loading="loading"
|
||
color="gray"
|
||
@click="model = true"
|
||
/>
|
||
<UDashboardModal
|
||
v-model="model"
|
||
:title="$t('user.bucket.modal.create.title')"
|
||
:description="$t('user.bucket.modal.create.desc')"
|
||
:ui="{ width: 'sm:max-w-md' }"
|
||
>
|
||
<!-- ~/components/users/UsersForm.vue -->
|
||
<UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
|
||
<UFormGroup :label="$t('user.bucket.field.name')" name="BucketName">
|
||
<UInput v-model="state.BucketName" autofocus :placeholder="$t('user.bucket.field.name.placeholder')" />
|
||
</UFormGroup>
|
||
|
||
<UFormGroup :label="$t('user.bucket.field.quota')" name="BucketLimitSize">
|
||
<UButtonGroup class="w-full" orientation="horizontal">
|
||
<UInput
|
||
v-model="state.BucketLimitSize"
|
||
class="w-full"
|
||
type="number"
|
||
:placeholder="$t('user.bucket.field.quota.placeholder')"
|
||
/>
|
||
<UTooltip text="自动向上取整策略，100GB⇒0.10TB⇒1TB" :popper="{ placement: 'top' }">
|
||
<USelectMenu v-model="unit" :options="units" />
|
||
</UTooltip>
|
||
</UButtonGroup>
|
||
</UFormGroup>
|
||
|
||
<div class="flex justify-end gap-3 pt-8">
|
||
<UButton :label="$t('modal.cancel')" color="gray" variant="ghost" @click="model = false" />
|
||
<UButton type="submit" :label="$t('modal.ok')" color="black" />
|
||
</div>
|
||
</UForm>
|
||
</UDashboardModal>
|
||
</template>
|