import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
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'
|
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 = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
appType: sessionStorage.getItem('appType'),
|
card: null, // 编辑中元素
|
formlist: null, // 表单信息
|
visible: false, // 模态框控制
|
profVisible: false, // 验证信息编辑
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('submitStyle', this.getStyle)
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props.group), fromJS(nextProps.group)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('submitStyle', this.getStyle)
|
}
|
|
handleStyle = (element) => {
|
const { group } = this.props
|
|
let _style = element.style ? fromJS(element.style).toJS() : {}
|
let options = ['font', 'border', 'padding', 'margin', 'backgroundColor']
|
|
this.setState({
|
card: element
|
})
|
|
MKEmitter.emit('changeStyle', [group.uuid, element.type], options, _style)
|
}
|
|
getStyle = (comIds, style) => {
|
let group = fromJS(this.props.group).toJS()
|
|
if (comIds.length !== 2 || comIds[0] !== group.uuid) return
|
|
if (comIds[1] === 'prev') {
|
group.prevButton.style = style
|
} else if (comIds[1] === 'submit') {
|
group.subButton.style = style
|
} else if (comIds[1] === 'next') {
|
group.nextButton.style = style
|
}
|
|
this.props.updateconfig(group)
|
}
|
|
/**
|
* @description 按钮编辑，获取按钮表单信息
|
*/
|
handleAction = (card) => {
|
const { config } = this.props
|
|
let usefulFields = sessionStorage.getItem('permFuncField')
|
if (usefulFields) {
|
try {
|
usefulFields = JSON.parse(usefulFields)
|
} catch {
|
usefulFields = []
|
}
|
} else {
|
usefulFields = []
|
}
|
|
let ableField = usefulFields.join(', ')
|
let functip = <div>
|
<p style={{marginBottom: '5px'}}>{this.state.dict['model.tooltip.func.innerface'].replace('@ableField', ableField)}</p>
|
</div>
|
|
let modules = MenuUtils.getSubModules(window.GLOB.customMenu.components, config.uuid)
|
|
this.setState({
|
visible: true,
|
card: card,
|
formlist: getActionForm(card, functip, config.setting.tableName, usefulFields, modules)
|
})
|
}
|
|
/**
|
* @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') {
|
group.prevButton = res
|
} else if (res.type === 'submit') {
|
group.subButton = res
|
} else if (res.type === 'next') {
|
group.nextButton = 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, dict } = this.state
|
|
return (
|
<div className="mk-form-action">
|
{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 ' + group.prevButton.enable} 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">
|
<Icon className="edit" title="编辑" type="edit" onClick={() => this.handleAction(group.subButton)} />
|
<Icon className="style" title="调整样式" onClick={() => this.handleStyle(group.subButton)} type="font-colors" />
|
<Icon className="profile" title="setting" type="profile" onClick={() => this.profileAction()} />
|
</div>
|
} trigger="hover">
|
<Button type="link" className="submit mk-primary" onDoubleClick={this.changeMenu} style={resetStyle(group.subButton.style)}>{group.subButton.label}</Button>
|
</Popover>
|
{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 ' + group.nextButton.enable} style={resetStyle(group.nextButton.style)}>{group.nextButton.label}</Button>
|
</Popover> : null}
|
{/* 编辑按钮：复制、编辑 */}
|
<Modal
|
title={dict['model.edit']}
|
visible={visible}
|
width={800}
|
maskClosable={false}
|
onCancel={this.editModalCancel}
|
footer={[
|
<Button key="cancel" onClick={this.editModalCancel}>{dict['model.cancel']}</Button>,
|
<Button key="confirm" type="primary" onClick={this.handleActionSubmit}>{dict['model.confirm']}</Button>
|
]}
|
destroyOnClose
|
>
|
<ActionForm
|
dict={dict}
|
card={card}
|
setting={config.setting}
|
formlist={this.state.formlist}
|
inputSubmit={this.handleActionSubmit}
|
wrappedComponentRef={(inst) => this.actionFormRef = inst}
|
/>
|
</Modal>
|
{/* 按钮使用系统存储过程时，验证信息模态框 */}
|
<Modal
|
wrapClassName="model-table-action-verify-modal"
|
title={'验证信息'}
|
visible={profVisible}
|
width={'75vw'}
|
maskClosable={false}
|
okText={dict['model.submit']}
|
onOk={this.verifySubmit}
|
onCancel={() => { this.setState({ profVisible: false }) }}
|
destroyOnClose
|
>
|
<VerifyCard
|
card={{...group.subButton, modal: {fields: group.fields}}}
|
dict={dict}
|
config={config}
|
columns={config.columns}
|
wrappedComponentRef={(inst) => this.verifyRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default CardCellComponent
|
