xiangyuan-collect-web/src/pages/forms/task.vue

<template>
  <div class="tasks main-background main-background-type0">
    <div class="nav-placeholder">
    </div>
    <section class="main-section">
      <div class="content">
        <a-button :icon="h(ArrowLeftOutlined)" class="mb-3" @click="router.back()">返回上一页</a-button>

        <div class="d-flex flex-column" v-if="currentTaskDefItem" :padding="30" :gap="10">
          <img 
            v-if="currentTaskDefItem.banner" 
            :src="currentTaskDefItem.banner"
            mode="widthFix"
          />
          <TaskList>
            <TaskItem 
              v-for="item in currentTaskDefItem.list" 
              :key="item.title" 
              :icon="item.icon" 
              :title="item.title"
              :desc="item.desc" 
              :enable="typeof item.enable === 'string' ? canCollect(item.enable) : item.enable"
              @click="handleClick(item)" 
            />
          </TaskList>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue';
import { useRouter } from 'vue-router';
import { useLoadQuerys } from '@imengyu/imengyu-web-shared';
import { useCollectStore } from '@/stores/collect';
import { useTaskEntryForm } from '../composeable/TaskEntryForm';
import { TaskMenuDef, type TaskMenuDefItem } from './tasks';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { getVillageInfoForm } from './forms';
import VillageApi from '@/api/inhert/VillageApi';
import TaskList from '../components/TaskList.vue';
import TaskItem from '../components/TaskItem.vue';

const router = useRouter();
const { goForm } = useTaskEntryForm();
const { canCollect, getCollectModuleInternalNameById } = useCollectStore();

useLoadQuerys({
  villageId: 0,
  taskName: '',
  taskPid: 0,
}, async (querys) => {
  const { villageId, taskName, taskPid } = querys;
  currentTaskDefItem.value = { ...TaskMenuDef[taskName] };
  if (taskPid) {
    const res = (await VillageApi.getCatalogList(villageId, taskPid));
    if (res.length === 0)
      return;
    currentTaskDefItem.value.list = res
      .map(item => {
        try {
          const collectModuleInternalName = getCollectModuleInternalNameById(item.collectModuleId);
          if (!collectModuleInternalName && item.collectModuleId)
            throw new Error('不存在定义的表单数据');
          const formDefine = collectModuleInternalName ? getVillageInfoForm(collectModuleInternalName, -1) : undefined;
          return {
            ...item,
            enable: true,
            catalogItem: item,
            goForm: collectModuleInternalName ? [
              collectModuleInternalName,
              -1,
              formDefine?.[2].typeName,
              collectModuleInternalName === 'overview' ? 'common' : undefined,
              item.title
            ] : undefined,
            onClick: () => {
              if (item.haschild) {
                router.push({
                  path: '/forms/task', 
                  query: {
                    ...querys,
                    taskName: item.title,
                    taskPid: item.id,
                  }
                })
              } else {
                alert({
                  title: item.title,
                  content: '不存在定义的表单数据',
                })
              }
            }
          }
        } catch (e) {
          return {
            ...item,
            desc: '' + e,
            enable: false,
          }
        }
      });
  }
});

const currentTaskDefItem = ref<TaskMenuDefItem | null>(null);
const handleClick = (item: TaskMenuDefItem['list'][0]) => {
  if (item.goForm) {
    goForm(...item.goForm);
    return;
  }
  if (item.onClick) {
    item.onClick();
  }
}



</script>