hanhai88
/
tcs-front-tabler


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
							<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>订单-SIMANC TCS</title>
    <!-- 在页面加载前应用保存的主题设置，避免闪烁 -->
    <script src="../js/themePreSet.js"></script>
    <!-- 预渲染导航栏，减少延迟 -->
    <script src="../js/headerPreRender.js"></script>
    <!-- Tabler Core CSS -->
    <link
      href="../assets/css/app.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="page">
      <!-- 顶部导航栏容器 -->
      <div id="tcs-header-container" class="tcs-header-container"></div>
      <header
        class="navbar navbar-expand-md tcs-container-space-x tcs-navbar-compact justify-content-between flex-column flex-md-row"
      >
        <div class="d-flex flex-column flex-md-row w-100 align-items-start align-items-md-center mb-2 mb-md-0">
          <div class="d-flex flex-wrap align-items-center me-md-auto">
            <div class="d-flex flex-wrap align-items-center">
              <div class="tcs-filter-group mb-2 mb-md-0 me-md-2">
                <label class="form-label mb-0 me-2 d-inline">开始:</label>
                <input
                  type="date"
                  class="form-control tcs-form-item"
                  value="2025-03-16"
                  id="date-start"
                />
              </div>
              <div class="tcs-filter-group mb-2 mb-md-0 me-md-2">
                <label class="form-label mb-0 me-2 d-inline">结束:</label>
                <input
                  type="date"
                  class="form-control tcs-form-item"
                  value="2025-03-16"
                  id="date-end"
                />
              </div>
              <div class="tcs-filter-group mb-2 mb-md-0">
                <label class="form-label mb-0 me-2 d-inline">状态:</label>
                <div>
                  <select class="form-select tcs-form-item" id="status-filter">
                    <option>完成</option>
                    <option selected>全部</option>
                    <option>待处理</option>
                    <option>进行中</option>
                    <option>已取消</option>
                    <option>已超时</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex align-items-center ms-md-auto mt-2 mt-md-0">
            <button class="btn btn-primary tcs-form-item" data-bs-toggle="modal" data-bs-target="#addOrderModal">
              <i class="ti ti-plus me-1"></i>添加
            </button>
            <button class="btn btn-danger ms-2 tcs-form-item" data-bs-toggle="modal" data-bs-target="#cancelAllModal">
              <!-- <i class="ti ti-trash me-1"></i> -->取消所有
            </button>
          </div>
        </div>
      </header>
      <!-- 页面内容 -->
      <div
        class="page-wrapper"
      >
      <div class="card tcs-card-full border-0">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table
              class="table table-vcenter card-table table-hover tcs-table-compact"
              id="data-table"
            >
              <thead>
                <tr>
                  <th>ID</th>
                  <th>时间</th>
                  <th>从</th>
                  <th>到</th>
                  <th>货物</th>
                  <th>期限</th>
                  <th>开始</th>
                  <th>结束</th>
                  <th>状态</th>
                  <th class="w-1">操作</th>
                </tr>
              </thead>
              <tbody>
                <!-- 表格内容将由JavaScript动态生成 -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="card-footer d-flex align-items-center tcs-card-footer-compact flex-column flex-md-row">
          <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center mb-2 mb-md-0 w-100 w-md-auto">
            <span id="pagination-info" class="text-secondary mb-2 mb-md-0">
              <!-- 分页信息将由JavaScript动态生成 -->
            </span>
            <div class="ms-0 ms-md-3 d-flex align-items-center">
              <span class="me-2 text-secondary">每页显示</span>
              <div class="dropdown d-inline-block">
                <button
                  class="btn dropdown-toggle px-2 tcs-form-item-pagiton"
                  type="button"
                  data-bs-toggle="dropdown"
                >
                  <span id="current-page-size">10</span>
                  <span class="ms-1 d-none d-sm-inline">条记录</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="10"
                    >10</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="20"
                    >20</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="50"
                    >50</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="100"
                    >100</a
                  >
                </div>
              </div>
            </div>
          </div>
          <ul class="pagination m-0 ms-md-auto mt-2 mt-md-0" id="pagination-controls">
            <!-- 分页控件将由JavaScript动态生成 -->
          </ul>
        </div>
      </div>
    </div>
<!-- 添加订单模态框 -->
<div class="modal modal-blur fade" id="addOrderModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">添加新订单</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addOrderForm" class="needs-validation" novalidate>
          <div class="mb-3 row">
            <label class="col-3 col-form-label required text-end">从</label>
            <div class="col">
              <input type="text" class="form-control" name="from" placeholder="起始地点" required>
              <div class="invalid-feedback">请输入起始地点</div>
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-3 col-form-label required text-end">到</label>
            <div class="col">
              <input type="text" class="form-control" name="to" placeholder="目的地" required>
              <div class="invalid-feedback">请输入目的地</div>
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-3 col-form-label required text-end">货物</label>
            <div class="col">
              <input type="text" class="form-control" name="good" placeholder="货物描述" required>
              <div class="invalid-feedback">请输入货物描述</div>
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-3 col-form-label required text-end">期限</label>
            <div class="col">
              <input type="datetime-local" class="form-control" name="deadline" required>
              <div class="invalid-feedback">请选择期限时间</div>
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-3 col-form-label text-end">状态</label>
            <div class="col">
              <select class="form-select" name="status">
                <option value="待处理" selected>待处理</option>
                <option value="进行中">进行中</option>
              </select>
            </div>
          </div>
          <div class="mb-3 row">
            <label class="col-3 col-form-label text-end">备注</label>
            <div class="col">
              <textarea class="form-control" name="notes" rows="3" placeholder="订单备注信息"></textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer tcs-modal-footer">
        <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="saveOrderBtn">保存</button>
      </div>
    </div>
  </div>
</div>
<!-- 取消所有订单的小型确认模态框 -->
<div class="modal modal-blur fade" id="cancelAllModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-title">确认取消所有</div>
        <div>您确定要取消所有待处理和进行中的订单吗？此操作无法撤销。</div>
      </div>
      <div class="modal-footer tcs-modal-footer">
        <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="confirmCancelAllBtn">确认</button>
      </div>
    </div>
  </div>
</div>
<!-- 取消单个订单的小型确认模态框 -->
<div class="modal modal-blur fade" id="cancelOrderModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-title">确认取消</div>
        <div>您确定要取消此订单吗？此操作无法撤销。</div>
      </div>
      <div class="modal-footer tcs-modal-footer">
        <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="confirmCancelOrderBtn">确认</button>
      </div>
    </div>
  </div>
</div>
    <!-- Tabler Core JS -->
    <script src="../assets/js/tabler.min.js"></script>
    <script src="../assets/js/jquery-3.7.1.min.js"></script>
    <script src="../js/themePoc.js"></script>
    <!-- 表格组件JS -->
    <script src="../js/tcsTable.js"></script>
    <!-- 模态框组件JS -->
    <script src="../js/tcsModal.js"></script>
    <!-- 页面特定的JavaScript -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 配置表格选项
        const tableOptions = {
          tableId: "data-table",
          paginationInfoId: "pagination-info",
          paginationControlsId: "pagination-controls",
          pageSizeId: "current-page-size",
          pageSizeItemClass: "page-size-item",
          defaultPageSize: 10,
          columns: [
            { field: "id", title: "ID", className: "tcs-table-id-column" },
            { 
              field: "orderTime", 
              title: "时间", 
              className: "tcs-table-time-column",
              formatter: function(value) {
                return formatDateTime(value);
              }
            },
            { field: "from", title: "从", className: "tcs-table-from-column" },
            { field: "to", title: "到", className: "tcs-table-to-column" },
            { field: "good", title: "货物", className: "tcs-table-goods-column" },
            { 
              field: "deadline", 
              title: "期限", 
              className: "tcs-table-time-column", 
              defaultValue: "-",
              formatter: function(value) {
                return formatDateTime(value);
              }
            },
            { 
              field: "startTime", 
              title: "开始", 
              className: "tcs-table-time-column", 
              defaultValue: "-"
            },
            { 
              field: "endTime", 
              title: "结束", 
              className: "tcs-table-time-column", 
              defaultValue: "-"
            },
            { 
              field: "status", 
              title: "状态", 
              className: "tcs-table-status-column",
              formatter: function(value) {
                let badgeClass = "";
                switch (value.text) {
                  case "进行中": badgeClass = "badge bg-success-lt"; break;
                  case "待处理": badgeClass = "badge bg-warning-lt"; break;
                  case "已完成": badgeClass = "badge bg-info-lt"; break;
                  case "已取消": badgeClass = "badge bg-danger-lt"; break;
                  case "已超时": badgeClass = "badge bg-secondary-lt"; break;
                  default: badgeClass = "badge bg-secondary-lt";
                }
                
                const badge = `<span class="${badgeClass}" style="width:100%;text-align:center">${value.text}</span>`;
                return badge;
              }
            },
            { 
              field: "action", 
              title: "操作", 
              className: "tcs-table-action-column",
              formatter: function(value, row) {
                if (row.status.text === "待处理" || row.status.text === "进行中") {
                  return `<button class="btn tcs-table-oper-btn" data-bs-toggle="modal" data-bs-target="#cancelOrderModal" data-id="${row.id}">取消</button>`;
                } else {
                  return `<button class="btn tcs-table-oper-btn" disabled>取消</button>`;
                }
              }
            }
          ]
        };

        // 生成模拟数据
        const orderData = TcsTable.generateOrderData(109);
        
        // 初始化表格
        const orderTable = new TcsTable(tableOptions, orderData);
        
        // 添加日期时间筛选功能
        const dateStart = document.getElementById("date-start");
        const dateEnd = document.getElementById("date-end");
        const statusFilter = document.getElementById("status-filter");

        // 日期变化时触发查询
        dateStart.addEventListener("change", applyFilters);
        dateEnd.addEventListener("change", applyFilters);

        // 状态选择变化时触发查询
        statusFilter.addEventListener("change", applyFilters);

        // 应用筛选函数
        function applyFilters() {
          const startDate = dateStart.value ? new Date(dateStart.value) : null;
          const endDate = dateEnd.value ? new Date(dateEnd.value) : null;
          const statusValue = statusFilter.value;

          orderTable.filter(function(order) {
            // 检查日期范围
            const orderDate = new Date(order.orderTime.replace(" ", "T"));
            const dateInRange =
              (!startDate || orderDate >= startDate) &&
              (!endDate || orderDate <= endDate);

            // 检查状态
            const statusMatch =
              statusValue === "全部" || order.status.text === statusValue;

            return dateInRange && statusMatch;
          });
        }

        // 时间格式化函数
        function formatDateTime(dateTimeStr) {
          if (!dateTimeStr || dateTimeStr === "-") return "-";
          
          const date = new Date(dateTimeStr.replace(" ", "T"));
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
        }
        
        // ---------------------初始化模态框组件---------------------
        
        // 添加订单模态框
        const addOrderModal = new TcsModal({
          modalId: 'addOrderModal',
          confirmBtnId: 'saveOrderBtn',
          formId: 'addOrderForm',
          onConfirm: function(data) {
            // 这里添加保存订单的逻辑
            console.log('保存新订单', data);
            
            // 显示成功提示
            TcsNotify.show('订单已添加成功！', 'success');
          }
        });
        
        // 取消所有订单模态框
        const cancelAllModal = new TcsModal({
          modalId: 'cancelAllModal',
          confirmBtnId: 'confirmCancelAllBtn',
          onConfirm: function() {
            // 这里添加取消所有订单的逻辑
            console.log('取消所有待处理和进行中的订单');
            
            // 显示成功提示
            TcsNotify.show('所有符合条件的订单已取消', 'success');
          }
        });
        
        // 取消单个订单模态框
        let currentOrderId = null;
        
        const cancelOrderModal = new TcsModal({
          modalId: 'cancelOrderModal',
          confirmBtnId: 'confirmCancelOrderBtn',
          onShow: function(relatedTarget) {
            // 获取要取消的订单ID
            currentOrderId = relatedTarget ? relatedTarget.getAttribute('data-id') : null;
          },
          onConfirm: function() {
            // 这里添加取消单个订单的逻辑
            console.log('取消订单ID:', currentOrderId);
            
            // 显示成功提示
            TcsNotify.show(`订单 #${currentOrderId} 已取消`, 'success');
            
            // 重置当前订单ID
            currentOrderId = null;
          }
        });
      });
    </script>
  </body>
</html>