jxst-mobile/src/views/MES/produce/plan/index.vue

<template>
  <div style="padding-bottom: 60px">
    <van-nav-bar
      :title="$t('plan.name')"
      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"
        >
          <commonList
            :data="listData"
            @onClick="toDtl"
            :config="listConfig"
          ></commonList>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</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 req = ref({
  pageNum: 1,
  keyword: null,
});
const finished = ref(false);
const proxy = getCurrentInstance().proxy;
const listData = ref([]);

const listConfig = ref([
  {
    label: "计划单号",
    prop: "code",
  },
  {
    label: proxy.t("plan.planTime"),
    prop: "time",
  },
  {
    label: proxy.t("plan.productName"),
    prop: "productName",
  },

  {
    label: proxy.t("plan.planQuantity"),
    prop: "quantity",
  },
  {
    label: proxy.t("plan.planStatus"),
    prop: "statusName",
  },
]);
const onRefresh = () => {
  req.value.pageNum = 1;
  finished.value = false;
  getList("refresh");
};
const onLoad = () => {
  getList();
};

const onClickLeft = () => proxy.$router.push("/main/working");

const onClickRight = () => {
  proxy.$router.push("/main/planAdd");
};
proxy.uploadDdRightBtn(onClickRight, proxy.t("common.add"));
const toDtl = (row) => {
  proxy.$router.push({
    path: "planDtl",
    query: {
      id: row.id,
    },
  });
};

const getList = (type) => {
  loading.value = true;
  proxy
    .post("/productionPlan/page", req.value)
    .then((res) => {
      const data = res.data.rows.map((x) => ({
        ...x,
        time: x.startDate + " ~ " + x.stopDate,
        statusName:
          x.status == 0
            ? proxy.t("plan.notStarted")
            : x.status == 1
            ? proxy.t("plan.ongoing")
            : x.status == 2
            ? proxy.t("plan.complete")
            : "",
      }));
      if (type === "refresh") {
        listData.value = data;
      } else {
        listData.value = listData.value.concat(data);
      }
      // 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;
    });
};

getList();
</script>

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