YangHuOperation/web/maintain/price_info_lib/js/priceArea.js

// 地区表
const AREA_BOOK = (() => {
  // 地区表格锁
  let areaLocked = true;
  const cache = areaList;
  const setting = {
    header: [
      { headerName: '序号', headerWidth: 60, dataCode: 'serialNo', dataType: 'Number', hAlign: 'center', vAlign: 'center' },
      { headerName: '地区', headerWidth: $('#area-spread').width() - 80, dataCode: 'name', dataType: 'String', hAlign: 'center', vAlign: 'center' },
    ]
  };
  // 初始化表格
  const workBook = initSheet($('#area-spread')[0], setting);
  lockUtil.lockSpreads([workBook], locked || areaLocked);
  workBook.options.allowExtendPasteRange = false;
  workBook.options.allowUserDragDrop = false;
  workBook.options.allowUserDragFill = false;
  const sheet = workBook.getSheet(0);

  // 排序显示
  cache.sort((a, b) => a.serialNo - b.serialNo);

  // 显示数据
  showData(sheet, cache, setting.header);

  // 编辑处理
  async function handleEdit(changedCells) {
    const updateData = [];
    let reSort = false;
    changedCells.forEach(({ row, col }) => {
      const field = setting.header[col].dataCode;
      let value = sheet.getValue(row, col);
      if (field === 'serialNo') {
        reSort = true;
        value = +value;
      }
      updateData.push({
        row,
        field,
        value,
        ID: cache[row].ID,
      });
    });
    try {
      await ajaxPost('/priceInfo/editArea', { updateData }, TIME_OUT);
      updateData.forEach(({ row, field, value }) => cache[row][field] = value);
      if (reSort) {
        cache.sort((a, b) => a.serialNo - b.serialNo);
        showData(sheet, cache, setting.header);
      }
    } catch (err) {
      // 恢复各单元格数据
      sheetCommonObj.renderSheetFunc(sheet, () => {
        changedCells.forEach(({ row, col, field }) => {
          sheet.setValue(row, col, cache[row][field]);
        });
      });
    }
  }

  const bindEdit = () => {
    sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
      const changedCells = [{ row: info.row, col: info.col }];
      handleEdit(changedCells);
    });
    sheet.bind(GC.Spread.Sheets.Events.RangeChanged, function (e, info) {
      handleEdit(info.changedCells);
    });
  };

  bindEdit();

  /* sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
    const changedCells = [{ row: info.row, col: info.col }];
    handleEdit(changedCells);
  });
  sheet.bind(GC.Spread.Sheets.Events.RangeChanged, function (e, info) {
    handleEdit(info.changedCells);
  }); */

  const curArea = { ID: null, name: '' };
  // 焦点变更处理
  const debounceSelectionChanged = _.debounce(function (e, info) {
    const row = info.newSelections && info.newSelections[0] ? info.newSelections[0].row : 0;
    handleSelectionChanged(row);
  }, DEBOUNCE_TIME, { leading: true }); // leading = true : 先触发再延迟
  function handleSelectionChanged(row) {
    const areaItem = cache[row];
    curArea.ID = areaItem && areaItem.ID || null;
    curArea.name = areaItem && areaItem.name || '';
    CLASS_BOOK.initData(libID, curArea.ID);
  }
  sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, debounceSelectionChanged);

  // 新增
  async function insert() {
    const data = {
      compilationID,
      ID: uuid.v1(),
      name: '',
    };
    try {
      $.bootstrapLoading.start();
      await ajaxPost('/priceInfo/insertArea', { insertData: [data] });
      // 新增的数据总是添加在最后
      sheet.addRows(cache.length, 1);
      cache.push(data);
      const lastRow = cache.length - 1;
      sheet.setSelection(lastRow, 0, 1, 1);
      sheet.showRow(lastRow, GC.Spread.Sheets.VerticalPosition.top);
      handleSelectionChanged(lastRow);
    } catch (err) {
      alert(err);
    } finally {
      $.bootstrapLoading.end();
    }
  }

  // 删除
  async function del() {
    try {
      $.bootstrapLoading.start();
      await ajaxPost('/priceInfo/deleteArea', { deleteData: [curArea.ID] });
      const index = cache.findIndex(item => item.ID === curArea.ID);
      sheet.deleteRows(index, 1);
      cache.splice(index, 1);
      const row = sheet.getActiveRowIndex();
      handleSelectionChanged(row);
    } catch (err) {
      alert(err);
    } finally {
      $.bootstrapLoading.end();
    }
  }

  // 右键功能
  function buildContextMenu() {
    $.contextMenu({
      selector: '#area-spread',
      build: function ($triggerElement, e) {
        // 控制允许右键菜单在哪个位置出现
        const offset = $('#area-spread').offset();
        const x = e.pageX - offset.left;
        const y = e.pageY - offset.top;
        const target = sheet.hitTest(x, y);
        if (target.hitTestType === 3) { // 在表格内
          const sel = sheet.getSelections()[0];
          if (sel && sel.rowCount === 1 && typeof target.row !== 'undefined') {
            const orgRow = sheet.getActiveRowIndex();
            if (orgRow !== target.row) {
              sheet.setActiveCell(target.row, target.col);
              handleSelectionChanged(target.row);
            }
          }
          return {
            items: {
              lock: {
                name: areaLocked ? '解锁' : '锁定',
                icon: areaLocked ? "fa-unlock" : 'fa-lock',
                disabled: function () {
                  return locked;
                },
                callback: function (key, opt) {
                  areaLocked = !areaLocked;
                  if (locked || areaLocked) {
                    lockUtil.lockSpreads([workBook], locked || areaLocked);
                  } else {
                    lockUtil.unLockSpreads([workBook]);
                    bindEdit();
                  }
                }
              },
              insert: {
                name: '新增',
                icon: "fa-arrow-left",
                disabled: function () {
                  return locked || areaLocked;
                },
                callback: function (key, opt) {
                  insert();
                }
              },
              del: {
                name: '删除',
                icon: "fa-arrow-left",
                disabled: function () {
                  return locked || areaLocked || !cache[target.row];
                },
                callback: function (key, opt) {
                  del();
                }
              },
            }
          };
        }
        else {
          return false;
        }
      }
    });
  }
  buildContextMenu();

  return {
    handleSelectionChanged,
    curArea,
    cache,
  }

})();