payment-platform/frontend/plop-templates/curd-list-page.vue.hbs

<!-- plop(curd-list) 生成：补全 API、searchConfig、contentConfig、表格列与弹窗 -->
<template>
  <div class="app-container">
    <PageSearch
      ref="searchRef"
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />

    <PageContent ref="contentRef" :content-config="contentConfig">
      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
        <CrudToolbarLeft
          :remove-ids="removeIds"
          :perm-create="['{{permPrefix}}:create']"
          :perm-delete="['{{permPrefix}}:delete']"
          :perm-patch="['{{permPrefix}}:patch']"
          @add="handleOpenDialog('create')"
          @delete="onToolbar('delete')"
          @more="handleMoreClick"
        />
        <div class="data-table__toolbar--right">
          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
        </div>
      </template>

      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
        <div class="data-table__content">
          <el-table
            :ref="tableRef as any"
            v-loading="loading"
            row-key="id"
            :data="data"
            height="calc(100vh - 350px)"
            max-height="calc(100vh - 350px)"
            border
            stripe
            @selection-change="onSelectionChange"
          >
            <template #empty>
              <el-empty :image-size="80" description="暂无数据" />
            </template>
            <!-- TODO: el-table-column -->
          </el-table>
        </div>
      </template>
    </PageContent>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: "{{componentName}}", inheritAttrs: false });

import { reactive } from "vue";
import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
import PageSearch from "@/components/CURD/PageSearch.vue";
import PageContent from "@/components/CURD/PageContent.vue";
import { useCrudList } from "@/components/CURD/useCrudList";
import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";

const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();

const searchConfig = reactive<ISearchConfig>({
  permPrefix: "{{permPrefix}}",
  formItems: [],
});

const contentConfig = reactive<IContentConfig>({
  permPrefix: "{{permPrefix}}",
  toolbar: [],
  defaultToolbar: ["refresh", "filter"],
  cols: [],
  /** TODO: 接入列表 API，返回 { total, list } 供 PageContent 解析 */
  indexAction: async () => ({ total: 0, list: [] }),
});

function handleOpenDialog(_type: "create" | "update" | "detail", _id?: string) {
  // TODO
}

async function handleMoreClick(_status: string) {
  // TODO 批量启用/停用
}
</script>