minnan-collect-web/src/pages/admin-works.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">
          <h2>传承人作品管理</h2>
        </div>

        <EmptyToRecord title="作品" :loader="worksData" :showEdited="false" :showAdd="false">
          <a-list item-layout="horizontal" :data-source="worksData?.content.value || []">
            <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="handleGoWork(item)">编辑</a>
                </template>
              </a-list-item>
            </template>
          </a-list>
        </EmptyToRecord>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import EmptyToRecord from '@/components/parts/EmptyToRecord.vue';
import InheritorContent, { InheritorWorkInfo } from '@/api/inheritor/InheritorContent';

const router = useRouter();
const route = useRoute();

const worksData = useSimpleDataLoader(async () => {
  const inheritorId = route.query.inheritorId ? parseFloat(route.query.inheritorId as string) : undefined;
  return (await InheritorContent.getInheritorInfo(inheritorId)).works;
})

function handleGoWork(item: InheritorWorkInfo) {
  router.push({ name: 'FormWork', query: { 
    inheritorId: route.query.inheritorId,
    id: item.id 
  } })
}

</script>