ocr-web/src/views/worksheet/aside/WorkSheetList.vue

<script lang="ts" setup>
import { deletePackage } from '@/api/home/main'
import NotPassed from '@/components/NotPassed.vue'
import { useWorkOrder } from '@/store/modules/workOrder'
import { isEmpty } from '@/utils'
import { useInfiniteScroll } from '@vueuse/core'
import { useMessage } from 'naive-ui'
import { reactive, ref, watch } from 'vue'
import ApprovalModal from '../modal/ApprovalModal.vue'
import ListItem from './ListItem.vue'
import type { PackageListItem } from '/#/workorder'

defineProps({
  showFieldList: {
    type: Array,
    default: () => [],
  },
  dicts: {
    type: Array,
    default: () => [],
  },
})
const workStore = useWorkOrder()
const data = ref<PackageListItem[]>([])
const activeId = ref('')
const el = ref<HTMLDivElement | null>(null)
const keyword = ref('')
const canloadMore = ref(true)
const isLoading = ref(false)

const pagination = reactive({
  pageNo: 0,
  pageSize: 10,
})

const approvalModalRef = ref(null)
const notPassedRef: any = ref(null)
const overTask = ref<any>(null);

function selectHandler(id: string, index: number) {
  workStore.setActive(index)
  // showModal(approvalModalRef, id)
}

useInfiniteScroll(
  el as any,
  () => {
    loadMore()
  },
  {
    distance: 10,
    interval: 1500,
    canLoadMore: () => canloadMore.value,
  },
)

async function loadMore() {
  if (isLoading.value || el.value == null)
    return
  isLoading.value = true
  try {
    const more = await fetchList()
    more.forEach(ele=>{
      ele.search = JSON.parse(ele.search)
      // ele.search.createTime = ele.search.submit_date_timestamp
    })
    data.value.push(...more)
  }
  finally {
    isLoading.value = false
  }
}

async function fetchList() {
  try {
    pagination.pageNo += 1
    const result = await workStore.fetchOrderList(pagination, keyword.value)
    const { data, pageCount } = result
    if (pageCount !== 0)
      canloadMore.value = pageCount >= pagination.pageNo
    else
      canloadMore.value = false

    return data || []
  }
  catch (error) {
    canloadMore.value = false
    return []
  }
}

watch(
  () => workStore.activeId,
  (newVal) => {
    if (isEmpty(newVal))
      return

    activeId.value = newVal
  },
)

function reset() {
  pagination.pageNo = 0
  pagination.pageSize = 10
  canloadMore.value = true
  data.value.length = 0

  workStore.reset()
}

function notPass(value) {
  notPassedRef.value.showModal(value)
}

async function search(word: string) {
  keyword.value = word
  reset()
  useInfiniteScroll(
    el as any,
    () => {
      loadMore()
    },
    { distance: 10, canLoadMore: () => canloadMore.value },
  )
}
function overTaskHandelr(item: any) {
  overTask.value = item
}
function leaveTaskHandler(event) {
  if(event?.relatedTarget?.id !=="taskPopconfirmRef"){
    overTask.value = null;
  }
}
const message = useMessage()
function dismisClick(packageId:string) {
  deletePackage({packageId: packageId}).then((res) => {
    if(res.code==="OK"){
      message.success("解散任务包成功")
      reset()
      loadMore()
    }
  })
}
defineExpose({
  search,
})
</script>

<template>
  <ApprovalModal ref="approvalModalRef" @not-pass="notPass" />
  <NotPassed ref="notPassedRef" />
  <n-spin :show="isLoading">
    <div ref="el" class="list">
      <ListItem
        v-for="(item, index) in data"
        :key="item.id"
        :selected="activeId === item.checkDuplicateId"
        :list-item="item"
        :show-field-list="showFieldList"
        :dicts="dicts"
        :mouse-over-task="overTask"
        @click="selectHandler(item.id, index)"
        @mouseover="overTaskHandelr(item)"  
        @mouseleave="leaveTaskHandler"
        @dismisClick="dismisClick"
      />
    </div>
  </n-spin>
</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>