DEV-MERGE-LEGACY-PC-FRONTEND-2026/src/views/academic/fee/index.vue

<script setup lang="ts">
/**
 * 费用管理页（views/academic/fee/index.vue）—— 对齐旧 PHP 财务可操作面（菜单「费用管理」）。
 *
 * 结构（自上而下）：
 *   ① 作用域作用户 + 校区选择器（页面级状态；写操作必选账户）；
 *   ② 仪表盘卡片（端点 21：余额/累计充值/累计支出/特殊费用/应收净额 + 校区余额分布）；
 *   ③ el-tabs 三个页签：
 *      - 流水（端点 11，useListPage 分页，type/日期筛选）；
 *      - 账户操作（充值/消费/退费/自定义退费/转结/坏账/清零/spend，各带对话框；
 *        对齐旧 PHP：充值 recharges、消费 expenditures、退费 refunds、自定义退费 refunds/custom、
 *        转结 transfers、坏账 bad-debts、清零 cleared-balances、spend spends）；
 *      - 资金工单（端点 12 列表 + 建单/审批/驳回/撤销，对齐旧 PHP RequestController）。
 *
 * 纪律：
 *   - 作用域 institutionId/campusId 从 useScope().toQuery() 起步，页面级可覆盖校区；
 *   - 写操作恒 200 + body code，业务错误（3102/3103/3104/3120/3140…）读 code 直显 message；
 *   - 幂等：写操作生成一次性 requestId（防误触重复提交回放）；
 *   - 敏感操作（清零/坏账/自定义退费）二次确认（ElMessageBox.confirm，README §3.3-9）。
 */
import { listLogs, listRequests, fetchDashboard, recharge, expenditure, refund, customRefund, transfer, badDebt, clearBalance, spend, createRequest, approveRequest, rejectRequest, cancelRequest } from '@/api/academic/finance';
import type { ExpenseLogDTO, BalanceRequestDTO, DashboardDTO } from '@/api/academic/finance';
import { listCampuses } from '@/api/org/campus';
import type { CampusDTO } from '@/api/org/campus';
import { listMembers } from '@/api/org/member';
import type { MemberDTO } from '@/api/org/member';
import ListPage from '@/components/ListPage.vue';
import type { ListColumn } from '@/components/list-column';
import { useListPage } from '@/composables/use-list-page';
import { useScope } from '@/store/scope';
import { formatDateTime } from '@/utils/format';

const scope = useScope();

/** 命令式 EP（UMD 全局，http.ts 同款读法） */
function ElMessage_(type: 'success' | 'warning' | 'error', text: string): void {
  const M = (globalThis.ElementPlus ?? {}).ElMessage;
  if (M) M({ type, message: text });
  else console.warn(`[${type}]`, text);
}
function ElConfirm(text: string): Promise<void> {
  const B = (globalThis.ElementPlus ?? {}).ElMessageBox;
  if (!B) return Promise.resolve();
  return B.confirm(text, '敏感操作确认', { confirmButtonText: '执行', cancelButtonText: '取消', type: 'warning' }).then(() => undefined).catch(() => Promise.reject(new Error('cancel')));
}

/* ================= 作用户 + 校区 ================= */
const memberOpts = ref<MemberDTO[]>([]);
const campusOpts = ref<CampusDTO[]>([]);
const selectedUserId = ref('');
const selectedCampusId = ref<number>(0);

onMounted(async () => {
  const q = scope.toQuery();
  const [m, c] = await Promise.all([
    listMembers({ ...q, personType: 'student', pageSize: 200 }),
    listCampuses({ ...q, pageSize: 200 }),
  ]);
  if (m.code === 200) {
    memberOpts.value = m.data?.list ?? [];
    if (memberOpts.value.length > 0 && !selectedUserId.value) selectedUserId.value = memberOpts.value[0].userId;
  }
  if (c.code === 200) {
    campusOpts.value = c.data?.list ?? [];
    if (campusOpts.value.length > 0 && selectedCampusId.value === 0) selectedCampusId.value = campusOpts.value[0].campusId;
  }
  void loadDashboard();
});

/* ================= 仪表盘 ================= */
const dash = ref<DashboardDTO | null>(null);
const campusName = (id: number): string => campusOpts.value.find((c) => c.campusId === id)?.campusName ?? `#${id}`;

async function loadDashboard(): Promise<void> {
  const r = await fetchDashboard({ ...scope.toQuery(), campusId: selectedCampusId.value || undefined });
  if (r.code === 200 && r.data) dash.value = r.data;
}

/* ================= 流水（端点 11） ================= */
const logFilters = reactive<{ type: number | undefined; from: string; to: string }>({ type: undefined, from: '', to: '' });
const { rows: logs, total: logTotal, page: logPage, pageSize: logPageSize, loading: logLoading, error: logError, fetchList: fetchLogs } = useListPage<ExpenseLogDTO>({
  fetcher: (p, ps) => listLogs({ ...scope.toQuery(), campusId: selectedCampusId.value || undefined, userId: selectedUserId.value || undefined, ...logFilters, page: p, pageSize: ps }),
});
onMounted(() => {
  void fetchLogs();
});

/** 流水类型编码 → 中文（前端映射，后端只出数字码） */
const typeText: Record<number, string> = { 100: '充值', 101: '消费', 106: '转结出', 108: '坏账', 201: '消费', 206: '转结入', 207: '退费', 208: '清零' };
const logColumns: ListColumn<ExpenseLogDTO>[] = [
  { prop: 'id', label: '流水号', minWidth: 90 },
  { prop: 'type', label: '类型', minWidth: 90, formatter: (r) => typeText[r.type] ?? String(r.type) },
  { prop: 'money', label: '金额', minWidth: 110, formatter: (r) => `${r.money}` },
  { prop: 'balanceAfter', label: '余额(后)', minWidth: 110 },
  { prop: 'remark', label: '备注', minWidth: 140 },
  { prop: 'createAt', label: '时间', minWidth: 150, formatter: (r) => formatDateTime(r.createAt) },
];
function onLogSearch(): void {
  logPage.value = 1;
  void fetchLogs();
}

/* ================= 账户操作对话框 ================= */
const opForm = reactive({ money: '', remark: '' });
const transferForm = reactive({ fromCampus: 0, toCampus: 0, money: '' });
const busy = ref(false);

function nextRequestId(prefix: string): string {
  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
}
/** 统一执行包装：置忙 → 调 api → code 判定 toast → 刷新流水/仪表盘。入参：fn。 */
async function runOp(fn: () => Promise<{ code: number; message: string }>): Promise<void> {
  if (busy.value || !selectedUserId.value) return;
  busy.value = true;
  try {
    const r = await fn();
    if (r.code === 200) {
      ElMessage_('success', '操作成功');
      void fetchLogs();
      void loadDashboard();
    } else {
      ElMessage_('warning', r.message || `操作失败（code ${r.code}）`);
    }
  } catch {
    ElMessage_('error', '网络连接异常');
  } finally {
    busy.value = false;
  }
}
function doRecharge(): void {
  void runOp(() => recharge({ userId: selectedUserId.value, campusId: selectedCampusId.value, money: opForm.money, requestId: nextRequestId('rc'), institutionId: scope.current.institutionId }));
}
function doExpenditure(): void {
  void runOp(() => expenditure({ userId: selectedUserId.value, campusId: selectedCampusId.value, money: opForm.money, institutionId: scope.current.institutionId }));
}
function doRefund(): void {
  void runOp(() => refund({ userId: selectedUserId.value, campusId: selectedCampusId.value, money: opForm.money, institutionId: scope.current.institutionId }));
}
async function doCustomRefund(): Promise<void> {
  try {
    await ElConfirm('自定义退费将按可退额结算，不足部分计入坏账，确认执行？');
  } catch {
    return;
  }
  void runOp(() => customRefund({ userId: selectedUserId.value, campusId: selectedCampusId.value, money: opForm.money, requestId: nextRequestId('cr'), institutionId: scope.current.institutionId }));
}
async function doBadDebt(): Promise<void> {
  try {
    await ElConfirm('确认对该账户做坏账处理？');
  } catch {
    return;
  }
  void runOp(() => badDebt({ userId: selectedUserId.value, campusId: selectedCampusId.value, money: opForm.money, requestId: nextRequestId('bd'), institutionId: scope.current.institutionId }));
}
async function doClear(): Promise<void> {
  try {
    await ElConfirm('余额清零为敏感操作，校区余额将一次性转特殊费用，确认执行？');
  } catch {
    return;
  }
  void runOp(() => clearBalance({ userId: selectedUserId.value, campusId: selectedCampusId.value, institutionId: scope.current.institutionId }));
}
function doSpend(): void {
  void runOp(() => spend({ userId: selectedUserId.value, campusId: selectedCampusId.value, spendMoney: opForm.money, institutionId: scope.current.institutionId }));
}
function doTransfer(): void {
  if (transferForm.fromCampus === 0 || transferForm.toCampus === 0 || transferForm.fromCampus === transferForm.toCampus) {
    ElMessage_('warning', '请选择两个不同的校区');
    return;
  }
  void runOp(() => transfer({ userId: selectedUserId.value, fromCampusId: transferForm.fromCampus, toCampusId: transferForm.toCampus, money: transferForm.money, institutionId: scope.current.institutionId }));
}

/* ================= 资金工单（端点 12~16） ================= */
const reqFilters = reactive<{ approved: number | undefined }>({ approved: undefined });
const { rows: reqs, total: reqTotal, page: reqPage, pageSize: reqPageSize, loading: reqLoading, error: reqError, fetchList: fetchReqs } = useListPage<BalanceRequestDTO>({
  fetcher: (p, ps) => listRequests({ ...scope.toQuery(), campusId: selectedCampusId.value || undefined, ...reqFilters, page: p, pageSize: ps }),
});
onMounted(() => {
  void fetchReqs();
});
const reqTypeText: Record<number, string> = { 1: '退费', 2: '清零', 3: '坏账', 4: '特殊' };
const reqStatusText: Record<number, string> = { 0: '待审', 1: '已通过', '-1': '已驳回', '-2': '已撤销' };
const reqColumns: ListColumn<BalanceRequestDTO>[] = [
  { prop: 'bizNo', label: '单号', minWidth: 140 },
  { prop: 'type', label: '类型', minWidth: 80, formatter: (r) => reqTypeText[r.type] ?? String(r.type) },
  { prop: 'money', label: '金额', minWidth: 100 },
  { prop: 'approved', label: '状态', minWidth: 90, formatter: (r) => reqStatusText[r.approved] ?? String(r.approved) },
  { prop: 'remark', label: '备注', minWidth: 120 },
  { prop: 'createAt', label: '申请时间', minWidth: 140, formatter: (r) => formatDateTime(r.createAt) },
];
function onReqSearch(): void {
  reqPage.value = 1;
  void fetchReqs();
}
function doCreateRequest(): void {
  void runOp(() => createRequest({ type: 1, userId: selectedUserId.value, campusId: selectedCampusId.value, money: opForm.money, remark: opForm.remark || '工单', institutionId: scope.current.institutionId }).then((r) => ({ code: r.code, message: r.message })));
}
async function doApprove(r: BalanceRequestDTO): Promise<void> {
  await runOp(() => approveRequest(r.id, { ...scope.toQuery(), campusId: selectedCampusId.value || undefined }).then((x) => ({ code: x.code, message: x.message })));
}
function doReject(r: BalanceRequestDTO): void {
  void runOp(() => rejectRequest(r.id, { ...scope.toQuery(), campusId: selectedCampusId.value || undefined }).then((x) => ({ code: x.code, message: x.message })));
}
function doCancelReq(r: BalanceRequestDTO): void {
  void runOp(() => cancelRequest(r.id, { ...scope.toQuery(), campusId: selectedCampusId.value || undefined }).then((x) => ({ code: x.code, message: x.message })));
}

/* ================= 操作按钮区 ================= */
const ops = [
  { label: '充值', fn: doRecharge },
  { label: '消费', fn: doExpenditure },
  { label: '退费', fn: doRefund },
  { label: '自定义退费', fn: doCustomRefund },
  { label: '坏账', fn: doBadDebt },
  { label: '清零', fn: doClear },
  { label: 'spend 扣减', fn: doSpend },
] as const;
</script>

<template>
  <div class="fee-page">
    <!-- ① 作用户 + 校区 -->
    <div class="fee-page__bar">
      <el-select v-model="selectedUserId" placeholder="选择账户" class="fee-page__select">
        <el-option v-for="m in memberOpts" :key="m.userId" :value="m.userId" :label="`${m.realName}（${m.phone}）`" />
      </el-select>
      <el-select v-model="selectedCampusId" placeholder="选择校区" class="fee-page__select">
        <el-option v-for="c in campusOpts" :key="c.campusId" :value="c.campusId" :label="c.campusName" />
      </el-select>
      <el-button @click="loadDashboard">刷新</el-button>
    </div>

    <!-- ② 仪表盘 -->
    <el-row v-if="dash" :gutter="12" class="fee-page__dash">
      <el-col :span="4"><el-card shadow="never"><el-statistic :value="parseFloat(dash.balance)" :precision="2" prefix="¥" title="账户余额" /></el-card></el-col>
      <el-col :span="4"><el-card shadow="never"><el-statistic :value="parseFloat(dash.totalIncome)" :precision="2" prefix="¥" title="累计充值" /></el-card></el-col>
      <el-col :span="4"><el-card shadow="never"><el-statistic :value="parseFloat(dash.totalExpenditure)" :precision="2" prefix="¥" title="累计支出" /></el-card></el-col>
      <el-col :span="4"><el-card shadow="never"><el-statistic :value="parseFloat(dash.specialExpenses)" :precision="2" prefix="¥" title="特殊费用" /></el-card></el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>校区余额分布</template>
          <div v-for="d in dash.balanceDistribution" :key="d.campusId" class="fee-page__dist">
            <span>{{ campusName(d.campusId) }}</span>
            <span>¥ {{ d.balance }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- ③ 页签 -->
    <el-tabs class="fee-page__tabs">
      <!-- 流水 -->
      <el-tab-pane label="资金流水">
        <ListPage
          v-model:page="logPage"
          v-model:page-size="logPageSize"
          :rows="logs"
          :total="logTotal"
          :loading="logLoading"
          :error="logError"
          :columns="logColumns"
          @search="onLogSearch"
        >
          <template #toolbar>
            <el-select v-model="logFilters.type" placeholder="类型" clearable class="toolbar-select">
              <el-option v-for="(t, k) in typeText" :key="k" :value="Number(k)" :label="t" />
            </el-select>
          </template>
        </ListPage>
      </el-tab-pane>

      <!-- 账户操作 -->
      <el-tab-pane label="账户操作">
        <div class="fee-page__ops">
          <div class="fee-page__op-form">
            <el-input v-model="opForm.money" placeholder="金额（如 100.00）" style="width: 160px" />
            <el-input v-model="opForm.remark" placeholder="备注（工单用）" style="width: 200px" />
          </div>
          <div class="fee-page__op-btns">
            <el-button v-for="op in ops" :key="op.label" type="primary" :disabled="!selectedUserId" :loading="busy" @click="op.fn">
              {{ op.label }}
            </el-button>
            <div class="fee-page__transfer">
              <el-select v-model="transferForm.fromCampus" placeholder="转出校区" style="width: 140px">
                <el-option v-for="c in campusOpts" :key="c.campusId" :value="c.campusId" :label="c.campusName" />
              </el-select>
              <el-select v-model="transferForm.toCampus" placeholder="转入校区" style="width: 140px">
                <el-option v-for="c in campusOpts" :key="c.campusId" :value="c.campusId" :label="c.campusName" />
              </el-select>
              <el-input v-model="transferForm.money" placeholder="转结金额" style="width: 120px" />
              <el-button type="warning" :disabled="!selectedUserId" :loading="busy" @click="doTransfer">转结</el-button>
              <el-button type="info" :disabled="!selectedUserId" :loading="busy" @click="doCreateRequest">建资金工单</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- 资金工单 -->
      <el-tab-pane label="资金工单">
        <ListPage
          v-model:page="reqPage"
          v-model:page-size="reqPageSize"
          :rows="reqs"
          :total="reqTotal"
          :loading="reqLoading"
          :error="reqError"
          :columns="reqColumns"
          @search="onReqSearch"
        >
          <template #toolbar>
            <el-select v-model="reqFilters.approved" placeholder="状态" clearable class="toolbar-select">
              <el-option value="0" label="待审" />
              <el-option value="1" label="已通过" />
              <el-option value="-1" label="已驳回" />
              <el-option value="-2" label="已撤销" />
            </el-select>
          </template>
        </ListPage>
        <div class="fee-page__req-actions">
          <div v-for="r in reqs" :key="r.id" class="fee-page__req-row">
            <span class="fee-page__req-no">{{ r.bizNo }}</span>
            <el-button size="small" type="primary" :disabled="r.approved !== 0" :loading="busy" @click="doApprove(r)">通过</el-button>
            <el-button size="small" type="warning" :disabled="r.approved !== 0" :loading="busy" @click="doReject(r)">驳回</el-button>
            <el-button size="small" :disabled="r.approved !== 0" :loading="busy" @click="doCancelReq(r)">撤销</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.fee-page {
  width: 100%;
}
.fee-page__bar {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.fee-page__select {
  width: 220px;
}
.fee-page__dash {
  margin-bottom: 12px;
}
.fee-page__dist {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: var(--app-font-md);
}
.fee-page__tabs {
  margin-top: 4px;
}
.fee-page__ops {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fee-page__op-form {
  display: flex;
  gap: 12px;
}
.fee-page__op-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fee-page__transfer {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.fee-page__req-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fee-page__req-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fee-page__req-no {
  font-size: var(--app-font-md);
  color: var(--app-text-secondary, #8a8f9c);
  min-width: 140px;
}
</style>