linkmore-design 1.0.63 → 1.0.67

package/lib/Approval/index.js

@@ -0,0 +1,316 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ = require("..");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var prefixCls = 'lm_approval';
+var colors = ['#36BCF1', '#AE86DC', '#8BD248', '#F5A173'];
+var statusMap = new Map([[1, '审核中'], [2, '已审核'], [3, '未通过']]);
+var defaultStatus = 1;
+
+var getLastChar = function getLastChar(name) {
+  return name.substring(name.length - 1, name.length);
+};
+
+var LMDrawer = function LMDrawer(props) {
+  var _props$visible = props.visible,
+      visible = _props$visible === void 0 ? false : _props$visible,
+      _props$title = props.title,
+      title = _props$title === void 0 ? '' : _props$title,
+      _props$status = props.status,
+      status = _props$status === void 0 ? defaultStatus : _props$status,
+      _props$userType = props.userType,
+      userType = _props$userType === void 0 ? 'self' : _props$userType,
+      close = props.close,
+      children = props.children,
+      _props$onComment = props.onComment,
+      onComment = _props$onComment === void 0 ? function () {} : _props$onComment,
+      _props$onRefuse = props.onRefuse,
+      onRefuse = _props$onRefuse === void 0 ? function () {} : _props$onRefuse,
+      _props$onAgree = props.onAgree,
+      onAgree = _props$onAgree === void 0 ? function () {} : _props$onAgree;
+  var currentStatusCls = (0, _classnames.default)(prefixCls + '_title_status');
+  var drawerCls = (0, _classnames.default)(prefixCls + '_drawer');
+  var statusText = statusMap.has(status) ? statusMap.get(status) : statusMap.get(1);
+
+  var handleClose = function handleClose() {
+    visible = false;
+    close();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Drawer, {
+    className: drawerCls,
+    visible: visible,
+    title: title,
+    onClose: handleClose,
+    extra: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: currentStatusCls
+    }, // 审核中
+    status === 1 && /*#__PURE__*/_react.default.createElement(_.IconFont, {
+      className: 'icon blue',
+      type: "lmweb-yuanxing-gengduo"
+    }), // 已审核
+    status === 2 && /*#__PURE__*/_react.default.createElement(_.IconFont, {
+      className: 'icon green',
+      type: "lmweb-check-circle-fill"
+    }), // 未通过
+    status === 3 && /*#__PURE__*/_react.default.createElement(_.IconFont, {
+      className: 'icon grey',
+      type: "lmweb-stop"
+    }), /*#__PURE__*/_react.default.createElement("span", null, statusText)), status === 1 && userType === 'approver' && /*#__PURE__*/_react.default.createElement(_.Space, null, /*#__PURE__*/_react.default.createElement(_.Button, {
+      size: "small",
+      onClick: onComment
+    }, "\u4EC5\u8BC4\u8BBA"), /*#__PURE__*/_react.default.createElement(_.Button, {
+      size: "small",
+      onClick: onRefuse,
+      style: {
+        borderColor: '#FA4F53',
+        color: '#FA4F53'
+      }
+    }, "\u62D2\u7EDD"), /*#__PURE__*/_react.default.createElement(_.Button, {
+      size: "small",
+      onClick: onAgree,
+      type: "primary"
+    }, "\u540C\u610F")))
+  }, children);
+};
+
+var ApprovalItem = function ApprovalItem(props) {
+  var _props$avator = props.avator,
+      avator = _props$avator === void 0 ? '' : _props$avator,
+      _props$name = props.name,
+      name = _props$name === void 0 ? '' : _props$name,
+      _props$time = props.time,
+      time = _props$time === void 0 ? '' : _props$time,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'start' : _props$type,
+      _props$everyoneAgree = props.everyoneAgree,
+      everyoneAgree = _props$everyoneAgree === void 0 ? false : _props$everyoneAgree,
+      _props$comment = props.comment,
+      comment = _props$comment === void 0 ? null : _props$comment,
+      approverList = props.approverList,
+      carbonCopyList = props.carbonCopyList,
+      _cacheColorMap = props._cacheColorMap,
+      _color = props._color,
+      _status = props._status;
+  var itemCls = (0, _classnames.default)(prefixCls + '_item');
+  var itemHeaderCls = (0, _classnames.default)(itemCls + '_header');
+  var itemBodyCls = (0, _classnames.default)(itemCls + '_body');
+
+  var getIcon = function getIcon() {
+    if (_status === 1) {
+      return /*#__PURE__*/_react.default.createElement(_.IconFont, {
+        className: 'icon blue',
+        type: "lmweb-yuanxing-gengduo"
+      });
+    }
+
+    if (_status === 2) {
+      return /*#__PURE__*/_react.default.createElement(_.IconFont, {
+        className: 'icon green',
+        type: "lmweb-check-circle-fill"
+      });
+    }
+
+    if (_status === 3) {
+      return /*#__PURE__*/_react.default.createElement(_.IconFont, {
+        className: 'icon red',
+        type: "lmweb-close-circle-fill"
+      });
+    }
+
+    return null;
+  };
+
+  var getApprovalText = function getApprovalText() {
+    if (type === 'refuse') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'desc red'
+      }, "\u62D2\u7EDD");
+    }
+
+    if (type === 'start') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'desc green'
+      }, "\u53D1\u8D77\u5BA1\u6279");
+    }
+
+    if (type === 'comment') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'desc grey'
+      }, "\u4EC5\u8BC4\u8BBA");
+    }
+
+    if (type === 'carbonCopy') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'desc grey'
+      }, "\u5DF2\u6284\u90018\u4EBA");
+    }
+
+    if (type === 'agree') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'desc green'
+      }, "\u5DF2\u540C\u610F");
+    }
+
+    if (type === 'pending') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'desc blue'
+      }, "\u5BA1\u6838\u4E2D");
+    }
+
+    return null;
+  };
+
+  var renderTip = function renderTip() {
+    if (type === 'pending') {
+      if (everyoneAgree) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "agree-tip"
+        }, "\u9700\u8981\u6240\u6709\u5BA1\u6279\u4EBA\u90FD\u540C\u610F");
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "agree-tip"
+      }, "\u81F3\u5C11\u4E00\u4E2A\u5BA1\u6279\u4EBA\u540C\u610F\u5373\u53EF");
+    }
+
+    return null;
+  };
+
+  var renderComment = function renderComment() {
+    if (comment) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'comment'
+      }, comment);
+    }
+
+    return null;
+  };
+
+  var renderList = function renderList() {
+    var list = approverList || carbonCopyList || [];
+
+    if (list.length) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'lm-approver-box'
+      }, list.map(function (item, i) {
+        var circleColor;
+
+        if (_cacheColorMap.has(item)) {
+          circleColor = _cacheColorMap.get(item);
+        } else {
+          circleColor = colors[parseInt(Math.random() * 4 + '')];
+
+          _cacheColorMap.set(item, circleColor);
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: 'lm-approver-cell',
+          key: item + i
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'lm-approver-circle',
+          style: {
+            backgroundColor: circleColor
+          }
+        }, getLastChar(item)), /*#__PURE__*/_react.default.createElement("span", null, item));
+      }));
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: itemCls
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: itemHeaderCls
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "avator"
+  }, avator ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
+    className: 'picture',
+    src: avator,
+    alt: ""
+  }), getIcon()) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'subname',
+    style: {
+      backgroundColor: _color
+    }
+  }, getLastChar(name)), getIcon())), /*#__PURE__*/_react.default.createElement("div", {
+    className: "content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'name'
+  }, name), getApprovalText()), /*#__PURE__*/_react.default.createElement("div", {
+    className: "right"
+  }, time)), type !== 'start' && /*#__PURE__*/_react.default.createElement("div", {
+    className: itemBodyCls
+  }, renderTip(), renderComment(), renderList()));
+};
+
+var Approval = function Approval(props) {
+  var _props$status2 = props.status,
+      status = _props$status2 === void 0 ? 1 : _props$status2,
+      _props$steps = props.steps,
+      steps = _props$steps === void 0 ? [] : _props$steps;
+
+  var _cacheColorMap = new Map();
+
+  steps.forEach(function (step, i) {
+    if (i === 0) {
+      step._status = status;
+    } else {
+      step._status = 2;
+    }
+
+    if (!step._color) {
+      if (_cacheColorMap.has(step.name)) {
+        step._color = _cacheColorMap.get(step.name);
+      } else {
+        step._color = colors[parseInt(Math.random() * 4 + '')];
+
+        _cacheColorMap.set(step.name, step._color);
+      }
+    }
+  });
+  var list = steps.map(function (step, i) {
+    return /*#__PURE__*/_react.default.createElement(ApprovalItem, Object.assign({
+      key: step.name + i,
+      _cacheColorMap: _cacheColorMap
+    }, step));
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list);
+};
+
+var LMApproval = function LMApproval(props) {
+  var className = props.className,
+      others = __rest(props, ["className"]);
+
+  return /*#__PURE__*/_react.default.createElement(LMDrawer, Object.assign({
+    className: (0, _classnames.default)(className, prefixCls)
+  }, others), /*#__PURE__*/_react.default.createElement(Approval, Object.assign({}, others)));
+};
+
+var _default = LMApproval;
+exports.default = _default;