ocr-web/src/views/task/aside/TaskList.vue

<script lang="ts" setup>
import { useInfiniteScroll } from "@vueuse/core";
import { defineProps, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import ListItem from "./ListItem.vue";
import emitter from "@/utils/mitt";
import { useTaskStore } from "@/store/modules/task";

defineProps({
  showFieldList: {
    type: Array,
    default: () => [],
  },
});
const taskStore = useTaskStore();
const data = ref<any[]>([]);
const activeId = ref("");
const taskIndex = ref("")
const el = ref<HTMLDivElement | null>(null);
const keyword = ref("");
const canloadMore = ref(true);
const isLoading = ref(false);
const searchId = ref("");

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

function selectHandler(item, index: number) {
  activeId.value = item.id;
  taskIndex.value = item.taskIndex
  console.log(activeId.value, item.id);
  console.log(index);
  taskStore.setActive(index, item.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();
    data.value.push(...more);
  }
  finally {
    isLoading.value = false;
  }
}

// 获取左侧列表
async function fetchList() {
  try {
    pagination.pageNo += 1;
    const result = await taskStore.fetchApprovalList({
      ...pagination,
      keyword: keyword.value,
      userSearchId: searchId.value,
    });
    const { data, pageCount } = result;
    canloadMore.value = pageCount >= pagination.pageNo;
    return data || [];
  }
  catch (error) {
    canloadMore.value = false;
    return [];
  }
}

watch(
  () => taskStore.activeId,
  (newVal) => {
    activeId.value = newVal;
  },
);

watch(
  () => taskStore.inFileId,
  async (newVal) => {
    const newlist = [];
    const filterid = newVal.taskname;
    console.log(filterid);
    const index = data.value.findIndex(person => person.fromtaskname === filterid);
    const ovelist = data.value.filter(item => item.fromtaskname !== filterid);

    ovelist.map((item) => {
      newlist.push(item);
      return item;
    });
    data.value = newlist;
    activeId.value = newlist[index].id;

    taskStore.setActive(index, newlist[index].id);
    // taskStore.setActive(index)
    // activeId.value = data[index+1].id
    // selectHandler(data[index].id, index)
    /* let ovelist = data.value.filter(item => item. fromtaskname !== filterid);
    let newlist=[]
    ovelist.map((item)=>{
      newlist.push(item)
    })
    data.value=newlist
     taskStore.setActive(2)
    alert(1) */
  },
);
function reset() {
  pagination.pageNo = 0;
  pagination.pageSize = 30;
  canloadMore.value = true;
  data.value.length = 0;
  taskStore.reset();
}

async function search(word: string) {
  keyword.value = word;
  reset();
  useInfiniteScroll(
    el as any,
    () => {
      loadMore();
    },
    { distance: 10, canLoadMore: () => canloadMore.value },
  );
}

onMounted(() => {
  emitter.on("refresh", refreshHandler);
  emitter.on("filter", async (id) => {
    await reset();
    searchId.value = id;
    data.value = await fetchList();
    activeId.value = data.value[0]?.id;
    taskIndex.value = data.value[0]?.taskIndex
    console.log(data.value);
  });
});

onUnmounted(() => {
  emitter.off("refresh", refreshHandler);
});

async function refreshHandler() {
  search("");
}

function setStatusName(text) {
  const index = taskStore.getCurrentIndex;
  data.value[index].statshisText = text;
}

defineExpose({
  search,
  setStatusName,
});
</script>

<template>
  <n-spin :show="isLoading">
    <div ref="el" class="list">
      <ListItem
        v-for="(item, index) in data"
        :key="item.id"
        :show-field-list="showFieldList"
        :selected="`${activeId}_${taskIndex}` === `${item.id}_${item.taskIndex}`"
        :list-item="item"
        @click="selectHandler(item, index)"
      />
    </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>