ag-grid-vue在排班组件中的使用

在很多医务系统中，会有医生护士排班的业务，比如下面这种：

 

 

 可是实现排班数据的上移，下移，并且能够通过右键菜单实现排班等操作；

直接上源码：

首先安装依赖：

npm install ag-grid-vue

npm install ag-grid-community

npm install vue-property-decorator

接下来组件封装：

目录结构如下：

 

 jhe-grid-table.vue内容如下：

<template>
  <div class="JheGridTable">
    <div @contextmenu.prevent="onOpenContextMenu">
      <ag-grid-vue
        style="width: 100%; height: 100%"
        class="ag-theme-balham"
        :defaultColDef="defaultColDef"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :enableColResize="true"
        :suppressCellFocus="false"
        :suppressMultiRangeSelection="false"
        :enableCellTextSelection="false"
        :enableRangeSelection="false"
        :rowMultiSelectWithClick="false"
        :suppressRowClickSelection="false"
        :floatingFilter="false"
        :suppressMenuHide="false"
        :suppressMovableColumns="true"
        :suppressDragLeaveHidesColumns="false"
        :suppressMovable="false"
        :context="ctx"
        :allowContextMenuWithControlKey="false"
        :headerHeight="headerHeight"
        :getRowHeight="getRowHeight"
        @grid-ready="onGridReady"
        @first-data-rendered="onFirstDataRendered"
        @rowDataChanged="onRowDataChanged"
        @cellClicked="onCellClicked"
        @sort-changed="onSortChanged"
        @cellMouseDown="onCellMouseDown"
        @mouseup.native="onCellMouseUp"
        @cellMouseOver="onCellMouseOver"
        @cellMouseOut="onCellMouseOut"
        @cellFocused="onCellFocused"
        @dragStarted="onDragStarted"
        @dragStopped="onDragStopped"
      ></ag-grid-vue>
    </div>

    <context-menu
      id="testingctx"
      ref="ctx"
      @ctx-open="onCtxOpened"
      @ctx-cancel="resetCtxMenu"
      @ctx-close="onCtxClosed"
    >
      <div class="ctx-menu-body" :style="ctxMenuBodyStyle">
        <div class="ctx-group" :style="{ width: ctxMenuBodyWidth }">
          <div
            class="ctx-item"
            :key="'ctxmi_' + index"
            v-for="(item, index) in ctxMenuItems"
            @click="onCtxMenuItemClick(item)"
            @mouseenter="onCtxMenuMouseEnter(item)"
            @mouseleave="onCtxMenuMouseLeave(item)"
          >
            <div>
              {{ item.title }}
            </div>
            <div v-if="item.children && item.children.length > 0">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div
          v-if="showChildCtxMenu"
          class="ctx-group"
          style="border-left: 1px solid #ccc; overflow: auto"
        >
          <div
            class="ctx-item"
            :key="'sub_' + index"
            v-for="(item, index) in subMenuItems"
            @click="onCtxMenuItemClick(item)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </context-menu>
  </div>
</template>
<script>
import { getOneWeekDate } from "../utils/tools";
import $ from "jquery";
import _ from "lodash";
import SsCellRender from "../components/ss-cell-render";
import SsHeaderRender from "../components/ss-header-render";
import SsRowHeaderRender from "../components/ss-row-header-render";
import contextMenu from "../components/ctx-menu";
//引入样式文件
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
//引入ag-grid-vue
import { AgGridVue } from "ag-grid-vue";
import { Message } from "element-ui";

export default {
  name: "JheGridTable",
  props: {
    startDate: {
      type: Date,
    },
    //列定义
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //rowData数据
    rowData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    headerHeight: {
      type: Number,
      default: 30,
    },
    ctxMenuItems: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    let self = this;
    return {
      gridCtrl: null,
      gridApi: null,
      columnApi: null,
      isDraging: false,
      selectedRanges: [],
      ctx: {
        isDragCopying: false,
      },
      ctxMenuBodyWidth: 0,
      ctxMenuBodyStyle: null,
      subMenuItems: [],
      showChildCtxMenu: false,
      mouseEnterCtxMenuItem: null,
      jheGridApi: {
        selectRow(rowId) {
          self.selectRow(rowId);
        },
        selectColumn(colId) {
          self.selectColumn(colId);
        },
        selectCells(range) {
          self.selectCells(range);
        },
        moveRowUp() {
          self.moveRowUp();
        },
        moveRowDown() {
          self.moveRowDown();
        },
        moveDaysUp() {
          self.moveDaysUp();
        },
        moveDaysDown() {
          self.moveDaysDown();
        },
        exchangeDays() {
          self.exchangeDays();
        },
        getCellData(rowId, colId) {
          return self.getCellData(rowId, colId);
        },
        setCellData(rowId, colId, value) {
          self.setCellData(rowId, colId, value);
        },
        getRowData(rowId) {
          return self.getRowData(rowId);
        },
        setRangeValue(range, data) {
          self.setRangeValue(range, data);
        },
      },
    };
  },
  computed: {
    defaultColDef() {
      return {
        cellStyle: {
          "text-align": "center",
        },
      };
    },
    columnDefs() {
      let oneWeekDate = getOneWeekDate(this.startDate);
      let colDefs = this.columns.map((c, index) => {
        let columnDef = _.cloneDeep(c);
        if (typeof columnDef.colId === "undefined") {
          columnDef.colId = index;
        }
        if (columnDef.selectable) {
          delete columnDef.selectable;
          columnDef.cellRenderer = "SsCellRender";
          columnDef.headerComponent = "SsHeaderRender";
          let date = oneWeekDate[columnDef.field];

          columnDef.headerComponentParams = {
            subtitle:
              date &&
              date.toLocaleDateString("cn", {
                month: "numeric",
                day: "numeric",
              }),
            onColumnClick: this.onSelectWholeColumn,
          };
        }
        return columnDef;
      });
      colDefs.unshift({
        headerName: "#",
        colId: "rowNum",
        valueGetter: "node.rowIndex",
        minWidth: 40,
        maxWidth: 40,
        pinned: "left",
        cellRenderer: "SsRowHeaderRender",
        cellStyle: {
          "text-align": "center",
          "background-color": "rgb(245, 247, 247)",
          "border-right": "1px solid #d9dcde",
        },
      });
      return colDefs;
    },
  },
  watch: {
    "ctx.isDragCopying": {
      handler(newVal, oldVal) {
        if (this.$el) {
          if (newVal) {
            this.$el.classList.add("drag-copying");
          } else {
            this.$el.classList.remove("drag-copying");
          }
        }
      },
    },
    columnDefs: {
      handler(newV) {
        //列定义改变后，表格需要重新渲染
        this.$nextTick(() => {
          this.gridApi.setColumnDefs(newV);
          this.gridApi.sizeColumnsToFit();
        });
      },
      deep: true,
    },
  },
  created() {
    this.iniGrid();
  },
  methods: {
    iniGrid() {
      this.ctxMenuBodyWidth = 160;
      this.ctxMenuBodyStyle = {
        width: this.ctxMenuBodyWidth + "px",
      };
    },
    getRowHeight(params) {
      return 35;
    },
    onGridReady(params) {
      this.gridCtrl = params;
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      this.gridApi.sizeColumnsToFit();
      this.$emit("init", this.jheGridApi);
    },
    onFirstDataRendered(params) {
      this.$emit("loaded", params);
    },
    onRowDataChanged(event) {
      this.$emit("changed", event);
    },
    //单元格点击事件
    onCellClicked(event) {
      let field = event.column.colDef.field;
      let cellRendererName = event.column.colDef.cellRenderer;
      let position = { rowId: event.node.id, colId: event.column.colId };
      if (cellRendererName === "SsCellRender") {
        this.gridCtrl.api.deselectAll();
        this.$emit("cellClicked", position, event.data[field]);
      }

      // const colIndex = this._getColumnIndex(event.column.colId);
      // if (colIndex == 1) {
      //   //行点击
      //   this._selectRow(event.node.id);
      // }
    },
    onSortChanged(params) {
      let { api } = params;
      api.refreshCells({
        columns: [this.columnDefs[0].colId],
      });
    },

    onCellMouseDown(event) {
      if (event.event.button != 0) {
        // 不是鼠标左键
        return;
      }

      this.isDraging = true;
      console.log("onCellMouseDown", arguments);

      if (!event.event.ctrlKey) {
        this.selectedRanges = [];
        this._clearSelectedCells();
      }

      this._clearDropCopyHolder();

      const start = this._getCellPos(event);
      this.selectedRanges.push([start]);
      this._showDropCopyHolder(start.rowId, start.colId);
    },
    onCellMouseUp(event) {
      this.isDraging = false;

      if (event.button != 0) {
        // 不是鼠标左键
        return;
      }

      console.log("onCellMouseUp", arguments, this.gridApi);
      const end = this._getCellPos(event.target);
      if (end == null) {
        // 不是单元格
        return;
      }

      const range = this.selectedRanges.pop();
      if (!range) {
        return;
      }
      range[1] = end;

      this.selectedRanges.push(range);
      this._selectRange(range);
      this.gridApi.clearFocusedCell();

      if (this.ctx.isDragCopying) {
        const data = this._getCellData(range[0].rowId, range[0].colId);
        this._setRangValue(range, data);
        console.log(
          "onCellMouseUp",
          this.rowData,
          this._getRowData(range[0].rowId)
        );
        // this.gridApi.refreshCells();
      }

      this.ctx.isDragCopying = false;
    },
    onCellMouseOver(event) {
      if (this.isDraging) {
        console.log("cellMouseOver", arguments);
        const end = this._getCellPos(event);
        const range = this.selectedRanges.pop();
        range[1] = end;
        this.selectedRanges.push(range);

        this._selectAllRanges(this.selectedRanges);
      }
    },
    onCellMouseOut() {
      if (this.isDraging) console.log("onCellMouseOut", arguments);
    },
    onCellFocused() {
      console.log("onCellFocused", arguments);
      // setTimeout(()=>{
      // this.gridApi.clearFocusedCell();
      // },1000);
    },
    onDragStarted() {
      console.log("onDragStarted", arguments);
    },
    onDragStopped() {
      console.log("onDragStopped", arguments);
    },

    _swapRanges(range1, range2) {
      if (range1 == null || range2 == null) {
        console.error("只能对两个尺寸相等的区域进行对换", arguments);
        return null;
      }

      const fX1 = Math.min(range1[0].colIndex, range1[1].colIndex) || 0;
      const fY1 = Math.min(range1[0].rowIndex, range1[1].rowIndex) || 0;
      const fX2 = Math.max(range1[0].colIndex, range1[1].colIndex) || 0;
      const fY2 = Math.max(range1[0].rowIndex, range1[1].rowIndex) || 0;

      const sX1 = Math.min(range2[0].colIndex, range2[1].colIndex) || 0;
      const sY1 = Math.min(range2[0].rowIndex, range2[1].rowIndex) || 0;
      const sX2 = Math.max(range2[0].colIndex, range2[1].colIndex) || 0;
      const sY2 = Math.max(range2[0].rowIndex, range2[1].rowIndex) || 0;

      if (fX2 - fX1 != sX2 - sX1 || fY2 - fY1 != sY2 - sY1) {
        console.error("只能对两个尺寸相等的区域进行对换", arguments);
        return null;
      }

      let rowIdList = [];
      let changedData = [];
      const selectable = this._getColumns()
        .filter((c) => c.colDef.cellRenderer === "SsCellRender")
        .map((c) => c.colId);

      for (let i = 0; i + fY1 <= fY2; i++) {
        const fRowId = this._getRowId(i + fY1);
        const sRowId = this._getRowId(i + sY1);

        for (let j = 0; j + fX1 <= fX2; j++) {
          const fColId = this._getColId(j + fX1);
          const sColId = this._getColId(j + sX1);
          if (selectable.includes(fColId) && selectable.includes(sColId)) {
            const fData = this._getCellData(fRowId, fColId);
            const sData = this._getCellData(sRowId, sColId);
            this._setCellData(fRowId, fColId, sData);
            this._setCellData(sRowId, sColId, fData);
            rowIdList.push(fRowId);
            rowIdList.push(sRowId);
          }
        }
      }
      let noRepeatRowIdList = Array.from(new Set(rowIdList));
      noRepeatRowIdList.forEach((rowId) => {
        changedData.push(this._getRowData(rowId));
      });
      this.$emit("changed", changedData);
    },
    /**
     * 修改一个区域的数据
     */
    _setRangValue(range, data) {
      const selectable = this._getColumns()
        .filter((c) => c.colDef.cellRenderer === "SsCellRender")
        .map((c) => c.colId);
      const x1 = Math.min(range[0].colIndex, range[1].colIndex) || 0;
      const y1 = Math.min(range[0].rowIndex, range[1].rowIndex) || 0;
      const x2 = Math.max(range[0].colIndex, range[1].colIndex) || 0;
      const y2 = Math.max(range[0].rowIndex, range[1].rowIndex) || 0;

      let rowIdList = [];
      let changedData = [];
      this.$el.querySelectorAll("[row-index]").forEach((row) => {
        const rowIndex = parseInt(row.getAttribute("row-index"));
        const rowId = row.getAttribute("row-id");

        if (rowIndex < y1 || rowIndex > y2) {
        } else {
          row.querySelectorAll("[aria-colindex]").forEach((col) => {
            const colIndex = parseInt(col.getAttribute("aria-colindex"));
            const colId = col.getAttribute("col-id");

            if (
              colIndex >= x1 &&
              colIndex <= x2 &&
              selectable.includes(colId)
            ) {
              this._setCellData(rowId, colId, _.cloneDeep(data));
              rowIdList.push(rowId);
            }
          });
        }
      });
      let noRepeatRowIdList = Array.from(new Set(rowIdList));
      noRepeatRowIdList.forEach((rowId) => {
        changedData.push(this._getRowData(rowId));
      });
      this.$emit("changed", changedData);
    },
    _showDropCopyHolder(rowId, colId) {
      const params1 = {
        rowNodes: [this._getRowNodeByID(rowId)],
        columns: [colId],
      };
      const instances1 = this.gridApi.getCellRendererInstances(params1);
      instances1.forEach((instance) => {
        instance.isShowDropCopyHolder = true;
      });
    },
    _clearDropCopyHolder() {
      const instances = this.gridApi.getCellRendererInstances();
      instances.forEach((instance) => {
        instance.isShowDropCopyHolder = false;
      });
    },
    _clearSelectedCells(range) {
      if (!range) {
        this.$el
          .querySelectorAll(".ag-center-cols-container [row-index]")
          .forEach((row) => {
            row.querySelectorAll("[aria-colindex]").forEach((col) => {
              col.classList.remove(
                "ag-cell-range-selected",
                "ag-cell-range-selected-1",
                "ag-cell-range-top",
                "ag-cell-range-bottom",
                "ag-cell-range-left",
                "ag-cell-range-right"
              );
            });
          });
        return;
      }

      const x1 = Math.min(range[0].colIndex, range[1].colIndex) || 0;
      const y1 = Math.min(range[0].rowIndex, range[1].rowIndex) || 0;
      const x2 = Math.max(range[0].colIndex, range[1].colIndex) || 0;
      const y2 = Math.max(range[0].rowIndex, range[1].rowIndex) || 0;

      const selectable = this._getColumns()
        .filter((c) => c.colDef.cellRenderer === "SsCellRender")
        .map((c) => c.colId);
      let isStartPOS = (r, c) => {
        return range[0].rowId == r && range[0].colId == c;
      };

      for (let i = 0; i + y1 <= y2; i++) {
        const rowIndex = i + y1;
        const rowId = this._getRowId(rowIndex);
        const row = this.$el.querySelector(
          `.ag-center-cols-container [row-index="${rowIndex}"]`
        );
        for (let j = 0; j + x1 <= x2; j++) {
          const colIndex = j + x1;
          const colId = this._getColId(colIndex);
          if (selectable.includes(colId)) {
            const col = row.querySelector(`[aria-colindex="${colIndex}"]`);
            col.classList.remove(
              "ag-cell-range-selected",
              "ag-cell-range-selected-1",
              "ag-cell-range-top",
              "ag-cell-range-bottom",
              "ag-cell-range-left",
              "ag-cell-range-right"
            );
          }
        }
      }
    },
    /**
     * 选中一个区域
     */
    _selectRange(range) {
      const x1 = Math.min(range[0].colIndex, range[1].colIndex) || 0;
      const y1 = Math.min(range[0].rowIndex, range[1].rowIndex) || 0;
      const x2 = Math.max(range[0].colIndex, range[1].colIndex) || 0;
      const y2 = Math.max(range[0].rowIndex, range[1].rowIndex) || 0;
      const selectable = this._getColumns()
        .filter((c) => c.colDef.cellRenderer === "SsCellRender")
        .map((c) => c.colId);
      let isStartPOS = (r, c) => {
        return range[0].rowId == r && range[0].colId == c;
      };

      for (let i = 0; i + y1 <= y2; i++) {
        const rowIndex = i + y1;
        const rowId = this._getRowId(rowIndex);
        const row = this.$el.querySelector(
          `.ag-center-cols-container [row-index="${rowIndex}"]`
        );
        for (let j = 0; j + x1 <= x2; j++) {
          const colIndex = j + x1;
          const colId = this._getColId(colIndex);
          if (selectable.includes(colId)) {
            const col = row.querySelector(`[aria-colindex="${colIndex}"]`);
            //排除掉分组行
            if (col) {
              if (rowIndex == y1) {
                col.classList.add("ag-cell-range-top");
              }

              if (rowIndex == y2) {
                col.classList.add("ag-cell-range-bottom");
              }

              if (colIndex == x1) {
                col.classList.add("ag-cell-range-left");
              }

              if (colIndex == x2) {
                col.classList.add("ag-cell-range-right");
              }

              col.classList.add(
                "ag-cell-range-selected",
                "ag-cell-range-selected-1"
              );
            }
          }
        }
      }

      // this.$el.querySelectorAll("[row-index]").forEach((row) => {
      //   const rowIndex = parseInt(row.getAttribute("row-index"));
      //   const rowId = row.getAttribute("row-id");
      //   selecting = {};

      //   if (rowIndex < y1 || rowIndex > y2) {
      //     row.querySelectorAll("[aria-colindex]").forEach((col) => {
      //       const colId = col.getAttribute("col-id");
      //       col.classList.remove(
      //         "ag-cell-range-selected",
      //         "ag-cell-range-selected-1",
      //         "ag-cell-range-top",
      //         "ag-cell-range-bottom",
      //         "ag-cell-range-left",
      //         "ag-cell-range-right"
      //       );

      //       const params1 = {
      //         rowNodes: [this._getRowNodeByID(rowId)],
      //         columns: [colId],
      //       };
      //       const instances1 = this.gridApi.getCellRendererInstances(params1);
      //       instances1.forEach((instance) => {
      //         instance.isShowDropCopyHolder = false;
      //       });
      //     });
      //   } else {
      //     row.querySelectorAll("[aria-colindex]").forEach((col) => {
      //       const colIndex = parseInt(col.getAttribute("aria-colindex"));
      //       const colId = col.getAttribute("col-id");
      //       col.classList.remove(
      //         "ag-cell-range-selected",
      //         "ag-cell-range-selected-1",
      //         "ag-cell-range-top",
      //         "ag-cell-range-bottom",
      //         "ag-cell-range-left",
      //         "ag-cell-range-right"
      //       );
      //       if (
      //         colIndex >= x1 &&
      //         colIndex <= x2 &&
      //         selectable.includes(colId)
      //       ) {
      //         const params1 = {
      //           rowNodes: [this._getRowNodeByID(rowId)],
      //           columns: [colId],
      //         };
      //         const instances1 = this.gridApi.getCellRendererInstances(params1);
      //         instances1.forEach((instance) => {
      //           instance.isShowDropCopyHolder = isStartPOS(rowId, colId);
      //         });

      //         if (rowIndex == y1) {
      //           col.classList.add("ag-cell-range-top");
      //         }

      //         if (rowIndex == y2) {
      //           col.classList.add("ag-cell-range-bottom");
      //         }

      //         if (colIndex == x1) {
      //           col.classList.add("ag-cell-range-left");
      //         }

      //         if (colIndex == x2) {
      //           col.classList.add("ag-cell-range-right");
      //         }

      //         col.classList.add(
      //           "ag-cell-range-selected",
      //           "ag-cell-range-selected-1"
      //         );
      //       } else {
      //         const params1 = {
      //           rowNodes: [this._getRowNodeByID(rowId)],
      //           columns: [colId],
      //         };
      //         const instances1 = this.gridApi.getCellRendererInstances(params1);
      //         instances1.forEach((instance) => {
      //           instance.isShowDropCopyHolder = false;
      //         });
      //       }
      //     });
      //   }
      // });

      this.gridApi.refreshCells();
    },
    _selectAllRanges(ranges) {
      this._clearSelectedCells();
      // this._clearDropCopyHolder();
      ranges.forEach((range) => {
        this._selectRange(range);
      });
    },
    _selectCol(colId) {
      this.gridCtrl.api.deselectAll();
      const colIndex = this._getColumnIndex(colId);
      const firstRowId = this._getRowData("0").isRowGroup ? "1" : "0";
      const firstRowIndex = this._getRowIndex(firstRowId);
      const lastRowId = this.rowData.length - 1 + "";
      const lastRowIndex = this._getRowIndex(lastRowId);

      const range = [
        { colId, colIndex, rowId: firstRowId, rowIndex: firstRowIndex },
        { colId, colIndex, rowId: lastRowId, rowIndex: lastRowIndex },
      ];

      this._selectRange(range);
    },
    _selectRow(rowId) {
      const columns = this._getColumns();
      const rowIndex = this._getRowIndex(rowId);
      const firstColId = columns[0].colId;
      const firstColIndex = 1;
      const lastColId = columns[columns.length - 1].colId;
      const lastColIndex = columns.length;

      const range = [
        { rowId, rowIndex, colId: firstColId, colIndex: firstColIndex },
        { rowId, rowIndex, colId: lastColId, colIndex: lastColIndex },
      ];

      this._selectRange(range);
    },
    /**
     * 获取一个元素的位置
     * rowIndex，colIndex，rowId，colId
     */
    _getCellPos(element) {
      if (!element) {
        return null;
      }

      if (element instanceof HTMLElement) {
        let $agCell = $(element).is(".ag-cell")
          ? $(element)
          : $(element).closest(".ag-cell");

        if (!$agCell.length) {
          return null;
        }

        let $agRow = $agCell.closest(".ag-row");
        return {
          rowIndex: parseInt($agRow.attr("row-index")),
          rowId: $agRow.attr("row-id"),
          colIndex: $agCell.attr("aria-colindex"),
          colId: $agCell.attr("col-id"),
        };
      } else {
        return {
          rowIndex: element.rowIndex,
          rowId: element.node.id,
          colIndex: this._getColumnIndex(element.column.colId),
          colId: element.column.colId,
        };
      }
    },
    /**
     * 获取Row节点
     */
    _getRowNodeByID(id) {
      return this.gridApi.getRowNode(id);
    },
    /**
     * 获取Row数据
     */
    _getRowData(rowId) {
      return this._getRowNodeByID(rowId).data;
    },
    /**
     * 获取Cell数据
     */
    _getCellData(rowId, colId) {
      const data = this._getRowData(rowId);
      let field = this.columnDefs.find(
        (colDef) => colId === colDef.colId
      ).field;
      const shifts = data[field].shifts;
      return shifts;
    },
    /**
     * 设置Row数据
     */
    _setRowData(rowId, data) {
      this._getRowNodeByID(rowId).setData(data);
    },
    /**
     * 设置Cell数据
     */
    _setCellData(rowId, colId, value) {
      const data = this._getRowData(rowId);
      let field = this.columnDefs.find(
        (colDef) => colId === colDef.colId
      ).field;

      data[field].shifts = value;
      this._setRowData(rowId, data);
    },
    /**
     * 获取所有列定义
     */
    _getColumns() {
      return this.columnApi.getColumns() || [];
    },
    /**
     * 获取colIndex
     */
    _getColumnIndex(colId) {
      return this._getColumns().findIndex((c) => c.colId == colId) + 1;
    },
    _getRowIndex(rowId) {
      const row = this.gridApi.getModel().getRowNode(rowId);
      return row && row.rowIndex;
    },
    _getColId(colIndex) {
      const col = this._getColumns()[colIndex - 1];
      return col && col.colId;
    },
    _getRowId(rowIndex) {
      const row = this.$el.querySelector(`[row-index="${rowIndex}"]`);
      return row && row.getAttribute("row-id");
    },

    /**
     * 当点击列头时全选一整列
     * @param {*} event 点击事件对象
     * @param {*} params column 控制器
     */
    onSelectWholeColumn(event, params) {
      let { column } = params;
      this._selectCol(column.colId);
    },

    /**
     * 响应 contextmenu 事件
     * @param {*} event contextmenu 事件
     */
    onOpenContextMenu(event) {
      console.log("this.ctxMenuItems", this.ctxMenuItems);
      this.$refs.ctx.close();
      let row = this.getGridRow(event.target);
      let column = this.getGridColumn(event.target);
      if (!row || !column) {
        return;
      }
      let rowIndex = row.rowIndex;
      let colIndex = this._getColumnIndex(column.colId);

      if (row.data.isRowGroup || this.selectedRanges.length === 0) {
        return;
      } else {
        let range = this.selectedRanges[0];
        if (!range[0] || !range[1]) {
          return;
        }
        const x1 = Math.min(range[0].colIndex, range[1].colIndex) || 0;
        const y1 = Math.min(range[0].rowIndex, range[1].rowIndex) || 0;
        const x2 = Math.max(range[0].colIndex, range[1].colIndex) || 0;
        const y2 = Math.max(range[0].rowIndex, range[1].rowIndex) || 0;
        if (
          rowIndex >= y1 &&
          rowIndex <= y2 &&
          colIndex >= x1 &&
          colIndex <= x2
        ) {
          //可编辑区域显示右键菜单并且event.target必须在selecteRange选中区域内
          if (this.ctxMenuItems.length > 0) {
            this.$nextTick(() => {
              this.$refs.ctx.open(this.$event, this.ctxMenuItems, this.$el);
            });
          }
        }
      }
    },
    /**
     * 获取当前单元格所在的行
     * @param {*} el 单元格
     */
    getGridRow(el) {
      let agRow = el.closest(".ag-row") || el;
      if (!agRow.classList.contains("ag-row")) {
        return null;
      }
      let rowId = agRow.attributes["row-id"].value;
      let row = this.gridCtrl.api.getRowNode(+rowId);
      return row;
    },
    /**
     * 获取当前单元格所在的列
     * @param {*} el 单元格
     */
    getGridColumn(el) {
      let agCell = el.closest(".ag-cell") || el;
      if (!agCell.classList.contains("ag-cell")) {
        return null;
      }
      let colId = agCell.attributes["col-id"].value;
      let column = this.gridCtrl.columnApi.getColumn(colId);
      return column;
    },

    /**
     * contextmenu 打开后事件
     * @param {*} ctxMenu
     */
    onCtxOpened(ctxMenu) {
      this.resetCtxMenu();
    },
    /**
     * contextmenu 关闭后事件
     * @param {*} ctxMenu
     */
    onCtxClosed(ctxMenu) {
      // console.log("close");
    },
    /**
     * 重置 contextmenu
     */
    resetCtxMenu() {
      this.selectedCtxMenu = null;
      this.subMenuItems = [];
      this.showChildCtxMenu = false;
      this.ctxMenuBodyStyle.width = this.ctxMenuBodyWidth + "px";
    },
    /**
     * 点击菜单项操作
     */
    onCtxMenuItemClick(menuItem) {
      console.log("onCtxMenuItemClick", menuItem);
      this.selectedCtxMenu = menuItem;
      this.$emit("command", menuItem, this.selectedRanges);
    },
    /**
     * 鼠标停留菜单项，需显示二级菜单
     * @param {*} item 当前菜单项
     */
    onCtxMenuMouseEnter(item) {
      if (this.mouseEnterCtxMenuItem) {
        clearTimeout(this.mouseEnterCtxMenuItem);
        this.mouseEnterCtxMenuItem = null;
      }
      this.mouseEnterCtxMenuItem = setTimeout(() => {
        this.showChildCtxMenu = !!(item.children && item.children.length);
        if (this.showChildCtxMenu) {
          this.selectedCtxMenu = item;
          this.subMenuItems = item.children;
          this.ctxMenuBodyStyle.width = this.ctxMenuBodyWidth * 2 + "px";
        } else {
          this.resetCtxMenu();
        }
        this.mouseEnterCtxMenuItem = null;
      }, 500);
    },
    onCtxMenuMouseLeave(item) {},

    //提供以下几种api
    //选中一行
    selectRow(rowId) {
      console.log("selectRow", arguments);
      this._getRowNodeByID(rowId).setSelected(true, true);
    },
    //选中一列
    selectColumn(colId) {
      console.log("selectColumn", arguments);
      this._selectCol(colId);
    },
    //选中单元格
    selectCells(range) {
      console.log("selectCells", arguments);
      this._selectRange(range);
    },
    //行上移
    moveRowUp() {
      console.log("moveRowUp", arguments);
      let row = this.gridCtrl.api.getSelectedNodes();
      if (!row || !row.length) {
        Message.error("请选择一条数据");
        return;
      }
      row = row[0];
      if (row.data.isRowGroup) {
        return;
      }
      if (row.rowIndex === 0) {
        Message.error("已是最顶层");
        return;
      } else {
        let currentRowData = this._getRowData(row.id);
        let targetRowData = this._getRowData(+row.id - 1);
        if (targetRowData.isRowGroup) {
          Message.error("已是组内最顶层");
        } else {
          this._setRowData(+row.id - 1, currentRowData);
          this._setRowData(row.id, targetRowData);
          this._getRowNodeByID(+row.id - 1).setSelected(true, true);
          this.$emit("changed", [currentRowData, targetRowData]);
        }
      }
    },
    //行下移
    moveRowDown() {
      console.log("moveRowDown", arguments);
      let row = this.gridCtrl.api.getSelectedNodes();
      if (!row || !row.length) {
        Message.error("请选择一条数据");
        return;
      }
      row = row[0];
      if (row.data.isRowGroup) {
        return;
      }
      if (row.rowIndex === this.rowData.length - 1) {
        Message.error("已是最底层");
        return;
      } else {
        let currentRowData = this._getRowData(row.id);
        let targetRowData = this._getRowData(+row.id + 1);
        if (targetRowData.isRowGroup) {
          Message.error("已是组内最底层");
        } else {
          this._setRowData(+row.id + 1, currentRowData);
          this._setRowData(row.id, targetRowData);
          this._getRowNodeByID(+row.id + 1).setSelected(true, true);
          this.$emit("changed", [targetRowData, currentRowData]);
        }
      }
    },
    // 排班数据上移
    moveDaysUp() {
      console.log("moveDaysUp", arguments);
      let row = this.gridCtrl.api.getSelectedNodes();
      if (!row || !row.length) {
        Message.error("请选择一条数据");
        return;
      }
      row = row[0];
      if (row.data.isRowGroup) {
        return;
      }
      if (row.rowIndex === 0) {
        Message.error("已是最顶层");
        return;
      } else {
        let currentRowData = this._getRowData(row.id);
        let targetRowId = +row.id - 1;
        let targetRowData = this._getRowData(targetRowId);
        //分组行为第一行
        if (targetRowData.isRowGroup) {
          let targetIndex = this.rowData.findIndex((d) => {
            return d.groupNO === targetRowData.groupNO;
          });
          if (targetIndex === 0) {
            return;
          } else {
            targetRowId = +row.id - 2;
            targetRowData = this._getRowData(targetRowId);
          }
        }
        const fields = [
          "monday",
          "tuesday",
          "wednesday",
          "thursday",
          "friday",
          "saturday",
          "sunday",
        ];
        fields.forEach((field) => {
          let value = currentRowData[field];
          currentRowData[field] = targetRowData[field];
          targetRowData[field] = value;
        });
        this._setRowData(targetRowId, targetRowData);
        this._setRowData(row.id, currentRowData);
        this._getRowNodeByID(targetRowId).setSelected(true, true);
        this.$emit("changed", [targetRowData, currentRowData]);
      }
    },
    // 排班数据下移
    moveDaysDown() {
      console.log("moveRowDown", arguments);
      let row = this.gridCtrl.api.getSelectedNodes();
      if (!row || !row.length) {
        Message.error("请选择一条数据");
        return;
      }
      row = row[0];
      if (row.data.isRowGroup) {
        return;
      }
      if (row.rowIndex === this.rowData.length - 1) {
        Message.error("已是最底层");
        return;
      } else {
        let currentRowData = this._getRowData(row.id);
        let targetRowId = +row.id + 1;
        let targetRowData = this._getRowData(targetRowId);
        if (targetRowData.isRowGroup) {
          targetRowId = +row.id + 2;
          targetRowData = this._getRowData(targetRowId);
        }

        const fields = [
          "monday",
          "tuesday",
          "wednesday",
          "thursday",
          "friday",
          "saturday",
          "sunday",
        ];
        fields.forEach((field) => {
          let value = currentRowData[field];
          currentRowData[field] = targetRowData[field];
          targetRowData[field] = value;
        });
        this._setRowData(targetRowId, targetRowData);
        this._setRowData(row.id, currentRowData);
        this._getRowNodeByID(targetRowId).setSelected(true, true);
        this.$emit("changed", [currentRowData, targetRowData]);
      }
    },
    //交换两行排班数据
    exchangeDays() {
      console.log("exchangeDays", arguments);
      if (this.selectedRanges.length === 2) {
        this._swapRanges(this.selectedRanges[0], this.selectedRanges[1]);
      } else {
        return "必须选中两个相同大小的区域，且不能重叠。";
      }
    },
    // 获取单元格Cell数据
    getCellData(rowId, colId) {
      return this._getCellData(rowId, colId);
    },
    //设置单元格Cell数据
    setCellData(rowId, colId, value) {
      this._setCellData(rowId, colId, value);
    },
    //获取行Row数据
    getRowData(rowId) {
      return this._getRowData(rowId);
    },
    //设置区域为某个值
    setRangeValue(range, data) {
      this._setRangValue(range, data);
    },
  },
  components: {
    AgGridVue,
    SsCellRender,
    SsHeaderRender,
    SsRowHeaderRender,
    contextMenu,
  },
};
</script>
<style lang="scss">
.drag-copying {
  cursor: copy;
  .ag-cell.ag-cell-range-selected {
    background: lightpink !important;
  }
}
</style>
<style lang="scss" scoped>
.JheGridTable {
  width: 100%;
  height: 100%;
  background: #fff;
  ::v-deep .group-cell {
    background-color: #d7e7f8;
    font-weight: bold;
  }
  ::v-deep .ag-cell {
    padding: 3px 11px;
    font-size: 14px;
  }

  ::v-deep .ag-pinned-left-cols-container {
    .ag-cell {
      border-right: 1px solid #d9dcde !important;
    }
    .ag-cell-focus {
      border-right: 1px solid #0091ea !important;
    }
  }
  ::v-deep .ag-center-cols-container {
    .ag-cell {
      border-right: 1px solid #d9dcde;
    }
  }
  ::v-deep .ag-center-cols-container {
    .ag-theme-balham .ag-ltr .ag-cell {
      border-right: 1px solid #d9dcde !important;
    }
    .ag-cell-focus {
      border-right: 1px solid #0091ea !important;
    }
  }
  ::v-deep .ag-pinned-right-cols-container {
    .ag-cell {
      border-right: 1px solid #d9dcde !important;
    }
    .ag-cell-focus {
      border-right: 1px solid #0091ea !important;
    }
  }

  .ag-theme-balham .ag-cell-range-selected:not(.ag-cell-focus) {
    //border-right: 1px solid #d9dcde!important;
  }
  //.ag-cell-range-selected{border-right: 1px solid #0091ea}
  ::v-deep .ag-selection-checkbox:not(.ag-hidden) ~ .ag-cell-value:not(:empty) {
    margin: 0;
  }

  ::v-deep .ag-theme-balham .ag-header-cell::after,
  ::v-deep .ag-theme-balham .ag-header-group-cell::after {
    border-right: 1px solid rgba(189, 195, 199, 0.5);
    content: " ";
    height: 100%;
    margin-top: 0;
    position: absolute;
    text-indent: -2000px;
    top: 0;
  }

  ::v-deep .ag-header-cell-label {
    justify-content: center;
    text-align: center;
  }
  ::v-deep .ag-root-wrapper-body.ag-layout-normal {
    height: 100% !important;
  }
  ::v-deep .ctx-menu-body {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    min-width: 160px;
  }
}
</style>

ss-cell-render.vue 内容如下：

<!--
    Component: SsCellRender
    Description: 电子表格单元格渲染组建
-->

<template>
  <div :class="['SsCellRender', selectedClass]">
    <el-row v-if="shifts.length > 0">
      <el-col
        v-for="(s, i) in shifts"
        :key="i"
        :span="Math.floor(24 / shifts.length)"
        :style="s"
        ><!--{{cellName(s.id)}}-->{{ s.shiftName }}</el-col
      >
    </el-row>
    <el-row v-else>
      <el-col></el-col>
    </el-row>
    <div class="ss-cell-mask"></div>
    <div
      v-show="isShowDropCopyHolder"
      class="DragCopyHolder"
      @mousedown="onMouseHold"
    >
      <!-- <Icon type="md-add" color="white" /> -->
      <i class="el-icon-plus" style="color: white"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: "SsCellRender",
  data() {
    return {
      data: {},
      rowIndex: null,
      colId: null,
      rowId: null,
      context: null,
      isShowDropCopyHolder: false,
      value: "",
      insideParams: null,
      shiftName: "",
    };
  },
  computed: {
    // 班次背景色方法
    styles() {
      return this.shiftIdInfo;
    },

    selectedClass() {
      return {
        // "ag-cell-range-selected": this.isSelecting,
        "is-drag-copying": this.isDragCopying,
      };
    },
    shifts() {
      return this.value.shifts;
    },
  },
  watch: {},
  methods: {
    initialize(params) {
      this.value = params.value;
      this.data = params.data;
      // this.data.rowHeight = this.shifts.length * 26;
      this.rowIndex = params.rowIndex;
      this.rowId = params.node.id;
      this.colId = params.column.colId;
      this.params.eGridCell.style["padding"] = 0;
      // this.params.eGridCell.style["padding-right"] = 0;
      this.context = params.context;
      // console.log(this.params, this);
    },
    cellName(id) {
      let shiftName = "";
      this.shifts.forEach((e) => {
        if (this.shiftIdInfo[id]) {
          if (e.days !== null && e.days !== undefined) {
            shiftName = this.shiftIdInfo[id].name + "-" + e.days;
          } else {
            shiftName = this.shiftIdInfo[id].name;
          }
        }
      });
      return shiftName;
    },
    onMouseHold() {
      this.context.isDragCopying = true;
    },
  },
  beforeUpdate() {
    this.initialize(this.params);
  },
  created() {
    this.initialize(this.params);
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.SsCellRender {
  padding: 5px 11px;
  //height: 100%;
  position: relative;
  cursor: cell;

  .ss-cell-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0091ea;
    opacity: 0;
  }
  ::v-deep .ag-cell-range-selected .ss-cell-mask {
    opacity: 0.3;
  }

  .DragCopyHolder {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 10px;
    background: red;
    width: 12px;
    height: 12px;
    border: 0;
    cursor: copy;
  }
  .DragCopyHolder:hover {
    border: 1px solid whitesmoke;
    width: 14px;
    height: 14px;
  }
  .DragCopyHolder i {
    position: absolute;
    left: 1px;
    top: 1px;
  }

  ::v-deep .el-col {
    height: 22px;
    overflow: hidden;
    line-height: 22px;
  }
  ::v-deep .el-col:first-child {
    border-radius: 11px 0 0 11px;
  }
  ::v-deep .el-col:last-child {
    border-radius: 0 11px 11px 0;
  }
  ::v-deep .el-col:first-child:last-child {
    border-radius: 11px;
  }
}
</style>

ss-header-render.vue内容如下：

<!--
    Component: SsHeaderRender
    Description: 电子表格的自定义Header
-->
<template>
  <div
    class="SsHeaderRender ag-cell-label-container"
    role="presentation"
    :style="style"
  >
    <!-- <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span> -->

    <div
      ref="eLabel"
      class="ag-header-cell-label"
      role="presentation"
      style="flex-wrap: wrap"
      @click="onSortChanged"
    >
      <!-- <div
        ref="eText"
        class="ag-header-cell-text"
        role="columnheader"
        style="width:100%;border-bottom:1px solid #d9dcde"
      >{{title}}</div>
      <div ref="eText" class="ag-header-cell-text" role="columnheader">{{subtitle}}</div>-->
      <div ref="eText" class="ag-header-cell-text" role="columnheader">
        {{ title }} {{ subtitle }}
      </div>

      <!-- <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span> -->
      <!-- <span v-if="isSortAscending" ref="eSortOrder" class="ag-header-icon ag-sort-order"></span> -->
      <span
        v-if="isSortAscending"
        ref="eSortAsc"
        class="ag-header-icon ag-sort-ascending-icon"
      >
        <span class="ag-icon ag-icon-asc" unselectable="on"></span>
      </span>
      <span
        v-if="isSortDescending"
        ref="eSortDesc"
        class="ag-header-icon ag-sort-descending-icon"
      >
        <span class="ag-icon ag-icon-desc" unselectable="on"></span>
      </span>
      <span
        v-if="params.enableMenu"
        ref="eMenu"
        class="ag-header-icon ag-header-cell-menu-button"
        aria-hidden="true"
        @click.stop="onMenuClicked"
      >
        <span class="ag-icon ag-icon-menu" unselectable="on"></span>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "SsHeaderRender",
  // components: {},
  // directives: {},
  // filters: {},
  data() {
    return {
      style: {},
    };
  },
  // props: [],
  computed: {
    title() {
      if (
        this.params.displayName === "周六" ||
        this.params.displayName === "周日"
      ) {
        this.style = {
          color: "#CC0001",
        };
      } else {
        this.style = {};
      }
      return this.params.displayName;
    },
    subtitle() {
      return this.params.subtitle;
    },
    isSortAscending() {
      return this.params.enableSorting && this.params.column.isSortAscending();
    },
    isSortDescending() {
      return this.params.enableSorting && this.params.column.isSortDescending();
    },
  },
  // watch: {},
  methods: {
    onMenuClicked() {
      this.params.showColumnMenu(this.$refs.eMenu);
    },
    onSortChanged(event) {
      this.params.enableSorting && this.params.progressSort();
      this.params.onColumnClick &&
        this.params.onColumnClick(event, this.params);
      // console.log(
      //   "onSortChanged",
      //   this.params,
      //   this.params.api.getDisplayedRowCount()
      // );
    },
  },
};
</script>
<style lang="scss" scoped>
.ag-header-cell .SsHeaderRender:hover {
  .ag-header-icon.ag-header-cell-menu-button {
    display: inline;
    opacity: 1 !important;
    transition: opacity 0.2s ease 0s, border 0.2s ease 0s;
  }
}
.SsHeaderRender {
  .ag-header-icon.ag-header-cell-menu-button {
    display: none;
    opacity: 0 !important;
    transition: opacity 0.2s ease 0s, border 0.2s ease 0s;
  }
}
</style>

ss-row-header-render.vue内容如下：

<!--
    Component: SsRowHeaderRender
    Description: 电子表格行头的Render
-->
<template>
  <div :class="['SsRowHeaderRender']" @mousedown="selectRow">
    <span>{{ rowIndex + 1 }}</span>
  </div>
</template>
<script>
export default {
  name: "SsRowHeaderRender",
  data() {
    return {
      columnDefines: null,
    };
  },
  computed: {
    rowIndex() {
      return this.params.rowIndex;
    },

    value() {
      return +this.params.value;
    },
  },
  watch: {},
  methods: {
    initialize(params) {
      this.columnDefines = params.columnApi.getColumns();
      this.params.eGridCell.style["padding-left"] = 0;
      this.params.eGridCell.style["padding-right"] = 0;
    },
    selectRow() {
      this.params.node.setSelected(true, true);
    },
  },
  beforeUpdate() {
    this.initialize(this.params);
  },
  created() {
    this.initialize(this.params);
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.SsRowHeaderRender {
  & {
    padding-left: 11px;
    padding-right: 11px;
    height: 100%;
  }
}

.ag-selection-checkbox {
  padding-left: 11px;
}
</style>

ctx-menu.vue内容如下：

<template>
  <div
    :id="id"
    ref="contextMenu"
    :style="ctxStyle"
    class="ctx-menu-container"
    @click.stop
    @contextmenu.stop
  >
    <div style="background-color: transparent" class="ctx open">
      <ul
        role="menu"
        class="ctx-menu"
        :class="{
          'ctx-menu-right': align === 'right',
          'ctx-menu-left': align === 'left',
        }"
      >
        <slot />
      </ul>
    </div>
  </div>
</template>

<script>
import { createBodyClickListener } from "./body-click-listener";

// const EVENT_LIST = ['click', 'contextmenu', 'keydown']

export default {
  name: "ContextMenu",
  props: {
    id: {
      type: String,
      default: "default-ctx",
    },
  },
  data() {
    return {
      locals: {},
      align: "left",
      ctxTop: 0,
      ctxLeft: 0,
      ctxVisible: false,
      bodyClickListener: createBodyClickListener((e) => {
        const isOpen = !!this.ctxVisible;
        const outsideClick = isOpen && !this.$el.contains(e.target);

        if (outsideClick) {
          if (e.which !== 1) {
            e.preventDefault();
            e.stopPropagation();
            return false;
          } else {
            this.ctxVisible = false;
            this.$emit("ctx-cancel", this.locals);
            e.stopPropagation();
          }
        } else {
          this.ctxVisible = false;
          this.$emit("ctx-close", this.locals);
        }
      }),
    };
  },
  computed: {
    ctxStyle() {
      return {
        display: this.ctxVisible ? "block" : "none",
        top: (this.ctxTop || 0) + "px",
        left: (this.ctxLeft || 0) + "px",
      };
    },
  },
  watch: {
    ctxVisible(newVal, oldVal) {
      if (oldVal === true && newVal === false) {
        this.bodyClickListener.stop((e) => {
          // this.locals = {}
        });
      }
    },
  },
  methods: {
    /*
     * this function handles some cross-browser compat issues
     * thanks to https://github.com/callmenick/Custom-Context-Menu
     */
    setPositionFromEvent(e, data, parentPosition) {
      e = e || window.event;

      const scrollingElement =
        document.scrollingElement || document.documentElement;

      if (e.pageX || e.pageY) {
        this.ctxLeft = e.pageX;
        this.ctxTop = e.pageY - scrollingElement.scrollTop;
      } else if (e.clientX || e.clientY) {
        this.ctxLeft = e.clientX + scrollingElement.scrollLeft;
        this.ctxTop = e.clientY + scrollingElement.scrollTop;
      }
      this.ctxTop = this.ctxTop - parentPosition.top;
      this.ctxLeft = this.ctxLeft - parentPosition.left;

      this.$nextTick(() => {
        const menu = this.$el;
        const minHeight =
          (menu.style.minHeight || menu.style.height).replace("px", "") || 32;
        const minWidth =
          (menu.style.minWidth || menu.style.width).replace("px", "") || 32;
        const scrollHeight = menu.scrollHeight || minHeight;
        let scrollWidth = menu.scrollWidth || minWidth;
        const findSubItem = data.find((item) => {
          return item.children && item.children.length > 0;
        }); // 存在二级菜单
        if (findSubItem) {
          scrollWidth = menu.scrollWidth * 2 || minWidth;
        }
        const largestHeight =
          window.innerHeight - scrollHeight - parentPosition.top - 25;
        const largestWidth =
          window.innerWidth - scrollWidth - parentPosition.left - 25;
        if (this.ctxTop > largestHeight) this.ctxTop = largestHeight;
        if (this.ctxLeft > largestWidth) this.ctxLeft = largestWidth;
      });
      return e;
    },
    getElementLeftAndTop(element) {
      var left = element.offsetLeft; // 当前元素左边距
      var top = element.offsetTop; // 当前元素上边距
      var parent = element.offsetParent; // 当前元素的父级元素
      while (parent !== null) {
        left += parent.offsetLeft; // 累加左边距
        top += parent.offsetTop; // 累加上边距
        parent = parent.offsetParent; // 依次获取父元素
      }
      return { left, top };
    },

    open(e, data, parentElement) {
      if (this.ctxVisible) this.ctxVisible = false;
      this.ctxVisible = true;
      this.$emit("ctx-open", (this.locals = data || {}));
      const parentPosition = this.getElementLeftAndTop(parentElement);
      this.setPositionFromEvent(e, data, parentPosition);
      this.$el.setAttribute("tab-index", -1);
      this.bodyClickListener.start();
      return this;
    },

    close() {
      this.ctxVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.ctx {
  position: relative;
}

.ctx-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #373a3c;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
}

.ctx-divider {
  height: 1px;
  margin: 0.5rem 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.ctx-group {
  width: 100%;
}
.ctx-item {
  display: block;
  padding: 7px 16px;
  clear: both;
  font-weight: 14px;
  line-height: normal;
  color: #373a3c;
  text-align: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.ctx-item:focus,
.ctx-item:hover {
  color: #2b2d2f;
  text-decoration: none;
  background-color: #f5f5f5;
  cursor: normal;
}

.ctx-item.active,
.ctx-item.active:focus,
.ctx-item.active:hover {
  color: #fff;
  text-decoration: none;
  background-color: #0275d8;
  outline: 0;
}

.ctx-item.disabled,
.ctx-item.disabled:focus,
.ctx-item.disabled:hover {
  color: #818a91;
}

.ctx-item.disabled:focus,
.ctx-item.disabled:hover {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
}

.open > .ctx-menu {
  display: block;
}

.open > a {
  outline: 0;
}

.ctx-menu-right {
  right: 0;
  left: auto;
}

.ctx-menu-left {
  right: auto;
  left: 0;
}

.ctx-header {
  display: block;
  padding: 3px 20px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #818a91;
  white-space: nowrap;
}

.ctx-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}

.pull-right > .ctx-menu {
  right: 0;
  left: auto;
}

.ctx-menu-container {
  position: fixed;
  padding: 0;
  border: 1px solid #bbb;
  background-color: whitesmoke;
  z-index: 99999;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
</style>

body-click-listener.js内容如下：

/**
 * When listening for an outside click, we set useCapture = true.
 * This way, we can prevent other click listeners from firing when performing the 'click-out'.
 * If useCapture is set to false, the handlers fire backwards
 */
export const createBodyClickListener = function(fn) {
  let isListening = false;

  /* === public api ========================================== */
  return {
    get isListening() {
      return isListening;
    },

    start(cb) {
      window.addEventListener("click", _onclick, true);
      window.addEventListener("keyup", _onescape, true);
      isListening = true;
      if (typeof cb === "function") cb();
    },

    stop(cb) {
      window.removeEventListener("click", _onclick, true);
      window.removeEventListener("keyup", _onescape, true);
      isListening = false;
      if (typeof cb === "function") cb();
    }
  };

  /* === private helpers ===================================== */
  function _onclick(e) {
    e.preventDefault();
    if (typeof fn === "function") fn(e);
  }

  function _onescape(e) {
    if (e.keyCode === 27) _onclick(e);
  }
};

utils下tools.js内容如下：

/**
 * 获得原时间前后几天的日期
 * @param {*} src 原时间
 * @param {*} offset 偏移量，正负天数
 */
export const offsetDate = (src, offset) => {
  let dest = new Date(src);

  let timespan = dest.setDate(dest.getDate() + offset);
  dest = new Date(timespan);

  return dest;
};

/**
 * 获得原日期所在周的所有日期
 * @param {*} src 原日期
 */
export const getOneWeekDate = (src) => {
  let source = new Date(src);
  let keys = [
    "sunday",
    "monday",
    "tuesday",
    "wednesday",
    "thursday",
    "friday",
    "saturday",
    "sunday",
  ];
  let mapWeekDays = {};

  let date = source;
  let wd = date.getDay();
  mapWeekDays[keys[wd]] = date;

  for (wd = date.getDay() - 1; wd >= 1; wd--) {
    date = offsetDate(date, -1);
    mapWeekDays[keys[wd]] = date;
  }
  date = source;
  for (wd = source.getDay() + 1; wd <= 8; wd++) {
    date = offsetDate(date, +1);
    mapWeekDays[keys[wd]] = date;
  }

  return mapWeekDays;
};

父组件的用法示例：

<template>
  <div style="width: 100%; height: 500px">
    <div>
      <jhe-button @click="initData">加载(2022-12-25)周数据</jhe-button>
      <jhe-button @click="handleSelectRow">选中第二行</jhe-button>
      <jhe-button @click="handleSelectColumn">选中周一列</jhe-button>
      <jhe-button @click="handleSelectCells">选中单元格</jhe-button>
      <jhe-button @click="handleMoveRowUp">行上移</jhe-button>
      <jhe-button @click="handleMoveRowDown">行下移</jhe-button>
      <jhe-button @click="handleMoveDaysUp">排班数据上移</jhe-button>
      <jhe-button @click="handleMoveDaysDown">排班数据下移</jhe-button>
      <jhe-button @click="handleExchangeDays">班次对换</jhe-button>
      <jhe-button @click="handleGetCellData"
        >获取单元格数据（第二行，周二列）</jhe-button
      >
      <jhe-button @click="handleSetCellData"
        >设置单元格数据（第三行，周四列）</jhe-button
      >
      <jhe-button @click="handleGetRowData">获取行数据（第五行）</jhe-button>
      <jhe-button @click="handleSetRangeValue">设置区域值</jhe-button>
    </div>
    <jhe-grid-table
      :startDate="startDate"
      :columns="columns"
      :rowData="rowData"
      :headerHeight="headerHeight"
      :ctxMenuItems="ctxMenuItems"
      @init="onInit"
      @loaded="onLoaded"
      @changed="onChanged"
      @cellClicked="onCellClicked"
      @command="onCommand"
    ></jhe-grid-table>
  </div>
</template>
<script>
export default {
  name: "DemoJheGridTable",
  data() {
    return {
      //需要显示的数据
      rowData: [],
      headerHeight: 30,
      columns: [],
      jheGridApi: null,
      startDate: null,
      targetDate: new Date("2022-12-05"),
      ctxMenuItems: [], //右键菜单项
      cellClickedPositon: null,
      cellClickdSchedule: null,
      changedRowData: null,
      selectedRanges: null,
    };
  },
  created() {
    this.startDate = this.getStartDateByTargetDate(this.targetDate);
    this.columns = [
      {
        colId: 1,
        headerName: "组号",
        field: "groupNO",
        minWidth: 60,
        //pinned: "left",
        sortable: false,
        filter: false,
        colSpan: (params) => {
          if (params.data.isRowGroup === 1) {
            return this.columns.length;
          } else {
            return 1;
          }
        },
        cellClassRules: {
          "group-cell": "data.isRowGroup === 1",
        },
      },
      {
        colId: 2,
        headerName: "姓名",
        field: "userName",
        minWidth: 80,
        //pinned: "left",
        sortable: false,
        filter: false,
      },
      {
        colId: 3,
        headerName: "层级",
        field: "level",
        minWidth: 60,
        //pinned: "left",
        sortable: false,
        filter: false,
      },
      {
        colId: 4,
        headerName: "岗位",
        field: "post",
        minWidth: 80,
        //pinned: "left",
        sortable: false,
        filter: false,
      },
      {
        colId: 5,
        headerName: "职称",
        field: "titleName",
        minWidth: 90,
        //pinned: "left",
        sortable: false,
        filter: false,
      },
      {
        colId: "w1",
        headerName: "周一",
        field: "monday",
        minWidth: 90,
        sortable: false,
        filter: false,
        selectable: true,
      },
      {
        colId: "w2",
        headerName: "周二",
        field: "tuesday",
        minWidth: 90,
        sortable: false,
        filter: false,
        selectable: true,
      },
      {
        colId: "w3",
        headerName: "周三",
        field: "wednesday",
        minWidth: 90,
        sortable: false,
        filter: false,
        selectable: true,
      },
      {
        colId: "w4",
        headerName: "周四",
        field: "thursday",
        minWidth: 90,
        sortable: false,
        filter: false,
        selectable: true,
      },
      {
        colId: "w5",
        headerName: "周五",
        field: "friday",
        minWidth: 90,
        sortable: false,
        filter: false,
        selectable: true,
      },
      {
        colId: "w6",
        headerName: "周六",
        field: "saturday",
        minWidth: 90,
        sortable: false,
        filter: false,
        selectable: true,
      },
      {
        colId: "w7",
        headerName: "周日",
        field: "sunday",
        minWidth: 90,
        sortable: false,
        filter: false,
        selectable: true,
      },
      {
        colId: 13,
        headerName: "公休",
        //field: "dayOff",
        minWidth: 65,
        //pinned: "right",
        sortable: false,
        filter: false,
        hide: false,
        valueGetter: (params) => {
          let keys = [
            "monday",
            "tuesday",
            "wednesday",
            "thursday",
            "friday",
            "saturday",
            "sunday",
          ];
          let allDays = 0;
          keys.forEach((key) => {
            params.data[key].shifts.forEach((s) => {
              allDays = allDays + s.days;
            });
          });
          return allDays;
        },
      },
      {
        colId: 14,
        headerName: "管床",
        field: "beds",
        minWidth: 70,
        sortable: false,
        //pinned: "right",
        filter: false,
        hide: true,
      },
    ];
    let data = [
      {
        isRowGroup: 1,
        groupNO: "一组",
      },
      {
        id: "220",
        userName: "孙丽",
        employeeNO: "220",
        beds: "4,5,6",
        level: "0",
        memo: null,
        displayOrder: 1000,
        groupNO: "一组",
        durations: 0,
        dayOff: 15,
        monday: {
          id: "73098",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73099",
          date: "2022-12-06",
          shifts: [],
        },
        wednesday: {
          id: "73100",
          date: "2022-12-07",
          shifts: [],
        },
        thursday: {
          id: "73101",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73102",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73103",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73104",
          date: "2022-12-11",
          shifts: [],
        },
        post: "5",
        title: "",
        titleName: "",
      },
      {
        id: "21",
        userName: "刘世卿",
        employeeNO: "21",
        beds: null,
        level: "0",
        memo: null,
        displayOrder: 1001,
        groupNO: "一组",
        durations: 46800000,
        dayOff: 15,
        monday: {
          id: "73091",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73092",
          date: "2022-12-06",
          shifts: [
            {
              id: 2860,
              shiftName: "观P2",
              background: "#2D8CF0",
              color: "#FFFFFF",
              days: 1,
              totalDays: null,
            },
          ],
        },
        wednesday: {
          id: "73093",
          date: "2022-12-07",
          shifts: [
            {
              id: 2860,
              shiftName: "观P2",
              background: "#2D8CF0",
              color: "#FFFFFF",
              days: 1,
              totalDays: null,
            },
          ],
        },
        thursday: {
          id: "73094",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73095",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73096",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73097",
          date: "2022-12-11",
          shifts: [],
        },
        post: "0",
        title: "",
        titleName: "",
      },
      {
        id: "354",
        userName: "孙娉",
        employeeNO: "354",
        beds: null,
        level: "0",
        memo: null,
        displayOrder: 1002,
        groupNO: "一组",
        durations: 0,
        dayOff: 15,
        monday: {
          id: "73105",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73106",
          date: "2022-12-06",
          shifts: [],
        },
        wednesday: {
          id: "73107",
          date: "2022-12-07",
          shifts: [],
        },
        thursday: {
          id: "73108",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73109",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73110",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73111",
          date: "2022-12-11",
          shifts: [],
        },
        post: "0",
        title: "1",
        titleName: "初级(护士)",
      },
      {
        id: "695",
        userName: "陈伟萍",
        employeeNO: "695",
        beds: null,
        level: "0",
        memo: null,
        displayOrder: 1003,
        groupNO: "一组",
        durations: 23400000,
        dayOff: 15,
        monday: {
          id: "73084",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73085",
          date: "2022-12-06",
          shifts: [
            {
              id: 2860,
              shiftName: "观P2",
              background: "#2D8CF0",
              color: "#FFFFFF",
              days: 1,
              totalDays: null,
            },
          ],
        },
        wednesday: {
          id: "73086",
          date: "2022-12-07",
          shifts: [],
        },
        thursday: {
          id: "73087",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73088",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73089",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73090",
          date: "2022-12-11",
          shifts: [],
        },
        post: "0",
        title: "",
        titleName: "",
      },
      {
        id: "133",
        userName: "纪丽鑫",
        employeeNO: "133",
        beds: "1111",
        level: "3",
        memo: null,
        displayOrder: 1005,
        groupNO: "一组",
        durations: 46800000,
        dayOff: 15,
        monday: {
          id: "73147",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73148",
          date: "2022-12-06",
          shifts: [
            {
              id: 1000,
              shiftName: "抢N",
              background: "#EA1A1A",
              color: "black",
              days: 2,
              totalDays: null,
            },
          ],
        },
        wednesday: {
          id: "73149",
          date: "2022-12-07",
          shifts: [
            {
              id: 2860,
              shiftName: "观P2",
              background: "#2D8CF0",
              color: "#FFFFFF",
              days: 1,
              totalDays: null,
            },
          ],
        },
        thursday: {
          id: "73150",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73151",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73152",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73153",
          date: "2022-12-11",
          shifts: [],
        },
        post: "4",
        title: "",
        titleName: "",
      },
      {
        id: "110110",
        userName: "童谣",
        employeeNO: "110110",
        beds: null,
        level: "1",
        memo: null,
        displayOrder: 1007,
        groupNO: "一组",
        durations: 46800000,
        dayOff: 15,
        monday: {
          id: "73182",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73183",
          date: "2022-12-06",
          shifts: [
            {
              id: 2860,
              shiftName: "观P2",
              background: "#2D8CF0",
              color: "#FFFFFF",
              days: 1,
              totalDays: null,
            },
          ],
        },
        wednesday: {
          id: "73184",
          date: "2022-12-07",
          shifts: [
            {
              id: 2860,
              shiftName: "观P2",
              background: "#2D8CF0",
              color: "#FFFFFF",
              days: 1,
              totalDays: null,
            },
          ],
        },
        thursday: {
          id: "73185",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73186",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73187",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73188",
          date: "2022-12-11",
          shifts: [],
        },
        post: "6",
        title: "1",
        titleName: "初级(护士)",
      },
      {
        id: "134",
        userName: "辛琤琤",
        employeeNO: "134",
        beds: "7,8,9",
        level: "2",
        memo: null,
        displayOrder: 1008,
        groupNO: "一组",
        durations: 0,
        dayOff: 15,
        monday: {
          id: "73077",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73078",
          date: "2022-12-06",
          shifts: [],
        },
        wednesday: {
          id: "73079",
          date: "2022-12-07",
          shifts: [],
        },
        thursday: {
          id: "73080",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73081",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73082",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73083",
          date: "2022-12-11",
          shifts: [],
        },
        post: "3",
        title: "",
        titleName: "",
      },
      {
        isRowGroup: 1,
        groupNO: "二组",
      },
      {
        id: "389",
        userName: "张小婧",
        employeeNO: "389",
        beds: null,
        level: "0",
        memo: null,
        displayOrder: 2005,
        groupNO: "二组",
        durations: 0,
        dayOff: 15,
        monday: {
          id: "73035",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73036",
          date: "2022-12-06",
          shifts: [],
        },
        wednesday: {
          id: "73037",
          date: "2022-12-07",
          shifts: [],
        },
        thursday: {
          id: "73038",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73039",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73040",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73041",
          date: "2022-12-11",
          shifts: [],
        },
        post: "0",
        title: "",
        titleName: "",
      },
      {
        id: "394",
        userName: "刘利慧",
        employeeNO: "394",
        beds: null,
        level: "0",
        memo: null,
        displayOrder: 2010,
        groupNO: "二组",
        durations: 0,
        dayOff: 15,
        monday: {
          id: "73042",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73043",
          date: "2022-12-06",
          shifts: [],
        },
        wednesday: {
          id: "73044",
          date: "2022-12-07",
          shifts: [],
        },
        thursday: {
          id: "73045",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73046",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73047",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73048",
          date: "2022-12-11",
          shifts: [],
        },
        post: "0",
        title: "",
        titleName: "",
      },
      {
        id: "437",
        userName: "闫丽平",
        employeeNO: "437",
        beds: null,
        level: "0",
        memo: null,
        displayOrder: 2012,
        groupNO: "二组",
        durations: 0,
        dayOff: 15,
        monday: {
          id: "73063",
          date: "2022-12-05",
          shifts: [],
        },
        tuesday: {
          id: "73064",
          date: "2022-12-06",
          shifts: [],
        },
        wednesday: {
          id: "73065",
          date: "2022-12-07",
          shifts: [],
        },
        thursday: {
          id: "73066",
          date: "2022-12-08",
          shifts: [],
        },
        friday: {
          id: "73067",
          date: "2022-12-09",
          shifts: [],
        },
        saturday: {
          id: "73068",
          date: "2022-12-10",
          shifts: [],
        },
        sunday: {
          id: "73069",
          date: "2022-12-11",
          shifts: [],
        },
        post: "0",
        title: "",
        titleName: "",
      },
    ];
    this.rowData = [...data];
    this.ctxMenuItems = [
      {
        id: "copy",
        title: "复制",
      },
      {
        id: "paste",
        title: "粘贴",
      },
      {
        id: "clear",
        title: "清除",
      },
      {
        id: "exchange",
        title: "对换",
      },
      {
        id: "P",
        title: "P",
        children: [
          {
            id: "观P1",
            title: "观P1",
            background: "#f27979",
            color: "#000",
          },
          {
            id: "观P2",
            title: "观P2",
            background: "#f27979",
            color: "#83e4ec",
          },
        ],
      },
      {
        id: "X",
        title: "X",
        background: "#98F279",
        color: "#FFD8D7",
      },
      {
        id: "其他",
        title: "其他",
        children: [
          {
            id: "抢N",
            title: "抢N",
            background: "#EA1A1A",
            color: "black",
          },
        ],
      },
    ];
  },
  computed: {},
  methods: {
    initData() {
      this.startDate = this.getStartDateByTargetDate(new Date("2022-12-25"));
      let data = [
        {
          isRowGroup: 1,
          groupNO: "一组",
        },
        {
          id: "220",
          userName: "孙丽11",
          employeeNO: "220",
          beds: "4,5,6",
          level: "0",
          memo: null,
          displayOrder: 1000,
          groupNO: "一组",
          durations: 0,
          dayOff: 15,
          monday: {
            id: "73098",
            date: "2022-12-19",
            shifts: [
              {
                id: 1000,
                shiftName: "抢N",
                background: "#EA1A1A",
                color: "black",
                days: 2,
                totalDays: null,
              },
            ],
          },
          tuesday: {
            id: "73099",
            date: "2022-12-20",
            shifts: [],
          },
          wednesday: {
            id: "73100",
            date: "2022-12-21",
            shifts: [],
          },
          thursday: {
            id: "73101",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73102",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73103",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73104",
            date: "2022-12-25",
            shifts: [],
          },
          post: "5",
          title: "",
          titleName: "",
        },
        {
          id: "21",
          userName: "刘世卿",
          employeeNO: "21",
          beds: null,
          level: "0",
          memo: null,
          displayOrder: 1001,
          groupNO: "一组",
          durations: 46800000,
          dayOff: 15,
          monday: {
            id: "73091",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73092",
            date: "2022-12-20",
            shifts: [
              {
                id: 2860,
                shiftName: "观P2",
                background: "#2D8CF0",
                color: "#FFFFFF",
                days: 1,
                totalDays: null,
              },
            ],
          },
          wednesday: {
            id: "73093",
            date: "2022-12-21",
            shifts: [
              {
                id: 2860,
                shiftName: "观P2",
                background: "#2D8CF0",
                color: "#FFFFFF",
                days: 1,
                totalDays: null,
              },
            ],
          },
          thursday: {
            id: "73094",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73095",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73096",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73097",
            date: "2022-12-25",
            shifts: [],
          },
          post: "0",
          title: "",
          titleName: "",
        },
        {
          id: "354",
          userName: "孙娉",
          employeeNO: "354",
          beds: null,
          level: "0",
          memo: null,
          displayOrder: 1002,
          groupNO: "一组",
          durations: 0,
          dayOff: 15,
          monday: {
            id: "73105",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73106",
            date: "2022-12-20",
            shifts: [],
          },
          wednesday: {
            id: "73107",
            date: "2022-12-21",
            shifts: [],
          },
          thursday: {
            id: "73108",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73109",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73110",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73111",
            date: "2022-12-25",
            shifts: [],
          },
          post: "0",
          title: "1",
          titleName: "初级(护士)",
        },
        {
          id: "695",
          userName: "陈伟萍",
          employeeNO: "695",
          beds: null,
          level: "0",
          memo: null,
          displayOrder: 1003,
          groupNO: "一组",
          durations: 23400000,
          dayOff: 15,
          monday: {
            id: "73084",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73085",
            date: "2022-12-20",
            shifts: [
              {
                id: 2860,
                shiftName: "观P2",
                background: "#2D8CF0",
                color: "#FFFFFF",
                days: 1,
                totalDays: null,
              },
            ],
          },
          wednesday: {
            id: "73086",
            date: "2022-12-21",
            shifts: [],
          },
          thursday: {
            id: "73087",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73088",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73089",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73090",
            date: "2022-12-25",
            shifts: [],
          },
          post: "0",
          title: "",
          titleName: "",
        },
        {
          id: "133",
          userName: "纪丽鑫",
          employeeNO: "133",
          beds: "1111",
          level: "3",
          memo: null,
          displayOrder: 1005,
          groupNO: "一组",
          durations: 46800000,
          dayOff: 15,
          monday: {
            id: "73147",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73148",
            date: "2022-12-20",
            shifts: [
              {
                id: 1000,
                shiftName: "抢N",
                background: "#EA1A1A",
                color: "black",
                days: 2,
                totalDays: null,
              },
            ],
          },
          wednesday: {
            id: "73149",
            date: "2022-12-21",
            shifts: [
              {
                id: 2860,
                shiftName: "观P2",
                background: "#2D8CF0",
                color: "#FFFFFF",
                days: 1,
                totalDays: null,
              },
            ],
          },
          thursday: {
            id: "73150",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73151",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73152",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73153",
            date: "2022-12-25",
            shifts: [],
          },
          post: "4",
          title: "",
          titleName: "",
        },
        {
          id: "110110",
          userName: "童谣",
          employeeNO: "110110",
          beds: null,
          level: "1",
          memo: null,
          displayOrder: 1007,
          groupNO: "一组",
          durations: 46800000,
          dayOff: 15,
          monday: {
            id: "73182",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73183",
            date: "2022-12-20",
            shifts: [
              {
                id: 2860,
                shiftName: "观P2",
                background: "#2D8CF0",
                color: "#FFFFFF",
                days: 1,
                totalDays: null,
              },
            ],
          },
          wednesday: {
            id: "73184",
            date: "2022-12-21",
            shifts: [
              {
                id: 2860,
                shiftName: "观P2",
                background: "#2D8CF0",
                color: "#FFFFFF",
                days: 1,
                totalDays: null,
              },
            ],
          },
          thursday: {
            id: "73185",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73186",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73187",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73188",
            date: "2022-12-25",
            shifts: [],
          },
          post: "6",
          title: "1",
          titleName: "初级(护士)",
        },
        {
          id: "134",
          userName: "辛琤琤",
          employeeNO: "134",
          beds: "7,8,9",
          level: "2",
          memo: null,
          displayOrder: 1008,
          groupNO: "一组",
          durations: 0,
          dayOff: 15,
          monday: {
            id: "73077",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73078",
            date: "2022-12-20",
            shifts: [],
          },
          wednesday: {
            id: "73079",
            date: "2022-12-21",
            shifts: [],
          },
          thursday: {
            id: "73080",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73081",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73082",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73083",
            date: "2022-12-25",
            shifts: [],
          },
          post: "3",
          title: "",
          titleName: "",
        },
        {
          isRowGroup: 1,
          groupNO: "二组",
        },
        {
          id: "389",
          userName: "张小婧",
          employeeNO: "389",
          beds: null,
          level: "0",
          memo: null,
          displayOrder: 2005,
          groupNO: "二组",
          durations: 0,
          dayOff: 15,
          monday: {
            id: "73035",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73036",
            date: "2022-12-20",
            shifts: [],
          },
          wednesday: {
            id: "73037",
            date: "2022-12-21",
            shifts: [],
          },
          thursday: {
            id: "73038",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73039",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73040",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73041",
            date: "2022-12-25",
            shifts: [],
          },
          post: "0",
          title: "",
          titleName: "",
        },
        {
          id: "394",
          userName: "刘利慧",
          employeeNO: "394",
          beds: null,
          level: "0",
          memo: null,
          displayOrder: 2010,
          groupNO: "二组",
          durations: 0,
          dayOff: 15,
          monday: {
            id: "73042",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73043",
            date: "2022-12-20",
            shifts: [],
          },
          wednesday: {
            id: "73044",
            date: "2022-12-21",
            shifts: [],
          },
          thursday: {
            id: "73045",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73046",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73047",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73048",
            date: "2022-12-25",
            shifts: [],
          },
          post: "0",
          title: "",
          titleName: "",
        },
        {
          id: "437",
          userName: "闫丽平",
          employeeNO: "437",
          beds: null,
          level: "0",
          memo: null,
          displayOrder: 2012,
          groupNO: "二组",
          durations: 0,
          dayOff: 15,
          monday: {
            id: "73063",
            date: "2022-12-19",
            shifts: [],
          },
          tuesday: {
            id: "73064",
            date: "2022-12-20",
            shifts: [],
          },
          wednesday: {
            id: "73065",
            date: "2022-12-21",
            shifts: [],
          },
          thursday: {
            id: "73066",
            date: "2022-12-22",
            shifts: [],
          },
          friday: {
            id: "73067",
            date: "2022-12-23",
            shifts: [],
          },
          saturday: {
            id: "73068",
            date: "2022-12-24",
            shifts: [],
          },
          sunday: {
            id: "73069",
            date: "2022-12-25",
            shifts: [],
          },
          post: "0",
          title: "",
          titleName: "",
        },
      ];
      this.rowData = [...data];
    },
    getStartDateByTargetDate(targetDate) {
      let dayList = [1, 2, 3, 4, 5, 6, 0];
      let day = targetDate.getDay();
      let index = dayList.findIndex((d) => d === day); //代表当前天距离周一有几天
      let startDate = new Date(
        targetDate.getTime() - index * 24 * 60 * 60 * 1000
      ); //计算出周一是哪一天
      return startDate;
    },
    //ag-grid创建完成后执行的事件
    onInit(api) {
      this.jheGridApi = api;
    },
    onLoaded(params) {
      console.log("onLoaded", params);
    },
    onChanged(data) {
      console.log("onChanged", data);
      this.changedRowData = data;
    },
    onCellClicked(positon, data) {
      console.log("onCellClicked", positon, data);
      this.cellClickedPositon = positon;
      this.cellClickdSchedule = data;
    },
    //点击菜单项触发
    onCommand(menuItem, selectedRanges) {
      console.log("onCommand", menuItem, selectedRanges);
      this.selectedRanges = selectedRanges;
      switch (menuItem.id) {
        // 复制选中的数据
        case "copy":
          //to do something...
          break;
        // 粘贴复制的数据到指定区域
        case "paste":
          //to do something...
          break;
        // 清除选中区域的数据
        case "clear":
          //to do something...
          break;
        case "exchange":
          //to do something...
          break;
        default:
          //to do something...
          break;
      }
    },
    //提供的api有如下几种：
    //选中一行
    handleSelectRow() {
      this.jheGridApi.selectRow("1");
    },
    //选中一列
    handleSelectColumn() {
      this.jheGridApi.selectColumn("w1");
    },
    //选中单元格
    handleSelectCells() {
      let range = [
        { rowId: "1", rowIndex: 1, colId: "w1", colIndex: 7 },
        { rowId: "2", rowIndex: 2, colId: "w2", colIndex: 8 },
      ];
      this.jheGridApi.selectCells(range);
    },
    //行上移
    handleMoveRowUp() {
      this.jheGridApi.moveRowUp();
    },
    //行下移
    handleMoveRowDown() {
      this.jheGridApi.moveRowDown();
    },
    //排班数据上移
    handleMoveDaysUp() {
      this.jheGridApi.moveDaysUp();
    },
    //排班数据下移
    handleMoveDaysDown() {
      this.jheGridApi.moveDaysDown();
    },
    //班次对换
    handleExchangeDays() {
      this.jheGridApi.exchangeDays();
    },
    //获取单元格数据
    handleGetCellData() {
      let data = this.jheGridApi.getCellData("1", "w2");
      console.log("handleGetCellData", data);
    },
    //设置单元格数据
    handleSetCellData() {
      let data = this.jheGridApi.getCellData("4", "w2");
      this.jheGridApi.setCellData("2", "w4", data);
    },
    //获取行数据
    handleGetRowData() {
      let data = this.jheGridApi.getRowData("4");
      console.log("handleGetRowData", data);
    },
    //设置区域为某个值
    handleSetRangeValue() {
      let range = [
        { rowId: "0", rowIndex: 0, colId: "w1", colIndex: 7 },
        { rowId: "1", rowIndex: 1, colId: "w2", colIndex: 8 },
      ];
      let data = this.jheGridApi.getCellData("4", "w2");
      this.jheGridApi.setRangeValue(range, data);
    },
  },
};
</script>
<style lang="scss">
.group-cell {
  background-color: #d7e7f8 !important;
  font-weight: bold !important;
  text-align: left !important;
  padding-left: 36px !important;
}
</style>

效果图如下：