| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Popover, Modal, Button, Switch, notification, message } from 'antd' |
| | | import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' |
| | | import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, SwapOutlined, FontColorsOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | |
| | | const MobCardComponent = asyncComponent(() => import('@/mob/components/formdragelement')) |
| | | const FormTitle = asyncComponent(() => import('../dragtitle')) |
| | | const FormAction = asyncComponent(() => import('../formaction')) |
| | | // const FormFork = asyncComponent(() => import('@/menu/modalconfig/formfork')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) |
| | | const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) |
| | |
| | | */ |
| | | handleForm = (_item) => { |
| | | const { card, group } = this.state |
| | | |
| | | let _form = fromJS(_item).toJS() |
| | | let _inputfields = [] |
| | | let _tabfields = [] |
| | | let _linkableFields = [] |
| | | let _linksupFields = [] |
| | | |
| | | group.fields.forEach((item, i) => { |
| | | if (!item.field || _form.field === item.field) return |
| | | |
| | | if (['text', 'number', 'textarea', 'select'].includes(item.type)) { |
| | | _inputfields.push({ |
| | | field: item.field, |
| | | label: item.label |
| | | }) |
| | | } |
| | | |
| | | if (item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) { |
| | | _tabfields.push({ |
| | | field: item.field, |
| | | label: item.label |
| | | }) |
| | | } |
| | | |
| | | if (['switch', 'check', 'popSelect'].includes(item.type)) { |
| | | _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 |
| | | |
| | | _linkableFields.push({ |
| | | field: item.field, |
| | | label: item.label + '-表单' |
| | | }) |
| | | }) |
| | | |
| | | let _fields = _linkableFields.map(cell => cell.field) |
| | | card.columns.forEach(col => { |
| | | if (col.field && !_fields.includes(col.field)) { |
| | | _linkableFields.push({ |
| | | field: col.field, |
| | | label: col.label + '-显示列' |
| | | }) |
| | | } |
| | | }) |
| | | |
| | | if (_form.linkSubField && _form.linkSubField.length > 0) { |
| | | let fields = _inputfields.map(item => item.field) |
| | | _form.linkSubField = _form.linkSubField.filter(item => fields.includes(item)) |
| | | } |
| | | |
| | | this.setState({ |
| | | visible: true, |
| | | editform: _form, |
| | | formlist: getModalForm(_form, _inputfields, _tabfields, _linkableFields, _linksupFields, card.columns) |
| | | formlist: getModalForm(_form, group.fields, card.columns) |
| | | }) |
| | | } |
| | | |
| | |
| | | {group ? <div className={`form-area mk-${card.wrap.formStyle || ''}`}> |
| | | <PlusOutlined className="plus" title="添加表单" onClick={this.addForm}/> |
| | | <FieldsComponent config={group} type="form" plusFields={this.plusFields} /> |
| | | <span style={{color: 'red', marginLeft: '30px', cursor: 'pointer'}} onClick={this.clearGroup}>清空</span> |
| | | <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> |
| | | {appType !== 'mob' ? <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1列</Button> : null} |
| | | {appType !== 'mob' ? <Button className="mk-cols-change" onClick={() => this.changecols(2)}>2列</Button> : null} |
| | | {appType !== 'mob' ? <Button className="mk-cols-change" onClick={() => this.changecols(3)}>3列</Button> : null} |
| | | {appType !== 'mob' ? <Button className="mk-cols-change" onClick={() => this.changecols(4)}>4列</Button> : null} |
| | | <div className="mk-form-tool"> |
| | | <DeleteOutlined title="清空" onClick={this.clearGroup} /> |
| | | {appType !== 'mob' ? <Popover title="切换布局" overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <> |
| | | <Button style={{marginRight: '10px'}} onClick={() => this.changecols(1)}>1列</Button> |
| | | <Button style={{marginRight: '10px'}} onClick={() => this.changecols(2)}>2列</Button> |
| | | <Button style={{marginRight: '10px'}} onClick={() => this.changecols(3)}>3列</Button> |
| | | <Button onClick={() => this.changecols(4)}>4列</Button> |
| | | </> |
| | | } trigger="hover"> |
| | | <SwapOutlined /> |
| | | </Popover> : null} |
| | | {/* <FormFork forms={group.fields}/> */} |
| | | {/* <CopyOutlined title="复制" onClick={this.triggerCopy} /> */} |
| | | <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> |
| | | </div> |
| | | <div style={{clear: 'both'}}></div> |
| | | {appType !== 'mob' ? <CardComponent |
| | | list={group.fields} |