133 lines
4.0 KiB
Vue
133 lines
4.0 KiB
Vue
<script lang='ts' setup>
|
|
import type { GenericObject } from "vee-validate";
|
|
import type { RwaIssuanceCategoriesData, RwaIssuanceProductBody } from "@/api/types";
|
|
import { toTypedSchema } from "@vee-validate/yup";
|
|
import { ErrorMessage, Field, Form } from "vee-validate";
|
|
import { useI18n } from "vue-i18n";
|
|
import * as yup from "yup";
|
|
|
|
const props = defineProps<{
|
|
initialData: RwaIssuanceProductBody["product"];
|
|
categories: RwaIssuanceCategoriesData | null;
|
|
}>();
|
|
const emit = defineEmits<{
|
|
(e: "next", values: GenericObject): void;
|
|
}>();
|
|
const { t } = useI18n();
|
|
|
|
const schema = toTypedSchema(
|
|
yup.object({
|
|
name: yup.string().required(t("asset.issue.apply.validation.nameRequired")),
|
|
code: yup.string().required(t("asset.issue.apply.validation.codeRequired")),
|
|
categoryId: yup.string().required(t("asset.issue.apply.validation.categoryRequired")),
|
|
}),
|
|
);
|
|
|
|
function handleSubmit(values: GenericObject) {
|
|
emit("next", values);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Form
|
|
:validation-schema="schema" :initial-values="initialData"
|
|
@submit="handleSubmit"
|
|
>
|
|
<div class="space-y-5">
|
|
<div>
|
|
<Field name="name" type="text">
|
|
<template #default="{ field }">
|
|
<ui-input-label
|
|
v-bind="field"
|
|
:label="t('asset.issue.apply.productName')"
|
|
:placeholder="t('asset.issue.apply.enterProductName')"
|
|
/>
|
|
</template>
|
|
</Field>
|
|
<ErrorMessage name="name" />
|
|
</div>
|
|
|
|
<div>
|
|
<Field name="code" type="text">
|
|
<template #default="{ field }">
|
|
<ui-input-label
|
|
v-bind="field"
|
|
:label="t('asset.issue.apply.productCode')"
|
|
:placeholder="t('asset.issue.apply.enterProductCode')"
|
|
/>
|
|
</template>
|
|
</Field>
|
|
<ErrorMessage name="code" />
|
|
</div>
|
|
|
|
<div>
|
|
<Field name="categoryId" type="text">
|
|
<template #default="{ field }">
|
|
<ion-select
|
|
class="ui-select"
|
|
interface="action-sheet"
|
|
toggle-icon=""
|
|
v-bind="field"
|
|
:label="t('asset.issue.apply.productType')"
|
|
:placeholder="t('asset.issue.apply.chooseProductType')"
|
|
>
|
|
<ion-select-option v-for="item in categories?.data" :key="item.id" :value="item.id">
|
|
{{ item.name }}
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</template>
|
|
</Field>
|
|
<ErrorMessage name="categoryId" />
|
|
</div>
|
|
|
|
<div>
|
|
<Field name="estimatedValue" type="text">
|
|
<template #default="{ field }">
|
|
<ui-input-label
|
|
v-bind="field"
|
|
type="text"
|
|
inputmode="numeric"
|
|
:label="t('asset.issue.apply.productValue')"
|
|
:placeholder="t('asset.issue.apply.enterProductValue')"
|
|
/>
|
|
</template>
|
|
</Field>
|
|
<ErrorMessage name="estimatedValue" />
|
|
</div>
|
|
|
|
<div>
|
|
<Field name="proofDocuments" type="text">
|
|
<template #default="{ field }">
|
|
<ui-input-label
|
|
v-bind="field"
|
|
:label="t('asset.issue.apply.assetProof')"
|
|
:placeholder="t('asset.issue.apply.enterAssetProof')"
|
|
/>
|
|
</template>
|
|
</Field>
|
|
<ErrorMessage name="proofDocuments" />
|
|
</div>
|
|
|
|
<div>
|
|
<Field name="totalSupplyLimit" type="text">
|
|
<template #default="{ field }">
|
|
<ui-input-label
|
|
v-bind="field"
|
|
inputmode="numeric"
|
|
:label="t('asset.issue.apply.totalSupplyLimit')"
|
|
:placeholder="t('asset.issue.apply.enterTotalSupplyLimit')"
|
|
/>
|
|
</template>
|
|
</Field>
|
|
<ErrorMessage name="totalSupplyLimit" />
|
|
</div>
|
|
|
|
<ion-button type="submit" expand="block">
|
|
{{ t('asset.issue.apply.next') }}
|
|
</ion-button>
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
|
|
<style lang='css' scoped></style>
|