|
@@ -0,0 +1,159 @@
|
|
|
+<script setup lang="ts">
|
|
|
+defineOptions({
|
|
|
+ name: "AssessmentRank"
|
|
|
+});
|
|
|
+
|
|
|
+import { ref, onMounted } from "vue";
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
+
|
|
|
+// 考核活动点击交互
|
|
|
+const activityList = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "考核活动1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "考核活动2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: "考核活动3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: "考核活动4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: "考核活动5"
|
|
|
+ }
|
|
|
+]);
|
|
|
+const activeActivity = ref(0);
|
|
|
+const handleActiveActivity = (index: number) => {
|
|
|
+ activeActivity.value = index;
|
|
|
+};
|
|
|
+
|
|
|
+interface AssessmentItem {
|
|
|
+ rank: number;
|
|
|
+ templateName: string;
|
|
|
+ department: string;
|
|
|
+ employee: string;
|
|
|
+ score: number;
|
|
|
+}
|
|
|
+
|
|
|
+const searchKeyword = ref("");
|
|
|
+const averageScore = ref(3.6);
|
|
|
+const tableData = ref<AssessmentItem[]>([
|
|
|
+ {
|
|
|
+ rank: 1,
|
|
|
+ templateName: "临床科室(内科)考核",
|
|
|
+ department: "呼吸内科",
|
|
|
+ employee: "李医生1",
|
|
|
+ score: 1.62
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rank: 2,
|
|
|
+ templateName: "临床科室(内科)考核",
|
|
|
+ department: "消化内科",
|
|
|
+ employee: "李医生2",
|
|
|
+ score: 2.62
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rank: 3,
|
|
|
+ templateName: "临床(床位不足103k)科室",
|
|
|
+ department: "风湿免疫科",
|
|
|
+ employee: "李医生3",
|
|
|
+ score: 3.62
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rank: 4,
|
|
|
+ templateName: "临床科室(内科)考核",
|
|
|
+ department: "内分泌科",
|
|
|
+ employee: "李医生4",
|
|
|
+ score: 4.62
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rank: 5,
|
|
|
+ templateName: "临床科室(内科)考核",
|
|
|
+ department: "心血管内科",
|
|
|
+ employee: "李医生5",
|
|
|
+ score: 5.62
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ // 实现搜索逻辑
|
|
|
+ console.log("Searching for:", searchKeyword.value);
|
|
|
+};
|
|
|
+</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"
|
|
|
+ @keyup.enter="handleSearch"
|
|
|
+ />
|
|
|
+ <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(index)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </p>
|
|
|
+ </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 prop="rank" label="排名" width="80" align="center" />
|
|
|
+ <el-table-column prop="templateName" label="考核模板" min-width="200" />
|
|
|
+ <el-table-column prop="department" label="科室" min-width="150" />
|
|
|
+ <el-table-column prop="employee" label="员工" min-width="150" />
|
|
|
+ <el-table-column
|
|
|
+ prop="score"
|
|
|
+ label="实际得分"
|
|
|
+ width="120"
|
|
|
+ align="right"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <span
|
|
|
+ :class="{
|
|
|
+ 'text-red-500': scope.row.score < averageScore,
|
|
|
+ 'text-green-500': scope.row.score >= averageScore
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ scope.row.score }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.assessment-rank {
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.search-section {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-card__header) {
|
|
|
+ padding: 15px 20px;
|
|
|
+}
|
|
|
+</style>
|