minnan-collect-web/src/pages/inheritor.vue

<template>
  <!-- 传承人提交首页 -->
  <div class="about main-background main-background-type0">
    <div class="nav-placeholder">
    </div>
    <!-- 表单 -->
    <section class="main-section large">
      <div class="content">
        <div class="title left-right">
          <span style="width:160px;"></span>
          <h2>非遗数字化资源信息校对</h2>
          <small class="text-secondary">技术支持：18649931391</small>
        </div>
       
        <a-tabs v-model:activeKey="activeKey" centered>
          <a-tab-pane key="1" tab="非遗项目">
            <EmptyToRecord title="非遗项目" :loader="ichData" @edit="router.push({ name: 'FormIch' })">
              <a-alert v-if="ichData.content.value!.progress == -1" message="提交的信息被退回，您可以去修改" type="error" class="mt-4" showIcon>
                <template #action>
                  <a-button size="small" type="primary" @click="router.push({ name: 'FormIch' })">去修改</a-button>
                </template>
              </a-alert>
              <a-descriptions class="mt-4 light" title="非遗项目信息" v-if="ichData.content.value" bordered :column="{ xs: 1, sm: 1, md: 1, lg: 2 }">
                <a-descriptions-item label="非遗项目名称"><ShowValueOrNull :value="ichData.content.value.title" /></a-descriptions-item>
                <a-descriptions-item label="非遗分类"><ShowValueOrNull :value="ichData.content.value.ichTypeText" /></a-descriptions-item>
                <a-descriptions-item label="申报区域"><ShowValueOrNull :value="ichData.content.value.regionText" /></a-descriptions-item>
                <a-descriptions-item label="级别"><ShowValueOrNull :value="ichData.content.value.levelText" /></a-descriptions-item>
                <a-descriptions-item label="批次"><ShowValueOrNull :value="ichData.content.value.batchText" /></a-descriptions-item>
                <a-descriptions-item label="非遗项目简介" :span="3"><SimpleRichHtml :contents="[ ichData.content.value.intro ]" /></a-descriptions-item>
                <a-descriptions-item label="传承谱系" :span="3"><SimpleRichHtml :contents="[ ichData.content.value.pedigree as string ]" /></a-descriptions-item>
                <a-descriptions-item label="保护单位"><ShowValueOrNull :value="ichData.content.value.unit" /></a-descriptions-item>
                <a-descriptions-item label="非遗项目相关图片">
                  <ImageGrid :data="ichData.content.value.images" />
                </a-descriptions-item>
                <a-descriptions-item v-if="ichData.content.value.video" label="相关视频">
                  <video controls :src="ichData.content.value.video" style="max-width:300px;" />
                </a-descriptions-item>
                <a-descriptions-item v-if="ichData.content.value.audio" label="相关音频">
                  <audio controls :src="ichData.content.value.audio" style="max-width:300px;" />
                </a-descriptions-item>
                <a-descriptions-item v-if="ichData.content.value.latitude && ichData.content.value.longitude" label="地图坐标">
                  <SimplePointedMap :longitude="ichData.content.value.longitude" :latitude="ichData.content.value.latitude" :zoom="15" height="300px"  />
                </a-descriptions-item>
              </a-descriptions>
            </EmptyToRecord>
          </a-tab-pane>
          <a-tab-pane key="2" tab="传承人">
            <EmptyToRecord title="传承人" :loader="inheritorData" @edit="router.push({ name: 'FormInheritor' })">
              <a-alert v-if="inheritorData.content.value!.progress == -1" message="提交的信息被退回，您可以去修改" type="error" class="mt-4" showIcon>
                <template #action>
                  <a-button size="small" type="primary" @click="router.push({ name: 'FormInheritor' })">去修改</a-button>
                </template>
              </a-alert>
              <a-descriptions class="mt-4 light" title="传承人信息" v-if="inheritorData.content.value" bordered :column="{ xs: 1, sm: 1, md: 1, lg: 2 }">
                <a-descriptions-item label="名字"><ShowValueOrNull :value="inheritorData.content.value.title" /></a-descriptions-item>
                <a-descriptions-item label="传承人照片">
                  <ImageGrid :data="inheritorData.content.value.images" />
                </a-descriptions-item> 
                <a-descriptions-item v-if="inheritorData.content.value.video" label="传承人相关视频">
                  <video controls :src="inheritorData.content.value.video" style="max-width:300px;" />
                </a-descriptions-item>

                <a-descriptions-item label="传承人等级"><ShowValueOrNull :value="inheritorData.content.value.levelText" /></a-descriptions-item>
                <a-descriptions-item label="传承人批次"><ShowValueOrNull :value="inheritorData.content.value.batchText" /></a-descriptions-item>
                <a-descriptions-item label="民族"><ShowValueOrNull :value="inheritorData.content.value.nation" /></a-descriptions-item>
                <a-descriptions-item label="籍贯"><ShowValueOrNull :value="inheritorData.content.value.birthplace" /></a-descriptions-item>
                <a-descriptions-item label="出生日期"><ShowValueOrNull :value="inheritorData.content.value.dateBirth" /></a-descriptions-item>
                <a-descriptions-item label="单位"><ShowValueOrNull :value="inheritorData.content.value.unit" /></a-descriptions-item>
                <a-descriptions-item label="区域"><ShowValueOrNull :value="inheritorData.content.value.regionText" /></a-descriptions-item>

                <a-descriptions-item label="传承人简介" :span="3"><SimpleRichHtml :contents="[ inheritorData.content.value.intro ]" /></a-descriptions-item>
                <a-descriptions-item label="奖项/成就" :span="3"><SimpleRichHtml :contents="[ inheritorData.content.value.prize ]" /></a-descriptions-item>
                <a-descriptions-item label="传承人谱系" :span="3"><SimpleRichHtml :contents="[ inheritorData.content.value.pedigree as string ]" /></a-descriptions-item>
               
                <a-descriptions-item v-if="inheritorData.content.value.video" label="视频">
                  <video controls :src="inheritorData.content.value.video" style="max-width:300px;" />
                </a-descriptions-item>
                <a-descriptions-item v-if="inheritorData.content.value.audio" label="音频">
                  <audio controls :src="inheritorData.content.value.audio" style="max-width:300px;" />
                </a-descriptions-item>
              </a-descriptions>
            </EmptyToRecord>
          </a-tab-pane>
          <a-tab-pane key="3" tab="传习所">
            <EmptyToRecord title="传习所" :loader="seminarData" @edit="router.push({ name: 'FormSeminar' })">
              <a-alert v-if="seminarData.content.value?.progress == -1" message="提交的信息被退回，您可以去修改" type="warning" showIcon></a-alert>
              <a-descriptions class="mt-4 light" title="传习所信息" v-if="seminarData.content.value" bordered :column="{ xs: 1, sm: 1, md: 1, lg: 2 }">
                <a-descriptions-item label="传习所名称"><ShowValueOrNull :value="seminarData.content.value.title" /></a-descriptions-item>
                <a-descriptions-item label="传习所级别"><ShowValueOrNull :value="seminarData.content.value.levelText" /></a-descriptions-item>
                <a-descriptions-item label="批次"><ShowValueOrNull :value="seminarData.content.value.batchText" /></a-descriptions-item>
                <a-descriptions-item label="传习所介绍" :span="3"><SimpleRichHtml :contents="[ seminarData.content.value.intro as string ]" /></a-descriptions-item>
                <a-descriptions-item label="传习所地址"><ShowValueOrNull :value="seminarData.content.value.address" /></a-descriptions-item>
                <a-descriptions-item v-if="seminarData.content.value.latitude && seminarData.content.value.longitude" label="地图坐标">
                  <SimplePointedMap :longitude="seminarData.content.value.longitude" :latitude="seminarData.content.value.latitude" :zoom="15" height="300px"  />
                </a-descriptions-item>
                <a-descriptions-item label="传习所/保护单位类型"><ShowValueOrNull :value="seminarData.content.value.ichSiteTypeText" /></a-descriptions-item>
                <a-descriptions-item label="是否对游客开放">{{seminarData.content.value.visit ? '是' : '否'}}</a-descriptions-item>

                <a-descriptions-item v-if="seminarData.content.value.image" label="图片">
                  <a-image :src="seminarData.content.value.image" style="max-width:300px;" />
                </a-descriptions-item>
                    
                <a-descriptions-item label="联系人"><ShowValueOrNull :value="seminarData.content.value.contact" /></a-descriptions-item>
                <a-descriptions-item label="联系电话"><ShowValueOrNull :value="seminarData.content.value.mobile" /></a-descriptions-item>
                

              </a-descriptions>
            </EmptyToRecord>
          </a-tab-pane>
          <a-tab-pane key="4" tab="作品">
            <EmptyToRecord title="作品" buttonText="新增作品" :loader="ichData" :showEdited="false" @edit="router.push({ name: 'FormWork' })">
              <div class="flex justify-end me-2 mb-2">
                <a-button type="primary" size="small" @click="router.push({ name: 'FormWork' })">+ 新增</a-button>
              </div>
              <a-list class="light-round" item-layout="horizontal" :data-source="worksData || []">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta
                      :title="item.title"
                      :description="item.desc"
                    >
                      <template #avatar>
                        <a-avatar :src="item.image" />
                      </template>
                    </a-list-item-meta>
                    <template #actions>
                      <a key="list-loadmore-edit" @click="router.push({ name: 'FormWork', query: { id: item.id } })">编辑</a>
                    </template>
                  </a-list-item>
                </template>
              </a-list>
            </EmptyToRecord>
          </a-tab-pane>
          <!-- <a-tab-pane key="5" tab="五年计划">
            <EmptyToRecord title="五年计划" :model="planData" :showEdited="false" @edit="router.push({ name: 'FormPlan' })">
              <div class="flex justify-end me-2 mb-2">
                <a-button type="primary" size="small" @click="router.push({ name: 'FormPlan' })">+ 新增</a-button>
              </div>
              <a-list item-layout="horizontal" :data-source="planData">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta
                      :title="item.name"
                      :description="item.desc"
                    />
                    <template #actions>
                      <a-badge v-if="item.progress === -1" status="error" text="不通过" />
                      <a-badge v-else-if="item.progress === 0" status="processing" text="待审核" />
                      <a-badge v-else-if="item.progress === 1" status="success" text="已通过" />
                      <a key="list-loadmore-edit" @click="router.push({ name: 'FormPlan', query: { id: item.id } })">编辑</a>
                    </template>
                  </a-list-item>
                </template>
              </a-list>
            </EmptyToRecord>
          </a-tab-pane> -->
          <a-tab-pane key="6">
            <template #tab>
              <a-badge count="NEW">
                <span class="pr-5">自查评估</span>
              </a-badge>
            </template>
            <div class="flex flex-row mt-4 mb-4 gap-4">
              <a-button class="flex-1 h-[240px]!" type="default" @click="router.push({ name: 'CollectEvaluationForm' })">
                <div class="flex flex-col items-center">
                  <img src="@/assets/images/icon/EvaluationForm.svg" class="w-[100px] h-[100px]" alt="自查评估表" />
                  <span>自查评估表</span>
                </div>
              </a-button>
              <a-button class="flex-1 h-[240px]!" type="default" @click="router.push({ name: 'CollectAgreementSign' })">
                <div class="flex flex-col items-center">
                  <img src="@/assets/images/icon/AgreementSign.svg" class="w-[100px] h-[100px]" alt="传承协议签署" />
                  <span>传承协议签署</span>
                </div>
              </a-button>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </section>
    <a-modal v-model:open="showInMessage" title="提示">
      <p>尊敬的非遗传承人您好！</p>
      <p>您手中的技艺、口中的故事，是闽南文化代代相传的 “活瑰宝”，更是咱闽南人抹不去的文化根脉。咱们建闽南文化生态数据库，就是想把这些珍贵的传承智慧好好存下来、护起来，让更多人看见，让后代能接续。</p>
      <p>您此刻录入的每一段细节、每一句讲解，都不是简单的记录 —— 是给您的手艺留 “活档案”，更是为闽南文化的传承添 “实底气”。恳请您多费心、多细致，这份用心，才能让咱的非遗真正 “活” 在未来，传得更远！</p>
      <template #footer>
        <a-button key="submit" type="primary" @click="closeInMessage">好的</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { SettingsUtils } from '@imengyu/imengyu-utils';
import { RequestApiError } from '@imengyu/imengyu-utils';
import type { InheritorInfo, InheritorWorkInfo, PlanInfo, SeminarInfo } from '@/api/inheritor/InheritorContent';
import InheritorContent from '@/api/inheritor/InheritorContent';
import SimplePointedMap from '@/components/content/SimplePointedMap.vue';
import EmptyToRecord from '@/components/parts/EmptyToRecord.vue';
import { useSimpleDataLoader } from '@/composeables/useSimpleDataLoader';
import SimpleRichHtml from '@/components/content/SimpleRichHtml.vue';
import ImageGrid from '@/components/content/ImageGrid.vue';

const router = useRouter();
const route = useRoute();
const activeKey = ref(route.query.tab as string || '1');
const planData = ref<PlanInfo[]>([]);
const worksData = ref<InheritorWorkInfo[]>([]);
const showInMessage = ref(false);

watch(activeKey, (newValue) => {
  router.replace({ query: { tab: newValue } });
});

const ichData = useSimpleDataLoader(async () => {
  const data = await InheritorContent.getIchInfo(undefined);
  planData.value = await InheritorContent.getPlanList(data.id);
  worksData.value = await InheritorContent.getIchWorksInfo({
    ichId: data.id,
    page: 1,
    pageSize: 100,
  });
  return data;
});
const inheritorData = useSimpleDataLoader<InheritorInfo|null>(async () => {
  try {
    return await InheritorContent.getInheritorInfo(undefined)
  } catch (e) {
    if (e instanceof RequestApiError) {
      if (e.errorMessage === '暂无信息，等待采集')
        return null;
    }
    throw e;
  }
});
const seminarData = useSimpleDataLoader<SeminarInfo|null>(async () => {
  try {
    return await InheritorContent.getSeminarInfo(undefined);
  } catch (e) {
    if (e instanceof RequestApiError) {
      if (e.errorMessage === '暂无信息，等待采集')
        return null;
    }
    throw e;
  }
});


function openInMessage() {
  const lastTime = new Date(parseInt('' + SettingsUtils.getSettings('inheritorShowInMessageLastTime', 0)));
  if (new Date().getTime() - lastTime.getTime() > 1000 * 3600 * 48) {
    showInMessage.value = true;
  }
}
function closeInMessage() {
  SettingsUtils.setSettings('inheritorShowInMessageLastTime', new Date().getTime());
  showInMessage.value = false;
}
</script>