feat: 搜索

src/store/modules/workOrder.ts

@@ -45,12 +45,13 @@ export const useWorkOrderStore = defineStore({
     },
     async fetchOrderList(pagination) {
       const res = await getPackageList(pagination)
-      this.setOrderList(res.data)
 
-      if (res.data.length > 0)
+      if (res.data.length > 0) {
+        this.setOrderList(res.data)
         this.setActive(0)
+      }
 
-      return res.data
+      return res
     },
     updateImmersion() {
       this.immersion = !this.immersion

src/views/home/content/Content.vue

@@ -177,10 +177,8 @@ async function featchList() {
 }
 
 async function loadMore() {
-  if (loading.value || el.value == null) {
-    // console.log('图片加载中....')
+  if (loading.value || el.value == null)
     return
-  }
 
   const more = await featchList()
   listData.value.push(...more)

src/views/worksheet/aside/Aside.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed, defineOptions, nextTick, onBeforeMount, onMounted, reactive, ref, unref, watch } from 'vue'
+import { debounce } from 'lodash-es'
 import CustomFieldModalVue from '../modal/CustomFieldModal.vue'
 import WorkSheetList from './WorkSheetList.vue'
 import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
 import { getViewportOffset } from '@/utils/domUtils'
-import type { PackageListItem } from '/#/workorder'
 import { useWorkOrder } from '@/store/modules/workOrder'
 
 defineOptions({ name: 'AsideContent' })
@@ -12,6 +12,7 @@ defineOptions({ name: 'AsideContent' })
 const collapse = ref(false)
 const workStore = useWorkOrder()
 const filterModalRef = ref(null)
+const packageListRef = ref<HTMLDivElement | null>(null)
 
 function collapseHandler() {
   collapse.value = !collapse.value
@@ -54,18 +55,6 @@ onMounted(() => {
   })
 })
 
-const data = ref<PackageListItem[]>([])
-
-const pagination = reactive({
-  pageNo: 1,
-  pageSize: 10,
-})
-
-onBeforeMount(async () => {
-  const orderList = await workStore.fetchOrderList(pagination)
-  data.value = orderList
-})
-
 const asideEnter = ref(false)
 
 const showCollapse = computed(() => {
@@ -80,6 +69,16 @@ function showFilter() {
 watch(() => workStore.immersion, () => {
   collapse.value = true
 })
+
+const showSearch = ref(false)
+
+function setShowSearch(value: boolean) {
+  showSearch.value = value
+}
+
+const inputHandler = debounce((word) => {
+  (packageListRef.value as any).search(word)
+}, 500)
 </script>
 
 <template>
@@ -90,16 +89,29 @@ watch(() => workStore.immersion, () => {
       </div>
     </div>
     <div class="aside-header">
-      <div class="aside-header-left">
-        <svg-icon name="all-worksheet" size="32" />
-        <span style="margin-left: 8px;">所有工单</span>
+      <div v-show="!showSearch" class="warpper">
+        <div class="left">
+          <svg-icon name="all-worksheet" size="32" />
+          <span style="margin-left: 8px;">所有工单</span>
+        </div>
+        <div class="right">
+          <SvgIcon
+            style="cursor: pointer;margin-left: 10px;" size="18" name="magnifying-1"
+            @click="setShowSearch(true)"
+          />
+          <SvgIcon style="cursor: pointer;margin-left: 10px;" size="18" name="filter" @click="showFilter" />
+        </div>
       </div>
-      <div class="aside-header-right">
-        <SvgIcon style="cursor: pointer;margin-left: 10px;" size="18" name="magnifying-1" />
-        <SvgIcon style="cursor: pointer;margin-left: 10px;" size="18" name="filter" @click="showFilter" />
+      <div v-show="showSearch" class="warpper">
+        <n-input style="flex: 1;height: 32px;" placeholder="请输入你需要搜索的内容" @input="inputHandler">
+          <template #suffix>
+            <SvgIcon size="14px" name="magnifying-1" />
+          </template>
+        </n-input>
+        <SvgIcon size="16px" style="margin-left: 6px;cursor: pointer;" name="clear" @click="setShowSearch(false)" />
       </div>
     </div>
-    <WorkSheetList :style="listStyle" class="work-sheet-list" :data="data" :active-id="workStore.getActiveId" />
+    <WorkSheetList ref="packageListRef" :style="listStyle" class="work-sheet-list" />
     <CustomFieldModalVue ref="filterModalRef" />
   </div>
 </template>
@@ -115,20 +127,23 @@ watch(() => workStore.immersion, () => {
   box-sizing: border-box;
 
   &-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     padding: 12px 16px;
     width: 100%;
     overflow: hidden;
 
-    &-left {
+    .warpper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .left {
       display: flex;
       align-items: center;
       overflow: hidden;
     }
 
-    &-right {
+    .right {
       display: flex;
       align-items: center;
       overflow: hidden;
@@ -147,7 +162,7 @@ watch(() => workStore.immersion, () => {
     height: 100%;
     background: #507afd;
     position: absolute;
-    right: 0;
+    right: -2px;
     top: 0;
   }
 

src/views/worksheet/aside/ListItem.vue

@@ -36,14 +36,14 @@ const svgName = computed(() => {
       <li>筛选时间：{{ listItem.createTime }}</li>
       <li>执行人：{{ listItem.createBy }}</li>
     </ul>
-    <div class="list-item-divider" />
   </div>
 </template>
 
 <style lang="less" scoped>
 .list-item {
-  padding: 12px 0px 12px 16px;
+  padding: 10px 0px 10px 8px;
   position: relative;
+  border-bottom: 1px solid #e8e8e8;
 
   &-header {
     display: flex;
@@ -78,7 +78,7 @@ const svgName = computed(() => {
   }
 
   &-divider {
-    width: 100%;
+    width: 280px;
     height: 1px;
     background-color: #e8e8e8;
     position: absolute;

src/views/worksheet/aside/WorkSheetList.vue

@@ -2,36 +2,98 @@
 import type { PackageListItem } from '/#/workorder'
 import ListItem from './ListItem.vue'
 import { useWorkOrder } from '@/store/modules/workOrder'
+import { onUnmounted, reactive, ref, watch } from 'vue'
+import { useInfiniteScroll } from '@vueuse/core'
 
-defineOptions({ name: 'WorkSheetList' })
+const workStore = useWorkOrder()
+const data = ref<PackageListItem[]>([])
+const activeId = ref('')
+const el = ref<HTMLDivElement | null>(null)
+const keyword = ref('')
+const canloadMore = ref(true)
 
-defineProps({
-  activeId: {
-    type: String,
-    required: true,
-  },
-  data: {
-    type: Object as PropType<PackageListItem[]>,
-    required: true,
-  },
+const pagination = reactive({
+  pageNo: 0,
+  pageSize: 10,
 })
 
-const workStore = useWorkOrder()
-
 function selectHandler(id: string, index: number) {
   workStore.setActive(index)
 }
+
+const { isLoading } = useInfiniteScroll(
+  el as any,
+  () => {
+    loadMore()
+  },
+  { distance: 10, interval: 300, canLoadMore: () => {
+    console.log('canloadmore excuted!')
+    return canloadMore.value
+  } },
+)
+
+async function loadMore() {
+  if (isLoading.value || el.value == null)
+    return
+
+  console.log('loadmore')
+  const more = await fetchList()
+  data.value.push(...more)
+}
+
+async function fetchList() {
+  try {
+    pagination.pageNo += 1
+    const result = await workStore.fetchOrderList(pagination)
+    const { data, pageCount } = result
+    canloadMore.value = pageCount >= pagination.pageNo
+    return data
+  }
+  catch (error) {
+    return []
+  }
+}
+
+watch(() => workStore.activeId, (newVal) => {
+  activeId.value = newVal
+})
+
+function reset() {
+  pagination.pageNo = 0
+  pagination.pageSize = 10
+  canloadMore.value = true
+  data.value.length = 0
+}
+
+async function search(word: string) {
+  keyword.value = word
+  reset()
+  useInfiniteScroll(
+    el as any,
+    () => {
+      loadMore()
+    },
+    { distance: 10, canLoadMore: () => canloadMore.value },
+  )
+}
+
+defineExpose({
+  search,
+})
 </script>
 
 <template>
   <n-scrollbar>
-    <ListItem
-      v-for="(item, index) in data" :key="item.id" :selected="activeId === item.id" :list-item="item"
-      @click="selectHandler(item.id, index)"
-    />
+    <n-spin :show="isLoading">
+      <div ref="el">
+        <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>
 </style>
-../types