2022-07-28

king

2022-07-28 7ae8fae255456f723b1993044265592c11ef7a36

2022-07-28

 src/assets/img/newpage.jpg

 src/assets/mobimg/moblogin.jpg

 src/components/normalform/modalform/index.jsx

@@ -264,6 +264,13 @@
        content = (<SourceComponent type="" placement="right"/>)
      } else if (item.type === 'table') {
        content = (<MKTable tip={item.tip || ''} columns={item.columns || []} actions={item.actions || []}/>)
      } else if (item.type === 'hint') {
        fields.push(
          <Col span={24} key={index}>
            <div style={{color: '#1890ff', borderBottom: '1px solid #e9e9e9', marginBottom: '15px', paddingLeft: '10px'}}>{item.label}</div>
          </Col>
        )
        return
      }

      if (!content) return

 src/mob/modulesource/option.jsx

@@ -19,7 +19,7 @@
import Carousel1 from '@/assets/mobimg/carousel1.png'
import form from '@/assets/mobimg/form.png'
import tabForm from '@/assets/mobimg/tab-form.png'
import Login from '@/assets/mobimg/login.png'
import Login from '@/assets/mobimg/moblogin.jpg'
// import dashboard from '@/assets/mobimg/dashboard.png'
import NavTop from '@/assets/mobimg/navtop-mob.png'
import scatter from '@/assets/mobimg/scatter.png'
@@ -58,5 +58,5 @@
  { type: 'menu', url: Editor, component: 'editor', subtype: 'brafteditor', title: '富文本', width: 24 },
  { type: 'menu', url: SandBox, component: 'code', subtype: 'sandbox', title: '自定义', width: 24 },
  { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24 },
  { type: 'menu', url: Login, component: 'login', subtype: 'normallogin', title: '登录', width: 24 },
  { type: 'menu', url: Login, component: 'login', subtype: 'normallogin', title: '注册/登录', width: 24 },
]

 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,
@@ -41,13 +42,8 @@
        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) {
@@ -69,9 +65,6 @@
      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
      }
@@ -153,10 +146,6 @@

    card.wrap = res

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

    this.updateComponent(card)
  }

@@ -178,7 +167,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}/>
@@ -187,7 +176,8 @@
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <LoginForm loginWays={card.loginWays} wrap={card.wrap} />
        {card.wrap.loginWays ? <LoginForm wrap={card.wrap} /> : null}
        {card.wrap.signWays ? <SignForm wrap={card.wrap} /> : null}
        <div className="component-name">
          <div className="center">
            <div className="title">{card.name}</div>
@@ -207,4 +197,4 @@
  }
}

export default PropCardEditComponent
export default LoginComponent

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

@@ -38,12 +38,26 @@
        background: transparent;
      }
    }
    button:not(.vercode) {
    .form-item-wrap {
      .btn-login {
        // margin-top: 45px;
        .login-form-button {
      width: 100%;
      height: 40px;
      line-height: 1;
      font-size: 18px;
      margin-bottom: 15px;
          border-radius: 4px;
        }
        .sign-form-button {
          width: 100%;
          height: 40px;
          line-height: 1;
          font-size: 18px;
          margin-bottom: 15px;
          border-radius: 30px;
        }
      }
    }
    .ant-form-item:last-child {
      margin-bottom: 0;

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

@@ -12,8 +12,7 @@

class LoginTabForm extends Component {
  static propTpyes = {
    loginWays: PropTypes.array,
    wrap: PropTypes.array,
    wrap: PropTypes.object
  }

  state = {
@@ -23,26 +22,36 @@
  }

  UNSAFE_componentWillMount () {
    const { loginWays, wrap } = this.props
    const { wrap } = this.props

    let _loginWays = []
    let scanWay = null
    loginWays.forEach(item => {
      if (!wrap.loginWays || wrap.loginWays.includes(item.type)) {
        if (item.type === 'sms_vcode') {
          item.label = '短信登录'
        } else if (item.type === 'uname_pwd') {
          item.label = '账号登录'
        } else if (item.type === 'app_scan') {
          scanWay = item

    let loginWays = []
    wrap.loginWays.forEach(way => {
      if (way === 'sms_vcode') {
        loginWays.push({
          type: 'sms_vcode',
          label: '短信登录',
          tempId: wrap.tempId
        })
      } else if (way === 'uname_pwd') {
        loginWays.push({
          type: 'uname_pwd',
          label: '账号登录',
          shortcut: wrap.shortcut
        })
      } else if (way === 'app_scan') {
        scanWay = {
          type: 'app_scan',
          label: '扫码登录'
        }
        _loginWays.push(item)
        loginWays.push(scanWay)
      }
    })

    this.setState({
      loginWays: _loginWays,
      activeWay: _loginWays[0],
      loginWays: loginWays,
      activeWay: loginWays[0],
      scanWay
    })
  }
@@ -51,24 +60,33 @@
    const { wrap } = this.props

    if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
      let _loginWays = []
      let scanWay = null
      nextProps.loginWays.forEach(item => {
        if (!nextProps.wrap.loginWays || nextProps.wrap.loginWays.includes(item.type)) {
          if (item.type === 'sms_vcode') {
            item.label = '短信登录'
          } else if (item.type === 'uname_pwd') {
            item.label = '账号登录'
          } else if (item.type === 'app_scan') {
            scanWay = item
      let loginWays = []
      nextProps.wrap.loginWays.forEach(way => {
        if (way === 'sms_vcode') {
          loginWays.push({
            type: 'sms_vcode',
            label: '短信登录',
            tempId: wrap.tempId
          })
        } else if (way === 'uname_pwd') {
          loginWays.push({
            type: 'uname_pwd',
            label: '账号登录',
            shortcut: wrap.shortcut
          })
        } else if (way === 'app_scan') {
          scanWay = {
            type: 'app_scan',
            label: '扫码登录'
          }
          _loginWays.push(item)
          loginWays.push(scanWay)
        }
      })

      this.setState({
        loginWays: _loginWays,
        activeWay: _loginWays[0],
        loginWays: loginWays,
        activeWay: loginWays[0],
        scanWay
      })
    }

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

@@ -41,37 +41,12 @@
      required: true
    },
    {
      type: 'checkbox',
      field: 'loginWays',
      label: '登录方式',
      initval: wrap.loginWays || [],
      required: true,
      options: [
        { label: '账号', value: 'uname_pwd' },
        { label: '短信', value: 'sms_vcode' },
        { label: '扫码', value: 'app_scan', disabled: appType === 'mob' },
      ],
      controlFields: [
        {field: 'tempId', values: ['sms_vcode']},
        {field: 'shortcut', values: ['uname_pwd']},
      ]
    },
    {
      type: 'select',
      field: 'linkmenu',
      label: '关联菜单',
      initval: wrap.linkmenu || '',
      required: true,
      options: menulist
    },
    {
      type: 'select', // $验证码$  $mob$  $send_type$
      field: 'tempId',
      label: '短信模板',
      initval: wrap.tempId || '',
      tooltip: '短信模板可在 云系统->应用服务->开发者中心->短信模板 处添加。',
      required: true,
      options: msgTemps
    },
    {
      type: 'number',
@@ -104,20 +79,56 @@
      required: false,
      options: ['px', 'vh', 'vw', '%']
    },
    // {
    //   type: 'radio',
    //   field: 'link',
    //   label: '链接',
    //   initval: wrap.link || 'menu',
    //   required: false,
    //   options: [
    //     {value: 'menu', label: '菜单'},
    //     {value: 'linkmenu', label: '关联菜单'},
    //   ],
    //   controlFields: [
    //     {field: 'linkmenu', values: ['linkmenu']}
    //   ]
    // },
    {
      type: 'radio',
      field: 'classify',
      label: '组件类型',
      initval: wrap.classify || 'login',
      tooltip: '注册登录都存在时，在公众号与小程序中优先显示注册，APP与H5中优先显示登录。',
      required: true,
      options: [
        { label: '登录', value: 'login' },
        { label: '注册', value: 'signin' },
        { label: '注册/登录', value: 'all' },
      ],
      controlFields: [
        {field: 'loginWays', values: ['login', 'all']},
        {field: 'logintip', values: ['login', 'all']},
        {field: 'signWays', values: ['signin', 'all']},
        {field: 'protocol', values: ['signin', 'all']},
        {field: 'signtip', values: ['signin', 'all']},
      ]
    },
    {
      type: 'hint',
      field: 'logintip',
      label: '登录配置'
    },
    {
      type: 'checkbox',
      field: 'loginWays',
      label: '登录方式',
      initval: wrap.loginWays || [],
      required: true,
      options: [
        { label: '账号', value: 'uname_pwd' },
        { label: '短信', value: 'sms_vcode' },
        { label: '扫码', value: 'app_scan', disabled: appType === 'mob' },
      ],
      controlFields: [
        {field: 'tempId', values: ['sms_vcode']},
        {field: 'shortcut', values: ['uname_pwd']},
      ]
    },
    {
      type: 'select', // $验证码$  $mob$  $send_type$
      field: 'tempId',
      label: '短信模板',
      initval: wrap.tempId || '',
      tooltip: '短信模板可在 云系统->应用服务->开发者中心->短信模板 处添加。',
      required: true,
      options: msgTemps
    },
    {
      type: 'radio',
      field: 'shortcut',
@@ -131,56 +142,85 @@
        {value: 'autologon', label: '自动登录'},
      ]
    },
    // {
    //   type: 'radio',
    //   field: 'protocol',
    //   label: '协议',
    //   initval: wrap.protocol || 'false',
    //   required: false,
    //   options: [
    //     {value: 'false', label: '无'},
    //     {value: 'true', label: '有'},
    //   ],
    //   controlFields: [
    //     {field: 'tip', values: ['true']},
    //     {field: 'groups', values: ['true']},
    //   ]
    // },
    // {
    //   type: 'text',
    //   field: 'tip',
    //   label: '提示文字',
    //   initval: wrap.tip || '我已阅读并同意',
    //   required: true
    // },
    // {
    //   type: 'table',
    //   field: 'groups',
    //   label: '协议组',
    //   initval: wrap.groups || [],
    //   required: true,
    //   span: 24,
    //   columns: [
    //     {
    //       title: '文本',
    //       dataIndex: 'label',
    //       inputType: 'input',
    //       editable: true,
    //       unique: true,
    //       required: true,
    //       width: '35%'
    //     },
    //     {
    //       title: '链接',
    //       dataIndex: 'link',
    //       inputType: 'input',
    //       editable: true,
    //       unique: true,
    //       required: true,
    //       width: '40%'
    //     },
    //   ]
    // }
    {
      type: 'hint',
      field: 'signtip',
      label: '注册配置'
    },
    {
      type: 'checkbox',
      field: 'signWays',
      label: '注册方式',
      initval: wrap.signWays || [],
      required: true,
      options: [
        { label: '账号', value: 'uname_pwd' },
        { label: '短信', value: 'sms_vcode' },
        { label: '微信', value: 'weixin', disabled: appType !== 'mob' },
      ],
      controlFields: [
        {field: 'signTempId', values: ['sms_vcode']}
      ]
    },
    {
      type: 'select', // $验证码$  $mob$  $send_type$
      field: 'signTempId',
      label: '短信模板',
      initval: wrap.signTempId || '',
      tooltip: '短信模板可在 云系统->应用服务->开发者中心->短信模板 处添加。',
      required: true,
      options: msgTemps
    },
    {
      type: 'radio',
      field: 'protocol',
      label: '协议',
      initval: wrap.protocol || 'false',
      required: false,
      options: [
        {value: 'false', label: '无'},
        {value: 'true', label: '有'},
      ],
      controlFields: [
        {field: 'tip', values: ['true']},
        {field: 'groups', values: ['true']},
      ]
    },
    {
      type: 'text',
      field: 'tip',
      label: '提示文字',
      initval: wrap.tip || '我已阅读并同意',
      required: true
    },
    {
      type: 'table',
      field: 'groups',
      label: '协议组',
      initval: wrap.groups || [],
      required: true,
      span: 24,
      columns: [
        {
          title: '文本',
          dataIndex: 'label',
          inputType: 'input',
          editable: true,
          unique: true,
          required: true,
          width: '35%'
        },
        {
          title: '链接',
          dataIndex: 'link',
          inputType: 'input',
          editable: true,
          unique: true,
          required: true,
          width: '40%'
        },
      ]
    }
  ]

  return wrapForm

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

New file
@@ -0,0 +1,137 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Input, Button, notification, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

import MKEmitter from '@/utils/events.js'
import './index.scss'

class LoginTabForm extends Component {
  static propTpyes = {
    wrap: PropTypes.object
  }

  state = {
    activeWay: null,
    signWays: []
  }

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

    this.setState({
      signWays: wrap.signWays,
      activeWay: wrap.signWays[0]
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { wrap } = this.props

    if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
      this.setState({
        signWays: nextProps.wrap.signWays,
        activeWay: nextProps.wrap.signWays[0]
      })
    }
  }

  onChangeTab = (activeWay) => {
    this.setState({activeWay})
  }

  changeMenu = () => {
    const { wrap } = this.props

    if (!wrap.linkmenu) {
      notification.warning({
        top: 92,
        message: '请设置关联菜单！',
        duration: 5
      })
      return
    }

    MKEmitter.emit('changeEditMenu', {
      MenuID: wrap.linkmenu,
      copyMenuId: '',
      MenuNo: '',
      MenuName: ''
    })
  }

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

  render() {
    const { wrap } = this.props
    const { activeWay, signWays } = this.state

    return (
      <Form className="login-edit-form">
        {activeWay === 'uname_pwd' ? <div className="form-item-wrap">
          <Form.Item>
            <Input
              prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="用户名"
              autoComplete="off"
            />
          </Form.Item>
          <Form.Item>
            <Input.Password placeholder="密码" prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />
          </Form.Item>
          {wrap.groups ? <div className={'protocol-wrap '}>
            <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span className="protocol" key={i}>《{item.label}》</span>))}
          </div> : null}
          <Form.Item className="btn-login">
            <Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
            注册
            </Button>
          </Form.Item>
        </div> : null}
        {activeWay === 'sms_vcode' ? <div className="form-item-wrap">
          <Form.Item>
            <Input
              placeholder="手机号"
              autoComplete="off"
            />
          </Form.Item>
          <Form.Item style={{marginBottom: '35px'}}>
            <Input
              addonAfter={
                <Button type="link" className="vercode" size="small">
                  获取验证码
                </Button>
              }
              placeholder="验证码"
              autoComplete="off"
            />
          </Form.Item>
          {wrap.groups ? <div className={'protocol-wrap '}>
            <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span className="protocol" key={i}>《{item.label}》</span>))}
          </div> : null}
          <Form.Item className="btn-login">
            <Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
              注册
            </Button>
          </Form.Item>
        </div> : null}
        <div className={'login-ways '}>
          <div>其他登录方式</div>
          {signWays.map((item, i) => {
            return (<span key={i} onClick={() => this.onChangeTab(item)}>{item}</span>)
          })}
        </div>
      </Form>
    )
  }
}

export default LoginTabForm

 src/pc/modulesource/option.jsx

@@ -60,5 +60,5 @@
  { type: 'menu', url: Editor, component: 'editor', subtype: 'brafteditor', title: '富文本', width: 24 },
  { type: 'menu', url: SandBox, component: 'code', subtype: 'sandbox', title: '自定义', width: 24 },
  { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24 },
  { type: 'menu', url: Login, component: 'login', subtype: 'normallogin', title: '登录', width: 24 },
  { type: 'menu', url: Login, component: 'login', subtype: 'normallogin', title: '注册/登录', width: 24 },
]

 src/utils/option.js

@@ -5,6 +5,7 @@
import treepage from '@/assets/img/treepage.jpg'
import calendar from '@/assets/img/calendar.jpg'
import customImg from '@/assets/img/custom.jpg'
import newpage from '@/assets/img/newpage.jpg'
import rolemanage from '@/assets/img/rolemanage.jpg'

const _dict =  sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
@@ -87,7 +88,7 @@
  {
    title: '外部页面',
    type: 'NewPage',
    url: customImg,
    url: newpage,
    baseconfig: '',
    isSystem: true
  },