Create.vue 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <script setup>
  2. import { useForm } from '@inertiajs/inertia-vue3'
  3. import { useFormErrorReset } from '@/components/useFormErrorReset'
  4. import AppInputText from '@/components/AppInputText.vue'
  5. import DashboardLayout from '@/layouts/DashboardLayout.vue'
  6. const props = defineProps({
  7. number: String,
  8. })
  9. const form = useForm({
  10. number: props.number,
  11. name: null,
  12. unit: null,
  13. })
  14. useFormErrorReset(form)
  15. const onSubmit = () => {
  16. form.post(route('products.store'), { onSuccess: () => form.reset() })
  17. }
  18. </script>
  19. <template>
  20. <Head title="Tambah Produk" />
  21. <DashboardLayout>
  22. <div class="grid">
  23. <div class="col-12 lg:col-8">
  24. <Card>
  25. <template #title> Tambah Produk </template>
  26. <template #content>
  27. <div class="grid">
  28. <div class="col-12 md:col-6">
  29. <AppInputText
  30. disabled
  31. label="Nomor Produk"
  32. placeholder="nomor produk"
  33. :error="form.errors.number"
  34. v-model="form.number"
  35. />
  36. </div>
  37. <div class="col-12 md:col-6">
  38. <AppInputText
  39. label="Nama"
  40. placeholder="nama"
  41. :error="form.errors.name"
  42. v-model="form.name"
  43. />
  44. </div>
  45. <div class="col-12 md:col-6">
  46. <AppInputText
  47. label="Satuan"
  48. placeholder="satuan"
  49. :error="form.errors.unit"
  50. v-model="form.unit"
  51. />
  52. </div>
  53. </div>
  54. <div class="flex flex-column md:flex-row justify-content-end">
  55. <Button
  56. label="Simpan"
  57. icon="pi pi-check"
  58. class="p-button-outlined"
  59. :disabled="form.processing"
  60. @click="onSubmit"
  61. />
  62. </div>
  63. </template>
  64. </Card>
  65. </div>
  66. </div>
  67. </DashboardLayout>
  68. </template>