qingcheng-Web/src/view/performance/performanceManagement.vue

<script setup lang="ts">
import {ref, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {message} from "ant-design-vue";

// 修改列定义为主管业绩相关字段
const columns = [
  {
    title: '主管姓名',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    fixed: 'left',
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    width: 120,
    align: 'center'
  },
  {
    title: '员工数',
    dataIndex: 'staffCount',
    key: 'staffCount',
    width: 80,
    align: 'center'
  },
  {
    title: '推广数',
    dataIndex: 'promotionCount',
    key: 'promotionCount',
    width: 80,
    align: 'center'
  },
  {
    title: '比例',
    dataIndex: 'ratio',
    key: 'ratio',
    width: 80,
    align: 'center'
  },
  {
    title: '下单量',
    dataIndex: 'orderCount',
    key: 'orderCount',
    width: 80,
    align: 'center'
  },
  {
    title: '总订单',
    dataIndex: 'totalOrders',
    key: 'totalOrders',
    width: 90,
    align: 'center'
  },
  {
    title: '退款',
    dataIndex: 'refund',
    key: 'refund',
    width: 80,
    align: 'center'
  },
  {
    title: '净成交',
    dataIndex: 'netAmount',
    key: 'netAmount',
    width: 100,
    align: 'center'
  },
  {
    title: '待释放',
    dataIndex: 'pendingRelease',
    key: 'pendingRelease',
    width: 90,
    align: 'center'
  },
  {
    title: '可结算',
    dataIndex: 'settleable',
    key: 'settleable',
    width: 90,
    align: 'center'
  },
  {
    title: '已回退',
    dataIndex: 'returned',
    key: 'returned',
    width: 90,
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 130,
    align: 'center'
  }
];

// 定义主管业绩数据结构
interface ManagerPerformance {
  id: number;
  name: string;
  phone: string;
  staffCount: number;
  promotionCount: number;
  ratio: string;
  orderCount: number;
  totalOrders: number;
  refund: number;
  netAmount: number;
  pendingRelease: number;
  settleable: number;
  returned: number;
}

const tableData = ref<ManagerPerformance[]>([]);
const loading = ref(false);
const searchName = ref("");
const searchPhone = ref("");

// 生成模拟数据
const generateMockData = () => {
  const mockData: ManagerPerformance[] = [];
  const names = ['张主管', '李经理', '王总监', '赵主任', '钱组长', '孙课长', '周经理', '吴主管'];
  const phones = ['13800138000', '13900139000', '13700137000', '13600136000', '13500135000', '13400134000', '13300133000', '13200132000'];

  for (let i = 0; i < 15; i++) {
    const nameIndex = i % names.length;
    const phoneIndex = i % phones.length;

    mockData.push({
      id: i + 1,
      name: names[nameIndex],
      phone: phones[phoneIndex],
      staffCount: Math.floor(Math.random() * 20) + 5,
      promotionCount: Math.floor(Math.random() * 100) + 50,
      ratio: `${Math.floor(Math.random() * 20) + 10}%`,
      orderCount: Math.floor(Math.random() * 500) + 100,
      totalOrders: Math.floor(Math.random() * 1000) + 500,
      refund: Math.floor(Math.random() * 50) + 10,
      netAmount: Math.floor(Math.random() * 50000) + 10000,
      pendingRelease: Math.floor(Math.random() * 10000) + 5000,
      settleable: Math.floor(Math.random() * 30000) + 10000,
      returned: Math.floor(Math.random() * 5000) + 1000
    });
  }

  return mockData;
};

const originalTableData = ref<ManagerPerformance[]>([]);

// 搜索功能
const handleSearch = () => {
  if (!searchName.value.trim() && !searchPhone.value.trim()) {
    tableData.value = [...originalTableData.value];
    return;
  }

  const filtered = originalTableData.value.filter(item => {
    const nameMatch = searchName.value ? item.name.includes(searchName.value) : true;
    const phoneMatch = searchPhone.value ? item.phone.includes(searchPhone.value) : true;
    return nameMatch && phoneMatch;
  });

  if (filtered.length === 0) {
    message.warning("未找到匹配的主管业绩数据");
    tableData.value = [];
  } else {
    tableData.value = filtered;
  }
};

// 重置搜索
const reset = () => {
  searchName.value = "";
  searchPhone.value = "";
  tableData.value = [...originalTableData.value];
};

const router = useRouter();

// 查看员工绩效明细 - 添加跳转功能
const viewStaffPerformance = (record: ManagerPerformance) => {
  // 跳转到员工绩效页面，并传递主管ID作为参数
  router.push({
    path: '/employeePerformaince',
    query: {
      managerId: record.id,
      managerName: record.name
    }
  });
};

onMounted(() => {
  loading.value = true;
  // 模拟数据加载延迟
  setTimeout(() => {
    const mockData = generateMockData();
    tableData.value = mockData;
    originalTableData.value = mockData;
    loading.value = false;
  }, 800);
});

const goBack = () => {
  router.push('/project');
};
</script>

<template>
  <!-- 搜索框 -->
  <div class="search-box">
    <a-form layout="inline">
      <a-space>
        <a-form-item label="主管姓名">
          <a-input-search
              style="width: 300px"
              placeholder="请输入主管姓名"
              class="custom-search"
              enter-button
              v-model:value="searchName"
              @pressEnter="handleSearch"
          />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input-search
              style="width: 300px"
              placeholder="请输入手机号"
              v-model:value="searchPhone"
              @pressEnter="handleSearch"
              enter-button
              class="custom-search"
          />
        </a-form-item>
        <a-button @click="reset">重置</a-button>
        <a-button class="custom-button" @click="goBack">返回</a-button>
      </a-space>
    </a-form>
  </div>

  <!-- 数据表格 -->
  <a-table
      :columns="columns"
      :data-source="tableData"
      :scroll="{ x: 1500 }"
      :loading="loading"
      bordered
      rowKey="id"
      size="middle"
  >
    <template #bodyCell="{ column, record }">
      <!-- 金额格式化 -->
      <template v-if="['netAmount', 'pendingRelease', 'settleable', 'returned','refund'].includes(column.dataIndex)">
        ¥{{ record[column.dataIndex as keyof ManagerPerformance].toLocaleString() }}
      </template>

      <!-- 操作列 - 添加点击事件 -->
      <template v-if="column.key === 'action'">
        <a-button
            size="small"
            @click="viewStaffPerformance(record)"
        >
          员工绩效明细
        </a-button>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
.search-box {
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

:deep(.ant-table-thead) > tr > th {
  background-color: #f0f5ff !important;
  font-weight: 600;
}

:deep(.ant-table-row:hover) {
  background-color: #fafafa !important;
}

.search-box .ant-form-item {
  margin-bottom: 0;
}

.search-box .ant-space {
  width: 100%;
}

.custom-button {
  background-color: #ffa940;
  border-color: #ffa940;
  color: #fff;
}

.custom-button:hover,
.custom-button:focus {
  background-color: #ffa940;
  border-color: #ffa940;
  color: #fff;
  opacity: 0.9;
}

.custom-search :deep(.ant-input-search-button) {
  background-color: #ffa940;
  border-color: #ffa940;
}

.custom-search :deep(.ant-input-search-button:hover),
.custom-search :deep(.ant-input-search-button:focus) {
  background-color: #fa8c16;
  border-color: #fa8c16;
}


.custom-search :deep(.ant-input) {
  border-right-color: #ffa940;
}
</style>