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 class="mod-home" id="customer-content">
        <el-table :data="list">
          <el-table-column
            label="姓名"
            prop="userName"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            label="待审批"
            prop="pendingApprovalNum"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            label="待处理工单"
            prop="pendingTaskNum"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            label="等待工单"
            prop="toBeginTaskNum"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            label="预警工单"
            prop="warningTaskNum"
            header-align="center"
            align="center"
          ></el-table-column>
        </el-table>
      </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>
export default {
  name: 'workboard',
  data () {
    return {
      chooseUserVisible: false,
      userOptions: [],
      oldSelectedUsers: [],
      selectedUsers: [],
      list: [],
      current: 1,
      size: 50,
      total: 0,
      loading: false   // 防止重复请求
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 选择用户
    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: 20
        })
      }).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()
    }
  }
}
</script>

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

.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;
}
</style>