2020-06-05

king

2020-06-05 24f0ce147c8daef39ec437d5def9d089ea5b1839

2020-06-05

 public/options.txt

@@ -1,6 +1,6 @@
appId         -- 云端生成的应用ID
appkey        -- 云端生成的应用密钥
mainSystemApi -- sso系统的接口路径，注：业务系统需要填写，且值为通用接口的完整路径
systemType    -- 业务系统使用此参数，判断系统为测试或正式（official），正式系统开发权限只含有系统升级等限定功能
systemType    -- 判断业务系统为测试（空）或正式（ official ），正式系统开发权限只含有系统升级等限定功能
lineColor     -- 分割线颜色
filter        -- 页面滤镜，值为'true'时，页面显示为黑白色

 src/assets/mobimg/mobile.png

 src/components/header/index.jsx

@@ -678,7 +678,7 @@
        {this.props.editLevel === 'level4' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>退出</Button> : null}
        {/* 进入编辑按钮 */}
        {this.props.editState && !this.props.editLevel ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null}
        {/* {this.props.editState && !this.props.editLevel ? <a href="#/mobile" target="blank" className="mobile" type="edit"> 移动端</a> : null} */}
        {this.props.editState && !this.props.editLevel ? <a href="#/mobile" target="blank" className="mobile" type="edit"> 移动端 <Icon type="arrow-right" /></a> : null}
        {/* 编辑菜单 */}
        {this.props.editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}
        {/* 头像、用户名 */}

 src/index.js

@@ -26,7 +26,7 @@
window.GLOB = window.GLOB || {}

if (!(options.systemType === 'local' && window.GLOB.systemType === 'official')) { // 只有业务系统才可以设置为正式系统
  window.GLOB.systemType = 'test'
  window.GLOB.systemType = ''
}
if (options.systemType !== 'local') { // sso,cloud不可设置单点服务器地址
  window.GLOB.mainSystemApi = ''
@@ -94,7 +94,7 @@
}

if (process.env.NODE_ENV === 'production') { // 用于校验是否存在开发权限
  let _service = window.location.href.split('/index.html')[0].replace(new RegExp(document.location.origin + '/?', 'ig'), '')
  let _service = window.location.href.replace(/\/index.html(.*)/ig, '').replace(new RegExp(document.location.origin + '/?', 'ig'), '')
  window.GLOB.linkurl = window.location.href.split('#')[0]
  window.GLOB.service = _service ? _service + '/' : ''
} else {

 src/locales/en-US/mob.js

New file
@@ -0,0 +1,6 @@
export default {
  'mob.confirm': '确定',
  'mob.cancel': '取消',
  'mob.header.logout': '退出',
  'mob.header.logout.hint': '您确定要退出吗?',
}

 src/locales/zh-CN/mob.js

New file
@@ -0,0 +1,6 @@
export default {
  'mob.confirm': '确定',
  'mob.cancel': '取消',
  'mob.header.logout': '退出',
  'mob.header.logout.hint': '您确定要退出吗?',
}

 src/mob/header/index.jsx

New file
@@ -0,0 +1,79 @@
import React, {Component} from 'react'
// import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import {Dropdown, Menu, Icon, Modal } from 'antd'

import { logout } from '@/store/action'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import avatar from '@/assets/img/avatar.jpg'
import './index.scss'

const { confirm } = Modal

class MobHeader extends Component {
  // static propTpyes = {
  //   collapse: PropTypes.bool,
  // }
  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    logourl: window.GLOB.mainlogo,
    avatar: sessionStorage.getItem('CloudAvatar') || avatar,
    userName: sessionStorage.getItem('CloudUserName')
  }

  logout = () => {
    // 退出登录
    let _this = this
    confirm({
      title: this.state.dict['mob.header.logout.hint'],
      content: '',
      okText: this.state.dict['mob.confirm'],
      cancelText: this.state.dict['mob.cancel'],
      onOk() {
        sessionStorage.clear()
        _this.props.logout()
        _this.props.history.replace('/login')
      },
      onCancel() {}
    })
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  render () {
    return (
      <header className="mob-header-container">
        <div className="header-logo"><img src={this.state.logourl} alt=""/></div>
        <Dropdown className="header-setting" overlay={
          <Menu>
            <Menu.Item key="2" onClick={this.logout}>{this.state.dict['mob.header.logout']}</Menu.Item>
          </Menu>
        }>
          <div>
            <img src={this.state.avatar} alt=""/>
            <span>
              <span className="username">{this.state.userName}</span> <Icon type="down" />
            </span>
          </div>
        </Dropdown>
      </header>
    )
  }
}

const mapStateToProps = () => {
  return {}
}

const mapDispatchToProps = (dispatch) => {
  return {
    logout: () => dispatch(logout())
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobHeader))

 src/mob/header/index.scss

New file
@@ -0,0 +1,45 @@
.mob-header-container {
  width: 100%;
  height: 48px;
  color: rgba(255, 255, 255, 0.65);
  
  background: #001529;
  border-bottom: 1px solid #000;

  .header-logo {
    float: left;
    width: 180px;
    line-height: 48px;
    text-align: center;
    padding-left: 5px;
    box-sizing: border-box;
    opacity: 1;
    img {
      max-width: 100%;
      max-height: 40px;
    }
  }
  .header-setting {
    float: right;
    line-height: 48px;
    margin-right: 10px;
    img {
      width: 29px;
      height: 29px;
      border-radius: 30px;
      margin-right: 7px;
    }
    span {
      color: #ffffff;
      font-size: 0.95rem;
      .username {
        display: inline-block;
        height: 30px;
        max-width: 95px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

 src/mob/home/index.jsx

New file
@@ -0,0 +1,127 @@
import React, {Component} from 'react'
// import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Flex, WhiteSpace, Tabs } from 'antd-mobile'

import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import './index.scss'

const PlaceHolder = ({ className = '', children = ''}) => (
  <div className={`${className} placeholder`}>{children ? children : 'Block'}</div>
)

const tabs2 = [
  { title: '简介', sub: '1' },
  { title: '工作台', sub: '2' },
  { title: '个人中心', sub: '3' },
]

class MobHome extends Component {
  // static propTpyes = {
  //   collapse: PropTypes.bool,
  // }
  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  render () {

    return (
      <div className="mob-home">
        <Tabs tabs={tabs2}
          initialPage={1}
          className="home"
          tabBarPosition="bottom"
          renderTab={tab => <span>{tab.title}</span>}
        >
          <div className="home-tab">
            <div className="flex-container">
              <div className="sub-title">Basic</div>
              <Flex>
                <Flex.Item><PlaceHolder ><span> test</span></PlaceHolder></Flex.Item>
                <Flex.Item><PlaceHolder /></Flex.Item>
              </Flex>
              <WhiteSpace size="lg" />
              <Flex>
                <Flex.Item><PlaceHolder /></Flex.Item>
                <Flex.Item><PlaceHolder /></Flex.Item>
                <Flex.Item><PlaceHolder /></Flex.Item>
              </Flex>
              <WhiteSpace size="lg" />
              <Flex>
                <Flex.Item><PlaceHolder /></Flex.Item>
                <Flex.Item><PlaceHolder /></Flex.Item>
                <Flex.Item><PlaceHolder /></Flex.Item>
                <Flex.Item><PlaceHolder /></Flex.Item>
              </Flex>
              <WhiteSpace size="lg" />

              <div className="sub-title">Wrap</div>
              <Flex wrap="wrap">
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
              </Flex>
              <WhiteSpace size="lg" />

              <div className="sub-title">Align</div>
              <Flex justify="center">
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
              </Flex>
              <WhiteSpace />
              <Flex justify="end">
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
              </Flex>
              <WhiteSpace />
              <Flex justify="between">
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline" />
              </Flex>

              <WhiteSpace />
              <Flex align="start">
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline small" />
                <PlaceHolder className="inline" />
              </Flex>
              <WhiteSpace />
              <Flex align="end">
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline small" />
                <PlaceHolder className="inline" />
              </Flex>
              <WhiteSpace />
              <Flex align="baseline">
                <PlaceHolder className="inline" />
                <PlaceHolder className="inline small" />
                <PlaceHolder className="inline" />
              </Flex>
            </div>
          </div>
          <div className="home-tab">
            Content of second tab
          </div>
          <div className="home-tab">
            Content of third tab
          </div>
        </Tabs>
      </div>
    )
  }
}

export default MobHome

 src/mob/home/index.scss

New file
@@ -0,0 +1,45 @@
.mob-header-container {
  width: 100%;
  height: 48px;
  color: rgba(255, 255, 255, 0.65);
  
  background: #001529;
  border-bottom: 1px solid #000;

  .header-logo {
    float: left;
    width: 180px;
    line-height: 48px;
    text-align: center;
    padding-left: 5px;
    box-sizing: border-box;
    opacity: 1;
    img {
      max-width: 100%;
      max-height: 40px;
    }
  }
  .header-setting {
    float: right;
    line-height: 48px;
    margin-right: 10px;
    img {
      width: 29px;
      height: 29px;
      border-radius: 30px;
      margin-right: 7px;
    }
    span {
      color: #ffffff;
      font-size: 0.95rem;
      .username {
        display: inline-block;
        height: 30px;
        max-width: 95px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

 src/tabviews/subtable/index.jsx

@@ -777,6 +777,8 @@
   * @description 按钮操作完成后（成功或失败），页面刷新，重置页码及选择项
   */
  refreshbyaction = (btn, type) => {
    const { Tab } = this.props

    if (btn.execSuccess === 'grid' && type === 'success') {
      this.reloadtable()
    } else if (btn.execError === 'grid' && type === 'error') {
@@ -795,6 +797,9 @@
      this.reloadtable()
      this.props.handleMainTable('equaltab')
    } else if (btn.execSuccess === 'maingrid' && type === 'success') {
      if (Tab.isTreeNode) {
        this.reloadtable()
      }
      this.props.handleMainTable('maingrid')
    } else if (btn.execSuccess === 'equaltab' && type === 'success') {
      this.reloadtable()

 src/tabviews/treepage/index.jsx

@@ -113,7 +113,7 @@
      // 权限过滤
      config.tabgroups.forEach(group => {
        group.sublist = group.sublist.filter(tab => {
          if (tab.supMenu === 'mainTable') {
          if (tab.supMenu === 'mainTable' || (!tab.supMenu && tab.level === 0)) {
            tab.isTreeNode = true
          }
          return permAction[tab.linkTab]}
@@ -554,9 +554,9 @@
   * @description 子表操作完成后刷新主表
   */
  handleMainTable = (type, tab) => {
    if (type === 'maingrid' && tab.supMenu === 'mainTable') {
    if (type === 'maingrid' && (tab.supMenu === 'mainTable' || (!tab.supMenu && tab.level === 0))) {
      this.loadmaindata()
    } else if (type === 'mainline' && tab.supMenu === 'mainTable') {
    } else if (type === 'mainline' && (tab.supMenu === 'mainTable' || (!tab.supMenu && tab.level === 0))) {
      this.loadmaindata()
    } else if ((type === 'maingrid' || type === 'mainline') && tab.supMenu) {
      this.setState({

 src/templates/comtableconfig/index.jsx

@@ -1125,10 +1125,19 @@
      }
    })

    let hasKey = false
    config.columns.forEach(col => {
      if (config.setting.primaryKey === col.field) {
        hasKey = true
      }
    })

    if (config.setting.interType === 'inner' && !config.setting.innerFunc && config.setting.default !== 'false' && !config.setting.dataresource) {
      return '菜单尚未设置数据源，不可启用！'
    } else if (!config.setting.primaryKey) {
      return '菜单尚未设置主键，不可启用！'
    } else if (!hasKey) {
      return '显示列中不存在主键字段，不可启用！'
    } else if (!tabinvalid) {
      return '菜单标签页设置错误（存在多行标签时，行标签不可为空）！'
    } else if (charterr) {

 src/templates/sharecomponent/tabscomponent/tabform/index.jsx

@@ -272,10 +272,10 @@
          }
          if (values.level === undefined) {
            values.level = ''
          } else if (values.supMenu && values.level === 0) {
          } else if (values.supMenu && values.supMenu === 'mainTable' && values.level === 0) {
            notification.warning({
              top: 92,
              message: '存在上级标签，且设置显示级别为0时，会造成子表中按钮不可用！',
              message: '上级标签为主表，且设置显示级别为0时，会造成子表中按钮不可用！',
              duration: 5
            })
          }

 src/templates/subtableconfig/index.jsx

@@ -922,10 +922,19 @@
      }
    })

    let hasKey = false
    config.columns.forEach(col => {
      if (config.setting.primaryKey === col.field) {
        hasKey = true
      }
    })

    if (config.setting.interType === 'inner' && !config.setting.innerFunc && config.setting.default !== 'false' && !config.setting.dataresource) {
      return '菜单尚未设置数据源，不可启用！'
    } else if (!config.setting.primaryKey) {
      return '菜单尚未设置主键，不可启用！'
    } else if (!hasKey) {
      return '显示列中不存在主键字段，不可启用！'
    } else if (charterr) {
      return charterr
    } else {

 src/views/mobile/index.jsx

@@ -1,19 +1,16 @@
import React, {Component} from 'react'
import {connect} from 'react-redux'
// import { message, Modal } from 'antd'
import { Flex, WhiteSpace } from 'antd-mobile'

// import Api from '@/api'
import zhCN from '@/locales/zh-CN/login.js'
import enUS from '@/locales/en-US/login.js'
// import asyncComponent from '@/utils/asyncComponent'
// import asyncLoadComponent from '@/utils/asyncLoadComponent'
import asyncComponent from '@/utils/asyncComponent'

import './index.scss'


const PlaceHolder = ({ className = '', ...restProps }) => (
  <div className={`${className} placeholder`} {...restProps}>Block</div>
)
const Header = asyncComponent(() => import('@/mob/header'))
const Home = asyncComponent(() => import('@/mob/home'))

class Mobile extends Component {
  state = {
@@ -30,80 +27,18 @@
  }

  render () {
    // const {  } = this.state

    return (
      <div className="mobile-container">
        <div className="flex-container">
          <div className="sub-title">Basic</div>
          <Flex>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
          <Flex>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
          <Flex>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
            <Flex.Item><PlaceHolder /></Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />

          <div className="sub-title">Wrap</div>
          <Flex wrap="wrap">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace size="lg" />

          <div className="sub-title">Align</div>
          <Flex justify="center">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace />
          <Flex justify="end">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace />
          <Flex justify="between">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline" />
          </Flex>

          <WhiteSpace />
          <Flex align="start">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline small" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace />
          <Flex align="end">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline small" />
            <PlaceHolder className="inline" />
          </Flex>
          <WhiteSpace />
          <Flex align="baseline">
            <PlaceHolder className="inline" />
            <PlaceHolder className="inline small" />
            <PlaceHolder className="inline" />
          </Flex>
      <div className="mobile-view">
        <Header />
        <div className="mob-body">
          <div className="mob-tool">
          
          </div>
          <div className="mob-shell">
            <div className="mob-shell-inner">
              <Home />
            </div>
          </div>
        </div>
      </div>
    )

 src/views/mobile/index.scss

@@ -1,4 +1,90 @@
.mobile-container {
.mobile-view {
  background: #000;
  .mob-body {
    width: 100vw;
    height: calc(100vh - 50px);
    overflow: hidden;
    position: relative;
    background: #262626;

    .mob-tool {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 40px;
      background: #262626;
      box-shadow: 2px 0px 2px #000;
    }

    .mob-shell {
      width: 375px;
      height: calc(100vh - 70px);
      margin: 0 auto;
      background: #ffffff url('../../assets/mobimg/mobile.png');
      background-size: 100% 100%;
      padding: 5vh 13px 6vh;
      border-radius: 30px;

      .mob-shell-inner {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #f5f5f9;
      }
      .mob-shell-inner::-webkit-scrollbar {
        width: 4px;
      }
      .mob-shell-inner::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
        background: rgba(0, 0, 0, 0.23);
        border-radius: 5px;
      }
      .mob-shell-inner::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.07);
        background: rgba(0, 0, 0, 0);
        border-radius: 3px;
      }
    }
  }

  .mob-home {
    width: 100%;
    height: 100%;
    overflow: hidden;
    > .am-tabs {
      > .am-tabs-tab-bar-wrap {
        .am-tabs-default-bar-underline {
          display: none;
        }
      }
      > .am-tabs-content-wrap {
        > .am-tabs-pane-wrap {
          .home-tab {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        > .am-tabs-pane-wrap::-webkit-scrollbar {
          width: 4px;
        }
        > .am-tabs-pane-wrap::-webkit-scrollbar-thumb {
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
          background: rgba(0, 0, 0, 0.13);
          border-radius: 5px;
        }
        > .am-tabs-pane-wrap::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(0, 0, 0, 0.07);
          background: rgba(0, 0, 0, 0);
          border-radius: 3px;
        }
      }
    }
  }
  .flex-container {
    margin: 0 15px;
  }