import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { DndProvider } from 'react-dnd'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import moment from 'moment'
|
import { Button, Card, Modal, Collapse, notification, Switch, message } from 'antd'
|
import { SettingOutlined, CopyOutlined } from '@ant-design/icons'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import { getModalForm } from '@/templates/zshare/formconfig'
|
|
import SourceElement from '@/templates/modalconfig/dragelement/source'
|
import SettingForm from '@/templates/modalconfig/settingform'
|
import asyncComponent from '@/utils/asyncComponent'
|
import { SearchItems } from '@/templates/modalconfig/source'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { Panel } = Collapse
|
const { confirm } = Modal
|
const TableComponent = asyncComponent(() => import('./tablecomponent'))
|
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
|
const PasteForms = asyncComponent(() => import('@/menu/components/share/pasteforms'))
|
const DragElement = asyncComponent(() => import('@/templates/modalconfig/dragelement'))
|
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
|
|
class ComModalConfig extends Component {
|
static propTpyes = {
|
btn: PropTypes.object,
|
handleSave: PropTypes.func,
|
handleBack: PropTypes.func
|
}
|
|
state = {
|
config: null, // 页面配置，包括模板类型、模态框设置、添加表名、表单列表
|
visible: false, // 表单编辑模态框，显示控制
|
formlist: null, // 表单编辑模态框，可编辑字段
|
card: null, // 编辑元素
|
settingVisible: false, // 全局配置模态框
|
originConfig: null, // 原始菜单
|
sqlVerifing: false, // sql验证
|
showField: false, // 显示表单字段值
|
standardform: null,
|
saving: false
|
}
|
|
/**
|
* @description 数据预处理
|
*/
|
UNSAFE_componentWillMount () {
|
const { btn } = this.props
|
|
let _config = btn.modal
|
_config.version = '1.0'
|
|
this.setState({
|
config: _config,
|
originConfig: fromJS(_config).toJS()
|
})
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('completeSave', this.completeSave)
|
MKEmitter.addListener('submitStyle', this.getStyle)
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('completeSave', this.completeSave)
|
MKEmitter.removeListener('submitStyle', this.getStyle)
|
}
|
|
/**
|
* @description 表单变化
|
* 1、表单拖拽添加时，检查是否存在示例表单，如存在则去除示例
|
* 2、表单移动后，保存移动后的顺序
|
* 3、新增表单时，直接打开编辑框
|
*/
|
handleList = (list, newcard) => {
|
let _config = fromJS(this.state.config).toJS()
|
|
if (list.length > _config.fields.length) {
|
_config.fields = list
|
|
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 { componentConfig, btn } = this.props
|
const { config } = this.state
|
let card = fromJS(_card).toJS()
|
let _inputfields = []
|
let _tabfields = []
|
let _linkableFields = []
|
let _linksupFields = []
|
let standardform = null
|
|
let uniq = new Map()
|
let index = null
|
uniq.set(card.field, true)
|
|
config.fields.forEach((item, i) => {
|
if (card.uuid === item.uuid) {
|
index = i
|
}
|
|
if (!item.field) return
|
|
if (['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field) {
|
_inputfields.push({
|
field: item.field,
|
label: item.label
|
})
|
}
|
if (card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) {
|
_tabfields.push({
|
field: item.field,
|
label: item.label
|
})
|
}
|
|
if (item.type === 'switch' || item.type === 'check') {
|
_linksupFields.push({
|
field: item.field,
|
label: item.label
|
})
|
}
|
|
if (!['select', 'link', 'radio', 'checkcard', 'multiselect'].includes(item.type)) return
|
|
_linksupFields.push({
|
field: item.field,
|
label: item.label
|
})
|
|
if (item.type === 'multiselect' || (item.type === 'checkcard' && item.multiple === 'true')) return
|
|
if (!uniq.has(item.field)) {
|
uniq.set(item.field, true)
|
|
_linkableFields.push({
|
field: item.field,
|
label: item.label + '-表单'
|
})
|
}
|
})
|
if (index !== null) {
|
if (index === 0) {
|
standardform = config.fields[index + 1] || null
|
} else {
|
standardform = config.fields[index - 1] || null
|
}
|
}
|
|
let columns = componentConfig.columns
|
if (btn.$sub) {
|
columns = componentConfig.subColumns || []
|
}
|
|
columns.forEach(col => {
|
if (col.field && !uniq.has(col.field)) {
|
uniq.set(col.field, true)
|
|
_linkableFields.push({
|
field: col.field,
|
label: col.label + '-显示列'
|
})
|
}
|
})
|
|
if (card.linkSubField && card.linkSubField.length > 0) {
|
let fields = _inputfields.map(item => item.field)
|
card.linkSubField = card.linkSubField.filter(item => fields.includes(item))
|
}
|
|
if (!card.span && standardform && standardform.span) {
|
card.span = standardform.span
|
card.labelwidth = standardform.labelwidth
|
} else if (!card.span) {
|
card.span = 12
|
card.labelwidth = 33.3
|
}
|
|
this.setState({
|
standardform,
|
visible: true,
|
card: card,
|
formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, columns)
|
})
|
}
|
|
getStyle = (comIds, style) => {
|
const { config } = this.state
|
|
if (comIds[0] !== 'form') return
|
|
let Index = config.fields.findIndex(n => n.uuid === comIds[1])
|
|
if (Index === -1) return
|
|
let _config = fromJS(config).toJS()
|
|
_config.fields[Index].style = style
|
|
this.setState({
|
config: _config
|
})
|
}
|
|
/**
|
* @description 编辑后提交
|
* 1、获取编辑后的表单信息
|
* 2、去除可能存在的示例表单
|
* 3、通过loading刷新
|
*/
|
handleSubmit = () => {
|
this.formRef.handleConfirm().then(res => {
|
let _config = fromJS(this.state.config).toJS()
|
let fieldrepet = false // 字段重复
|
|
_config.fields = _config.fields.map(item => {
|
if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
|
fieldrepet = true
|
}
|
|
delete item.focus
|
|
if (item.uuid === res.uuid) {
|
if (item.style) {
|
res.style = item.style
|
}
|
return res
|
} else {
|
return item
|
}
|
})
|
|
if (fieldrepet) {
|
notification.warning({
|
top: 92,
|
message: '字段已存在！',
|
duration: 10
|
})
|
return
|
}
|
|
window.GLOB.formId = res.uuid
|
|
if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
|
this.setState({
|
sqlVerifing: true
|
})
|
|
let param = {
|
func: 's_debug_sql',
|
exec_type: 'y',
|
LText: `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20)
|
${res.dataSource}`
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.LText = param.LText.replace(/@\$|\$@/ig, '').replace(/@(BID|ID|LoginUID|SessionUid|UserID|Appkey|time_id)@/ig, `'${param.timestamp}'`)
|
param.LText = param.LText.replace(/\n/g, ' ')
|
|
param.LText = Utils.formatOptions(param.LText)
|
param.secretkey = Utils.encrypt('', param.timestamp)
|
|
if (window.GLOB.mainSystemApi && res.database === 'sso') {
|
param.rduri = window.GLOB.mainSystemApi
|
}
|
|
Api.genericInterface(param).then(result => {
|
if (result.status) {
|
this.setState({
|
sqlVerifing: false,
|
config: _config,
|
card: null,
|
visible: false
|
})
|
} else {
|
this.setState({sqlVerifing: false})
|
|
Modal.error({
|
title: result.message
|
})
|
}
|
})
|
} 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 { config } = this.state
|
|
this.setState({originConfig: fromJS(config).toJS(), saving: true})
|
this.props.handleSave(config)
|
|
setTimeout(() => {
|
MKEmitter.emit('triggerMenuSave')
|
}, 100)
|
}
|
|
clearConfig = () => {
|
const _this = this
|
let _config = {...this.state.config, fields: []}
|
|
confirm({
|
content: '确定清空表单吗？',
|
onOk() {
|
_this.setState({ config: _config })
|
},
|
onCancel() {}
|
})
|
}
|
|
completeSave = () => {
|
this.setState({saving: false})
|
}
|
|
cancelConfig = () => {
|
const { config, originConfig } = this.state
|
|
if (!is(fromJS(config), fromJS(originConfig))) {
|
let _this = this
|
confirm({
|
content: '配置信息未保存，确定返回吗？',
|
onOk() {
|
_this.props.handleBack()
|
},
|
onCancel() {}
|
})
|
} else {
|
this.props.handleBack()
|
}
|
}
|
|
/**
|
* @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
|
})
|
}
|
|
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() {}
|
})
|
}
|
|
plusFields = (items) => {
|
let _config = fromJS(this.state.config).toJS()
|
|
_config.fields.push(...items)
|
|
this.setState({
|
config: _config
|
}, () => {
|
if (items.length === 1 && items[0].focus) {
|
this.handleForm(items[0])
|
}
|
})
|
}
|
|
pasteFields = (items) => {
|
let _config = fromJS(this.state.config).toJS()
|
_config.fields = items
|
|
this.setState({
|
config: _config
|
})
|
}
|
|
triggerCopy = () => {
|
const { config } = this.state
|
|
let val = {
|
copyType: 'forms',
|
fields: config.fields || []
|
}
|
|
if (val.fields.length === 0) {
|
message.warning('表单元素不可为空！')
|
return
|
}
|
|
try {
|
val = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
|
} catch (e) {
|
console.warn(e)
|
message.warning('复制失败，请重试！')
|
val = ''
|
}
|
|
if (val) {
|
let oInput = document.createElement('input')
|
oInput.value = val
|
document.body.appendChild(oInput)
|
oInput.select()
|
document.execCommand('Copy')
|
document.body.removeChild(oInput)
|
|
message.success('复制成功。')
|
}
|
}
|
|
render () {
|
const { btn } = this.props
|
const { config, saving, card } = this.state
|
|
return (
|
<div className="modal-form-board">
|
<DndProvider backend={HTML5Backend}>
|
<div className="tools">
|
<Collapse accordion defaultActiveKey="1" bordered={false}>
|
<Panel header="基本信息" key="0">
|
<TableComponent />
|
</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>
|
<PasteForms type="toolbar" config={config} update={this.pasteFields}/>
|
<Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>保存</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">{btn.label}</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>
|
<CopyOutlined title="复制" onClick={this.triggerCopy} />
|
<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={card && card.$copy ? '复制' : '编辑'}
|
wrapClassName="mk-scroll-modal"
|
visible={this.state.visible}
|
width={950}
|
maskClosable={false}
|
onCancel={this.editModalCancel}
|
onOk={this.handleSubmit}
|
confirmLoading={this.state.sqlVerifing}
|
destroyOnClose
|
>
|
<ModalForm
|
card={card}
|
formlist={this.state.formlist}
|
inputSubmit={this.handleSubmit}
|
standardform={this.state.standardform}
|
wrappedComponentRef={(inst) => this.formRef = inst}
|
/>
|
</Modal>
|
<Modal
|
title="编辑"
|
visible={this.state.settingVisible}
|
width={850}
|
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>
|
</div>
|
)
|
}
|
}
|
|
export default ComModalConfig
|
