Chengfei_LiTiKu
/
eam-offline-app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
							<!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>
    <script type="text/javascript" src="../../js/UrlApi.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: 80px;
      }

      .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);
      }

      .search-container {
        background: white;
        margin-top: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      }

      .inventory-list {
        padding: 0 6px;
        margin-top: 176px;
      }

      .inventory-item {
        background: white;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        position: relative;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }

      .inventory-item.selected {
        border: 2px solid #1890ff;
      }

      .inventory-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
      }

      .inventory-checkbox {
        margin-right: 12px;
      }

      .inventory-number {
        font-size: 14px;
        color: #999;
        margin-right: 8px;
      }

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

      .inventory-dates {
        padding-left: 32px;
        font-size: 13px;
        color: #666;
        line-height: 1.8;
      }

      .date-label {
        display: inline-block;
        width: 70px;
        color: #999;
      }

      .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 12px 16px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .selected-info {
        font-size: 14px;
        color: #666;
      }

      .next-button {
        min-width: 100px;
      }

      .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="0" active-color="#1890ff">
            <van-step>选择盘点单</van-step>
            <van-step>开始盘点</van-step>
          </van-steps>
        </div>

        <!-- 搜索框 -->
        <div class="search-container">
          <van-search
            v-model="searchKeyword"
            placeholder="请输入盘点单单号、盘点名称等信息"
            @input="onSearch"
            shape="round"
          />
        </div>
      </div>

      <!-- 主内容区域 -->
      <div class="main-container" style="margin-top: 46px">
        <!-- 盘点单列表 -->
        <div class="inventory-list">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              v-for="(item, index) in displayedList"
              :key="item.id"
              class="inventory-item"
              :class="{ selected: selectedId === item.id }"
              @click="selectItem(item)"
            >
              <div class="inventory-header">
                <van-radio
                  :name="item.id"
                  :checked-color="'#1890ff'"
                  class="inventory-checkbox"
                  v-model="selectedId"
                >
                </van-radio>
                <span class="inventory-number">{{ index + 1 }}</span>
                <span class="inventory-name"
                  >{{ item.name }}({{ item.documentNo }})</span
                >
              </div>
              <div class="inventory-dates">
                <div>
                  <span class="date-label">仓库：</span>
                  <span>{{ item.warehouseName }}</span>
                </div>
                <!-- <div>
                  <span class="date-label">截止日期</span>
                  <span>{{ item.inventoryEndDate }}</span>
                </div> -->
              </div>
            </div>
          </van-list>

          <!-- 空状态 -->
          <div v-if="filteredList.length === 0 && !loading" class="empty-state">
            <div class="empty-icon">📋</div>
            <div>暂无盘点单数据</div>
          </div>
        </div>
      </div>

      <!-- 底部操作栏 -->
      <div class="bottom-bar">
        <div class="selected-info">
          <span v-if="selectedItem">已选择: {{ selectedItem.name }}</span>
          <span v-else style="color: #999">请选择盘点单</span>
        </div>
        <van-button
          type="primary"
          class="next-button"
          @click="goNext"
          :disabled="!selectedItem"
          round
        >
          下一步
        </van-button>
      </div>
    </div>

    <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="./AssetInventorySelect.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </body>
</html>