2022-08-19

king

2022-08-19 3b103caa6bfc9ed410e67156c3ca1785bf1cecc9

 src/pc/components/login/normal-login/index.jsx

@@ -13,9 +13,10 @@
import './index.scss'

const LoginForm = asyncComponent(() => import('./loginform'))
const SignForm = asyncComponent(() => import('./signform'))
const NormalForm = asyncIconComponent(() => import('@/components/normalform'))

class PropCardEditComponent extends Component {
class LoginComponent extends Component {
  static propTpyes = {
    card: PropTypes.object,
    deletecomponent: PropTypes.func,
@@ -24,7 +25,7 @@

  state = {
    card: null,
    back: false
    active: 'login'
  }

  UNSAFE_componentWillMount () {
@@ -35,20 +36,14 @@
      let _card = {
        uuid: card.uuid,
        type: card.type,
        floor: card.floor,
        tabId: card.tabId || '',
        parentId: card.parentId || '',
        dataName: card.dataName || '',
        width: card.width || 24,
        name: card.name,
        subtype: card.subtype,
        wrap: { name: card.name, width: card.width || 24, loginWays: ['uname_pwd'], shortcut: 'remember' },
        style: { background: '#ffffff', width: '330px', borderRadius: '4px', marginLeft: '55vw'},
        loginWays: [
          {type: 'uname_pwd', label: '账号登录', shortcut: 'remember'},
          {type: 'sms_vcode', label: '短信登录'},
          {type: 'app_scan', label: '扫码登录'},
        ]
        wrap: { name: card.name, width: card.width || 24, classify: 'login', loginWays: ['uname_pwd'], shortcut: 'remember' },
        style: { background: '#ffffff', width: '330px', borderRadius: '4px', marginLeft: '55vw'}
      }

      if (ismob) {
@@ -66,26 +61,24 @@
        _card.wrap.name = card.name
        _card.style = config.style
      }
      this.setState({
        card: _card
      })
      this.props.updateConfig(_card)

      this.updateComponent(_card)
    } else {
      let _card = fromJS(card).toJS()
      if (_card.loginWays.length === 2) {
        _card.loginWays.push({type: 'app_scan', label: '扫码登录'})
      }
      if (_card.wrap.link && _card.wrap.link === 'menu') {
        _card.wrap.linkmenu = _card.uuid
      }
      _card.wrap.classify = _card.wrap.classify || 'login'

      let active = 'login'
      if (_card.wrap.classify === 'signin') {
        active = 'signin'
      }
      this.setState({
        active,
        card: _card
      })
    }
  }

  componentDidMount () {
    MKEmitter.addListener('submitStyle', this.getStyle)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -99,41 +92,38 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  /**
   * @description 卡片行外层信息更新（数据源，样式等）
   */
  updateComponent = (component) => {
  updateComponent = (card) => {
    card.width = card.wrap.width
    card.name = card.wrap.name

    card.errors = []

    if (!card.wrap.linkmenu) {
      card.errors.push({ level: 0, detail: '登录后跳转菜单未设置！'})
    }
    
    this.setState({
      card: component
      card: card
    })

    component.width = component.wrap.width
    component.name = component.wrap.name

    this.props.updateConfig(component)
    this.props.updateConfig(card)
  }

  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['width', 'background', 'border', 'padding', 'margin'], card.style)
    MKEmitter.emit('changeStyle', ['width', 'background', 'border', 'padding', 'margin'], card.style, this.getStyle)
  }

  getStyle = (comIds, style) => {
    const { card } = this.state

    if (comIds.length !== 1 || comIds[0] !== card.uuid) return

    let _card = {...card, style}

    this.setState({
      card: _card
    })
  getStyle = (style) => {
    let _card = {...this.state.card, style}
    
    this.props.updateConfig(_card)
    this.updateComponent(_card)
  }

  clickComponent = (e) => {
@@ -154,21 +144,26 @@

    card.wrap = res

    if (res.shortcut) {
      card.loginWays[0].shortcut = res.shortcut
    let active = 'login'
    if (res.classify === 'signin') {
      active = 'signin'
    }
    this.setState({
      active
    })

    this.updateComponent(card)
  }

  render() {
    const { card } = this.state
    const { card, active } = this.state
    let style = resetStyle(card.style)
    if (card.wrap.maxWidth) {
      style.maxWidth = card.wrap.maxWidth

    if (card.style.width) {
      let left = style.marginLeft && style.marginLeft !== '0px' ? style.marginLeft : 'auto'
      let right = style.marginRight && style.marginRight !== '0px' ? style.marginRight : 'auto'
      style.margin = (style.marginTop || 0) + ' ' + right + ' ' + (style.marginBottom || 0) + ' ' + left
      style.maxWidth = `calc(100% - ${style.marginLeft || '0px'} - ${style.marginRight || '0px'})`
      delete style.marginLeft
      delete style.marginRight
      delete style.marginTop
@@ -179,7 +174,7 @@
      <div className="login-edit-box" style={style} onClick={this.clickComponent} id={card.uuid}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <NormalForm title="登录设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
            <NormalForm title="注册/登录设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
            <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
@@ -188,10 +183,25 @@
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <LoginForm loginWays={card.loginWays} wrap={card.wrap} />
        {card.wrap.loginWays && active === 'login' ? <LoginForm wrap={card.wrap} changeway={() => this.setState({active: 'signin'})}/> : null}
        {card.wrap.signWays && active === 'signin' ? <SignForm wrap={card.wrap} changeway={() => this.setState({active: 'login'})}/> : null}
        <div className="component-name">
          <div className="center">
            <div className="title">{card.name}</div>
            <div className="content">
              {card.errors && card.errors.map((err, index) => {
                if (err.level === 0) {
                  return <span key={index} className="error">{err.detail}</span>
                } else {
                  return <span key={index} className="waring">{err.detail}；</span>
                }
              })}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default PropCardEditComponent
export default LoginComponent