document/fantastic-admin-pro-example/plop-templates/module/detail.hbs

<script lang="ts" setup name="{{ properCase componentName }}">
import DetailForm from './components/DetailForm/index.vue'
import eventBus from '@/utils/eventBus'
import useSettingsStore from '@/store/modules/settings'

const route = useRoute()
const router = useRouter()
const tabbar = useTabbar()

const settingsStore = useSettingsStore()

const formRef = ref()

function onSubmit() {
  formRef.value.submit().then(() => {
    eventBus.emit('get-data-list')
    goBack()
  })
}

function onCancel() {
  goBack()
}

// 返回列表页
function goBack() {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.close({ name: 'pagesExampleGeneralFormModeList' })
  }
  else {
    router.push({ name: 'pagesExampleGeneralFormModeList' })
  }
}
</script>

<template>
  <div>
    <page-header :title="route.name === 'routerName' ? '新增{{ cname }}' : '编辑{{ cname }}'">
      <el-button size="default" round @click="goBack">
        <template #icon>
          <el-icon>
            <svg-icon name="i-ep:arrow-left" />
          </el-icon>
        </template>
        返回
      </el-button>
    </page-header>
    <page-main>
      <el-row>
        <el-col :md="24" :lg="16">
          <DetailForm :id="route.params.id as string" ref="formRef" />
        </el-col>
      </el-row>
    </page-main>
    <fixed-action-bar>
      <el-button type="primary" size="large" @click="onSubmit">
        提交
      </el-button>
      <el-button size="large" @click="onCancel">
        取消
      </el-button>
    </fixed-action-bar>
  </div>
</template>

<style lang="scss" scoped>
// scss
</style>