feat: 更新列表

2025-12-12 16:04:04 +08:00
parent b904aaba97
commit 0ec9ead6d3
2 changed files with 150 additions and 2 deletions
--- a/src/views/home/model/qingBaowbTable.vue
+++ b/src/views/home/model/qingBaowbTable.vue
@ -0,0 +1,143 @@
+<template>
+  <div class="qingbao-table-container">
+    <div class="tab-buttons">
+      <div class="tab-button" :class="{ active: activeTab === 'xxy' }" @click="switchTab('xxy')">
+        优秀信息员
+      </div>
+      <div class="tab-button" :class="{ active: activeTab === 'ypy' }" @click="switchTab('ypy')">
+        优秀研判的列表
+      </div>
+    </div>
+
+    <div class="table-wrapper">
+      <el-table :data="tableData" style="width: 100%" height="calc(100 - 1px)" :header-cell-style="{
+        background: 'rgba(2, 29, 75, 0.1)',
+        color: '#fff',
+        borderColor: '#0d4b8a'
+      }" :row-style="{
+          background: 'rgba(0, 29, 75, 0.3)',
+          color: '#fff',
+          borderColor: '#0d4b8a'
+        }" stripe>
+        <el-table-column prop="ssbm" label="部门名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="xm" label="姓名" min-width="80" show-overflow-tooltip />
+        <!-- 信息员积分 和 研判员积分 -->
+        <el-table-column :prop="scoreField" :label="scoreLabel" min-width="80" show-overflow-tooltip />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { qcckGet } from "@/api/qcckApi.js"
+
+const activeTab = ref('xxy') // 默认选中优秀信息员
+const tableData = ref([])
+const tableHeight = ref(300)
+
+// 根据当前标签页确定积分字段和标签
+const scoreField = computed(() => {
+  return activeTab.value === 'xxy' ? 'xxyjf' : 'ypyjf'
+})
+
+const scoreLabel = computed(() => {
+  return activeTab.value === 'xxy' ? '信息员积分' : '研判员积分'
+})
+
+
+// 切换标签页
+const switchTab = (tab) => {
+  activeTab.value = tab
+  fetchData()
+}
+
+// 获取表格数据
+const fetchData = () => {
+  const promes = {
+    startTime: '',
+    endTime: ''
+  }
+  const url = activeTab.value === 'xxy' ? '/mosty-gsxt/xxcj/mjjf/cjrList' : '/mosty-gsxt/xxcj/mjjf/ypyList'
+  qcckGet(promes, url).then(res => {
+    tableData.value = res || []
+  }).catch(error => {
+    console.error('获取表格数据失败:', error)
+    tableData.value = []
+  })
+}
+
+onMounted(() => {
+  // 设置表格高度
+  // tableHeight.value = calc(100% - 50px)
+  fetchData()
+})
+
+// 暴露方法给父组件，用于时间查询
+defineExpose({
+  fetchData
+})
+</script>
+
+<style lang="scss" scoped>
+.qingbao-table-container {
+  height: 100%;
+  padding: 10px;
+
+  .tab-buttons {
+    display: flex;
+    margin-bottom: 15px;
+    gap: 10px;
+
+    .tab-button {
+      padding: 0px 4px;
+      background: rgba(0, 77, 167, 0.6);
+      color: #fff;
+      border: 1px solid #0099ff;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-size: 14px;
+
+      &:hover {
+        background: rgba(0, 77, 167, 0.8);
+      }
+
+      &.active {
+        background: rgba(0, 244, 255, 0.8);
+        color: #000;
+        border-color: #00f4ff;
+      }
+    }
+  }
+
+  .table-wrapper {
+    height: calc(100% - 50px);
+
+    :deep(.el-table) {
+      background: transparent;
+
+      .el-table__header-wrapper {
+        background: transparent;
+      }
+
+      .el-table__body-wrapper {
+        background: transparent;
+      }
+
+      .el-table__row {
+        background: rgba(0, 29, 75, 0.3);
+
+        &:hover>td.el-table__cell {
+          background: rgba(0, 77, 167, 0.5) !important;
+        }
+      }
+
+      .el-table__cell {
+        border-bottom: 1px solid #0d4b8a;
+        padding: 8px 12px;
+      }
+    }
+  }
+}
+</style>