car-wash-java/admin-web/src/views/admin/platform/rechargeConfig/index.vue

<style scoped lang="scss">
.system-container {

  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }

  }
}

.page-content {
  margin-bottom: 20px;
}
</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)">
          <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>
    </el-card>
  </div>
  <RechargeConfigDialog ref="rechargeConfigDialogRef" @refresh="loadData"/>
</template>

<script setup lang="ts" name="AdminRechargeConfig">
import { defineAsyncComponent, reactive, onMounted, ref, nextTick } from 'vue';
import { $body, $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 rechargeConfigDialogRef = ref();

const state = reactive({
  filterStationId: null as string | null,
  stationOptions: [] as Array<{ value: string; label: string }>,
  tableData: {
    height: 500,
    data: [] as Array<any>,
    loading: false,
  },
});

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.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;
  }).catch(() => {
    state.tableData.loading = false;
  });
};

const handleRowClick = (type: string, row: any) => {
  rechargeConfigDialogRef.value.open(type, row);
};

const handleRowDelete = (row: any) => {
  Msg.confirm(`此操作将永久删除该充值配置，是否继续?`).then(() => {
    $get(`/rechargeConfig/remove/${row.id}`).then(() => {
      Msg.message("删除成功", 'success');
      loadData();
    }).catch(() => {
      Msg.message("删除失败", 'error');
    });
  });
};
</script>