cloud-b2b 1.1.58 → 1.1.59

package/src/Search2/Search.js

@@ -0,0 +1,436 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import withStyles from 'isomorphic-style-loader/withStyles';
+import {Button, Form, Row, Col, Icon} from 'antd';
+import Control, {getTitle, makeString} from '../Control';
+// import helper from '../../common/common';
+// import s from './Search.less';
+import {getPathValue} from "../helper";
+// import showAddDialog from './AddDialog';
+// import showDeleteDialog from './DeleteDialog';
+import variables from "../variables";
+
+const FormItem = Form.Item;
+const defaultSize = 'small';
+const defaultColNum = 6;
+const  insertTimeKeyMap = {
+  from:["insertTimeTo","insertTimeFrom"],
+  start:["insertTimeStart","insertTimeEnd"]
+}
+const TYPE = [
+  'text',
+  'search',
+  'searchText',
+  'select',
+  'number',
+  'date',
+  'readonly',
+  'selectSearch',
+  'cascader'  //级联选择下拉
+];
+
+/**
+ * search: 搜索按钮的标题
+ * more：更多按钮的标题
+ * reset：重置按钮的标题
+ * sort：排序按钮的标题
+ */
+const ConfigType = {
+  search: PropTypes.string.isRequired,
+  reset: PropTypes.string,
+  sort: PropTypes.string,
+  more: PropTypes.string
+};
+
+/**
+ * key: 唯一标识一个表单元素
+ * title：表单元素旁边的标题
+ * type：表单元素的类型
+ * props：传递给表单元素的额外属性
+ */
+const FilterType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(TYPE).isRequired,
+  options: PropTypes.array,
+  props: PropTypes.object
+};
+
+/**
+ * data：传递给filters的默认值，为key:value的形式，此处的key为FilterType中的key
+ * isSort：是否需要排序按钮，默认false，当设置为true时，onClick函数需要实现key为sort的响应函数
+ * options: 作用同FilterType.options类似，但优先级高于它
+ * onClick：按钮点击事件，原型为func(key)
+ * onChange：表单控件内容改变时触发，原型为func(key, value)
+ * onSearch：search控件发出的事件，原型为func(key, value)
+ * displayRow：折叠时需要展示的行数，整数，默认为2
+ */
+class Search2 extends React.Component {
+  static propTypes = {
+    config: PropTypes.shape(ConfigType).isRequired,
+    filters: PropTypes.arrayOf(PropTypes.shape(FilterType)).isRequired,
+    data: PropTypes.object,
+    options: PropTypes.object,
+    getContainer: PropTypes.func,
+    onClick: PropTypes.func,
+    onChange: PropTypes.func,
+    onSearch: PropTypes.func,
+    onHeightChange: PropTypes.func,
+    displayRow: PropTypes.number,
+  };
+
+  state = {more: false};
+
+  getPathFun = async (key) => {
+    const pathArr = global.location.pathname.split('/');
+    const {sidebars,navigation} = global.store.getState().layout;
+    const title = Object.keys(sidebars).reduce((t,i) => {
+      sidebars[i].map(item => {
+        if (item.children){
+          const filterArr = item.children.filter(c => c.href === global.location.pathname);
+          if (filterArr.length !== 0){
+            t = navigation.filter(n => n.key === i)[0].title.concat(`-${item.title}-${filterArr[0].title}`);
+          }
+        }else{
+          if (item.href === global.location.pathname){
+            t = navigation.filter(n => n.key === i)[0].title.concat(`-${item.title}`);
+          }
+        }
+        return item;
+      })
+      return t;
+    },'');
+    const body = {
+      action: `${pathArr[pathArr.length - 1]}_${key}`,
+      actionName: `${title}-搜索`,
+      menuName: title
+    }
+    const url = '/api/standard/log';
+    // await helper.fetchJson(url, helper.postOption(body))
+  };
+
+  onClick = (key) => {
+    const {onClick} = this.props;
+    if (key === 'search'){
+      // this.getPathFun(key);
+    }
+    onClick && onClick(key);
+  };
+
+  onMore = () => {
+    const {onHeightChange} = this.props;
+    this.setState({more: !this.state.more});
+    onHeightChange && onHeightChange(this.calHeight(!this.state.more));
+  };
+
+  onChange = (dictionary, key, value) => {
+    const {onChange} = this.props;
+    if (value && key === 'queryGroup' && dictionary && global.dictionary && global.dictionary[dictionary]
+      && !global.dictionary[dictionary].map(item => item.value).includes(value)) {
+      const realValue = JSON.parse(value);
+      this.onClick('reset');
+      Object.keys(realValue).map(objectKey => {
+        onChange && objectKey !== 'queryId' && onChange(objectKey, realValue[objectKey]);
+      });
+    }
+    onChange && onChange(key, value);
+  };
+
+  onPressEnter = () => {
+    ReactDOM.findDOMNode(this.refs.search).click();
+  };
+
+  toButton = (key, props={}) => {
+    const {config} = this.props;
+    const onClick = this.onClick.bind(this, key);
+    return <Button size={defaultSize} onClick={onClick} {...props}>{config[key]}</Button>;
+  };
+
+  toMore = () => {
+    return (
+      <a role='more' onClick={this.onMore}>
+        {this.props.config.more}
+        <Icon type='down' data-status={!this.state.more ? 'down' : 'up'} />
+      </a>
+    );
+  };
+
+  toButtons = () => {
+    const {config} = this.props;
+    return (
+      <div role='buttons'>
+        {this.toButton('search', {ref: 'search', type: 'primary'})}
+        {config.reset ? this.toButton('reset') : null}
+        {this.isSort() ? this.toButton('sort') : null}
+        {this.isMore() ? this.toMore() : null}
+      </div>
+    );
+  };
+
+  isSort = () => {
+    const {config, colNum=defaultColNum, filters, isSort=false} = this.props;
+    return isSort && config.sort && (filters.length > colNum);
+  };
+
+  isMore = () => {
+    const {config, colNum=defaultColNum, filters, displayRow=filters.length > 4 ? 2 : 1} = this.props;
+    return config.more && (filters.filter(item => !item.hide).length > colNum * displayRow);
+  };
+
+  getOptions = (filter) => {
+    const options = this.props.options;
+    if (options && Array.isArray(options[filter.key])) {
+      return options[filter.key];
+    } else {
+      return filter.options || filter.typeRelated || [];
+    }
+  };
+
+  getContainer = () => {
+    return this.props.getContainer;
+  };
+
+  getControlProps = (control) => {
+    const {data={}} = this.props;
+    return {
+      ...(control.props || {}),
+      size: defaultSize,
+      type: control.type,
+      value: makeString(data[control.key]),
+      onChange: this.onChange.bind(this, control.dictionary, control.key)
+    };
+  };
+  validDate = ({key, type}) => (date) => {
+    const {data={}} = this.props;
+    if (!date || !data[key]) {
+      return false;
+    } else {
+      if (type === '>') {
+        return date.format('YYYY-MM-DD HH:mm:ss') <= data[key].valueOf();
+      } else if (type === '<') {
+        return date.format('YYYY-MM-DD HH:mm:ss') >= data[key].valueOf();
+      } else {
+        return false;
+      }
+    }
+  };
+
+  toText = (props) => {
+    props.onPressEnter = this.onPressEnter;
+    return <Control {...props} />;
+  };
+
+  toNumber = (props) => {
+    props.defaultValue = props.value;
+    delete props.value;
+    return <Control {...props} />;
+  };
+
+  getQueryGroupOptions = ({dictionary, configCode='unknown'}) => {
+    let realOptions = [];
+    if (dictionary && global.dictionary) {
+      const dicOptions = global.dictionary[dictionary] || [];
+      realOptions = realOptions.concat(dicOptions);
+    }
+    const state = global.store.getState();
+    const path = ['layout', 'tableColsSetting', configCode];
+    const {queryList = []} = getPathValue(state, path) || {};
+    return realOptions.concat(queryList.map(item => ({title: item.name, value: JSON.stringify(item.query)})));
+  };
+
+  toSelect = (props, filter) => {
+    const container = this.getContainer();
+    container && (props.getPopupContainer = container);
+    props.options = filter.key === 'queryGroup' ? this.getQueryGroupOptions(filter) : this.getOptions(filter);
+    props.dropdownMatchSelectWidth = false;
+    return <Control {...props} />;
+  };
+
+  createSearchEvent = (filter) => {
+    if (this.props.onSearch) {
+      return value => this.props.onSearch(filter.key, value, filter);
+    } else {
+      return null;
+    }
+  };
+
+  toSearch = (props, filter) => {
+    const container = this.getContainer();
+    container && (props.getPopupContainer = container);
+    props.options = this.getOptions(filter);
+    props.onSearch = this.createSearchEvent(filter);
+    props.dropdownMatchSelectWidth = false;
+    return <Control {...props} />;
+  };
+
+  selectSearch = (props, filter) => {
+    const container = this.getContainer();
+    container && (props.getPopupContainer = container);
+    props.options = this.getOptions(filter);
+    props.onSearch = this.createSearchEvent(filter);
+    props.dropdownMatchSelectWidth = false;
+    return <Control {...props} />;
+  };
+
+
+  toDate = (props,{rule}) => {
+    const container = this.getContainer();
+    container && (props.getCalendarContainer = container);
+    rule && (props.disabledDate = this.validDate(rule));
+    props.style = {width: '100%'};
+    return <Control {...props} />;
+  };
+
+  toReadonly = (props, filter) => {
+    props.value = getTitle(props.value, this.getOptions(filter));
+    return <Control {...props} />;
+  };
+
+  toCascader = (props,filter) => {
+    const container = this.getContainer();
+    container && (props.getPopupContainer = container);
+    props.options = this.getOptions(filter);
+    props.onSearch = this.createSearchEvent(filter);
+    props.placeholder = filter.placeholder || '';
+    return <Control {...props} />;
+  };
+
+  toControl = (control) => {
+    const props = this.getControlProps(control);
+    switch (control.type) {
+      case 'text':
+        return this.toText(props, control);
+      case 'number':
+        return this.toNumber(props, control);
+      case 'select':
+        return this.toSelect(props, control);
+      case 'selectSearch':
+        return this.selectSearch(props, control);
+      case 'search':
+      case 'searchText':
+        return this.toSearch(props, control);
+      case 'date':
+        return this.toDate(props, control);
+      case 'readonly':
+        return this.toReadonly(props, control);
+      case 'cascader':
+        return this.toCascader(props,control)
+      default:
+        return 'type error';
+    }
+  };
+
+  async onAddQueryGroup(configCode, searchData, dictionary) {
+    const filter = Object.keys(searchData).reduce((state, key) => {
+      if (searchData[key] && key !== 'queryGroup') {
+        state[key] = searchData[key];
+      }
+      return state;
+    }, {});
+    // if (Object.keys(filter).length < 1) return helper.showError(`查询条件不能为空`);
+    let dicOptionNameArr = [];
+    if (dictionary && global.dictionary) {
+      const dicOptions = global.dictionary[dictionary] || [];
+      dicOptionNameArr = dicOptions.map(item => item.title);
+    }
+    // if (true === await showAddDialog(configCode, filter, dicOptionNameArr)) {
+    //   this.onChange(undefined, 'queryGroup', '');
+    // }
+  };
+
+  async onDelQueryGroup(configCode, searchData, dictionary) {
+    const {queryGroup} = searchData;
+    // if (!queryGroup) return helper.showError(`请先选择要删除的查询组合`);
+    if (dictionary && global.dictionary) {
+      const dicOptions = global.dictionary[dictionary] || [];
+      // if (dicOptions.map(item => item.value).includes(queryGroup)) return helper.showError(`系统固定查询组合不允许删除`);
+    }
+    const {queryId} = JSON.parse(queryGroup);
+    // if(true === await showDeleteDialog(configCode, queryId)) {
+    //   this.onClick('reset');
+    // }
+  };
+
+  toLabel = ({title, key, dictionary, configCode='unknown'}) => {
+    if (key === 'queryGroup') {   //查询组合
+      return (
+        <span>
+        {title}
+          <Icon role='icon' type='plus-circle-o' onClick={this.onAddQueryGroup.bind(this, configCode, this.props.data, dictionary)}/>
+          <Icon  role='icon' type="minus-circle-o" onClick={this.onDelQueryGroup.bind(this, configCode, this.props.data, dictionary)}/>
+        </span>
+      );
+    } else {
+      return title;
+    }
+  };
+
+  toCol = (span, control, more) => {
+    const factor = control.span || 1;
+    return (
+      <Col span={span * factor} key={control.key} onFocus={more ? ()=>{this.setState({more: true})} : undefined}>
+        <FormItem label={this.toLabel(control)} required={control.required}>
+          {this.toControl(control)}
+        </FormItem>
+      </Col>
+    );
+  };
+
+  toCols = () => {
+    const {insertTimeKey='from',colNum=defaultColNum, filters, displayRow=filters.length > defaultColNum ? 2 :1} = this.props;
+    let span = 24 / Math.min(colNum, filters.filter(item => !item.hide).length);
+    let newFilters = filters.filter(item => !item.hide);
+    const insertKeys = insertTimeKeyMap[insertTimeKey];
+    const insertTimeCols = newFilters.filter(x=>insertKeys.includes(x.key));
+    const otherCols = newFilters.filter(x=>!insertKeys.includes(x.key));
+    if (insertTimeCols.length>0){
+      if (otherCols.length>=defaultColNum){
+        otherCols.splice(6,0,...insertTimeCols);
+        newFilters = otherCols;
+      }else{
+        newFilters = otherCols.concat(insertTimeCols);
+      }
+    }
+    if (span == 4.8){ //特殊处理filters为5的时候,span不能为小数
+      return newFilters.map((control, index) => this.toCol(index==0?4:5, control, index >= colNum * displayRow));
+    }else{
+      return newFilters.map((control, index) => this.toCol(span, control, index >= colNum * displayRow));
+    }
+  };
+
+  calWidth = () => {
+    const {colNum=defaultColNum, filters} = this.props;
+    const length = filters.filter(item => !item.hide).length;
+    if (length < colNum) {
+      return `${length * 13.6}%`;
+    } else {
+      return `${defaultColNum * 13.6}%`;
+    }
+  };
+
+  calHeight = (more) => {
+    const {colNum=defaultColNum, filters, displayRow=filters.length > defaultColNum ? 2 :1} = this.props;
+    if (more) {
+      const row = Math.ceil(filters.filter(item => !item.hide).length / colNum);
+      return row * 36 + (row - 1) * 10;
+    } else {
+      return displayRow * 36 + (displayRow - 1) * 10;
+    }
+  };
+
+  render() {
+    return (
+        <div className={variables('Search2')} style={{height: this.calHeight(this.state.more)}}>
+        <Form layout='vertical' style={{width: this.calWidth()}}>
+          <Row gutter={20}>
+            {this.toCols()}
+          </Row>
+        </Form>
+        {this.toButtons()}
+      </div>
+    );
+  }
+}
+
+export default Search2;

package/{lib/Search → src/Search2}/Search.less

@@ -1,63 +1,65 @@
-@import '../variables.less';
-
-.@{cloudlink-prefix}-Search {
-  transition: all 0.3s;
-
-  > *:first-child {
-    display: inline-block;
-    vertical-align: top;
-    margin-bottom: -10px;
-
-    :global(.ant-form-item) {
-      margin-bottom: 10px;
-
-      :global(.ant-select-selection--multiple) {
-        border-top-width: 1px;
-        height: 22px;
-        overflow: auto;
-      }
-
-      [role='icon'] {
-        cursor: pointer;
-        margin-left: 10px;
-        color: @primary-color;
-      }
-    }
-  }
-
-  > *:last-child {
-    display: inline-block;
-    vertical-align: top;
-    padding-left: 20px;
-    padding-top: 14px;
-    width: 25%;
-  }
-
-  :global(.ant-form-item-control) input,
-  :global(.ant-calendar-picker),
-  :global(.ant-select) {
-    display: block;
-  }
-
-  [role='buttons'] > * {
-    margin-right: 5px;
-  }
-
-  [role='more'] {
-    color: rgba(0, 0, 0, 0.65);
-    user-select: none;
-
-    &:hover {
-      color: @brand-primary;
-    }
-
-    > i {
-      transform: scale(0.75);
-      transition: all 0.2s;
-
-      &[data-status='up'] {
-        transform: scale(0.75) rotate(-180deg);
-      }
-    }
-  }
-}
+@import '../variables.less';
+
+.@{cloudlink-prefix}-Search2 {
+  transition: all 0.3s;
+
+  > *:first-child {
+    display: inline-block;
+    vertical-align: top;
+    margin-bottom: -10px;
+
+    :global(.ant-form-item) {
+      margin-bottom: 10px;
+
+      :global(.ant-select-selection--multiple) {
+        border-top-width: 1px;
+        height: 22px;
+        overflow: auto;
+      }
+
+      [role='icon'] {
+        cursor: pointer;
+        margin-left: 10px;
+        color: @primary-color;
+      }
+    }
+  }
+
+  > *:last-child {
+    display: inline-block;
+    vertical-align: top;
+    padding-left: 20px;
+    padding-top: 14px;
+    width: 18%;
+  }
+
+  :global(.ant-form-item-control) input,
+  :global(.ant-calendar-picker),
+  :global(.ant-select) {
+    display: block;
+  }
+  :global(.ant-calendar-picker-small) {
+    min-width: 100px !important;
+  }
+  [role='buttons'] > * {
+    margin-right: 5px;
+  }
+
+  [role='more'] {
+    color: rgba(0, 0, 0, 0.65);
+    user-select: none;
+
+    &:hover {
+      color: @brand-primary;
+    }
+
+    > i {
+      transform: scale(0.75);
+      transition: all 0.2s;
+
+      &[data-status='up'] {
+        transform: scale(0.75) rotate(-180deg);
+      }
+    }
+  }
+}

package/{lib/Search → src/Search2}/package.json

@@ -1,6 +1,6 @@
-{
-  "name": "Search",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Search.js"
-}
+{
+  "name": "Search",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Search.js"
+}

package/src/Sidebar/Sidebar.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+import SuperIcon from '../SuperIcon';
+import {Menu} from 'antd';
+import variables from '../variables';
+
+const SubMenu = Menu.SubMenu;
+const MenuItem = Menu.Item;
+
+/** 侧边栏二级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * href: 为跳转页面的url
+ */
+const ChildType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired
+};
+
+/** 侧边栏一级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * icon：条目左边图标url，大小为20*20px
+ * isFolder：为true表明有下级菜单，此时href被忽略，children存放下级菜单的信息
+ * href: isFolder为false时，为跳转页面的url，否则被忽略
+ * children：isFolder为true时，存放下级菜单的信息，否则被忽略
+ */
+const ItemType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  isFolder: PropTypes.bool,
+  href: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.shape(ChildType))
+};
+
+/**
+ * activeKey：指定被选中的一级条目的key，不能是二级条目的key
+ * items：存放所有侧边栏条目的信息
+ * style: 样式
+ */
+class Sidebar extends React.Component {
+  static propTypes = {
+    activeKey: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape(ItemType)).isRequired,
+    style: PropTypes.object
+  };
+
+  onOpenChange = (openKeys) => {
+    const {onOpenChange} = this.props;
+    if (onOpenChange) {
+      onOpenChange(openKeys);
+    }
+  };
+
+  toIcon = (type) => {
+    if (type) {
+      return <SuperIcon type={type} style={{fontSize: 16, verticalAlign: -2}} />
+    } else {
+      return null;
+    }
+  };
+
+  toItem = ({key, title, isFolder, children, href, icon, unreadTotal}) => {
+    if (isFolder) {
+      const t = <div>{this.toIcon(icon)}{title}</div>;
+      return (
+        <SubMenu key={key} title={t}>
+          {this.toItems(children)}
+        </SubMenu>
+      );
+    } else {
+      return (
+        <MenuItem key={key}>
+          <Link to={href} title={title} className={variables('Sidebar').unreadTotalLink}>
+            {this.toIcon(icon)}
+            {title}
+            {unreadTotal && unreadTotal>0 && <span className={variables('Sidebar').unreadTotalLink.unreadTotal}>{unreadTotal}</span>}
+          </Link>
+        </MenuItem>
+      );
+    }
+  };
+
+  toItems = (items) => {
+    return items.map(this.toItem);
+  };
+
+  getProps = () => {
+    const {style, activeKey, openKeys=[]} = this.props;
+    return {
+      style, openKeys,
+      selectedKeys: [activeKey],
+      mode: 'inline',
+      onOpenChange: this.onOpenChange,
+      className: variables('Sidebar')
+    }
+  };
+
+  render() {
+    return (
+      <Menu {...this.getProps()}>
+        {this.toItems(this.props.items)}
+      </Menu>
+    );
+  }
+}
+
+export default Sidebar;