wdly-mobile/src/views/purchase-sales/inbound-outbound/waitInbound/selectGood.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')" @load="onLoad" style="margin-bottom: 60px">
        <!-- @onClick="toDtl" -->
        <commonList :data="listData" :config="listConfig" :showMore="false">
          <template #btn="{row}">
            <div style="width:100%;text-align:right">
              <van-button type="primary" size="small" @click="selectRow(row)">选择</van-button>

            </div>
          </template>
        </commonList>
      </van-list>
    </div>
  </van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import commonList from "@/components/common-list.vue";
import { useRoute } from "vue-router";
import useSelectGoodStore from "@/store/manyGood";
import { showSuccessToast, showFailToast } from "vant";
const selectGoodStore = useSelectGoodStore();
const loading = ref(false);
const router = useRoute();
const req = ref({
  pageNum: 1,
  keyword: null,
  definition: "",
});
const finished = ref(false);
const proxy = getCurrentInstance().proxy;
const listData = ref([]);
const classification = ref([]);
const listConfig = ref([
  {
    label: proxy.t("productLibrary.productCode"),
    prop: "customCode",
  },
  {
    label: proxy.t("productLibrary.productName"),
    prop: "name",
  },
  {
    label: "规格",
    prop: "spec",
  },
  {
    type: "slot",
    slotName: "btn",
    label: "",
  },
]);
const onRefresh = () => {
  req.value.pageNum = 1;
  finished.value = false;
  getList("refresh");
};
const onLoad = () => {
  // getClassification();
  getList();
};
const onClickLeft = () => history.back();

const onClickRight = () => {
  proxy.$router.push({
    path: "productLibraryAdd",
    query: {
      type: "add",
    },
  });
};
proxy.uploadDdRightBtn(onClickRight, proxy.t("common.add"));
const toDtl = (row) => {
  proxy.$router.push({
    path: "productLibraryAdd",
    query: {
      id: row.id,
      type: "edit",
    },
  });
};
const treeToList = (arr) => {
  let res = []; // 用于存储递归结果（扁平数据）
  // 递归函数
  let fn = (source) => {
    source.forEach((el) => {
      res.push(el);
      el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
    });
  };
  fn(arr);
  return res;
};
const getClassification = () => {
  if (classification.value && classification.value.length > 0) {
    getList();
  } else {
    proxy
      .post("/productClassify/tree", {
        parentId: "",
        name: "",
        definition: "1",
      })
      .then((res) => {
        classification.value = treeToList(res.data);
        getList();
      });
  }
};
const getList = (type) => {
  loading.value = true;
  proxy
    .post("/productInfo/pageByWdly", 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((err) => {
      loading.value = false;
    });
};

const selectRow = (row) => {
  selectGoodStore.pushGood(row);
  return showSuccessToast("选择成功");
};
</script>

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