17168ERP/web/admin/ancestraltablet/ancestraltabletuselist/index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="admin_ancestraltablet_ancestraltabletuselist_index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
    <nav>
        <!-- 
            <a :href="'create.aspx'" class="btn btn-primary">
                新增使用申請
            </a>
       -->
        <div style="display: inline">
            <span>
                查詢條件 :
            </span>
            <input v-model="search.registrantUserName" class="form-control" style="display:inline-block; width: auto;"
                placeholder="請輸入登記人"
                />
            <button type="button" class="btn btn-primary" @click="handleSearch">搜尋</button>
            <button type="button" class="btn btn-primary" @click="clearSearch">清除條件</button>
        </div>
    </nav>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    神主牌使用記錄
    <div>
        <v-data-table
            :items="registrantList"
            :headers="headers"
            hide-default-footer>
            <template #item.registerdate="{item}">
                {{item.registerDate |timeString('YYYY-MM-DD')}}
            </template>
            <template #item.startdate="{item}">
                {{item.startDate |timeString('YYYY-MM-DD')}}
            </template>
            <template #item.enddate="{item}">
                {{item.endDate |timeString('YYYY-MM-DD')}}
            </template>
            <template #item.createdat="{item}">
                {{item.createdAt |timeString('YYYY-MM-DD HH:MM')}}
            </template>
            <template #item.islongterm="{item}">
                {{item.isLongTerm ? "是": "否"}}
            </template>
            <template #item.isactive="{item}">
                {{item.isActive ? "是" : "否"}}
            </template>
            <template #item.actions="{item}">
                <a :href="'detail.aspx?registrantCode=' + item.registrantCode" class="btn btn-primary">詳細資訊</a>
            </template>
        </v-data-table>
        <v-container>
            <v-row class="align-baseline" wrap="false">
                <v-col cols="12" md="8">
                    <v-pagination
                        v-model="options.page"
                        :length="pageCount">
                    </v-pagination>
                </v-col>
                <v-col class="text-truncate text-right" cols="12" md="2">
                    共 {{ total }} 筆, 頁數:
                </v-col>
                <v-col cols="6" md="1">
                    <v-text-field
                        v-model="options.page"
                        type="number"
                        hide-details
                        dense
                        min="1"
                        :max="pageCount"
                        @input="options.page = parseInt($event, 10)"
                    ></v-text-field>
                </v-col>
                <!-- 每頁條數選擇 -->
                <v-col cols="12" md="1">
                    <v-select
                        v-model="options.itemsPerPage"
                        :items="[5, 10, 20, 50]"
                        label="每頁條數"
                        dense
                        hide-details
                        style="width: 100px;"
                    ></v-select>
                </v-col>
            </v-row>
        </v-container>
    </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');
        });
        new Vue({
            el: "#app",
            vuetify: new Vuetify(vuetify_options),
            data() {
                return {
                    registrantList: [],
                    headers: [
                        { text: '登記編號', value: 'registrantCode' },
                        { text: '姓名', value: 'name' },
                        { text: '電話', value: 'phone' },
                        { text: '住址', value: 'address' },
                        { text: '登記日期', value: 'registerdate' },
                        { text: '費用', value: 'price' },
                        { text: '牌位編號', value: 'positionId' },
                        { text: '開始時間', value: 'startdate' },
                        { text: '結束時間', value: 'enddate' },
                        { text: '是否長期', value: 'islongterm' },
                        { text: '是否有效', value: 'isactive' },
                        { text: '創建時間', value: 'createdat' },
                        { text: '', value: 'actions' },
                    ],
                    options: {
                        page: 1,          // 當前頁
                        itemsPerPage: 10, // 每頁條數
                        sortBy: [],
                        sortDesc: []
                    },
                    search: {
                        registrantUserName: null,
                    },
                    total: 0,
                    loading: false,
                }
            },
            methods: {
                getRegistrantListMethod() {
                    axios.get(HTTP_HOST + 'api/ancestraltablet/registrant/getlist')
                        .then((res) => {
                            this.registrantList = res.data;
                        }).catch((error) => {
                            alert("載入失敗")
                        })
                },
                getRegistrantListByPageMethod() {
                    if (this.loading) return;
                    this.loading = true;
                    axios.post(HTTP_HOST + 'api/ancestraltablet/registrant/getlistbypage', {
                        page: this.options.page,
                        pageSize: this.options.itemsPerPage,
                        searchName: this.search.registrantUserName
                    })
                        .then((res) => {
                            this.registrantList = res.data.data;
                            this.total = res.data.total;
                        }).catch((err) => {
                            console.log(err);
                        }).finally(() => {
                            this.loading = false;
                        });
                },
                resetTableOptions() {
                    this.options = {
                        page: 1,
                        itemsPerPage: 10,
                        sortBy: [],
                        sortDesc: []
                    };
                },
                clearSearch() {
                    this.search.registrantUserName = null;
                    this.resetTableOptions();
                },
                handleSearch() {
                    this.resetTableOptions();
                }
            },
            watch: {
                options: {
                    handler() {
                        this.getRegistrantListByPageMethod();
                    },
                    deep: true,
                }
            },
            mounted() {
                this.getRegistrantListByPageMethod()
            },
            computed: {
                pageCount() {
                    return Math.ceil(this.total / this.options.itemsPerPage)
                },
            }

        })
    </script>
</asp:Content>