|
|
@@ -1,146 +1,187 @@
|
|
|
<style scoped lang="scss">
|
|
|
-.system-container {
|
|
|
+.group-card {
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
|
- :deep(.el-card__body) {
|
|
|
+ .group-header {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
+ padding: 12px 16px;
|
|
|
+ background-color: var(--el-fill-color-light);
|
|
|
+ border-radius: 6px 6px 0 0;
|
|
|
+ border: 1px solid var(--el-border-color-light);
|
|
|
+ border-bottom: none;
|
|
|
|
|
|
- .el-table {
|
|
|
- flex: 1;
|
|
|
+ .group-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ .group-title {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+ .group-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.page-content {
|
|
|
- margin-bottom: 20px;
|
|
|
+ .item-table-wrap {
|
|
|
+ border: 1px solid var(--el-border-color-light);
|
|
|
+ border-top: none;
|
|
|
+ border-radius: 0 0 6px 6px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="system-container layout-padding">
|
|
|
<el-card shadow="hover" class="layout-padding-auto">
|
|
|
- <div class="page-search mb10">
|
|
|
- <el-select-v2
|
|
|
- v-model="state.filterStationId"
|
|
|
- :options="state.stationOptions"
|
|
|
- placeholder="按站点筛选"
|
|
|
- clearable
|
|
|
- style="width: 240px"
|
|
|
- @change="loadData"
|
|
|
- />
|
|
|
- <el-button v-auth="'rechargeConfig.add'" size="default" plain type="success" class="ml10" @click="handleRowClick('add', null)">
|
|
|
+ <div class="page-search mb10" style="display: flex; align-items: center; gap: 10px;">
|
|
|
+ <el-button v-auth="'rechargeConfig.add'" size="default" plain type="success" @click="handleGroupAdd">
|
|
|
<SvgIcon name="ele-FolderAdd"/>
|
|
|
- 新增
|
|
|
+ 新增默认分组
|
|
|
</el-button>
|
|
|
</div>
|
|
|
|
|
|
- <el-table
|
|
|
- border
|
|
|
- stripe
|
|
|
- :height="state.tableData.height"
|
|
|
- highlight-current-row
|
|
|
- row-key="id"
|
|
|
- :data="state.tableData.data"
|
|
|
- v-loading="state.tableData.loading">
|
|
|
- <template #empty>
|
|
|
- <el-empty></el-empty>
|
|
|
- </template>
|
|
|
-
|
|
|
- <el-table-column label="站点" prop="stationId" width="160">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tag v-if="row.stationId" type="success">{{ row.stationId }}</el-tag>
|
|
|
- <el-tag v-else type="info">平台默认</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="充值金额" prop="rechargeAmount" width="140">
|
|
|
- <template #default="{ row }">
|
|
|
- {{ u.fmt.fmtMoney(row.rechargeAmount) }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="赠款金额" prop="grantsAmount" width="140">
|
|
|
- <template #default="{ row }">
|
|
|
- {{ u.fmt.fmtMoney(row.grantsAmount) }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="标签" prop="label" min-width="120">
|
|
|
- <template #default="{ row }">
|
|
|
- {{ row.label || '-' }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="创建时间" prop="createTime" width="180">
|
|
|
- <template #default="{ row }">
|
|
|
- {{ u.fmt.fmtDateTime(row.createTime) }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" prop="action" width="160" align="center" fixed="right">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button v-auth="'rechargeConfig.modify'" type="warning" size="small" text @click="handleRowClick('edit', row)">编辑</el-button>
|
|
|
- <el-button v-auth="'rechargeConfig.remove'" type="danger" size="small" text @click="handleRowDelete(row)">删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div v-loading="state.loading">
|
|
|
+ <el-empty v-if="!state.loading && state.groups.length === 0" description="暂无充值配置分组" />
|
|
|
+
|
|
|
+ <div v-for="g in state.groups" :key="g.group.id" class="group-card">
|
|
|
+ <div class="group-header">
|
|
|
+ <div class="group-info">
|
|
|
+ <span class="group-title">
|
|
|
+ <el-tag v-if="g.group.stationId" type="success" effect="light">{{ g.group.stationId }}</el-tag>
|
|
|
+ <el-tag v-else type="primary" effect="light">平台默认配置</el-tag>
|
|
|
+ </span>
|
|
|
+ <span v-if="g.group.name" style="color: var(--el-text-color-secondary); font-size: 13px;">{{ g.group.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="group-actions">
|
|
|
+ <el-button v-auth="'rechargeConfig.add'" size="small" type="primary" plain @click="handleItemAdd(g.group.id)">+ 配置项</el-button>
|
|
|
+ <el-button v-if="g.group.stationId" v-auth="'rechargeConfig.remove'" size="small" type="danger" plain @click="handleGroupRemove(g.group)">删除分组</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-table-wrap">
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ :data="g.items"
|
|
|
+ size="small"
|
|
|
+ v-loading="g.itemsLoading">
|
|
|
+ <template #empty>
|
|
|
+ <el-empty :image-size="40" description="暂无配置项,请新增" />
|
|
|
+ </template>
|
|
|
+ <el-table-column label="充值金额" prop="rechargeAmount" width="140">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ u.fmt.fmtMoney(row.rechargeAmount) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="赠款金额" prop="grantsAmount" width="140">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ u.fmt.fmtMoney(row.grantsAmount) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="标签" prop="label" min-width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ row.label || '-' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" prop="action" width="160" align="center" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button v-auth="'rechargeConfig.modify'" type="warning" size="small" text @click="handleItemEdit(g.group.id, row)">编辑</el-button>
|
|
|
+ <el-button v-auth="'rechargeConfig.remove'" type="danger" size="small" text @click="handleItemRemove(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
- <RechargeConfigDialog ref="rechargeConfigDialogRef" @refresh="loadData"/>
|
|
|
+ <GroupDialog ref="groupDialogRef" @refresh="loadData" />
|
|
|
+ <ItemDialog ref="itemDialogRef" @refresh="loadData" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="AdminRechargeConfig">
|
|
|
-import { defineAsyncComponent, reactive, onMounted, ref, nextTick } from 'vue';
|
|
|
-import { $body, $get } from "/@/utils/request";
|
|
|
+import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
|
|
+import { $get } from "/@/utils/request";
|
|
|
import u from '/@/utils/u'
|
|
|
import { Msg } from "/@/utils/message";
|
|
|
|
|
|
-const RechargeConfigDialog = defineAsyncComponent(() => import("/@/views/admin/platform/rechargeConfig/dialog.vue"));
|
|
|
+const GroupDialog = defineAsyncComponent(() => import("./groupDialog.vue"));
|
|
|
+const ItemDialog = defineAsyncComponent(() => import("./itemDialog.vue"));
|
|
|
|
|
|
-const rechargeConfigDialogRef = ref();
|
|
|
+const groupDialogRef = ref();
|
|
|
+const itemDialogRef = ref();
|
|
|
+
|
|
|
+interface GroupRow {
|
|
|
+ group: any;
|
|
|
+ items: any[];
|
|
|
+ itemsLoading: boolean;
|
|
|
+}
|
|
|
|
|
|
const state = reactive({
|
|
|
- filterStationId: null as string | null,
|
|
|
- stationOptions: [] as Array<{ value: string; label: string }>,
|
|
|
- tableData: {
|
|
|
- height: 500,
|
|
|
- data: [] as Array<any>,
|
|
|
- loading: false,
|
|
|
- },
|
|
|
+ loading: false,
|
|
|
+ groups: [] as GroupRow[],
|
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
|
- loadStations();
|
|
|
loadData();
|
|
|
});
|
|
|
|
|
|
-const loadStations = () => {
|
|
|
- $body('/washStation/list', { pageNum: 1, pageSize: 200 }).then((res: any) => {
|
|
|
- state.stationOptions = [
|
|
|
- { value: '__all__', label: '全部' },
|
|
|
- ...(res.list || []).map((s: any) => ({ value: s.stationId, label: s.stationName + ' (' + s.stationId + ')' })),
|
|
|
- ];
|
|
|
+const loadData = () => {
|
|
|
+ state.loading = true;
|
|
|
+ $get('/rechargeConfig/group/list').then((groups: any) => {
|
|
|
+ state.groups = (groups || []).map((g: any) => ({ group: g, items: [], itemsLoading: false }));
|
|
|
+ state.groups.forEach((g) => loadItems(g));
|
|
|
+ state.loading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ state.loading = false;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const loadData = () => {
|
|
|
- state.tableData.loading = true;
|
|
|
- const url = state.filterStationId && state.filterStationId !== '__all__'
|
|
|
- ? `/rechargeConfig/list?stationId=${state.filterStationId}`
|
|
|
- : '/rechargeConfig/listAll';
|
|
|
- $get(url).then((res: any) => {
|
|
|
- state.tableData.data = res || [];
|
|
|
- state.tableData.loading = false;
|
|
|
+const loadItems = (g: GroupRow) => {
|
|
|
+ g.itemsLoading = true;
|
|
|
+ $get('/rechargeConfig/item/list', { groupId: g.group.id }).then((items: any) => {
|
|
|
+ g.items = items || [];
|
|
|
+ g.itemsLoading = false;
|
|
|
}).catch(() => {
|
|
|
- state.tableData.loading = false;
|
|
|
+ g.itemsLoading = false;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const handleRowClick = (type: string, row: any) => {
|
|
|
- rechargeConfigDialogRef.value.open(type, row);
|
|
|
+// ==================== 分组操作 ====================
|
|
|
+
|
|
|
+const handleGroupAdd = () => {
|
|
|
+ groupDialogRef.value.open('add', null);
|
|
|
+};
|
|
|
+
|
|
|
+const handleGroupRemove = (group: any) => {
|
|
|
+ Msg.confirm('此操作将永久删除该分组及其所有配置项,是否继续?').then(() => {
|
|
|
+ $get(`/rechargeConfig/group/remove/${group.id}`).then(() => {
|
|
|
+ Msg.message("删除成功", 'success');
|
|
|
+ loadData();
|
|
|
+ }).catch(() => {
|
|
|
+ Msg.message("删除失败", 'error');
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// ==================== 配置项操作 ====================
|
|
|
+
|
|
|
+const handleItemAdd = (groupId: number) => {
|
|
|
+ itemDialogRef.value.open('add', { groupId });
|
|
|
+};
|
|
|
+
|
|
|
+const handleItemEdit = (groupId: number, row: any) => {
|
|
|
+ itemDialogRef.value.open('edit', { ...row, groupId });
|
|
|
};
|
|
|
|
|
|
-const handleRowDelete = (row: any) => {
|
|
|
- Msg.confirm(`此操作将永久删除该充值配置,是否继续?`).then(() => {
|
|
|
- $get(`/rechargeConfig/remove/${row.id}`).then(() => {
|
|
|
+const handleItemRemove = (row: any) => {
|
|
|
+ Msg.confirm('此操作将永久删除该配置项,是否继续?').then(() => {
|
|
|
+ $get(`/rechargeConfig/item/remove/${row.id}`).then(() => {
|
|
|
Msg.message("删除成功", 'success');
|
|
|
loadData();
|
|
|
}).catch(() => {
|