Create.vue 2.2KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <script setup>
  2. import { Head, useForm } from '@inertiajs/inertia-vue3'
  3. import AppButtonCreate from '@/components/AppButtonCreate.vue'
  4. import AppTextInput from '@/components/AppTextInput.vue'
  5. import AppSelectInput from '@/components/AppSelectInput.vue'
  6. import DefaultLayout from '@/layouts/DefaultLayout.vue'
  7. const props = defineProps({
  8. customer_number: String,
  9. })
  10. const form = useForm({
  11. customer_number: props.customer_number,
  12. name: '',
  13. phone: '',
  14. address: '',
  15. gender: '',
  16. })
  17. const submit = () => {
  18. form.post(route('customers.store'))
  19. }
  20. </script>
  21. <template>
  22. <Head title="Tambah Customer" />
  23. <DefaultLayout>
  24. <CRow>
  25. <CCol md="8">
  26. <CCard color="light" class="border-light">
  27. <CForm @submit.prevent="submit">
  28. <CRow class="p-4">
  29. <CCol md="6" class="mb-4">
  30. <CFormLabel>Id Customer</CFormLabel>
  31. <CFormInput disabled v-model="form.customer_number" />
  32. </CCol>
  33. <CCol md="6" class="mb-4">
  34. <AppTextInput label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
  35. </CCol>
  36. <CCol md="6" class="mb-4">
  37. <AppTextInput label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
  38. </CCol>
  39. <CCol md="6" class="mb-4">
  40. <AppTextInput
  41. label="Address"
  42. placeholder="address"
  43. :error="form.errors.address"
  44. v-model="form.address"
  45. />
  46. </CCol>
  47. <CCol md="6" class="mb-4">
  48. <AppSelectInput label="Jenis Kelamin" :error="form.errors.gender" v-model="form.gender">
  49. <option value="1">Perempuan</option>
  50. <option value="2">Laki-laki</option>
  51. </AppSelectInput>
  52. </CCol>
  53. </CRow>
  54. <CCardFooter class="d-flex justify-content-end">
  55. <AppButtonCreate :disabled="form.processing">Tambah Customer</AppButtonCreate>
  56. </CCardFooter>
  57. </CForm>
  58. </CCard>
  59. </CCol>
  60. </CRow>
  61. </DefaultLayout>
  62. </template>