From cb9ade2afd2a367ad767bc605ab7086c695dd010 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 09 十二月 2022 15:53:32 +0800 Subject: [PATCH] 2022-12-09 --- src/menu/components/form/tab-form/index.jsx | 308 +++++++++++++++++++++++++++++++-------------------- 1 files changed, 187 insertions(+), 121 deletions(-) diff --git a/src/menu/components/form/tab-form/index.jsx b/src/menu/components/form/tab-form/index.jsx index 6117825..a354870 100644 --- a/src/menu/components/form/tab-form/index.jsx +++ b/src/menu/components/form/tab-form/index.jsx @@ -9,12 +9,10 @@ import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' import { getModalForm } from '@/templates/zshare/formconfig' -import { resetStyle } from '@/utils/utils-custom.js' +import { resetStyle, getTables } from '@/utils/utils-custom.js' import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' -import getWrapForm from '../normal-form/options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' +import getWrapForm from '../step-form/options' import './index.scss' const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform')) @@ -31,7 +29,7 @@ const { confirm } = Modal -class PropCardEditComponent extends Component { +class TabFormComponent extends Component { static propTpyes = { card: PropTypes.object, deletecomponent: PropTypes.func, @@ -39,7 +37,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), card: null, back: false, @@ -59,12 +56,9 @@ let _card = { uuid: card.uuid, type: card.type, - tabId: card.tabId || '', - parentId: card.parentId || '', format: 'object', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡 pageable: false, // 缁勪欢灞炴�� - 鏄惁鍙垎椤� switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹� - dataName: card.dataName || '', width: card.width || 24, name: card.name, subtype: card.subtype, @@ -79,21 +73,21 @@ sort: 1, style: {}, fields: [], - subButton: {label: '鎻愪氦', type: 'submit', enable: 'true', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px', 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'}}, }, { uuid: Utils.getuuid(), setting: {title: '鍒嗙粍2', align: 'left_right'}, sort: 1, style: {}, fields: [], - subButton: {label: '鎻愪氦', type: 'submit', enable: 'true', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px', 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'}}, }, { uuid: Utils.getuuid(), setting: {title: '鍒嗙粍3', align: 'left_right'}, sort: 1, style: {}, fields: [], - subButton: {label: '鎻愪氦', type: 'submit', enable: 'true', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px', 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'}}, }] } @@ -118,10 +112,9 @@ }) } this.setState({ - card: _card, group: _card.subcards[0] || null }) - this.props.updateConfig(_card) + this.updateComponent(_card) } else { let _card = fromJS(card).toJS() this.setState({ @@ -129,11 +122,6 @@ group: _card.subcards[0] || null }) } - } - - componentDidMount () { - MKEmitter.addListener('submitStyle', this.getStyle) - MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) } shouldComponentUpdate (nextProps, nextState) { @@ -147,39 +135,65 @@ this.setState = () => { return } - MKEmitter.removeListener('submitStyle', this.getStyle) - MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) - } - - updateComponentStyle = (parentId, keys, style) => { - const { card } = this.state - - if (card.uuid !== parentId) return - - let subcards = card.subcards.map(item => { - if (keys.includes(item.uuid)) { - item.style = {...item.style, ...style} - } - return item - }) - - this.setState({card: {...card, subcards: []}}, () => { - this.updateComponent({...card, subcards: subcards}) - }) } /** * @description 鍗$墖琛屽灞備俊鎭洿鏂帮紙鏁版嵁婧愶紝鏍峰紡绛夛級 */ - updateComponent = (component) => { + updateComponent = (card) => { + card.width = card.wrap.width + card.name = card.wrap.name + card.errors = [] + + if (card.wrap.datatype !== 'static') { + let supModule = card.setting.supModule ? card.setting.supModule[card.setting.supModule.length - 1] || '' : '' + if (supModule === 'empty') { + supModule = '' + } + let columns = card.columns.map(c => c.field) + + if (card.setting.interType === 'system' && card.setting.execute !== 'false' && !card.setting.dataresource) { + card.errors.push({ level: 0, detail: '鏈缃暟鎹簮锛�'}) + } else if (card.setting.interType === 'system' && card.setting.execute === 'false' && card.scripts.filter(script => script.status !== 'false').length === 0) { + card.errors.push({ level: 0, detail: '鏁版嵁婧愪腑鏃犲彲鐢ㄨ剼鏈紒'}) + } else if (!card.setting.primaryKey) { + card.errors.push({ level: 0, detail: '鏈缃富閿紒'}) + } else if (!columns.includes(card.setting.primaryKey)) { + card.errors.push({ level: 0, detail: '涓婚敭宸插け鏁堬紒'}) + } else if (!card.setting.supModule) { + card.errors.push({ level: 0, detail: '鏈缃笂绾х粍浠讹紒'}) + } + + if (card.errors.length === 0) { + card.$tables = getTables(card) + } + + card.subcards.forEach(item => { + item.fields.forEach(m => { + if (m.type === 'linkMain' && !supModule) { + card.errors.push({ level: 1, detail: `璇锋鏌ュ垎缁勨��${item.setting.title}鈥濅腑鍏宠仈涓昏〃鈥�${m.label}鈥濇槸鍚︽湁鏁坄}) + } + }) + }) + } else { + let supModule = card.wrap.supModule ? card.wrap.supModule[card.wrap.supModule.length - 1] : '' + + card.$tables = getTables(card) + + card.subcards.forEach(item => { + item.fields.forEach(m => { + if (m.type === 'linkMain' && !supModule) { + card.errors.push({ level: 1, detail: `璇锋鏌ュ垎缁勨��${item.setting.title}鈥濅腑鍏宠仈涓昏〃鈥�${m.label}鈥濇槸鍚︽湁鏁坄}) + } + }) + }) + } + this.setState({ - card: component + card: card }) - component.width = component.wrap.width - component.name = component.wrap.name - - this.props.updateConfig(component) + this.props.updateConfig(card) } /** @@ -193,43 +207,19 @@ return item }) - this.setState({card}) - - this.props.updateConfig(card) + this.updateComponent(card) } changeStyle = () => { const { card } = this.state - MKEmitter.emit('changeStyle', [card.uuid], ['height', 'background', 'border', 'padding', 'margin', 'shadow'], card.style) + MKEmitter.emit('changeStyle', ['height', 'background', 'border', 'padding', 'margin', 'shadow', 'clear'], card.style, this.getStyle) } - getStyle = (comIds, style) => { - const { card, group } = this.state + getStyle = (style) => { + let _card = {...this.state.card, style} - if (comIds[0] === 'form') { - let Index = group.fields.findIndex(n => n.uuid === comIds[1]) - - if (Index === -1) return - - let _group = fromJS(group).toJS() - - _group.fields[Index].style = style - - this.updateGroup(_group) - - return - } - - if (comIds.length !== 1 || comIds[0] !== card.uuid) return - - let _card = {...card, style} - - this.setState({ - card: _card - }) - - this.props.updateConfig(_card) + this.updateComponent(_card) } addCard = () => { @@ -241,16 +231,15 @@ sort: card.subcards.length + 1, style: {}, fields: [], - subButton: {label: '鎻愪氦', type: 'submit', enable: 'true', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px', paddingTop: '5px', paddingBottom: '5px'}}, + subButton: {label: '鎻愪氦', type: 'submit', intertype: 'system', reload: 'false', sqlType: 'update', sql: '', Ot: 'notRequired', enable: 'true', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px', paddingTop: '5px', paddingBottom: '5px'}}, } card.subcards.push(newcard) this.setState({ - card, group: newcard }) - this.props.updateConfig(card) + this.updateComponent(card) } changecards = (list) => { @@ -260,8 +249,7 @@ return item }) - this.setState({card}) - this.props.updateConfig(card) + this.updateComponent(card) } selectGroup = (item) => { @@ -285,8 +273,8 @@ _group = card.subcards[0] || null } - _this.setState({card, group: _group}) - _this.props.updateConfig(card) + _this.setState({group: _group}) + _this.updateComponent(card) }, onCancel() {} }) @@ -302,8 +290,8 @@ return item }) - this.setState({card, group}) - this.props.updateConfig(card) + this.setState({group}) + this.updateComponent(card) } plusFields = (items) => { @@ -349,8 +337,8 @@ } return item }) - _this.setState({group: config, card}) - _this.props.updateConfig(card) + _this.setState({group: config}) + _this.updateComponent(card) }, onCancel() {} }) @@ -369,12 +357,12 @@ return item }) - this.setState({card, group}, () => { + this.setState({group}, () => { if (newcard) { this.handleForm(newcard) } }) - this.props.updateConfig(card) + this.updateComponent(card) } closeForm = (cell) => { @@ -394,8 +382,8 @@ confirm({ content: `纭畾鍒犻櫎<<${cell.label}>>鍚楋紵`, onOk() { - _this.setState({card, group}) - _this.props.updateConfig(card) + _this.setState({group}) + _this.updateComponent(card) }, onCancel() {} }) @@ -467,35 +455,27 @@ index = i } + let label = `${item.field || ''}锛�${item.label}锛塦 + if (['text', 'number', 'textarea', 'color'].includes(item.type) && _item.field !== item.field) { _inputfields.push({ field: item.field, - label: _inputIndex + '銆�' + item.label + label: _inputIndex + '銆�' + 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 (_form.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) { + _tabfields.push({ + field: item.field, + label: _tabIndex + '銆�' + label + }) + _tabIndex++ } if (item.type === 'switch') { _linksupFields.push({ field: item.field, - label: _linkIndex + '銆�' + item.label + label: _linkIndex + '銆�' + label }) } @@ -510,7 +490,7 @@ }) _linksupFields.push({ value: item.field, - text: _linkIndex + '銆�' + item.label + text: _linkIndex + '銆�' + label }) _linkIndex++ @@ -553,7 +533,7 @@ standardform, visible: true, editform: _form, - formlist: getModalForm(_form, _inputfields, _tabfields, _linkableFields, _linksupFields) + formlist: getModalForm(_form, _inputfields, _tabfields, _linkableFields, _linksupFields, card.columns) }) } @@ -600,20 +580,22 @@ let param = { func: 's_debug_sql', exec_type: 'y', - LText: res.dataSource + LText: `declare @mk_organization nvarchar(512) + ${res.dataSource}` } - param.LText = param.LText.replace(/@\$|\$@/ig, '') + param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + param.LText = param.LText.replace(/@\$|\$@/ig, '').replace(/@(BID|ID|LoginUID|SessionUid|UserID|Appkey|time_id)@/ig, `'${param.timestamp}'`) + param.LText = param.LText.replace(/\n/g, ' ') 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 => { + Api.genericInterface(param).then(result => { if (result.status) { this.setState({ sqlVerifing: false, @@ -640,6 +622,37 @@ } pasteForm = (res) => { + if (res.subtype === 'simpleform') { + res = res.subcards[0] + } + if (res.subButton) { + let card = fromJS(this.state.card).toJS() + + res.uuid = Utils.getuuid() + res.sort = card.subcards.length + 1 + + res.fields.forEach(item => { + item.uuid = Utils.getuuid() + }) + + delete res.prevButton + delete res.nextButton + + card.subcards.push(res) + + this.setState({ + group: res + }) + this.updateComponent(card) + + notification.success({ + top: 92, + message: '绮樿创鎴愬姛锛�', + duration: 2 + }) + return + } + let _config = fromJS(this.state.group).toJS() let fieldrepet = false // 瀛楁閲嶅 @@ -675,18 +688,58 @@ } updateWrap = (res) => { - this.updateComponent({...this.state.card, wrap: res}) + let _card = {...this.state.card, wrap: res} + + if (res.datatype === 'static') { + if (res.supModule && res.supModule.length > 0) { + _card.setting.supModule = res.supModule + } else { + _card.setting.supModule = '' + } + } + + this.updateComponent(_card) + } + + clearGroup = () => { + let group = fromJS(this.state.group).toJS() + let card = fromJS(this.state.card).toJS() + let _this = this + + group.fields = [] + + card.subcards = card.subcards.map(item => { + if (item.uuid === group.uuid) { + return group + } + return item + }) + + confirm({ + content: `纭畾娓呯┖琛ㄥ崟鍚楋紵`, + onOk() { + _this.setState({group}) + _this.updateComponent(card) + }, + onCancel() {} + }) } clickComponent = (e) => { if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { e.stopPropagation() - MKEmitter.emit('clickComponent', this.state.card) + MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { + let _card = {...this.state.card} + _card.style = {..._card.style, ...style} + + this.setState({ card: _card }) + this.props.updateConfig(_card) + }) } } render() { - const { card, dict, group, appType } = this.state + const { card, group, appType } = this.state return ( <div className="menu-normal-form-edit-box" style={resetStyle(card.style)} onClick={this.clickComponent} id={card.uuid}> @@ -697,7 +750,7 @@ <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="tabform" card={card}/> - <PasteComponent config={card} options={['form']} updateConfig={this.pasteForm} /> + <PasteComponent config={card} options={['form', 'formgroup', 'simpleform']} updateConfig={this.pasteForm} /> <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <UserComponent config={card}/> <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> @@ -719,7 +772,8 @@ {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})} /> + <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} @@ -729,7 +783,6 @@ 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} @@ -743,8 +796,22 @@ />} <FormAction config={card} group={group} updateconfig={this.updateGroup}/> </div> : null} + <div className="component-name"> + <div className="center"> + <div className="title">{card.name}</div> + <div className="content"> + {card.errors && card.errors.map((err, index) => { + if (err.level === 0) { + return <span key={index} className="error">{err.detail}</span> + } else { + return <span key={index} className="waring">{err.detail}锛�</span> + } + })} + </div> + </div> + </div> <Modal - title={this.state.dict['model.edit']} + title="缂栬緫" visible={this.state.visible} width={950} maskClosable={false} @@ -754,7 +821,6 @@ destroyOnClose > <ModalForm - dict={this.state.dict} card={this.state.editform} formlist={this.state.formlist} inputSubmit={this.handleSubmit} @@ -767,4 +833,4 @@ } } -export default PropCardEditComponent \ No newline at end of file +export default TabFormComponent \ No newline at end of file -- Gitblit v1.8.0