index.vue

<template>
  <div class="container">
    <NavBar title="客户信息变更" left-arrow @click-left="goBack" />

    <section class="list">
      <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
        <List :finished="finished" finished-text="没有更多了" @load="loadApproval">
          <ChangeListItem v-for="item in infos" :info="item" @click="jump(item)" />
        </List>
      </PullRefresh>
    </section>

    <Plus @click="jump({})" />
  </div>
</template>

<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, List, PullRefresh } from "vant";
import ChangeListItem from '../components/ChangeListItem.vue'
import Plus from '@/components/Plus.vue'
import api from "../api";
import { useRouter } from "vue-router";
import { useInfoChange } from '../store/index'

const infoChangeStore = useInfoChange()

const refreshing = $ref(false);
const finished = $ref(true);

const infos = $ref([])

let queryList = async () => {
  refreshing = true
  let res = await api.changeQuery({})
  if (res.success && res.total > 0) {
    res.rows.forEach(item => {
      infos.push({
        id: item.changeReqNumber,
        applyDate: item.creationDate,
        status: item.reqStatusN,
        ...item
      })
    })
  }
  refreshing = false
}

queryList()

const onRefresh = () => {
  infos = []
  queryList()
};

const loadApproval = () => {
  queryList()
}

const router = useRouter();

const jump = (item) => {
  infoChangeStore.data = item

  // 申请中/审批通过时申请页面为只读
  // 审批退回时可再次维护并重新提交
  if (item.reqStatus && item.reqStatus === 'RETURN') {
    router.push({ path: '/infochange/views/changeform', query: { isReturn: true } })
  } else if (item.reqStatus && item.reqStatus !== 'RETURN') {
    router.push({ path: '/infochange/views/changeform', query: { isReturn: false } })
  } else {
    router.push({ path: '/infochange/views/changeform', query: {} })
  }
}
</script>

<style scoped lang="less">
.list {
  box-sizing: border-box;
  height: calc(100vh - var(--van-nav-bar-height));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 10px;
}

.scroll {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}
</style>

<route>
{
  meta: {
    title: '客户信息变更'
  }
}
</route>