fans-mobile/src/views/purchase-sales/inventory-management/snapshot/details.vue

<template>
  <van-nav-bar :title="'快照明细'" left-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
    <!-- <template #right> {{ $t("common.add") }} </template> -->
  </van-nav-bar>
  <van-search v-model="req.keyword" :placeholder="$t('common.pleaseEnterKeywords')" @search="onRefresh" />
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="list">
      <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('common.noMore')" style="margin-bottom: 60px">
        <commonList :data="listData" :showMore="false" :config="listConfig">
          <template #productDefinition="{ row }">
            <div>
              <span v-if="row.productDefinition == 1">产品</span>
              <span v-if="row.productDefinition == 2">物料</span>
            </div>
          </template>
          <template #size="{ row }">
            <div v-if="row.productLength && row.productWidth && row.productHeight">
              <span>{{ row.productLength }}</span>*
              <span>{{ row.productWidth }}</span>*
              <span>{{ row.productHeight }}</span>
            </div>
            <div v-else></div>
          </template>

        </commonList>
      </van-list>
    </div>
  </van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import commonList from "@/components/common-list.vue";
import { showSuccessToast, showFailToast } from "vant";
import { useRoute } from "vue-router";

const proxy = getCurrentInstance().proxy;
const route = useRoute();
const onClickLeft = () => proxy.$router.push("/main/working");
const req = ref({
  pageNum: 1,
  keyword: null,
});
const finished = ref(false);
const onRefresh = () => {
  req.value.pageNum = 1;
  finished.value = false;
  getList("refresh");
};
const loading = ref(false);
const listData = ref([]);
const getList = (type) => {
  loading.value = true;
  proxy
    .post("/stockSnapshotDetails/page", req.value)
    .then((res) => {
      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;
    })
    .catch(() => {
      loading.value = false;
    });
};
const toDtl = (row) => {
  proxy.$router.push({
    path: "/main/inventoryCountAdd",
    query: {
      id: row.id,
    },
  });
};
const onClickRight = () => {
  return;
  proxy.$router.push({
    path: "/main/inventoryCountAdd",
    query: {},
  });
};
const listConfig = ref([
  {
    label: "业务公司",
    prop: "companyName",
  },
  {
    label: "仓库名称",
    prop: "warehouseName",
  },
  {
    type: "slot",
    label: "物品类型",
    slotName: "productDefinition",
  },
  {
    label: "所属分类",
    prop: "productClassifyName",
  },
  {
    label: "物品编码",
    prop: "productCustomCode",
  },
  {
    label: "物品名称",
    prop: "productName",
  },
  {
    type: "slot",
    label: "尺寸 (cm)",
    slotName: "size",
  },
  {
    label: "颜色",
    prop: "productColor",
  },
  {
    label: "库存数量",
    prop: "quantity",
  },
]);

onMounted(() => {
  if (route.query) {
    req.value.snapshotId = route.query.id;
    getList();
  }
});
</script>

<style lang="scss" scoped>
.list {
  min-height: 70vh;
}
</style>