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

<script setup lang="ts">
/**
 * 分账页（views/academic/divide/index.vue）—— 分账树（菜单「分账」，端点 38，树形非分页）。
 * el-table tree-props 渲染上级→下线层级（最多 3 层）；quota 为金额（每次分成金额）。
 */
import { getDivideTree, type DivideNodeDTO } from '@/api/academic/divide-into';
import { useScope } from '@/store/scope';
import { formatMoney } from '@/utils/format';

const scope = useScope();
const tree = ref<DivideNodeDTO[]>([]);
const loading = ref(false);
const error = ref('');

async function load(): Promise<void> {
  loading.value = true;
  error.value = '';
  try {
    const r = await getDivideTree(scope.toQuery());
    if (r.code === 200 && r.data) tree.value = r.data.tree;
    else error.value = r.message || '加载失败';
  } catch {
    error.value = '网络连接异常';
  } finally {
    loading.value = false;
  }
}
onMounted(() => {
  void load();
});
</script>

<template>
  <div class="divide-page">
    <div class="divide-page__bar">
      <el-button @click="load" :loading="loading">刷新</el-button>
      <span class="divide-page__hint">分账树：上级 → 下线（最多 3 层）；额度 0.00 = 该链不分成</span>
    </div>
    <el-alert v-if="error" :title="error" type="error" show-icon class="divide-page__error" />
    <el-table v-else :data="tree" :loading="loading" row-key="userId" :default-expand-all="true" :tree-props="{ children: 'children' }" border>
      <el-table-column prop="realName" label="成员" min-width="160" />
      <el-table-column label="分成额度(元)" min-width="130">
        <template #default="{ row }">¥ {{ formatMoney(parseFloat(row.quota)) }}</template>
      </el-table-column>
      <el-table-column label="累计收入(元)" min-width="130">
        <template #default="{ row }">¥ {{ formatMoney(parseFloat(row.cumulativeIncome)) }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.divide-page {
  width: 100%;
}
.divide-page__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.divide-page__hint {
  font-size: var(--app-font-md);
  color: var(--app-text-secondary, #8a8f9c);
}
</style>