2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/menu/components/form/formaction/index.jsx

@@ -1,13 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { connect } from 'react-redux'
import { Modal, Button, Popover, Icon } from 'antd'

import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import asyncComponent from '@/utils/asyncComponent'
import { getActionForm } from './formconfig'
import { resetStyle } from '@/utils/utils-custom.js'

import MKEmitter from '@/utils/events.js'
import MenuUtils from '@/utils/utils-custom.js'
@@ -24,18 +24,11 @@

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    appType: sessionStorage.getItem('appType'),
    card: null,          // 编辑中元素
    formlist: null,      // 表单信息
    elements: null,      // 按钮组
    visible: false,      // 模态框控制
    profVisible: false,  // 验证信息编辑
  }

  /**
   * @description 搜索条件初始化
   */
  UNSAFE_componentWillMount () {

  }

  componentDidMount () {
@@ -60,7 +53,7 @@
    const { group } = this.props

    let _style = element.style ? fromJS(element.style).toJS() : {}
    let options = ['font', 'border', 'padding', 'margin', 'backgroundColor']
    let options = ['font', 'border', 'padding', 'margin', 'backgroundColor', 'width']

    this.setState({
      card: element
@@ -89,13 +82,13 @@
   * @description 按钮编辑，获取按钮表单信息
   */
  handleAction = (card) => {
    const { menu, config } = this.props
    const { config } = this.props

    let usefulFields = sessionStorage.getItem('permFuncField')
    if (usefulFields) {
      try {
        usefulFields = JSON.parse(usefulFields)
      } catch {
      } catch (e) {
        usefulFields = []
      }
    } else {
@@ -107,7 +100,7 @@
      <p style={{marginBottom: '5px'}}>{this.state.dict['model.tooltip.func.innerface'].replace('@ableField', ableField)}</p>
    </div>

    let modules = MenuUtils.getSubModules(menu.components, config.uuid)
    let modules = MenuUtils.getSubModules(window.GLOB.customMenu.components, config.uuid)

    this.setState({
      visible: true,
@@ -130,38 +123,29 @@
   * @description 元素修改后提交保存
   */
  handleActionSubmit = () => {
    const { elements } = this.state
    let color = { primary: '#1890ff', yellow: '#c49f47', orange: 'orange', danger: '#ff4d4f', green: '#26C281', dgreen: '#32c5d2', purple: '#8E44AD', cyan: '#13c2c2', gray: '#666666' }
    const { card } = this.state

    this.actionFormRef.handleConfirm().then(res => {
      let _elements = elements.map(cell => {
        if (cell.uuid === res.uuid) {
          res = {...cell, ...res}
          delete res.focus
          let btnstyle = {}
      res.type = card.type
      res.style = card.style || null
      if (card.verify) {
        res.verify = card.verify
      }

          if (res.class !== cell.class || res.show !== cell.show || !res.btnstyle) {
            if (res.show === 'link' || res.show === 'icon') {
              btnstyle.color = color[res.class]
              btnstyle.backgroundColor = 'transparent'
            } else {
              btnstyle.color = '#ffffff'
              btnstyle.backgroundColor = color[res.class]
            }
          }
          res.btnstyle = {...res.btnstyle, ...btnstyle}
      let group = fromJS(this.props.group).toJS()

          return res
        }
        return cell
      })
      if (res.type === 'prev') {
        group.prevButton = res
      } else if (res.type === 'submit') {
        group.subButton = res
      } else if (res.type === 'next') {
        group.nextButton = res
      }

      this.setState({
        elements: _elements,
        visible: false
      }, () => {
        this.props.updateElement(_elements)
      })
      this.props.updateconfig(group)
    })
  }

@@ -178,23 +162,30 @@
   * @description 验证信息保存
   */
  verifySubmit = () => {
    const { elements, card } = this.state

    this.verifyRef.handleConfirm().then(res => {
      let _elements = elements.map(cell => {
        if (cell.uuid === card.uuid) {
          cell.verify = res
        }
      let group = fromJS(this.props.group).toJS()

        return cell
      })
      group.subButton.verify = res

      this.setState({
        elements: _elements,
        profVisible: false
      }, () => {
        this.props.updateElement(_elements)
      })
      this.props.updateconfig(group)
    })
  }

  changeMenu = () => {
    const { appType } = this.state
    const { group } = this.props

    if (appType !== 'pc' && appType !== 'mob') return
    if (!group.subButton.linkmenu) return

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

@@ -204,13 +195,13 @@

    return (
      <div className="mk-form-action">
        {group.sort !== 1 ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
        {group.prevButton && group.prevButton.enable !== 'false' && group.sort !== 1 ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <Icon className="edit" title="编辑" type="edit" onClick={() => this.handleAction(group.prevButton)} />
            <Icon className="style" title="调整样式" onClick={() => this.handleStyle(group.prevButton)} type="font-colors" />
          </div>
        } trigger="hover">
          <Button type="link" className="prev" style={group.prevButton.style}>{group.prevButton.label}</Button>
          <Button type="link" className="prev" style={resetStyle(group.prevButton.style)}>{group.prevButton.label}</Button>
        </Popover> : null}
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
@@ -219,16 +210,16 @@
            <Icon className="profile" title="setting" type="profile" onClick={() => this.profileAction()} />
          </div>
        } trigger="hover">
          <Button type="link" className="submit mk-primary" style={group.subButton.style}>{group.subButton.label}</Button>
          <Button type="link" className="submit mk-primary" onDoubleClick={this.changeMenu} style={resetStyle(group.subButton.style)}>{group.subButton.label}</Button>
        </Popover>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
        {group.nextButton && group.nextButton.enable !== 'false' && group.sort !== config.subcards.length ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <Icon className="edit" title="编辑" type="edit" onClick={() => this.handleAction(group.nextButton)} />
            <Icon className="style" title="调整样式" onClick={() => this.handleStyle(group.nextButton)} type="font-colors" />
          </div>
        } trigger="hover">
          <Button type="link" className="skip" style={group.nextButton.style}>{group.nextButton.label}</Button>
        </Popover>
          <Button type="link" className="skip" style={resetStyle(group.nextButton.style)}>{group.nextButton.label}</Button>
        </Popover> : null}
        {/* 编辑按钮：复制、编辑 */}
        <Modal
          title={dict['model.edit']}
@@ -244,7 +235,6 @@
        >
          <ActionForm
            dict={dict}
            type="card"
            card={card}
            setting={config.setting}
            formlist={this.state.formlist}
@@ -265,7 +255,7 @@
          destroyOnClose
        >
          <VerifyCard
            card={group.subButton}
            card={{...group.subButton, modal: {fields: group.fields}}}
            dict={dict}
            config={config}
            columns={config.columns}
@@ -277,14 +267,4 @@
  }
}

const mapStateToProps = (state) => {
  return {
    menu: state.customMenu
  }
}

const mapDispatchToProps = () => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(CardCellComponent)
export default CardCellComponent