tyyx_manager/plop/template/detail.vue.hbs

<script setup lang="ts">
import { ref } from "vue";
import request, { download } from '~/utils/request';

// #region (constant)
const TABLE_KEY = '{{tableKey}}'
const URL_CUT = '{{url}}'
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  {{#each tableColFields}}
  '{{prop}}': string; // {{label}}
  {{/each}}
}
// #endregion

// #region (variable)
const loading = ref(true)
// #endregion

// #region (props)
{{#if props}}
const props = defineProps<{
  {{#each props}}
  {{this}}: string,
  {{/each}}
}>()
{{/if}}
// #endregion

function detailApi(_id: string) {
  return request({
    url: URL_CUT + '/detail',
    data: {
      [TABLE_KEY]: _id,
    }
  })
}

const detail_Data = ref<TYPE_TABLE_FIELD>()

// #region (page init)
async function init() {
  const res = await detailApi(props.{{detailParam}})
  detail_Data.value = (res.data.one_info)
  loading.value = false
}
init()
// #endregion

</script>

<template>
  <div :loading="loading">
    <template v-if="detail_Data">
      {{#each tableColFields}}
      <div class="flex">
        <div>{{label}}</div><div>{{> Mustache obj="detail_Data" }}</div>
      </div>
      {{/each}} 
    </template>      
  </div>

</template>