| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Popover, Modal, Carousel } from 'antd' |
| | | import { Popover, Modal, Button, Switch, notification } from 'antd' |
| | | import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | | |
| | | import { getModalForm } from '@/templates/zshare/formconfig' |
| | | import { resetStyle } from '@/utils/utils-custom.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import Utils from '@/utils/utils.js' |
| | | import getWrapForm from './options' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import './index.scss' |
| | | |
| | | const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform')) |
| | | const NormalForm = asyncIconComponent(() => import('@/components/normalform')) |
| | | const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) |
| | | const WrapComponent = asyncIconComponent(() => import('@/menu/components/form/wrapsetting')) |
| | | const CardComponent = asyncComponent(() => import('../dragelement')) |
| | | const CardComponent = asyncComponent(() => import('@/templates/modalconfig/dragelement')) |
| | | const MobCardComponent = asyncComponent(() => import('@/mob/components/formdragelement')) |
| | | const FormTitle = asyncComponent(() => import('../dragtitle')) |
| | | const FormAction = asyncComponent(() => import('../formaction')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) |
| | | const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) |
| | | const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) |
| | | |
| | | const { confirm } = Modal |
| | | |
| | |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | appType: sessionStorage.getItem('appType'), |
| | | card: null, |
| | | back: false |
| | | back: false, |
| | | group: null, |
| | | showField: false, |
| | | visible: false, |
| | | editform: null, |
| | | formlist: null, |
| | | sqlVerifing: false, |
| | | standardform: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | | setting: { }, |
| | | wrap: { name: card.name, width: card.width || 24, datatype: 'static' }, |
| | | wrap: { name: card.name, width: card.width || 24, datatype: 'static', groupLabel: 'show', color: '#1890ff' }, |
| | | style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' }, |
| | | columns: [], |
| | | scripts: [], |
| | | subcards: [{ |
| | | uuid: Utils.getuuid(), |
| | | setting: {}, |
| | | setting: {title: '第一步', align: 'left_right'}, |
| | | sort: 1, |
| | | style: {}, |
| | | fields: [], |
| | | }], |
| | | prevButton: {label: '上一步', type: 'prev', enable: 'false', style: {marginRight: '15px', paddingTop: '5px', paddingBottom: '5px'}}, |
| | | subButton: {label: '提交', type: 'submit', 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'}} |
| | | }] |
| | | } |
| | | |
| | | if (card.config) { |
| | |
| | | _card.wrap = config.wrap |
| | | _card.wrap.name = card.name |
| | | _card.style = config.style |
| | | |
| | | _card.setting = config.setting |
| | | _card.columns = config.columns |
| | | _card.scripts = config.scripts |
| | | |
| | | _card.subcards = config.subcards.map(scard => { |
| | | scard.uuid = Utils.getuuid() |
| | |
| | | }) |
| | | } |
| | | this.setState({ |
| | | card: _card |
| | | card: _card, |
| | | group: _card.subcards[0] || null |
| | | }) |
| | | this.props.updateConfig(_card) |
| | | } else { |
| | | let _card = fromJS(card).toJS() |
| | | this.setState({ |
| | | card: fromJS(card).toJS() |
| | | card: _card, |
| | | group: _card.subcards[0] || null |
| | | }) |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) || (!this.props.menu && nextProps.menu) |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | /** |
| | |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | /** |
| | | * @description 单个卡片信息更新 |
| | | */ |
| | | deleteCard = (cell) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | let _this = this |
| | | |
| | | confirm({ |
| | | content: '确定删除表单吗?', |
| | | onOk() { |
| | | card.subcards = card.subcards.filter(item => item.uuid !== cell.uuid) |
| | | |
| | | let uuids = [] |
| | | cell.elements && cell.elements.forEach(c => { |
| | | if (c.eleType === 'button') { |
| | | uuids.push(c.uuid) |
| | | } |
| | | }) |
| | | MKEmitter.emit('delButtons', uuids) |
| | | |
| | | _this.setState({card}) |
| | | _this.props.updateConfig(card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } |
| | | |
| | | changeStyle = () => { |
| | | const { card } = this.state |
| | | |
| | | MKEmitter.emit('changeStyle', [card.uuid], ['height', 'background', 'border', 'padding', 'margin'], card.style) |
| | | MKEmitter.emit('changeStyle', [card.uuid], ['height', 'background', 'border', 'padding', 'margin', 'shadow'], card.style) |
| | | } |
| | | |
| | | getStyle = (comIds, style) => { |
| | |
| | | |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | setting: {}, |
| | | setting: { title: `第${card.subcards.length + 1}步`, align: 'left_right' }, |
| | | sort: card.subcards.length + 1, |
| | | style: {}, |
| | | elements: [], |
| | | } |
| | | |
| | | if (card.subcards.length > 0) { |
| | | newcard = fromJS(card.subcards.slice(-1)[0]).toJS() |
| | | newcard.uuid = Utils.getuuid() |
| | | newcard.elements = newcard.elements.map(elem => { |
| | | elem.uuid = Utils.getuuid() |
| | | return elem |
| | | }) |
| | | fields: [], |
| | | prevButton: {label: '上一步', type: 'prev', enable: 'false', style: {marginRight: '15px', paddingTop: '5px', paddingBottom: '5px'}}, |
| | | subButton: {label: '提交', type: 'submit', 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'}} |
| | | } |
| | | |
| | | card.subcards.push(newcard) |
| | | |
| | | this.setState({ |
| | | card, |
| | | group: newcard |
| | | }) |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | changecards = (list) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | card.subcards = list.map((item, index) => { |
| | | item.sort = index + 1 |
| | | return item |
| | | }) |
| | | |
| | | this.setState({card}) |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | move = (item, direction) => { |
| | | selectGroup = (item) => { |
| | | this.setState({ |
| | | group: item |
| | | }) |
| | | } |
| | | |
| | | changeGroup = (item) => { |
| | | this.updateGroup(item) |
| | | } |
| | | |
| | | closeGroup = (cell) => { |
| | | const { group } = this.state |
| | | let card = fromJS(this.state.card).toJS() |
| | | const _this = this |
| | | |
| | | confirm({ |
| | | content: '确定删除分组吗?', |
| | | onOk() { |
| | | card.subcards = card.subcards.filter(item => item.uuid !== cell.uuid) |
| | | let _group = group |
| | | |
| | | if (group.uuid === cell.uuid) { |
| | | _group = card.subcards[0] || null |
| | | } |
| | | |
| | | _this.setState({card, group: _group}) |
| | | _this.props.updateConfig(card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } |
| | | |
| | | updateGroup = (group) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | |
| | | let dragIndex = card.subcards.findIndex(c => c.uuid === item.uuid) |
| | | let hoverIndex = null |
| | | card.subcards = card.subcards.map(item => { |
| | | if (item.uuid === group.uuid) { |
| | | return group |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | if (direction === 'left') { |
| | | hoverIndex = dragIndex - 1 |
| | | } else { |
| | | hoverIndex = dragIndex + 1 |
| | | } |
| | | this.setState({card, group}) |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | if (hoverIndex === -1 || hoverIndex === card.subcards.length) return |
| | | plusFields = (items) => { |
| | | let _group = fromJS(this.state.group).toJS() |
| | | |
| | | card.subcards.splice(hoverIndex, 0, ...card.subcards.splice(dragIndex, 1)) |
| | | _group.fields.push(...items) |
| | | |
| | | this.setState({card: {...card, subcards: []}}, () => { |
| | | this.setState({card}) |
| | | this.updateGroup(_group) |
| | | } |
| | | |
| | | changecols = (type) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | let config = fromJS(this.state.group).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() { |
| | | card.subcards = card.subcards.map(item => { |
| | | if (item.uuid === config.uuid) { |
| | | return config |
| | | } |
| | | return item |
| | | }) |
| | | _this.setState({group: config, card}) |
| | | _this.props.updateConfig(card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } |
| | | |
| | | handleList = (list, newcard) => { |
| | | let group = fromJS(this.state.group).toJS() |
| | | let card = fromJS(this.state.card).toJS() |
| | | |
| | | group.fields = list |
| | | |
| | | card.subcards = card.subcards.map(item => { |
| | | if (item.uuid === group.uuid) { |
| | | return group |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({card, group}, () => { |
| | | if (newcard) { |
| | | this.handleForm(newcard) |
| | | } |
| | | }) |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | closeForm = (cell) => { |
| | | let group = fromJS(this.state.group).toJS() |
| | | let card = fromJS(this.state.card).toJS() |
| | | let _this = this |
| | | |
| | | group.fields = group.fields.filter(item => item.uuid !== cell.uuid) |
| | | |
| | | card.subcards = card.subcards.map(item => { |
| | | if (item.uuid === group.uuid) { |
| | | return group |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | confirm({ |
| | | content: `确定删除<<${cell.label}>>吗?`, |
| | | onOk() { |
| | | _this.setState({card, group}) |
| | | _this.props.updateConfig(card) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } |
| | | |
| | | addForm = () => { |
| | | const { appType } = this.state |
| | | let group = fromJS(this.state.group).toJS() |
| | | let lastItem = group.fields[group.fields.length - 1] |
| | | let span = appType === 'mob' ? 24 : 12 |
| | | if (lastItem && lastItem.span) { |
| | | span = lastItem.span |
| | | } |
| | | |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | label: '', |
| | | field: '', |
| | | initval: '', |
| | | type: 'text', |
| | | resourceType: '0', |
| | | span: span, |
| | | labelwidth: 33.3, |
| | | options: [], |
| | | dataSource: '', |
| | | decimal: 0, |
| | | orderType: 'asc', |
| | | readonly: 'false', |
| | | required: 'true', |
| | | focus: true |
| | | } |
| | | |
| | | group.fields.push(newcard) |
| | | |
| | | this.setState({group}, () => { |
| | | this.handleForm(newcard) |
| | | }) |
| | | } |
| | | |
| | | editModalCancel = () => { |
| | | let group = fromJS(this.state.group).toJS() |
| | | group.fields = group.fields.filter(item => !item.focus) |
| | | |
| | | this.setState({group, visible: false, editform: null}) |
| | | this.updateGroup(group) |
| | | } |
| | | |
| | | /** |
| | | * @description 表单编辑 |
| | | */ |
| | | handleForm = (_item) => { |
| | | const { card, group, appType } = this.state |
| | | let _form = fromJS(_item).toJS() |
| | | let _inputfields = [] |
| | | let _tabfields = [] |
| | | let _linkableFields = [] |
| | | let _linksupFields = [] |
| | | let standardform = null |
| | | |
| | | let uniq = new Map() |
| | | let index = null |
| | | uniq.set(_form.field, true) |
| | | |
| | | let _inputIndex = 1 |
| | | let _tabIndex = 1 |
| | | let _linkIndex = 1 |
| | | group.fields.forEach((item, i) => { |
| | | if (_form.uuid === item.uuid) { |
| | | index = i |
| | | } |
| | | |
| | | if (['text', 'number', 'textarea', 'color'].includes(item.type) && _item.field !== item.field) { |
| | | _inputfields.push({ |
| | | field: item.field, |
| | | label: _inputIndex + '、' + item.label |
| | | }) |
| | | _inputIndex++ |
| | | } |
| | | if (appType === 'mob') { |
| | | if (_form.field !== item.field && item.hidden !== 'true' && ['text', 'number'].includes(item.type)) { |
| | | _tabfields.push({ |
| | | field: item.field, |
| | | label: _tabIndex + '、' + item.label |
| | | }) |
| | | _tabIndex++ |
| | | } |
| | | } else { |
| | | if (_form.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) { |
| | | _tabfields.push({ |
| | | field: item.field, |
| | | label: _tabIndex + '、' + item.label |
| | | }) |
| | | _tabIndex++ |
| | | } |
| | | } |
| | | |
| | | if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return |
| | | if (item.type === 'checkcard' && item.multiple === 'true') return // 选项卡多选 |
| | | if (item.field && !uniq.has(item.field)) { |
| | | uniq.set(item.field, true) |
| | | |
| | | _linkableFields.push({ |
| | | field: item.field, |
| | | label: _linkIndex + '、' + item.label + ' (表单)' |
| | | }) |
| | | _linksupFields.push({ |
| | | field: item.field, |
| | | label: _linkIndex + '、' + item.label |
| | | }) |
| | | _linkIndex++ |
| | | } |
| | | }) |
| | | |
| | | _tabfields.unshift({field: '', label: '原表单'}) |
| | | |
| | | if (index !== null) { |
| | | if (index === 0) { |
| | | standardform = group.fields[index + 1] || null |
| | | } else { |
| | | standardform = group.fields[index - 1] || null |
| | | } |
| | | } |
| | | |
| | | card.columns.forEach(col => { |
| | | if (col.field && !uniq.has(col.field)) { |
| | | uniq.set(col.field, true) |
| | | |
| | | _linkableFields.push({ |
| | | field: col.field, |
| | | label: _linkIndex + '、' + col.label + ' (显示列)' |
| | | }) |
| | | _linkIndex++ |
| | | } |
| | | }) |
| | | |
| | | 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) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 编辑后提交 |
| | | * 1、获取编辑后的表单信息 |
| | | * 2、去除可能存在的示例表单 |
| | | * 3、通过loading刷新 |
| | | */ |
| | | handleSubmit = () => { |
| | | this.formRef.handleConfirm().then(res => { |
| | | let _config = fromJS(this.state.group).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 |
| | | } |
| | | |
| | | if (item.uuid === res.uuid) { |
| | | return res |
| | | } else { |
| | | return item |
| | | } |
| | | }) |
| | | |
| | | if (fieldrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '字段已存在!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | 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: res.dataSource |
| | | } |
| | | |
| | | param.LText = param.LText.replace(/@\$|\$@/ig, '') |
| | | |
| | | param.LText = Utils.formatOptions(param.LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | | param.secretkey = Utils.encrypt('', param.timestamp) |
| | | |
| | | if (window.GLOB.mainSystemApi && res.database === 'sso') { |
| | | param.rduri = window.GLOB.mainSystemApi |
| | | } |
| | | |
| | | Api.getLocalConfig(param).then(result => { |
| | | if (result.status) { |
| | | this.setState({ |
| | | sqlVerifing: false, |
| | | editform: null, |
| | | visible: false |
| | | }) |
| | | this.updateGroup(_config) |
| | | } else { |
| | | this.setState({sqlVerifing: false}) |
| | | |
| | | Modal.error({ |
| | | title: result.message |
| | | }) |
| | | } |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | editform: null, |
| | | visible: false |
| | | }) |
| | | this.updateGroup(_config) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | pasteForm = (res) => { |
| | | let _config = fromJS(this.state.group).toJS() |
| | | let fieldrepet = false // 字段重复 |
| | | |
| | | _config.fields.forEach(item => { |
| | | if (res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) { |
| | | fieldrepet = true |
| | | } |
| | | }) |
| | | |
| | | if (fieldrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '字段已存在!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } |
| | | _config.fields.push(res) |
| | | |
| | | this.updateGroup(_config) |
| | | |
| | | this.handleForm(res) |
| | | |
| | | notification.success({ |
| | | top: 92, |
| | | message: '粘贴成功!', |
| | | duration: 2 |
| | | }) |
| | | } |
| | | |
| | | getWrapForms = () => { |
| | | return getWrapForm(this.state.card) |
| | | } |
| | | |
| | | updateWrap = (res) => { |
| | | this.updateComponent({...this.state.card, wrap: res}) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { card } = 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" /> |
| | | <WrapComponent config={card} updateConfig={this.updateComponent} /> |
| | | <CopyComponent type="propcard" card={card}/> |
| | | <PasteComponent config={card} options={['cardcell']} updateConfig={this.updateComponent} /> |
| | | <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" /> |
| | | <PlusOutlined className="plus" title="添加分组" onClick={this.addCard}/> |
| | | <NormalForm title="表单设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <CopyComponent type="stepform" card={card}/> |
| | | <PasteComponent config={card} options={['form']} updateConfig={this.pasteForm} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | <UserComponent config={card}/> |
| | | <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> |
| | | <DeleteOutlined className="close" title="删除组件" onClick={() => this.props.deletecomponent(card.uuid)} /> |
| | | {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} |
| | | {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} |
| | | {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} |
| | | </div> |
| | | } trigger="hover"> |
| | | <Icon type="tool" /> |
| | | <ToolOutlined /> |
| | | </Popover> |
| | | {card.subcards.length > 0 ? <Carousel dotPosition={card.wrap.dotPosition || 'bottom'} effect={card.wrap.effect || 'scrollx'}> |
| | | {card.subcards.map((subcard) => (<CardComponent key={subcard.uuid} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} |
| | | </Carousel> : null} |
| | | <FormTitle |
| | | list={card.subcards} |
| | | selectId={group ? group.uuid : ''} |
| | | handleList={this.changecards} |
| | | handleGroup={this.changeGroup} |
| | | closeGroup={this.closeGroup} |
| | | selectGroup={this.selectGroup} |
| | | /> |
| | | {group ? <div className="form-area"> |
| | | <PlusOutlined className="plus" title="添加表单" onClick={this.addForm}/> |
| | | <FieldsComponent config={group} type="form" plusFields={this.plusFields} /> |
| | | <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} 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 style={{clear: 'both'}}></div> |
| | | {appType !== 'mob' ? <CardComponent |
| | | list={group.fields} |
| | | setting={group.setting} |
| | | showField={this.state.showField} |
| | | placeholder={dict['header.form.modal.placeholder']} |
| | | 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 |
| | | title={this.state.dict['model.edit']} |
| | | visible={this.state.visible} |
| | | width={850} |
| | | onCancel={this.editModalCancel} |
| | | onOk={this.handleSubmit} |
| | | confirmLoading={this.state.sqlVerifing} |
| | | destroyOnClose |
| | | > |
| | | <ModalForm |
| | | dict={this.state.dict} |
| | | card={this.state.editform} |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleSubmit} |
| | | standardform={this.state.standardform} |
| | | wrappedComponentRef={(inst) => this.formRef = inst} |
| | | /> |
| | | </Modal> |
| | | </div> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | const mapStateToProps = (state) => { |
| | | return { |
| | | menu: state.customMenu |
| | | } |
| | | } |
| | | |
| | | const mapDispatchToProps = () => { |
| | | return {} |
| | | } |
| | | |
| | | export default connect(mapStateToProps, mapDispatchToProps)(PropCardEditComponent) |
| | | export default PropCardEditComponent |