X-web/src/views/modules/home/workboard.vue

<template>
  <div>
    <div>
      <div>
        <el-row>
          <el-col :span="12"
            ><el-button @click="handleUser">选择用户</el-button></el-col
          >
          <el-col :span="12">
            <!-- <span>当前时间：</span><span>2025-05-12</span> -->
          </el-col>
          <el-button @click="fullScreen" class="full-screen-btn"
            >全屏</el-button
          >
        </el-row>
      </div>
      <div id="customer-content" ref="tableContainer" class="scroll-container" :style="{ height: tableHeight + 'px' }">
        <!-- 固定表头（4列） -->
        <div class="header-row">
          <div class="header-cell">姓名</div>
          <div class="header-cell">待审批工单</div>
          <div class="header-cell">待处理工单</div>
          <div class="header-cell">等待工单</div>
          <div class="header-cell">预警工单</div>
        </div>
        <seamless-scroll
          :data="list"
          class="seamless-scroll"
          :class-option="{ step: 0.5 }"
        >
          <ul>
            <li v-for="(item, index) in list" :key="index" class="content-row">
              <div class="content-cell">{{ item.userName }}</div>
              <div class="content-cell">{{ item.pendingApprovalNum }}</div>
              <div class="content-cell">{{ item.pendingTaskNum }}</div>
              <div class="content-cell">{{ item.toBeginTaskNum }}</div>
              <div class="content-cell">{{ item.warningTaskNum }}</div>
            </li>
          </ul>
        </seamless-scroll>
      </div>
    </div>
    <!-- 选择用户弹框 -->
    <el-dialog
      title="选择用户"
      :visible.sync="chooseUserVisible"
      :close-on-click-modal="false"
    >
      <div class="dialog">
        <el-form>
          <el-form-item label="选择用户" prop="">
            <el-select
              v-model="selectedUsers"
              v-loadmore="loadMore"
              placeholder="请选择"
              multiple
              style="width: 100%"
            >
              <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer2">
          <el-button type="primary" @click="userSubmit()">提交</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SeamlessScroll from 'vue-seamless-scroll' // 引入组件
export default {
  components: { SeamlessScroll }, // 注册组件
  name: 'workboard',
  data () {
    return {
      tableHeight: 0, // 动态高度
      chooseUserVisible: false,
      userOptions: [],
      oldSelectedUsers: [],
      selectedUsers: [],
      list: [],
      current: 1,
      size: 50,
      total: 0,
      loading: false // 防止重复请求
    }
  },
  created () {
    this.getList()
  },
  mounted () {
    this.calcHeight()
    window.addEventListener('resize', this.calcHeight)

    this.startScroll()
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.calcHeight) // 避免内存泄漏
  },
  methods: {
    calcHeight () {
      this.$nextTick(() => {
        setTimeout(() => {
          const container = this.$refs.tableContainer
          const top = container.getBoundingClientRect().top
          this.tableHeight = window.innerHeight - top - 50 // 50px 为预留边距
        }, 300) // 预留资源加载时间
      })
    },
    // 选择用户
    handleUser () {
      this.getSelectedUsers()

      this.chooseUserVisible = true
      this.getUsers()
    },

    async getUsers () {
      this.$http({
        url: this.$http.adornUrl(`/user-service/user/queryWithSelectedItems`),
        method: 'get',
        params: this.$http.adornParams({
          current: this.current,
          size: this.size
        })
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.total = data.data.pageUsers.total
          let users = data.data.pageUsers.records
          if (users != null && users.length > 0) {
            users.map((t) => {
              this.userOptions.push({ label: t.name, value: t.userId })
            })
          }
        }
      })
    },
    // 滚动到底部时触发
    async loadMore () {
      if (this.loading || this.userOptions.length >= this.total) return

      this.loading = true
      this.current++
      await this.getUsers() // 请求下一页数据
      this.loading = false
    },
    // 提交用户
    userSubmit () {
      // let addUserIds = []
      // let delUserIds = []
      // // 计算新增用户

      // for (let id of this.selectedUsers) {
      //   if (this.oldSelectedUsers.indexOf(id) === -1) {
      //     addUserIds.push(id)
      //   }
      // }

      // // 计算删除用户
      // for (let id2 of this.oldSelectedUsers) {
      //   if (this.selectedUsers.indexOf(id2) === -1) {
      //     delUserIds.push(id2)
      //   }
      // }

      this.$http({
        url: this.$http.adornUrl(`/biz-service/workBoard/selected/user/save`),
        method: 'post',
        data: { addUserIds: this.selectedUsers }
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.$message({
            type: 'success',
            message: '提交成功!'
          })
          this.chooseUserVisible = false
          this.getList()
        }
      })
    },
    getList () {
      this.$http({
        url: this.$http.adornUrl(`/biz-service/workBoard/list`),
        method: 'get',
        params: this.$http.adornParams({
          current: 1,
          size: 500
        })
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.list = data.data.records
        }
      })
    },
    getSelectedUsers () {
      this.$http({
        url: this.$http.adornUrl(`/biz-service/workBoard/selected/user/list`),
        method: 'get',
        data: {}
      }).then(({ data }) => {
        if (data && data.code === '200') {
          this.selectedUsers = this.oldSelectedUsers = data.data
        }
      })
    },
    // 全屏显示
    fullScreen () {
      const element = document.getElementById('customer-content')
      element.requestFullscreen()
    },
    startScroll () {
      const scrollContainer = this.$el.querySelector('.seamless-scroll')
      let top = 0 // 初始位置
      setInterval(() => {
        top -= 1 // 每次减少1px，可以根据需要调整速度和方向
        scrollContainer.scrollTop = top
      }, 200)
      // 调整这个值来改变速度，数值越小速度越快
    }
  }
}
</script>

<style scoped>
.mod-home {
  /* line-height: 1.5; */
  height: 100%;
  position: relative;
}

.full-screen-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
  padding: 0 0;
  border-radius: 0;
}

.dialog {
  height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dialog-footer2 {
  display: flex;
  justify-content: end;
}

/* 容器设置 */
.scroll-container {
  /* height: 100%; */
  border: 1px solid #eee;
  overflow: hidden;
  background: white; /* 全屏背景 */
}

/* 表头样式（固定定位） */
.header-row {
  display: flex;
  background: #f5f7fa;
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-cell {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  font-size:30px;
}

/* 内容滚动区域 */
.content-scroll {
  height: calc(100% - 46px); /* 减去表头高度 */
  overflow: hidden;
}

/* 内容行与列 */
.content-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}
.content-cell {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 24px;
}
.content-row:hover {
  background: #f9f9f9; /* 悬停高亮 */
}

ul, ol {
  margin: 0;    /* 消除外部边距 */
  padding: 0;   /* 消除内部边距 */
  list-style: none; /* 可选：移除列表标记 */
}
ul li, ol li {
  padding-top: 0; /* 关键：消除首行上边距 */
}

</style>