| | |
| | | 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')) |
| | |
| | | visible: false, |
| | | editform: null, |
| | | formlist: null, |
| | | sqlVerifing: false, |
| | | standardform: null |
| | | sqlVerifing: false |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | } |
| | | |
| | | card.subcards.forEach(item => { |
| | | if (item.subButton.intertype === 'system' && !item.subButton.sqlType) { |
| | | card.errors.push({ level: 0, detail: `${item.subButton.label} 按钮请设置操作类型`}) |
| | | } |
| | | if (item.subButton.verify && !item.subButton.output) { |
| | | if (item.subButton.verify.noteEnable === 'true') { |
| | | card.errors.push({ level: 0, detail: `${item.subButton.label} 按钮未设置返回值短信发送无效!`}) |
| | | } else if (item.subButton.verify.emailEnable === 'true') { |
| | | card.errors.push({ level: 0, detail: `${item.subButton.label} 按钮未设置返回值邮件发送无效!`}) |
| | | } |
| | | } |
| | | item.fields.forEach(m => { |
| | | if (m.dataSource && /@ID@/ig.test(m.dataSource)) { |
| | | idCtrl = true |
| | |
| | | card.$tables = getTables(card) |
| | | |
| | | card.subcards.forEach(item => { |
| | | if (item.subButton.intertype === 'system' && !item.subButton.sqlType) { |
| | | card.errors.push({ level: 0, detail: `${item.subButton.label} 按钮请设置操作类型`}) |
| | | } |
| | | if (item.subButton.verify && !item.subButton.output) { |
| | | if (item.subButton.verify.noteEnable === 'true') { |
| | | card.errors.push({ level: 0, detail: `${item.subButton.label} 按钮未设置返回值短信发送无效!`}) |
| | | } else if (item.subButton.verify.emailEnable === 'true') { |
| | | card.errors.push({ level: 0, detail: `${item.subButton.label} 按钮未设置返回值邮件发送无效!`}) |
| | | } |
| | | } |
| | | item.fields.forEach(m => { |
| | | if (m.dataSource && /@ID@/ig.test(m.dataSource)) { |
| | | idCtrl = true |
| | |
| | | style: {}, |
| | | fields: [], |
| | | prevButton: {label: '上一步', type: 'prev', enable: 'false', style: {marginRight: '15px', paddingTop: '5px', paddingBottom: '5px'}}, |
| | | subButton: {label: '提交', type: 'submit', intertype: 'system', reload: 'false', sqlType: 'update', sql: '', Ot: 'notRequired', execSuccess: 'never', enable: 'true', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px', paddingTop: '5px', paddingBottom: '5px'}}, |
| | | subButton: {label: '提交', type: 'submit', intertype: 'system', reload: 'false', sqlType: '', sql: '', Ot: 'notRequired', execSuccess: 'never', enable: 'true', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px', paddingTop: '5px', paddingBottom: '5px'}}, |
| | | nextButton: {label: '跳过', type: 'next', enable: 'false', style: {paddingTop: '5px', paddingBottom: '5px'}} |
| | | } |
| | | |
| | |
| | | closeGroup = (cell) => { |
| | | const { group } = this.state |
| | | let card = fromJS(this.state.card).toJS() |
| | | const _this = this |
| | | const that = this |
| | | |
| | | confirm({ |
| | | content: '确定删除分组吗?', |
| | |
| | | _group = card.subcards[0] || null |
| | | } |
| | | |
| | | _this.setState({group: _group}) |
| | | _this.updateComponent(card) |
| | | that.setState({group: _group}) |
| | | that.updateComponent(card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | |
| | | changecols = (type) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | let config = fromJS(this.state.group).toJS() |
| | | let _this = this |
| | | let that = this |
| | | |
| | | config.fields = config.fields.map(item => { |
| | | item.labelwidth = 33.3 |
| | |
| | | } |
| | | return item |
| | | }) |
| | | _this.setState({group: config}) |
| | | _this.updateComponent(card) |
| | | that.setState({group: config}) |
| | | that.updateComponent(card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | |
| | | closeForm = (cell) => { |
| | | let group = fromJS(this.state.group).toJS() |
| | | let card = fromJS(this.state.card).toJS() |
| | | let _this = this |
| | | let that = this |
| | | |
| | | group.fields = group.fields.filter(item => item.uuid !== cell.uuid) |
| | | |
| | |
| | | confirm({ |
| | | content: `确定删除<<${cell.label}>>吗?`, |
| | | onOk() { |
| | | _this.setState({group}) |
| | | _this.updateComponent(card) |
| | | that.setState({group}) |
| | | that.updateComponent(card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | |
| | | orderType: 'asc', |
| | | readonly: 'false', |
| | | required: 'true', |
| | | readin: 'top', |
| | | focus: true |
| | | } |
| | | |
| | |
| | | * @description 表单编辑 |
| | | */ |
| | | handleForm = (_item) => { |
| | | const { card, group, appType } = this.state |
| | | const { card, group } = this.state |
| | | |
| | | let _form = fromJS(_item).toJS() |
| | | let _inputfields = [] |
| | | let _tabfields = [] |
| | | let _linkableFields = [] |
| | | let _linksupFields = [] |
| | | let standardform = null |
| | | let index = null |
| | | |
| | | group.fields.forEach((item, i) => { |
| | | if (_form.uuid === item.uuid) { |
| | | index = i |
| | | } |
| | | |
| | | if (!item.field || _form.field === item.field) return |
| | | |
| | | if (['text', 'number', 'textarea', 'color'].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 (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 |
| | | |
| | | _linkableFields.push({ |
| | | field: item.field, |
| | | label: item.label + '-表单' |
| | | }) |
| | | }) |
| | | |
| | | if (index !== null) { |
| | | if (index === 0) { |
| | | standardform = group.fields[index + 1] || null |
| | | } else { |
| | | standardform = group.fields[index - 1] || null |
| | | } |
| | | } |
| | | |
| | | 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)) |
| | | } |
| | | |
| | | if (appType !== 'mob' && !_form.span && standardform && standardform.span) { |
| | | _form.span = standardform.span |
| | | _form.labelwidth = standardform.labelwidth |
| | | } |
| | | |
| | | this.setState({ |
| | | standardform, |
| | | visible: true, |
| | | editform: _form, |
| | | formlist: getModalForm(_form, _inputfields, _tabfields, _linkableFields, _linksupFields, card.columns) |
| | | formlist: getModalForm(_form, group.fields, card.columns) |
| | | }) |
| | | } |
| | | |
| | |
| | | handleSubmit = () => { |
| | | let _config = fromJS(this.state.group).toJS() |
| | | |
| | | this.formRef.handleConfirm(_config.fields).then(res => { |
| | | this.formRef.handleConfirm().then(res => { |
| | | _config.fields = _config.fields.map(item => { |
| | | delete item.focus |
| | | |
| | |
| | | |
| | | res.fields.forEach(item => { |
| | | item.uuid = Utils.getuuid() |
| | | delete item.focus |
| | | }) |
| | | |
| | | if (!res.prevButton) { |
| | |
| | | clearGroup = () => { |
| | | let group = fromJS(this.state.group).toJS() |
| | | let card = fromJS(this.state.card).toJS() |
| | | let _this = this |
| | | let that = this |
| | | |
| | | group.fields = [] |
| | | |
| | |
| | | confirm({ |
| | | content: `确定清空表单吗?`, |
| | | onOk() { |
| | | _this.setState({group}) |
| | | _this.updateComponent(card) |
| | | that.setState({group}) |
| | | that.updateComponent(card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | |
| | | {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} |
| | |
| | | card={this.state.editform} |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleSubmit} |
| | | standardform={this.state.standardform} |
| | | fields={group.fields} |
| | | wrappedComponentRef={(inst) => this.formRef = inst} |
| | | /> |
| | | </Modal> |