@titaui/pc 1.8.0 → 1.8.1

package/lib/components/dialog/index.css

@@ -51,6 +51,7 @@
 
 .titaui-dialog .rc-dialog-header {
   padding: 18px 32px;
+  margin-bottom: 10px;
 }
 
 .titaui-dialog .rc-dialog-body {
@@ -59,6 +60,7 @@
 
 .titaui-dialog .rc-dialog-footer {
   padding: 20px 32px;
+  margin-top: 8px;
   display: flex;
   justify-content: flex-end;
 }
@@ -105,7 +107,7 @@
 }
 
 .titaui-dialog__btn-cancel {
-  border: 1px solid #e9ecf0;
+  border: 1px solid #DFE3EA;
   color: #6f7886;
   transition: 0.2s all;
 }

package/lib/components/form/form-fields/input/index.css

@@ -26,14 +26,15 @@
 }
 
 .form-field-input__label-require {
-  color: red;
+  color: #F05E5E;
+  margin-left: 2px;
 }
 
 .form-field-input__border {
   padding: 6px 12px;
   border-radius: 8px;
   transition: all 0.2s;
-  border: 1px solid #e9ecf0;
+  border: 1px solid #DFE3EA;
   box-sizing: border-box;
 }
 

package/lib/components/upload/index.js

@@ -198,7 +198,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
         ;
         uploadStartFiles.push(uploadStartFile);
 
-        _this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件
+        _this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件      
 
 
         formData.append('file', element);
@@ -224,7 +224,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
       xhr.onreadystatechange = function () {
         if (xhr.readyState == 4 && xhr.status == 200) {
-          var result = Object.assign({}, _objectSpread({}, JSON.parse(xhr.responseText).Result[0])); // 上传成功接口返回数据
+          var result = Object.assign({}, _objectSpread({}, JSON.parse(xhr.responseText).Result[0])); // 上传成功接口返回数据        
 
           result.percentComplete = 100;
           result.IsSuccess = !!result.IsSuccess;

package/lib/components/upload-photo-modal/constant.js

@@ -4,96 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.List = void 0;
-
-var _requestApi = require("./request-api");
-
-var _toast = _interopRequireDefault(require("../../components/toast"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var List = [{
   id: 'person',
   accept: '.jpg,.jpeg,.gif,.png',
   autoCropArea: 0.5,
   initialAspectRatio: 1,
   tips: '仅支持 jpg、jpeg、gif、png 格式 建议图片最小尺寸 150*150px',
-  previewTitle: '预览',
-  handleSaveInfo: function handleSaveInfo(data, onCancel, image) {
-    if (!image) {
-      return;
-    } else {
-      (0, _requestApi.saveUserInfo)({
-        data: data
-      }).then(function (resp) {
-        if (resp.Code === 1) {
-          _toast["default"].Success('保存成功', {
-            canClose: false
-          });
-
-          onCancel();
-        } else {
-          _toast["default"].Error(resp.Message, {
-            canClose: false
-          });
-        }
-      });
-    }
-  }
+  previewTitle: '预览'
 }, {
   id: 'enterprise',
   accept: '.jpg,.jpeg,.gif,.png',
   autoCropArea: 1,
   initialAspectRatio: 5,
   tips: '建议 logo 尺寸 400*80 logo 最佳适配颜色为白色 仅支持 jpg、jpeg、gif、png 格式',
-  previewTitle: 'logo 预览',
-  handleSaveInfo: function handleSaveInfo(data, onCancel, image) {
-    if (!image) {
-      return;
-    } else {
-      (0, _requestApi.saveTenantLogo)({
-        data: data
-      }).then(function (resp) {
-        if (resp.Code === 1) {
-          _toast["default"].Success('保存成功', {
-            canClose: false
-          });
-
-          onCancel();
-        } else {
-          _toast["default"].Error(resp.Message, {
-            canClose: false
-          });
-        }
-      });
-    }
-  }
+  previewTitle: 'logo 预览'
 }, {
   id: 'browser',
   accept: '',
   autoCropArea: 0.5,
   initialAspectRatio: 1,
   tips: '图标尺寸 18*18，超过将被浏览器压缩',
-  previewTitle: '浏览器图标预览',
-  handleSaveInfo: function handleSaveInfo(data, onCancel, image) {
-    if (!image) {
-      return;
-    } else {
-      (0, _requestApi.saveTenantLogo)({
-        data: data
-      }).then(function (resp) {
-        if (resp.Code === 1) {
-          _toast["default"].Success('保存成功', {
-            canClose: false
-          });
-
-          onCancel();
-        } else {
-          _toast["default"].Error(resp.Message, {
-            canClose: false
-          });
-        }
-      });
-    }
-  }
+  previewTitle: '浏览器图标预览'
 }];
 exports.List = List;

package/lib/components/upload-photo-modal/index.css

@@ -182,7 +182,7 @@
 
 .tita-ui-change-person-photo__preview-enterprise-img {
   position: absolute;
-  top: 2px;
+  top: 1px;
   right: 45px;
   width: 70px;
   height: 28px;
@@ -250,6 +250,10 @@
   display: block;
   opacity: 0;
   cursor: pointer;
+  width: 56px;
+  height: 22px;
+  position: absolute;
+  left: 124px;
 }
 
 .tita-ui-change-person-photo__title-again {
@@ -266,6 +270,14 @@
   color: #2879ff;
 }
 
+.tita-ui-change-person-photo__title-again--show:hover {
+  color: #DFE3EA;
+}
+
+.tita-ui-change-person-photo__title-again--hover {
+  color: #DFE3EA;
+}
+
 .tita-ui-change-person-photo__title-preview {
   margin-right: 54px;
   margin-top: 8px;

package/lib/components/upload-photo-modal/index.js

@@ -27,12 +27,20 @@ var _constant = require("./constant");
 
 require("./index.css");
 
+var _uuid = _interopRequireDefault(require("uuid"));
+
+var _bsGlobal = require("../../utils/bs-global");
+
 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 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; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -47,6 +55,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var apiServer = (0, _bsGlobal.getBSGlobal)("apiPath");
+var userid = (0, _bsGlobal.getUserInfo)().Id;
+var tenantId = (0, _bsGlobal.getTenantInfo)().Id;
 var preCls = 'tita-ui-change-person-photo';
 
 var ChangePhoto = function ChangePhoto(props) {
@@ -56,7 +67,7 @@ var ChangePhoto = function ChangePhoto(props) {
       type = _props$type === void 0 ? 'browser' : _props$type;
   var modalRef = (0, _react.useRef)();
 
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
       image = _useState2[0],
       setImage = _useState2[1];
@@ -84,6 +95,11 @@ var ChangePhoto = function ChangePhoto(props) {
       _useState10 = _slicedToArray(_useState9, 1),
       item = _useState10[0];
 
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isEnter = _useState12[0],
+      setIsEnter = _useState12[1];
+
   var cropperRef = (0, _react.useRef)(null);
 
   var onChange = function onChange(e) {
@@ -105,95 +121,178 @@ var ChangePhoto = function ChangePhoto(props) {
     reader.readAsDataURL(files[0]);
   };
 
+  var dataURLtoFile = function dataURLtoFile(dataurl, filename) {
+    var arr = dataurl.split(','),
+        mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n);
+
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+
+    return new File([u8arr], filename, {
+      type: mime
+    });
+  };
+
   var onCrop = function onCrop() {
     var imageElement = cropperRef.current;
     var cropper = imageElement.cropper;
     setCropData(cropper.getCroppedCanvas().toDataURL());
     setUserInfo(cropper.getCroppedCanvas().toDataURL());
-    var base64Url = cropper.getCroppedCanvas().toDataURL(); //将base64转换成blob
-
-    var FileOrBlob = dataURLtoBlob(base64Url); //添加到formdata
-
+    var base64Url = cropper.getCroppedCanvas().toDataURL();
+    var newFile = dataURLtoFile(base64Url, 'test1234');
+    console.log(newFile);
     var formData = new FormData();
-    formData.append('file', FileOrBlob, "file_" + Date.parse(new Date()) + ".png");
+    formData.append('file', newFile);
+    console.log(formData);
     setCropper(formData);
   };
 
-  var dataURLtoBlob = function dataURLtoBlob(urlData) {
-    var bytes = window.atob(urlData.split(',')[1]);
-    var ab = new ArrayBuffer(bytes.length);
-    var ia = new Uint8Array(ab);
-
-    for (var i = 0; i < bytes.length; i++) {
-      ia[i] = bytes.charCodeAt(i);
-    }
-
-    return new Blob([ab], {
-      type: 'image/png'
-    });
-  };
+  var handleSaveInfo = function handleSaveInfo() {
+    var timestamp = new Date().getTime(); // 给每个文件加一个时间戳
 
-  var handleSaveUserInfo = function handleSaveUserInfo() {
     if (!image) {
       return;
     } else {
-      (0, _requestApi.saveUserInfo)({
-        data: userInfo
-      }).then(function (resp) {
-        if (resp.Code === 1) {
-          _toast["default"].Success('保存成功', {
-            canClose: false
-          });
-
-          onCancel();
-        } else {
-          _toast["default"].Error(resp.Message, {
-            canClose: false
-          });
-        }
-      });
+      if (type === "person") {
+        (0, _requestApi.saveUserPhoto)(cropper).then(function (resp) {
+          if (resp.Code === 1) {
+            _toast["default"].Success('保存成功', {
+              canClose: false
+            });
+
+            onCancel();
+          } else {
+            _toast["default"].Error(resp.Message, {
+              canClose: false
+            });
+          }
+        });
+      } else if (type === "enterprise") {
+        // console.log(cropper);
+        (0, _requestApi.saveTenantLogo)(cropper).then(function (resp) {
+          if (resp.Code === 1) {
+            _toast["default"].Success('保存成功', {
+              canClose: false
+            });
+
+            onCancel();
+          } else {
+            _toast["default"].Error(resp.Message, {
+              canClose: false
+            });
+          }
+        }); // axios({headers: {
+        //   'Content-Type': 'multipart/form-data',
+        // },
+        // method: 'post',
+        // data: cropper,
+        // url: `${apiServer}/api/v1/${tenantId}/${userid}/tenant/update/logo?format=json&timestamp=${timestamp}`})
+        // dealSelectFiles(image)
+      } else {
+        (0, _requestApi.saveBrowserIcon)(cropper).then(function (resp) {
+          if (resp.Code === 1) {
+            _toast["default"].Success('保存成功', {
+              canClose: false
+            });
+
+            onCancel();
+          } else {
+            _toast["default"].Error(resp.Message, {
+              canClose: false
+            });
+          }
+        });
+      }
     }
   };
 
-  var handleSaveInfo = function handleSaveInfo() {
-    if (!image) {
-      return;
-    } else {
-      (0, _requestApi.saveTenantLogo)(cropData).then(function (resp) {
-        if (resp.Code === 1) {
-          _toast["default"].Success('保存成功', {
-            canClose: false
-          });
-
-          onCancel();
-        } else {
-          _toast["default"].Error(resp.Message, {
-            canClose: false
-          });
-        }
-      });
-    }
+  var _useState13 = (0, _react.useState)(),
+      _useState14 = _slicedToArray(_useState13, 2),
+      uploadSuccessFile = _useState14[0],
+      setUploadSuccessFile = _useState14[1];
+
+  var dealSelectFiles = function dealSelectFiles(uploadSelectFile) {
+    var uploadStartFiles = []; // 开始上传的文件
+
+    var formData = new FormData(); // FormData 对象
+
+    var uploadStartFile;
+    var timestamp = new Date().getTime(); // 给每个文件加一个时间戳
+    // let uploadFileType = uploadSelectFile.name.substring(uploadSelectFile.name.lastIndexOf('.') + 1);
+
+    uploadStartFile = {
+      FileName: uploadSelectFile.name,
+      // FileType: _dealAttachmentType(uploadFileType).FileType,
+      FileSize: uploadSelectFile.size,
+      FileLastModified: uploadSelectFile.lastModified,
+      // IsImage: _dealAttachmentType(uploadFileType).IsImage,
+      percentComplete: 0,
+      uploadStatus: 1,
+      // 开始上传
+      IsSuccess: false,
+      uid: (0, _uuid["default"])(),
+      _smallImageUrl: '',
+      _bigImageUrl: '',
+      MediaType: '',
+      UserId: 0,
+      MaxDocCount: 0,
+      DfsPath: '',
+      ClientUrl: '',
+      SmallImageUrl: '',
+      BigImageUrl: '',
+      DownloadUrl: '',
+      Msg: '',
+      AllowUploadAttachmentSize: 50,
+      Deleteable: true,
+      requestXHR: new XMLHttpRequest() //在这创建是为了取消用
+
+    }; // uploadStartFiles.push(uploadStartFile);
+    // _dealUploadStart(uploadStartFiles); // 处理开始上传的文件
+
+    formData.append('file', uploadSelectFile);
+    var url = "".concat(apiServer, "/api/v1/").concat(tenantId, "/").concat(userid, "/tenant/update/logo");
+
+    _dealUploadXHRRequest(formData, url, uploadStartFile);
+  };
+  /**
+   * 处理文件上传请求
+   *
+   * @formData
+   * @url 上传文件请求地址
+   * @uploadStartFile 上传的文件
+   *
+   * @memberof Upload
+   */
+
+
+  var _dealUploadXHRRequest = function _dealUploadXHRRequest(formData, url, uploadStartFile) {
+    var xhr = uploadStartFile.requestXHR;
+
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        var result = Object.assign({}, _objectSpread({}, JSON.parse(xhr.responseText).Result[0])); // 上传成功接口返回数据
+
+        result.percentComplete = 100;
+        result.IsSuccess = !!result.IsSuccess;
+        result.uploadStatus = result.IsSuccess ? 3 : 4; // 3上传成功；4上传失败
+        // _dealUploadSuccess({ ...uploadStartFile, ...result });
+      }
+    };
+
+    xhr.open('POST', url, true);
+    xhr.send(formData); //开始上传，发送form数据
   };
 
-  var handleBrowserIconSaveInfo = function handleBrowserIconSaveInfo() {
-    if (!image) {
-      return;
-    } else {
-      console.log(cropper);
-      (0, _requestApi.saveBrowserIcon)(cropper).then(function (resp) {
-        if (resp.Code === 1) {
-          _toast["default"].Success('保存成功', {
-            canClose: false
-          });
-
-          onCancel();
-        } else {
-          _toast["default"].Error(resp.Message, {
-            canClose: false
-          });
-        }
-      });
-    }
+  var handleEnterAgain = function handleEnterAgain() {
+    setIsEnter(true);
+  };
+
+  var handleLeaveAgain = function handleLeaveAgain() {
+    setIsEnter(false);
   };
 
   return /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
@@ -209,7 +308,7 @@ var ChangePhoto = function ChangePhoto(props) {
     onCancel: onCancel,
     okText: "\u4FDD\u5B58",
     noFooterLine: true,
-    onOk: handleBrowserIconSaveInfo
+    onOk: handleSaveInfo
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: preCls
   }, !image ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -318,9 +417,11 @@ var ChangePhoto = function ChangePhoto(props) {
     accept: item === null || item === void 0 ? void 0 : item.accept,
     type: "file",
     onChange: onChange,
-    className: (0, _classnames["default"])("".concat(preCls, "__title-input"), _defineProperty({}, "".concat(preCls, "__title-input--show"), image))
+    className: (0, _classnames["default"])("".concat(preCls, "__title-input"), _defineProperty({}, "".concat(preCls, "__title-input--show"), image)),
+    onMouseEnter: handleEnterAgain,
+    onMouseLeave: handleLeaveAgain
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])("".concat(preCls, "__title-again"), _defineProperty({}, "".concat(preCls, "__title-again--show"), image))
+    className: (0, _classnames["default"])("".concat(preCls, "__title-again"), _defineProperty({}, "".concat(preCls, "__title-again--show"), image), _defineProperty({}, "".concat(preCls, "__title-again--hover"), isEnter))
   }, "\u91CD\u65B0\u4E0A\u4F20"), /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {
     condition: type === 'person'
   }, /*#__PURE__*/_react["default"].createElement("span", {

package/lib/components/upload-photo-modal/request-api.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.saveUserInfo = exports.saveTenantLogo = exports.saveBrowserIcon = exports.getUserInfoFun = void 0;
+exports.saveUserPhoto = exports.saveUserInfo = exports.saveTenantLogo = exports.saveBrowserIcon = exports.getUserInfoFun = void 0;
 
 var _qs = _interopRequireDefault(require("qs"));
 
@@ -23,7 +23,7 @@ var saveUserInfo = function saveUserInfo(_ref) {
   var data = _ref.data;
   return (0, _request.rput)("v1")("manage/user/update", data, {
     "headers": {
-      "Content-Type": "application/x-www-form-urlencoded"
+      "Content-Type": "multipart/form-data"
     },
     "transformRequest": _qs["default"].stringify
   });
@@ -31,14 +31,32 @@ var saveUserInfo = function saveUserInfo(_ref) {
 
 exports.saveUserInfo = saveUserInfo;
 
+var saveUserPhoto = function saveUserPhoto(params) {
+  return (0, _request.rpost)("v1")("manage/user/avatar", params, {
+    "headers": {
+      "Content-Type": "multipart/form-data"
+    }
+  });
+};
+
+exports.saveUserPhoto = saveUserPhoto;
+
 var saveTenantLogo = function saveTenantLogo(params) {
-  return (0, _request.rpost)("v1")("tenant/update/logo", params);
+  return (0, _request.rpost)("v1")("tenant/update/logo", params, {
+    "headers": {
+      "Content-Type": "multipart/form-data"
+    }
+  });
 };
 
 exports.saveTenantLogo = saveTenantLogo;
 
 var saveBrowserIcon = function saveBrowserIcon(params) {
-  return (0, _request.rpost)("v1")("tenant/update/browerIcon", params);
+  return (0, _request.rpost)("v1")("tenant/update/browerIcon", params, {
+    "headers": {
+      "Content-Type": "multipart/form-data"
+    }
+  });
 };
 
 exports.saveBrowserIcon = saveBrowserIcon;

package/lib/pages/personal-info/components/edit-info/index.css

@@ -0,0 +1,19 @@
+.titaui-edit-personal-info__form .titaui-form {
+  box-sizing: border-box;
+  padding: 0 32px;
+}
+
+.titaui-edit-personal-info__form .form-field-input__label {
+  width: 62px;
+}
+
+.titaui-edit-personal-info__form .form-field-input__label-text {
+  font-size: 14px;
+  font-weight: 400;
+  color: #89919F;
+  line-height: 22px;
+}
+
+.titaui-edit-personal-info__form .rc-tooltip {
+  left: 110.5px !important;
+}

package/lib/pages/personal-info/components/edit-info/index.js

@@ -9,14 +9,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _form = _interopRequireDefault(require("../../../../components/form"));
+
 var _requestApi = require("../../request-api");
 
 var _toast = _interopRequireDefault(require("../../../../components/toast"));
 
-var _input = _interopRequireDefault(require("./input"));
-
 var _dialog = _interopRequireDefault(require("../../../../components/dialog"));
 
+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); }
@@ -41,10 +43,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var Fields = _form["default"].Fields;
+var prefix = "titaui-edit-personal-info";
+
 var EditBaseInfo = function EditBaseInfo(props) {
   var visible = props.visible,
       onCancel = props.onCancel;
   var modalRef = (0, _react.useRef)();
+  var formContainerRef = (0, _react.useRef)();
+  var formRef = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -143,12 +150,21 @@ var EditBaseInfo = function EditBaseInfo(props) {
     noFooterLine: true,
     onOk: handleSaveUserInfo,
     disabled: isDisable
-  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefix, "__form"),
+    ref: formContainerRef
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    ref: formRef,
+    getFormContainer: function getFormContainer() {
+      return formContainerRef.current;
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Fields.Input, {
     name: "name",
     label: '姓名',
     placeholder: '请输入姓名',
     type: "text",
     require: true,
+    layout: "row",
     verifies: [{
       tip: '姓名不能为空',
       test: /\S/
@@ -158,12 +174,13 @@ var EditBaseInfo = function EditBaseInfo(props) {
     }],
     value: userInfo.name,
     onChange: handleNameChange
-  }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(Fields.Input, {
     name: "phone",
     type: "text",
     label: '手机号码',
     placeholder: '请输入手机号',
     require: true,
+    layout: "row",
     value: userInfo.mobile,
     verifies: [{
       tip: '手机号不能为空',
@@ -173,19 +190,19 @@ var EditBaseInfo = function EditBaseInfo(props) {
       test: /^1[3456789]\d{9}$/
     }],
     onChange: handlePhoneChange
-  }), /*#__PURE__*/_react["default"].createElement(_input["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(Fields.Input, {
     name: "email",
     type: "text",
     label: '邮箱',
     value: userInfo.email,
-    require: true,
+    layout: "row",
     placeholder: '请输入邮箱',
     verifies: [{
       tip: '邮箱格式错误',
       test: /^([a-zA-Z0-9_-]|\.)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
     }],
     onChange: handleEmailChange
-  }));
+  }))));
 };
 
 var _default = EditBaseInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.8.00",
+  "version": "1.8.01",
   "nameCN": "",
   "description": "",
   "main": "src/index.js",

package/src/components/dialog/index.scss

@@ -48,6 +48,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
 
   .rc-dialog-header {
     padding: 18px 32px;
+    margin-bottom: 10px;
   }
   .rc-dialog-body {
     // padding: 0 32px 0 32px;
@@ -55,6 +56,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   }
   .rc-dialog-footer {
     padding: 20px 32px;
+    margin-top: 8px;
     display: flex;
     justify-content: flex-end;
   }
@@ -98,7 +100,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   }
 
   &__btn-cancel {
-    border: 1px solid #e9ecf0;
+    border: 1px solid #DFE3EA;
     color: #6f7886;
     transition: 0.2s all;
     &:hover {

package/src/components/form/form-fields/input/index.scss

@@ -23,7 +23,8 @@
     }
 
     &-require {
-      color: red;
+      color: #F05E5E;
+      margin-left: 2px;
     }
   }
 
@@ -31,7 +32,7 @@
     padding: 6px 12px;
     border-radius: 8px;
     transition: all 0.2s;
-    border: 1px solid #e9ecf0;
+    border: 1px solid #DFE3EA;
     box-sizing: border-box;
 
     &--disabled {

package/src/components/upload/index.tsx

@@ -171,8 +171,8 @@ export default class Upload extends PureComponent<Props, State> {
         return;
       };
       uploadStartFiles.push(uploadStartFile);
-      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件
-      formData.append('file', element);
+      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件      
+      formData.append('file', element);      
       let url = action || getApiUrl(`Upload/PostFiles?format=json&timestamp=${timestamp}`);
       this._dealUploadXHRRequest(formData, url, uploadStartFile);
     });
@@ -197,7 +197,7 @@ export default class Upload extends PureComponent<Props, State> {
     let xhr = uploadStartFile.requestXHR;
     xhr.onreadystatechange = () => {
       if (xhr.readyState == 4 && xhr.status == 200) {
-        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据
+        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据        
         result.percentComplete = 100;
         result.IsSuccess = !!result.IsSuccess;
         result.uploadStatus = result.IsSuccess ? 3 : 4; // 3上传成功；4上传失败
@@ -227,7 +227,7 @@ export default class Upload extends PureComponent<Props, State> {
         }
       });
       this.setState({ uploadSuccessFiles });
-    };
+    };    
     xhr.open('POST', url, true);
     xhr.send(formData); //开始上传，发送form数据
   };

package/src/components/upload-photo-modal/constant.ts

@@ -1,5 +1,3 @@
-import { saveUserInfo, saveTenantLogo } from "./request-api";
-import Toast from '../../components/toast';
 
 export const List = [
 	{
@@ -9,20 +7,6 @@ export const List = [
 		initialAspectRatio: 1,
 		tips: '仅支持 jpg、jpeg、gif、png 格式 建议图片最小尺寸 150*150px',
 		previewTitle: '预览',
-    handleSaveInfo: (data, onCancel, image) => {
-      if (!image) {
-        return;
-      } else {
-        saveUserInfo({ data: data }).then((resp) => {
-          if (resp.Code === 1) {
-            Toast.Success('保存成功', { canClose: false });
-            onCancel();
-          } else {
-            Toast.Error(resp.Message, { canClose: false });
-          }
-        });
-      }
-    },
 	},
   {
 		id: 'enterprise',
@@ -31,20 +15,6 @@ export const List = [
 		initialAspectRatio: 5,
 		tips: '建议 logo 尺寸 400*80 logo 最佳适配颜色为白色 仅支持 jpg、jpeg、gif、png 格式',
 		previewTitle: 'logo 预览',
-    handleSaveInfo: (data, onCancel, image) => {
-      if (!image) {
-        return;
-      } else {
-        saveTenantLogo({ data: data }).then((resp) => {
-          if (resp.Code === 1) {
-            Toast.Success('保存成功', { canClose: false });
-            onCancel();
-          } else {
-            Toast.Error(resp.Message, { canClose: false });
-          }
-        });
-      }
-    },
 	},
   {
 		id: 'browser',
@@ -53,19 +23,5 @@ export const List = [
 		initialAspectRatio: 1,
 		tips: '图标尺寸 18*18，超过将被浏览器压缩',
 		previewTitle: '浏览器图标预览',
-    handleSaveInfo: (data, onCancel, image) => {
-      if (!image) {
-        return;
-      } else {
-        saveTenantLogo({ data: data }).then((resp) => {
-          if (resp.Code === 1) {
-            Toast.Success('保存成功', { canClose: false });
-            onCancel();
-          } else {
-            Toast.Error(resp.Message, { canClose: false });
-          }
-        });
-      }
-    },
 	}
 ];

package/src/components/upload-photo-modal/index.scss

@@ -160,7 +160,7 @@
     &-enterprise {
       &-img {
         position: absolute;
-        top: 2px;
+        top: 1px;
         right: 45px;
         width: 70px;
         height: 28px;
@@ -222,6 +222,10 @@
         display: block;
         opacity: 0;
         cursor: pointer;
+        width: 56px;
+        height: 22px;
+        position: absolute;
+        left: 124px;
       }
     }
     &-again {
@@ -234,6 +238,12 @@
       &--show {
         cursor: pointer;
         color: #2879ff;
+        &:hover {
+          color: #DFE3EA;
+        }
+      }
+      &--hover {
+        color: #DFE3EA;
       }
     }
     &-preview {

package/src/components/upload-photo-modal/index.tsx

@@ -4,10 +4,18 @@ import Cropper from 'react-cropper';
 import 'cropperjs/dist/cropper.css';
 import Toast from '../../components/toast';
 import ConditionRender from '../condition-render';
-import { saveUserInfo, saveTenantLogo, saveBrowserIcon } from './request-api';
+import { saveUserInfo, saveTenantLogo, saveBrowserIcon, saveUserPhoto } from './request-api';
 import Dialog from '../../components/dialog';
 import { List } from './constant'
 import './index.scss';
+import uuid from 'uuid';
+import { rput, rpost } from "../../utils/request";
+import axios from 'axios';
+import { getBSGlobal, getUserInfo, getTenantInfo } from '../../utils/bs-global';
+const apiServer = getBSGlobal("apiPath")
+const userid = getUserInfo().Id;
+const tenantId = getTenantInfo().Id
+
 
 const preCls = 'tita-ui-change-person-photo';
 
@@ -22,11 +30,12 @@ const ChangePhoto = (props: Props) => {
 
 	const modalRef = useRef<any>();
 
-	const [ image, setImage ] = useState();
+	const [ image, setImage ] = useState('');
 	const [ cropper, setCropper ] = useState<any>();
 	const [ cropData, setCropData ] = useState('#');
 	const [ userInfo, setUserInfo ] = useState({ Avatar: '' });
   const [item] = useState(List.find(item => item.id === type));
+  const [isEnter, setIsEnter] = useState(false);
 
 	const cropperRef = useRef<HTMLImageElement>(null);
 
@@ -45,77 +54,160 @@ const ChangePhoto = (props: Props) => {
 		reader.readAsDataURL(files[0]);
 	};
 
+
+  const dataURLtoFile = (dataurl, filename)  => {
+    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+    while(n--){
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, {type:mime});
+}
+
+
 	const onCrop = () => {
+
 		const imageElement: any = cropperRef.current;
 		const cropper: any = imageElement.cropper;
+
 		setCropData(cropper.getCroppedCanvas().toDataURL());
 		setUserInfo(cropper.getCroppedCanvas().toDataURL());
 
     let base64Url = cropper.getCroppedCanvas().toDataURL();
-    //将base64转换成blob
-    let FileOrBlob = dataURLtoBlob(base64Url);
-    //添加到formdata
+
+    const newFile = dataURLtoFile(base64Url, 'test1234');
+    console.log(newFile);
+    
+
     let formData = new FormData();
-    formData.append('file', FileOrBlob, "file_" + Date.parse(new Date()) + ".png");
-    setCropper(formData)
-	};
 
-  const dataURLtoBlob = (urlData) => {
-    var bytes = window.atob(urlData.split(',')[1]);   
-    var ab = new ArrayBuffer(bytes.length);
-    var ia = new Uint8Array(ab);
-    for (var i = 0; i < bytes.length; i++) {
-      ia[i] = bytes.charCodeAt(i);
-    }
-    return new Blob([ab], { type: 'image/png' });
-  }
+    formData.append('file', newFile);
 
-	const handleSaveUserInfo = () => {
-		if (!image) {
-			return;
-		} else {
-			saveUserInfo({ data: userInfo }).then((resp) => {
-				if (resp.Code === 1) {
-					Toast.Success('保存成功', { canClose: false });
-					onCancel();
-				} else {
-					Toast.Error(resp.Message, { canClose: false });
-				}
-			});
-		}
+    console.log(formData);
+    setCropper(formData);
 	};
+
   const handleSaveInfo =  () => {
+    let timestamp = new Date().getTime(); // 给每个文件加一个时间戳
     if (!image) {
       return;
-    } else {      
-      saveTenantLogo( cropData ).then((resp) => {
-        if (resp.Code === 1) {
-          Toast.Success('保存成功', { canClose: false });
-          onCancel();
-        } else {
-          Toast.Error(resp.Message, { canClose: false });
-        }
-      });
+    } else {
+      if(type === "person")  {
+        saveUserPhoto(cropper).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+      } else if(type === "enterprise") {  
+        // console.log(cropper);
+              
+        saveTenantLogo( cropper ).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+        // axios({headers: {
+        //   'Content-Type': 'multipart/form-data',
+        // },
+        // method: 'post',
+        // data: cropper,
+        // url: `${apiServer}/api/v1/${tenantId}/${userid}/tenant/update/logo?format=json&timestamp=${timestamp}`})
+        // dealSelectFiles(image)
+      }  else {
+        saveBrowserIcon( cropper ).then((resp) => {
+          if (resp.Code === 1) {
+            Toast.Success('保存成功', { canClose: false });
+            onCancel();
+          } else {
+            Toast.Error(resp.Message, { canClose: false });
+          }
+        });
+      }  
     }
   };
 
-  const handleBrowserIconSaveInfo =  () => {
-    if (!image) {
-      return;
-    } else { 
-      console.log(cropper);
-            
-      saveBrowserIcon( cropper ).then((resp) => {
-        if (resp.Code === 1) {
-          Toast.Success('保存成功', { canClose: false });
-          onCancel();
-        } else {
-          Toast.Error(resp.Message, { canClose: false });
-        }
-      });
-    }
+  const [uploadSuccessFile, setUploadSuccessFile] = useState();
+
+
+  const dealSelectFiles = (uploadSelectFile) => {
+
+    let uploadStartFiles = []; // 开始上传的文件
+      let formData = new FormData(); // FormData 对象
+      let uploadStartFile;
+      let timestamp = new Date().getTime(); // 给每个文件加一个时间戳
+      // let uploadFileType = uploadSelectFile.name.substring(uploadSelectFile.name.lastIndexOf('.') + 1);
+
+      uploadStartFile = {
+        FileName: uploadSelectFile.name,
+        // FileType: _dealAttachmentType(uploadFileType).FileType,
+        FileSize: uploadSelectFile.size,
+        FileLastModified: uploadSelectFile.lastModified,
+        // IsImage: _dealAttachmentType(uploadFileType).IsImage,
+        percentComplete: 0,
+        uploadStatus: 1, // 开始上传
+        IsSuccess: false,
+        uid: uuid(),
+        _smallImageUrl: '',
+        _bigImageUrl: '',
+        MediaType: '',
+        UserId: 0,
+        MaxDocCount: 0,
+        DfsPath: '',
+        ClientUrl: '',
+        SmallImageUrl: '',
+        BigImageUrl: '',
+        DownloadUrl: '',
+        Msg: '',
+        AllowUploadAttachmentSize: 50,
+        Deleteable: true,
+        requestXHR: new XMLHttpRequest(), //在这创建是为了取消用
+      };
+
+      // uploadStartFiles.push(uploadStartFile);
+      // _dealUploadStart(uploadStartFiles); // 处理开始上传的文件
+      formData.append('file', uploadSelectFile);
+      let url = `${apiServer}/api/v1/${tenantId}/${userid}/tenant/update/logo`;
+      _dealUploadXHRRequest(formData, url, uploadStartFile);
+  };
+
+  /**
+   * 处理文件上传请求
+   *
+   * @formData
+   * @url 上传文件请求地址
+   * @uploadStartFile 上传的文件
+   *
+   * @memberof Upload
+   */
+  const _dealUploadXHRRequest = (formData: any, url: string, uploadStartFile) => {
+    let xhr = uploadStartFile.requestXHR;
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据
+        result.percentComplete = 100;
+        result.IsSuccess = !!result.IsSuccess;
+        result.uploadStatus = result.IsSuccess ? 3 : 4; // 3上传成功；4上传失败
+        // _dealUploadSuccess({ ...uploadStartFile, ...result });
+      }
+    };
+    xhr.open('POST', url, true);
+    xhr.send(formData); //开始上传，发送form数据
   };
 
+  const handleEnterAgain = () => {
+    setIsEnter(true);
+  }
+
+  const handleLeaveAgain = () => {
+    setIsEnter(false);
+  }
+
 	return (
 		<Dialog
 			visible={visible}
@@ -130,7 +222,7 @@ const ChangePhoto = (props: Props) => {
 			onCancel={onCancel}
 			okText="保存"
 			noFooterLine
-			onOk={handleBrowserIconSaveInfo}
+			onOk={handleSaveInfo}
 		>
 			<div className={preCls}>
 				{!image ? 
@@ -220,8 +312,10 @@ const ChangePhoto = (props: Props) => {
 						type="file"
 						onChange={onChange}
 						className={classNames(`${preCls}__title-input`, { [`${preCls}__title-input--show`]: image })}
+            onMouseEnter={handleEnterAgain}
+            onMouseLeave={handleLeaveAgain}
 					/>
-					<span className={classNames(`${preCls}__title-again`, { [`${preCls}__title-again--show`]: image })}>
+					<span className={classNames(`${preCls}__title-again`, { [`${preCls}__title-again--show`]: image },{ [`${preCls}__title-again--hover`]: isEnter })}>
 						重新上传
 					</span>
 					<ConditionRender condition={type === 'person'}>

package/src/components/upload-photo-modal/request-api.ts

@@ -8,16 +8,26 @@ export const getUserInfoFun = () => {
 
 export const saveUserInfo = ({ data }) => {
   return rput("v1")("manage/user/update", data, {
-    "headers": { "Content-Type": "application/x-www-form-urlencoded" },
+    "headers": { "Content-Type": "multipart/form-data"},
     "transformRequest": qs.stringify,
   });
 };
 
+export const saveUserPhoto = (params)  => {
+  return rpost("v1")("manage/user/avatar", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
+}
+
 export const saveTenantLogo = (params)  => {
-  return rpost("v1")("tenant/update/logo", params);
+  return rpost("v1")("tenant/update/logo", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
 }
 
 export const saveBrowserIcon = (params)  => {
-  return rpost("v1")("tenant/update/browerIcon", params);
+  return rpost("v1")("tenant/update/browerIcon", params, {
+    "headers": { "Content-Type": "multipart/form-data"},
+  });
 }
 

package/src/pages/personal-info/components/edit-info/index.scss

@@ -0,0 +1,20 @@
+.titaui-edit-personal-info {
+  &__form {
+    .titaui-form {
+      box-sizing: border-box;
+      padding: 0 32px;
+    }
+    .form-field-input__label {
+      width: 62px;
+    }
+    .form-field-input__label-text {
+      font-size: 14px;
+      font-weight: 400;
+      color: #89919F;
+      line-height: 22px;
+    }
+    .rc-tooltip {
+      left:110.5px !important;
+    }
+  }
+}

package/src/pages/personal-info/components/edit-info/index.tsx

@@ -1,13 +1,21 @@
 import React, { useState, useRef, useEffect } from 'react';
+import Form from '../../../../components/form';
 import { getUserInfoFun, saveUserInfo } from '../../request-api';
 import Toast from '../../../../components/toast';
-import Input from './input';
+// import Input from './input';
 import Dialog from '../../../../components/dialog';
+import './index.scss';
+
+const { Fields } = Form;
+
+const prefix = "titaui-edit-personal-info"
 
 const EditBaseInfo = (props) => {
 	const { visible, onCancel } = props;
 
 	const modalRef = useRef<any>();
+  const formContainerRef = useRef<any>();
+	const formRef = useRef<any>();
 
 	const [ isDisable, setIsDisable ] = useState(false);
 	const [ isEdit, setIsEdit ] = useState(false);
@@ -92,12 +100,15 @@ const EditBaseInfo = (props) => {
 			onOk={handleSaveUserInfo}
 			disabled={isDisable}
 		>
-			<Input
+      <div className={`${prefix}__form`} ref={formContainerRef}>
+				<Form ref={formRef} getFormContainer={() => formContainerRef.current}>
+			<Fields.Input
 				name="name"
 				label={'姓名'}
 				placeholder={'请输入姓名'}
 				type="text"
 				require
+        layout="row"
 				verifies={[
 					{
 						tip: '姓名不能为空',
@@ -111,12 +122,13 @@ const EditBaseInfo = (props) => {
 				value={userInfo.name}
 				onChange={handleNameChange}
 			/>
-			<Input
+			<Fields.Input
 				name="phone"
 				type="text"
 				label={'手机号码'}
 				placeholder={'请输入手机号'}
 				require
+        layout="row"
 				value={userInfo.mobile}
 				verifies={[
 					{
@@ -130,12 +142,12 @@ const EditBaseInfo = (props) => {
 				]}
 				onChange={handlePhoneChange}
 			/>
-			<Input
+			<Fields.Input
 				name="email"
 				type="text"
 				label={'邮箱'}
 				value={userInfo.email}
-				require
+        layout="row"
 				placeholder={'请输入邮箱'}
 				verifies={[
 					{
@@ -145,6 +157,8 @@ const EditBaseInfo = (props) => {
 				]}
 				onChange={handleEmailChange}
 			/>
+      </Form>
+			</div>
 		</Dialog>
 	);
 };