@titaui/pc 1.16.5 → 1.16.6-beta.3

package/lib/components/okr-excel-create/components-new/okr-visibility/index.js

@@ -0,0 +1,252 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = _interopRequireDefault(require("../../../user-selector/index"));
+
+var _popup = _interopRequireDefault(require("../../../popup"));
+
+var _openData = require("../../../../utils/open-data");
+
+var _getLocale = require("../../../../utils/getLocale");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var prefix = 'tita-okr-excel-create-visibility';
+
+var getVisibilityList = function getVisibilityList() {
+  return [{
+    value: 1,
+    label: (0, _getLocale.getLocale)('OKR_MyO_Pop_Public')
+  }, {
+    value: 2,
+    label: (0, _getLocale.getLocale)('OKR_MyO_From_Associatedmem')
+  }, {
+    value: 3,
+    label: (0, _getLocale.getLocale)('OKR_MyO_Pop_Directrep')
+  }, {
+    value: 4,
+    label: (0, _getLocale.getLocale)('OKR_MyO_Pop_Specified')
+  }];
+};
+
+var getVisibilityMapText = function getVisibilityMapText() {
+  return {
+    1: (0, _getLocale.getLocale)('OKR_MyO_Pop_Public'),
+    2: (0, _getLocale.getLocale)('OKR_MyO_From_Associatedmem'),
+    3: (0, _getLocale.getLocale)('OKR_MyO_Pop_Directrep'),
+    4: (0, _getLocale.getLocale)('OKR_MyO_Pop_Specified')
+  };
+};
+
+var VisibilityColorMap = {
+  1: 'rgba(240,94,94,0.1600)',
+  2: 'rgba(240,163,38,0.1600)',
+  3: 'rgba(0,214,132,0.1600)',
+  4: 'rgba(40,121,255,0.1600)'
+};
+
+var Visibility = function Visibility(_ref) {
+  var visibility = _ref.visibility,
+      visiableLimit = _ref.visiableLimit,
+      onChangeVisiableLimit = _ref.onChangeVisiableLimit;
+
+  var _useState = (0, _react.useState)(visibility),
+      _useState2 = _slicedToArray(_useState, 2),
+      visibilityState = _useState2[0],
+      setVisibilityState = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(visiableLimit),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visiableLimitState = _useState4[0],
+      setVisiableLimitState = _useState4[1];
+
+  var oldSelect = (0, _react.useRef)(1);
+  var selectorRef = (0, _react.useRef)();
+  var popRef = (0, _react.useRef)();
+  var onOk = (0, _react.useCallback)(function (selectNodes) {
+    var departments = selectNodes.departments,
+        groups = selectNodes.groups,
+        users = selectNodes.users;
+
+    if (departments.length === 0 && groups.length === 0 && users.length === 0) {
+      setVisibilityState(oldSelect.current);
+
+      if (selectorRef.current) {
+        // @ts-ignore
+        selectorRef.current.close();
+      }
+
+      return;
+    }
+
+    if (onChangeVisiableLimit) {
+      onChangeVisiableLimit(4, selectNodes);
+    }
+
+    setVisiableLimitState(selectNodes);
+
+    if (selectorRef.current) {
+      // @ts-ignore
+      selectorRef.current.close();
+    } // @ts-ignore
+
+
+    popRef.current && popRef.current.close();
+  }, [onChangeVisiableLimit]);
+  var handleChangeVisibility = (0, _react.useCallback)(function (data) {
+    setVisibilityState(data.value);
+
+    if (data.value === 4) {
+      if (selectorRef.current) {
+        // @ts-ignore
+        selectorRef.current.open();
+      }
+    } else {
+      oldSelect.current = data.value;
+
+      if (onChangeVisiableLimit) {
+        console.log('data.value', data.value);
+        onChangeVisiableLimit(data.value);
+      } // @ts-ignore
+
+
+      popRef.current && popRef.current.close();
+    }
+  }, [onChangeVisiableLimit]);
+  var renderText = (0, _react.useMemo)(function () {
+    var result = [];
+
+    if (visiableLimitState) {
+      if (visiableLimitState.users && visiableLimitState.users.length > 0) {
+        visiableLimitState.users.forEach(function (item, index) {
+          if (index !== 0) {
+            result.push('、');
+          }
+
+          result.push( /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
+            name: item.name,
+            id: item.userId,
+            type: 'userName'
+          }));
+        });
+      }
+
+      if (visiableLimitState.departments && visiableLimitState.departments.length > 0) {
+        visiableLimitState.departments.forEach(function (item, index) {
+          result.push(index === 0 && result.length === 0 ? '' : '、');
+          result.push( /*#__PURE__*/_react["default"].createElement(_openData.OpenDepartmentName, {
+            name: item.name,
+            id: item.id
+          }));
+        });
+      }
+
+      if (visiableLimitState.groups && visiableLimitState.groups.length > 0) {
+        visiableLimitState.groups.forEach(function (item, index) {
+          result.push(index === 0 && result.length === 0 ? '' : '、');
+          result.push(item.name);
+        });
+      }
+    }
+
+    return result.length > 0 ? result : getVisibilityMapText()[visibilityState];
+  }, [visiableLimitState, visibilityState]);
+  var renderPopContent = (0, _react.useMemo)(function () {
+    var list = getVisibilityList();
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(prefix, "__selector")
+    }, list.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(prefix, "__selector-item"),
+        onClick: function onClick() {
+          return handleChangeVisibility(item);
+        }
+      }, item.label);
+    }));
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix
+  }, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    popup: renderPopContent,
+    popupPlacement: "bottom",
+    ref: popRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__content")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(prefix, "__content-text"),
+    style: {
+      background: VisibilityColorMap[visibilityState]
+    }
+  }, renderText))), /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    popupAlign: {
+      offset: [-550, -100],
+      overflow: {
+        adjustX: true,
+        adjustY: true
+      },
+      targetOffset: [0, 0]
+    },
+    ref: selectorRef,
+    multiple: true,
+    onOk: onOk,
+    position: "centerRight",
+    selectNodes: visiableLimitState || {},
+    trigger: /*#__PURE__*/_react["default"].createElement("div", null)
+  }));
+};
+
+var _default = function _default(update) {
+  return function (_ref2) {
+    var data = _ref2.data,
+        rootIdx = _ref2.rootIdx,
+        rootData = _ref2.rootData;
+    var rootDataRef = (0, _react.useRef)(rootData);
+    (0, _react.useEffect)(function () {
+      rootDataRef.current = rootData;
+    }, [rootData]);
+
+    var handleVisibilityChange = function handleVisibilityChange(value, visibilityScope) {
+      rootDataRef.current.visibility = value;
+      rootDataRef.current.visibilityScope = visibilityScope;
+      update({
+        type: 'update',
+        rootIdx: rootIdx,
+        itemData: rootDataRef.current
+      });
+    };
+
+    return /*#__PURE__*/_react["default"].createElement(Visibility, {
+      visibility: data.visibility,
+      onChangeVisiableLimit: handleVisibilityChange,
+      visiableLimit: data.visibilityScope
+    });
+  };
+};
+
+exports["default"] = _default;

package/lib/components/okr-excel-create/constant.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CycleMapColor = void 0;
+var CycleMapColor = {
+  '3': 'rgba(0,214,132,0.16)',
+  '4': 'rgba(40,121,255,0.16)',
+  '2': 'rgba(240,163,38,0.16)',
+  '5': 'rgba(240,94,94,0.16)',
+  '1': 'rgba(38,216,240,0.16)'
+};
+exports.CycleMapColor = CycleMapColor;

package/lib/components/okr-excel-create/hooks.js

@@ -0,0 +1,314 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOkrColumns = exports.dic = exports["default"] = void 0;
+
+var _react = require("react");
+
+var _setting = require("./setting");
+
+var _getLocale = require("../../utils/getLocale");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// 当需要强制更新客户端缓存的列配置时可以更改此版本号
+var columnOptionVersion = '1.0.0';
+
+var dic = function dic() {
+  return {
+    '目标': (0, _getLocale.getLocale)('Mod_Objective'),
+    '关键成果': (0, _getLocale.getLocale)('Mod_KeyResults'),
+    '目标（O）': "".concat((0, _getLocale.getLocale)('Mod_Objective'), "\uFF08O\uFF09"),
+    '目标类型': (0, _getLocale.getLocale)('OKR_MyO_Pop_Type'),
+    '目标类别': (0, _getLocale.getLocale)('OKR_MyO_Es_Category'),
+    '目标周期': (0, _getLocale.getLocale)('Mod_period'),
+    '目标负责人': (0, _getLocale.getLocale)('OKR_MyO_Pop_Owner'),
+    '对齐目标': (0, _getLocale.getLocale)('OKR_MyO_Pop_SetAlignment'),
+    '可见范围': (0, _getLocale.getLocale)('OKR_MyO_Pop_Title_Perm'),
+    '目标完成度': "".concat((0, _getLocale.getLocale)('Mod_Objective')).concat((0, _getLocale.getLocale)('OKR_MyO_Pop_Upd_Progresss1')),
+    '目标最新进展': "".concat((0, _getLocale.getLocale)('Mod_Objective')).concat((0, _getLocale.getLocale)('Pro_page_Plan_Latestpro')),
+    '关键成果（KR）': "".concat((0, _getLocale.getLocale)('Mod_KeyResults'), "\uFF08KR\uFF09"),
+    'KR 负责人': "KR ".concat((0, _getLocale.getLocale)('OKR_MyO_Pop_Owner')),
+    'KR 权重': (0, _getLocale.getLocale)('OKR_MyO_Text_Weights'),
+    '信心指数': (0, _getLocale.getLocale)('OKR_MyO_KRP_Confidence'),
+    '关键任务': "".concat((0, _getLocale.getLocale)('OKR_MyO_Pop_KeyTasks'))
+  };
+};
+
+exports.dic = dic;
+
+// 判断是否需要重置缓存，避免出现客户端缓存无法失效问题
+function needCoverCache(optionDic, columns) {
+  var cacheVersion = localStorage.getItem('columnOptionVersion'); // 如果版本号不一致
+
+  if (cacheVersion !== columnOptionVersion) {
+    localStorage.setItem('columnOptionVersion', columnOptionVersion);
+    return true;
+  } // 如果 columns 有新增的列时
+
+
+  var newColumn = columns.find(function (item) {
+    return !optionDic[item.field];
+  }); // 这里这么写方便后续扩展
+
+  if (newColumn) return true;
+  return false;
+}
+
+function createDefaultOptions(cacheOptionDic, columns) {
+  var optionDic = {};
+  columns.forEach(function (item, idx) {
+    optionDic[item.field] = {
+      key: item.field,
+      hide: item.hide || false,
+      width: item.width,
+      idx: idx
+    }; // 如果存在缓存，则复用现有的显示状态，避免在重置缓存后让用户以为是BUG
+
+    if (cacheOptionDic[item.field]) {
+      optionDic[item.field].hide = cacheOptionDic[item.field].hide;
+    }
+  });
+  return optionDic;
+}
+
+function getCacheColumnOptions(columns) {
+  var optionStr = localStorage.getItem('cacheOkrColumnOptions') || '{}';
+  var optionDic = JSON.parse(optionStr);
+  if (optionStr === '{}' || needCoverCache(optionDic, columns)) optionDic = createDefaultOptions(optionDic, columns);
+  return optionDic;
+}
+
+function setCacheColumnOptions(option) {
+  localStorage.setItem('cacheOkrColumnOptions', JSON.stringify(option));
+}
+/** 判断是否开启了高级功能，如果没有开启，则将 hide 设置为 false */
+
+
+function getHide(field, currentHide) {
+  var dicData = dic();
+
+  switch (field) {
+    case dicData['类型']:
+      if (!_setting.showKrClassify) return true;
+      return currentHide;
+
+    case dicData['信心指数']:
+      if (!_setting.showKrConfidence) return true;
+      return currentHide;
+
+    case dicData['权重']:
+      if (!_setting.showKrWeight) return true;
+      return currentHide;
+
+    case dicData['KR 最新进展']:
+      if (!_setting.showKrProgress) return true;
+      return currentHide;
+
+    default:
+      return currentHide;
+  }
+}
+
+function formatColumnsByOption(optionDic, columns) {
+  var formatColumn = new Array(columns.length);
+
+  try {
+    columns.forEach(function (item) {
+      var option = optionDic[item.field];
+      formatColumn[option.idx] = _objectSpread(_objectSpread({}, item), {}, {
+        hide: getHide(item.field, option.hide),
+        width: option.width
+      });
+    });
+  } catch (error) {
+    // 避免解析过程中发生错误导致列无法展示
+    setCacheColumnOptions(createDefaultOptions(optionDic, columns));
+    return columns;
+  }
+
+  return formatColumn;
+}
+
+var defaultColumnCtlData = function defaultColumnCtlData() {
+  var dicData = dic();
+  return [{
+    label: dicData['目标'],
+    value: 'O',
+    type: 'group',
+    children: [{
+      label: dicData['目标（O）'],
+      value: '0,0',
+      disable: true
+    }, {
+      label: dicData['目标类型'],
+      value: '0,1',
+      visible: _setting.showKrClassify
+    }, {
+      label: dicData['目标类别'],
+      value: '0,2',
+      visible: _setting.showKrClassify
+    }, {
+      label: dicData['目标负责人'],
+      value: '0,3'
+    }, {
+      label: dicData['对齐目标'],
+      value: '0,4'
+    }, {
+      label: dicData['可见范围'],
+      value: '0,5'
+    }, {
+      label: dicData['目标完成度'],
+      value: '0,6'
+    }, {
+      label: dicData['目标最新进展'],
+      value: '0,7'
+    }]
+  }, {
+    label: dicData['关键成果'],
+    value: 'KR',
+    type: 'group',
+    children: [{
+      label: dicData['关键成果（KR）'],
+      value: '1,0',
+      disable: true
+    }, {
+      label: dicData['KR 负责人'],
+      value: '1,1'
+    }, {
+      label: dicData['KR 权重'],
+      value: '1,2',
+      visible: _setting.showKrWeight,
+      disable: true
+    }, {
+      label: dicData['信心指数'],
+      value: '1,3',
+      visible: _setting.showKrConfidence
+    }]
+  }];
+}; // 标记展示的列
+
+
+function formatColumnCtlData(optionDic, columnCtlData) {
+  columnCtlData.map(function (item) {
+    return item.children || [];
+  }).reduce(function (pre, cur) {
+    return [].concat(_toConsumableArray(pre), _toConsumableArray(cur));
+  }).forEach(function (item) {
+    if (optionDic[item.label]) {
+      item.checked = !optionDic[item.label].hide;
+    } else {
+      item.checked = false;
+    }
+  });
+  return columnCtlData;
+}
+
+var useOkrColumns = function useOkrColumns(columns) {
+  var _useState = (0, _react.useState)(getCacheColumnOptions(columns)),
+      _useState2 = _slicedToArray(_useState, 2),
+      optionDic = _useState2[0],
+      setOptionDic = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(formatColumnsByOption(optionDic, columns)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      columnDefs = _useState4[0],
+      setColumnDefs = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    setColumnDefs(formatColumnsByOption(optionDic, columns));
+  }, [columns]); // 右上角控制列是否展示的数据
+
+  var _useState5 = (0, _react.useState)(formatColumnCtlData(optionDic, defaultColumnCtlData())),
+      _useState6 = _slicedToArray(_useState5, 2),
+      columnCtlData = _useState6[0],
+      setColumnCtlData = _useState6[1]; // 用于处理列的移动事件，在用户下次访问时保持该顺序
+
+
+  var onColumnMoved = (0, _react.useCallback)(function (moveField, toIndex) {
+    var oldIdx = optionDic[moveField].idx;
+    var success = 0;
+    Object.values(optionDic).find(function (option) {
+      if (success === 2) return true;
+
+      if (option.idx === toIndex) {
+        option.idx = oldIdx;
+        success++;
+        return success === 2;
+      }
+
+      if (option.idx === oldIdx) {
+        option.idx = toIndex;
+        success++;
+        return success === 2;
+      }
+    });
+    setOptionDic(_objectSpread({}, optionDic));
+    setCacheColumnOptions(optionDic);
+  }, [optionDic]);
+  var onColumnsHideOrShow = (0, _react.useCallback)(function (value, item) {
+    var _columnCtlData$level;
+
+    var _ref = value.split(','),
+        _ref2 = _slicedToArray(_ref, 2),
+        level1Idx = _ref2[0],
+        level2Idx = _ref2[1];
+
+    var fieldName = item.label; // @ts-ignore
+
+    var itemChecked = (_columnCtlData$level = columnCtlData[level1Idx]) === null || _columnCtlData$level === void 0 ? void 0 : _columnCtlData$level.children[level2Idx].checked;
+    var checked = !itemChecked; // @ts-ignore
+
+    columnCtlData[level1Idx].children[level2Idx].checked = checked;
+    setColumnCtlData(_toConsumableArray(columnCtlData));
+
+    if (optionDic[fieldName]) {
+      optionDic[fieldName].hide = !checked;
+      setOptionDic(_objectSpread({}, optionDic));
+      setColumnDefs(formatColumnsByOption(optionDic, columns));
+      setCacheColumnOptions(optionDic);
+    }
+  }, [columnCtlData, columns]);
+  var onColumnResized = (0, _react.useCallback)(function (moveField, width) {
+    optionDic[moveField].width = width;
+    setOptionDic(_objectSpread({}, optionDic));
+    setCacheColumnOptions(optionDic);
+  }, [optionDic]);
+  return {
+    columnDefs: columnDefs,
+    onColumnMoved: onColumnMoved,
+    onColumnResized: onColumnResized,
+    columnCtlData: columnCtlData,
+    onColumnsHideOrShow: onColumnsHideOrShow
+  };
+};
+
+exports.useOkrColumns = useOkrColumns;
+var _default = useOkrColumns;
+exports["default"] = _default;

package/lib/components/okr-excel-create/img/base-info-add.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>添加</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="目标推屏-基本信息" transform="translate(-1264.000000, -726.000000)">
+            <g id="点赞" transform="translate(546.000000, 74.000000)">
+                <g id="时间周期" transform="translate(22.000000, 512.000000)">
+                    <g id="编组-4" transform="translate(10.000000, 30.000000)">
+                        <g id="添加" transform="translate(686.000000, 110.000000)">
+                            <circle id="椭圆形" fill="#F0F2F5" cx="12" cy="12" r="12"></circle>
+                            <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="7" y="7" width="10" height="10"></rect>
+                            <path d="M11.525,11.525 L11.525,7.725 C11.525,7.46266474 11.7376647,7.25 12,7.25 C12.2623353,7.25 12.475,7.46266474 12.475,7.725 L12.475,11.525 L16.275,11.525 C16.5373353,11.525 16.75,11.7376647 16.75,12 C16.75,12.2623353 16.5373353,12.475 16.275,12.475 L12.475,12.475 L12.475,16.275 C12.475,16.5373353 12.2623353,16.75 12,16.75 C11.7376647,16.75 11.525,16.5373353 11.525,16.275 L11.525,12.475 L7.725,12.475 C7.46266474,12.475 7.25,12.2623353 7.25,12 C7.25,11.7376647 7.46266474,11.525 7.725,11.525 L11.525,11.525 Z" id="路径" fill="#2879FF" fill-rule="nonzero"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/okr-excel-create/img/desire.svg

@@ -0,0 +1,61 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<defs>
+		<filter x="4.7%" y="-2%" width="90.6%" height="104%" filterUnits="objectBoundingBox" id="c">
+			<feOffset dy=".8" in="SourceAlpha" result="shadowOffsetInner1" />
+			<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" />
+			<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.759565549 0 0 0 0 0.759565549 0 0 0 1 0" in="shadowInnerInner1" />
+		</filter>
+		<filter x="6.7%" y="0%" width="86.6%" height="100%" filterUnits="objectBoundingBox" id="f">
+			<feOffset in="SourceAlpha" result="shadowOffsetInner1" />
+			<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" />
+			<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.952941176 0 0 0 0 0.701960784 0 0 0 1 0" in="shadowInnerInner1" />
+		</filter>
+		<filter x="6.7%" y="0%" width="86.6%" height="100%" filterUnits="objectBoundingBox" id="i">
+			<feOffset in="SourceAlpha" result="shadowOffsetInner1" />
+			<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1" />
+			<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.952941176 0 0 0 0 0.701960784 0 0 0 1 0" in="shadowInnerInner1" />
+		</filter>
+		<filter x="-2.9%" y="-1.9%" width="109.6%" height="107.7%" filterUnits="objectBoundingBox" id="j">
+			<feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1" />
+			<feColorMatrix values="0 0 0 0 0.964645607 0 0 0 0 0.491917792 0 0 0 0 0.52828147 0 0 0 1 0" in="shadowOffsetOuter1" />
+		</filter>
+		<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
+			<stop stop-color="#FF9C9C" offset="0%" />
+			<stop stop-color="#F36E6E" offset="100%" />
+		</linearGradient>
+		<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d">
+			<stop stop-color="#ED6868" offset="0%" />
+			<stop stop-color="#FFA8B0" offset="100%" />
+		</linearGradient>
+		<linearGradient x1="50%" y1=".126%" x2="50%" y2="99.779%" id="g">
+			<stop stop-color="#F68585" offset=".032%" />
+			<stop stop-color="#FFB8B8" offset="100%" />
+		</linearGradient>
+		<path id="b" d="M10 0l8.66 5v10L10 20l-8.66-5V5z" />
+		<path id="e" d="M10 1.333l7.506 4.334v8.666L10 18.667l-7.506-4.334V5.667z" />
+		<path id="h" d="M10 2l6.928 4v8L10 18l-6.928-4V6z" />
+		<text id="k" font-family="PingFangSC-Medium, PingFang SC" font-size="9" font-weight="400" fill="#FFE8E8">
+			<tspan x="5.5" y="13">
+				愿
+			</tspan>
+		</text>
+	</defs>
+	<g fill="none" fill-rule="evenodd">
+		<g transform="translate(-1)">
+			<use fill="url(#a)" xlink:href="#b" />
+			<use fill="#000" filter="url(#c)" xlink:href="#b" />
+		</g>
+		<g transform="translate(-1)">
+			<use fill="url(#d)" xlink:href="#e" />
+			<use fill="#000" filter="url(#f)" xlink:href="#e" />
+		</g>
+		<g transform="translate(-1)">
+			<use fill="url(#g)" xlink:href="#h" />
+			<use fill="#000" filter="url(#i)" xlink:href="#h" />
+		</g>
+		<g fill="#FFE8E8" transform="translate(-1)">
+			<use filter="url(#j)" xlink:href="#k" />
+			<use xlink:href="#k" />
+		</g>
+	</g>
+</svg>