From 09e0de52a398dd08a0dc3f4b43e4589d211e9c27 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 30 十二月 2021 12:44:45 +0800 Subject: [PATCH] 2021-12-30 --- src/menu/components/form/normal-form/index.jsx | 611 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 524 insertions(+), 87 deletions(-) diff --git a/src/menu/components/form/normal-form/index.jsx b/src/menu/components/form/normal-form/index.jsx index 14e5ec9..7a970bb 100644 --- a/src/menu/components/form/normal-form/index.jsx +++ b/src/menu/components/form/normal-form/index.jsx @@ -1,24 +1,33 @@ 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 @@ -31,8 +40,16 @@ 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 () { @@ -53,16 +70,20 @@ 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) { @@ -71,6 +92,10 @@ _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() @@ -82,12 +107,15 @@ }) } 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 }) } } @@ -98,7 +126,7 @@ } shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) || (!this.props.menu && nextProps.menu) + return !is(fromJS(this.state), fromJS(nextState)) } /** @@ -159,37 +187,10 @@ 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) => { @@ -211,46 +212,440 @@ 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) => { @@ -261,41 +656,83 @@ } 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) \ No newline at end of file +export default PropCardEditComponent \ No newline at end of file -- Gitblit v1.8.0