lanan-system-vue/src/views/inspection/statistics/index.vue

<template>
  <div class="staff-statistics">
    <!-- 顶部过滤 -->
    <div class="filter-bar">
      <h2>员工排名与项目统计</h2>
      <div class="filter-actions">
        <el-select
          v-model="selected"
          placeholder="选择范围"
          @change="handleRangeChange"
          style="width: 120px"
        >
          <el-option
            v-for="item in tapList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-date-picker
          v-model="queryParams.datetimeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="getStaffCount"
        />
      </div>
    </div>

    <print-button
      button-text="打印"
      type="primary"
      size="medium"
      icon="el-icon-printer"
      :before-print="handleBeforePrint"
      :after-print="handleAfterPrint"
    >
      <template v-slot:printContent>
        <div class="print-content">
          <h1>员工排名与项目统计</h1>
          <p>统计范围:  ({{ queryParams.datetimeRange[0] }} 至 {{ queryParams.datetimeRange[1] }})</p>
          <table border="1" cellspacing="0" cellpadding="5" style="width: 100%; border-collapse: collapse;">
            <thead>
              <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>服务台次</th>
                <th>参与项目</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in List" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.nickname }}</td>
                <td>{{ item.totalCount }}</td>
                <td>
                  <div v-for="(project, i) in item.children" :key="i" style="margin-bottom: 2px;">
                    {{ project.projectName }} ({{ project.count }} | {{ project.percentage }}%)
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </print-button>

    <!-- 数据展示表格 -->
    <el-table
      :data="List"
      stripe
      border
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column type="index" label="排名" width="60" />
      <el-table-column label="头像" width="80">
        <template slot-scope="scope">
          <el-avatar :src=" defaultAvatar" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="姓名" width="150" />
      <el-table-column prop="totalCount" label="服务台次" width="120" />
      <el-table-column label="参与项目">
        <template slot-scope="scope">
          <el-tag
            v-for="(item, i) in scope.row.children"
            :key="i"
            type="info"
            style="margin-right: 4px; margin-bottom: 4px"
          >
            {{ item.projectName }} ({{ item.count }} | {{ item.percentage }}%)
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="goDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <StaffStatisticsDialog
      :visible.sync="staffDialogVisible"
      :user-id="selectedUserId"
      :range="selectedDateRange"
    />
    
  </div>
</template>

<script>
import request from "@/utils/request";
import { getDateRange } from "@/utils/dateUtils"; // 如果你已有该函数
import StaffStatisticsDialog from "./StaffStatisticsDialog.vue";
import PrintButton from "@/components/PrintButton";

export default {
  data() {
    return {
      tapList: [
        { label: "本日", value: "day" },
        { label: "本月", value: "month" },
      ],
      selected: "day",
      queryParams: {
        datetimeRange: getDateRange("day"),
      },
      List: [],
      loading: false,
      defaultAvatar: "https://www.nuoyunr.com/lananRsc/touxiang.png",
      staffDialogVisible: false,
      selectedUserId: null,
      selectedDateRange: null,
    };
  },
  components: {
    StaffStatisticsDialog,
    PrintButton,
  },

  created() {
    this.getStaffCount();
  },
  methods: {
    // 获取统计数据
    getStaffCount() {
      this.loading = true;
      request({
        url: "/partnerOwn/partner/getStaffCount",
        method: "post",
        data: this.queryParams,
      })
        .then((res) => {
          this.List = res.data || [];
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 切换范围
    handleRangeChange(val) {
      this.queryParams.datetimeRange = getDateRange(val);
      this.getStaffCount();
    },

    // 跳转详情页
    goDetail(row) {
      this.selectedUserId = row.userId;
      this.selectedDateRange = this.queryParams.datetimeRange;
      this.staffDialogVisible = true;
    },

    // 打印前处理
    handleBeforePrint() {
      console.log('打印前处理');
      // 可以在这里添加打印前的处理逻辑，如隐藏不需要打印的元素
    },

    // 打印后处理
    handleAfterPrint() {
      console.log('打印后处理');
      // 可以在这里添加打印后的处理逻辑，如恢复隐藏的元素
    },
  },
};
</script>

<style scoped>
.staff-statistics {
  padding: 20px;
  background-color: #fff;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-actions {
  display: flex;
  gap: 10px;
}
</style>