lgp-admin-plus/apps/web-antd/src/views/dashboard/workspace/index.vue

<script lang="ts" setup>
/**
 * 工作台：用订单/清单/用户真实统计替换 Vben 示例数据。
 */
import type {
  WorkbenchProjectItem,
  WorkbenchQuickNavItem,
  WorkbenchTodoItem,
} from '@vben/common-ui';

import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  WorkbenchHeader,
  WorkbenchProject,
  WorkbenchQuickNav,
  WorkbenchTodo,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';

import { getOrderStat } from '#/views/customer/order/api';

const userStore = useUserStore();
const router = useRouter();

const stat = ref<Record<string, any>>({});

const projectItems = ref<WorkbenchProjectItem[]>([]);
const todoItems = ref<WorkbenchTodoItem[]>([]);

const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:cube-outline',
    title: '商品图册',
    url: '/goods/catalogue',
  },
  {
    color: '#e18525',
    icon: 'ion:layers-outline',
    title: '套餐搭配',
    url: '/goods/package',
  },
  {
    color: '#3fb27f',
    icon: 'ion:list-outline',
    title: '清单管理',
    url: '/customer/list',
  },
  {
    color: '#bf0c2c',
    icon: 'ion:receipt-outline',
    title: '订单管理',
    url: '/customer/order',
  },
  {
    color: '#4daf1bc9',
    icon: 'ion:people-outline',
    title: '微信用户',
    url: '/customer/wx-user',
  },
  {
    color: '#00d8ff',
    icon: 'ion:chatbubble-outline',
    title: '用户反馈',
    url: '/customer/feedback',
  },
  {
    color: '#8b5cf6',
    icon: 'ion:return-down-back-outline',
    title: '售后管理',
    url: '/customer/after-sale',
  },
];

function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
  if (nav.url?.startsWith('/')) {
    router.push(nav.url).catch(() => undefined);
  }
}

/** 把订单概览铺到工作台卡片和待办 */
async function loadStat() {
  const data = (await getOrderStat()) ?? {};
  stat.value = data;
  projectItems.value = [
    {
      color: '#3fb27f',
      content: `待付款 ${data.unpaid ?? 0} 单`,
      date: '',
      group: '订单',
      icon: 'ion:card-outline',
      title: `订单 ${data.total ?? 0} 笔`,
      url: '/customer/order',
    },
    {
      color: '#e18525',
      content: `待审凭证 ${data.auditing ?? 0} 笔`,
      date: '',
      group: '收款',
      icon: 'ion:cash-outline',
      title: `成交 ¥${data.amount_text ?? '0'}`,
      url: '/customer/order',
    },
    {
      color: '#1fdaca',
      content: '客户选品清单',
      date: '',
      group: '清单',
      icon: 'ion:list-outline',
      title: `清单 ${data.list_count ?? 0} 份`,
      url: '/customer/list',
    },
    {
      color: '#00d8ff',
      content: '小程序授权用户',
      date: '',
      group: '客户',
      icon: 'ion:people-outline',
      title: `用户 ${data.wx_user_count ?? 0} 人`,
      url: '/customer/wx-user',
    },
  ];
  todoItems.value = [
    {
      completed: (data.auditing ?? 0) === 0,
      content: '转账凭证待审核，通过后订单会记为已付款。',
      date: '',
      title: `待审凭证 ${data.auditing ?? 0} 笔`,
    },
    {
      completed: (data.unpaid ?? 0) === 0,
      content: '未付款订单，可跟进客户或后台代客确认。',
      date: '',
      title: `待付款 ${data.unpaid ?? 0} 单`,
    },
    {
      completed: (data.paid ?? 0) === 0,
      content: '已付款待发货，请及时填写物流或自提点。',
      date: '',
      title: `待发货 ${data.paid ?? 0} 单`,
    },
  ];
}

onMounted(loadStat);
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        {{ userStore.userInfo?.realName || '管理员' }}，开始处理业务吧
      </template>
      <template #description>
        成交 ¥{{ stat.amount_text || '0' }} · 待审 {{ stat.auditing || 0 }} ·
        用户 {{ stat.wx_user_count || 0 }}
      </template>
    </WorkbenchHeader>

    <div class="flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
        <WorkbenchProject
          :items="projectItems"
          title="业务概览"
          @click="navTo"
        />
      </div>
      <div class="w-full lg:w-2/5">
        <WorkbenchQuickNav
          :items="quickNavItems"
          class="lg:mt-0"
          title="快捷导航"
          @click="navTo"
        />
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办" />
      </div>
    </div>
  </div>
</template>