linkmore-design 1.0.66 → 1.0.69

package/es/Approval/index.js

@@ -1,3 +1,5 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
 
@@ -11,38 +13,57 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import classNames from 'classnames';
-import { Button, Drawer, Space } from '..';
+import { Button, Drawer, IconFont, Space } from '..';
+import { ApprovalType } from './type';
+import { currentUserIsApprover, currentUserIsProposer, getStatus } from './util';
+import { wrapperAgree, wrapperComment, wrapperRefuse, getCurrentTime, getDistanceTime } from './handle';
 var prefixCls = 'lm_approval';
 var colors = ['#36BCF1', '#AE86DC', '#8BD248', '#F5A173'];
-var statusMap = new Map([[1, '审核中'], [2, '已审核'], [3, '未通过']]);
-var defaultStatus = 1;
+var cacheColorMap = new Map();
+
+var getColorWithCache = function getColorWithCache(key) {
+  var color;
+
+  if (cacheColorMap.has(key)) {
+    color = cacheColorMap.get(key);
+  } else {
+    color = colors[parseInt(Math.random() * 4 + '')];
+    cacheColorMap.set(key, color);
+  }
+
+  return color;
+};
+
+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,
+      user = props.user,
+      onClose = props.onClose,
       children = props.children,
+      _props$steps = props.steps,
+      steps = _props$steps === void 0 ? [] : _props$steps,
       _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 status = getStatus(steps);
   var currentStatusCls = classNames(prefixCls + '_title_status');
   var drawerCls = classNames(prefixCls + '_drawer');
-  var statusText = statusMap.has(status) ? statusMap.get(status) : statusMap.get(1);
+  var statusText = ApprovalType.toText(ApprovalType.APPROVAL, status);
 
   var handleClose = function handleClose() {
     visible = false;
-    close();
+    onClose();
   };
 
   return /*#__PURE__*/React.createElement(Drawer, {
@@ -52,7 +73,16 @@ var LMDrawer = function LMDrawer(props) {
     onClose: handleClose,
     extra: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: currentStatusCls
-    }, /*#__PURE__*/React.createElement("span", null, statusText)), status === 1 && userType === 'approver' && /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+    }, ApprovalType.isPending(ApprovalType.APPROVAL, status) && /*#__PURE__*/React.createElement(IconFont, {
+      className: 'icon blue',
+      type: "lmweb-yuanxing-gengduo"
+    }), ApprovalType.isAgree(ApprovalType.APPROVAL, status) && /*#__PURE__*/React.createElement(IconFont, {
+      className: 'icon green',
+      type: "lmweb-check-circle-fill"
+    }), ApprovalType.isRefuse(ApprovalType.APPROVAL, status) && /*#__PURE__*/React.createElement(IconFont, {
+      className: 'icon grey',
+      type: "lmweb-stop"
+    }), /*#__PURE__*/React.createElement("span", null, statusText)), ApprovalType.isPending(ApprovalType.APPROVAL, status) && currentUserIsApprover(steps, user) && /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
       size: "small",
       onClick: onComment
     }, "\u4EC5\u8BC4\u8BBA"), /*#__PURE__*/React.createElement(Button, {
@@ -77,134 +107,355 @@ var ApprovalItem = function ApprovalItem(props) {
       name = _props$name === void 0 ? '' : _props$name,
       _props$time = props.time,
       time = _props$time === void 0 ? '' : _props$time,
-      color = props.color,
-      status = props.status,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'start' : _props$type;
+      type = props.type,
+      _props$agreeList = props.agreeList,
+      agreeList = _props$agreeList === void 0 ? [] : _props$agreeList,
+      _props$approverList = props.approverList,
+      approverList = _props$approverList === void 0 ? [] : _props$approverList,
+      _props$everyoneAgree = props.everyoneAgree,
+      everyoneAgree = _props$everyoneAgree === void 0 ? false : _props$everyoneAgree,
+      _props$comment = props.comment,
+      comment = _props$comment === void 0 ? null : _props$comment,
+      _props$carbonCopyList = props.carbonCopyList,
+      carbonCopyList = _props$carbonCopyList === void 0 ? [] : _props$carbonCopyList,
+      _props$urge = props.urge,
+      urge = _props$urge === void 0 ? false : _props$urge,
+      approvalStatus = props.approvalStatus,
+      _isSelf = props._isSelf,
+      _user = props._user,
+      onUrge = props.onUrge,
+      onDeleteComment = props.onDeleteComment;
   var itemCls = classNames(prefixCls + '_item');
   var itemHeaderCls = classNames(itemCls + '_header');
-  var itemBodyCls = classNames(itemCls + '_body');
+  var itemBodyCls = classNames(itemCls + '_body', ApprovalType.isPending(type, approvalStatus) ? 'small' : '');
 
   var getIcon = function getIcon() {
-    if (status === 1) {
-      return /*#__PURE__*/React.createElement("i", {
-        className: 'icon iconfont lmweb-icon_china1'
+    if (ApprovalType.isRefuse(type, approvalStatus)) {
+      return /*#__PURE__*/React.createElement(IconFont, {
+        className: 'icon red',
+        type: "lmweb-close-circle-fill"
       });
     }
 
-    if (status === 2) {
-      return /*#__PURE__*/React.createElement("i", {
-        className: 'icon iconfont lmweb-icon_china1'
-      }); // return <img className='icon' src={fulfilledSvg} alt="" />
-    }
-
-    if (status === 3) {
-      return /*#__PURE__*/React.createElement("i", {
-        className: 'icon iconfont lmweb-icon_china1'
-      }); // return <img className='icon' src={rejectdSvg} alt="" />
+    if (ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/React.createElement(IconFont, {
+        className: 'icon blue',
+        type: "lmweb-yuanxing-gengduo"
+      });
     }
 
-    return null;
+    return /*#__PURE__*/React.createElement(IconFont, {
+      className: 'icon green',
+      type: "lmweb-check-circle-fill"
+    });
   };
 
   var getApprovalText = function getApprovalText() {
-    if (type === 'refuse') {
+    if (ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'desc blue'
+      }, "\u5BA1\u6838\u4E2D");
+    } else if (ApprovalType.isAgree(type, approvalStatus)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'desc green'
+      }, "\u5DF2\u540C\u610F");
+    } else if (ApprovalType.isRefuse(type, approvalStatus)) {
       return /*#__PURE__*/React.createElement("div", {
         className: 'desc red'
       }, "\u62D2\u7EDD");
-    }
-
-    if (type === 'start') {
+    } else if (type === ApprovalType.START) {
       return /*#__PURE__*/React.createElement("div", {
-        className: 'desc'
+        className: 'desc green'
       }, "\u53D1\u8D77\u5BA1\u6279");
-    }
-
-    if (type === 'comment') {
+    } else if (type === ApprovalType.ONLY_COMMENT) {
       return /*#__PURE__*/React.createElement("div", {
         className: 'desc grey'
       }, "\u4EC5\u8BC4\u8BBA");
+    } else if (type === ApprovalType.CARBON_COPY) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'desc grey'
+      }, "\u5DF2\u6284\u9001", carbonCopyList.length, "\u4EBA");
     }
 
-    if (type === 'carbonCopy') {
+    return null;
+  };
+
+  var renderTip = function renderTip() {
+    if (ApprovalType.isPending(type, approvalStatus)) {
+      if (everyoneAgree) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "agree-tip"
+        }, "\u9700\u8981\u6240\u6709\u5BA1\u6279\u4EBA\u90FD\u540C\u610F");
+      }
+
       return /*#__PURE__*/React.createElement("div", {
-        className: 'desc grey'
-      }, "\u5DF2\u6284\u90018\u4EBA");
+        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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'comment'
+      }, "\u201C", comment, "\u201D", ApprovalType.isOnlyComment(type) && currentUserIsProposer(_user, name) && /*#__PURE__*/React.createElement("div", {
+        className: 'comment-delete',
+        onClick: onDeleteComment
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        className: "icon",
+        type: "lmweb-delete"
+      }), " \u5220\u9664")));
     }
 
-    if (type === 'agree') {
+    return null;
+  };
+
+  var renderUrge = function renderUrge() {
+    // 当前用户是提议发起者 && 审核中
+    if (_isSelf && ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/React.createElement(Button, {
+        className: "urge",
+        disabled: urge,
+        size: "small",
+        onClick: onUrge
+      }, urge ? '已催办' : '催一下');
+    }
+
+    return null;
+  };
+
+  var renderList = function renderList() {
+    var list = [];
+
+    if (ApprovalType.isCC(type)) {
+      list = carbonCopyList;
+    } else if (ApprovalType.isApproval(type)) {
+      list = approverList.slice(agreeList.length);
+    }
+
+    var separate = type === ApprovalType.APPROVAL && everyoneAgree; // 审批拒绝
+
+    if (ApprovalType.isRefuse(type, approvalStatus)) {
+      return null;
+    } // 审批通过
+
+
+    if (ApprovalType.isAgree(type, approvalStatus)) {
+      return null;
+    }
+
+    if (list.length) {
       return /*#__PURE__*/React.createElement("div", {
-        className: 'desc'
-      }, "\u5DF2\u540C\u610F");
+        className: 'lm-approver-wrapper'
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'lm-approver-box'
+      }, list.map(function (item, i) {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: item + i
+        }, /*#__PURE__*/React.createElement("div", {
+          className: 'lm-approver-cell'
+        }, /*#__PURE__*/React.createElement("div", {
+          className: 'lm-approver-circle',
+          style: {
+            backgroundColor: getColorWithCache(item)
+          }
+        }, getLastChar(item)), /*#__PURE__*/React.createElement("span", null, item)), separate && i != list.length - 1 && /*#__PURE__*/React.createElement(IconFont, {
+          className: 'icon',
+          type: "lmweb-icon_m_put_away"
+        }));
+      })), renderUrge());
     }
 
     return null;
   };
 
-  var subname = name.substring(name.length - 1, name.length);
+  var renderTime = function renderTime() {
+    // 审核中
+    if (ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: 'yellow'
+      }, "\u5DF2\u7B49\u5F85".concat(getDistanceTime(time)));
+    }
+
+    return /*#__PURE__*/React.createElement("span", null, time);
+  };
+
+  var renderAvator = function renderAvator() {
+    if (ApprovalType.isCC(type)) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'cc-box'
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        className: 'cc',
+        type: "lmweb-a-chaosongrenchaosongyonghu-02"
+      })), getIcon());
+    }
+
+    if (ApprovalType.isPending(type, approvalStatus)) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'cc-box'
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        className: 'cc',
+        type: "lmweb-audit"
+      })), getIcon());
+    }
+
+    if (avator) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+        className: 'picture',
+        src: avator,
+        alt: ""
+      }), getIcon());
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: 'subname',
+      style: {
+        backgroundColor: getColorWithCache(name)
+      }
+    }, getLastChar(name)), getIcon());
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: itemCls
   }, /*#__PURE__*/React.createElement("div", {
     className: itemHeaderCls
   }, /*#__PURE__*/React.createElement("div", {
     className: "avator"
-  }, avator ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-    className: 'picture',
-    src: avator,
-    alt: ""
-  }), getIcon()) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: 'subname',
-    style: {
-      backgroundColor: color
-    }
-  }, subname), getIcon())), /*#__PURE__*/React.createElement("div", {
+  }, renderAvator()), /*#__PURE__*/React.createElement("div", {
     className: "content"
   }, /*#__PURE__*/React.createElement("div", {
     className: 'name'
   }, name), getApprovalText()), /*#__PURE__*/React.createElement("div", {
     className: "right"
-  }, time)), type !== 'start' && /*#__PURE__*/React.createElement("div", {
+  }, renderTime())), type !== ApprovalType.START && /*#__PURE__*/React.createElement("div", {
     className: itemBodyCls
-  }, "sdf"));
+  }, 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 {
-        var index = parseInt(Math.random() * 4 + '');
-        var color = colors[index];
-        step.color = color;
-        cacheColorMap.set(step.name, color);
-      }
+var Approval = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$proposer = props.proposer,
+      proposer = _props$proposer === void 0 ? '' : _props$proposer,
+      _props$user = props.user,
+      user = _props$user === void 0 ? '' : _props$user,
+      _props$steps2 = props.steps,
+      steps = _props$steps2 === void 0 ? [] : _props$steps2,
+      _onUrge2 = props.onUrge,
+      _props$onCarbonCopy = props.onCarbonCopy,
+      onCarbonCopy = _props$onCarbonCopy === void 0 ? function () {} : _props$onCarbonCopy,
+      _props$onDeleteCommen = props.onDeleteComment,
+      _onDeleteComment = _props$onDeleteCommen === void 0 ? function () {} : _props$onDeleteCommen;
+
+  var weakmap = new WeakMap();
+
+  var _isSelf = currentUserIsProposer(proposer, user);
+
+  var mark = false;
+  steps.forEach(function (step) {
+    if (ApprovalType.isPending(step.type, step.approvalStatus) && !step.name) {
+      step.name = '审批';
+    }
+
+    if (ApprovalType.isCC(step.type) && !step.name) {
+      step.name = '抄送人';
+    }
+
+    if (step.refuse) {
+      step.name = step.refuse;
+    }
+
+    if (!step.name) {
+      step.name = 'unkonwn';
+    }
+
+    if (mark) {
+      weakmap.set(step, {
+        hidden: true
+      });
+    } // 拒绝|审核中，后面的不展示
+
+
+    if (ApprovalType.isPending(step.type, step.approvalStatus) || ApprovalType.isRefuse(step.type, step.approvalStatus)) {
+      mark = true;
     }
   });
-  var list = steps.map(function (step) {
-    return /*#__PURE__*/React.createElement(ApprovalItem, Object.assign({}, step));
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, list);
-};
+  var list = []; // 210 012
+
+  var _loop = function _loop(i) {
+    var step = steps[i];
+    var obj = weakmap.get(step);
 
-var LMApproval = function LMApproval(props) {
+    if (obj && obj.hidden) {
+      return "continue";
+    } // 抄送
+
+
+    if (ApprovalType.isCC(step.type) && !step.isCarbonCopy) {
+      onCarbonCopy(step, i, steps);
+      step.time = getCurrentTime();
+      step.isCarbonCopy = true;
+    }
+
+    var element = /*#__PURE__*/React.createElement(ApprovalItem, Object.assign({
+      key: step.name + i,
+      _isSelf: _isSelf,
+      _user: user
+    }, step, {
+      onUrge: function onUrge() {
+        _onUrge2(step, i, steps);
+      },
+      onDeleteComment: function onDeleteComment() {
+        _onDeleteComment(step, i, steps);
+      }
+    }));
+    list.push(element);
+  };
+
+  for (var i = steps.length - 1; i >= 0; i--) {
+    var _ret = _loop(i);
+
+    if (_ret === "continue") continue;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, list);
+});
+var LMApproval = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      others = __rest(props, ["className"]);
+      _props$onUrge = props.onUrge,
+      onUrge = _props$onUrge === void 0 ? function () {} : _props$onUrge,
+      _props$onDeleteCommen2 = props.onDeleteComment,
+      onDeleteComment = _props$onDeleteCommen2 === void 0 ? function () {} : _props$onDeleteCommen2,
+      others = __rest(props, ["className", "onUrge", "onDeleteComment"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      update = _useState2[0],
+      setUpdate = _useState2[1];
+
+  var comment = wrapperComment(others.user, others.steps, update, setUpdate);
+  var agree = wrapperAgree(others.user, others.steps, update, setUpdate);
+  var refuse = wrapperRefuse(others.user, others.steps, update, setUpdate);
+  useImperativeHandle(ref, function () {
+    return {
+      comment: comment,
+      agree: agree,
+      refuse: refuse
+    };
+  });
+
+  var _onUrge = function _onUrge(step, i, steps) {
+    step.urge = true;
+    onUrge(step, i, steps);
+    setUpdate(!update);
+  };
 
   return /*#__PURE__*/React.createElement(LMDrawer, Object.assign({
     className: classNames(className, prefixCls)
-  }, others), /*#__PURE__*/React.createElement(Approval, Object.assign({}, others)));
-};
-
+  }, others), /*#__PURE__*/React.createElement(Approval, Object.assign({}, others, {
+    onUrge: _onUrge,
+    onDeleteComment: onDeleteComment,
+    __update: update
+  })));
+});
 export default LMApproval;