hospital-project/src/views/draw/children/worker/workerRank.vue

<script setup lang="ts">
defineOptions({
  name: "AssessmentRank"
});

import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  getAssessmentPageList,
  getPageScoreInfoByAssessment
} from "@/api/manage";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useAppStoreHook } from "@/store/modules/app";

// 考核活动点击交互
const activityList: any = ref([]);
const activeActivity = ref(0);
const handleActiveActivity = (item: any, index: number) => {
  activeActivity.value = index;
  getPageScoreInfoByAssessmentApi(item);
};

// 考核活动数据
const getAssessmentPageListApi = async (name = "") => {
  const params: {
    pageNumber: number;
    pageSize: number;
    assessmentType: number;
    name?: string;
  } = {
    pageNumber: 1,
    pageSize: 999999,
    assessmentType: 0 // 0:员工,1:部门,2:医疗组,3:部门负责人
  };
  if (name) {
    params.name = name;
  }
  const { code, msg, data } = await getAssessmentPageList(params);
  if (code === 200) {
    activityList.value = data.records || [];
    if (activityList.value && activityList.value.length) {
      handleActiveActivity(activityList.value[0], 0);
    }
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getAssessmentPageListApi();
});
const handleSearch = () => {
  getAssessmentPageListApi(searchKeyword.value);
};

// 右侧列表
const searchKeyword = ref("");
const averageScore = ref<number | string>(0);
const tableData = ref<any>([]);
const getPageScoreInfoByAssessmentApi = async (obj: any = {}) => {
  const params = {
    assessmentId: obj.id,
    assessmentType: `${obj.assessmentType}`
  };
  const { code, msg, data = [] } = await getPageScoreInfoByAssessment(params);
  if (code === 200) {
    tableData.value = data;
    if (tableData.value.length) {
      let allCount = 0;
      tableData.value.forEach(item => {
        allCount += item.score ? Number(item.score) : 0;
      });
      let resultNum: number | string = allCount / tableData.value.length;
      if (
        resultNum.toString().split(".")[1] &&
        resultNum.toString().split(".")[1].length > 3
      ) {
        resultNum = resultNum.toFixed(3);
      }
      averageScore.value = resultNum;
    }
  } else {
    tableData.value = [];
  }
};

// 跳转到数据明细
const router = useRouter();
const toDetail = (row: any = {}) => {
  router.push({
    path: "/draw/children/worker/dataDetail",
    query: {
      mid: row.templateId,
      id: activityList.value[activeActivity.value].id,
      mname: row.templateName,
      name: activityList.value[activeActivity.value].name
    }
  });
  useAppStoreHook().toggleSideBar(false, "关闭");
};
</script>

<template>
  <div class="assessment-rank flex">
    <div class="search-section mr-4">
      <el-input
        v-model="searchKeyword"
        placeholder="考核活动名称"
        class="w-64"
        :suffix-icon="Search"
        clearable
        @keyup.enter="handleSearch"
      />
      <div class="search-section-list">
        <p
          v-for="(item, index) in activityList"
          :key="item.id"
          class="mt-4 cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap"
          :style="{ color: activeActivity === index ? '#0052d9' : '#333' }"
          @click="handleActiveActivity(item, index)"
        >
          {{ item.name }}
        </p>
      </div>
    </div>
    <el-card class="w-full">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-base font-medium">平均得分: </span>
          <span>{{ averageScore }}</span>
        </div>
      </template>

      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="index" label="排名" width="80" align="center" />
        <el-table-column prop="templateName" label="考核模板" min-width="200">
          <template #default="{ row }">
            <el-button type="primary" link @click="toDetail(row)">
              {{ row.templateName }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="科室" min-width="150" />
        <el-table-column prop="userName" label="员工" min-width="150">
          <template #default="{ row }">
            <el-button type="primary" link @click="toDetail(row)">
              {{ row.userName }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="score"
          label="实际得分"
          width="120"
          align="right"
        />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.assessment-rank {
  padding: 20px 0;
}

.search-section {
  flex-shrink: 0;
  width: 200px;

  .search-section-list {
    height: calc(100vh - 250px);
    margin-top: 20px;
    overflow: auto;
  }
}

:deep(.el-card__header) {
  padding: 15px 20px;
}
</style>