cloud-b2b 1.1.58 → 1.1.59

package/src/Enhance/Loading.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Loading from '../Loading';
+
+const STATUS = [
+  'loadingWithInit',  // 显示加载画面，并自动触发onInit事件，默认值
+  'loading',          // 显示加载画面
+  'retry',            // 显示重试画面
+  'retryForHome',     // 显示重试画面(触发onInit时，home参数为true)
+  'page',             // 显示正常的页面(表明页面状态已经初始化好)
+];
+
+/**
+ * status: [可选], 当前状态。默认为loadingWithInit
+ * home: [可选]，为true表明接受首页触发的事件。默认为false
+ * onInit: [可选],原型为func(home)，home为true表明初始化是来源首页
+ * onRefreshForHome：[可选],检测到来至首页时会触发该事件，原型为func()
+ */
+const Enhance = Component => class extends React.Component {
+  static propTypes = {
+    status: PropTypes.oneOf(STATUS),
+    home: PropTypes.bool,
+    onInit: PropTypes.func,
+    onRefreshForHome: PropTypes.func
+  };
+
+  triggerEvent = () => {
+    if (!global.isServer) {
+      const {status='loadingWithInit', home, onInit, onRefreshForHome} = this.props;
+      if (!home) {
+        if (status === 'loadingWithInit') {
+          onInit && onInit(false);
+        }
+      } else {
+        const __home = global['__home'];
+        global['__home'] && (global['__home'] = false);
+        if (status === 'loadingWithInit') {
+          onInit && onInit(__home);
+        } else if (__home) {
+          if (status === 'page') {
+            onRefreshForHome && onRefreshForHome();
+          } else if (status !== 'loading') {
+            onInit && onInit(__home);
+          }
+        }
+      }
+    }
+  };
+
+  componentDidMount() {
+    this.triggerEvent();
+  }
+
+  componentDidUpdate() {
+    this.triggerEvent();
+  }
+
+  onRetry = () => {
+    const {status, onInit} = this.props;
+    onInit && onInit(status === 'retryForHome');
+  };
+
+  getPageProps = () => {
+    const props = {...this.props};
+    delete props.status;
+    delete props.home;
+    delete props.onInit;
+    delete props.onRefreshForHome;
+    return props;
+  };
+
+  render() {
+    const {status} = this.props;
+    if (status !== 'page') {
+      const retry = status === 'retry' || status === 'retryForHome';
+      return <Loading retry={retry} onRetry={this.onRetry}/>;
+    } else {
+      return <Component {...this.getPageProps()} />;
+    }
+  }
+};
+
+export default Enhance;

package/{es → src}/Enhance/index.js

@@ -1,6 +1,8 @@
-import EnhanceLoading from './Loading';
-import EnhanceDialogs from './Dialogs';
-var EnhanceEditDialog = function EnhanceEditDialog(Container, EditDialog) {
-  return EnhanceDialogs(Container, ['edit'], [EditDialog]);
-};
-export { EnhanceLoading, EnhanceDialogs, EnhanceEditDialog };
+import EnhanceLoading from './Loading';
+import EnhanceDialogs from './Dialogs';
+
+const EnhanceEditDialog = (Container, EditDialog) => {
+  return EnhanceDialogs(Container, ['edit'], [EditDialog]);
+};
+
+export {EnhanceLoading, EnhanceDialogs, EnhanceEditDialog};

package/src/Header/Header.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import {Badge, Avatar, Menu, Dropdown} from 'antd';
+import Link from '../Link';
+import SuperIcon from '../SuperIcon';
+import helper from '../helper';
+import Vertical from './Vertical';
+import variables from '../variables';
+
+const MenuItem = Menu.Item;
+
+class Header extends React.Component {
+
+  static Vertical = Vertical;
+
+  constructor(props) {
+    super(props);
+    if (props.selectUrl) {
+      this.state = {[props.selectKey]: props.selectUrl};
+    }
+  }
+
+  componentWillReceiveProps(props) {
+    if (props.selectUrl) {
+      this.setState({[props.selectKey]: props.selectUrl});
+    }
+  }
+
+  toLogo = () => {
+    const img = this.props.logoImg || '/logo.png';
+    const props = this.getLinkProps('home', this.state['main'] || this.props.homeUrl || '/', {role: 'logo'});
+    return <Link {...props}><img src={img} alt='logo'/></Link>;
+  };
+
+  toIcon = (type) => {
+    const style = {fontSize: 18, verticalAlign: 'middle'};
+    return <SuperIcon type={type} style={style} />;
+  };
+
+  getLinkProps = (key, url, props={}) => {
+    return {
+      ...props,
+      to: url,
+      'data-role': 'block',
+      'data-active': this.props.selectKey === key ? 'true' : null
+    };
+  };
+
+  toSetting = (settingUrl) => {
+    if (settingUrl) {
+      const props = this.getLinkProps('setting', this.state['setting'] || settingUrl);
+      return <Link {...props}>{this.toIcon('pld-setting')}</Link>;
+    } else {
+      return null;
+    }
+  };
+
+  toMessage = (messageUrl, count=0) => {
+    if (messageUrl) {
+      const props = this.getLinkProps('message', this.state['message'] || messageUrl);
+      const msgProps = {
+        overflowCount: 99,
+        title: `您有${count}条未读消息`,
+        count
+      };
+      return (
+        <Link {...props}>
+          <span role='message'>
+            <Badge {...msgProps}>{this.toIcon('pld-xiaoxi')}</Badge>
+          </span>
+        </Link>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  onMenuItemClick = ({key}) => {
+    const {onMenuClick} = this.props;
+    onMenuClick && onMenuClick(key);
+  };
+
+  menu = (hasImport) => {
+    return (
+      <Menu className={variables('Header').menu} onClick={this.onMenuItemClick}>
+        <MenuItem key='person'>个人信息</MenuItem>
+        {hasImport ? <MenuItem key='mode'>导入模板</MenuItem> : null}
+        <MenuItem key='modify'>修改密码</MenuItem>
+      </Menu>
+    );
+  };
+
+  avatar = (hasImport) => {
+    return (
+      <Dropdown placement='bottomRight' overlay={this.menu(hasImport)}>
+        <span data-role='avatar' style={{cursor: 'pointer'}}>
+          {this.toIcon(this.props.userIcon)}
+        </span>
+      </Dropdown>
+    );
+  };
+
+  toPerson = () => {
+    const hasImport = this.props.hasImport || true;
+    return (
+      <div role='person'>
+        <div/>
+        {this.avatar(hasImport)}
+        <span>{this.props.userName}</span>
+      </div>
+    );
+  };
+
+  toLogout = () => {
+    const props = {
+      to: this.props.loginUrl,
+      'data-role': 'block',
+      onClick: this.props.onLogout()
+    };
+    return (
+      <Link {...props}>
+        {this.toIcon('logout')}
+        <span>退出</span>
+      </Link>
+    );
+  };
+
+  toTail = () => {
+    const {settingUrl,messageUrl,messageCount} = this.props;
+    return (
+      <span>
+        {this.toSetting(settingUrl)}
+        {this.toMessage(messageUrl,messageCount)}
+        {this.toPerson()}
+        {this.toLogout()}
+      </span>
+    );
+  };
+
+  render() {
+    return (
+      <header className={variables('Header')}>
+        {this.toLogo()}
+        {this.toTail()}
+      </header>
+    );
+  }
+}
+
+export default Header;

package/src/Header/Vertical.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+import SuperIcon from '../SuperIcon';
+import variables from '../variables';
+
+const ITEM_TYPE = {
+  key: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired
+};
+
+/**
+ * selectKey: 选中的key
+ * url：url优先级高于item中的href
+ */
+class Vertical extends React.Component {
+  static propTypes = {
+    selectKey: PropTypes.string,
+    url: PropTypes.object,
+    items: PropTypes.arrayOf(PropTypes.shape(ITEM_TYPE)),
+    onSelectKey: PropTypes.func
+  };
+
+  state = {id: ''};
+
+  isSelect = (item) => {
+    return item.key === this.props.selectKey;
+  };
+
+  getUrl = (item) => {
+    return this.props.url[item.key] || item.href;
+  };
+
+  onClick = (selectKey) => {
+    this.props.onSelectKey && this.props.onSelectKey(selectKey);
+    if (this.state.id) {
+      clearTimeout(this.state.id);
+    }
+    this.setState({id: setTimeout(() => {
+      this.setState({id: ''});
+    }, 500)})
+  };
+
+  toItem = (item) => {
+    if (!item.jumpOut) {
+      return (
+        <Link key={item.key} to={this.getUrl(item)} data-select={this.isSelect(item)} onClick={this.onClick.bind(null, item.key)}>
+          <span><SuperIcon type={item.icon} /></span>
+          <span>{item.title}</span>
+        </Link>
+      );
+    } else {
+      const props = {key: item.key, href: item.href, target: '_blank'};
+      return (
+        <a {...props}>
+          <span><SuperIcon type={item.icon} /></span>
+          <span>{item.title}</span>
+        </a>
+      );
+    }
+  };
+
+  render() {
+    return (
+      <header className={variables('Vertical')} data-click={!!this.state.id}>
+        {this.props.items.map(this.toItem)}
+      </header>
+    );
+  }
+}
+
+export default Vertical;

package/src/ImageView/ImageView.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import {ModalWithDrag, Title} from '../index';
+import { Empty } from 'antd';
+import variables from '../variables';
+
+class ImageView extends React.Component{
+  constructor(props) {
+    super(props);
+    this.state = {
+      previewVisible: false,
+      index: 0,
+    };
+  }
+  ClosePreview = () => {this.setState({ previewVisible: false })}
+  showBigImg = () =>{
+    const {imgList} = this.props;
+    const {previewVisible,index} = this.state;
+    const props = {
+      width: 900,
+      title: imgList[index].fileName,
+      onCancel: this.ClosePreview,
+      visible: previewVisible,
+      maskClosable: true,
+      footer: null
+    };
+    return (
+      <ModalWithDrag {...props}>
+        <img alt="example" style={{ width: '100%' }} src={imgList[index].fileUrl} />
+      </ModalWithDrag>
+    );
+  }
+
+  toSeeImg = (e) =>{
+    if (this.props.toSeeImg) {
+      this.props.toSeeImg(e);
+    } else {
+      this.myClick(e.index)
+    }
+  }
+
+  myClick = (index) =>{
+    this.setState({ previewVisible: true , index: index})
+  }
+
+  render (){
+    const {imgList,title, toSeeImg} = this.props;
+    return (
+      <div className={variables('ImageView')}>
+        {title ? <Title title={title}></Title> : null}
+        {imgList.length === 0 ? (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />) : imgList.map((item,index) =>{
+        return (<div className={'imgBox'} key={index} onClick={() => this.toSeeImg({imgArr:imgList,index})}>
+          <img src={item.fileUrl}/>
+          <p>{item.fileName}</p>
+        </div>)
+      })}
+        {toSeeImg ? null : this.showBigImg()}
+    </div>
+    )
+  }
+}
+
+export default ImageView;

package/src/Indent/Indent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Indent({children, style={}, ...props}) {
+  Object.assign(style, {paddingLeft: 8, paddingRight: 8});
+  return (
+    <div style={style} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export default Indent;

package/src/InpurCascader/InputCascader.js

@@ -0,0 +1,83 @@
+//级联选择input
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Cascader } from 'antd';
+import { getObjectExclude } from '../helper';
+
+const optionsType = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  disabled: PropTypes.bool,
+  children: PropTypes.array,
+  title: PropTypes.string,
+  isLeaf: PropTypes.bool //false 就会触发 loadData 方法，从而在loadData方法中请求下一级数据，
+}
+
+
+const PROPS = {
+  options: PropTypes.arrayOf(PropTypes.shape(optionsType)).isRequired,
+  value: PropTypes.array.isRequired,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  loadData: PropTypes.func, //动态加载 ps：loadData 与 showSearch 无法一起使用
+  showSearch: PropTypes.func
+}
+
+const PROPS_KEYS = Object.keys(PROPS);
+class InputCascader extends React.Component {
+  static propTypes = PROPS;
+
+  constructor(props) {
+    super(props);
+  }
+
+  onChange = (value) => {
+    const { onChange } = this.props;
+    onChange && onChange(value)
+  };
+
+  loadData = selectedOptions => {
+    const { onSearch } = this.props;
+    onSearch && onSearch(selectedOptions[0])
+  };
+
+  getOptions = (options) => {
+    return options.map(option => {
+      let obj = { ...option, label: option.title};
+      if(option.children && option.children.length > 0){
+        obj.children = this.getOptions(option.children)
+      }
+      return obj;
+    })
+  }
+
+  showSearch = (inputValue, path) => {
+    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+  };
+
+  getProps = () => {
+    const { options = [], placeholder, size,value,loadData,showSearch,changeOnSelect=true } = this.props;
+    const props = Object.assign(getObjectExclude({}, PROPS_KEYS), {
+      onChange: this.onChange,
+      value: value,
+      options: this.getOptions(options),
+      changeOnSelect,
+      placeholder: placeholder,
+      size
+    })
+    //动态加载 ps：loadData 与 showSearch 无法一起使用
+    if(showSearch){
+      props.showSearch = true;
+    }else if(loadData){
+      props.loadData = this.loadData
+    }
+    return props;
+  };
+
+  render() {
+    return (
+      <Cascader {...this.getProps()} />
+    )
+  }
+}
+
+export default InputCascader;

package/src/InputEditor/InputEditor.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import variables from '../variables';
+import helper from "../helper";
+
+const defaultMenus = [
+  'head',  // 标题
+  'bold',  // 粗体
+  'fontSize',  // 字号
+  'fontName',  // 字体
+  'italic',  // 斜体
+  'underline',  // 下划线
+  'strikeThrough',  // 删除线
+  'foreColor',  // 文字颜色
+  'backColor',  // 背景颜色
+  'link',  // 插入链接
+  'list',  // 列表
+  'justify',  // 对齐方式
+  'quote',  // 引用
+  'image',  // 插入图片
+  'table',  // 表格
+  'code',  // 插入代码
+  'video',         // 插入视频
+];
+
+class InputEditor extends React.Component {
+
+  componentDidMount() {
+    const {inputKey,menus,color,showLinkImg = true,uploadImgShowBase64 = true,onChange,value, readonly, uploadVideoServer='/api/proxy/base-server-service/file/client/upload/document',} = this.props;
+    if (!readonly) {
+      const elem = this.refs[inputKey];
+      this[inputKey] = new E(elem);
+      //配置菜单
+      menus && (this[inputKey].config.menus = menus);
+      //配置颜色
+      color && (this[inputKey].config.menus = color);
+      //配置菜单
+      this[inputKey].config.menus = defaultMenus;
+      if(menus){
+        this[inputKey].config.menus = menus
+      }
+      this[inputKey].config.uploadImgShowBase64 = uploadImgShowBase64; //是否可以上传图片
+      this[inputKey].config.showLinkImg = showLinkImg; //隐藏网络图片
+      if (uploadVideoServer) {
+        this[inputKey].config.uploadVideoServer = uploadVideoServer;
+        this[inputKey].config.uploadVideoMaxSize = 1024 * 1024 * 100; // 100MB
+        this[inputKey].config.uploadVideoAccept = ['mp4', 'webm', 'ogg']; // 支持的视频格式
+        this[inputKey].config.uploadVideoName = 'file'; // form-data fieldName
+        // 自定义视频插入回调
+        this[inputKey].config.uploadVideoHooks = {
+          customInsert: async (insertVideo, results) => {
+            console.log(results)
+            if (results.returnCode === 0 && results.result) {
+              const URL_DOWNLOAD= '/api/standard/download';  // 点击下载
+              const {returnCode, result, returnMsg} = await helper.fetchJson(`${URL_DOWNLOAD}/${results.result}`);
+              if (returnCode !== 0) {
+                return helper.showError(returnMsg);
+              }
+              const currentOrigin = window.location.origin; // 获取当前页面的协议+域名+端口
+              const videoUrl = `${currentOrigin}/api/proxy/base-server-service/file/url/documents/open/${results.result}`;
+              insertVideo(videoUrl);
+            } else {
+              alert('视频上传失败: ' + (results.message || '未知错误'));
+            }
+          },
+        };
+      }
+      this[inputKey].config.onchange = html => {
+        onChange && onChange(html);
+      };
+      //配置编辑区域的 z-index
+      this[inputKey].config.zIndex = 0;
+      this[inputKey].create();
+      this[inputKey].txt.html(value)
+    }
+  }
+
+  componentDidUpdate() {
+    // const {inputKey,value='', readonly} = this.props;
+    // !readonly && value && this[inputKey].txt.html(value);  //支持清空操作
+  }
+
+  render() {
+    const {inputKey, readonly, value} = this.props;
+
+    return (
+      <div className={variables('InputEditor')}>
+        {readonly ? <div dangerouslySetInnerHTML = {{__html:`${value}`}}/> : <div ref={inputKey} />}
+      </div>
+    );
+  }
+}
+
+export default InputEditor;