|
@@ -1,100 +1,120 @@
|
|
|
<template>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- class="mytTable"
|
|
|
+ <vxe-table
|
|
|
+ border
|
|
|
+ show-overflow
|
|
|
style="width: 100%"
|
|
|
- :span-method="arraySpanMethod"
|
|
|
+ height="400"
|
|
|
+ :data="tableData"
|
|
|
+ :merge-cells="mergeCells"
|
|
|
>
|
|
|
- <el-table-column
|
|
|
- type="index"
|
|
|
- label="排名"
|
|
|
- width="80"
|
|
|
- fixed
|
|
|
- header-row-style="background-color: #F5F7FA;"
|
|
|
- >
|
|
|
+ <vxe-column field="index" title="排名" width="80" fixed="left">
|
|
|
<template #default="scope">
|
|
|
<div
|
|
|
- v-if="scope.$index === 0"
|
|
|
- class="text-center text-sm font-extrabold text-[#000000]"
|
|
|
+ v-if="
|
|
|
+ scope._rowIndex == 0 &&
|
|
|
+ $route.name != 'workerDrak' &&
|
|
|
+ $route.name != 'workerRank'
|
|
|
+ "
|
|
|
+ class="text-center text-sm font-extrabold text-[#000000] pt-4"
|
|
|
>
|
|
|
- 平均分
|
|
|
+ 平均得分
|
|
|
</div>
|
|
|
- <div v-if="scope.$index > 3" class="diamond">
|
|
|
- {{ scope.$index + 1 }}
|
|
|
+ <div v-if="scope._rowIndex > 2" class="diamond">
|
|
|
+ {{ scope.row.ranking }}
|
|
|
</div>
|
|
|
- <div v-if="scope.$index > 0" class="text-center">
|
|
|
- <img :src="RANK_IMG[scope.$index - 1]" alt="" />
|
|
|
+ <div v-else class="text-center">
|
|
|
+ <img :src="RANK_IMG[scope.row.ranking - 1]" alt="" />
|
|
|
</div>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="deptName" :label="deptName" fixed width="150" />
|
|
|
- <el-table-column
|
|
|
- v-if="name"
|
|
|
- prop="assessmentObjectName"
|
|
|
- :label="name"
|
|
|
- fixed
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column
|
|
|
+ v-if="$route.name == 'workerDrak' || $route.name == 'workerRank'"
|
|
|
+ field="deptName"
|
|
|
+ :title="tabTitle"
|
|
|
+ fixed="left"
|
|
|
+ width="150"
|
|
|
+ />
|
|
|
+ <vxe-column
|
|
|
+ v-else
|
|
|
+ field="assessmentObjectName"
|
|
|
+ :title="deptName"
|
|
|
+ fixed="left"
|
|
|
+ width="150"
|
|
|
+ />
|
|
|
+ <vxe-column
|
|
|
+ v-if="$route.name == 'workerDrak' || $route.name == 'workerRank'"
|
|
|
+ field="assessmentObjectName"
|
|
|
+ fixed="left"
|
|
|
+ title="姓名"
|
|
|
width="100"
|
|
|
/>
|
|
|
- <div v-for="(item, index) in tableData.dimensionList" :key="index">
|
|
|
- <el-table-column :label="`${item.dimName}(${item.soreRate}%)`">
|
|
|
- <el-table-column
|
|
|
- v-for="(it, id) in item.quotaList"
|
|
|
- :key="id"
|
|
|
- :prop="it.quotaScore"
|
|
|
- :label="`${it.quotaName}(${it.soreRate}%)`"
|
|
|
- width="140"
|
|
|
- />
|
|
|
- </el-table-column>
|
|
|
- <el-table-column :prop="item.totalSore" label="总分`" />
|
|
|
+ <div v-for="(ita, itk) in tableData" :key="itk">
|
|
|
+ <!-- <vxe-column field="deptName" :title="deptName" width="150" /> -->
|
|
|
+ <div v-for="item in ita.dimensionList" :key="item.dimId">
|
|
|
+ <div v-for="it in item.quotaList" :key="it.quotaId">
|
|
|
+ <vxe-colgroup :title="`${item.dimName}(${item.soreRate}%)`">
|
|
|
+ <vxe-column
|
|
|
+ :field="it.quotaScore"
|
|
|
+ :title="`${it.quotaName}(${it.quotaWeight}%)`"
|
|
|
+ width="150"
|
|
|
+ />
|
|
|
+ </vxe-colgroup>
|
|
|
+ <vxe-column field="totalSore" title="总分" width="150" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <el-table-column prop="allScore" label="总得分" fixed width="150" />
|
|
|
- </el-table>
|
|
|
+ <vxe-column field="allScore" title="总得分" fixed="right" width="150" />
|
|
|
+ </vxe-table>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, reactive, ref } from "vue";
|
|
|
+import { computed, reactive, ref, onMounted } from "vue";
|
|
|
import rank1 from "@/assets/rank/rank1.png";
|
|
|
import rank2 from "@/assets/rank/rank2.png";
|
|
|
import rank3 from "@/assets/rank/rank3.png";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+const $route = useRoute();
|
|
|
const RANK_IMG = [rank1, rank2, rank3];
|
|
|
const deptName = ref("");
|
|
|
const name = ref("");
|
|
|
const tableData = ref();
|
|
|
-const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
- // console.log("row", row);
|
|
|
- // console.log("column", column);
|
|
|
- // console.log("rowIndex", rowIndex);
|
|
|
- // console.log("columnIndex", columnIndex);
|
|
|
- // return "background: #F5F5F5; color:#000000;";
|
|
|
- return "aaaa";
|
|
|
-};
|
|
|
-const averageData = averageSore => {
|
|
|
- if (tableData.value.length > 0) {
|
|
|
- tableData.value.unshift({
|
|
|
- dimensionList: [],
|
|
|
- allScore: averageSore
|
|
|
- });
|
|
|
+const tabTitle = ref("");
|
|
|
+const mergeCells = ref([
|
|
|
+ // 合并第一行前两列
|
|
|
+ { row: 0, col: 0, rowspan: 1, colspan: 2 },
|
|
|
+ { row: 2, col: 1, rowspan: 0, colspan: 0 }
|
|
|
+]);
|
|
|
+onMounted(() => {
|
|
|
+ cellTable();
|
|
|
+});
|
|
|
+const cellTable = () => {
|
|
|
+ if ($route.name == "workerDrak" || $route.name == "workerRank") {
|
|
|
+ mergeCells.value = [
|
|
|
+ { row: 0, col: 0, rowspan: 1, colspan: 3 },
|
|
|
+ { row: 2, col: 1, rowspan: 1, colspan: 3 }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ if ($route.name == "healthDrank" || $route.name == "healthRank") {
|
|
|
+ tabTitle.value = "医疗组";
|
|
|
+ } else {
|
|
|
+ tabTitle.value = "科室";
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
-const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
- // 合并第一行的“排名”、“科室”和“姓名”
|
|
|
- if (rowIndex === 0) {
|
|
|
- if (columnIndex === 0) {
|
|
|
- return [1, 3]; // “排名”合并三列
|
|
|
- } else if (columnIndex === 1) {
|
|
|
- return [0, 0]; // “科室”不显示
|
|
|
- } else if (columnIndex === 2) {
|
|
|
- return [0, 0]; // “姓名”不显示
|
|
|
+const averageData = averageSore => {
|
|
|
+ if ($route.name != "workerDrak" || $route.name != "workerRank") {
|
|
|
+ if (tableData.value.length > 0) {
|
|
|
+ tableData.value.unshift({
|
|
|
+ dimensionList: [],
|
|
|
+ allScore: averageSore
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- return [1, 1]; // 其他单元格正常显示
|
|
|
};
|
|
|
const init = (item, deptNames, names) => {
|
|
|
tableData.value = item;
|
|
|
- averageData(item.averageSore);
|
|
|
deptName.value = deptNames;
|
|
|
name.value = names;
|
|
|
+ averageData(item.averageSore);
|
|
|
console.log("tableData.value", tableData.value);
|
|
|
console.log("deptName.value", item);
|
|
|
};
|