fix:删除历史笼位页面，修复数据显示

components.d.ts

@@ -13,22 +13,12 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SelectInst: typeof import('./src/components/select-inst.vue')['default']
     SelectInstAppointRecord: typeof import('./src/components/select-inst-appoint-record.vue')['default']
-    VanActionBar: typeof import('vant/es')['ActionBar']
-    VanActionBarButton: typeof import('vant/es')['ActionBarButton']
-    VanActionBarIcon: typeof import('vant/es')['ActionBarIcon']
-    VanBackTop: typeof import('vant/es')['BackTop']
     VanButton: typeof import('vant/es')['Button']
     VanCalendar: typeof import('vant/es')['Calendar']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
-    VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
-    VanCol: typeof import('vant/es')['Col']
-    VanCollapse: typeof import('vant/es')['Collapse']
-    VanCollapseItem: typeof import('vant/es')['CollapseItem']
-    VanDatePicker: typeof import('vant/es')['DatePicker']
     VanDialog: typeof import('vant/es')['Dialog']
-    VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
     VanFloatingBubble: typeof import('vant/es')['FloatingBubble']
     VanForm: typeof import('vant/es')['Form']
@@ -37,12 +27,9 @@ declare module 'vue' {
     VanList: typeof import('vant/es')['List']
     VanNotify: typeof import('vant/es')['Notify']
     VanPicker: typeof import('vant/es')['Picker']
-    VanPickerGroup: typeof import('vant/es')['PickerGroup']
     VanPopup: typeof import('vant/es')['Popup']
     VanRadio: typeof import('vant/es')['Radio']
     VanRadioGroup: typeof import('vant/es')['RadioGroup']
-    VanRow: typeof import('vant/es')['Row']
-    VanSearch: typeof import('vant/es')['Search']
     VanStep: typeof import('vant/es')['Step']
     VanStepper: typeof import('vant/es')['Stepper']
     VanSteps: typeof import('vant/es')['Steps']
@@ -54,7 +41,6 @@ declare module 'vue' {
     VanTabs: typeof import('vant/es')['Tabs']
     VanTag: typeof import('vant/es')['Tag']
     VanTextEllipsis: typeof import('vant/es')['TextEllipsis']
-    VanTimePicker: typeof import('vant/es')['TimePicker']
     VanUploader: typeof import('vant/es')['Uploader']
   }
 }

src/view/animal/application/components/Detail.vue

@@ -293,7 +293,7 @@ const levelName = computed(() => {
       geneIdentificationFile: res?.data?.geneIdentificationFile ? JSON.parse(res?.data?.geneIdentificationFile) : [],
       totalNumber: res?.data?.maleNumber + res?.data?.famaleNumber,
       startDate: dayjs(res?.data?.createdTime).format('YYYY-MM-DD'),
-      comeTime: dayjs(res?.data?.comeTime).format('YYYY-MM-DD'),
+      comeTime: res?.data?.comeTime ? dayjs(res?.data?.comeTime).format('YYYY-MM-DD') : '-',
     }
 
   }
@@ -398,4 +398,4 @@ const levelName = computed(() => {
 :deep(.van-cell__title) {
   flex: 0 0 120px;
   }
-</style>
+</style>

src/view/animal/myCage/index.vue

@@ -1,9 +1,54 @@
 <template>
   <div class="cage-container">
-    <van-tabs v-model:active="activeStatus" @change="changeType">
+    <!-- <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>
+    </van-tabs> -->
+    <div class="search-wrap">
+      <el-form :model="state.queryParams">
+        <el-form-item prop="approveStatus">
+          <el-select
+            v-model="state.queryParams.approveStatus"
+            style="width: 100%"
+            placeholder="审批状态"
+            clearable
+            @change="search"
+          >
+            <el-option
+              v-for="item in ApproveStatusList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="dateRange">
+          <el-input
+            v-model="dateRangeText"
+            placeholder="请选择申请时间范围"
+            readonly
+            style="width: 100%"
+            @click="showCalendar = true"
+          >
+            <template #suffix>
+              <el-icon
+                v-if="dateRangeText"
+                style="cursor: pointer; margin-right: 8px"
+                @click.stop="clearDateRange"
+              >
+                <Close />
+              </el-icon>
+              <el-icon
+                style="cursor: pointer"
+                @click.stop="showCalendar = true"
+              >
+                <Calendar />
+              </el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </div>
 
     <div class="list-container">
       <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
@@ -92,16 +137,38 @@
       </van-list>
     </div>
 
-    <DetailModal :showDialog="showDetailDialog" :isReturnCageList="false" ref="detailModalRef"
-      @close="() => (showDetailDialog = false)" />
-    <ReturnCageDialog ref="returnCageDialogRef" :currentRefundableItemNumber="currentRefundableItemNumber"
-      :getTableData="handleRefresh" />
+    <DetailModal
+      :showDialog="showDetailDialog"
+      :isReturnCageList="false"
+      ref="detailModalRef"
+      @close="() => (showDetailDialog = false)"
+    />
+    <ReturnCageDialog
+      ref="returnCageDialogRef"
+      :currentRefundableItemNumber="currentRefundableItemNumber"
+      :getTableData="handleRefresh"
+    />
+    <van-popup
+      v-model:show="showCalendar"
+      position="bottom"
+      :style="{ height: '80vh' }"
+      round
+    >
+      <van-calendar
+        v-model:show="showCalendar"
+        type="range"
+        :min-date="new Date(1900, 0, 1)"
+        @confirm="onDateRangeConfirm"
+      />
+    </van-popup>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, onMounted, defineAsyncComponent, ComponentPublicInstance } from 'vue'
+import { reactive, ref, onMounted, defineAsyncComponent, ComponentPublicInstance, computed } from 'vue'
 import to from 'await-to-js'
+import dayjs from 'dayjs'
+import { Calendar, Close } from '@element-plus/icons-vue'
 
 import { formatDate, formatToChineseDate } from '/@/utils/formatTime'
 import { ApproveStatus, ReturnStatus, LeavelList, ApproveStatusList, MyCageType } from '/@/constants/pageConstants'
@@ -129,15 +196,30 @@ const showDetailDialog = ref<boolean>(false)
 const activeStatus = ref<MyCageType>(MyCageType.MINE_CAGE)
 const currentRefundableItemNumber = ref<number>(0)
 const animalTypeList = ref([])
+const dateTime = ref<any>([])
+const showCalendar = ref(false)
+const selectedDateRange = ref<[Date, Date] | null>(null)
+
+const dateRangeText = computed(() => {
+  if (selectedDateRange.value && selectedDateRange.value.length === 2) {
+    const start = dayjs(selectedDateRange.value[0]).format('YYYY-MM-DD')
+    const end = dayjs(selectedDateRange.value[1]).format('YYYY-MM-DD')
+    return `${start} 至 ${end}`
+  }
+  return ''
+})
 
 const state = reactive({
-  pageList: [],
+  pageList: [] as any[],
   loading: false,
   finished: false,
   queryParams: {
     pageNum: 1,
     pageSize: 25,
-    isMyself: 1
+    isMyself: 1,
+    approveStatus: '',
+    startDate: '',
+    endDate: ''
   }
 })
 
@@ -167,22 +249,52 @@ const handleRefresh = () => {
 }
 
 const resetQueryParams = () => {
-  ; (state.pageList = []),
-    (state.loading = false),
-    (state.finished = false),
-    (state.queryParams = {
-      pageNum: 1,
-      pageSize: 25,
-      isMyself: 1
-    })
+  state.pageList = []
+  state.loading = false
+  state.finished = false
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 25,
+    isMyself: 1,
+    approveStatus: '',
+    startDate: '',
+    endDate: ''
+  }
+}
+
+const setListPayload = () => {
+  const payload: any = {
+    ...state.queryParams
+  }
+
+  if (dateTime.value && dateTime.value.length === 2 && dateTime.value[0]) {
+    payload.startDate = dayjs(dateTime.value[0]).format('YYYY-MM-DD')
+  }
+
+  if (dateTime.value && dateTime.value.length === 2 && dateTime.value[1]) {
+    payload.endDate = dayjs(dateTime.value[1]).format('YYYY-MM-DD')
+  }
+
+  Object.entries(payload).forEach(([key, value]) => {
+    if (value === '' || value === null) {
+      delete payload[key as keyof typeof payload]
+    }
+  })
+
+  return payload
 }
 
 const onLoad = async (isSearch?: boolean) => {
   state.loading = true
+  const basePayload = setListPayload()
+  const payload = {
+    ...basePayload,
+    pageNum: isSearch ? 1 : state.queryParams.pageNum
+  }
   const apiRequest =
     activeStatus.value === MyCageType.MINE_CAGE
-      ? platAnimalCageApplicationApi.getList(state.queryParams)
-      : platAnimalCageApplicationApi.getMyCageHistoryList(state.queryParams)
+      ? platAnimalCageApplicationApi.getList(payload)
+      : platAnimalCageApplicationApi.getMyCageHistoryList(payload)
 
   const [err, res]: ToResponse = await to(apiRequest)
   if (err) return
@@ -199,6 +311,8 @@ const onLoad = async (isSearch?: boolean) => {
     }
   } else {
     state.pageList = list
+    state.queryParams.pageNum = 2
+    state.finished = list.length < state.queryParams.pageSize
   }
 }
 
@@ -207,6 +321,33 @@ const handleCheckDetail = (row: any) => {
   showDetailDialog.value = true
 }
 
+const onDateRangeConfirm = (values: Date[]) => {
+  if (values && values.length === 2) {
+    selectedDateRange.value = [values[0], values[1]]
+    dateTime.value = [
+      dayjs(values[0]).format('YYYY-MM-DD'),
+      dayjs(values[1]).format('YYYY-MM-DD')
+    ]
+    showCalendar.value = false
+    search()
+  }
+}
+
+const clearDateRange = () => {
+  selectedDateRange.value = null
+  dateTime.value = []
+  state.queryParams.startDate = ''
+  state.queryParams.endDate = ''
+  search()
+}
+
+const search = () => {
+  state.pageList = []
+  state.queryParams.pageNum = 1
+  state.finished = false
+  onLoad(true)
+}
+
 onMounted(() => {
   onLoad()
   getDicts()
@@ -219,6 +360,12 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
 
+  .search-wrap {
+    background: #fff;
+    margin-bottom: 10px;
+    padding: 15px;
+  }
+
   .list-container {
     overflow-y: auto;
     padding: 10px;

src/view/animal/return/index.vue

@@ -65,11 +65,17 @@
                 </span>
               </p>
               <p class="inst-title">
-                <span>申请时间</span>
+                <span>申请日期</span>
                 <span class="title ml8">
                   {{ formatToChineseDate(item.createdTime) }}
                 </span>
               </p>
+              <p class="inst-title">
+                <span>结束日期</span>
+                <span class="title ml8">
+                  {{ formatToChineseDate(item.endDate) }}
+                </span>
+              </p>
               <p class="inst-title">
                 <span>退还笼位(个)</span>
                 <span class="title ml8">