labsop_h5/src/view/animal/myCage/index.vue

<template>
  <div class="cage-container">
    <van-tabs v-model:active="activeStatus" @change="changeType">
      <van-tab title="我的笼位" :name="MyCageType.MINE_CAGE"></van-tab>
      <van-tab title="历史笼位" :name="MyCageType.MY_CAGE_HISTORY"></van-tab>
    </van-tabs>

    <div class="list-container">
      <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in state.pageList" :key="item" @click="handleCheckDetail(item)">
          <template #default>
            <div class="list">
              <header class="flex justify-between">
                <strong class="title">{{ `${item.userName}的笼位申请` }}</strong>
                <van-tag v-if="item.approveStatus == ApproveStatus.WAIT_SUBMIT" type="warning">待提交</van-tag>
                <van-tag v-else-if="item.approveStatus == ApproveStatus.APPROVING" type="primary">审核中</van-tag>
                <van-tag v-else-if="item.approveStatus == ApproveStatus.PASS" type="success">通过</van-tag>
                <van-tag v-else-if="item.approveStatus == ApproveStatus.REVOKE" type="success">撤销</van-tag>
                <van-tag v-else-if="item.approveStatus == ApproveStatus.REFUSE" type="danger">拒绝</van-tag>
              </header>
              <p class="inst-title">
                <span>课题名称</span>
                <span class="title ml8">{{ item.projectGroupName }}</span>
              </p>
              <p class="inst-title">
                <span>申请人</span>
                <span class="title ml8">
                  {{ item.userName }}
                </span>
              </p>
              <p class="inst-title">
                <span>申请时间</span>
                <span class="title ml8">
                  {{ formatToChineseDate(item.createdTime) }}
                </span>
              </p>
              <p class="inst-title">
                <span>开始时间</span>
                <span class="title ml8">
                  {{ formatToChineseDate(item.startDate) }}
                </span>
              </p>
              <p class="inst-title">
                <span>申请笼位(个)</span>
                <span class="title ml8">
                  {{ item.number }}
                </span>
              </p>
              <p class="inst-title">
                <span>退还笼位(个)</span>
                <span class="title ml8">
                  {{ item.returnNumber }}
                </span>
              </p>
              <p class="inst-title">
                <span>申请状态</span>
                <span class="title ml8">
                  {{ formatApproveStatus(Number(item.approveStatus)) }}
                </span>
              </p>
              <p class="inst-title">
                <span>动物类型</span>
                <span class="title ml8">
                  {{ item.categoryName }}
                </span>
              </p>
              <p class="inst-title">
                <span>级别</span>
                <span class="title ml8">
                  {{ LeavelList.find((leaveItem) => leaveItem.id === item.level)?.name || '' }}
                </span>
              </p>
              <footer class="flex justify-between mt16">
                <span class="title">
                  <el-button
                    v-if="
                      item.approveStatus === ApproveStatus.PASS.toString() &&
                      item.returnStatus !== ReturnStatus.COMPLETE.toString() &&
                      userInfos.id === item.userId
                    "
                    style="height: 25px"
                    type="primary"
                    @click.stop="handleRefundable(item)"
                    >退还</el-button
                  >
                </span>
                <span class="time">{{ formatDate(new Date(item.createdTime), 'YYYY-mm-dd') }}</span>
              </footer>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>

    <DetailModal :showDialog="showDetailDialog" :isReturnCageList="false" ref="detailModalRef" @close="() => (showDetailDialog = false)" />
    <ReturnCageDialog ref="returnCageDialogRef" :currentRefundableItemNumber="currentRefundableItemNumber" :getTableData="handleRefresh" />
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, defineAsyncComponent, ComponentPublicInstance } from 'vue'
  import to from 'await-to-js'

  import { formatDate, formatToChineseDate } from '/@/utils/formatTime'
  import { ApproveStatus, ReturnStatus, LeavelList, ApproveStatusList, MyCageType } from '/@/constants/pageConstants'
  import { useUserInfos } from '/@/hooks/useUserInfos'
  import { usePlatAnimalCageApplicationApi } from '/@/api/platform/animal'

  interface ReturnCageDialogInstance extends ComponentPublicInstance {
    handleOpenRefundableDialog: (id: number) => void
  }

  interface DetailModalInstance extends ComponentPublicInstance {
    initForm: (id: number) => void
  }

  const DetailModal = defineAsyncComponent(() => import('/@/view/animal/application/components/Detail.vue'))
  const ReturnCageDialog = defineAsyncComponent(() => import('/@/view/animal/application/components/ReturnCageDialog.vue'))

  const { userInfos } = useUserInfos()
  const platAnimalCageApplicationApi = usePlatAnimalCageApplicationApi()

  const returnCageDialogRef = ref<ReturnCageDialogInstance>()
  const detailModalRef = ref<DetailModalInstance>()

  const showDetailDialog = ref<boolean>(false)
  const activeStatus = ref<MyCageType>(MyCageType.MINE_CAGE)
  const currentRefundableItemNumber = ref<number>(0)

  const state = reactive({
    pageList: [],
    loading: false,
    finished: false,
    queryParams: {
      pageNum: 1,
      pageSize: 25,
      isMyself: 1
    }
  })

  const changeType = () => {
    state.queryParams.pageNum = 1
    state.pageList = []
    onLoad()
  }

  const formatApproveStatus = (status: number) => {
    return ApproveStatusList.find((item) => item.id === status)?.name || ''
  }

  const handleRefundable = (row: any) => {
    currentRefundableItemNumber.value = row.number
    returnCageDialogRef.value.handleOpenRefundableDialog(row.id)
  }

  const handleRefresh = () => {
    resetQueryParams()
    onLoad()
  }

  const resetQueryParams = () => {
    ;(state.pageList = []),
      (state.loading = false),
      (state.finished = false),
      (state.queryParams = {
        pageNum: 1,
        pageSize: 25,
        isMyself: 1
      })
  }

  const onLoad = async (isSearch?: boolean) => {
    state.loading = true
    const apiRequest =
      activeStatus.value === MyCageType.MINE_CAGE
        ? platAnimalCageApplicationApi.getList(state.queryParams)
        : platAnimalCageApplicationApi.getMyCageHistoryList(state.queryParams)

    const [err, res]: ToResponse = await to(apiRequest)

    state.loading = false

    if (err) return
    
    const list = res?.data?.list || []

    if (!isSearch) {
      for (const item of list) {
        state.pageList.push(item)
      }
      state.queryParams.pageNum++
      if (list.length < state.queryParams.pageSize) {
        state.finished = true
      }
    } else {
      state.pageList = list
    }
  }

  const handleCheckDetail = (row: any) => {
    detailModalRef.value.initForm(row.id)
    showDetailDialog.value = true
  }

  onMounted(() => {
    onLoad()
  })
</script>

<style lang="scss" scoped>
  .cage-container {
    position: relative;
    display: flex;
    flex-direction: column;
    .list-container {
      overflow-y: auto;
      padding: 10px;
      border-radius: 4px;
      flex: 1;
    }
    .van-list {
      .van-cell {
        background-color: #fff;
        + .van-cell {
          margin-top: 10px;
        }
        header,
        footer {
          color: #333;
        }
        .title {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
        .inst-title {
          color: #333;
          text-align: left;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 4px;
          span:first-child {
            color: rgb(120, 120, 120);
          }
        }
        .time {
          color: #f69a4d;
        }
      }
    }
  }
</style>