index.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <van-nav-bar title="物料库" left-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
  3. <template #right> 添加 </template>
  4. </van-nav-bar>
  5. <van-search v-model="req.keyword" placeholder="请输入搜索关键词" @search="onRefresh" />
  6. <van-pull-refresh v-model="loading" @refresh="onRefresh">
  7. <div class="list">
  8. <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" style="margin-bottom: 60px">
  9. <commonList :data="listData" @onClick="toDtl" :config="listConfig"></commonList>
  10. </van-list>
  11. </div>
  12. </van-pull-refresh>
  13. </template>
  14. <script setup>
  15. import { ref, getCurrentInstance } from "vue";
  16. import commonList from "@/components/common-list.vue";
  17. import { useRoute } from "vue-router";
  18. const loading = ref(false);
  19. const router = useRoute();
  20. const req = ref({
  21. pageNum: 1,
  22. keyword: null,
  23. definition: "2",
  24. });
  25. const finished = ref(false);
  26. const proxy = getCurrentInstance().proxy;
  27. const listData = ref([]);
  28. const classification = ref([]);
  29. const listConfig = ref([
  30. {
  31. label: "物料分类",
  32. prop: "productClassifyName",
  33. },
  34. {
  35. label: "物料编码",
  36. prop: "code",
  37. },
  38. {
  39. label: "物料名称",
  40. prop: "name",
  41. },
  42. ]);
  43. const onRefresh = () => {
  44. req.value.pageNum = 1;
  45. finished.value = false;
  46. getList("refresh");
  47. };
  48. const onLoad = () => {
  49. getClassification();
  50. };
  51. const onClickLeft = () => proxy.$router.push("/main/working");
  52. const onClickRight = () => {
  53. proxy.$router.push({
  54. path: "materialLibraryAdd",
  55. query: {
  56. type: 'add'
  57. },
  58. });
  59. };
  60. const toDtl = (row) => {
  61. proxy.$router.push({
  62. path: "materialLibraryAdd",
  63. query: {
  64. id: row.id,
  65. type: 'edit'
  66. },
  67. });
  68. };
  69. const treeToList = (arr) => {
  70. let res = []; // 用于存储递归结果(扁平数据)
  71. // 递归函数
  72. let fn = (source) => {
  73. source.forEach((el) => {
  74. res.push(el);
  75. el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
  76. });
  77. };
  78. fn(arr);
  79. return res;
  80. };
  81. const getClassification = () => {
  82. if (classification.value && classification.value.length > 0) {
  83. getList();
  84. } else {
  85. proxy.post("/productClassify/tree", { parentId: "", name: "", definition: "2" }).then((res) => {
  86. classification.value = treeToList(res.data);
  87. getList();
  88. });
  89. }
  90. };
  91. const getList = (type) => {
  92. loading.value = true;
  93. proxy
  94. .post("/productInfo/page", req.value)
  95. .then((res) => {
  96. res.data.rows = res.data.rows.map((item) => {
  97. let data = classification.value.filter((filterItem) => filterItem.id === item.productClassifyId);
  98. let productClassifyName = "";
  99. if (data && data.length > 0) {
  100. productClassifyName = data[0].label;
  101. }
  102. return {
  103. ...item,
  104. productClassifyName: productClassifyName,
  105. };
  106. });
  107. listData.value = type === "refresh" ? res.data.rows : listData.value.concat(res.data.rows);
  108. if (req.value.pageNum * 10 >= res.data.total) {
  109. finished.value = true;
  110. }
  111. req.value.pageNum++;
  112. loading.value = false;
  113. })
  114. .catch((err) => {
  115. loading.value = false;
  116. });
  117. };
  118. </script>
  119. <style lang="scss" scoped>
  120. .list {
  121. min-height: 70vh;
  122. }
  123. </style>