minnan-collect-web/src/components/parts/EmptyToRecord.vue

<script setup lang="ts">
import type { PropType } from 'vue';
import SimplePageContentLoader from '../content/SimplePageContentLoader.vue';
import type { ILoaderCommon } from '@/composeables/LoaderCommon';

const emit = defineEmits([ 'edit' ]);
defineProps({
  loader: {
    type: Object as PropType<ILoaderCommon<any>>,
    default: undefined
  },
  title: {
    type: String,
    default: '非遗项目'
  },
  buttonText: {
    type: String,
    default: '去补充'
  },
  emptyText: {
    type: String,
    default: ''
  },
  showEdited: {
    type: Boolean,
    default: true
  },
  showAdd: {
    type: Boolean,
    default: true
  }
})
</script>

<template>
  <SimplePageContentLoader :loader="loader">
    <a-result
      v-if="!loader?.content.value"
      status="404"
      :title="`${title}信息`"
      :subTitle="emptyText || `暂无${title}信息，快去补充`"
    > 
      <template #extra>
        <a-button v-if="showAdd" type="primary" @click="emit('edit')">{{ buttonText }}</a-button>
      </template>
    </a-result>
    <div v-else>
      <a-alert
        v-if="showEdited"
        :message="`点击这里可以修改 ${title} 信息`"
        type="info"
        show-icon
        @click="emit('edit')"
      >
        <template #action>
          <a-space>
            <a-button size="small" type="primary" @click="emit('edit')">去修改</a-button>
          </a-space>
        </template>
      </a-alert>
      <slot></slot>
    </div>
  </SimplePageContentLoader>
</template>