| | |
| | | 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' |
| | | 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('@/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')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) |
| | |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | | setting: { }, |
| | | wrap: { name: card.name, width: card.width || 24, datatype: 'static', color: '#1890ff' }, |
| | | 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: [], |
| | |
| | | sort: 1, |
| | | style: {}, |
| | | fields: [], |
| | | prevButton: {label: '上一步', type: 'prev'}, |
| | | subButton: {label: '提交', type: 'submit', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px'}}, |
| | | nextButton: {label: '跳过', type: 'next', enable: 'false'} |
| | | 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'}} |
| | | }] |
| | | } |
| | | |
| | |
| | | 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) => { |
| | |
| | | sort: card.subcards.length + 1, |
| | | style: {}, |
| | | fields: [], |
| | | prevButton: {label: '上一步', type: 'prev'}, |
| | | subButton: {label: '提交', type: 'submit', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px'}}, |
| | | nextButton: {label: '跳过', type: 'next', enable: 'false'} |
| | | 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, |
| | | groupvisible: true |
| | | group: newcard |
| | | }) |
| | | this.props.updateConfig(card) |
| | | } |
| | |
| | | } |
| | | |
| | | changeGroup = (item) => { |
| | | this.setState({ |
| | | group: item, |
| | | groupvisible: true |
| | | }) |
| | | this.updateGroup(item) |
| | | } |
| | | |
| | | closeGroup = (cell) => { |
| | |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | handleGroupSubmit = () => { |
| | | const { group } = this.state |
| | | |
| | | this.groupRef.handleConfirm().then(res => { |
| | | group.setting = res |
| | | this.setState({groupvisible: false}) |
| | | this.updateGroup(group) |
| | | }) |
| | | } |
| | | |
| | | changecols = (type) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | let config = fromJS(this.state.group).toJS() |
| | |
| | | if (_form.uuid === item.uuid) { |
| | | index = i |
| | | } |
| | | if (item.type !== 'select' && item.type !== 'link' && item.type !== 'radio') return |
| | | |
| | | if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return |
| | | if (item.field && !uniq.has(item.field)) { |
| | | uniq.set(item.field, true) |
| | | |
| | |
| | | return |
| | | } |
| | | |
| | | if ((res.type === 'select' || res.type === 'multiselect' || res.type === 'link') && res.resourceType === '1' && /\s/.test(res.dataSource)) { |
| | | if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) { |
| | | this.setState({ |
| | | sqlVerifing: true |
| | | }) |
| | |
| | | }) |
| | | } |
| | | |
| | | getWrapForms = () => { |
| | | return getWrapForm(this.state.card) |
| | | } |
| | | |
| | | updateWrap = (res) => { |
| | | this.updateComponent({...this.state.card, wrap: res}) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | |
| | | <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} /> |
| | | <NormalForm title="表单设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}> |
| | | <Icon type="edit" style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <CopyComponent type="propcard" card={card}/> |
| | | <PasteComponent config={card} options={['form']} updateConfig={this.pasteForm} /> |
| | | <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" /> |
| | |
| | | />} |
| | | <FormAction config={card} group={group} updateconfig={this.updateGroup}/> |
| | | </div> : null} |
| | | <Modal |
| | | title="分组编辑" |
| | | visible={this.state.groupvisible} |
| | | width={850} |
| | | maskClosable={false} |
| | | onCancel={() => this.setState({groupvisible: false})} |
| | | onOk={this.handleGroupSubmit} |
| | | destroyOnClose |
| | | > |
| | | <GroupForm |
| | | dict={dict} |
| | | group={group} |
| | | inputSubmit={this.handleGroupSubmit} |
| | | wrappedComponentRef={(inst) => this.groupRef = inst} |
| | | /> |
| | | </Modal> |
| | | <Modal |
| | | title={this.state.dict['model.edit']} |
| | | visible={this.state.visible} |