2022-05-12

king

2022-05-12 b8aa5da1b2873bea760483cc5ab335fde9fb6de6

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

@@ -1,18 +1,19 @@
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 NormalForm = asyncIconComponent(() => import('@/components/normalform'))

class PropCardEditComponent extends Component {
  static propTpyes = {
@@ -22,7 +23,6 @@
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,
    back: false
  }
@@ -31,22 +31,31 @@
    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' },
        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: '账号密码', remember: 'true', disabled: false, labelStyle: {}, submitStyle: {}, submitLabel: '登录'},
          {type: 'sms_vcode', label: '短信验证码', disabled: true, labelStyle: {}, submitStyle: {}, submitLabel: '登录'}
          {type: 'uname_pwd', label: '账号登录', shortcut: 'remember'},
          {type: 'sms_vcode', label: '短信登录'},
          {type: 'app_scan', label: '扫码登录'},
        ]
      }

      if (ismob) {
        delete _card.style.width
        delete _card.style.borderRadius
        delete _card.style.marginLeft
        
        _card.style.paddingTop = '20px'
      }

      if (card.config) {
@@ -61,8 +70,15 @@
      })
      this.props.updateConfig(_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
      }
      this.setState({
        card: fromJS(card).toJS()
        card: _card
      })
    }
  }
@@ -126,21 +142,53 @@
    }
  }

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

    return getWrapForm(card.wrap)
  }

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

    card.wrap = res

    if (res.shortcut) {
      card.loginWays[0].shortcut = res.shortcut
    }

    this.updateComponent(card)
  }

  render() {
    const { card, dict } = this.state
    const { card } = this.state
    let style = resetStyle(card.style)
    if (card.wrap.maxWidth) {
      style.maxWidth = card.wrap.maxWidth
      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
      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} />
        <LoginForm loginWays={card.loginWays} wrap={card.wrap} />
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }