payment-platform/frontend/src/views/dashboard/tenant.vue

<template>
  <div class="tenant-dashboard">
    <!-- 新手引导 -->
    <!-- <div class="guide-section">
      <h2>快速开始</h2>
      <el-tabs v-model="activeGuideTab" type="card" class="guide-tabs">
        <el-tab-pane label="出资账户设置" name="account">
          <div class="step-desc">设置企业支付时的出资账户，当员工符合制度要求时，可由该账户出资进行企业支付</div>
          <el-button type="primary">去设置</el-button>
        </el-tab-pane>
        <el-tab-pane label="添加员工" name="employee">
          <div class="step-desc">创建部门/员工组/项目后，将员工信息填写或导入进来，完成操作后，发送二维码/链接给员工，让他们开通企业码</div>
          <el-button type="primary">去添加</el-button>
        </el-tab-pane>
        <el-tab-pane label="配置费控规则" name="rule">
          <div class="step-desc">新建费用制度，设置企业支付的规则，限定可使用的员工、时间、地点、金额、商户等信息</div>
          <el-button type="primary">去配置</el-button>
        </el-tab-pane>
        <el-tab-pane label="账单管理" name="bill">
          <div class="step-desc">企业因公消费账单，可进行账期设置、账单查看等功能</div>
          <el-button type="primary">去查看</el-button>
        </el-tab-pane>
      </el-tabs>
    </div> -->

    <!-- 核心数据 -->
    <div class="core-data-section">
      <div class="section-header">
        <h2>支付数据统计</h2>
        <div class="section-header-right">
          <el-select
            v-if="is_platform_user"
            v-model="currentTenantId"
            placeholder="选择商户"
            style="width: 180px"
          >
            <el-option
              v-for="tenant in allTenantData"
              :key="tenant.id"
              :label="tenant.name"
              :value="tenant.id"
            />
          </el-select>
          <el-select
            v-model="selectedEnterpriseId"
            placeholder="选择企业"
            filterable
            class="enterprise-select"
            @change="handleEnterpriseChange"
          >
            <el-option label="全部" :value="undefined" />
            <el-option
              v-for="item in enterpriseStore.getEnterpriseList"
              :key="item.enterprise_id"
              :label="item.name"
              :value="item.enterprise_id"
            />
          </el-select>
          <el-select
            v-model="selectedPayeeType"
            placeholder="收款方类型"
            clearable
            class="payee-select"
            @change="handlePayeeTypeChange"
          >
            <el-option label="支付宝" value="ALIPAY_ACCOUNT" />
            <el-option label="银行卡" value="BANK_CARD" />
          </el-select>
        </div>
      </div>

      <div class="data-cards">
        <div class="data-card">
          <div class="card-title">今日转账金额（元）</div>
          <div class="card-value">{{ statAmount.amount_of_today || "--" }}</div>
        </div>
        <div class="data-card">
          <div class="card-title">近7日转账金额（元）</div>
          <div class="card-value">{{ statAmount.amount_of_7days || "--" }}</div>
        </div>
        <div class="data-card">
          <div class="card-title">总转账金额（元）</div>
          <div class="card-value">{{ statAmount.amount_of_all || "--" }}</div>
        </div>
      </div>

      <div class="section-header" style="margin-top: 24px;">
        <h2>消费数据统计</h2>
      </div>
      <div class="data-cards">
        <div class="data-card consume-card">
          <div class="card-title">今日消费金额（元）</div>
          <div class="card-value">{{ consumeAmount.amount_of_today || "--" }}</div>
        </div>
        <div class="data-card consume-card">
          <div class="card-title">近7日消费金额（元）</div>
          <div class="card-value">{{ consumeAmount.amount_of_7days || "--" }}</div>
        </div>
        <div class="data-card consume-card">
          <div class="card-title">总消费金额（元）</div>
          <div class="card-value">{{ consumeAmount.amount_of_all || "--" }}</div>
        </div>
      </div>

      <div class="section-header" style="margin-top: 24px;">
        <h2>银联收款统计</h2>
      </div>
      <div class="data-cards">
        <div class="data-card lsy-card">
          <div class="card-title">今日收款金额（元）</div>
          <div class="card-value">{{ lsyAmount.amount_of_today || "--" }}</div>
        </div>
        <div class="data-card lsy-card">
          <div class="card-title">近7日收款金额（元）</div>
          <div class="card-value">{{ lsyAmount.amount_of_7days || "--" }}</div>
        </div>
        <div class="data-card lsy-card">
          <div class="card-title">总收款金额（元）</div>
          <div class="card-value">{{ lsyAmount.amount_of_all || "--" }}</div>
        </div>
      </div>

      <div class="section-header" style="margin-top: 24px;">
        <h2>汇总统计</h2>
      </div>
      <div class="data-cards">
        <div class="data-card summary-card">
          <div class="card-title">今日汇总（元）</div>
          <div class="card-value">{{ summaryAmount.amount_of_today || "--" }}</div>
        </div>
        <div class="data-card summary-card">
          <div class="card-title">近7日汇总（元）</div>
          <div class="card-value">{{ summaryAmount.amount_of_7days || "--" }}</div>
        </div>
        <div class="data-card summary-card">
          <div class="card-title">总汇总（元）</div>
          <div class="card-value">{{ summaryAmount.amount_of_all || "--" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ElButton, ElTabs, ElTabPane } from 'element-plus';
import { useEnterpriseStore, useUserStore } from '@/store';
import AccountAPI from '@/api/module_payment/account';
import TenantAPI, { TenantTable } from '@/api/module_system/tenant';

const userStore = useUserStore();
const enterpriseStore = useEnterpriseStore();

const is_platform_user = computed(() => {
  return userStore.is_platform_user;
});

const currentTenantId = ref<number | undefined>(undefined);

const selectedEnterpriseId = ref<string | undefined>(
  enterpriseStore.getCurrentEnterprise?.enterprise_id
);

const selectedPayeeType = ref<string | undefined>(undefined);
function handlePayeeTypeChange() {
  fetchStatAmount();
  fetchLsyAmount();
  fetchSummaryAmount();
}

const currentEnterpriseId = computed(() => enterpriseStore.getCurrentEnterprise?.enterprise_id);

const currentEnterprise = computed(() => enterpriseStore.getCurrentEnterprise);


const statAmount = ref<{
  amount_of_today?: string;
  amount_of_7days?: string;
  amount_of_all?: string;
}>({});

const consumeAmount = ref<{
  amount_of_today?: string;
  amount_of_7days?: string;
  amount_of_all?: string;
}>({});

/**
 * 「银联收款统计」卡的数据 —— 2026-10-05 起来自**乐收赢**（净额，后端已把分换成元）。
 * 标题当天由「支付宝收款」改过来：用户裁定 lsy = 银联收款、har = 支付宝收款，
 * 乐收赢的数不能挂在「支付宝收款」名下（那是汇安融的）。
 */
const lsyAmount = ref<{
  amount_of_today?: string;
  amount_of_7days?: string;
  amount_of_all?: string;
}>({});

const summaryAmount = ref<{
  amount_of_today?: string;
  amount_of_7days?: string;
  amount_of_all?: string;
}>({});

const allTenantData = ref<TenantTable[]>([]);

function handleEnterpriseChange() {
  enterpriseStore.setCurrentEnterprise(selectedEnterpriseId.value!);
}

async function fetchStatAmount() {
  try {
    const res = await AccountAPI.statAmount(currentTenantId.value, selectedEnterpriseId.value, selectedPayeeType.value);
    statAmount.value = res.data.data || {};
  } catch (error) {
    console.error("获取统计金额失败:", error);
  }
}

async function fetchConsumeAmount() {
  try {
    const res = await AccountAPI.statConsumeAmount(currentTenantId.value, selectedEnterpriseId.value);
    consumeAmount.value = res.data.data || {};
  } catch (error) {
    console.error("获取消费统计金额失败:", error);
  }
}

// 乐收赢（银联收单）统计只按租户取，**不随「企业」下拉变** —— 乐收赢无企业维度
// （去企业化后新单 enterprise_id 恒 NULL，带企业筛会把新单全排除、卡片恒 0.00）。
async function fetchLsyAmount() {
  try {
    const res = await AccountAPI.statLsyTradeAmount(currentTenantId.value);
    lsyAmount.value = res.data.data || {};
  } catch (error) {
    console.error("获取乐收赢收款统计失败:", error);
  }
}

async function fetchSummaryAmount() {
  try {
    const res = await AccountAPI.statSummaryAmount(currentTenantId.value, selectedEnterpriseId.value, selectedPayeeType.value);
    summaryAmount.value = res.data.data || {};
  } catch (error) {
    console.error("获取汇总统计金额失败:", error);
  }
}

async function fetchAllTenantData() {
  try {
    const res = await TenantAPI.listTenant({
      page_no: 1,
      page_size: 100,
    });
    // 增加全部选项然后合并请求的数据
    allTenantData.value = [{ id: undefined, name: "全部" }, ...(res.data.data?.items || [])];
    console.log("所有租户数据:", allTenantData.value);
  } catch (error) {
    console.error("获取所有租户数据失败:", error);
  }
}

onMounted(async () => {
  if (is_platform_user.value) {
    await fetchAllTenantData();
  }
  await enterpriseStore.loadEnterpriseList();
  if (!is_platform_user.value && !selectedEnterpriseId.value) {
    selectedEnterpriseId.value = enterpriseStore.getCurrentEnterprise?.enterprise_id;
  }
  fetchStatAmount();
  fetchConsumeAmount();
  fetchLsyAmount();
  fetchSummaryAmount();
});

watch(currentTenantId, async (newTenantId) => {
  // 绕过 store 缓存，按商户直接重载企业列表
  enterpriseStore.enterpriseList = (await enterpriseStore.fetchEnterpriseList(
    newTenantId || undefined
  )) || [];
  // 重置到"全部"，由用户手动选择企业
  selectedEnterpriseId.value = undefined;
  fetchStatAmount();
  fetchConsumeAmount();
  fetchLsyAmount();
  fetchSummaryAmount();
});

watch(selectedEnterpriseId, () => {
  fetchStatAmount();
  fetchConsumeAmount();
  fetchLsyAmount();
  fetchSummaryAmount();
});

// 租户仪表盘组件
</script>

<style scoped>
.tenant-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.guide-section {
  background: white;
  border-radius: 8px;
  padding: 20px 20px 50px 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.guide-section h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #303133;
}

.guide-tabs {
  margin-top: 16px;
}

.guide-tabs .el-tabs__header {
  margin-bottom: 16px;
  border-bottom: none;
}

.guide-tabs .el-tabs__content {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 0 0 8px 8px;
  border: 1px solid #ebeef5;
  border-top: none;
}

.guide-tabs .el-tabs__item {
  padding: 12px 20px;
  font-size: 14px;
}

.guide-tabs .el-tabs__item.is-active {
  color: #409eff;
  font-weight: 500;
}

.step-desc {
  font-size: 12px;
  color: #909399;
  margin-bottom: 12px;
  line-height: 1.4;
}

.core-data-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.section-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.enterprise-select {
  width: 260px;
}

.payee-select {
  width: 140px;
}

.more-link {
  font-size: 12px;
  color: #409eff;
  text-decoration: none;
}

.data-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.data-card {
  padding: 16px;
  background: #f9f9f9;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.data-card.consume-card {
  border-left-color: #409eff;
}

.data-card.consume-card .card-value {
  color: #409eff;
}

.data-card.summary-card {
  border-left-color: #e6a23c;
}

.data-card.summary-card .card-value {
  color: #e6a23c;
}

.card-title {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.card-link {
  font-size: 12px;
  color: #409eff;
  text-decoration: none;
}

@media (max-width: 1200px) {
  .data-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .guide-steps {
    flex-direction: column;
  }
  
  .guide-step:not(:last-child)::after {
    content: '▼';
    position: relative;
    right: auto;
    top: auto;
    display: block;
    text-align: center;
    margin: 8px 0;
  }
  
  .data-cards {
    grid-template-columns: 1fr;
  }
}
</style>