jsh_erp_app/pages/inventory-inquiry/index.vue

<template>
  <view class="inventory-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">
      <view class="head-box">
        <view class="search-box">
          <u-search
            placeholder="输入关键字进行货物的模糊查询"
            shape="square"
            :showAction="false"
            @search="handleSearch"
            @clear="handleSearch"
            v-model="queryParams.keyword"
          ></u-search>
          <view class="scan-icon flex_box flex_row_center" @click="scanCode">
            <image src="@/static/image/scan-icon-2.png" mode=""></image>
          </view>
        </view>
        <view class="type-box">
          <u-tabs
            :list="tabList"
            :inactiveStyle="{ color: '#000', fontSize: '24rpx' }"
            :activeStyle="{ color: '#000', fontSize: '24rpx' }"
            lineColor="#0256FF"
            lineWidth="66rpx"
            :scrollable="false"
            @click="tabClick"
          >
          </u-tabs>
        </view>
      </view>
      <view class="goods-box">
        <view class="goods-type" @click="typeClick">
          <view class="goods-type-text">{{ typeName }}</view>
          <u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
        </view>
        <view class="goods-cont">
          <view class="goods-cont-left">
            <scroll-view
              scroll-y
              :style="{
                height: `calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`,
              }"
            >
              <leo-tree
                v-if="typeName === '按库位展示'"
                :data="treeData"
                :defaultProps="defaultProps"
                @node-click="nodeClick"
                v-model="queryParams.position"
              ></leo-tree>
              <leo-tree
                v-if="typeName === '按分类展示'"
                :data="treeData2"
                :defaultProps="defaultProps2"
                @node-click="nodeClick2"
                v-model="queryParams.categoryId"
              ></leo-tree>
            </scroll-view>
          </view>
          <view class="goods-cont-right">
            <scroll-view
              scroll-y
              :style="{
                height: `calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`,
              }"
              @scrolltolower="onLoadMore"
            >
              <block v-for="(item, i) in goodsList" :key="i">
                <goodCard
                  :goodImg="
                    item.imgNameArr && item.imgNameArr[0]
                      ? item.imgNameArr[0]
                      : ''
                  "
                  :goodName="item.materialName"
                  :goodDesValue="item.sku"
                  goodDesTitle="SKU"
                  :columns="columns"
                  :item="item"
                >
                </goodCard>
              </block>
              <block v-if="goodsList.length == 0">
                <u-empty
                  mode="data"
                  text="暂无内容"
                  marginTop="60"
                  icon="https://xiangli-erp.oss-cn-hangzhou.aliyuncs.com/APP/no-notifcations.png"
                ></u-empty>
              </block>
              <!-- 加载更多 -->
              <u-loadmore
                v-if="goodsList.length > 0"
                :status="loadStatus"
                @loadmore="onLoadMore"
              />
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <u-picker
      :show="typeShow"
      :defaultIndex="defaultIndex"
      :columns="columnsList"
      @confirm="pickerConfirm"
      @cancel="typeShow = false"
    ></u-picker>
  </view>
</template>

<script>
import leoTree from "@/components/leo-tree/leo-tree.vue";
import {
  inventoryInquiry,
  inventoryPositionTree,
  materialCategoryTree,
} from "@/common/request/apis/inventoryInquiry";
import goodCard from "@/components/good-card/good-card.vue";

import { mapGetters } from "vuex";

export default {
  components: {
    goodCard,
    leoTree,
  },
  data() {
    const that = this;
    return {
      offsetTop: 0,
      current: 0,
      typeShow: false,
      defaultIndex: [],
      typeName: "按分类展示",
      scrollH: 0,
      columnsList: [["按分类展示", "按库位展示"]],
      treeData: [],
      treeData2: [],
      tabList: [
        {
          value: "all",
          name: "全部",
        },
        {
          value: "have",
          name: "有库存",
        },
        {
          value: "none",
          name: "无库存",
        },
      ],
      defaultProps: {
        id: "value",
        children: "children",
        label: "label",
      },
      defaultProps2: {
        id: "id",
        children: "children",
        label: "title",
      },
      loadStatus: "loadmore", //加载前值为loadmore，加载中为loading，没有数据为nomore
      goodsList: [],
      pageSize: 10,
      currentPage: 1,

      columns: [
        { title: "规格", key: "materialStandard" },
        {
          title: "生产日期",
          key: "productionDate",
          formatter: (key, formData) => {
            return formData.productionDate
              ? that.$u.timeFormat(formData.productionDate, "yyyy-mm-dd")
              : "/";
          },
        },
        {
          title: "库存",
          key: "inventory",
          formatter: (key, formData) => {
            const inventory = formData.inventory
              ? (formData.inventory * 1).toFixed(0)
              : "0";
            return `${inventory}${formData.commodityUnit || ""}`;
          },
        },
        { title: "库位", key: "position" },
      ],
      queryParams: {
        type: "all",
        categoryId: "",
        position: "",
        keyword: "",
      },
    };
  },
  computed: {
    ...mapGetters(["depotInfo"]),
    curDepotId() {
      return this.depotInfo ? this.depotInfo.id : "";
    },
    curDepotName() {
      return this.depotInfo ? this.depotInfo.depotName : "";
    },
  },
  mounted() {
    let systemInfo = uni.getSystemInfoSync();
    let statusBarHeight = systemInfo.statusBarHeight;
    let headH = 0;
    const query = uni.createSelectorQuery().in(this);
    query
      .select(".head-box")
      .boundingClientRect((rect) => {
        headH = rect.height;
        this.scrollH = statusBarHeight + headH;
      })
      .exec();
  },

  onLoad() {
    // let systemInfo = uni.getSystemInfoSync();
    // let statusBarHeight = systemInfo.statusBarHeight;
    // this.offsetTop = statusBarHeight + 40
    this.getMaterialCategoryTree();
    this.getTreeData();
    this.loadData();
  },
  onShow() {
    uni.$on("scanFinish", (data) => {
      this.queryParams.keyword = data;
      this.onRefresh();
    });
  },
  onHide() {
    uni.$off("scanFinish");
  },
  onUnload() {
    uni.$off("scanFinish");
  },
  methods: {
    scanCode() {
      this.$scan.scanCode();
    },
    async getTreeData() {
      try {
        const res = await inventoryPositionTree({
          depotId: this.curDepotId,
        });
        console.log("res=====", res);
        this.treeData = res.data;
      } catch (error) {}
    },
    async getMaterialCategoryTree() {
      try {
        const res = await materialCategoryTree();
        console.log("res=====", res);
        this.treeData2 = res.data;
      } catch (error) {}
    },
    async onRefresh() {
      try {
        await this.loadData(true);
      } finally {
      }
    },
    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.goodsList = [];
      }

      try {
        this.loadStatus = "loading";
        const currentPage = this.currentPage;
        const pageSize = this.pageSize;
        const params = {
          ...this.queryParams,
          depotId: this.curDepotId,
          currentPage,
          pageSize,
        };
        const res = await inventoryInquiry(params);
        console.log("inventoryInquiry====", params);
        console.log("res====", res);
        const { rows, total } = res.data;
        const list = rows.map((item) => {
          return {
            ...item,
            imgNameArr:
              item.imgName && item.imgName.length > 0
                ? item.imgName.split(",")
                : [],
          };
        });
        this.goodsList = [...this.goodsList, ...list];
        if (currentPage * pageSize < Number(total)) {
          this.currentPage++;
          this.loadStatus = "loadmore";
        } else {
          this.loadStatus = "nomore";
        }
      } catch (error) {}
    },
    handleSearch() {
      this.loadData(true);
    },
    nodeClick(e) {
      console.log("nodeClick======", e);
      this.queryParams.position = e.value;
      this.loadData(true);
    },
    nodeClick2(e) {
      console.log("nodeClick======", e);
      this.queryParams.categoryId = e.id;
      this.loadData(true);
    },
    tabClick(e) {
      console.log(e);
      this.queryParams.type = e.value;
      this.loadData(true);
    },
    typeClick() {
      let index = this.columnsList[0].findIndex(
        (item) => item == this.typeName
      );
      this.defaultIndex = [index];
      this.typeShow = true;
    },
    pickerConfirm(val) {
      console.log("val===========", val);
      this.typeName = val.value[0];
      if (this.typeName === "按分类展示") {
        this.queryParams.position = "";
      }
      if (this.typeName === "按库位展示") {
        this.queryParams.categoryId = "";
      }
      this.typeShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.inventory-page {
  min-height: 100vh;
  background: #f0f6fb;

  .container_main {
    .head-box {
      background-color: #fff;
    }
    .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;
        }
      }
    }

    .goods-box {
      margin-top: 24rpx;
      .goods-type {
        display: flex;
        align-items: center;
        padding-left: 24rpx;
        height: 102rpx;
        background-color: #fff;
        &-text {
          color: #0256ff;
          font-size: 28rpx;
          font-weight: bold;
          margin-right: 10rpx;
        }
      }

      .goods-cont {
        display: flex;
        .goods-cont-left {
          width: 190rpx;
          background-color: #f0f6fb;
          .type-item {
            width: 100%;
            height: 84rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-family: "PingFang SC";
            font-size: 28rpx;
            font-weight: 400;
          }
          .active-item {
            background-color: #fff;
            color: #333;
            font-weight: bold;
          }
        }
        .goods-cont-right {
          flex: 1;
          background-color: #fff;
        }
      }
    }
  }
}
</style>