From 9a11e62adeb8d435b52a361eb62d5b59e1deef2a Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 23 五月 2024 21:14:50 +0800 Subject: [PATCH] 2024-05-23 --- src/templates/modalconfig/index.jsx | 583 +++++++++++++++++++++++++++------------------------------- 1 files changed, 270 insertions(+), 313 deletions(-) diff --git a/src/templates/modalconfig/index.jsx b/src/templates/modalconfig/index.jsx index 97a26bb..cabfc7d 100644 --- a/src/templates/modalconfig/index.jsx +++ b/src/templates/modalconfig/index.jsx @@ -1,18 +1,13 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import {connect} from 'react-redux' -import { is, fromJS } from 'immutable' +import { fromJS } from 'immutable' 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 } from 'antd' +import { SettingOutlined } 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 './dragelement/source' import SettingForm from './settingform' import MenuForm from './menuform' @@ -23,11 +18,12 @@ const { Panel } = Collapse const { confirm } = Modal -const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS -const ReplaceField = asyncComponent(() => import('@/menu/replaceField')) +// const Versions = asyncComponent(() => import('@/menu/versions')) +// const ReplaceField = asyncComponent(() => import('@/menu/replaceField')) +const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform')) -const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent')) +// const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent')) const DragElement = asyncComponent(() => import('./dragelement')) const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) @@ -48,7 +44,6 @@ state = { menu: null, // 涓婄骇鑿滃崟锛屼笁绾ц彍鍗曟垨鏍囩 - dict: CommonDict, // 瀛楀吀 config: null, // 椤甸潰閰嶇疆锛屽寘鎷ā鏉跨被鍨嬨�佹ā鎬佹璁剧疆銆佹坊鍔犺〃鍚嶃�佽〃鍗曞垪琛� visible: false, // 琛ㄥ崟缂栬緫妯℃�佹锛屾樉绀烘帶鍒� modalformlist: null, // 鍩烘湰淇℃伅琛ㄥ崟瀛楁 @@ -109,7 +104,7 @@ { type: 'text', key: 'supMenu', - label: this.state.dict['model.super'] + this.state.dict['model.menu'], + label: '涓婄骇鑿滃崟', initVal: _menu.MenuName, required: true, readonly: true @@ -126,6 +121,37 @@ }) } + componentDidMount() { + window.GLOB.formId = '' + + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-config') + if (node && node.click) { + node.click() + } + return false + } + } + } + /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 */ @@ -133,6 +159,7 @@ this.setState = () => { return } + document.onkeydown = () => {} } // 椤甸潰杩斿洖 @@ -189,183 +216,55 @@ handleForm = (_card) => { const { menu, tabConfig, subTabConfig } = this.props const { config } = this.state + let card = fromJS(_card).toJS() - let _inputfields = [] - let _tabfields = [] - let _linkableFields = [] - let _linksupFields = [{ - value: '', - text: '绌�' - }] - 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 - config.fields.forEach((item, i) => { - if (card.uuid === item.uuid) { - index = i - } - if (!['select', 'link', 'radio', ''].includes(item.type)) return - if (item.field && !uniq.has(item.field)) { - uniq.set(item.field, true) - - _linkableFields.push({ - value: item.field, - text: item.label + ' (琛ㄥ崟)' - }) - _linksupFields.push({ - value: item.field, - text: item.label - }) - } - }) - - if (index !== null) { - if (index === 0) { - standardform = config.fields[index + 1] || null - } else { - standardform = config.fields[index - 1] || null - } - } - + let columns = [] if (subTabConfig) { - subTabConfig.columns.forEach(col => { - if (col.field && !uniq.has(col.field)) { - uniq.set(col.field, true) - - _linkableFields.push({ - value: col.field, - text: col.label + ' (鏄剧ず鍒�)' - }) - } - }) + columns = subTabConfig.columns } else if (tabConfig) { - tabConfig.columns.forEach(col => { - if (col.field && !uniq.has(col.field)) { - uniq.set(col.field, true) - - _linkableFields.push({ - value: col.field, - text: col.label + ' (鏄剧ず鍒�)' - }) - } - }) + columns = tabConfig.columns } else if (menu.LongParam) { - menu.LongParam.columns.forEach(col => { - if (col.field && !uniq.has(col.field)) { - uniq.set(col.field, true) - - _linkableFields.push({ - value: col.field, - text: col.label + ' (鏄剧ず鍒�)' - }) - } - }) - } - - if (card.linkSubField && card.linkSubField.length > 0) { - let fields = _inputfields.map(item => item.field) - card.linkSubField = card.linkSubField.filter(item => fields.includes(item)) - } - - if (!card.span && standardform && standardform.span) { - card.span = standardform.span - card.labelwidth = standardform.labelwidth + columns = menu.LongParam.columns } this.setState({ - standardform, visible: true, card: card, - formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, !!this.props.editTab) + formlist: getModalForm(card, config.fields, columns) }) } /** * @description 缂栬緫鍚庢彁浜� - * 1銆佽幏鍙栫紪杈戝悗鐨勮〃鍗曚俊鎭� - * 2銆佸幓闄ゅ彲鑳藉瓨鍦ㄧ殑绀轰緥琛ㄥ崟 - * 3銆侀�氳繃loading鍒锋柊 */ handleSubmit = () => { - this.formRef.handleConfirm().then(res => { - let _config = fromJS(this.state.config).toJS() - let fieldrepet = false // 瀛楁閲嶅 - let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅 + let _config = fromJS(this.state.config).toJS() + this.formRef.handleConfirm(_config.fields).then(res => { _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 - } - - if (item.uuid === res.uuid) { - return res + if (item.uuid === res.values.uuid) { + return res.values } else { return item } }) - if (fieldrepet) { - notification.warning({ - top: 92, - message: '瀛楁宸插瓨鍦紒', - duration: 10 - }) - return - } else if (labelrepet) { - notification.warning({ - top: 92, - message: '鍚嶇О宸插瓨鍦紒', - duration: 10 - }) - return - } - _config.fields = _config.fields.filter(item => !item.origin) - if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) { + if (res.loading) { 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, - config: _config, - card: null, - visible: false - }) - } else { - this.setState({sqlVerifing: false}) - - Modal.error({ - title: result.message - }) - } + res.promise().then(() => { + this.setState({ + sqlVerifing: false, + config: _config, + card: null, + visible: false + }) + }, () => { + this.setState({sqlVerifing: false}) }) } else { this.setState({ @@ -397,110 +296,110 @@ }) } - submitConfig = () => { - const { editAction } = this.props - const { config, menu, openEdition } = this.state + // submitConfig = () => { + // const { editAction } = this.props + // const { config, menu, openEdition } = this.state - if (config.fields[0] && config.fields[0].origin) { - notification.warning({ - top: 92, - message: '璇锋坊鍔犺〃鍗�', - duration: 10 - }) - return - } + // if (config.fields[0] && config.fields[0].origin) { + // notification.warning({ + // top: 92, + // message: '璇锋坊鍔犺〃鍗�', + // duration: 10 + // }) + // return + // } - let _LongParam = '' - let _config = fromJS(config).toJS() + // let _LongParam = '' + // let _config = fromJS(config).toJS() - try { - _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config))) - } catch (e) { - notification.warning({ - top: 92, - message: '缂栬瘧閿欒', - duration: 10 - }) - return - } + // try { + // _LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config))) + // } catch (e) { + // notification.warning({ + // top: 92, + // message: '缂栬瘧閿欒', + // duration: 10 + // }) + // return + // } - let param = { - func: 'sPC_ButtonParam_AddUpt', - ParentID: menu.MenuID, - MenuID: editAction.uuid, - MenuNo: menu.MenuNo, - Template: 'Modal', - MenuName: editAction.label, - PageParam: JSON.stringify({Template: 'Modal'}), - LongParam: _LongParam - } + // let param = { + // func: 'sPC_ButtonParam_AddUpt', + // ParentID: menu.MenuID, + // MenuID: editAction.uuid, + // MenuNo: menu.MenuNo, + // Template: 'Modal', + // MenuName: editAction.label, + // PageParam: JSON.stringify({Template: 'Modal'}), + // LongParam: _LongParam + // } - if (openEdition) { - param.open_edition = openEdition - } + // if (openEdition) { + // param.open_edition = openEdition + // } - if (this.state.closeVisible) { - this.setState({ - closeloading: true - }) - } else { - this.setState({ - menuloading: true - }) - } + // if (this.state.closeVisible) { + // this.setState({ + // closeloading: true + // }) + // } else { + // this.setState({ + // menuloading: true + // }) + // } - Api.getSystemConfig(param).then(response => { - if (response.status) { - this.setState({ - openEdition: response.open_edition || '', - menuloading: false, - closeloading: false, - closeVisible: false, - originConfig: _config, - config: _config - }) - notification.success({ - top: 92, - message: '淇濆瓨鎴愬姛', - duration: 2 - }) - } else { - this.setState({ - closeloading: false, - menuloading: false - }) - notification.warning({ - top: 92, - message: response.message, - duration: 10 - }) - } - }) - } + // Api.getCloudConfig(param).then(response => { + // if (response.status) { + // this.setState({ + // openEdition: response.open_edition || '', + // menuloading: false, + // closeloading: false, + // closeVisible: false, + // originConfig: _config, + // config: _config + // }) + // notification.success({ + // top: 92, + // message: '淇濆瓨鎴愬姛', + // duration: 2 + // }) + // } else { + // this.setState({ + // closeloading: false, + // menuloading: false + // }) + // notification.warning({ + // top: 92, + // message: response.message, + // duration: 10 + // }) + // } + // }) + // } cancelConfig = () => { - const { config, originConfig } = this.state - let _this = this + // const { config, originConfig } = this.state + // let _this = this - let isOrigin = config.fields.filter(item => item.origin).length > 0 - if (isOrigin) { - confirm({ - content: '灏氭湭鎻愪氦锛岀‘瀹氭斁寮冧繚瀛樺悧锛�', - onOk() { - _this.handleViewBack() - }, - onCancel() {} - }) - } else { - - if (!is(fromJS(config), fromJS(originConfig))) { - this.setState({ - closeVisible: true - }) - } else { - this.handleViewBack() - } - } + // let isOrigin = config.fields.filter(item => item.origin).length > 0 + // if (isOrigin) { + // confirm({ + // content: '灏氭湭鎻愪氦锛岀‘瀹氭斁寮冧繚瀛樺悧锛�', + // onOk() { + // _this.handleViewBack() + // }, + // onCancel() {} + // }) + // } else { + // if (!is(fromJS(config), fromJS(originConfig))) { + // this.setState({ + // closeVisible: true + // }) + // } else { + // this.handleViewBack() + // } + // } + this.handleViewBack() } /** @@ -542,18 +441,6 @@ card: null, visible: false }) - } - } - - /** - * @description 缂栬緫鍔熻兘瀹屾垚鏇存柊锛屽寘鎷В鍐绘寜閽�佺矘璐淬�佹浛鎹㈢瓑 - */ - updateEditConfig = (res) => { - if (res.type === 'paste') { - this.setState({ - config: res.config - }) - this.handleForm(res.newform) } } @@ -600,19 +487,101 @@ }) } - render () { - const { config, dict } = this.state + refreshConfig = () => { + const { editAction } = this.props + + let param = { + func: 'sPC_Get_LongParam', + MenuID: editAction.uuid + } + Api.getCloudConfig(param).then(res => { + if (res.status) { + let _config = '' + if (res.LongParam) { + try { + _config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam))) + } catch (e) { + console.warn('Parse Failure') + _config = '' + } + } + + if (!_config) { + notification.warning({ + top: 92, + message: '鏈幏鍙栧埌閰嶇疆淇℃伅锛�', + duration: 5 + }) + return + } + + // 鐗堟湰鍏煎 + _config = updateForm(_config) + + this.setState({ + config: null + }, () => { + this.setState({ + config: _config, + openEdition: res.open_edition || '', + originConfig: fromJS(_config).toJS() + }) + }) + } else { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + } + }) + } + + plusFields = (items) => { + let _config = fromJS(this.state.config).toJS() + + if (_config.fields[0] && _config.fields[0].origin) { + _config.fields = _config.fields.filter(item => !item.origin) + } + + _config.fields.push(...items) + + this.setState({ + config: _config + }, () => { + if (items.length === 1 && items[0].focus) { + this.handleForm(items[0]) + } + }) + } + + clearConfig = () => { + const _this = this + let _config = {...this.state.config, fields: []} + + confirm({ + content: '纭畾娓呯┖琛ㄥ崟鍚楋紵', + onOk() { + _this.setState({ config: _config }) + }, + onCancel() {} + }) + } + + render () { + // const { editAction } = this.props + const { config } = this.state + + if (!config) return null + return ( <div className="modal-form-board"> <DndProvider backend={HTML5Backend}> <div className="tools"> <Collapse accordion defaultActiveKey="1" bordered={false}> - <Panel forceRender={true} header={dict['header.menu.basedata']} key="0" id="modal-basedata"> - <MenuForm - dict={dict} - formlist={this.state.modalformlist} - /> + <Panel forceRender={true} header="鍩烘湰淇℃伅" key="0" id="modal-basedata"> + <MenuForm formlist={this.state.modalformlist}/> {/* 琛ㄥ悕娣诲姞 */} <TableComponent config={config} @@ -620,38 +589,36 @@ updatetable={this.updateconfig} /> </Panel> - <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> - <ReplaceField type="form" config={config} updateConfig={this.updateconfig}/> - <EditComponent dict={dict} options={['form']} config={this.state.config} refresh={this.updateEditConfig}/> - <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{dict['model.save']}</Button> - <Button onClick={this.cancelConfig}>{dict['model.back']}</Button> + {/* <Button type="danger" onClick={this.clearConfig}>娓呯┖</Button> */} + {/* <Versions MenuId={editAction.uuid} open_edition={openEdition} updateConfig={this.refreshConfig}/> */} + {/* <ReplaceField type="form" config={config} updateConfig={this.updateconfig}/> */} + {/* <EditComponent options={['form']} type="formboard" config={this.state.config} plusFields={this.plusFields}/> */} + {/* <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>淇濆瓨</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> <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})} /> + <Switch checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> </div> <div className="ant-modal-body"> <div className="modal-form"> @@ -659,7 +626,6 @@ list={config.fields} setting={config.setting} showField={this.state.showField} - placeholder={dict['header.form.modal.placeholder']} handleList={this.handleList} handleForm={this.handleForm} closeForm={this.closeForm} @@ -669,10 +635,10 @@ <div className="ant-modal-footer"> <div> <button type="button" className="ant-btn"> - <span>{dict['model.cancel']}</span> + <span>鍙栨秷</span> </button> <button type="button" className="ant-btn ant-btn-primary"> - <span>{dict['model.confirm']}</span> + <span>纭畾</span> </button> </div> <div className="action-mask"></div> @@ -682,9 +648,9 @@ </div> </DndProvider> <Modal - title={dict['model.edit']} + title="缂栬緫" visible={this.state.visible} - width={850} + width={950} maskClosable={false} onCancel={this.editModalCancel} onOk={this.handleSubmit} @@ -692,18 +658,17 @@ destroyOnClose > <ModalForm - dict={dict} card={this.state.card} formlist={this.state.formlist} inputSubmit={this.handleSubmit} - standardform={this.state.standardform} + fields={config.fields} wrappedComponentRef={(inst) => this.formRef = inst} /> </Modal> <Modal - title={dict['model.edit']} + title="缂栬緫" visible={this.state.settingVisible} - width={850} + width={900} maskClosable={false} onOk={this.settingSave} onCancel={() => { this.setState({ settingVisible: false }) }} @@ -711,38 +676,30 @@ > <SettingForm config={config} - dict={dict} isSubTab={!!this.props.editTab} inputSubmit={this.settingSave} wrappedComponentRef={(inst) => this.settingRef = inst} /> </Modal> - <Modal + {/* <Modal bodyStyle={{textAlign: 'center', color: '#000000', fontSize: '16px'}} closable={false} maskClosable={false} visible={this.state.closeVisible} onCancel={() => { this.setState({closeVisible: false}) }} footer={[ - <Button key="save" className="mk-btn mk-green" loading={this.state.closeloading} onClick={this.submitConfig}>{dict['model.save']}</Button>, - <Button key="confirm" className="mk-btn mk-yellow" onClick={this.handleViewBack}>{dict['model.notsave']}</Button>, - <Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>{dict['model.cancel']}</Button> + <Button key="save" className="mk-btn mk-green" loading={this.state.closeloading} onClick={this.submitConfig}>淇濆瓨</Button>, + <Button key="confirm" className="mk-btn mk-yellow" onClick={this.handleViewBack}>涓嶄繚瀛�</Button>, + <Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>鍙栨秷</Button> ]} destroyOnClose > - {dict['header.menu.config.placeholder']} - </Modal> + 閰嶇疆宸蹭慨鏀癸紝鏄惁淇濆瓨閰嶇疆淇℃伅锛� + </Modal> */} + <StyleController /> </div> ) } } -const mapStateToProps = () => { - return {} -} - -const mapDispatchToProps = () => { - return {} -} - -export default connect(mapStateToProps, mapDispatchToProps)(ComModalConfig) \ No newline at end of file +export default ComModalConfig \ No newline at end of file -- Gitblit v1.8.0