Chengfei_LiTiKu
/
eam-offline-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>开始盘点</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="stylesheet" href="../../js/vant@2.12/index.css" />
    <script src="../../js/vant@2.12/vue.js"></script>
    <script src="../../js/vant@2.12/vant.js"></script>

    <style>
      /* 防止Vue模板闪烁 */
      [v-cloak] {
        display: none !important;
      }

      /* 页面加载动画 */
      .page-loading {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 9999;
      }

      .page-loading .loading-text {
        margin-top: 16px;
        color: #666;
        font-size: 14px;
      }

      body {
        background: #f5f5f5;
        min-height: 100vh;
        margin: 0;
        padding: 0;
      }

      .main-container {
        background: #f5f5f5;
        min-height: calc(100vh - 46px);
        padding-bottom: 20px;
      }

      .fixed-header {
        position: fixed;
        top: 46px;
        left: 0;
        right: 0;
        z-index: 999;
        background: #f5f5f5;
      }

      .steps-container {
        background: white;
        padding: -2px 16px 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      }

      .info-card {
        background: white;
        padding: 0 16px;
      }

      .info-row {
        display: flex;
        padding: 8px 0;
        font-size: 14px;
        color: #333;
        line-height: 1.6;
      }

      .info-label {
        color: #666;
        margin-right: 8px;
        flex-shrink: 0;
      }

      .info-value {
        color: #333;
        font-weight: 500;
      }

      .tabs-wrapper {
        position: fixed;
        top: 186px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        background: #f5f5f5;
        padding: 0 6px;
      }

      .tabs-container {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        height: 100%;
      }

      /* 重写Vant Tabs样式 */
      .tabs-container .van-tabs__content {
        height: calc(100vh - 230px);
      }

      .tabs-container .van-tab__pane {
        height: 100%;
        overflow: hidden;
      }

      .tab-content {
        height: calc(100vh - 230px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .asset-item {
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        background: white;
      }

      .asset-item:last-child {
        border-bottom: none;
      }

      /* 待盘明细样式 */
      .pending-item {
        position: relative;
      }

      .pending-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        background: #ff9800;
        border-radius: 2px;
      }

      .pending-item .asset-name {
        font-size: 15px;
        color: #333;
        font-weight: 500;
        margin-bottom: 8px;
        padding-left: 12px;
      }

      .pending-item .asset-no {
        font-size: 13px;
        color: #999;
        padding-left: 12px;
      }

      .pending-badge {
        display: inline-block;
        background: #fff7e6;
        color: #ff9800;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 8px;
      }

      /* 已盘样式 */
      .checked-item {
        position: relative;
        background: #f6ffed;
      }

      .checked-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        background: #52c41a;
        border-radius: 2px;
      }

      .checked-item .asset-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        padding-left: 12px;
      }

      .checked-item .asset-name {
        font-size: 15px;
        color: #333;
        font-weight: 500;
        flex: 1;
      }

      .checked-icon {
        color: #52c41a;
        font-size: 20px;
      }

      .checked-item .asset-no {
        font-size: 13px;
        color: #666;
        padding-left: 12px;
      }

      .checked-time {
        font-size: 12px;
        color: #999;
        margin-top: 6px;
        padding-left: 12px;
      }

      .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #999;
      }

      .empty-icon {
        font-size: 64px;
        margin-bottom: 16px;
      }

      .loading-more {
        text-align: center;
        padding: 16px;
        color: #999;
        font-size: 14px;
      }
    </style>
  </head>

  <body>
    <!-- 页面加载指示器 -->
    <div class="page-loading" id="pageLoading">
      <van-loading size="24px" color="#1890ff">加载中...</van-loading>
    </div>

    <div id="app" v-cloak>
      <!-- 顶部导航栏 -->
      <van-nav-bar
        title="开始盘点"
        left-text="返回"
        left-arrow
        @click-left="goBack"
        :fixed="true"
      >
        <template #right>
          <span @click="goToSync" style="color: #1890ff; font-size: 14px"
            >去同步</span
          >
        </template>
      </van-nav-bar>

      <!-- 固定头部区域 -->
      <div class="fixed-header">
        <!-- 步骤条 -->
        <div class="steps-container">
          <van-steps :active="1" active-color="#1890ff">
            <van-step>选择盘点单</van-step>
            <van-step>开始盘点</van-step>
          </van-steps>
        </div>

        <!-- 盘点单信息 -->
        <div class="info-card">
          <div class="info-row">
            <span class="info-label">盘点名称:</span>
            <span class="info-value">{{ inventoryInfo.name }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">盘点单号:</span>
            <span class="info-value">{{ inventoryInfo.documentNo }}</span>
          </div>
        </div>
      </div>

      <!-- Tab切换区域（固定） -->
      <div class="tabs-wrapper">
        <div class="tabs-container">
          <van-tabs
            v-model="activeTab"
            color="#1890ff"
            @change="onTabChange"
            swipeable
          >
            <!-- 待盘明细 -->
            <van-tab :title="'待盘(' + pendingTotal + ')'">
              <div class="tab-content">
                <van-list
                  v-model="pendingLoading"
                  :finished="pendingFinished"
                  finished-text="没有更多了"
                  @load="onLoadPending"
                >
                  <div
                    v-for="item in displayedPendingList"
                    :key="item.id"
                    class="asset-item pending-item"
                  >
                    <div class="asset-name">
                      {{ item.assetName }}
                      <span class="pending-badge">待盘</span>
                    </div>
                    <div class="asset-no">资产编号: {{ item.no }}</div>
                  </div>
                </van-list>

                <!-- 空状态 -->
                <div
                  v-if="displayedPendingList.length === 0 && !pendingLoading"
                  class="empty-state"
                >
                  <div class="empty-icon">✅</div>
                  <div>暂无待盘资产</div>
                </div>
              </div>
            </van-tab>

            <!-- 已盘 -->
            <van-tab :title="'已盘(' + checkedTotal + ')'">
              <div class="tab-content">
                <van-list
                  v-model="checkedLoading"
                  :finished="checkedFinished"
                  finished-text="没有更多了"
                  @load="onLoadChecked"
                >
                  <div
                    v-for="item in displayedCheckedList"
                    :key="item.id"
                    class="asset-item checked-item"
                  >
                    <div class="asset-header">
                      <span class="asset-name">{{ item.assetName }}</span>
                      <van-icon name="checked" class="checked-icon" />
                    </div>
                    <div class="asset-no">资产编号: {{ item.no }}</div>
                    <div class="checked-time">
                      盘点时间: {{ item.checkTime }}
                    </div>
                  </div>
                </van-list>

                <!-- 空状态 -->
                <div
                  v-if="displayedCheckedList.length === 0 && !checkedLoading"
                  class="empty-state"
                >
                  <div class="empty-icon">📦</div>
                  <div>暂无已盘资产</div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="../../js/UrlApi.js"></script>
    <script
      src="../../js/jquery-2.2.0.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="../../js/promise.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="../../js/common.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="../../js/IndexDbFactory.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="./AssetInventoryCheck.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="../../js/RfidMiddlewareApi.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </body>
</html>