2023-06-14

king

2023-06-14 08cce3334a2dc81d690b518136b0aaea64e48b0b

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

@@ -1,20 +1,22 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Popover } from 'antd'
import { Popover } from 'antd'
import { EditOutlined, FontColorsOutlined, ToolOutlined, DeleteOutlined } from '@ant-design/icons'

import asyncIconComponent from '@/utils/asyncIconComponent'
import asyncComponent from '@/utils/asyncComponent'

import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { resetStyle } from '@/utils/utils-custom.js'
import getWrapForm from './options'
import './index.scss'

const LoginForm = asyncComponent(() => import('./loginform'))
const WrapComponent = asyncIconComponent(() => import('../wrapsetting'))
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,
@@ -22,31 +24,31 @@
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,
    back: false
    active: 'login'
  }

  UNSAFE_componentWillMount () {
    const { card } = this.props

    if (card.isNew) {
      let ismob = sessionStorage.getItem('appType') === 'mob'
      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, title: '', switch: 'false', datatype: 'static' },
        style: { background: '#ffffff', width: '330px', borderRadius: '4px', marginLeft: '55vw' },
        loginWays: [
          {type: 'uname_pwd', label: '账号密码', remember: 'true', disabled: false, labelStyle: {}, submitStyle: {}, submitLabel: '登录'},
          {type: 'sms_vcode', label: '短信验证码', disabled: true, labelStyle: {}, submitStyle: {}, submitLabel: '登录'}
        ]
        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) {
        delete _card.style.width
        delete _card.style.borderRadius
        delete _card.style.marginLeft
        
        _card.style.paddingTop = '20px'
      }

      if (card.config) {
@@ -56,19 +58,29 @@
        _card.wrap.name = card.name
        _card.style = config.style
      }

      this.updateComponent(_card)
    } else {
      let _card = fromJS(card).toJS()
      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'
      }
      if (!_card.style.minHeight && _card.wrap.height) {
        _card.style.minHeight = _card.wrap.height
        delete _card.wrap.height
      }

      this.setState({
        active,
        card: _card
      })
      this.props.updateConfig(_card)
    } else {
      this.setState({
        card: fromJS(card).toJS()
      })
    }
  }

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

  shouldComponentUpdate (nextProps, nextState) {
@@ -82,68 +94,129 @@
    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', 'clear', 'minHeight'], 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) => {
    if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
      e.stopPropagation()
      MKEmitter.emit('clickComponent', this.state.card)
      MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => {
        let _card = {...this.state.card}
        _card.style = {..._card.style, ...style}

        this.setState({ card: _card })
        this.props.updateConfig(_card)
      })
    }
  }

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

    return getWrapForm(card.wrap)
  }

  updateWrap = (res) => {
    let card = fromJS(this.state.card).toJS()

    card.wrap = res

    let active = 'login'
    if (res.classify === 'signin') {
      active = 'signin'
    }
    this.setState({
      active
    })

    this.updateComponent(card)
  }

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

    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
      delete style.marginBottom
    }

    return (
      <div className="login-edit-box" style={{...card.style}} onClick={this.clickComponent} id={card.uuid}>
      <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">
            <WrapComponent config={card} updateConfig={this.updateComponent} />
            <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
            <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
            <NormalForm title="注册/登录设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
            <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
            <DeleteOutlined className="close" title="删除组件" onClick={() => this.props.deletecomponent(card.uuid)} />
          </div>
        } trigger="hover">
          <Icon type="tool" />
          <ToolOutlined />
        </Popover>
        <LoginForm loginWays={card.loginWays} dict={dict} />
        {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" onDoubleClick={() => {
              let oInput = document.createElement('input')
              oInput.value = 'anchor' + card.uuid
              document.body.appendChild(oInput)
              oInput.select()
              document.execCommand('Copy')
              document.body.removeChild(oInput)
            }}>{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