<%
    component_name = entity.name.capitalize() + 'List'
    api_path = '/' + entity.name.lower() + 's'
%>
<template>
  <div class="${entity.name.lower()}-container">
    <h2>${component_name}</h2>
    <el-table :data="list" border style="width: 100%">
      % for field in entity.fields:
      <el-table-column prop="${field['name']}" label="${field['name'].capitalize()}" width="180" />
      % endfor
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { get${entity.name.capitalize()}List, delete${entity.name.capitalize()} } from '@/api/${entity.name.lower()}'

const list = ref([])

onMounted(() => {
  fetchData()
})

const fetchData = async () => {
  const res = await get${entity.name.capitalize()}List()
  list.value = res.data
}

const handleEdit = (row) => {
  // 编辑逻辑
}

const handleDelete = async (row) => {
  await delete${entity.name.capitalize()}(row.id)
  fetchData()
}
</script>

<style scoped>
.${entity.name.lower()}-container {
  padding: 20px;
}
</style>