byte-sailing-mobile/src/views/purchase-sales/inventory-management/outInList/index.vue

<template>
  <van-nav-bar
    :title="$t('inventoryQuery.inOutFlow')"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
  >
  </van-nav-bar>
  <van-search
    v-model="req.keyword"
    placeholder="请输入关键词"
    @search="onRefresh"
  />
  <van-tabs v-model:active="active" @change="handleChangeTab">
    <van-tab :title="$t('inventoryQuery.all')" name="all"></van-tab>
    <van-tab :title="$t('inventoryQuery.warehousing')" name="1"></van-tab>
    <van-tab :title="$t('inventoryQuery.outbound')" name="2"></van-tab>

    <!-- <van-tab
      v-for="(item, index) in warehouseData"
      :title="item.name"
      :name="item.id"
    >
    </van-tab> -->
  </van-tabs>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="$t('common.noMore')"
        @load="onLoad"
        style="margin-bottom: 60px"
      >
        <div style="margin-top: 10px">
          <div v-for="(item, index) in listData" :key="item.id" class="item">
            <div class="row">
              <div class="left">{{$t('inventoryQuery.operationType')}}</div>
              <div class="center">
                {{ item.type }}
              </div>
              <div class="right">
                {{ item.createTime }}
              </div>
            </div>
            <div class="row">
              <div class="left">{{$t('inventoryQuery.warehouseName')}}</div>
              <div class="center">
                {{ item.warehouseName }}
              </div>
            </div>
            <div class="row">
              <div class="left">{{$t('inventoryQuery.itemName')}}</div>
              <div class="center">
                {{ item.productName }}
              </div>
            </div>
            <div class="row">
              <div class="left">{{$t('inventoryQuery.operationQuantity')}}</div>
              <div class="center">
                {{ item.quantity }}
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import commonList from "@/components/common-list.vue";
import { useRoute } from "vue-router";
const loading = ref(false);
const router = useRoute();
const route = useRoute();
const req = ref({
  pageNum: 1,
  keyword: null,
  type: "",
  warehouseId: "",
  productId: "",
});
const finished = ref(false);
const proxy = getCurrentInstance().proxy;
const listData = ref([]);
const warehouseData = ref([]);

const active = ref("all");
const listConfig = ref([
  {
    label: proxy.t('inventoryQuery.itemType'),
    prop: "type",
  },
  {
    label: proxy.t('inventoryQuery.itemName'),
    prop: "productName",
  },
  {
    label: proxy.t('inventoryQuery.inventoryQuantity'),
    prop: "quantity",
  },
]);
const onRefresh = () => {
  req.value.pageNum = 1;
  finished.value = false;
  getList("refresh");
};
const onLoad = () => {
  getList();
};

const onClickLeft = () => {
  if (route.query.productId || route.query.warehouseId) {
    history.back();
  } else {
    proxy.$router.push("/main/working");
  }
};

const onClickRight = () => {
  proxy.$router.push("/main/manualInboundAdd");
};

const toDtl = (row) => {
  proxy.$router.push({
    path: "manualInboundAdd",
    query: {
      id: row.id,
    },
  });
};

const getList = (type) => {
  loading.value = true;
  proxy
    .post("/stockJournalDetails/page", req.value)
    .then((res) => {
      res.data.rows.map(item => {
        item.type = item.type === 1 ? proxy.t('inventoryQuery.warehousing') : proxy.t('inventoryQuery.outbound')
      })
      listData.value =
        type === "refresh"
          ? res.data.rows
          : listData.value.concat(res.data.rows);
      if (req.value.pageNum * 10 >= res.data.total) {
        finished.value = true;
      }
      req.value.pageNum++;
      loading.value = false;
      console.log(listData.value, "wssa");
    })
    .catch((err) => {
      loading.value = false;
    });
};

const getWarehouseData = () => {
  proxy.post("/warehouse/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    warehouseData.value = res.data.rows;
  });
};

const handleChangeTab = () => {
  req.value.type = active.value === "all" ? "" : active.value;
  req.value.pageNum = 1;
  listData.value = [];
  getList();
};
// getWarehouseData();

onMounted(() => {
  req.value.productId = route.query.productId ? route.query.productId : "";
  req.value.warehouseId = route.query.warehouseId
    ? route.query.warehouseId
    : "";
  listData.value = [];
  getList();
});
</script>

<style lang="scss" scoped>
.list {
  min-height: 70vh;
}
.item {
  padding: 10px 10px 0;
  border-bottom: 1px solid #dddddd;
  background: #fff;
  .row {
    display: flex;
    margin-bottom: 6px;
    .left {
      width: 70px;
    }
    .center {
      flex: 1;
    }
    .left,
    .right {
      color: #999999;
    }
  }
}
</style>