diff --git a/web/App_Code/api/preOrderController.cs b/web/App_Code/api/preOrderController.cs
index 42274a0..13a89a4 100644
--- a/web/App_Code/api/preOrderController.cs
+++ b/web/App_Code/api/preOrderController.cs
@@ -1,6 +1,8 @@
-using System;
+using PagedList;
+using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Net;
 using System.Web;
 using System.Web.Http;
 
@@ -17,4 +19,37 @@ public class preOrderController: ApiController
         // TODO: 在這裡新增建構函式邏輯
         //
     }
+    [HttpPost]
+    [Route("api/preOrder/GetPreOrder")]
+
+    public IHttpActionResult GetPreOrder([FromBody] Model.ViewModel.preOrder pre, int page, int pageSize = 10,
+     string sortBy = "", bool sortDesc = false)
+    {
+        var qry=_db.pre_order.AsQueryable();
+        if (!string.IsNullOrEmpty(pre.f_name))
+        {
+            qry = qry.Where(x => _db.followers.Where(y => y.u_name == pre.f_name).Select(y => y.num).ToList().Contains((int)x.f_num));
+        }
+        sortBy = sortBy ?? string.Empty;
+        var count = qry.Count(); //pageSize = count;//一次取回??
+        if (pageSize == -1)
+        {
+            pageSize = count;
+        }
+        if (pageSize == 0)
+            pageSize = 10;
+        var ret = new
+        {
+            list = qry.ToPagedList(page, pageSize).Select(x => new
+            {
+                x.num,x.f_num,x.admin_num,x.order_no,x.item_count,x.total_amt,x.reg_time,x.receipt_num,x.act_num,
+                f_name=_db.followers.Where(z=>z.num==x.f_num).Select(z=>z.u_name).FirstOrDefault(),
+                act_name=_db.activities.Where(w=>w.num==x.act_num).Select(w=>w.subject).FirstOrDefault(),
+            }).ToList(),
+            count = count
+        };
+        if (ret.list == null) throw new HttpResponseException(HttpStatusCode.NotFound);
+        return Ok(ret);
+    }
+
 }
\ No newline at end of file
diff --git a/web/admin/order/pre_index.aspx b/web/admin/order/pre_index.aspx
index 5315ec4..64cdfb1 100644
--- a/web/admin/order/pre_index.aspx
+++ b/web/admin/order/pre_index.aspx
@@ -1,13 +1,13 @@
 <%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="pre_index.aspx.cs" Inherits="admin_order_pre_index" %>
 <%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
-
+     <script src="/js/httpVueLoader.js"></script>
 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
-     <div class="mb-2 mb-sm-0">
-     <a href="reg.aspx" class="btn btn-primary">
+    <div class="mb-2 mb-sm-0">
+   <%--  <a @click.prevent="changeView({action:'add'})" class="btn btn-primary">
          <i class="mdi mdi-plus"></i>新增
-     </a>
+     </a>--%>
      <%--<a @click="deleteAll" class="btn btn-outline-danger" title="刪除勾選的資料" ><i class="mdi mdi-trash-can"></i> 刪除勾選</a>--%>
  </div>
  <div class="">
@@ -29,238 +29,267 @@
  </div>
 </asp:Content>
 <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
-      <div id="content" class="container-fluid">
-     <v-data-table 
-         v-model="data_table.selected"
-         :items="data_table.list"
-         :search-props="search"
-         item-key="order_no"
-         :options.sync="options"
-         :headers="data_table.header"
-         :footer-props="data_table.footer"
-         :server-items-length="data_table.count"
-         :loading="data_table.loading"
-         :single-select="data_table.singleSelect"
-         show-select
-         hide-default-footer
-         :page.sync="data_table.page"
-         :items-per-page.sync="data_table.pageSize"
-         class="elevation-1">
-         <template #item.up_time="{ item }" >
-              {{ item.up_time|timeString('YYYY/MM/DD') }} 
-         </template>     
-         <template #item.u_name="{ item }" >   
-              {{ item.u_name }} 
-         </template> 
-         <template #item.slot_btn="{ item }">
-             <a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>編輯</a>
-             <a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>         
-         </template>
-     </v-data-table> 
-     <v-container>
-         <v-row class="align-baseline" wrap>
-             <v-col cols="12" md="9">
-                 <v-pagination
-                     v-model="data_table.page"
-                     :length="pageCount">
-                 </v-pagination>
-             </v-col>
-             <v-col class="text-truncate text-right" cols="12" md="2">
-                 共 {{ data_table.count }} 筆, 頁數:
-             </v-col>
-             <v-col cols="6" md="1">
-                 <v-text-field
-                     v-model="data_table.page"
-                     type="number"
-                     hide-details
-                     dense
-                     min="1"
-                     :max="pageCount"
-                     @input="data_table.page = parseInt($event, 10)"
-                 ></v-text-field>
-             </v-col>                                
-         </v-row>
-     </v-container>
-
-       <v-dialog v-model="search_dialog.show" max-width="500px">
-         <v-card>
-             <v-card-title class="justify-space-between grey lighten-2">
-                 查詢:{{search_dialog.current.title}}
-                 <v-btn icon @click="search_dialog.show=false"><v-icon>mdi-close</v-icon></v-btn>
-             </v-card-title>
-             <v-card-text >
-                 <v-row>
-                     <v-col v-for="item in search_dialog.current.keys"
-                         :cols="search_dialog.current.keys.length>1?6:12" v-bind:key="item.value">                            
-                         <v-text-field v-model="item.value" :label="item.title" v-if="item.visible===undefined || item.visible==true "></v-text-field>
-                     </v-col>
-                     <v-col cols="12" class="text-end">
-                         <v-btn color="primary" elevation="0" @click="search_get()">查詢</v-btn>
-                         <v-btn elevation="0" @click="search_clear()">清除條件</v-btn>
-                     </v-col>
-                 </v-row>
-                 <v-data-table 
-                     :headers="search_headers()" 
-                     :items="search_dialog.list" 
-                     :footer-props="search_dialog.footer"
-                     :items-per-page="10"
-                     :server-items-length="search_dialog.count"
-                     :page.sync="search_dialog.page"
-                     :options.sync="search_options"
-                     @click:row="search_select"
-                     ></v-data-table>
-             </v-card-text>
-             <v-card-actions>
-             </v-card-actions>
-         </v-card>
-     </v-dialog>
- </div>
+        <div id="content" class="container-fluid py-4">
+      <keep-alive>
+            <component :is="currentView"
+                @custom-event="changeView">
+            </component>
+      </keep-alive>  
+    </div>
 </asp:Content>
 <asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
 </asp:Content>
 <asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
     <script>
-        Vue.filter('timeString', function (value, myFormat) {
-            return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
-        });
-
         let VueApp = new Vue({
             el: '#app',
-            vuetify: new Vuetify(vuetify_options),
+            vuetify: new Vuetify(),
             data() {
                 return {
+                    currentView: 'pre_order-component',
                     options: { multiSort: false },
                     search_options: { multiSort: false },
-                    data_table: {
-                        loading: true,
-                        list: [],
-                        selected: [],
-                        singleSelect: false,
-                        count: 0,
-                        page: 1,
-                        pageSize: 10,
-                        header: [
-                            { text: '信眾', value: 'f_num' },
-                            { text: '訂單編號', value: 'order_no' },
-                            { text: '收據號碼', value: 'receipt_num' },
-                            { text: '活動', value: 'act_num', align: 'start' },
-                            { text: '功德項目數量', value: 'item_count' },
-                            { text: '總金額', value: 'total_amt' },
-                            { text: '登錄人員', value: 'admin_num' },
-                            { text: '登錄時間', value: 'reg_time' },
-                            { text: '', value: 'slot_btn', sortable: false, align: 'end' }
-                        ],
-                        footer: {
-                            showFirstLastPage: true,
-                            itemsPerPageOptions: [5, 10, 20, 30],
-                        },
-                    },
-                    search_dialog: {
-                        controls: {
-                            search1: {
-                                id: 'search1',
-                                title: '國籍',
-                                text_prop: 'name_zh',
-                                value_prop: 'id',
-                                keys: [
-                                    { id: 'keyword', title: '關鍵字' },
-                                ],
-                                api_url: HTTP_HOST + 'api/country/GetList',
-                                columns: [
-                                    { id: 'id', title: '代碼' },
-                                    { id: 'name_en', title: '英文短名稱' },
-                                    { id: 'name_zh', title: '中文名稱' },
-                                ],
-                                selected: {},
-                                select(item, t) {
-                                    t.search.country = item.id;
-                                    t.search.country2 = '';
-                                }
-                            },
-                            search2: {
-                                id: 'search2',
-                                title: '報名活動',
-                                text_prop: 'subject',
-                                value_prop: 'num',
-                                keys: [
-                                    { id: 'subject', title: '活動名稱', value: '' },
-                                    { id: 'kindTxt', title: '活動分類' },
-                                ],
-                                api_url: HTTP_HOST + 'api/activity/GetList',
-                                columns: [
-                                    { id: 'subject', title: '活動名稱' },
-                                    { id: 'kindTxt', title: '活動分類' },
-                                ],
-                                selected: {},
-                                select(item, t) {
-                                    t.print_search.select_act = item.num;
-                                }
-                            },
-                            search3: {
-                                id: 'search3',
-                                title: '活動品項',
-                                text_prop: 'subject',
-                                value_prop: 'num',
-                                keys: [
-                                    { id: 'subject', title: '項目名稱', value: '' },
-                                    { id: 'kindTxt', title: '項目分類' },
-                                    { id: 'num', visible: false },
-                                ],
-                                api_url: HTTP_HOST + 'api/activity/GetOrderList',
-                                columns: [
-                                    { id: 'subject', title: '項目名稱' },
-                                    { id: 'kindTxt', title: '項目分類' },
-                                ],
-                                selected: {},
-                                select(item, t) {
-                                    t.print_search.select_actitem = item.num;
-                                }
-                            }
-
-                        }, show: false,
-                        current: {},
-                        list: [],
-                        count: 0,
-                        page: 1,
-                        loading: false,
-                        footer: {
-                            showFirstLastPage: true,
-                            disableItemsPerPage: true,
-                            itemsPerPageAllText: '',
-                            itemsPerPageText: '',
-                        },
-                    },
-                    search: {
-                        keyin1: '',
-                        order_no: '',
-                        subject: '',
-                        u_name: '',
-                        up_time1: '',
-                        up_time2: '',
-                        actItemTxt: '',
-                        introducerTxt: '',
-                        activity_num: '',
-                        country: '',
-                        country2: '',
-                        hasPrice: '',
-                    }
+                    //data_table: {
+                    //    loading: true,
+                    //    list: [],
+                    //    selected: [],
+                    //    singleSelect: false,
+                    //    count: 0,
+                    //    page: 1,
+                    //    pageSize: 10,
+                    //    header: [
+                    //        { text: '信眾', value: 'f_num' },
+                    //        { text: '報名單號', value: 'order_no' },
+                    //        { text: '收據號碼', value: 'receipt_num' },
+                    //        { text: '活動', value: 'act_num', align: 'start' },
+                    //        { text: '功德項目數量', value: 'item_count' },
+                    //        { text: '總金額', value: 'total_amt' },
+                    //        { text: '登錄人員', value: 'admin_num' },
+                    //        { text: '登錄時間', value: 'reg_time' },
+                    //        { text: '', value: 'slot_btn', sortable: false, align: 'end' }
+                    //    ],
+                    //    footer: {
+                    //        showFirstLastPage: true,
+                    //        itemsPerPageOptions: [5, 10, 20, 30],
+                    //    },
+                    //},
                 }
             },
-            mounted() {
-
+            components: {
+                'pre_order-component': httpVueLoader('./pre_order.vue'),
+                'pre_order_reg-component': httpVueLoader('./pre_order_reg.vue'),
             },
+            //watch: {
+            //},
+            //mounted() {
+            //   // this.loadData();
+            //},
             methods: {
-
-            },
-            watch: {
-
-            },
-            computed: {
-                pageCount() {
-                    return Math.ceil(this.data_table.count / this.data_table.pageSize)
+                changeView(item) {
+                    if (item.action === "add") {
+                        this.currentView = "pre_order_reg-component";
+                    } else if (item.action === "list") {
+                        this.currentView = "pre_order-component";
+                    }
                 },
-            }
-        });
+                //loadData(clearpage = false) {
+                //            const { sortBy, sortDesc, page, itemsPerPage } = this.options
+                //            //page = this.data_table.page;
+                //            let search = {}
+                //            const params = {
+                //                sortBy: sortBy[0], sortDesc: sortDesc[0],
+                //                page: clearpage ? '1' : page, pageSize: itemsPerPage
+                //            };
+                //            this.data_table.loading = true
+                //            axios
+                //                .post(HTTP_HOST + 'api/preOrder/GetPreOrder', search, { params: params })
+                //                .then(response => {
+                //                    console.log(response)
+                //                    this.data_table.list = response.data.list
+                //                    this.data_table.count = response.data.count;
+                //                    this.data_table.loading = false
+
+                //                    const dataToStore = JSON.stringify(this.data_table);
+                //                    //sessionStorage.setItem("order_list_cache", dataToStore);
+                //                })
+                //                .catch(error => console.log(error))
+                //        },
+            },
+
+            //computed: {
+            //    pageCount() {
+            //        return Math.ceil(this.detail_table.count / this.detail_table.pageSize)
+            //    },
+            //}
+        })
+        //Vue.filter('timeString', function (value, myFormat) {
+        //    return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
+        //});
+
+        //let VueApp = new Vue({
+        //    el: '#app',
+        //    vuetify: new Vuetify(vuetify_options),
+        //    data() {
+        //        return {
+        //            options: { multiSort: false },
+        //            search_options: { multiSort: false },
+        //            data_table: {
+        //                loading: true,
+        //                list: [],
+        //                selected: [],
+        //                singleSelect: false,
+        //                count: 0,
+        //                page: 1,
+        //                pageSize: 10,
+        //                header: [
+        //                    { text: '信眾', value: 'f_num' },
+        //                    { text: '報名單號', value: 'order_no' },
+        //                    { text: '收據號碼', value: 'receipt_num' },
+        //                    { text: '活動', value: 'act_num', align: 'start' },
+        //                    { text: '功德項目數量', value: 'item_count' },
+        //                    { text: '總金額', value: 'total_amt' },
+        //                    { text: '登錄人員', value: 'admin_num' },
+        //                    { text: '登錄時間', value: 'reg_time' },
+        //                    { text: '', value: 'slot_btn', sortable: false, align: 'end' }
+        //                ],
+        //                footer: {
+        //                    showFirstLastPage: true,
+        //                    itemsPerPageOptions: [5, 10, 20, 30],
+        //                },
+        //            },
+        //            search_dialog: {
+        //                controls: {
+        //                    search1: {
+        //                        id: 'search1',
+        //                        title: '國籍',
+        //                        text_prop: 'name_zh',
+        //                        value_prop: 'id',
+        //                        keys: [
+        //                            { id: 'keyword', title: '關鍵字' },
+        //                        ],
+        //                        api_url: HTTP_HOST + 'api/country/GetList',
+        //                        columns: [
+        //                            { id: 'id', title: '代碼' },
+        //                            { id: 'name_en', title: '英文短名稱' },
+        //                            { id: 'name_zh', title: '中文名稱' },
+        //                        ],
+        //                        selected: {},
+        //                        select(item, t) {
+        //                            t.search.country = item.id;
+        //                            t.search.country2 = '';
+        //                        }
+        //                    },
+        //                    search2: {
+        //                        id: 'search2',
+        //                        title: '報名活動',
+        //                        text_prop: 'subject',
+        //                        value_prop: 'num',
+        //                        keys: [
+        //                            { id: 'subject', title: '活動名稱', value: '' },
+        //                            { id: 'kindTxt', title: '活動分類' },
+        //                        ],
+        //                        api_url: HTTP_HOST + 'api/activity/GetList',
+        //                        columns: [
+        //                            { id: 'subject', title: '活動名稱' },
+        //                            { id: 'kindTxt', title: '活動分類' },
+        //                        ],
+        //                        selected: {},
+        //                        select(item, t) {
+        //                            t.print_search.select_act = item.num;
+        //                        }
+        //                    },
+        //                    search3: {
+        //                        id: 'search3',
+        //                        title: '活動品項',
+        //                        text_prop: 'subject',
+        //                        value_prop: 'num',
+        //                        keys: [
+        //                            { id: 'subject', title: '項目名稱', value: '' },
+        //                            { id: 'kindTxt', title: '項目分類' },
+        //                            { id: 'num', visible: false },
+        //                        ],
+        //                        api_url: HTTP_HOST + 'api/activity/GetOrderList',
+        //                        columns: [
+        //                            { id: 'subject', title: '項目名稱' },
+        //                            { id: 'kindTxt', title: '項目分類' },
+        //                        ],
+        //                        selected: {},
+        //                        select(item, t) {
+        //                            t.print_search.select_actitem = item.num;
+        //                        }
+        //                    }
+
+        //                }, show: false,
+        //                current: {},
+        //                list: [],
+        //                count: 0,
+        //                page: 1,
+        //                loading: false,
+        //                footer: {
+        //                    showFirstLastPage: true,
+        //                    disableItemsPerPage: true,
+        //                    itemsPerPageAllText: '',
+        //                    itemsPerPageText: '',
+        //                },
+        //            },
+        //            search: {
+        //                keyin1: '',
+        //                order_no: '',
+        //                subject: '',
+        //                u_name: '',
+        //                up_time1: '',
+        //                up_time2: '',
+        //                actItemTxt: '',
+        //                introducerTxt: '',
+        //                activity_num: '',
+        //                country: '',
+        //                country2: '',
+        //                hasPrice: '',
+        //            }
+        //        }
+        //    },
+        //    mounted() {
+        //        this.loadData()
+        //    },
+        //    methods: {
+        //        loadData(clearpage = false) {
+        //            const { sortBy, sortDesc, page, itemsPerPage } = this.options
+        //            //page = this.data_table.page;
+        //            let search = {}
+        //            const params = {
+        //                sortBy: sortBy[0], sortDesc: sortDesc[0],
+        //                page: clearpage ? '1' : page, pageSize: itemsPerPage
+        //            };
+        //            this.data_table.loading = true
+        //            axios
+        //                .post(HTTP_HOST + 'api/preOrder/GetPreOrder', search, { params: params })
+        //                .then(response => {
+        //                    console.log(response)
+        //                    this.data_table.list = response.data.list
+        //                    this.data_table.count = response.data.count;
+        //                    this.data_table.loading = false
+
+        //                    const dataToStore = JSON.stringify(this.data_table);
+        //                    //sessionStorage.setItem("order_list_cache", dataToStore);
+        //                })
+        //                .catch(error => console.log(error))
+        //        },
+        //        search_headers() {
+
+        //        },
+        //        search_select() {
+
+        //        }
+        //    },
+        //    watch: {
+
+        //    },
+        //    computed: {
+        //        pageCount() {
+        //            return Math.ceil(this.data_table.count / this.data_table.pageSize)
+        //        },
+        //    }
+        //});
     </script>
 </asp:Content>
 
diff --git a/web/admin/order/pre_index.aspx.cs b/web/admin/order/pre_index.aspx.cs
index d7cf0de..ee0d96a 100644
--- a/web/admin/order/pre_index.aspx.cs
+++ b/web/admin/order/pre_index.aspx.cs
@@ -5,7 +5,7 @@ using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 
-public partial class admin_order_pre_index : System.Web.UI.Page
+public partial class admin_order_pre_index :MyWeb.config
 {
     protected void Page_Load(object sender, EventArgs e)
     {
diff --git a/web/admin/order/pre_order.vue b/web/admin/order/pre_order.vue
new file mode 100644
index 0000000..27f2141
--- /dev/null
+++ b/web/admin/order/pre_order.vue
@@ -0,0 +1,127 @@
+<template>
+    <div id="content" class="container-fluid">
+        <v-btn @click.prevent="gotoAdd()" color="primary">新增</v-btn>
+        <v-data-table v-model="data_table.selected"
+                      :items="data_table.list"
+                      item-key="order_no"
+                      :options.sync="options"
+                      :headers="data_table.header"
+                      :footer-props="data_table.footer"
+                      :server-items-length="data_table.count"
+                      :loading="data_table.loading"
+                      :single-select="data_table.singleSelect"
+                      show-select
+                      hide-default-footer
+                      :page.sync="data_table.page"
+                      :items-per-page.sync="data_table.pageSize"
+                      class="elevation-1">
+
+            <template #item.slot_btn="{ item }">
+                <!--<a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>編輯</a>
+            <a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>-->
+            </template>
+        </v-data-table>
+        <v-container>
+            <v-row class="align-baseline" wrap>
+                <v-col cols="12" md="9">
+                    <v-pagination v-model="data_table.page"
+                                  :length="pageCount">
+                    </v-pagination>
+                </v-col>
+                <v-col class="text-truncate text-right" cols="12" md="2">
+                    共 {{ data_table.count }} 筆, 頁數:
+                </v-col>
+                <v-col cols="6" md="1">
+                    <v-text-field v-model="data_table.page"
+                                  type="number"
+                                  hide-details
+                                  dense
+                                  min="1"
+                                  :max="pageCount"
+                                  @input="data_table.page = parseInt($event, 10)"></v-text-field>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script>
+    module.exports = {
+        props: ['formData'],
+        data() {
+            return {
+                options: { multiSort: false },
+                search_options: { multiSort: false },
+                search: {},
+                data_table: {
+                    loading: true,
+                    list: [],
+                    selected: [],
+                    singleSelect: false,
+                    count: 0,
+                    page: 1,
+                    pageSize: 10,
+                    header: [
+                        { text: '信眾', value: 'f_num' },
+                        { text: '報名單號', value: 'order_no' },
+                        { text: '收據號碼', value: 'receipt_num' },
+                        { text: '活動', value: 'act_num'},
+                        { text: '功德項目數量', value: 'item_count' },
+                        { text: '總金額', value: 'total_amt' },
+                        { text: '登錄人員', value: 'admin_num' },
+                        { text: '登錄時間', value: 'reg_time' },
+                        { text: '', value: 'slot_btn', sortable: false, align: 'end' }
+                    ],
+                    footer: {
+                        showFirstLastPage: true,
+                        itemsPerPageOptions: [5, 10, 20, 30],
+                    },
+                },
+            }
+        },
+        mounted() {
+            this.loadData()
+        },
+        methods: {
+            gotoAdd() {
+                this.$emit('custom-event', { action: 'add' });
+            },
+            loadData(clearpage = false) {
+                const { sortBy, sortDesc, page, itemsPerPage } = this.options
+                //page = this.data_table.page;
+                let search = {}
+                const params = {
+                    sortBy: sortBy[0], sortDesc: sortDesc[0],
+                    page: clearpage ? '1' : page, pageSize: itemsPerPage
+                };
+                this.data_table.loading = true
+                axios
+                    .post(HTTP_HOST + 'api/preOrder/GetPreOrder', search, { params: params })
+                    .then(response => {
+                        console.log(response)
+                        this.data_table.list = response.data.list
+                        this.data_table.count = response.data.count;
+                        this.data_table.loading = false
+
+                        const dataToStore = JSON.stringify(this.data_table);
+                        //sessionStorage.setItem("order_list_cache", dataToStore);
+                    })
+                    .catch(error => console.log(error))
+            },
+            search_headers() {
+
+            },
+            search_select() {
+
+            }
+        },
+        watch: {
+
+        },
+        computed: {
+            pageCount() {
+                return Math.ceil(this.data_table.count / this.data_table.pageSize)
+            },
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/web/admin/order/pre_order_reg.vue b/web/admin/order/pre_order_reg.vue
new file mode 100644
index 0000000..2fcde44
--- /dev/null
+++ b/web/admin/order/pre_order_reg.vue
@@ -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>
\ No newline at end of file
diff --git a/web/admin/print/print_multi_new.aspx b/web/admin/print/print_multi_new.aspx
index 82180d6..cab2a1b 100644
--- a/web/admin/print/print_multi_new.aspx
+++ b/web/admin/print/print_multi_new.aspx
@@ -648,7 +648,7 @@
                 })
                 let content = $(`<div class="tablet-element print_id "></div>`)
                     .css({
-                        position: "absolute", left: "1mm", top: "4mm", fontSize: '12px',
+                        position: "absolute", left: "1mm", top: "5mm", fontSize: '16px',
                         "z-index": 9999,
                         "align-items": "center"
 
@@ -715,7 +715,7 @@
                         page-break-inline:avoid;
                         break-after: page !important;
                         page-break-after: always !important;
-                        margin: 0 !important;
+                        margin: 4mm 0 0 0 !important;
                         border: none !important;
                         background-repeat: no-repeat;
                         background-size: 100% 100%;