重构工作台 index & member 对应页面代码到 es6

src/modules/dashboard/index.js

+import React, { Component } from 'react';
+import { Col, Row, Icon } from 'antd';
+
+class DashboardIndex extends Component { // eslint-disable-line react/prefer-stateless-function
+  static defaultProps = {
+    namespace: 'dashboard_index',
+  }
+
+  constructor(props, context) {
+    const store = IKDataStore.namespace(this.props.namespace);
+    this.setState({
+      logined: store.get('logined') || this.props.logined,
+      is_admin: store.get('is_admin') || this.props.is_admin || false.
+      icons: store.get('icons') || this.props.icons || [],
+      new_buttons: store.get('new_buttons')||  this.props.new_buttons || [], //新增按钮
+      purchase_buttons: store.get('purchase_buttons') || this.props.purchase_buttons || [], //采购列表按钮
+      sale_buttons: store.get('sale_buttons') || this.props.sale_buttons || [], //销售列表按钮
+      search_buttons: store.get('search_buttons') || this.props.search_buttons || [], //搜索按钮
+      other_buttons: store.get('other_buttons') ||  this.props.other_buttons || [], //其他列表按钮
+      current_buttons: [], //当前按钮
+      actionSheetVisible: false, //ActionSheet 是否可见
+      statistic: {},
+      documents: [],
+      approvingDocuments: [],
+      approvedDocuments: [],
+      noapprovalDocuments: [],
+      titles: [],
+      activeTab: 'approving',
+      hasPermission: true,
+      dingtalk_config: this.props.dingtalk_config,
+      loading: true,
+      org_id: this.props.org_id,
+    });
+  }
+
+  openActionsheet(type) {
+    switch(type) {
+      case 'inventory':
+        Turbolinks.visit('/mobile/inventories');
+        break;
+      case 'purchase':
+      case 'sale':
+      case 'other':
+      case 'new':
+        this.setState({
+          current_buttons: @state[`${type}_buttons`],
+          actionSheetVisible: true
+        });
+        break;
+      default:
+        Turbolinks.visit(`/mobile/${type}s`)
+        break;
+    }
+  }
+
+  actionSheetHidden() {
+    this.setState({
+      actionSheetVisible: false
+    });
+  }
+
+  toggleTab(type) {
+    this.setState({activeTab: type});
+  }
+
+  initialData(searched = false, callback) {
+    this.setState({loading: true});
+
+    if (getCurrentMember().token) {
+      if (this.state.is_admin) {
+        $.getJSON '/api/dashboard/statistic', (response) => {
+          globalHandleResponse(response, ()=> {
+            this.setState({statistic: response.statistic});
+          });
+        }
+
+        $.getJSON('/api/documents', { approving: true }, (response) => {
+          globalHandleResponse(response, () => {
+            let title = []
+            if (response.has_enabled) {
+              title = [{title: '待审批', type: 'approving'}, {title: '已审批', type: 'approved'}]
+            }
+
+            if (response.has_disabled) {
+              title.push({title: '无需审批', type: 'noapproval'});
+            }
+
+            this.setState({
+              approvingDocuments: response.approving_documents,
+              approvedDocuments: response.approved_documents,
+              noapprovalDocuments: response.noapproval_documents,
+              titles: title,
+              loading: false,
+            });
+
+            if (title.length == 1) {
+              this.setState({activeTab: 'noapproval'});
+            }
+          });
+        });
+      } else {
+        $.getJSON('/api/documents', (response) => {
+          if (response.status.code == 403 ) {
+            this.setState( {
+              hasPermission: false,
+              loading: false,
+            });
+            return;
+          }
+
+          globalHandleResponse(response, ()=> {
+            this.setState({
+              documents: response.documents,
+              loading: false,
+            });
+          }
+        });
+      }
+    }
+
+    if (callback) {
+      callback.call(null);
+    }
+  }
+
+  componentDidMount() {
+    if !(Cookies.get('checked_latest_notice')) {
+      $.getJSON('/api/upgrades/get_latest', (response) => {
+        if (response.status.code == 200) {
+          Cookies.set('checked_latest_notice', 'checked');
+
+          this.upgrade = response.upgrade;
+          this.upgradeIDKey = 'upgradeID';
+          this.upgradeID = localStorage.getItem(this.upgradeIDKey);
+          this.upgradeID = this.upgradeID ? this.upgradeID : 0;
+
+          if (this.upgrade.id > this.upgradeID) {
+            localStorage.setItem(this.upgradeIDKey, `${this.upgrade.id}`);
+
+            dd.ready(() => {
+              let imagePath = this.props.upgrade_image;
+              if ( Env.isAndroid() ) {
+                imagePath = this.props.android_upgrade_image;
+              }
+              imagePath = `${window.location.protocol}//${window.location.host}${imagePath}`;
+
+              dd.device.notification.modal({
+                image: imagePath,
+                title: this.upgrade.title,
+                content: this.upgrade.intro,
+                buttonLabels: ['查看详情', '知道了'],
+                onSuccess: (result) => {
+                  if (result.buttonIndex == 0) {
+                    Turbolinks.visit(`/mobile/help/upgrades/${upgrade.id}`);
+                  }
+                }
+              });
+
+            });
+          }
+        }
+      });
+    }
+
+    if (!getCurrentMember().token && this.state.dingtalk_config) {
+      let config = this.state.dingtalk_config;
+      let jsApiList = [
+        'runtime.info',
+        'runtime.permission.requestAuthCode',
+        'device.base.getUUID',
+        'device.base.getInterface',
+        'device.launcher.checkInstalledApps',
+        'device.launcher.launchApp',
+        'device.connection.getNetworkType',
+        'device.notification.alert',
+        'device.notification.confirm',
+        'device.geolocation.get',
+        'device.accelerometer.watchShake',
+        'device.accelerometer.clearShake',
+        'biz.util.open',
+        'biz.util.share',
+        'biz.util.ut',
+        'biz.util.uploadImage',
+        'biz.util.uploadImageFromCamera',
+        'biz.util.previewImage',
+        'biz.chat.pickConversation',
+        'biz.ding.post',
+        'biz.telephone.call', 'biz.util.scan'
+        'biz.contact.choose',
+        'biz.contact.complexChoose',
+        'biz.contact.createGroup',
+        'biz.navigation.setLeft '
+        'biz.navigation.setRight',
+        'biz.navigation.setTitle',
+        'biz.navigation.close',
+        'biz.navigation.setIcon',
+        'biz.util.openLink'
+      ]
+      const configParams = {
+        agentId: config.agent_id,
+        corpId: config.corp_id,
+        ticket: config.ticket,
+        timeStamp: config.timestamp,
+        nonceStr: config.noncestr,
+        signature: config.signature,
+        jsApiList: jsApiList,
+      };
+
+      dd.ready(() => {
+        dd.config(configParams);
+        dd.runtime.permission.requestAuthCode({
+          corpId: config.corp_id,
+          onSuccess: (requestAuthCodeResult) => {
+            $.ajax({
+              type: 'POST',
+              url: '/api/dingtalk/login',
+              data: {
+                suite_id: config.suite_id,
+                app_id: config.app_id,
+                corp_id: config.corp_id,
+                code: requestAuthCodeResult.code,
+              },
+              dataType: 'json',
+            }).done((response) => {
+              if (response.errcode == 0) {
+                data = response.data
+
+                if (data.member_status) {
+                  Turbolinks.visit(`/mobile/disabled?authentication_token=${data.token}&uid=${data.uid}`, action: 'replace');
+                  return
+                }
+
+                setCurrentMember(data.token, data.uid)
+
+                if !(isVipNocticeShown(data.org_id)) {
+                  showVipNotice(data.org_id)
+                }
+
+                const state = {
+                  logined: true,
+                  dingtalk_config: null,
+                  is_admin: data.is_admin,
+                  icons: data.icons,
+                  new_buttons: data.new_buttons,
+                  purchase_buttons: data.purchase_buttons,
+                  sale_buttons: data.sale_buttons,
+                  search_buttons: data.search_buttons,
+                  other_buttons: data.other_buttons,
+                };
+
+                IKDataStore.namespace(this.props.namespace).set(state);
+                this.setState(state, () => {
+                  this.initialData();
+                });
+              } else {
+                console.log(JSON.stringify(response));
+              }
+            }).fail((xhr, textStatus, errorThrown) => {
+              console.log(`dingtalk login error: ${textStatus}, ${errorThrown}`);
+            });
+          },
+          onFail: (error) => {}
+        });
+      });
+
+      dd.error((error) => {
+        console.log(error);
+      });
+    }
+
+    this.initialData();
+    enableRefresh(this.initialData);
+
+    dd.ready(() => {
+      dd.biz.navigation.setRight({
+        show: true,
+        control: true,
+        text: '帮助',
+        onSuccess: () => {
+          Turbolinks.visit('/mobile/help/')
+        },
+        onFail: () => {
+          Turbolinks.visit('/mobile')
+        },
+      });
+    });
+
+    if (this.state.logined && !isVipNocticeShown(this.state.org_id)) {
+      showVipNotice(this.state.org_id);
+    }
+
+  }
+
+  renderMember() {
+    return (<DashboardIndexMember
+      current_buttons = {this.state.current_buttons}
+      actionSheetVisible = {this.state.actionSheetVisible}
+      actionSheetHidden = {this.actionSheetHidden}
+      handleSearch = {this.initialData}
+
+      onClick = {this.openActionsheet}
+      documents = {this.state.documents}
+      hasPermission = {this.state.hasPermission}
+      icons = {this.state.icons}
+      loading = {this.state.loading}
+      logined = {this.state.logined}
+    />);
+  }
+
+  renderAdmin() {
+    return (<DashboardIndexAdmin
+      current_buttons = {this.state.current_buttons}
+      actionSheetVisible = {this.state.actionSheetVisible}
+      actionSheetHidden= {this.actionSheetHidden}
+      openActionsheet = {this.openActionsheet}
+      handleSearch = {this.initialData}
+
+      toggleTab = {this.toggleTab}
+      activeTab = {this.state.activeTab}
+      titles = {this.state.titles}
+      approvingDocuments = {this.state.approvingDocuments}
+      approvedDocuments = {this.state.approvedDocuments}
+      noapprovalDocuments = {this.state.noapprovalDocuments}
+      statistic = {this.state.statistic}
+      hasPermission = {this.state.hasPermission}
+      icons = {this.state.icons}
+      loading = {this.state.loading}/>)
+  }
+
+  render() {
+    if (!this.state.logined && this.state.dingtalk_config) {
+      return (<Icon type='loading' />);
+    } else {
+      if (this.state.is_admin) {
+        return this.renderAdmin();
+      } else {
+        return this.renderMember();
+      }
+    }
+  }
+}
+
+export default DashboardIndex;

src/modules/dashboard/member.js

+import React, { Component } from 'react';
+import { Col, Row, Icon } from 'antd';
+
+class DashboardIndexMember extends Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props, context) {
+
+  }
+
+  render() {
+    const props = $.extend({}, this.props);
+
+    const memberShortcuts = [
+      {type: 'purchase', name: '采购列表', onClick: props.onClick.bind(null, 'purchase')},
+      {type: 'sale', name: '销售列表', onClick: props.onClick.bind(null, 'sale')},
+      {type: 'other', name: '其他列表', onClick: props.onClick.bind(null, 'other')},
+      {type: 'document', name: '单据查询', path: '/mobile/documents'},
+      {type: 'customer', name: '客户列表', path: '/mobile/customers'},
+      {type: 'supplier', name: '供应商列表', path: '/mobile/suppliers'},
+      {type: 'product', name: '产品列表', path: '/mobile/products'},
+      {type: 'inventory', name: '库存查询', path: '/mobile/inventories'},
+    ].chunk(4);
+
+    return (<Row>
+      <Row id="action-sheet-button-container">
+        <Col span='6' offset='18' className='ik-padding-top-20'>
+          <div
+            className='action-sheet-button'
+            onClick={props.onClick.bind(null, 'new')}>
+              <Icon type='plus-circle'/>
+            </div>
+        </Col>
+      </Row>
+      <div id="action-sheet-wrapper">
+        <IKActionSheet
+          buttons={props.current_buttons}
+          visible={props.actionSheetVisible}
+          onHidden={props.actionSheetHidden}
+          onSearch={props.handleSearch}>
+        </IKActionSheet>
+      </div>
+      <Row>
+        <Col span='24'>{memberShortcuts.each((shortcuts, rowCount) => {
+          {shortcuts.each(shortcut, colCount => {
+            let className = ''
+            if ((colCount + 1) % 4 == 0 ) {
+              className = '';
+            } else {
+              className = 'ik-border-right';
+            }
+            if (rowCount < memberShortcuts.length - 1) {
+              className += 'ik-border-bottom';
+            }
+            let href = shortcut.path;
+            if (shortcut.onClick) {
+              href = 'javascript:void(0);';
+            }
+
+            <Col span='6' className={className}>
+              <a className='shortcut-link' href={href} onClick={shortcut.onClick}>
+                <svg>
+                  <use xlinkHref={props.icons[shortcut.type]}/>
+                </svg>
+                <p className='ik-margin-top-5 ik-title-font ik-text-center'>{shortcut.name}</p>
+              </a>
+            </Col>
+          })}
+        })}</Col>
+      </Row>
+      <Row>
+        <Col span='24' className='ik-container-background ik-height-40'>
+          <p className='document-title'>最近的单据</p>
+        </Col>
+        <Col span='24'>
+          { if (this.props.loading) {
+              if (this.props.logined) {
+                <Icon  type='loading' className='search-loading'/>
+              }
+            } else {
+              if (this.props.documents.length > 0) {
+                <Row>
+                  <Col span='24'>
+                    {props.documents.each(doc){
+                      <Document key=`${document.type}_${document.id}` document={doc}></Document>
+                    }}
+                  </Col>
+                </Row>
+              } else {
+                <Row type='flex' justify='center' className='document-list ik-padding-bottom-20'>
+                  <Col span='16' className='ik-text-center'>
+                    {if !(props.hasPermission) {
+                      <div>
+                        <svg className='file-color'>
+                          <use xlinkHref={props.icons.document}/>
+                        </svg>
+                      </div>
+                      <p className='ik-title-font ik-margin-top-20 ik-title-color'> 亲，你没有权限操作此功能哦</p>
+                    } else {
+                      <div>
+                        <p className='ik-title-font ik-margin-top-20 ik-title-color'>
+                          还没有单据哦，快去新增吧
+                        </p>
+                      </div>
+                    }}
+                  </Col>
+                </Row>
+              }
+            }
+          }
+        </Col>
+      </Row>
+    </Row>)
+  }
+}