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-3" showIcon>
                <template #action>
                  <a-button size="small" type="primary" @click="router.push({ name: 'FormIch' })">去修改</a-button>
                </template>
              </a-alert>
              <a-descriptions class="mt-3" 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="简介" :span="3"><SimpleRichHtml :contents="[ ichData.content.value.intro ]" /></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.levelText" /></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="区域"><ShowValueOrNull :value="ichData.content.value.regionText" /></a-descriptions-item>
                <a-descriptions-item label="保护单位"><ShowValueOrNull :value="ichData.content.value.unit" /></a-descriptions-item>
                <a-descriptions-item v-if="ichData.content.value.image" label="图片">
                  <a-image :src="ichData.content.value.image" style="max-width:300px;" />
                </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 label="类型"><ShowValueOrNull :value="ichData.content.value.typeText" /></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-3" showIcon>
                <template #action>
                  <a-button size="small" type="primary" @click="router.push({ name: 'FormInheritor' })">去修改</a-button>
                </template>
              </a-alert>
              <a-descriptions class="mt-3" 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 v-if="inheritorData.content.value.image" label="头像">
                  <a-avatar :src="inheritorData.content.value.image" size="large" />
                </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.alsoName" /></a-descriptions-item>
                <a-descriptions-item label="时代"><ShowValueOrNull :value="inheritorData.content.value.age" /></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.nation" /></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.deathBirth" /></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.content! ]" /></a-descriptions-item>
                <a-descriptions-item label="奖项/成就" :span="3"><SimpleRichHtml :contents="[ inheritorData.content.value.prize ]" /></a-descriptions-item>
                      
                <a-descriptions-item v-if="inheritorData.content.value.images" 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 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-3" 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="简介" :span="3"><SimpleRichHtml :contents="[ seminarData.content.value.desc as string ]" /></a-descriptions-item>
                <a-descriptions-item label="介绍" :span="3"><SimpleRichHtml :contents="[ seminarData.content.value.content as string ]" /></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.address" /></a-descriptions-item>
                <a-descriptions-item label="批次"><ShowValueOrNull :value="seminarData.content.value.batchText" /></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.contact" /></a-descriptions-item>
                <a-descriptions-item label="联系电话"><ShowValueOrNull :value="seminarData.content.value.mobile" /></a-descriptions-item>
                
                <a-descriptions-item label="单位类型"><ShowValueOrNull :value="seminarData.content.value.ichSiteTypeText" /></a-descriptions-item>
                <a-descriptions-item label="单位"><ShowValueOrNull :value="seminarData.content.value.unit" /></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 v-if="seminarData.content.value.image" label="图片">
                  <a-image :src="seminarData.content.value.image" style="max-width:300px;" />
                </a-descriptions-item>
                <a-descriptions-item v-if="seminarData.content.value.video" label="视频">
                  <video controls :src="seminarData.content.value.video" style="max-width:300px;" />
                </a-descriptions-item>
                <a-descriptions-item v-if="seminarData.content.value.audio" label="音频">
                  <audio controls :src="seminarData.content.value.audio" style="max-width:300px;" />
                </a-descriptions-item>
                <a-descriptions-item label="类型"><ShowValueOrNull :value="seminarData.content.value.typeText" /></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="d-flex justify-content-end">
                <a-button type="primary" @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="d-flex justify-content-end">
                <a-button type="primary" @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-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 { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import type { IchInfo, InheritorInfo, InheritorWorkInfo, PlanInfo, SeminarInfo } from '@/api/inheritor/InheritorContent';
import InheritorContent from '@/api/inheritor/InheritorContent';
import ImageGrid from '@/components/content/ImageGrid.vue';
import SimplePointedMap from '@/components/content/SimplePointedMap.vue';
import SimpleRichHtml from '@/components/display/SimpleRichHtml.vue';
import ShowValueOrNull from '@/components/dynamicf/Display/ShowValueOrNull.vue';
import EmptyToRecord from '@/components/parts/EmptyToRecord.vue';
import { SettingsUtils } from '@imengyu/imengyu-utils';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { RequestApiError } from '@imengyu/imengyu-utils/dist/request';

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>