jsh_erp_app/pages/goods-enter/index.vue

<template>
  <view class="goods-page">
    <u-navbar
      height="40px"
      title="货物信息录入"
      bgColor="#fff"
      autoBack
      placeholder
    >
      <view class="u-nav-slot depot-label" slot="right">
        <view class="name">{{ curDepotName }}</view>
      </view>
    </u-navbar>
    <view class="container_main">
      <u-sticky :offsetTop="offsetTop" bgColor="#fff">
        <view class="head-box">
          <view class="search-box">
            <u-search
              placeholder="输入关键字进行货物的模糊查询"
              shape="square"
              :showAction="false"
              @search="handleSearch"
              @clear="handleSearch"
              v-model="query.number"
            ></u-search>
            <view class="scan-icon flex_box flex_row_center" @click="">
              <image src="@/static/image/scan-icon-2.png" mode=""></image>
            </view>
          </view>
        </view>
      </u-sticky>
      <view class="content-box">
        <view class="content-list" v-if="list.length > 0">
          <view class="content-list-title">
            <view>入库货物清单</view>
            <view class="content-list-title-tips">（轻触货物查看详情）</view>
          </view>
          <goodCard
            v-for="(item, i) in list"
            :key="i"
            :goodImg="item.imgNameArr[0] || ''"
            :goodName="item.materialName"
            :goodDesValue="item.barCode"
            goodDesTitle="条形码"
            :columns="columns"
            :item="item"
            @handleClickField="handleClickField"
            @clickItem="handleClickItem"
          >
            <view slot="status">
              <view class="dsh">待审核</view>
              <!-- <view class="zc">正常</view>
              <view class="ybh">已驳回</view> -->
            </view>
          </goodCard>
        </view>
        <u-empty
          mode="data"
          text="暂无内容"
          marginTop="60"
          icon="https://xiangli-erp.oss-cn-hangzhou.aliyuncs.com/APP/no-notifcations.png"
          v-if="list.length == 0"
        ></u-empty>
        <!-- 加载更多 -->
        <u-loadmore
          v-if="list.length > 0"
          :status="loadStatus"
          @loadmore="onLoadMore"
        />
      </view>
      <!-- 新增录入-->
      <view class="footer">
        <u-button class="add-btn" type="primary" plain @click="goAddGood">
          新增录入
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { taskStocktakingList } from "@/common/request/apis/inventoryTask";
import { mapGetters } from "vuex";
import goodCard from "@/components/good-card/good-card.vue";

export default {
  components: {
    goodCard,
  },
  data() {
    return {
      offsetTop: 0,
      query: {
        number: "",
      },
      currentPage: 1,
      pageSize: 10,
      loadStatus: "loadmore", //加载前值为loadmore，加载中为loading，没有数据为nomore

      columns: [
        { title: "规格", key: "materialStandard" },
        { title: "批次号", key: "patchNumber" },
        { title: "生产日期", key: "productionDate" },
        { title: "库位", key: "position" },
        {
          title: "库存",
          key: "inventory",
          formatter: (key, formData) => {
            const inventory = formData.inventory
              ? (formData.inventory * 1).toFixed(0)
              : "0";
            return `${inventory}${formData.commodityUnit || ""}`;
          },
        },
        { title: "录入时间", key: "lrDate" },
      ],
      list: [
        {
          id: 1,
          materialName:
            "货物名称1货物名称1货物名称1货物名称1货物名称1货物名称1",
          imgNameArr: [
            "https://xiangli-erp.oss-cn-hangzhou.aliyuncs.com/APP/no-notifcations.png",
          ],
          barCode: "6904045405",
          materialStandard: "500ml",
          productionDate: "2024-10-01",
          lrDate: "2024-10-01",
          inventory: 10,
          commodityUnit: "瓶",
          position: "A-1-1",
          status: 1,
          patchNumber: "12345678966",
        },
        {
          id: 2,
          materialName: "货物名称2",
          imgNameArr: [
            "https://xiangli-erp.oss-cn-hangzhou.aliyuncs.com/APP/no-notifcations.png",
          ],
          barCode: "6904045405",
          materialStandard: "500ml",
          productionDate: "2024-10-01",
          lrDate: "2024-10-02",
          inventory: 10,
          commodityUnit: "瓶",
          position: "A-1-2",
          status: 1,
          patchNumber: "12345678966",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["depotInfo"]),
    curDepotId() {
      return this.depotInfo ? this.depotInfo.id : "";
    },
    curDepotName() {
      return this.depotInfo ? this.depotInfo.depotName : "";
    },
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    let statusBarHeight = systemInfo.statusBarHeight;
    this.offsetTop = statusBarHeight + 40;
    // this.loadData();
  },
  onShow() {},
  onPullDownRefresh() {
    // 下拉刷新
    this.onRefresh();
  },
  onReachBottom() {
    // 触底加载更多
    this.onLoadMore();
  },
  methods: {
    async onRefresh() {
      try {
        await this.loadData(true);
      } finally {
        uni.stopPullDownRefresh();
      }
    },
    async onLoadMore() {
      if (this.loadStatus !== "loadmore") return;
      this.loadStatus = "loading";
      try {
        await this.loadData();
      } catch (e) {
        this.loadStatus = "loadmore";
      }
    },
    async loadData(isRefresh = false) {
      if (isRefresh) {
        this.currentPage = 1;
        this.list = [];
      }

      try {
        this.loadStatus = "loading";
        const currentPage = this.currentPage;
        const pageSize = this.pageSize;
        const params = {
          currentPage,
          pageSize,
          ...this.query,
          depotId: this.curDepotId,
        };
        console.log("params=====", params);
        const res = await taskStocktakingList(params);
        const { rows, total } = res.data;
        this.list = [...this.list, ...rows];
        if (currentPage * pageSize < Number(total)) {
          this.currentPage++;
          this.loadStatus = "loadmore";
        } else {
          this.loadStatus = "nomore";
        }
      } catch (error) {}
    },
    handleSearch(value) {
      this.loadData(true);
    },
    handleClickField(key, formData) {
      console.log("key", key);
      console.log("formData", formData);
    },
    handleClickItem(item) {
      console.log("item", item);
    },
    goAddGood() {
      uni.navigateTo({
        url: "/pages/goods-enter/addGood",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-page {
  min-height: 100vh;
  background-color: #f0f6fb;
  .container_main {
    .head-box {
      background-color: #fff;
      padding-top: 20rpx;
      padding-bottom: 32rpx;
    }
    .search-box {
      background-color: rgba(191, 200, 219, 0.2);
      margin: 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 8rpx;

      ::v-deep .u-search__content {
        background-color: transparent !important;

        .u-search__content__input {
          background-color: transparent !important;
        }
      }

      .scan-icon {
        width: 100rpx;
        height: 100%;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .content-box {
      padding: 0 24rpx;
      &-val {
        border-radius: 16rpx 16rpx 0 0;
        overflow: hidden;
      }
    }
  }
}

.content-list {
  padding: 24rpx 0;
  background-color: #fff;
  margin-top: 24rpx;
  border-radius: 16rpx;

  .content-list-title {
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-style: normal;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 50rpx;
    margin-bottom: 24rpx;

    &::after {
      content: "";
      display: block;
      width: 6rpx;
      height: 30rpx;
      border-radius: 100px;
      background: #0256ff;
      position: absolute;
      top: 50%;
      left: 24rpx;
      transform: translateY(-50%);
    }

    .content-list-title-tips {
      color: #0256ff;
      font-size: 24rpx;
      font-weight: 400;
    }
  }
}

.dsh {
  background-color: rgba(255, 59, 29, 0.2);
  color: rgba(255, 59, 29, 1);
  border-radius: 8rpx;
}
.zc {
  background-color: rgba(0, 185, 123, 0.2);
  color: rgba(0, 185, 123, 1);
  border-radius: 8rpx;
}
.ybh {
  background-color: rgba(225, 51, 15, 1);
  color: #fff;
  border-radius: 8rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 144rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  .add-btn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 16rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    background-color: #0256ff;
    line-height: 88rpx;
    text-align: center;
  }
}
</style>