xiangyuan-gov-app/src/pages/dig/components/CollectModuleList.vue

<template>
  <FlexCol>
    <Image
      v-if="currentTaskBanner"
      :src="currentTaskBanner"
      :radius="20"
      :width="690"
      mode="widthFix"
    />
    <FlexCol :gap="20">
      <TaskList
        v-for="item in currentTaskDefItems"
        :key="item.title"
        :icon="item.icon"
        :title="item.title"
        :desc="item.desc"
        :extra="item.extra"
        :goButtonText="isView ? '查看' : '去采集'"
        :enable="typeof item.enable === 'string' ? canCollect(item.enable) : item.enable"
        @click="handleClick(item)"
      />
    </FlexCol>
  </FlexCol>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useCollectStore } from '@/store/collect';
import { useTaskEntryForm } from '../forms/composeable/TaskEntryForm';
import { type TaskMenuDefGoForm, type TaskMenuDefItem } from '../forms/tasks';
import { alert } from '@/components/utils/DialogAction';
import { getVillageInfoForm } from '../forms/forms';
import { navTo } from '@/components/utils/PageAction';
import FlexCol from '@/components/layout/FlexCol.vue';
import Image from '@/components/basic/Image.vue';
import TaskList from '../components/TaskList.vue';
import VillageApi from '@/api/inhert/VillageApi';
import { useAuthStore } from '@/store/auth';
import { waitTimeOut } from '@imengyu/imengyu-utils';

const { goForm, goPreviewForm } = useTaskEntryForm();
const authStore = useAuthStore();
const { canCollect, canCollectCatalog, getCollectModuleInternalNameById, collectableCatalogs } = useCollectStore();

const props = withDefaults(defineProps<{
  villageId: number,
  villageVolunteerId: number,
  taskTitle: string,
  taskPid: number,
  isView?: boolean,
}>(), {
  isView: false,
});

async function loadList() {
  await waitTimeOut(400);

  const res = (await VillageApi.getCatalogList(
    props.villageId, 
    authStore.isAdmin ? undefined : props.villageVolunteerId,
    props.taskPid
  ));
  if (res.length === 0)
    return;
  currentTaskDefItems.value = res
    .map(item => {
      try {
        const collectModuleInternalName = getCollectModuleInternalNameById(item.collectModuleId);
        const formDefine = collectModuleInternalName ? getVillageInfoForm(collectModuleInternalName, -1) : undefined;
        return {
          ...item,
          extra: authStore.isAdmin && item.total >= 0 ? `已采编 ${item.total}` : '',
          enable: canCollectCatalog(item.id) || collectModuleInternalName,
          catalogItem: item,
          goForm: !item.haschild && collectModuleInternalName ? [ 
            collectModuleInternalName, 
            item.typeId ?? -1, 
            formDefine?.[2].typeName, 
            collectModuleInternalName === 'overview' ? 'common' : undefined,
            item.title,
            item.id
          ] as TaskMenuDefGoForm : undefined,
          onClick: () => {
            if (item.haschild) {
              navTo('/pages/dig/forms/task', {
                ...props,
                taskTitle: item.title,
                taskPid: item.id,
                isView: props.isView,
              })
            } else {
              alert({
                title: item.title,
                content: '您暂无权限采集该板块',
              })
            }
          }
        }
      } catch (e) {
        return {
          ...item,
          desc: '' + (e instanceof Error ? e.message : e),
          enable: false,
        }
      }
    });
}

watch(() => props.taskPid, loadList);
onMounted(loadList);

const currentTaskDefItems = ref<TaskMenuDefItem[]>([]);
const currentTaskBanner = ref('');
const handleClick = (item: TaskMenuDefItem) => {
  
  if (!item.enable && !authStore.isAdmin) {
    uni.showToast({
      title: '您没有完成任务的权限，如需要请联系管理员',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  if (item.goForm instanceof Array) {
    if (props.isView)
      goPreviewForm(...item.goForm);
    else
      goForm(...item.goForm);
    return;
  }
  else if (item.goForm) {
    navTo('/pages/dig/forms/task', {
      ...props,
      taskTitle: item.title,
      taskPid: (item as any).id,
      isView: props.isView,
    })
    return;
  }
  if (item.onClick) {
    item.onClick();
  }
}
</script>