refactor: 调整工单左侧列表滚动刷新逻辑

src/store/modules/workOrder.ts

@@ -47,7 +47,8 @@ export const useWorkOrderStore = defineStore({
       const res = await getPackageList(pagination, keyword)
 
       if (res.data.length > 0) {
-        this.setOrderList(res.data)
+        this.packageList.push(...res.data)
+        if (!this.activeId)
           this.setActive(0)
       }
 

src/views/task/aside/TaskList.vue

@@ -5,8 +5,6 @@ import ListItem from './ListItem.vue'
 import { useTaskStore } from '@/store/modules/task'
 import emitter from '@/utils/mitt'
 
-defineOptions({ name: 'WorkSheetList' })
-
 const taskStore = useTaskStore()
 const data = ref<any[]>([])
 const activeId = ref('')

src/views/worksheet/aside/Aside.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
-import { useWorkOrder } from '@/store/modules/workOrder'
-import { getViewportOffset } from '@/utils/domUtils'
 import { debounce } from 'lodash-es'
 import { computed, defineOptions, nextTick, onMounted, ref, unref, watch } from 'vue'
 import CustomFieldModalVue from '../modal/CustomFieldModal.vue'
 import WorkSheetList from './WorkSheetList.vue'
+import { getViewportOffset } from '@/utils/domUtils'
+import { useWorkOrder } from '@/store/modules/workOrder'
+import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
 
 defineOptions({ name: 'AsideContent' })
 
@@ -114,8 +114,8 @@ const inputHandler = debounce((word) => {
         <SvgIcon size="16px" style="margin-left: 6px;cursor: pointer;" name="clear" @click="setShowSearch(false)" />
       </div>
     </div>
-    <WorkSheetList ref="packageListRef" :style="listStyle" class="work-sheet-list" />
+    <WorkSheetList ref="packageListRef" class="work-sheet-list" />
-    <CustomFieldModalVue ref="filterModalRef" :reviewType="1"/>
+    <CustomFieldModalVue ref="filterModalRef" :review-type="1" />
   </div>
 </template>
 

src/views/worksheet/aside/WorkSheetList.vue

@@ -4,6 +4,7 @@ import ListItem from './ListItem.vue'
 import { useWorkOrder } from '@/store/modules/workOrder'
 import { reactive, ref, watch } from 'vue'
 import { useInfiniteScroll } from '@vueuse/core'
+import { isEmpty } from '@/utils'
 
 const workStore = useWorkOrder()
 const data = ref<PackageListItem[]>([])
@@ -56,6 +57,9 @@ async function fetchList() {
 }
 
 watch(() => workStore.activeId, (newVal) => {
+  if (isEmpty(newVal))
+    return
+
   activeId.value = newVal
 })
 
@@ -64,6 +68,8 @@ function reset() {
   pagination.pageSize = 10
   canloadMore.value = true
   data.value.length = 0
+
+  workStore.reset()
 }
 
 async function search(word: string) {
@@ -84,17 +90,29 @@ defineExpose({
 </script>
 
 <template>
-  <n-scrollbar>
   <n-spin :show="isLoading">
-      <div ref="el">
+    <div ref="el" class="list">
       <ListItem
         v-for="(item, index) in data" :key="item.id" :selected="activeId === item.id" :list-item="item"
         @click="selectHandler(item.id, index)"
       />
     </div>
   </n-spin>
-  </n-scrollbar>
 </template>
 
 <style lang="less" scoped>
+.list {
+  height: calc(100vh - 146px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  scrollbar-width: none;
+  /* firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
 </style>

src/views/worksheet/content/Content.vue

@@ -8,6 +8,7 @@ import { useWorkOrder } from '@/store/modules/workOrder'
 import { clearTF, getPackageTaskList, getTaskDetailInfo, getTaskDetailPictureList, setTF } from '@/api/work/work'
 import { fieldMap } from '@/config/workorder'
 import { hideDownload } from '@/utils/image'
+import { isEmpty } from '@/utils'
 
 const batch = ref(false)
 const selectItems = ref<any[]>([])
@@ -184,6 +185,11 @@ function backHandler() {
 }
 
 watch(() => workStore.activeId, async (newValue, oldValue) => {
+  const taskId = workStore.getActiveId
+
+  if (isEmpty(taskId))
+    return
+
   const res = await getPackageTaskList(newValue, packagepagination)
   const { data } = res
   taskList.value = data