94 lines
4.3 KiB
Vue
94 lines
4.3 KiB
Vue
<template>
|
||
<div class="service-program">
|
||
<el-card>
|
||
<template #header><div class="card-header"><span>专项公益服务项目</span><el-button type="primary" size="small" disabled>新建项目（待开放）</el-button></div></template>
|
||
<el-table :data="programs" stripe v-loading="loading">
|
||
<el-table-column prop="name" label="项目名称" />
|
||
<el-table-column prop="status" label="状态" width="100">
|
||
<template #default="{ row }"><el-tag :type="row.status==='active'?'success':row.status==='draft'?'info':'danger'">{{ row.status }}</el-tag></template>
|
||
</el-table-column>
|
||
<el-table-column label="时间范围" width="220">
|
||
<template #default="{ row }">{{ formatDateTime(row.start_at) }} ~ {{ formatDateTime(row.end_at) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="成员数" width="80">
|
||
<template #default="{ row }">{{ row.memberCount || 0 }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="180">
|
||
<template #default="{ row }">
|
||
<el-button v-if="row.status==='draft'" size="small" type="success" @click="activateProgram(row)">激活</el-button>
|
||
<el-button size="small" @click="viewMembers(row)">查看成员</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<!-- 成员Dialog -->
|
||
<el-dialog v-model="memberDialogVisible" title="项目成员" width="700px">
|
||
<el-table :data="members" stripe v-loading="memberLoading">
|
||
<el-table-column prop="userId" label="用户ID" width="120" />
|
||
<el-table-column prop="status" label="状态" width="100">
|
||
<template #default="{ row }"><el-tag :type="row.status==='approved'?'success':row.status==='pending'?'warning':'info'">{{ row.status }}</el-tag></template>
|
||
</el-table-column>
|
||
<el-table-column prop="appliedAt" label="申请时间" width="160">
|
||
<template #default="{ row }">{{ formatDateTime(row.appliedAt) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="150">
|
||
<template #default="{ row }">
|
||
<el-button v-if="row.status==='pending'" size="small" type="success" @click="approveMember(row.id)">通过</el-button>
|
||
<el-button v-if="row.status==='pending'" size="small" type="danger" @click="rejectMember(row.id)">拒绝</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { get, post } from '@/api/client'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const loading = ref(false)
|
||
const programs = ref<any[]>([])
|
||
const memberDialogVisible = ref(false)
|
||
const currentProgramId = ref('')
|
||
const members = ref<any[]>([])
|
||
const memberLoading = ref(false)
|
||
|
||
async function loadPrograms() {
|
||
loading.value = true
|
||
try {
|
||
const res: any = await get('/service-programs')
|
||
programs.value = res.data || []
|
||
} finally { loading.value = false }
|
||
}
|
||
|
||
async function viewMembers(row: any) {
|
||
currentProgramId.value = row.id
|
||
memberDialogVisible.value = true
|
||
memberLoading.value = true
|
||
try {
|
||
const res: any = await get(`/service-programs/operator/${row.id}/members`)
|
||
members.value = res.data || []
|
||
} finally { memberLoading.value = false }
|
||
}
|
||
|
||
async function activateProgram(row: any) {
|
||
try { await post(`/service-programs/operator/${row.id}/activate`, {}); ElMessage.success('激活成功'); loadPrograms() }
|
||
catch (e) { ElMessage.error('操作失败') }
|
||
}
|
||
async function approveMember(memberId: string) {
|
||
try { await post(`/service-programs/operator/members/${memberId}/approve`, {}); ElMessage.success('已通过'); viewMembers({ id: currentProgramId.value }); }
|
||
catch (e) { ElMessage.error('操作失败') }
|
||
}
|
||
async function rejectMember(memberId: string) {
|
||
try { await post(`/service-programs/operator/members/${memberId}/reject`, { reason: '不符合条件' }); ElMessage.success('已拒绝'); viewMembers({ id: currentProgramId.value }); }
|
||
catch (e) { ElMessage.error('操作失败') }
|
||
}
|
||
|
||
function formatDateTime(d: string) { return d ? new Date(d).toLocaleString('zh-CN') : '-' }
|
||
|
||
onMounted(loadPrograms)
|
||
</script>
|
||
<style scoped>.card-header{display:flex;justify-content:space-between;align-items:center}</style>
|