2020-06-16

king

2020-06-16 1dfbdd345812e76abdeec3ee5efe9424dc13a733

2020-06-16

 src/assets/img/card1.png

 src/assets/img/card2.png

 src/assets/img/card3.png

 src/assets/img/card4.png

 src/assets/img/card5.png

 src/assets/img/card6.png

 src/assets/img/card7.png

 src/assets/img/card8.png

 src/components/header/index.jsx

@@ -678,7 +678,9 @@
        {this.props.editLevel === 'HS' ? <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"> 移动端 <Icon type="arrow-right" /></a> : null}
        {/* {this.props.editState && !this.props.editLevel && options.systemType === 'local' && window.GLOB.systemType !== 'official' ?
          <a href="#/mobmanage" 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/mob/header/index.jsx

@@ -1,5 +1,5 @@
import React, {Component} from 'react'
// import PropTypes from 'prop-types'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
@@ -14,9 +14,10 @@
const { confirm } = Modal

class MobHeader extends Component {
  // static propTpyes = {
  //   collapse: PropTypes.bool,
  // }
  static propTpyes = {
    view: PropTypes.string,
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    logourl: window.GLOB.mainlogo,
@@ -46,9 +47,16 @@
  }

  render () {
    const { view } = this.props

    return (
      <header className="mob-header-container">
        <div className="header-logo"><img src={this.state.logourl} alt=""/></div>
        {view === 'manage' ?
          <div className="mob-manage-title">
            移动端管理
          </div> :null
        }
        <Dropdown className="header-setting" overlay={
          <Menu>
            <Menu.Item key="2" onClick={this.logout}>{this.state.dict['mob.header.logout']}</Menu.Item>

 src/mob/header/index.scss

@@ -42,4 +42,12 @@
      }
    }
  }
  .mob-manage-title {
    position: absolute;
    left: calc(50vw - 45px);
    color: #ffffff;
    font-size: 16px;
    line-height: 48px;
    letter-spacing: 2px;
  }
}

 src/mob/mobcard/index.jsx

New file
@@ -0,0 +1,78 @@
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
import { Button, Card, Spin, Icon, Row, Col } from 'antd'

import Api from '@/api'
// import Utils from '@/utils/utils.js'
import './index.scss'

class CardChart extends Component {
  state = {
    loading: false,
    data: []
  }

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

  UNSAFE_componentWillMount() {
    this.getMobCards()
  }

  getMobCards = () => {
    let param = {
      func: 's_get_kei'
    }
    
    // _param.LText = Utils.formatOptions(_param.LText)                   // 关键字符替换，base64加密
    // _param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' // 时间戳
    // _param.secretkey = Utils.encrypt(_param.LText, _param.timestamp)   // md5密钥

    Api.getCloudConfig(param).then(res => {

    })
  }

  render() {
    const { data, loading } = this.state

    return (
      <div className="mob-card-row-box">
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        <Row gutter={24}>
          {data && data.length > 0 &&
            data.map((item, i) => (
              <Col key={i} span={6}>
                <Card
                  size="small"
                  className="chart-card"
                  actions={[
                    <Button />,
                  ]}
                >
                  <div className="ant-card-meta-detail">
                    
                  </div>
                </Card>
              </Col>
            ))
          }
          
          <Col span={6} key="insert">
            <div className="chart-card insert" onClick={() => {}}>
              <Icon type="plus" />
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}

export default CardChart

 src/mob/mobcard/index.scss

New file
@@ -0,0 +1,40 @@
.mob-card-row-box {
  padding: 40px 20px;

  .chart-card {
    height: 250px;
    border: 1px solid #e8e8e8;
  }

  .chart-card.insert {
    text-align: center;
    cursor: pointer;

    .anticon-plus {
      color: rgb(38, 194, 129);
      font-size: 100px;
      line-height: 250px;
    }
  }

  .loading-mask {
    position: absolute;
    left: 20px;
    top: 0;
    right: 20px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    z-index: 1;

    .ant-spin-blur {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background: #ffffff;
    }
  }
}

 src/router/index.js

@@ -8,7 +8,8 @@
const Main = asyncLoadComponent(() => import('@/views/main'))
const Login = asyncLoadComponent(() => import('@/views/login'))
const NotFound = asyncComponent(() => import('@/views/404'))
const Mobile = asyncLoadComponent(() => import('@/views/mobile'))
const MobManage = asyncLoadComponent(() => import('@/views/mobmanage'))
const MobDesign = asyncLoadComponent(() => import('@/views/mobdesign'))
const PrintT = asyncLoadComponent(() => import('@/views/printTemplate'))

const routers = [
@@ -16,7 +17,8 @@
  {path: '/print/:param', name: 'print', component: PrintT, auth: false},
  {path: '/ssologin/:param', name: 'ssologin', auth: true},
  {path: '/main', name: 'main', component: Main, auth: true},
  {path: '/mobile', name: 'mobile', component: Mobile, auth: true},
  {path: '/mobmanage', name: 'mobmanage', component: MobManage, auth: true},
  {path: '/mobdesign', name: 'mobdesign', component: MobDesign, auth: true},
  {path: '/main/:param', name: 'pmain', component: Main, auth: true}
]


 src/tabviews/subtabtable/index.jsx

@@ -104,23 +104,35 @@
      let _hideCol = []      // 隐藏及合并列中字段的uuid集
      let colMap = new Map()

      // 兼容图表
      let chartId = ''
      if (!config.charts) {
        config.expand = true
        config.charts = [{
          uuid: Utils.getuuid(),
          label: '',
          title: '',
          chartType: 'table',
          icon: 'table',
          Hide: 'false',
          blacklist: []
        }]
      } else if (config.charts.length === 1) {
        config.expand = true
      // 旧版本兼容
      if (!config.version || config.version < '1.0') {
        // 兼容图表
        if (!config.charts) {
          config.expand = true
          config.charts = [{ uuid: Utils.getuuid(), label: '', title: '', chartType: 'table', icon: 'table', Hide: 'false', blacklist: [] }]
        } else {
          config.charts.forEach(card => {
            if (card.chartType === 'card') {
              card.details = card.details.map(_cell => {
                _cell.fontSize = _cell.fontSize || 14
                if (!_cell.width) {
                  _cell.width = 100
                } else if (_cell.width === 'helf') {
                  _cell.width = 50
                } else if (_cell.width === 'third') {
                  _cell.width = 33
                }
                if (!_cell.fontWeight && _cell.bold === 'true') {
                  _cell.fontWeight = 'normal'
                }
                _cell.height = _cell.height || 1
  
                return _cell
              })
            }
          })
        }
      }
      chartId = config.charts[0].uuid

      // 仅支持exec、prompt、pop 三种类型按钮
      config.action = config.action.filter(item => ['exec', 'prompt', 'pop'].includes(item.OpenType))
@@ -182,6 +194,8 @@
        config.expand = true
      }

      let chartId = config.charts[0] ? config.charts[0].uuid : ''

      // 1、筛选字段集，2、过滤隐藏列及合并列中的字段uuid
      config.columns.forEach(col => {
        if (col.field) {

 src/tabviews/zshare/cardcomponent/index.scss

@@ -232,6 +232,27 @@
        .line3 {
          -webkit-line-clamp: 3;
        }
        .line4 {
          -webkit-line-clamp: 4;
        }
        .line5 {
          -webkit-line-clamp: 5;
        }
        .line6 {
          -webkit-line-clamp: 6;
        }
        .line7 {
          -webkit-line-clamp: 7;
        }
        .line8 {
          -webkit-line-clamp: 8;
        }
        .line9 {
          -webkit-line-clamp: 9;
        }
        .line10 {
          -webkit-line-clamp: 10;
        }
      }
      .ant-card-meta-detail > div:not(:last-child) {
        margin-bottom: 2px;

 src/templates/comtableconfig/index.jsx

@@ -105,7 +105,7 @@

    if (!_config.version || _config.version < '1.0') {
      // 配置默认值，兼容
      // _config.version = '1.0'
      _config.version = '1.0'
      _config.Template = 'CommonTable'
      _config.easyCode = _config.easyCode || ''
  

 src/templates/comtableconfig/source.jsx

@@ -6,7 +6,7 @@

class CommonTableBaseData {
  baseConfig = {
    // version: '1.0',
    version: '1.0',
    type: 'system',
    Template: 'CommonTable',
    enabled: false,

 src/templates/sharecomponent/cardcomponent/dragdetail/index.scss

@@ -28,6 +28,27 @@
    .content.line3 {
      -webkit-line-clamp: 3;
    }
    .content.line4 {
      -webkit-line-clamp: 4;
    }
    .content.line5 {
      -webkit-line-clamp: 5;
    }
    .content.line6 {
      -webkit-line-clamp: 6;
    }
    .content.line7 {
      -webkit-line-clamp: 7;
    }
    .content.line8 {
      -webkit-line-clamp: 8;
    }
    .content.line9 {
      -webkit-line-clamp: 9;
    }
    .content.line10 {
      -webkit-line-clamp: 10;
    }
  }

  .align-center {

 src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx

@@ -16,8 +16,11 @@
import card1 from '@/assets/img/card1.png'
import card2 from '@/assets/img/card2.png'
import card3 from '@/assets/img/card3.png'
// import card4 from '@/assets/img/card4.png'
import card4 from '@/assets/img/card4.png'
import card5 from '@/assets/img/card5.png'
import card6 from '@/assets/img/card6.png'
import card7 from '@/assets/img/card7.png'
import card8 from '@/assets/img/card8.png'
import './index.scss'

const syslegends = {
@@ -121,15 +124,30 @@
      subelement: ['content', 'avatar']
    },
    {
      uuid: 'card6',
      url: card6,
      subelement: ['content', 'header']
    },
    {
      uuid: 'card3',
      url: card3,
      subelement: ['content', 'avatar', 'header']
    },
    // {
    //   uuid: 'card4',
    //   url: card4,
    //   subelement: ['content', 'avatar', 'bottom']
    // },
    {
      uuid: 'card8',
      url: card8,
      subelement: ['content', 'bottom']
    },
    {
      uuid: 'card4',
      url: card4,
      subelement: ['content', 'avatar', 'bottom']
    },
    {
      uuid: 'card7',
      url: card7,
      subelement: ['content', 'header', 'bottom']
    },
    {
      uuid: 'card5',
      url: card5,

 src/templates/subtableconfig/index.jsx

@@ -130,7 +130,7 @@

    if (!_config.version || _config.version < '1.0') {
      // 配置默认值，兼容
      // _config.version = '1.0'
      _config.version = '1.0'
      
      // 兼容图表
      if (!_config.charts) {

 src/templates/subtableconfig/source.jsx

@@ -6,7 +6,7 @@

class SubTableBaseData {
  baseConfig = {
    // version: '1.0',
    version: '1.0',
    type: 'system',
    Template: 'SubTable',
    enabled: false,

 src/views/404/index.jsx

@@ -1,5 +1,7 @@
import React, {Component} from 'react'
import { withRouter } from 'react-router-dom'

import { Button } from 'antd'
import Lostsvg from '@/components/lostsvg'
import './index.scss'

@@ -18,7 +20,7 @@
          <div className="ant-result-title">404</div>
          <div className="ant-result-subtitle">抱歉，你访问的页面不存在，请联系管理员。</div>
          <div className="ant-result-extra">
            <button type="button" onClick={() => {this.tomain()}} className="ant-btn ant-btn-primary"><span>返回主页</span></button>
            <Button onClick={() => {this.tomain()}} type="primary">返回主页</Button>
          </div>
        </div>
      </main>

 src/views/404/index.scss

@@ -0,0 +1,10 @@
.ant-pro-basicLayout-content {
  text-align: center;
  padding-top: 10vh;
  .ant-result-title {
    margin-top: 10px;
  }
  .ant-result-subtitle {
    margin-bottom: 15px;
  }
}

 src/views/login/index.jsx

@@ -1,13 +1,14 @@
import React, {Component} from 'react'
import { message, Modal } from 'antd'
import {connect} from 'react-redux'
import { connect } from 'react-redux'
import md5 from 'md5'
import moment from 'moment'

import Api from '@/api'
import Utils from '@/utils/utils.js' 
import options from '@/store/options.js'
import zhCN from '@/locales/zh-CN/login.js'
import enUS from '@/locales/en-US/login.js'
import options from '@/store/options.js'
import Utils from '@/utils/utils.js'
import asyncLoadComponent from '@/utils/asyncLoadComponent'
import { modifyMemberLevel } from '@/store/action'
import './index.scss'

 src/views/mobdesign/index.jsx

 src/views/mobdesign/index.scss

 src/views/mobmanage/index.jsx

New file
@@ -0,0 +1,28 @@
import React, {Component} from 'react'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const Header = asyncComponent(() => import('@/mob/header'))
const MobCard = asyncComponent(() => import('@/mob/mobcard'))

class MobileManage extends Component {
  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  render () {
    return (
      <div className="mobile-manage">
        <Header view="manage" />
        <MobCard />
      </div>
    )
  }
}

export default MobileManage

 src/views/mobmanage/index.scss

New file
@@ -0,0 +1,4 @@
.mobile-manage {
  background: #fff;
  
}