| | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | | import { getModalForm } from '@/templates/zshare/formconfig' |
| | | import { resetStyle } from '@/utils/utils-custom.js' |
| | | import ModalForm from '@/templates/zshare/modalform' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) |
| | | const WrapComponent = asyncIconComponent(() => import('@/menu/components/form/wrapsetting')) |
| | | const CardComponent = asyncComponent(() => import('@/templates/modalconfig/dragelement')) |
| | | const MobCardComponent = asyncComponent(() => import('@/mob/components/formdragelement')) |
| | | const FormTitle = asyncComponent(() => import('../dragtitle')) |
| | | const GroupForm = asyncComponent(() => import('./groupform')) |
| | | const FormAction = asyncComponent(() => import('../formaction')) |
| | |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | appType: sessionStorage.getItem('appType'), |
| | | card: null, |
| | | back: false, |
| | | group: null, |
| | |
| | | }) |
| | | } |
| | | |
| | | handleList = (list) => { |
| | | handleList = (list, newcard) => { |
| | | let group = fromJS(this.state.group).toJS() |
| | | let card = fromJS(this.state.card).toJS() |
| | | |
| | |
| | | return item |
| | | }) |
| | | |
| | | this.setState({card, group}) |
| | | this.setState({card, group}, () => { |
| | | if (newcard) { |
| | | this.handleForm(newcard) |
| | | } |
| | | }) |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | addForm = () => { |
| | | const { appType } = this.state |
| | | let group = fromJS(this.state.group).toJS() |
| | | let lastItem = group.fields[group.fields.length - 1] |
| | | let span = lastItem ? lastItem.span : 12 |
| | | let span = appType === 'mob' ? 24 : 12 |
| | | if (lastItem && lastItem.span) { |
| | | span = lastItem.span |
| | | } |
| | | |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | |
| | | * @description 表单编辑 |
| | | */ |
| | | handleForm = (_item) => { |
| | | const { card, group } = this.state |
| | | const { card, group, appType } = this.state |
| | | let _form = fromJS(_item).toJS() |
| | | let _inputfields = [] |
| | | let _tabfields = [] |
| | |
| | | let standardform = null |
| | | |
| | | _inputfields = group.fields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color') |
| | | _tabfields = group.fields.filter(item => _form.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) |
| | | if (appType === 'mob') { |
| | | _tabfields = group.fields.filter(item => _form.field !== item.field && item.hidden !== 'true' && ['text', 'number'].includes(item.type)) |
| | | } else { |
| | | _tabfields = group.fields.filter(item => _form.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) |
| | | } |
| | | _tabfields.unshift({field: '', text: '原表单'}) |
| | | |
| | | let uniq = new Map() |
| | |
| | | _form.linkSubField = _form.linkSubField.filter(item => fields.includes(item)) |
| | | } |
| | | |
| | | if (!_form.span && standardform && standardform.span) { |
| | | if (appType !== 'mob' && !_form.span && standardform && standardform.span) { |
| | | _form.span = standardform.span |
| | | _form.labelwidth = standardform.labelwidth |
| | | } |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { card, dict, group } = this.state |
| | | const { card, dict, group, appType } = this.state |
| | | |
| | | return ( |
| | | <div className="menu-normal-form-edit-box" style={{...card.style}} onClick={this.clickComponent} id={card.uuid}> |
| | | <div className="menu-normal-form-edit-box" style={resetStyle(card.style)} onClick={this.clickComponent} id={card.uuid}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <Icon className="plus" title="添加分组" onClick={this.addCard} type="plus" /> |
| | |
| | | <Icon className="plus" title="添加表单" onClick={this.addForm} type="plus" /> |
| | | <FieldsComponent config={group} type="form" updatefield={this.updateGroup} /> |
| | | <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> |
| | | <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> |
| | | {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 style={{clear: 'both'}}></div> |
| | | <CardComponent |
| | | {appType !== 'mob' ? <CardComponent |
| | | list={group.fields} |
| | | setting={group.setting} |
| | | showField={this.state.showField} |
| | |
| | | handleList={this.handleList} |
| | | handleForm={this.handleForm} |
| | | closeForm={this.closeForm} |
| | | /> |
| | | /> : <MobCardComponent |
| | | list={group.fields} |
| | | setting={group.setting} |
| | | showField={this.state.showField} |
| | | handleList={this.handleList} |
| | | handleForm={this.handleForm} |
| | | closeForm={this.closeForm} |
| | | />} |
| | | <FormAction config={card} group={group} updateconfig={this.updateGroup}/> |
| | | </div> : null} |
| | | <Modal |