feat: 科室表格

src/components/rankTable/index.vue

@@ -1,17 +1,27 @@
 <template>
-  <el-table :data="tableData" style="width: 100%">
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+    :span-method="arraySpanMethod"
+  >
     <el-table-column type="index" label="排名" width="80" fixed>
       <template #default="scope">
-        <div v-if="scope.$index > 2" class="diamond">
+        <div
+          v-if="scope.$index === 0"
+          class="text-center text-sm font-extrabold text-[#000000]"
+        >
+          平均分
+        </div>
+        <div v-if="scope.$index > 3" class="diamond">
           {{ scope.$index + 1 }}
         </div>
-        <div class="text-center">
-          <img :src="RANK_IMG[scope.$index]" alt="" />
+        <div v-if="scope.$index > 0" class="text-center">
+          <img :src="RANK_IMG[scope.$index - 1]" alt="" />
         </div>
       </template>
     </el-table-column>
     <el-table-column prop="date" label="科室" fixed width="150" />
-    <el-table-column prop="date" label="姓名" width="100" />
+    <el-table-column prop="date" label="姓名" fixed width="100" />
     <el-table-column label="数量(5%)">
       <el-table-column prop="state" label="出院人次(5%)" width="140" sortable />
       <el-table-column prop="city" label="手术人次(15%)" width="140" />
@@ -62,11 +72,12 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, reactive } from "vue";
 import rank1 from "@/assets/rank/rank1.png";
 import rank2 from "@/assets/rank/rank2.png";
 import rank3 from "@/assets/rank/rank3.png";
 const RANK_IMG = [rank1, rank2, rank3];
-const tableData = [
+const tableData = reactive([
   {
     date: "2016-05-03",
     name: "Tom",
@@ -99,7 +110,31 @@ const tableData = [
     address: "No. 189, Grove St, Los Angeles",
     zip: "CA 90036"
   }
-];
+]);
+const averageData = () => {
+  tableData.unshift({
+    date: "",
+    name: "",
+    state: "",
+    city: "",
+    address: "",
+    zip: ""
+  });
+};
+averageData();
+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]; // “姓名”不显示
+    }
+  }
+  return [1, 1]; // 其他单元格正常显示
+};
 </script>
 
 <style lang="scss" scoped>

src/views/draw/children/worker/workerRank.vue

@@ -2,8 +2,101 @@
 defineOptions({
   name: "workerRank"
 });
+import { ref } from "vue";
+const value = ref("");
+const options = [
+  {
+    value: "Option1",
+    label: "Option1"
+  },
+  {
+    value: "Option2",
+    label: "Option2"
+  },
+  {
+    value: "Option3",
+    label: "Option3"
+  },
+  {
+    value: "Option4",
+    label: "Option4"
+  },
+  {
+    value: "Option5",
+    label: "Option5"
+  }
+];
 </script>
 
 <template>
-  <div>员工排行</div>
+  <div class="w-full">
+    <div class="mb-2 flex gap-2 justify-between flex-wrap">
+      <div class="w-[100%] flex mt-2">
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核活动</div>
+          <el-select
+            v-model="value"
+            clearable
+            placeholder="请选择"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核模板</div>
+          <el-select
+            v-model="value"
+            clearable
+            placeholder="请选择"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">科室</div>
+          <el-select
+            v-model="value"
+            clearable
+            placeholder="请选择"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">员工</div>
+          <el-select
+            v-model="value"
+            clearable
+            placeholder="请选择"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>