From 7b0dbecd1d6155d26ec67be0a47a16264c738c85 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 09 五月 2023 14:48:10 +0800 Subject: [PATCH] 2023-05-09 --- src/menu/modalconfig/index.jsx | 216 ++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 153 insertions(+), 63 deletions(-) diff --git a/src/menu/modalconfig/index.jsx b/src/menu/modalconfig/index.jsx index fc2a91e..a0409b1 100644 --- a/src/menu/modalconfig/index.jsx +++ b/src/menu/modalconfig/index.jsx @@ -4,12 +4,11 @@ import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import moment from 'moment' -import { Button, Card, Modal, Collapse, notification, Icon, Switch } from 'antd' +import { Button, Card, Modal, Collapse, notification, Switch, message } from 'antd' +import { SettingOutlined, CopyOutlined } from '@ant-design/icons' import Api from '@/api' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import { getModalForm } from '@/templates/zshare/formconfig' import SourceElement from '@/templates/modalconfig/dragelement/source' @@ -21,9 +20,8 @@ const { Panel } = Collapse const { confirm } = Modal -const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform')) -const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent')) +const PasteForms = asyncComponent(() => import('@/menu/components/share/pasteforms')) const DragElement = asyncComponent(() => import('@/templates/modalconfig/dragelement')) const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) @@ -35,7 +33,6 @@ } state = { - dict: CommonDict, // 瀛楀吀 config: null, // 椤甸潰閰嶇疆锛屽寘鎷ā鏉跨被鍨嬨�佹ā鎬佹璁剧疆銆佹坊鍔犺〃鍚嶃�佽〃鍗曞垪琛� visible: false, // 琛ㄥ崟缂栬緫妯℃�佹锛屾樉绀烘帶鍒� formlist: null, // 琛ㄥ崟缂栬緫妯℃�佹锛屽彲缂栬緫瀛楁 @@ -65,6 +62,7 @@ componentDidMount () { MKEmitter.addListener('completeSave', this.completeSave) + MKEmitter.addListener('submitStyle', this.getStyle) } /** @@ -75,6 +73,7 @@ return } MKEmitter.removeListener('completeSave', this.completeSave) + MKEmitter.removeListener('submitStyle', this.getStyle) } /** @@ -87,7 +86,7 @@ let _config = fromJS(this.state.config).toJS() if (list.length > _config.fields.length) { - _config.fields = list.filter(item => !item.origin) + _config.fields = list this.setState({ config: _config @@ -107,40 +106,56 @@ * 3銆佽缃紪杈戝弬鏁伴」-formlist */ handleForm = (_card) => { - const { componentConfig } = this.props + const { componentConfig, btn } = this.props const { config } = this.state let card = fromJS(_card).toJS() let _inputfields = [] let _tabfields = [] let _linkableFields = [] - let _linksupFields = [{ - value: '', - text: '绌�' - }] + let _linksupFields = [] let standardform = null - _inputfields = config.fields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color') - _tabfields = config.fields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) - _tabfields.unshift({field: '', text: '鍘熻〃鍗�'}) - let uniq = new Map() - uniq.set(card.field, true) let index = null + uniq.set(card.field, true) + config.fields.forEach((item, i) => { if (card.uuid === item.uuid) { index = i } + + if (['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field) { + _inputfields.push({ + field: item.field, + label: item.label + }) + } + if (card.field !== item.field && 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'].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({ - value: item.field, - text: item.label + ' (琛ㄥ崟)' + field: item.field, + label: item.label + '-琛ㄥ崟' }) _linksupFields.push({ - value: item.field, - text: item.label + field: item.field, + label: item.label }) } }) @@ -152,13 +167,18 @@ } } - componentConfig.columns.forEach(col => { + let columns = componentConfig.columns + if (btn.$sub) { + columns = componentConfig.subColumns || [] + } + + columns.forEach(col => { if (col.field && !uniq.has(col.field)) { uniq.set(col.field, true) _linkableFields.push({ - value: col.field, - text: col.label + ' (鏄剧ず鍒�)' + field: col.field, + label: col.label + '-鏄剧ず鍒�' }) } }) @@ -171,13 +191,34 @@ if (!card.span && standardform && standardform.span) { card.span = standardform.span card.labelwidth = standardform.labelwidth + } else if (!card.span) { + card.span = 12 + card.labelwidth = 33.3 } this.setState({ standardform, visible: true, card: card, - formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, !!this.props.editTab) + formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, columns) + }) + } + + getStyle = (comIds, style) => { + const { config } = this.state + + if (comIds[0] !== 'form') return + + let Index = config.fields.findIndex(n => n.uuid === comIds[1]) + + if (Index === -1) return + + let _config = fromJS(config).toJS() + + _config.fields[Index].style = style + + this.setState({ + config: _config }) } @@ -191,16 +232,18 @@ this.formRef.handleConfirm().then(res => { let _config = fromJS(this.state.config).toJS() let fieldrepet = false // 瀛楁閲嶅 - let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅 _config.fields = _config.fields.map(item => { if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) { fieldrepet = true - } else if (res.label && item.uuid !== res.uuid && item.label === res.label) { - labelrepet = true } + delete item.focus + if (item.uuid === res.uuid) { + if (item.style) { + res.style = item.style + } return res } else { return item @@ -214,16 +257,9 @@ duration: 10 }) return - } else if (labelrepet) { - notification.warning({ - top: 92, - message: '鍚嶇О宸插瓨鍦紒', - duration: 10 - }) - return } - _config.fields = _config.fields.filter(item => !item.origin) + window.GLOB.formId = res.uuid if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) { this.setState({ @@ -233,20 +269,22 @@ let param = { func: 's_debug_sql', exec_type: 'y', - LText: res.dataSource + LText: `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20) + ${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, @@ -422,46 +460,100 @@ }) } + plusFields = (items) => { + let _config = fromJS(this.state.config).toJS() + + _config.fields.push(...items) + + this.setState({ + config: _config + }, () => { + if (items.length === 1 && items[0].focus) { + this.handleForm(items[0]) + } + }) + } + + pasteFields = (items) => { + let _config = fromJS(this.state.config).toJS() + _config.fields = items + + this.setState({ + config: _config + }) + } + + triggerCopy = () => { + const { config } = this.state + + let val = { + copyType: 'forms', + fields: config.fields || [] + } + + if (val.fields.length === 0) { + message.warning('琛ㄥ崟鍏冪礌涓嶅彲涓虹┖锛�') + return + } + + try { + val = window.btoa(window.encodeURIComponent(JSON.stringify(val))) + } catch (e) { + console.warn(e) + message.warning('澶嶅埗澶辫触锛岃閲嶈瘯锛�') + val = '' + } + + if (val) { + let oInput = document.createElement('input') + oInput.value = val + document.body.appendChild(oInput) + oInput.select() + document.execCommand('Copy') + document.body.removeChild(oInput) + + message.success('澶嶅埗鎴愬姛銆�') + } + } + render () { - const { config, dict, saving } = this.state + const { btn } = this.props + const { config, saving, card } = this.state return ( <div className="modal-form-board"> <DndProvider backend={HTML5Backend}> <div className="tools"> <Collapse accordion defaultActiveKey="1" bordered={false}> - <Panel header={dict['header.menu.form']} key="1"> + <Panel header="琛ㄥ崟" key="1"> <div className="search-element"> {SearchItems.map((item, index) => { return (<SourceElement key={index} content={item}/>) })} </div> - <FieldsComponent - config={config} - type="form" - updatefield={this.updateConfig} - /> + <FieldsComponent config={config} type="form" plusFields={this.plusFields}/> </Panel> </Collapse> </div> <div className="setting"> - <Card title={dict['header.menu.form.configurable']} bordered={false} extra={ + <Card title="琛ㄥ崟閰嶇疆" bordered={false} extra={ <div> <Button type="danger" onClick={this.clearConfig}>娓呯┖</Button> - <EditComponent dict={dict} options={['form']} config={this.state.config} refresh={(res) => this.updateConfig(res.config)}/> - <Button type="primary" loading={saving} onClick={this.submitConfig}>淇濆瓨</Button> + <PasteForms type="toolbar" config={config} update={this.pasteFields}/> + <Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>淇濆瓨</Button> <Button onClick={this.cancelConfig}>杩斿洖</Button> </div> } style={{ width: '100%' }}> - <Icon type="setting" onClick={this.changeSetting} /> - <div className="ant-modal-content" style={{width: config.setting.width + '%'}}> + <SettingOutlined onClick={this.changeSetting} /> + <div className="ant-modal-content" style={{width: config.setting.width > 100 ? config.setting.width : config.setting.width + '%'}}> <div className="ant-modal-header"> - <div className="ant-modal-title">{config.setting.title}</div> + <div className="ant-modal-title">{btn.label}</div> <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1鍒�</Button> <Button className="mk-cols-change" onClick={() => this.changecols(2)}>2鍒�</Button> <Button className="mk-cols-change" onClick={() => this.changecols(3)}>3鍒�</Button> <Button className="mk-cols-change" onClick={() => this.changecols(4)}>4鍒�</Button> - <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> + <CopyOutlined title="澶嶅埗" onClick={this.triggerCopy} /> + <Switch checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> </div> <div className="ant-modal-body"> <div className="modal-form"> @@ -469,7 +561,6 @@ list={config.fields} setting={config.setting} showField={this.state.showField} - placeholder={this.state.dict['header.form.modal.placeholder']} handleList={this.handleList} handleForm={this.handleForm} closeForm={this.closeForm} @@ -479,10 +570,10 @@ <div className="ant-modal-footer"> <div> <button type="button" className="ant-btn"> - <span>{this.state.dict['model.cancel']}</span> + <span>鍙栨秷</span> </button> <button type="button" className="ant-btn ant-btn-primary"> - <span>{this.state.dict['model.confirm']}</span> + <span>纭畾</span> </button> </div> <div className="action-mask"></div> @@ -492,17 +583,17 @@ </div> </DndProvider> <Modal - title={this.state.dict['model.edit']} + title={card && card.$copy ? '澶嶅埗' : '缂栬緫'} visible={this.state.visible} - width={850} + width={950} + maskClosable={false} onCancel={this.editModalCancel} onOk={this.handleSubmit} confirmLoading={this.state.sqlVerifing} destroyOnClose > <ModalForm - dict={this.state.dict} - card={this.state.card} + card={card} formlist={this.state.formlist} inputSubmit={this.handleSubmit} standardform={this.state.standardform} @@ -510,7 +601,7 @@ /> </Modal> <Modal - title={this.state.dict['model.edit']} + title="缂栬緫" visible={this.state.settingVisible} width={850} maskClosable={false} @@ -520,7 +611,6 @@ > <SettingForm config={config} - dict={this.state.dict} isSubTab={!!this.props.editTab} inputSubmit={this.settingSave} wrappedComponentRef={(inst) => this.settingRef = inst} -- Gitblit v1.8.0