17168ERP/web/admin/printpw/yulan.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="yulan.aspx.cs" Inherits="admin_printpw_yulan" %>
<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>

<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="page_nav" runat="Server">
    <div class="mb-2 mb-sm-0">
        <label>請選擇需要預覽的活動</label>
        <select class="form-select" v-model="selected_activity">
            <option value="-1">請選擇活動</option>
            <option v-for="item in activity_list" :key="item.activity_num" :value="item.num">
                {{item.subject}}
            </option>
        </select>
    </div>
    <div>
        <a @click="yulan_print" class="btn btn-primary">列印預覽牌位</a>
    </div>
</asp:Content>

<asp:Content ID="Script_Content" 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),
            data() {
                return {
                    activity_list: [],
                    order_data: {
                        loading: false,
                        list: [],
                        selected: [],
                        count: 0,
                        header: [
                            { text: '單號', value: 'order_no' },
                            { text: '姓名', value: 'u_name' },
                            { text: '報名日期', value: 'up_time' },
                            { text: '報名活動', value: 'subject', align: 'start' },
                            { text: '單據狀態', value: 'keyin1_txt' },
                            { text: '牌位数量', value: 'detail' },
                            { text: '报名项目', value: 'slot_type' },
                            { text: '預覽', value: 'print'}
                        ],

                    },
                    selected_activity: '-1',
                    search: {
                        kind: 0,
                        subject: '',
                    }
                }
            },
            methods: {
                get_activity() {
                    //const { sortBy, sortDesc, page, itemsPerPage } = this.options
                    const params = {
                        page: 1, pageSize: 10
                    };
                    //this.data_table.loading = true
                    this.order_data.loading = true
                    axios
                        .post(HTTP_HOST + 'api/activity/GetList', this.search, { params: params })
                        .then(response => {
                            this.activity_list = response.data.list
                            //this.data_table.count = response.data.count;
                            //this.data_table.loading = false
                            this.order_data.loading = false
                        })
                        .catch(error => console.log(error))
                },
                yulan_print() {
                    _url = HTTP_HOST + '/admin/printpw/index.aspx';
                    var form = document.createElement("form");
                    form.method = "POST";
                    form.action = _url;
                    form.target = "_blank"; // Open the result in a new tab

                    // Helper function to add hidden fields
                    const addHiddenField = (name, value) => {
                        const hiddenField = document.createElement("input");
                        hiddenField.type = "hidden";
                        hiddenField.name = name;
                        hiddenField.value = value;
                        form.appendChild(hiddenField);
                    };
                    addHiddenField("activity_num", this.selected_activity);
                    document.body.appendChild(form); // Not entirely sure if this is necessary
                    form.submit();
                    document.body.removeChild(form);
                },
                yulan_single(item) {
                    _url = HTTP_HOST + '/admin/printpw/index.aspx';
                    var form = document.createElement("form");
                    form.method = "POST";
                    form.action = _url;
                    form.target = "_blank"; // Open the result in a new tab

                    // Helper function to add hidden fields
                    const addHiddenField = (name, value) => {
                        const hiddenField = document.createElement("input");
                        hiddenField.type = "hidden";
                        hiddenField.name = name;
                        hiddenField.value = value;
                        form.appendChild(hiddenField);
                    };
                    addHiddenField("order_no", item.order_no);
                    document.body.appendChild(form); // Not entirely sure if this is necessary
                    form.submit();
                    document.body.removeChild(form);
                },
            },
            mounted() {
                this.get_activity()
            },
            watch: {
                selected_activity(newValue, oldValue) {
                    const params = {
                        page: 1, pageSize: 100
                    };
                    console.log(newValue)
                    if (newValue !== oldValue) {
                        axios
                            .post(HTTP_HOST + 'api/orderdetail/GetList', { activity_num: this.selected_activity }, { params: params })
                            .then(response => {
                                this.order_data.list = response.data.list
                            })
                            .catch(error => console.log(error))
                    }
                },
                'order_data.selected'(newValue, oldValue){
                    console.log(newValue)
                }
            }
        })
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <div id="content" class="container-md">
        <v-data-table
            v-model="order_data.selected"
            :items="order_data.list"
            item-key="order_no"
            :headers="order_data.header"
            :loading="order_data.loading"
            show-select
            class="elevation-1">
            <template #item.detail ="{item}">
                {{item.detail.count}}
            </template>
            <template #item.slot_type ="{item}">
                {{item.detail.actItem?.substring(0,3)}}
            </template>
            <template #item.print="{item}">
                <v-icon color="blue" class="mr-2" @click="yulan_single(item);"  >
                    mdi-printer
                </v-icon>
            </template>
        </v-data-table>
    </div>
</asp:Content>