kd-aiot-frontend/src/views/workforceManagement/schedule/components/ManagementTable.vue

<template>
  <div
    @mousedown="startSelecting"
    @mousemove="updateSelection"
    @mouseup="stopSelecting"
  >
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :datasource="tableData"
      @cell-click="cellClick"
      @row-click="rowClick"
      @header-click="headerClick"
      cache-key="systemRoleTable19"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-form class="ele-form-search">
          <el-row :gutter="15">
            <el-col :span="4">
              <el-form-item style="margin-bottom: 0">
                <el-input
                  clearable
                  :placeholder="type == 'person' ? '搜索人员' : '搜索班组'"
                  v-model.trim="searchKey"
                  @input="search"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item style="margin-bottom: 0">
                <el-date-picker
                  v-model="time"
                  type="month"
                  @change="timeChange"
                  value-format="yyyy-MM"
                  placeholder="选择月"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item class="btn-wrap" style="margin-bottom: 0">
                <el-button @click="save" type="primary">保存</el-button>
                <el-button @click="rest">重置</el-button>
                <el-button @click="anbp" type="primary">{{
                  type == 'person' ? '按班排' : '按人排'
                }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:item="{ row }">
        {{ row.item.name }}
      </template>
      <template v-slot:bcHeader="{ column }">
        <div v-html="showheaderName(column.label)"></div>
      </template>
      <template v-slot:bc="{ column, row, $index }">
        <div
          class="tabel-cell-item"
          :style="`background-color: ${showColor(el)};`"
          v-for="el in showName(row, column)"
          :key="el.id"
          ref="tabelItem"
        >
          {{ el.name }}
        </div>
      </template>
    </ele-pro-table>
    <div v-if="isSelecting" class="selection-box" :style="selectionStyle"></div>
  </div>
</template>
<script>
  import * as dayjs from 'dayjs';
  import { debounce } from 'throttle-debounce';
  export default {
    props: ['selectedClasses', 'classesColor'],
    data() {
      const columnsDefault = {
        person: {
          prop: 'item',
          label: '姓名',
          slot: 'item'
        },
        team: {
          prop: 'item',
          label: '班组',
          slot: 'item'
        }
      };
      return {
        isSelecting: false,
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        type: 'person', // team 班次 person 人员
        columnsDefault,
        tableData: [],
        //按人排数据
        personData: [],
        //按班排数据
        teamData: [],
        time: '',
        columns: [],
        searchKey: '',
        dict: {
          week: {
            0: '周末',
            1: '周一',
            2: '周二',
            3: '周三',
            4: '周四',
            5: '周五',
            6: '周六'
          }
        }
      };
    },
    computed: {
      selectionStyle() {
        return {
          position: 'absolute',
          left: `${Math.min(this.startX, this.endX)}px`,
          top: `${Math.min(this.startY, this.endY)}px`,
          width: `${Math.abs(this.endX - this.startX)}px`,
          height: `${Math.abs(this.endY - this.startY)}px`,
          border: '2px dashed black'
        };
      }
    },
    created() {
      this.search = debounce(500, this.search);
      this.time = dayjs(new Date()).format('YYYY-MM');
      this.initColumns();
    },
    methods: {
      startSelecting(event) {
        // return
        this.isSelecting = true;
        this.startX = event.clientX;
        this.startY = event.clientY;
        this.endX = this.startX;
        this.endY = this.startY;
        console.log(this.startX, this.startY, this.endX, this.endY);
      },
      updateSelection(event) {
        // return
        if (this.isSelecting) {
          this.endX = event.clientX;
          this.endY = event.clientY;
        }
      },
      stopSelecting() {
        // return
        this.isSelecting = false;
        // 在这里处理框选结果，例如计算被框选的元素
        this.selectedItems = this.calculateSelectedItems();
      },
      calculateSelectedItems() {
        return this.tableData.filter((item, index) => {
          console.log(item, 'item');
          console.log(
            this.$refs[
              (this.type == 'person' ? item.item?.userId : item.item?.teamId) +
                index
            ]
          );
          const rect =
            this.$refs[
              (this.type == 'person' ? item.item?.userId : item.item?.teamId) +
                index
            ].getBoundingClientRect();
          console.log(rect);
          return (
            rect.left < this.endX &&
            rect.right > this.startX &&
            rect.top < this.endY &&
            rect.bottom > this.startY
          );
        });
      },
      // 人员班次数据切换
      setTableData() {
        switch (this.type) {
          case 'person':
            this.tableData = this.personData;
            break;
          case 'team':
            this.tableData = this.teamData;
            break;
          default:
            break;
        }
      },
      // 初始化columns
      initColumns() {
        let Month = dayjs(this.time).month() + 1;
        let MonthNum = dayjs(this.time).daysInMonth();
        let columns = [];
        for (let index = 1; index <= MonthNum; index++) {
          let week = dayjs(`${this.time}-${index}`).day();
          columns.push({
            prop: `${this.time}-${this.setNUm(index)} 00:00:00`,
            label: `${Month}-${index}/${week}`,
            slot: 'bc',
            headerSlot: 'bcHeader',
            width: 60
          });
        }
        this.columns = [];
        switch (this.type) {
          case 'person':
            this.columns.push(this.columnsDefault.person);
            break;
          case 'team':
            this.columns.push(this.columnsDefault.team);
            break;
          default:
            break;
        }

        this.columns = [].concat(this.columns, columns);
      },
      // 设置数据
      setData(personData, teamData) {
        this.personData = personData;
        this.teamData = teamData;
        this.setTableData();
      },
      showName(row, column) {
        let list = row[column.property];
        if (list) {
          list.forEach((n) => {
            n.name = n.name.slice(0, 4);
            n['userId'] = row.item?.userId;
            n['teamId'] = row.item?.teamId;
          });
          return list;
        } else {
          return [];
        }
      },
      showheaderName(label) {
        let list = label.split('/');
        let week = this.dict.week[list[1]];
        return `${list[0]}</br>${week}`;
      },
      // 设置颜色
      showColor(item) {
        return this.classesColor[item.id];
      },
      // 单元格点击
      cellClick(row, column) {
        const selectedClasses = JSON.parse(
          JSON.stringify(this.selectedClasses)
        );
        if (column.property !== 'item' && selectedClasses.length > 0) {
          if (selectedClasses[0].id == 'clear') {
            this.$delete(row, column.property);
          } else {
            this.$set(row, column.property, selectedClasses);
          }
          // 按班排同步人员
          if (this.type == 'team') {
            this.SyncCellClick(row, column);
          }
        }
      },
      // 行点击
      rowClick(row, column) {
        const selectedClasses = JSON.parse(
          JSON.stringify(this.selectedClasses)
        );
        if (column.property == 'item' && selectedClasses.length > 0) {
          if (selectedClasses[0].id == 'clear') {
            this.columns.forEach((n) => {
              if (n.prop !== 'item') {
                this.$delete(row, n.prop);
              }
            });
          } else {
            this.columns.forEach((n) => {
              if (n.prop !== 'item') {
                this.$set(row, n.prop, selectedClasses);
              }
            });
          }
          // 按班排同步人员
          if (this.type == 'team') {
            this.SyncRowClick(row, column);
          }
        }
      },
      // 列点击
      headerClick(column) {
        const selectedClasses = JSON.parse(
          JSON.stringify(this.selectedClasses)
        );
        if (column.property !== 'item' && selectedClasses.length > 0) {
          if (selectedClasses[0].id == 'clear') {
            this.tableData.forEach((n) => {
              this.$delete(n, column.property);
            });
          } else {
            this.tableData.forEach((n) => {
              this.$set(n, column.property, selectedClasses);
            });
          }
          // 按班排同步人员
          if (this.type == 'team') {
            this.SyncHeaderClick(column);
          }
        }
      },
      // 按班排同步人员-单元格点击
      SyncCellClick(row, column) {
        const selectedClasses = JSON.parse(
          JSON.stringify(this.selectedClasses)
        );
        let Person = this.getid_Person(row.item.teamId);
        if (selectedClasses[0].id == 'clear') {
          Person.forEach((n) => {
            this.$delete(n, column.property);
          });
        } else {
          Person.forEach((n) => {
            this.$set(n, column.property, selectedClasses);
          });
        }
      },
      // 按班排同步人员-行点击
      SyncRowClick(row, column) {
        const selectedClasses = JSON.parse(
          JSON.stringify(this.selectedClasses)
        );
        let Person = this.getid_Person(row.item.teamId);
        if (selectedClasses[0].id == 'clear') {
          Person.forEach((n) => {
            this.columns.forEach((nl) => {
              if (nl.prop !== 'item') {
                this.$delete(n, nl.prop);
              }
            });
          });
        } else {
          Person.forEach((n) => {
            this.columns.forEach((nl) => {
              if (nl.prop !== 'item') {
                this.$set(n, nl.prop, selectedClasses);
              }
            });
          });
        }
      },
      // 按班排同步人员-列点击
      SyncHeaderClick(column) {
        const selectedClasses = JSON.parse(
          JSON.stringify(this.selectedClasses)
        );
        if (selectedClasses[0].id == 'clear') {
          this.personData.forEach((n) => {
            this.$delete(n, column.property);
          });
        } else {
          this.personData.forEach((n) => {
            this.$set(n, column.property, selectedClasses);
          });
        }
      },
      // 根据班组id查询人员
      getid_Person(id) {
        let list = this.personData.filter((n) => {
          return n.item.teamId == id;
        });
        return list;
      },
      // 保存
      save() {
        this.$emit('save');
      },
      // 重置
      rest() {
        this.$emit('rest');
      },
      // 按人/班排
      anbp() {
        this.type = this.type == 'person' ? 'team' : 'person';
        this.initColumns();
        this.setTableData();
      },
      // 切换按班排班
      changanbp() {
        this.type = 'team';
        this.initColumns();
        this.setTableData();
      },
      // 选择时间
      timeChange() {
        this.initColumns();
      },
      // 补零
      setNUm(num) {
        let length = 2;
        return (num / Math.pow(10, length)).toFixed(length).substr(2);
      },
      // 搜索
      search(val) {
        switch (this.type) {
          case 'person':
            if (val !== '') {
              setTimeout(() => {
                this.tableData = this.personData.filter((n) => {
                  return (
                    n.item.name.toLowerCase().indexOf(val.toLowerCase()) > -1
                  );
                });
              }, 200);
            } else {
              this.tableData = this.personData;
            }
            break;
          case 'team':
            if (val !== '') {
              setTimeout(() => {
                this.tableData = this.teamData.filter((n) => {
                  return (
                    n.item.name.toLowerCase().indexOf(val.toLowerCase()) > -1
                  );
                });
              }, 200);
            } else {
              this.tableData = this.teamData;
            }
            break;
          default:
            break;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  :deep(.el-table .el-table__cell) {
    cursor: pointer;
    height: 60px;
  }
  .tabel-cell-item {
    color: #fff;
    height: 60px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px !important;
  }
  :deep(.el-table td.el-table__cell) {
    padding: 0;
    div {
      padding: 0;
    }
  }
  .btn-wrap {
    text-align: right;
    padding-right: 20px;
  }
  :deep(.el-button--medium) {
    padding: 10px 20px !important;
  }
  .selection-box {
    position: absolute;
    border: 2px dashed black;
    pointer-events: none; /* 确保选择框不会干扰鼠标事件 */
  }
</style>