import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { DndProvider } from 'react-dnd'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import { Button, Card, Modal, Collapse, notification, Switch } from 'antd'
|
import { SettingOutlined } from '@ant-design/icons'
|
|
import Api from '@/api'
|
import { getModalForm } from '@/templates/zshare/formconfig'
|
import SourceElement from './dragelement/source'
|
import SettingForm from './settingform'
|
import MenuForm from './menuform'
|
import asyncComponent from '@/utils/asyncComponent'
|
import { BaseConfig, SearchItems } from './source'
|
import { updateForm } from '@/utils/utils-update.js'
|
import './index.scss'
|
|
const { Panel } = Collapse
|
const { confirm } = Modal
|
|
// const Versions = asyncComponent(() => import('@/menu/versions'))
|
// const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
|
const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
|
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
|
// const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent'))
|
const DragElement = asyncComponent(() => import('./dragelement'))
|
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
|
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
|
|
class ComModalConfig extends Component {
|
static propTpyes = {
|
menu: PropTypes.any,
|
editTab: PropTypes.any,
|
editSubTab: PropTypes.any,
|
tabConfig: PropTypes.any,
|
subTabConfig: PropTypes.any,
|
btnTab: PropTypes.any,
|
btnTabConfig: PropTypes.any,
|
editAction: PropTypes.object,
|
subConfig: PropTypes.any,
|
handleView: PropTypes.func
|
}
|
|
state = {
|
menu: null, // 上级菜单，三级菜单或标签
|
config: null, // 页面配置，包括模板类型、模态框设置、添加表名、表单列表
|
visible: false, // 表单编辑模态框，显示控制
|
modalformlist: null, // 基本信息表单字段
|
formlist: null, // 表单编辑模态框，可编辑字段
|
card: null, // 编辑元素
|
menuloading: false, // 菜单保存中
|
closeloading: false, // 菜单保存中
|
settingVisible: false, // 全局配置模态框
|
closeVisible: false, // 关闭模态框
|
originConfig: null, // 原始菜单
|
sqlVerifing: false, // sql验证
|
openEdition: '', // 编辑版本标记，防止多人操作
|
showField: false // 显示表单字段值
|
}
|
|
/**
|
* @description 数据预处理
|
* 1、按钮配置存在时使用按钮配置，不存在时使用默认配置（示例）
|
* 2、模态框标题不存在时，使用按钮标题
|
* 3、设置已选表
|
* 4、设置按钮基本信息
|
*/
|
UNSAFE_componentWillMount () {
|
const {menu, editAction, tabConfig, subTabConfig, subConfig} = this.props
|
|
let _config = ''
|
let _tab = subTabConfig ? subTabConfig : tabConfig
|
|
let _menu = { // 上级菜单是三级菜单或标签页
|
type: _tab ? _tab.Template : menu.type,
|
tables: _tab ? _tab.tables : menu.LongParam.tables,
|
MenuID: _tab ? _tab.uuid : menu.MenuID,
|
MenuNo: _tab ? _tab.tabNo : menu.MenuNo,
|
MenuName: _tab ? _tab.tabName : menu.MenuName
|
}
|
|
if (subConfig) {
|
_config = subConfig
|
} else {
|
_config = fromJS(BaseConfig).toJS()
|
}
|
|
if (!_config.setting.title) {
|
_config.setting.title = editAction.label
|
}
|
|
// 主菜单已有选择的表名，模态框没有表名时，复制主菜单表名
|
_config.tables = _config.tables.length === 0 ? _menu.tables : _config.tables
|
|
_config = updateForm(_config)
|
|
this.setState({
|
openEdition: editAction.open_edition || '',
|
menu: _menu,
|
config: _config,
|
originConfig: fromJS(_config).toJS(),
|
modalformlist: [
|
{
|
type: 'text',
|
key: 'supMenu',
|
label: '上级菜单',
|
initVal: _menu.MenuName,
|
required: true,
|
readonly: true
|
},
|
{
|
type: 'text',
|
key: 'btnName',
|
label: '按钮名称',
|
initVal: editAction.label,
|
required: true,
|
readonly: true
|
}
|
]
|
})
|
}
|
|
componentDidMount() {
|
window.GLOB.formId = ''
|
|
document.onkeydown = (event) => {
|
let e = event || window.event
|
let keyCode = e.keyCode || e.which || e.charCode
|
let preKey = ''
|
|
if (e.ctrlKey) {
|
preKey = 'ctrl'
|
}
|
if (e.shiftKey) {
|
preKey = 'shift'
|
} else if (e.altKey) {
|
preKey = 'alt'
|
}
|
|
if (!preKey || !keyCode) return
|
|
let _shortcut = `${preKey}+${keyCode}`
|
|
if (_shortcut === 'ctrl+83') {
|
let node = document.getElementById('save-config')
|
if (node && node.click) {
|
node.click()
|
}
|
return false
|
}
|
}
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
document.onkeydown = () => {}
|
}
|
|
// 页面返回
|
handleViewBack = () => {
|
const {menu, editTab, editSubTab, tabConfig, subTabConfig, btnTab, btnTabConfig} = this.props
|
|
let _view = (subTabConfig && subTabConfig.Template) || (tabConfig && tabConfig.Template) || menu.LongParam.Template
|
|
let param = {
|
editMenu: menu,
|
editTab: editTab,
|
tabConfig: tabConfig,
|
editSubTab: editSubTab,
|
subTabConfig: subTabConfig,
|
btnTab: btnTab,
|
btnTabConfig: btnTabConfig,
|
editAction: null,
|
subConfig: subTabConfig || tabConfig || null,
|
tabview: _view
|
}
|
|
this.props.handleView(param)
|
}
|
|
/**
|
* @description 表单变化
|
* 1、表单拖拽添加时，检查是否存在示例表单，如存在则去除示例
|
* 2、表单移动后，保存移动后的顺序
|
* 3、新增表单时，直接打开编辑框
|
*/
|
handleList = (list, newcard) => {
|
let _config = fromJS(this.state.config).toJS()
|
|
if (list.length > _config.fields.length) {
|
_config.fields = list.filter(item => !item.origin)
|
|
this.setState({
|
config: _config
|
}, () => {
|
this.handleForm(newcard)
|
})
|
} else {
|
_config.fields = list
|
this.setState({config: _config})
|
}
|
}
|
|
/**
|
* @description 表单编辑
|
* 1、显示编辑弹窗-visible
|
* 2、保存编辑项-card
|
* 3、设置编辑参数项-formlist
|
*/
|
handleForm = (_card) => {
|
const { menu, tabConfig, subTabConfig } = this.props
|
const { config } = this.state
|
|
let card = fromJS(_card).toJS()
|
let columns = []
|
if (subTabConfig) {
|
columns = subTabConfig.columns
|
} else if (tabConfig) {
|
columns = tabConfig.columns
|
} else if (menu.LongParam) {
|
columns = menu.LongParam.columns
|
}
|
|
this.setState({
|
visible: true,
|
card: card,
|
formlist: getModalForm(card, config.fields, columns)
|
})
|
}
|
|
/**
|
* @description 编辑后提交
|
*/
|
handleSubmit = () => {
|
let _config = fromJS(this.state.config).toJS()
|
|
this.formRef.handleConfirm(_config.fields).then(res => {
|
_config.fields = _config.fields.map(item => {
|
if (item.uuid === res.values.uuid) {
|
return res.values
|
} else {
|
return item
|
}
|
})
|
|
_config.fields = _config.fields.filter(item => !item.origin)
|
|
if (res.loading) {
|
this.setState({
|
sqlVerifing: true
|
})
|
|
res.promise().then(() => {
|
this.setState({
|
sqlVerifing: false,
|
config: _config,
|
card: null,
|
visible: false
|
})
|
}, () => {
|
this.setState({sqlVerifing: false})
|
})
|
} else {
|
this.setState({
|
config: _config,
|
card: null,
|
visible: false
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 表单删除并刷新
|
*/
|
closeForm = (card) => {
|
let _this = this
|
|
confirm({
|
content: `确定删除${card.label ? `<<${card.label}>>` : ''}吗？`,
|
onOk() {
|
let _config = fromJS(_this.state.config).toJS()
|
_config.fields = _config.fields.filter(item => !(item.uuid === card.uuid))
|
|
_this.setState({
|
config: _config,
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
// submitConfig = () => {
|
// const { editAction } = this.props
|
// const { config, menu, openEdition } = this.state
|
|
// if (config.fields[0] && config.fields[0].origin) {
|
// notification.warning({
|
// top: 92,
|
// message: '请添加表单',
|
// duration: 10
|
// })
|
// return
|
// }
|
|
// let _LongParam = ''
|
// let _config = fromJS(config).toJS()
|
|
// try {
|
// _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))
|
// } catch (e) {
|
// notification.warning({
|
// top: 92,
|
// message: '编译错误',
|
// duration: 10
|
// })
|
// return
|
// }
|
|
// let param = {
|
// func: 'sPC_ButtonParam_AddUpt',
|
// ParentID: menu.MenuID,
|
// MenuID: editAction.uuid,
|
// MenuNo: menu.MenuNo,
|
// Template: 'Modal',
|
// MenuName: editAction.label,
|
// PageParam: JSON.stringify({Template: 'Modal'}),
|
// LongParam: _LongParam
|
// }
|
|
// if (openEdition) {
|
// param.open_edition = openEdition
|
// }
|
|
// if (this.state.closeVisible) {
|
// this.setState({
|
// closeloading: true
|
// })
|
// } else {
|
// this.setState({
|
// menuloading: true
|
// })
|
// }
|
|
// Api.getCloudConfig(param).then(response => {
|
// if (response.status) {
|
// this.setState({
|
// openEdition: response.open_edition || '',
|
// menuloading: false,
|
// closeloading: false,
|
// closeVisible: false,
|
// originConfig: _config,
|
// config: _config
|
// })
|
// notification.success({
|
// top: 92,
|
// message: '保存成功',
|
// duration: 2
|
// })
|
// } else {
|
// this.setState({
|
// closeloading: false,
|
// menuloading: false
|
// })
|
// notification.warning({
|
// top: 92,
|
// message: response.message,
|
// duration: 10
|
// })
|
// }
|
// })
|
// }
|
|
cancelConfig = () => {
|
// const { config, originConfig } = this.state
|
// let _this = this
|
|
// let isOrigin = config.fields.filter(item => item.origin).length > 0
|
// if (isOrigin) {
|
// confirm({
|
// content: '尚未提交，确定放弃保存吗？',
|
// onOk() {
|
// _this.handleViewBack()
|
// },
|
// onCancel() {}
|
// })
|
// } else {
|
// if (!is(fromJS(config), fromJS(originConfig))) {
|
// this.setState({
|
// closeVisible: true
|
// })
|
// } else {
|
// this.handleViewBack()
|
// }
|
// }
|
this.handleViewBack()
|
}
|
|
/**
|
* @description 全局设置模态框
|
*/
|
changeSetting = () => {
|
this.setState({
|
settingVisible: true
|
})
|
}
|
|
/**
|
* @description 保存全局设置
|
*/
|
settingSave = () => {
|
const {config} = this.state
|
this.settingRef.handleConfirm().then(res => {
|
this.setState({
|
config: {...config, setting: res},
|
settingVisible: false
|
})
|
})
|
}
|
|
editModalCancel = () => {
|
const { config, card } = this.state
|
|
if (card.focus) {
|
let _fields = config.fields.filter(item => item.uuid !== card.uuid)
|
let _config = {...config, fields: _fields}
|
|
this.setState({
|
card: null,
|
config: _config,
|
visible: false
|
})
|
} else {
|
this.setState({
|
card: null,
|
visible: false
|
})
|
}
|
}
|
|
/**
|
* @description 更新配置信息
|
*/
|
updateconfig = (config) => {
|
this.setState({
|
config: config
|
})
|
}
|
|
changecols = (type) => {
|
let config = fromJS(this.state.config).toJS()
|
let _this = this
|
|
config.fields = config.fields.map(item => {
|
item.labelwidth = 33.3
|
item.span = 24
|
if (['textarea','split','hint','checkcard','brafteditor'].includes(item.type)) {
|
if (type === 2) {
|
item.labelwidth = 16.3
|
} else if (type === 3) {
|
item.labelwidth = 10.5
|
} else if (type === 4) {
|
item.labelwidth = 8.3
|
}
|
} else if (type === 2) {
|
item.span = 12
|
} else if (type === 3) {
|
item.span = 8
|
} else if (type === 4) {
|
item.span = 6
|
}
|
return item
|
})
|
|
confirm({
|
content: `确定切换为${type}列吗？`,
|
onOk() {
|
_this.setState({config})
|
},
|
onCancel() {}
|
})
|
}
|
|
refreshConfig = () => {
|
const { editAction } = this.props
|
|
let param = {
|
func: 'sPC_Get_LongParam',
|
MenuID: editAction.uuid
|
}
|
|
Api.getCloudConfig(param).then(res => {
|
if (res.status) {
|
let _config = ''
|
if (res.LongParam) {
|
try {
|
_config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
console.warn('Parse Failure')
|
_config = ''
|
}
|
}
|
|
if (!_config) {
|
notification.warning({
|
top: 92,
|
message: '未获取到配置信息！',
|
duration: 5
|
})
|
return
|
}
|
|
// 版本兼容
|
_config = updateForm(_config)
|
|
this.setState({
|
config: null
|
}, () => {
|
this.setState({
|
config: _config,
|
openEdition: res.open_edition || '',
|
originConfig: fromJS(_config).toJS()
|
})
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
plusFields = (items) => {
|
let _config = fromJS(this.state.config).toJS()
|
|
if (_config.fields[0] && _config.fields[0].origin) {
|
_config.fields = _config.fields.filter(item => !item.origin)
|
}
|
|
_config.fields.push(...items)
|
|
this.setState({
|
config: _config
|
}, () => {
|
if (items.length === 1 && items[0].focus) {
|
this.handleForm(items[0])
|
}
|
})
|
}
|
|
clearConfig = () => {
|
const _this = this
|
let _config = {...this.state.config, fields: []}
|
|
confirm({
|
content: '确定清空表单吗？',
|
onOk() {
|
_this.setState({ config: _config })
|
},
|
onCancel() {}
|
})
|
}
|
|
render () {
|
// const { editAction } = this.props
|
const { config } = this.state
|
|
if (!config) return null
|
|
return (
|
<div className="modal-form-board">
|
<DndProvider backend={HTML5Backend}>
|
<div className="tools">
|
<Collapse accordion defaultActiveKey="1" bordered={false}>
|
<Panel forceRender={true} header="基本信息" key="0" id="modal-basedata">
|
<MenuForm formlist={this.state.modalformlist}/>
|
{/* 表名添加 */}
|
<TableComponent
|
config={config}
|
containerId="modal-basedata"
|
updatetable={this.updateconfig}
|
/>
|
</Panel>
|
<Panel header="表单" key="1">
|
<div className="search-element">
|
{SearchItems.map((item, index) => {
|
return (<SourceElement key={index} content={item}/>)
|
})}
|
</div>
|
<FieldsComponent config={config} type="form" plusFields={this.plusFields}/>
|
</Panel>
|
</Collapse>
|
</div>
|
<div className="setting">
|
<Card title="表单配置" bordered={false} extra={
|
<div>
|
{/* <Button type="danger" onClick={this.clearConfig}>清空</Button> */}
|
{/* <Versions MenuId={editAction.uuid} open_edition={openEdition} updateConfig={this.refreshConfig}/> */}
|
{/* <ReplaceField type="form" config={config} updateConfig={this.updateconfig}/> */}
|
{/* <EditComponent options={['form']} type="formboard" config={this.state.config} plusFields={this.plusFields}/> */}
|
{/* <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>保存</Button> */}
|
<Button onClick={this.cancelConfig}>返回</Button>
|
</div>
|
} style={{ width: '100%' }}>
|
<SettingOutlined onClick={this.changeSetting} />
|
<div className="ant-modal-content" style={{width: config.setting.width > 100 ? config.setting.width : config.setting.width + '%'}}>
|
<div className="ant-modal-header">
|
<div className="ant-modal-title">{config.setting.title}</div>
|
<Button className="mk-cols-change" onClick={() => this.changecols(1)}>1列</Button>
|
<Button className="mk-cols-change" onClick={() => this.changecols(2)}>2列</Button>
|
<Button className="mk-cols-change" onClick={() => this.changecols(3)}>3列</Button>
|
<Button className="mk-cols-change" onClick={() => this.changecols(4)}>4列</Button>
|
<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
|
</div>
|
<div className="ant-modal-body">
|
<div className="modal-form">
|
<DragElement
|
list={config.fields}
|
setting={config.setting}
|
showField={this.state.showField}
|
handleList={this.handleList}
|
handleForm={this.handleForm}
|
closeForm={this.closeForm}
|
/>
|
</div>
|
</div>
|
<div className="ant-modal-footer">
|
<div>
|
<button type="button" className="ant-btn">
|
<span>取消</span>
|
</button>
|
<button type="button" className="ant-btn ant-btn-primary">
|
<span>确定</span>
|
</button>
|
</div>
|
<div className="action-mask"></div>
|
</div>
|
</div>
|
</Card>
|
</div>
|
</DndProvider>
|
<Modal
|
title="编辑"
|
visible={this.state.visible}
|
width={950}
|
maskClosable={false}
|
onCancel={this.editModalCancel}
|
onOk={this.handleSubmit}
|
confirmLoading={this.state.sqlVerifing}
|
destroyOnClose
|
>
|
<ModalForm
|
card={this.state.card}
|
formlist={this.state.formlist}
|
inputSubmit={this.handleSubmit}
|
fields={config.fields}
|
wrappedComponentRef={(inst) => this.formRef = inst}
|
/>
|
</Modal>
|
<Modal
|
title="编辑"
|
visible={this.state.settingVisible}
|
width={900}
|
maskClosable={false}
|
onOk={this.settingSave}
|
onCancel={() => { this.setState({ settingVisible: false }) }}
|
destroyOnClose
|
>
|
<SettingForm
|
config={config}
|
isSubTab={!!this.props.editTab}
|
inputSubmit={this.settingSave}
|
wrappedComponentRef={(inst) => this.settingRef = inst}
|
/>
|
</Modal>
|
{/* <Modal
|
bodyStyle={{textAlign: 'center', color: '#000000', fontSize: '16px'}}
|
closable={false}
|
maskClosable={false}
|
visible={this.state.closeVisible}
|
onCancel={() => { this.setState({closeVisible: false}) }}
|
footer={[
|
<Button key="save" className="mk-btn mk-green" loading={this.state.closeloading} onClick={this.submitConfig}>保存</Button>,
|
<Button key="confirm" className="mk-btn mk-yellow" onClick={this.handleViewBack}>不保存</Button>,
|
<Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>取消</Button>
|
]}
|
destroyOnClose
|
>
|
配置已修改，是否保存配置信息？
|
</Modal> */}
|
<StyleController />
|
</div>
|
)
|
}
|
}
|
|
export default ComModalConfig
|
