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>