antissoft / lvqianmeiye_ERP

<template>
  <div class="NCC-common-layout">
    <div class="NCC-common-layout-center">
      <!-- 筛选条件 -->
      <el-row class="NCC-common-search-box" :gutter="16">
        <el-form @submit.native.prevent >
          <el-col :span="6">
            <el-form-item label="选择月份">
              <el-date-picker 
                v-model="query.month" 
                type="month" 
                value-format="yyyy-MM" 
                format="yyyy-MM" 
                placeholder="选择月份"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select
                v-model="query.departmentId"
                placeholder="请选择部门"
                filterable
                clearable
                style="width: 100%;">
                <el-option
                  v-for="dept in departmentOptions"
                  :key="dept.Id || dept.id"
                  :label="dept.FullName || dept.fullName"
                  :value="dept.Id || dept.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="0">
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
              <el-button icon="el-icon-download" @click="exportExcel()">导出Excel</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <!-- 统计卡片 -->
      <div class="statistics-cards" v-if="summaryData">
        <div class="stat-card order-card">
          <div class="stat-icon">
            <i class="el-icon-shopping-cart-full"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">开单业绩</div>
            <div class="stat-value">¥{{ formatMoney(summaryData.totalOrderAchievement) }}</div>
          </div>
        </div>
        <div class="stat-card consume-card">
          <div class="stat-icon">
            <i class="el-icon-goods"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">消耗业绩</div>
            <div class="stat-value">¥{{ formatMoney(summaryData.totalConsumeAchievement) }}</div>
          </div>
        </div>
        <div class="stat-card refund-card">
          <div class="stat-icon">
            <i class="el-icon-refresh-left"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">退卡业绩</div>
            <div class="stat-value">¥{{ formatMoney(summaryData.totalRefundAchievement) }}</div>
          </div>
        </div>
        <div class="stat-card person-card">
          <div class="stat-icon">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">消耗人头</div>
            <div class="stat-value">{{ summaryData.totalPersonCount || 0 }}</div>
          </div>
        </div>
        <div class="stat-card order-person-card">
          <div class="stat-icon">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">开单人头</div>
            <div class="stat-value">{{ summaryData.totalOrderPersonCount || 0 }}</div>
          </div>
        </div>
        <div class="stat-card conversion-card">
          <div class="stat-icon">
            <i class="el-icon-data-line"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">消耗开单转化率</div>
            <div class="stat-value">{{ formatPercent(summaryData.totalConsumeOrderConversionRate) }}%</div>
          </div>
        </div>
        <div class="stat-card labor-card">
          <div class="stat-icon">
            <i class="el-icon-coin"></i>
          </div>
          <div class="stat-content">
            <div class="stat-label">手工费</div>
            <div class="stat-value">¥{{ formatMoney(summaryData.totalLaborCost) }}</div>
          </div>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="NCC-common-layout-main NCC-flex-main table-wrapper">
        <el-table 
          v-loading="listLoading" 
          :data="list" 
          border 
          stripe
          :max-height="tableHeight"
          @sort-change="handleSortChange">
          <el-table-column prop="EmployeeId" label="员工ID" width="180" sortable="custom">
            <template slot-scope="scope">
              <span>{{ scope.row.EmployeeId || '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="EmployeeName" label="员工姓名" min-width="120" sortable="custom">
            <template slot-scope="scope">
              <span>{{ scope.row.EmployeeName || '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="DepartmentName" label="部门" min-width="120" sortable="custom">
            <template slot-scope="scope">
              <span>{{ scope.row.DepartmentName || '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="OrderAchievement" label="开单业绩" min-width="130" sortable="custom">
            <template slot-scope="scope">
              <span class="amount-value">¥{{ formatMoney(scope.row.OrderAchievement) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumeAchievement" label="消耗业绩" min-width="130" sortable="custom">
            <template slot-scope="scope">
              <span class="amount-value">¥{{ formatMoney(scope.row.ConsumeAchievement) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="RefundAchievement" label="退卡业绩" min-width="130" sortable="custom">
            <template slot-scope="scope">
              <span class="amount-value">¥{{ formatMoney(scope.row.RefundAchievement) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="PersonCount" label="消耗人头" width="100" sortable="custom">
            <template slot-scope="scope">
              <span>{{ scope.row.PersonCount !== null && scope.row.PersonCount !== undefined ? scope.row.PersonCount : 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="OrderPersonCount" label="开单人头" width="100" sortable="custom">
            <template slot-scope="scope">
              <span>{{ scope.row.OrderPersonCount !== null && scope.row.OrderPersonCount !== undefined ? scope.row.OrderPersonCount : 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ConsumeOrderConversionRate" label="消耗开单转化率" min-width="140" sortable="custom">
            <template slot-scope="scope">
              <span class="rate-value">{{ formatPercent(scope.row.ConsumeOrderConversionRate) }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="LaborCost" label="手工费" min-width="130" sortable="custom">
            <template slot-scope="scope">
              <span class="amount-value">¥{{ formatMoney(scope.row.LaborCost) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { saveAs } from 'file-saver'

export default {
  name: 'TechTeacherConsumeStatistics',
  data() {
    return {
      query: {
        month: '',
        departmentId: ''
      },
      list: [],
      originalList: [], // 保存原始数据，用于取消排序时恢复
      listLoading: false,
      summaryData: null,
      sortProp: '',
      sortOrder: '',
      departmentOptions: [] // 部门选项列表
    }
  },
  computed: {
    // 计算表格高度
    tableHeight() {
      // 减去头部、筛选条件、统计卡片、分页等高度
      return window.innerHeight - 350
    }
  },
  created() {
    this.setDefaultMonth()
    this.loadDepartmentOptions()
    this.search()
  },
  methods: {
    // 设置默认月份（当前月份）
    setDefaultMonth() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      this.query.month = `${year}-${month}`
    },

    // 查询数据
    search() {
      if (!this.query.month) {
        this.$message({
          type: 'warning',
          message: '请选择月份',
          duration: 1500
        })
        return
      }

      this.listLoading = true

      // 解析年月
      const [year, month] = this.query.month.split('-')

      const params = {
        Year: parseInt(year),
        Month: parseInt(month)
      }

      // 如果选择了部门，添加部门筛选参数
      if (this.query.departmentId) {
        params.DepartmentId = this.query.departmentId
      }

      request({
        url: '/api/Extend/lqtechteachersalary/statistics',
        method: 'GET',
        data: params
      }).then(res => {
        if (res.data && Array.isArray(res.data)) {
          this.list = res.data
          this.originalList = JSON.parse(JSON.stringify(res.data)) // 保存原始数据
          // 计算汇总数据
          this.calculateSummary(res.data)
        } else {
          this.list = []
          this.originalList = []
          this.summaryData = null
        }
        this.listLoading = false
      }).catch(err => {
        console.error('查询失败:', err)
        this.$message({
          type: 'error',
          message: '查询失败，请重试',
          duration: 1500
        })
        this.listLoading = false
        this.list = []
        this.originalList = []
        this.summaryData = null
      })
    },

    // 处理排序变化
    handleSortChange({ column, prop, order }) {
      if (!order) {
        // 取消排序，恢复原始顺序
        this.sortProp = ''
        this.sortOrder = ''
        if (this.originalList.length > 0) {
          this.list = JSON.parse(JSON.stringify(this.originalList))
        }
        return
      }
      
      this.sortProp = prop
      this.sortOrder = order === 'ascending' ? 'asc' : 'desc'
      
      this.sortList()
    },

    // 对列表进行排序
    sortList() {
      if (!this.sortProp || !this.sortOrder) {
        return
      }

      // 从原始数据开始排序，确保每次排序都是基于原始数据
      const sourceList = this.originalList.length > 0 ? JSON.parse(JSON.stringify(this.originalList)) : JSON.parse(JSON.stringify(this.list))
      
      // 创建新数组并排序
      const sortedList = sourceList.sort((a, b) => {
        let aVal = a[this.sortProp]
        let bVal = b[this.sortProp]

        // 处理空值
        if (aVal === null || aVal === undefined) aVal = 0
        if (bVal === null || bVal === undefined) bVal = 0

        // 数值类型直接比较
        if (typeof aVal === 'number' && typeof bVal === 'number') {
          return this.sortOrder === 'asc' ? aVal - bVal : bVal - aVal
        }

        // 字符串类型
        aVal = String(aVal || '')
        bVal = String(bVal || '')
        
        if (this.sortOrder === 'asc') {
          return aVal.localeCompare(bVal)
        } else {
          return bVal.localeCompare(aVal)
        }
      })
      
      // 重新赋值整个数组以触发响应式更新
      this.list = sortedList
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },

    // 计算汇总数据
    calculateSummary(data) {
      if (!data || data.length === 0) {
        this.summaryData = {
          totalOrderAchievement: 0,
          totalConsumeAchievement: 0,
          totalRefundAchievement: 0,
          totalPersonCount: 0,
          totalOrderPersonCount: 0,
          totalPersonTimes: 0,
          totalLaborCost: 0,
          totalConsumeOrderConversionRate: 0
        }
        return
      }

      const totalPersonCount = data.reduce((sum, item) => sum + (parseInt(item.PersonCount) || 0), 0)
      const totalOrderPersonCount = data.reduce((sum, item) => sum + (parseInt(item.OrderPersonCount) || 0), 0)
      
      // 计算总转化率：总开单人头 / 总消耗人头
      const totalConsumeOrderConversionRate = totalPersonCount > 0 
        ? (totalOrderPersonCount / totalPersonCount) * 100 
        : 0

      this.summaryData = {
        totalOrderAchievement: data.reduce((sum, item) => sum + (parseFloat(item.OrderAchievement) || 0), 0),
        totalConsumeAchievement: data.reduce((sum, item) => sum + (parseFloat(item.ConsumeAchievement) || 0), 0),
        totalRefundAchievement: data.reduce((sum, item) => sum + (parseFloat(item.RefundAchievement) || 0), 0),
        totalPersonCount: totalPersonCount,
        totalOrderPersonCount: totalOrderPersonCount,
        totalPersonTimes: data.reduce((sum, item) => sum + (parseInt(item.PersonTimes) || 0), 0),
        totalLaborCost: data.reduce((sum, item) => sum + (parseFloat(item.LaborCost) || 0), 0),
        totalConsumeOrderConversionRate: totalConsumeOrderConversionRate
      }
    },

    // 重置查询条件
    reset() {
      this.setDefaultMonth()
      this.query.departmentId = ''
      this.list = []
      this.originalList = []
      this.summaryData = null
      this.sortProp = ''
      this.sortOrder = ''
      this.search()
    },

    // 加载部门选项（科技部）
    loadDepartmentOptions() {
      request({
        url: '/api/Extend/Organize/GetByName',
        method: 'GET',
        data: {
          organizeName: '科技部'
        }
      }).then(res => {
        this.departmentOptions = res.data || []
      }).catch(() => {
        this.departmentOptions = []
      })
    },

    // 格式化金额
    formatMoney(amount) {
      if (amount === null || amount === undefined || amount === '') {
        return '0.00'
      }
      const num = parseFloat(amount)
      if (isNaN(num)) {
        return '0.00'
      }
      return num.toFixed(2)
    },

    // 格式化百分比
    formatPercent(rate) {
      if (rate === null || rate === undefined || rate === '') {
        return '0.00'
      }
      const num = parseFloat(rate)
      if (isNaN(num)) {
        return '0.00'
      }
      return num.toFixed(2)
    },

    // 导出Excel
    async exportExcel() {
      if (!this.list || this.list.length === 0) {
        this.$message({
          type: 'warning',
          message: '暂无数据可导出',
          duration: 1500
        })
        return
      }

      try {
        // 动态导入 xlsx 库
        const XLSX = await import('xlsx')
        
        // 构建表头
        const headers = [
          '员工ID',
          '员工姓名',
          '部门',
          '开单业绩',
          '消耗业绩',
          '退卡业绩',
          '消耗人头',
          '开单人头',
          '消耗开单转化率(%)',
          '手工费'
        ]
        
        // 构建数据行
        const dataRows = this.list.map(row => [
          row.EmployeeId || '无',
          row.EmployeeName || '无',
          row.DepartmentName || '无',
          this.formatMoney(row.OrderAchievement),
          this.formatMoney(row.ConsumeAchievement),
          this.formatMoney(row.RefundAchievement),
          row.PersonCount !== null && row.PersonCount !== undefined ? row.PersonCount : 0,
          row.OrderPersonCount !== null && row.OrderPersonCount !== undefined ? row.OrderPersonCount : 0,
          this.formatPercent(row.ConsumeOrderConversionRate),
          this.formatMoney(row.LaborCost)
        ])
        
        // 合并表头和数据
        const excelData = [headers, ...dataRows]
        
        // 创建工作簿
        const ws = XLSX.utils.aoa_to_sheet(excelData)
        
        // 设置列宽
        ws['!cols'] = [
          { wch: 18 }, // 员工ID
          { wch: 12 }, // 员工姓名
          { wch: 12 }, // 部门
          { wch: 15 }, // 开单业绩
          { wch: 15 }, // 消耗业绩
          { wch: 15 }, // 退卡业绩
          { wch: 12 }, // 消耗人头
          { wch: 12 }, // 开单人头
          { wch: 18 }, // 消耗开单转化率
          { wch: 15 }  // 手工费
        ]
        
        // 创建工作簿
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, ws, '科技部老师耗卡业绩')
        
        // 生成文件名
        const [year, month] = this.query.month.split('-')
        const fileName = `科技部老师耗卡业绩_${year}年${month}月_${new Date().getTime()}.xlsx`
        
        // 导出文件
        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)
        
        this.$message({
          type: 'success',
          message: '导出成功',
          duration: 1500
        })
      } catch (error) {
        console.error('导出失败:', error)
        if (error.message && error.message.includes('xlsx')) {
          this.$message({
            type: 'error',
            message: '导出失败：请先安装 xlsx 库，运行命令: npm install xlsx --save',
            duration: 3000
          })
        } else {
          this.$message({
            type: 'error',
            message: '导出失败：' + (error.message || '未知错误'),
            duration: 2000
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-cards {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  
  .stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    height: 120px;
    min-width: 0;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 24px;
      color: #fff;
      flex-shrink: 0;
    }
    
    &.order-card .stat-icon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    &.consume-card .stat-icon {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    &.refund-card .stat-icon {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    &.person-card .stat-icon {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
    
    &.order-person-card .stat-icon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    &.conversion-card .stat-icon {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    &.labor-card .stat-icon {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
    
    .stat-content {
      flex: 1;
      min-width: 0;
      
      .stat-label {
        font-size: 14px;
        color: #7f8c8d;
        margin-bottom: 8px;
      }
      
      .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: #2c3e50;
        line-height: 1.2;
      }
    }
  }
}

.table-wrapper {
  height: 100%;
  
  ::v-deep .el-table__body-wrapper {
    overflow-y: scroll !important;
  }
}

.amount-value {
  color: #409EFF;
  font-weight: 500;
}

.rate-value {
  color: #67C23A;
  font-weight: 500;
}
</style>