gary_wms/wms/report_system/signed_overdue_date.php

<?php
include_once("../header.php");
require_once("./conn.php");

include("./api/getSingedDetails.php");
include("./api/getDepartment.php");
include("./api/getUser.php");



$sd = new signDetails();
$d = new Department();
$u = new User();


$signDetails = $sd->getSingDetails();
$deparetment_options = $d->getDepartment();
$user_options = $u->getUser(null);

$now_page = $sd->getNowPage();
$end_page = $sd->getEndPage();
$all_count = $sd->getSingDetailsAllCount();


?>
<link rel="stylesheet" href="./styles/style.css?id=<?php echo date("YmdHis"); ?>">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
<script defer src="./js/alpinejs/cdn.min.js"></script>
<script src="./js/axios/axios.min.js"></script>

<div class="form" method="post" x-data="signed_overdue_date_data">
    <table class="table table-bordered query-table table-striped table-bordered display compact" style="width:99%;margin-left:.5%">
        <thead>
            <tr>
                <td colspan="8">
                    <h3 style='text-align:center'>部門逾期待簽查詢</h3>
                </td>
            </tr>
        </thead>
        <tbody style="font-weight: bolder;margin-bottom: 20px">
            <tr>
                <td style="vertical-align: middle">系統名稱</td>
                <td>
                    <select class="form-control" x-model="data.system_name">
                        <template x-for="option in data.system_name_options">
                            <option :selected="option.value == data.system_name" :value="option.value" x-text="option.text"></option>
                        </template>
                    </select>
                </td>
                <td style="vertical-align: middle">部門名稱</td>
                <td>
                    <select class="form-control" x-model="data.department_id">
                        <template x-for="option in data.deparetment_options">
                            <option :selected="option.value == data.depart_name" :value="option.value" x-text="option.text"></option>
                        </template>
                    </select>
                </td>
                <td style="vertical-align: middle">人員名稱</td>
                <td>
                    <select class="form-control" x-model="data.user_id">
                        <template x-for="option in data.user_options">
                            <option :selected="option.value == data.depart_name" :value="option.value" x-text="option.text"></option>
                        </template>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="6" style="text-align: center">
                    <button @click="search()" :disabled="searchLoading" type="button" class="btn btn-primary btn-sm savebtn">
                        <template x-if="!searchLoading">
                            <span>查詢</span>
                        </template>
                        <template x-if="searchLoading">
                            <div class="loader"></div>
                        </template>
                    </button>
                    <button @click="download()" :disabled="downloadLoading" type="button" class="btn btn-primary btn-sm savebtn">
                        <template x-if="!downloadLoading">
                            <span>下載</span>
                        </template>
                        <template x-if="downloadLoading">
                            <div class="loader"></div>
                        </template>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>

    <table class="table table-bordered query-table table-striped table-bordered display compact" style="width:99%;margin-left:.5%">
        <thead>
            <tr>
                <th colspan="9">
                    <nav aria-label="Page navigation" class="text-left;" style="display:inline;float:left;">
                        <ul class="pagination" style="margin:0;display:inline;">
                            <li class="page-item">
                                <a class="page-link" href="#">
                                    <span style="color:black;" x-text='"總筆數:"+ data.all_count'></span>
                                </a>
                            </li>
                            <li class="page-item" style="margin:0;display:inline;">
                                <a class="page-link">
                                    <span style="color:black;">每頁筆數:</span>
                                    <select x-model="data.per" style='height:100%;width:50px;margin: 0;padding: 0;text-align:center;display:inline;'>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="500">500</option>
                                    </select>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav aria-label="Page navigation" class="text-right" style="display:inline;float:right;">
                        <ul class="pagination" style="margin:0;">
                            <li class="page-item">
                                <a class="page-link">
                                    <input @change="search()" type='text' style='height:100%;width:150px;margin: 0;padding: 0;' x-model="data.search" placeholder="搜尋" />
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" @click="goFirstPage()">第一頁</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" @click="goLastPage()"><</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link">
                                    <input type='number' style='height:100%;width:60px;margin: 0;padding: 0;text-align:center;' min='1' max='<?php echo $end_page; ?>' x-model='data.now_page' />
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" @click="goNextPage()">></a>
                            </li>
                            <li class="page-item">
                                <span style="color:black;" x-text='"共"+ data.end_page +"頁"'></span>
                            </li>
                            <li class="page-item">
                                <a class="page-link" @click="goEndPage()">最後一頁</a>
                            </li>
                        </ul>
                    </nav>
                </th>
            </tr>
            <tr>
                <th>序號</th>
                <th>表單序號</th>
                <th>系統名稱</th>
                <th>流程名稱</th>
                <th>接收日期</th>
                <th>當前簽核者</th>
                <th>姓名</th>
                <th>所屬部門</th>
                <th>逾期天數</th>
            </tr>
        </thead>
        <tbody>
        <template x-for="(user, index) in data.signDetails" :key="index">
                <tr>
                    <td x-text="index+1"></td>
                    <td x-text="user.form_key"></td>
                    <td x-text="user.system_name"></td>
                    <td x-text="user.flow_name"></td>
                    <td x-text="user.update_date"></td>
                    <td x-text="user.current_assigner"></td>
                    <td x-text="user.user_name"></td>
                    <td x-text="user.depart_name"></td>
                    <td x-text="user.diff_days"></td>
                </tr>
            </template>
        </tbody>
    </table>
</div>

<script src="./js/alpine.js?id=<?php echo date("YmdHis"); ?>"></script>

<script>
    const signDetails = [...<?php echo $signDetails; ?>];
    const deparetment_options = [...<?php echo $deparetment_options; ?>];
    const user_options = [...<?php echo $user_options; ?>];
    const now_page = <?php echo $now_page; ?>;
    const end_page = <?php echo $end_page; ?>;
    const all_count = <?php echo $all_count; ?>;
    const search = "";
</script>