import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Menu, Dropdown, Icon, Modal, Spin, notification } from 'antd'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import PasteForm from '@/templates/zshare/pasteform'
|
import TransferForm from '@/templates/zshare/basetransferform'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import './index.scss'
|
|
class editComponent extends Component {
|
static propTpyes = {
|
options: PropTypes.array,
|
MenuID: PropTypes.any,
|
config: PropTypes.object,
|
thawButtons: PropTypes.any,
|
refresh: PropTypes.func
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
thawVisible: false,
|
thawbtnlist: null,
|
pasteVisible: false,
|
}
|
|
handleMenuClick = e => {
|
if (e.key === 'thaw') {
|
this.handleThaw()
|
} else if (e.key === 'paste') {
|
this.setState({pasteVisible: true})
|
}
|
}
|
|
/**
|
* @description 解冻按钮
|
*/
|
handleThaw = () => {
|
const { MenuID } = this.props
|
|
this.setState({
|
thawVisible: true
|
})
|
|
Api.getSystemConfig({
|
func: 'sPC_Get_FrozenMenu',
|
ParentID: MenuID,
|
TYPE: 40
|
}).then(res => {
|
if (res.status) {
|
let _list = []
|
|
res.data.forEach(menu => {
|
let _conf = ''
|
|
if (menu.ParentParam) {
|
try {
|
_conf = JSON.parse(window.decodeURIComponent(window.atob(menu.ParentParam)))
|
} catch (e) {
|
console.warn('Parse Failure')
|
_conf = ''
|
}
|
}
|
|
if (_conf) {
|
_list.push({
|
key: menu.MenuID,
|
title: menu.MenuName,
|
btnParam: _conf
|
})
|
}
|
})
|
|
this.setState({
|
thawbtnlist: _list
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 解冻按钮提交
|
*/
|
thawBtnSubmit = () => {
|
const { thawButtons } = this.props
|
const { thawbtnlist, dict } = this.state
|
let config = fromJS(this.props.config).toJS()
|
|
// 三级菜单解除冻结
|
if (this.refs.trawmenu.state.targetKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: dict['form.required.select'] + dict['header.form.thawbutton'],
|
duration: 5
|
})
|
} else {
|
|
thawbtnlist.forEach(item => {
|
if (this.refs.trawmenu.state.targetKeys.includes(item.key)) {
|
config.action.push(item.btnParam)
|
}
|
})
|
|
this.props.refresh({
|
type: 'thaw',
|
thawButtons: [...thawButtons, ...this.refs.trawmenu.state.targetKeys],
|
config: config
|
})
|
|
this.setState({
|
thawVisible: false
|
})
|
}
|
}
|
|
pasteSubmit = () => {
|
const { options } = this.props
|
let _config = fromJS(this.props.config).toJS()
|
|
this.pasteFormRef.handleConfirm().then(res => {
|
if (res.copyType === 'action' && options.includes('action')) {
|
res.uuid = Utils.getuuid()
|
|
_config.action = _config.action.filter(item => !item.origin)
|
_config.action.push(res)
|
|
this.setState({
|
pasteVisible: false
|
}, () => {
|
this.props.refresh({
|
type: 'paste',
|
config: _config
|
})
|
})
|
} else if (options.includes('search') && (res.copyType === 'search' || res.copyType === 'form')) {
|
res.uuid = Utils.getuuid()
|
_config.search = _config.search.filter(item => !item.origin)
|
let keys = _config.search.map(item => item.field.toLowerCase())
|
|
// search： text select multiselect link date dateweek datemonth daterange group
|
// form： text number select multiselect link switch checkbox radio checkcard
|
// fileupload date datemonth datetime textarea hint color funcvar
|
if (res.copyType === 'form') {
|
if (['number', 'switch', 'textarea', 'checkcard', 'fileupload', 'hint', 'color', 'funcvar'].includes(res.type)) {
|
res.type = 'text'
|
} else if (res.type === 'radio') {
|
res.type = 'select'
|
} else if (res.type === 'checkbox') {
|
res.type = 'multiselect'
|
} else if (res.type === 'datetime') {
|
res.type = 'date'
|
}
|
}
|
res.copyType = 'search'
|
|
_config.search.push(res)
|
|
if (res.field && keys.includes(res.field.toLowerCase())) {
|
notification.warning({
|
top: 92,
|
message: '搜索字段已存在！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
pasteVisible: false
|
}, () => {
|
this.props.refresh({
|
type: 'paste',
|
config: _config
|
})
|
})
|
} else if (options.includes('columns') && res.copyType === 'columns') {
|
_config.columns = _config.columns.filter(col => !col.origin)
|
let keys = _config.columns.map(item => item.field ? item.field.toLowerCase() : '')
|
|
if (_config.columns.length === 0) {
|
_config.columns = res.columns
|
} else {
|
res.columns.forEach(col => {
|
if (!col.field) return
|
let _key = col.field.toLowerCase()
|
if (!keys.includes(_key)) {
|
keys.push(_key)
|
_config.columns.push(col)
|
}
|
})
|
}
|
|
this.setState({
|
pasteVisible: false
|
}, () => {
|
this.props.refresh({
|
type: 'paste',
|
config: _config
|
})
|
})
|
} else if (options.includes('form') && (res.copyType === 'form' || res.copyType === 'search')) {
|
let fields = []
|
let labels = []
|
res.uuid = Utils.getuuid()
|
|
// search： text select multiselect link date dateweek datemonth daterange group
|
// form： text number select multiselect link switch checkbox radio checkcard
|
// fileupload date datemonth datetime textarea hint color funcvar
|
if (res.copyType === 'search') {
|
if (res.type === 'dateweek' || res.type === 'daterange' || res.type === 'group') {
|
res.type = 'date'
|
}
|
}
|
res.copyType = 'form'
|
|
if (_config.groups.length > 0) {
|
_config.groups.forEach(group => {
|
group.sublist.forEach(item => {
|
fields.push(item.field.toLowerCase())
|
labels.push(item.label)
|
})
|
if (group.default) {
|
group.sublist.push(res)
|
}
|
})
|
} else {
|
_config.fields.forEach(item => {
|
fields.push(item.field.toLowerCase())
|
labels.push(item.label)
|
})
|
_config.fields.push(res)
|
}
|
|
if (fields.includes(res.field.toLowerCase())) {
|
notification.warning({
|
top: 92,
|
message: '字段已存在！',
|
duration: 10
|
})
|
return
|
} else if (labels.includes(res.label)) {
|
notification.warning({
|
top: 92,
|
message: '名称已存在！',
|
duration: 10
|
})
|
return
|
}
|
|
this.setState({
|
pasteVisible: false
|
}, () => {
|
this.props.refresh({
|
type: 'paste',
|
config: _config,
|
newform: res
|
})
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: '配置信息格式错误！',
|
duration: 5
|
})
|
}
|
})
|
}
|
|
render() {
|
const { MenuID } = this.props
|
const { dict } = this.state
|
const menu = (
|
<Menu onClick={this.handleMenuClick}>
|
{MenuID ? <Menu.Item key="thaw"><Icon type="unlock" />{dict['header.form.thawbutton']}</Menu.Item> : null}
|
<Menu.Item key="paste"><Icon type="snippets" />{dict['header.form.paste']}</Menu.Item>
|
</Menu>
|
)
|
|
return (
|
<div style={{display: 'inline-block'}}>
|
<Dropdown overlay={menu} overlayClassName="edit-component-box">
|
<span style={{color: '#1890ff', display: 'inline-block', height: 25}}>
|
{dict['model.edit']} <Icon type="down" />
|
</span>
|
</Dropdown>
|
{/* 解冻按钮模态框 */}
|
<Modal
|
title={dict['header.form.thawbutton']}
|
visible={this.state.thawVisible}
|
onOk={this.thawBtnSubmit}
|
onCancel={() => {this.setState({thawVisible: false, thawbtnlist: null})}}
|
destroyOnClose
|
>
|
{!this.state.thawbtnlist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
|
{this.state.thawbtnlist && <TransferForm ref="trawmenu" menulist={this.state.thawbtnlist}/>}
|
</Modal>
|
{/* 按钮配置信息粘贴复制 */}
|
<Modal
|
title={dict['header.form.paste']}
|
visible={this.state.pasteVisible}
|
width={600}
|
maskClosable={false}
|
onOk={this.pasteSubmit}
|
onCancel={() => {this.setState({pasteVisible: false})}}
|
destroyOnClose
|
>
|
<PasteForm wrappedComponentRef={(inst) => this.pasteFormRef = inst}/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default editComponent
|
