import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Modal, Button, Popover } from 'antd'
|
import { FontColorsOutlined, EditOutlined, ProfileOutlined } from '@ant-design/icons'
|
|
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'
|
import './index.scss'
|
|
const ActionForm = asyncComponent(() => import('./actionform'))
|
const VerifyCard = asyncComponent(() => import('@/templates/zshare/verifycard'))
|
|
class CardCellComponent extends Component {
|
static propTpyes = {
|
group: PropTypes.object, // 分组信息
|
updateconfig: PropTypes.func // 菜单配置更新
|
}
|
|
state = {
|
appType: sessionStorage.getItem('appType'),
|
card: null, // 编辑中元素
|
formlist: null, // 表单信息
|
visible: false, // 模态框控制
|
profVisible: false, // 验证信息编辑
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props.group), fromJS(nextProps.group)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
handleStyle = (element) => {
|
let _style = element.style ? fromJS(element.style).toJS() : {}
|
let options = ['font', 'border', 'padding', 'margin', 'backgroundColor', 'width']
|
|
this.setState({
|
card: element
|
})
|
|
MKEmitter.emit('changeStyle', options, _style, this.getStyle)
|
}
|
|
getStyle = (style) => {
|
const { card } = this.state
|
let group = fromJS(this.props.group).toJS()
|
|
if (card.type === 'prev') {
|
group.prevButton.style = style
|
} else if (card.type === 'submit') {
|
group.subButton.style = style
|
} else if (card.type === 'next') {
|
group.nextButton.style = style
|
} else if (card.type === 'close') {
|
group.closeButton.style = style
|
} else if (card.type === 'reset') {
|
group.resetButton.style = style
|
}
|
|
this.props.updateconfig(group)
|
}
|
|
/**
|
* @description 按钮编辑，获取按钮表单信息
|
*/
|
handleAction = (card) => {
|
const { config, group } = this.props
|
|
let usefulFields = sessionStorage.getItem('permFuncField')
|
if (usefulFields) {
|
try {
|
usefulFields = JSON.parse(usefulFields)
|
} catch (e) {
|
usefulFields = []
|
}
|
} else {
|
usefulFields = []
|
}
|
|
let ableField = usefulFields.join(', ')
|
let msg = `函数名称需以${ableField}等字符开始;`
|
let functip = <div>
|
<p style={{marginBottom: '5px'}}>{msg}</p>
|
</div>
|
|
let supId = ''
|
if (config.wrap.linkType === 'sup') {
|
supId = config.wrap.supModule[config.wrap.supModule.length - 1]
|
}
|
|
let menu = window.GLOB.customMenu
|
|
let modules = MenuUtils.getSubModules(menu.components, config.uuid, supId, menu.interfaces || null)
|
let anchors = MenuUtils.getAnchors(menu.components, config.uuid) || []
|
|
if (card.type === 'submit' && !card.Ot) {
|
card.Ot = config.wrap.datatype === 'static' ? 'notRequired' : 'requiredSgl'
|
}
|
|
this.setState({
|
visible: true,
|
card: card,
|
formlist: getActionForm(card, functip, config.setting.tableName, usefulFields, modules, anchors, group.uuid, group.fields)
|
})
|
}
|
|
/**
|
* @description 取消保存，如果元素为新添元素，则从序列中删除
|
*/
|
editModalCancel = () => {
|
this.setState({
|
card: null,
|
visible: false
|
})
|
}
|
|
/**
|
* @description 元素修改后提交保存
|
*/
|
handleActionSubmit = () => {
|
const { card } = this.state
|
|
this.actionFormRef.handleConfirm().then(res => {
|
res.type = card.type
|
res.style = card.style || null
|
if (card.verify) {
|
res.verify = card.verify
|
}
|
|
let group = fromJS(this.props.group).toJS()
|
|
if (res.type === 'prev') {
|
res.enable = group.prevButton.enable || 'true'
|
group.prevButton = res
|
} else if (res.type === 'submit') {
|
res.enable = group.subButton.enable || 'true'
|
group.subButton = res
|
} else if (res.type === 'next') {
|
res.enable = group.nextButton.enable || 'true'
|
group.nextButton = res
|
} else if (res.type === 'close') {
|
res.enable = group.closeButton.enable || 'true'
|
group.closeButton = res
|
} else if (res.type === 'reset') {
|
res.enable = group.resetButton.enable || 'true'
|
group.resetButton = res
|
}
|
|
this.setState({
|
visible: false
|
})
|
this.props.updateconfig(group)
|
})
|
}
|
|
/**
|
* @description 验证信息配置
|
*/
|
profileAction = () => {
|
this.setState({
|
profVisible: true
|
})
|
}
|
|
/**
|
* @description 验证信息保存
|
*/
|
verifySubmit = () => {
|
this.verifyRef.handleConfirm().then(res => {
|
let group = fromJS(this.props.group).toJS()
|
|
group.subButton.verify = res
|
|
this.setState({
|
profVisible: false
|
})
|
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: '',
|
})
|
}
|
|
render() {
|
const { group, config } = this.props
|
const { visible, profVisible, card } = this.state
|
|
return (
|
<div className="mk-form-action">
|
{group.prevButton && group.prevButton.enable === 'true' ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditOutlined className="edit" title="编辑" onClick={() => this.handleAction(group.prevButton)} />
|
<FontColorsOutlined className="style" title="调整样式" onClick={() => this.handleStyle(group.prevButton)}/>
|
</div>
|
} trigger="hover">
|
<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">
|
<EditOutlined className="edit" title="编辑" onClick={() => this.handleAction(group.subButton)} />
|
<FontColorsOutlined className="style" title="调整样式" onClick={() => this.handleStyle(group.subButton)}/>
|
<ProfileOutlined className="profile" title="验证信息" onClick={() => this.profileAction()} />
|
</div>
|
} trigger="hover">
|
<Button type="link" className="submit" onDoubleClick={this.changeMenu} style={resetStyle(group.subButton.style)}>{group.subButton.label}</Button>
|
</Popover>
|
{group.resetButton && group.resetButton.enable === 'true' ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditOutlined className="edit" title="编辑" onClick={() => this.handleAction(group.resetButton)} />
|
<FontColorsOutlined className="style" title="调整样式" onClick={() => this.handleStyle(group.resetButton)}/>
|
</div>
|
} trigger="hover">
|
<Button type="link" className="reset" style={resetStyle(group.resetButton.style)}>{group.resetButton.label}</Button>
|
</Popover> : null}
|
{group.closeButton && group.closeButton.enable === 'true' ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditOutlined className="edit" title="编辑" onClick={() => this.handleAction(group.closeButton)} />
|
<FontColorsOutlined className="style" title="调整样式" onClick={() => this.handleStyle(group.closeButton)}/>
|
</div>
|
} trigger="hover">
|
<Button type="link" className="reset" style={resetStyle(group.closeButton.style)}>{group.closeButton.label}</Button>
|
</Popover> : null}
|
{group.nextButton && group.nextButton.enable === 'true' ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditOutlined className="edit" title="编辑" onClick={() => this.handleAction(group.nextButton)} />
|
<FontColorsOutlined className="style" title="调整样式" onClick={() => this.handleStyle(group.nextButton)}/>
|
</div>
|
} trigger="hover">
|
<Button type="link" className="skip" style={resetStyle(group.nextButton.style)}>{group.nextButton.label}</Button>
|
</Popover> : null}
|
{/* 编辑按钮：复制、编辑 */}
|
<Modal
|
title="编辑"
|
visible={visible}
|
width={920}
|
maskClosable={false}
|
onCancel={this.editModalCancel}
|
footer={[
|
<Button key="cancel" onClick={this.editModalCancel}>取消</Button>,
|
<Button key="confirm" type="primary" onClick={this.handleActionSubmit}>确定</Button>
|
]}
|
destroyOnClose
|
>
|
<ActionForm
|
card={card}
|
setting={config.setting}
|
formlist={this.state.formlist}
|
inputSubmit={this.handleActionSubmit}
|
wrappedComponentRef={(inst) => this.actionFormRef = inst}
|
/>
|
</Modal>
|
{/* 按钮使用系统存储过程时，验证信息模态框 */}
|
<Modal
|
wrapClassName="mk-pop-modal"
|
visible={profVisible}
|
width={'90vw'}
|
maskClosable={false}
|
okText="提交"
|
onOk={this.verifySubmit}
|
onCancel={() => {
|
if (this.verifyRef.handleCancel) {
|
this.verifyRef.handleCancel().then(() => {
|
this.setState({ profVisible: false })
|
})
|
} else {
|
this.setState({ profVisible: false })
|
}
|
}}
|
destroyOnClose
|
>
|
<VerifyCard
|
card={{...group.subButton, modal: {fields: group.fields}}}
|
config={config}
|
columns={config.columns}
|
wrappedComponentRef={(inst) => this.verifyRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default CardCellComponent
|
