<template>
|
<div class="points-rule-list">
|
<!-- 列表页面 -->
|
<div v-if="currentView === 'list'">
|
<!-- 页面标题 -->
|
<div class="page-title">积分规则管理</div>
|
|
<!-- 规则列表卡片 -->
|
<el-card shadow="never" class="rule-list-card">
|
<!-- 筛选条件 -->
|
<div class="filter-section">
|
<div class="filter-row">
|
<div class="filter-item">
|
<span class="filter-label">生效时间:</span>
|
<el-date-picker
|
v-model="queryParams.dateRange"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="YYYY-MM-DD HH:mm:ss"
|
date-format="YYYY-MM-DD"
|
time-format="HH:mm:ss"
|
style="margin-left: 8px;"
|
@change="handleDateChange"
|
/>
|
</div>
|
|
</div>
|
<div class="filter-actions">
|
<el-button type="primary" @click="queryData">
|
<el-icon><Search /></el-icon>
|
查询
|
</el-button>
|
<el-button @click="resetQuery">
|
<el-icon><Refresh /></el-icon>
|
重置
|
</el-button>
|
</div>
|
</div>
|
|
<!-- 规则表格 -->
|
<div class="table-section">
|
<el-table :data="ruleList" stripe style="width: 100%">
|
<el-table-column type="index" label="序号" width="80" align="center" />
|
<el-table-column prop="pointsName" label="名称" align="ceter">
|
<template #default="{ row }">
|
{{ row.pointsName}}{{ dayjs(row.updatedAt).format('YYYYMMDD')}}V{{ row.version }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="effectiveStart" label="开始生效时间" align="center" />
|
<el-table-column prop="modifierName" label="修改人" align="center" />
|
|
<el-table-column label="操作" align="center" fixed="right">
|
<template #default="{ row }">
|
<el-button type="primary" size="small" @click="viewRule(row)">查看</el-button>
|
<el-button type="primary" size="small" @click="editRule(row)">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div class="pagination-section">
|
<div class="pagination-info">
|
共{{ total }}条
|
</div>
|
<el-pagination
|
v-model:current-page="queryParams.pageNum"
|
v-model:page-size="queryParams.pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
:total="total"
|
layout="sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
|
<!-- 编辑页面 -->
|
<div v-if="currentView === 'edit'" class="edit-container">
|
<SettingsComponent
|
:ruleId="currentRuleId"
|
@goBack="goBackToList"
|
@saveSuccess="handleSaveSuccess"
|
/>
|
</div>
|
|
<!-- 查看详情页面 -->
|
<div v-if="currentView === 'view'" class="view-container">
|
<RuleDetailComponent
|
:ruleId="currentRuleId"
|
@goBack="goBackToList"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, onMounted } from 'vue'
|
import { dayjs, ElMessage } from 'element-plus'
|
import { Search, Refresh } from '@element-plus/icons-vue'
|
import pointsApi from '@/api/pointsApi'
|
import type { PointsRule, PointsQueryParams } from '@/types/points'
|
import SettingsComponent from '../settings/index.vue'
|
import RuleDetailComponent from '../ruleDetail/index.vue'
|
|
// 当前视图状态：'list' | 'edit' | 'view'
|
const currentView = ref<'list' | 'edit' | 'view'>('list')
|
|
// 查询参数
|
const queryParams = reactive<PointsQueryParams>({
|
dateRange: '',
|
pageNum: 1,
|
pageSize: 10,
|
})
|
|
// 规则列表
|
const ruleList = ref<PointsRule[]>([])
|
|
// 总数
|
const total = ref(0)
|
|
// 当前选中的规则ID
|
const currentRuleId = ref<string>('')
|
|
// 页面加载时获取数据
|
onMounted(() => {
|
queryData()
|
})
|
|
// 查询数据
|
const queryData = async () => {
|
try {
|
const res = await pointsApi.getPointsRules(queryParams)
|
// 模拟分页数据
|
ruleList.value = res.data.list || []
|
total.value = ruleList.value.length
|
} catch (error) {
|
ElMessage.error('获取积分规则失败')
|
console.error('获取积分规则失败:', error)
|
}
|
}
|
|
// 重置查询
|
const resetQuery = () => {
|
Object.keys(queryParams).forEach(key => {
|
queryParams[key as keyof PointsQueryParams] = '' as any
|
})
|
queryParams.pageNum = 1
|
queryParams.pageSize = 10
|
queryData()
|
}
|
|
// 处理分页大小变化
|
const handleSizeChange = (size: number) => {
|
queryParams.pageSize = size
|
queryData()
|
}
|
|
// 处理当前页码变化
|
const handleCurrentChange = (current: number) => {
|
queryParams.pageNum = current
|
queryData()
|
}
|
|
// 处理日期变化
|
const handleDateChange = (dates: [string, string] | null) => {
|
if (dates) {
|
queryParams.effectiveStartTime = dayjs(dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
queryParams.effectiveEndTime = dayjs(dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
} else {
|
queryParams.effectiveStartTime = ''
|
queryParams.effectiveEndTime = ''
|
}
|
}
|
|
// 编辑规则
|
const editRule = (row: PointsRule) => {
|
currentRuleId.value = row.id?.toString() || ''
|
currentView.value = 'edit'
|
}
|
|
// 查看规则
|
const viewRule = (row: PointsRule) => {
|
currentRuleId.value = row.id?.toString() || ''
|
currentView.value = 'view'
|
}
|
|
// 返回列表页面
|
const goBackToList = () => {
|
currentView.value = 'list'
|
currentRuleId.value = ''
|
}
|
|
// 处理保存成功
|
const handleSaveSuccess = () => {
|
ElMessage.success('保存成功')
|
goBackToList()
|
// 重新加载列表数据
|
queryData()
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.points-rule-list {
|
padding: 20px;
|
|
.page-title {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
color: #333;
|
}
|
|
.rule-list-card {
|
.filter-section {
|
margin-bottom: 20px;
|
display: flex;
|
gap: 20px;
|
.filter-row {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 16px;
|
margin-bottom: 16px;
|
|
.filter-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 8px;
|
|
.filter-label {
|
margin-right: 8px;
|
color: #606266;
|
}
|
|
.el-select {
|
width: 180px;
|
}
|
}
|
}
|
|
.filter-actions {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
}
|
}
|
|
.table-section {
|
.pagination-section {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 16px;
|
padding: 10px 0;
|
|
.pagination-info {
|
color: #606266;
|
}
|
}
|
}
|
}
|
|
.edit-container,
|
.view-container {
|
// 确保组件能够正确显示
|
width: 100%;
|
}
|
}
|
</style>
|
