增加客堂簡易報名

2026-08-03 18:09:15 +08:00
parent 12634b942c
commit da913d2584
6 changed files with 573 additions and 224 deletions
@@ -0,0 +1,158 @@
+<template>
+    <div class="container-fluid">
+
+        <v-card>
+            <v-card-title class="bg-primary white--text text-center">
+                <h5 class="mb-0">客堂報名</h5>
+                <div class="ms-auto">
+                    <v-btn @click.prevent="savePreOrder()">儲存</v-btn>
+                    <v-btn @click.prevent="back01()">返回</v-btn>
+                </div>
+            </v-card-title>
+            <v-card-text>
+                <v-row>
+                    <v-col cols="12" md="4">
+
+                        <v-text-field v-model="formData.f_name"
+                                      :readonly="true"
+                                      label="信眾">
+                            <v-icon slot="append" style="cursor:pointer" @click.prevent="pickFollower"
+                                    color="red">
+                                mdi-account
+                            </v-icon>
+                        </v-text-field>
+                    </v-col>
+
+                    <v-col cols="12" md="4">
+                        <v-text-field v-model="formData.item_count"
+                                      label="功德項目數"></v-text-field>
+                    </v-col>
+                    <v-col cols="12" md="4">
+                        <v-text-field v-model="formData.total_amt"
+                                      label="總金額"></v-text-field>
+                    </v-col>
+                    <v-col cols="12" md="8">
+                        <v-text-field v-model="formData.act_name"
+                                      :readonly="true"
+                                      label="法會/活動">
+                            <v-icon slot="append" style="cursor:pointer" @click.prevent="pickAct"
+                                    color="red">
+                                mdi-selection-search
+                            </v-icon>
+                        </v-text-field>
+                    </v-col>
+                    <v-col cols="12" md="4">
+                        <v-text-field v-model="formData.order_no"
+                                      :readonly="true" :disabled="true"
+                                      label="報名單號"></v-text-field>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+        </v-card>
+    </div>
+
+    <v-dialog v-model="picker.show" class="dialog_width">
+        <template>
+            <v-card>
+                <v-card-title>
+                    <v-data-table v-model="picker.data_table.selected"
+                                  :items="picker.data_table.list"
+                                  :options.sync="options"
+                                  :headers="picker.data_table.header"
+                                  :footer-props="picker.data_table.footer"
+                                  :server-items-length="picker.data_table.count"
+                                  :loading="picker.data_table.loading"
+                                  :single-select="picker.data_table.singleSelect"
+                                  show-select
+                                  hide-default-footer
+                                  :page.sync="picker.data_table.page"
+                                  :items-per-page.sync="picker.data_table.pageSize"
+                                  class="elevation-1">
+                        </v-data-table>
+                </v-card-title>
+                <v-card-text>
+                    <v-btn @click.prevent="picker.show=false" >關閉</v-btn>
+                    <v-btn @click.prevent="picker_confirm()" >確認</v-btn>
+                </v-card-text>
+            </v-card>
+        </template>
+    </v-dialog>
+</template>
+
+<script>
+    module.exports = {
+        props: {
+            num: {
+                type: Number // num
+            }
+        },
+        data() {
+            return {
+                options: { multiSort: false },
+                formData: {
+                    f_num: 0,
+                    order_no: "自動編號",
+                    item_count: 0,
+                    total_amt: 0,
+                    act_num: 0,
+                    admin_num: 0,
+                    receipt_no: "",
+                    f_name: "",
+                    act_name:""
+                },
+                picker: {
+                    show: false,
+                    target: "",
+                    data_table: {
+                        loading: true,
+                        list: [],
+                        selected: [],
+                        singleSelect: false,
+                        count: 0,
+                        page: 1,
+                        pageSize: 10,
+                        header: [
+
+                        ],
+                        footer: {
+                            showFirstLastPage: true,
+                            itemsPerPageOptions: [5, 10, 20, 30],
+                        },
+                    }
+                }
+            }
+        },
+        methods: {
+            savePreOrder() {
+
+            },
+            back01() {
+                this.$emit('custom-event', { action: 'list' });
+            },
+            pickFollower() {
+                this.picker.show = true;
+                this.picker.target = "follower";
+                this.picker.data_table.header = [
+                    { text: '信眾編號', value: 'num' },
+                    { text: '姓名', value: 'u_name' },
+                    { text: '電話', value: 'phone' },
+                    { text: '行動電話', value: 'cellphone' },
+                    { text: '', value: 'slot_btn', sortable: false, align: 'end' }
+                ]
+            },
+            pickAct() {
+                this.picker.show = true;
+                this.picker.target = "act";
+                this.picker.data_table.header = [
+                    { text: '活動編號', value: 'num' },
+                    { text: '名稱', value: 'subject' },
+                    { text: '報名截止日', value: 'dueDate' },
+                    { text: '', value: 'slot_btn', sortable: false, align: 'end' }
+                ]
+            },
+            picker_confirm() {
+
+            }
+        }
+    };
+</script>