<script setup lang="ts">
|
import { onMounted, ref } from 'vue'
|
import { Plus, Refresh } from '@element-plus/icons-vue'
|
import { getBenefits } from '../api/admin'
|
import type { Benefit } from '../types/admin'
|
|
const loading = ref(false)
|
const benefits = ref<Benefit[]>([])
|
|
async function loadData() {
|
loading.value = true
|
try {
|
benefits.value = await getBenefits()
|
} catch {
|
benefits.value = []
|
} finally {
|
loading.value = false
|
}
|
}
|
|
onMounted(loadData)
|
</script>
|
|
<template>
|
<div class="page-stack">
|
<div class="toolbar">
|
<div>
|
<h2>权益管理</h2>
|
<p>配置人才卡可领取、可核销的权益内容。</p>
|
</div>
|
<div class="toolbar-actions">
|
<el-button :icon="Refresh" :loading="loading" @click="loadData">刷新</el-button>
|
<el-button type="primary" :icon="Plus">新增权益</el-button>
|
</div>
|
</div>
|
|
<section class="panel">
|
<el-table v-loading="loading" :data="benefits" empty-text="暂无权益数据">
|
<el-table-column prop="title" label="权益名称" min-width="180" />
|
<el-table-column prop="type" label="类型" width="140" />
|
<el-table-column prop="description" label="说明" min-width="260" show-overflow-tooltip />
|
<el-table-column prop="status" label="状态" width="110" />
|
<el-table-column label="操作" width="160" fixed="right">
|
<template #default>
|
<el-button link type="primary">编辑</el-button>
|
<el-button link type="primary">上下架</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</section>
|
</div>
|
</template>
|
