yoe-shop-web/src/views/analysis/deptPurchase/index.vue

<template>
  <div class="page-container">
    <PageTitle title="部门采购金额" />

    <SearchBar :form="searchForm" :filters="filters" @search="handleSearch" @reset="handleReset">
      <template #buttons>
        <el-button type="danger">导出</el-button>
      </template>
    </SearchBar>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="deptName" label="部门名称" width="120" align="center" />
      <el-table-column prop="orderPerson" label="下单人" width="100" align="center" />
      <el-table-column prop="orderAmount" label="下单金额" min-width="120" align="center">
        <template #default="{ row }">¥{{ row.orderAmount.toLocaleString() }}</template>
      </el-table-column>
      <el-table-column prop="completedAmount" label="已完成订单金额" min-width="140" align="center">
        <template #default="{ row }">¥{{ row.completedAmount.toLocaleString() }}</template>
      </el-table-column>
      <el-table-column prop="pendingAmount" label="待完成订单金额" min-width="140" align="center">
        <template #default="{ row }">¥{{ row.pendingAmount.toLocaleString() }}</template>
      </el-table-column>
    </el-table>

    <TablePagination v-model:page="pagination.page" v-model:pageSize="pagination.pageSize" :total="pagination.total" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { PageTitle, SearchBar, TablePagination } from '@/components';

const searchForm = reactive({
  keyword: '',
  dateRange: [],
  deptId: ''
});

const filters = [
  {
    field: 'deptId',
    label: '下单部门',
    options: [
      { label: '全部', value: '' },
      { label: '人事部', value: '1' },
      { label: '行政部', value: '2' },
      { label: '设计部', value: '3' },
      { label: '技术部', value: '4' }
    ]
  }
];

const pagination = reactive({ page: 1, pageSize: 10, total: 100 });

const tableData = ref([
  { deptName: '人事部', orderPerson: '李世海', orderAmount: 2115.97, completedAmount: 2115.97, pendingAmount: 2115.97 },
  { deptName: '行政部', orderPerson: '李书萍', orderAmount: 4476.12, completedAmount: 4476.12, pendingAmount: 4476.12 },
  { deptName: '人事部', orderPerson: '邓文锦', orderAmount: 7751.34, completedAmount: 7751.34, pendingAmount: 7751.34 },
  { deptName: '设计部', orderPerson: '王凡宏', orderAmount: 7936.37, completedAmount: 7936.37, pendingAmount: 7936.37 },
  { deptName: '技术部', orderPerson: '赵昊艳', orderAmount: 3931.45, completedAmount: 3931.45, pendingAmount: 3931.45 },
  { deptName: '人事部', orderPerson: '钱君霞', orderAmount: 6132.75, completedAmount: 6132.75, pendingAmount: 6132.75 },
  { deptName: '行政部', orderPerson: '周静', orderAmount: 3189.56, completedAmount: 3189.56, pendingAmount: 3189.56 },
  { deptName: '行政部', orderPerson: '吴彦琛', orderAmount: 993.66, completedAmount: 993.66, pendingAmount: 993.66 },
  { deptName: '设计部', orderPerson: '钱慧倩', orderAmount: 2763.35, completedAmount: 2763.35, pendingAmount: 2763.35 },
  { deptName: '技术部', orderPerson: '孙银茹', orderAmount: 9286.45, completedAmount: 9286.45, pendingAmount: 9286.45 }
]);

const handleSearch = () => {
  // 搜索逻辑
};

const handleReset = () => {
  // 重置逻辑
};
</script>