|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<b-row>
|
|
|
<b-col md="6">
|
|
|
- <b-card title="來賓個人資訊">
|
|
|
+ <b-card title="來賓聯絡資訊">
|
|
|
<b-form @submit.prevent>
|
|
|
<b-row>
|
|
|
<b-col cols="12">
|
|
|
@@ -103,28 +103,19 @@
|
|
|
label-cols-md="4"
|
|
|
>
|
|
|
<b-input-group class="input-group-merge">
|
|
|
- <b-form-datepicker
|
|
|
- id="birth"
|
|
|
- placeholder="選擇日期..."
|
|
|
- local="tw"
|
|
|
- initial-date="2020-06-16"
|
|
|
+ <b-input-group-prepend is-text>
|
|
|
+ <feather-icon icon="CalendarIcon" />
|
|
|
+ </b-input-group-prepend>
|
|
|
+ <flat-pickr
|
|
|
+ placeholder="點擊選擇日期"
|
|
|
v-model="birth"
|
|
|
+ class="form-control"
|
|
|
/>
|
|
|
</b-input-group>
|
|
|
</b-form-group>
|
|
|
</b-col>
|
|
|
-
|
|
|
<!-- submit and reset -->
|
|
|
- <b-col offset-md="4">
|
|
|
- <b-button
|
|
|
- v-ripple.400="'rgba(255, 255, 255, 0.15)'"
|
|
|
- type="submit"
|
|
|
- variant="primary"
|
|
|
- class="mr-1"
|
|
|
- @click="postForm"
|
|
|
- >
|
|
|
- 送出
|
|
|
- </b-button>
|
|
|
+ <b-col offset-md="8">
|
|
|
<b-button
|
|
|
v-ripple.400="'rgba(186, 191, 199, 0.15)'"
|
|
|
type="reset"
|
|
|
@@ -132,11 +123,119 @@
|
|
|
>
|
|
|
重設
|
|
|
</b-button>
|
|
|
+ <b-button
|
|
|
+ v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
|
|
+ v-b-modal.modal-login
|
|
|
+ variant="outline-primary"
|
|
|
+ >
|
|
|
+ 填寫完成
|
|
|
+ </b-button>
|
|
|
</b-col>
|
|
|
</b-row>
|
|
|
</b-form>
|
|
|
</b-card>
|
|
|
</b-col>
|
|
|
+ <b-modal
|
|
|
+ id="modal-login"
|
|
|
+ cancel-variant="outline-secondary"
|
|
|
+ ok-title="送出"
|
|
|
+ cancel-title="取消"
|
|
|
+ centered
|
|
|
+ title="再次確認"
|
|
|
+ @ok="postForm"
|
|
|
+ >
|
|
|
+ <b-form @submit.prevent>
|
|
|
+ <b-row>
|
|
|
+ <b-col cols="12">
|
|
|
+ <b-form-group
|
|
|
+ label="姓名"
|
|
|
+ label-for="name"
|
|
|
+ label-cols-md="4"
|
|
|
+ >
|
|
|
+ <b-input-group class="input-group-merge">
|
|
|
+ <b-form-input
|
|
|
+ id="name"
|
|
|
+ v-model="name"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </b-input-group>
|
|
|
+ </b-form-group>
|
|
|
+ </b-col>
|
|
|
+ <b-col cols="12">
|
|
|
+ <b-form-group
|
|
|
+ label="來賓編號"
|
|
|
+ label-for="userID"
|
|
|
+ label-cols-md="4"
|
|
|
+ >
|
|
|
+ <b-input-group class="input-group-merge">
|
|
|
+ <b-form-input
|
|
|
+ id="userID"
|
|
|
+ v-model="userID"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </b-input-group>
|
|
|
+ </b-form-group>
|
|
|
+ </b-col>
|
|
|
+ <b-col cols="12">
|
|
|
+ <b-form-group
|
|
|
+ label="身分證字號"
|
|
|
+ label-for="nationalID"
|
|
|
+ label-cols-md="4"
|
|
|
+ >
|
|
|
+ <b-input-group class="input-group-merge">
|
|
|
+ <b-form-input v-model="nationalID" readonly />
|
|
|
+ </b-input-group>
|
|
|
+ </b-form-group>
|
|
|
+ </b-col>
|
|
|
+ <b-col cols="12">
|
|
|
+ <b-form-group
|
|
|
+ label="連絡電話"
|
|
|
+ label-for="phone"
|
|
|
+ label-cols-md="4"
|
|
|
+ >
|
|
|
+ <b-input-group class="input-group-merge">
|
|
|
+ <b-form-input
|
|
|
+ id="phone"
|
|
|
+ type="number"
|
|
|
+ v-model="phone"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </b-input-group>
|
|
|
+ </b-form-group>
|
|
|
+ </b-col>
|
|
|
+ <b-col cols="12">
|
|
|
+ <b-form-group
|
|
|
+ label="聯絡地址"
|
|
|
+ label-for="address"
|
|
|
+ label-cols-md="4"
|
|
|
+ >
|
|
|
+ <b-input-group class="input-group-merge">
|
|
|
+ <b-form-input
|
|
|
+ id="address"
|
|
|
+ v-model="address"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </b-input-group>
|
|
|
+ </b-form-group>
|
|
|
+ </b-col>
|
|
|
+ <b-col cols="12">
|
|
|
+ <b-form-group
|
|
|
+ label="出生年月日"
|
|
|
+ label-for="birth"
|
|
|
+ label-cols-md="4"
|
|
|
+ >
|
|
|
+ <b-input-group class="input-group-merge">
|
|
|
+ <b-form-input
|
|
|
+ id="birth"
|
|
|
+ v-model="birth"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </b-input-group>
|
|
|
+ </b-form-group>
|
|
|
+ </b-col>
|
|
|
+ </b-row>
|
|
|
+ </b-form>
|
|
|
+ </b-modal>
|
|
|
</b-row>
|
|
|
</template>
|
|
|
|
|
|
@@ -153,9 +252,12 @@ import {
|
|
|
BRow,
|
|
|
BCol,
|
|
|
BFormDatepicker,
|
|
|
+ BModal,
|
|
|
+ VBModal,
|
|
|
} from "bootstrap-vue";
|
|
|
import Ripple from "vue-ripple-directive";
|
|
|
import useJwt from "@/auth/jwt/useJwt";
|
|
|
+import flatPickr from 'vue-flatpickr-component'
|
|
|
import ToastificationContent from "@core/components/toastification/ToastificationContent.vue";
|
|
|
|
|
|
export default {
|
|
|
@@ -171,9 +273,12 @@ export default {
|
|
|
BForm,
|
|
|
BButton,
|
|
|
BFormDatepicker,
|
|
|
+ BModal,
|
|
|
+ flatPickr,
|
|
|
ToastificationContent,
|
|
|
},
|
|
|
directives: {
|
|
|
+ "b-modal": VBModal,
|
|
|
Ripple,
|
|
|
},
|
|
|
data() {
|
|
|
@@ -209,6 +314,7 @@ export default {
|
|
|
variant,
|
|
|
},
|
|
|
});
|
|
|
+ this.resetForm();
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.log(error);
|
|
|
@@ -237,6 +343,14 @@ export default {
|
|
|
console.log("Error fetching guest ID:", error);
|
|
|
});
|
|
|
},
|
|
|
+ resetForm() {
|
|
|
+ this.userID = "";
|
|
|
+ this.name = "";
|
|
|
+ this.nationalID = "";
|
|
|
+ this.phone = "";
|
|
|
+ this.address = "";
|
|
|
+ this.birth = "";
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
name: {
|
|
|
@@ -250,3 +364,6 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="scss">
|
|
|
+@import '~@resources/scss/vue/libs/vue-flatpicker.scss';
|
|
|
+</style>
|
