Create.vue 2.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <script setup>
  2. import { Head, useForm } from '@inertiajs/inertia-vue3'
  3. import AppButton from '@/components/AppButton.vue'
  4. import AppDropdown from '@/components/AppDropdown.vue'
  5. import AppInputText from '@/components/AppInputText.vue'
  6. import AppDialog from '@/components/AppDialog.vue'
  7. import AppLayout from '@/layouts/AppLayout.vue'
  8. const props = defineProps({
  9. customer_number: String,
  10. genders: Array,
  11. })
  12. const form = useForm({
  13. customer_number: props.customer_number,
  14. name: '',
  15. phone: '',
  16. address: '',
  17. gender_id: '',
  18. })
  19. const submit = () => {
  20. form.post(route('customers.store'))
  21. }
  22. </script>
  23. <template>
  24. <Head title="Tambah Customer" />
  25. <AppLayout>
  26. <div class="grid">
  27. <div class="col-12 lg:col-8">
  28. <Card>
  29. <template #content>
  30. <div class="grid">
  31. <div class="col-12 md:col-6">
  32. <AppInputText :disabled="true" label="Id Customer" v-model="form.customer_number" />
  33. </div>
  34. <div class="col-12 md:col-6">
  35. <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
  36. </div>
  37. <div class="col-12 md:col-6">
  38. <AppInputText label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
  39. </div>
  40. <div class="col-12 md:col-6">
  41. <AppInputText label="Alamat" placeholder="alamat" :error="form.errors.address" v-model="form.address" />
  42. </div>
  43. <div class="col-12 md:col-6">
  44. <AppDropdown
  45. label="Jenis Kelamin"
  46. placeholder="Pilih satu"
  47. v-model="form.gender_id"
  48. :options="genders"
  49. :error="form.errors.gender_id"
  50. />
  51. </div>
  52. </div>
  53. </template>
  54. <template #footer>
  55. <div class="flex justify-content-end">
  56. <AppButton @click="submit" label="Simpan" icon="pi pi-check" />
  57. </div>
  58. </template>
  59. </Card>
  60. </div>
  61. </div>
  62. </AppLayout>
  63. </template>