From 28ebe609e47b28794450cefc72d3e0f62fd904e7 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 09 五月 2022 01:04:19 +0800 Subject: [PATCH] 2022-05-09 --- src/templates/formtabconfig/index.jsx | 246 +++++++++++++++++-------------------------------- 1 files changed, 85 insertions(+), 161 deletions(-) diff --git a/src/templates/formtabconfig/index.jsx b/src/templates/formtabconfig/index.jsx index 930a64b..a13d249 100644 --- a/src/templates/formtabconfig/index.jsx +++ b/src/templates/formtabconfig/index.jsx @@ -5,47 +5,48 @@ import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import moment from 'moment' -import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip } from 'antd' +import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Empty, Switch, Tooltip } from 'antd' +import { QuestionCircleOutlined, CloseOutlined, RedoOutlined, SettingOutlined, PlusOutlined, DeleteOutlined, EditOutlined, SnippetsOutlined } from '@ant-design/icons' import Api from '@/api' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' -import Utils from '@/utils/utils.js' -import DevUtils from '@/utils/devutils.js' +import Utils, { FuncUtils } from '@/utils/utils.js' import { getModalForm, getActionForm } from '@/templates/zshare/formconfig' import { queryTableSql } from '@/utils/option.js' import TabsComponent from '@/templates/sharecomponent/tabscomponent' -import ModalForm from '@/templates/zshare/modalform' import PasteForm from '@/templates/zshare/pasteform' import ActionForm from './actionform' import SettingForm from './settingform' import DragElement from './dragelement' import GroupForm from './groupform' import EditCard from '@/templates/zshare/editcard' -import VerifyCard from '@/templates/zshare/verifycard' + import MenuForm from '@/templates/zshare/menuform' import SourceElement from '@/templates/zshare/dragsource' -import CreateFunc from '@/templates/zshare/createfunc' +import asyncComponent from '@/utils/asyncComponent' import Source from './source' import './index.scss' const { Panel } = Collapse const { Option } = Select const { confirm } = Modal +const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform')) +const CreateFunc = asyncComponent(() => import('@/templates/zshare/createfunc')) +const VerifyCard = asyncComponent(() => import('@/templates/zshare/verifycard')) class ComTableConfig extends Component { static propTpyes = { menu: PropTypes.any, - optionLibs: PropTypes.any, btnTab: PropTypes.object, config: PropTypes.any, handleView: PropTypes.func } state = { - dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 瀛楀吀 + dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 瀛楀吀 config: null, // 椤甸潰閰嶇疆 modaltype: '', // 妯℃�佹绫诲瀷锛屾帶鍒舵ā鎬佹鏄剧ず tableVisible: false, // 鏁版嵁琛ㄥ瓧娈垫ā鎬佹 @@ -67,7 +68,6 @@ profileVisible: false, // 楠岃瘉淇℃伅妯℃�佹 editgroup: null, // 褰撳墠缂栬緫缁� groupVisible: false, // 缂栬緫缁勬ā鎬佹 - optionLibs: null, // 鑷畾涔変笅鎷夐�夐」搴� activeKey: '0', // 榛樿灞曞紑鍩烘湰淇℃伅 pasteVisible: false, // 绮樿创妯℃�佹 sqlVerifing: false, // sql楠岃瘉 @@ -80,7 +80,7 @@ * 2銆佽缃搷浣滅被鍨嬨�佸師濮嬭彍鍗曚俊鎭紙姣忔淇濆瓨鍚庨噸缃級銆佸凡浣跨敤琛ㄥ強鍩烘湰淇℃伅琛ㄥ崟 */ UNSAFE_componentWillMount () { - const { menu, btnTab, config, optionLibs } = this.props + const { menu, btnTab, config } = this.props let _config = '' let columns = [] @@ -104,24 +104,6 @@ if (menu && menu.LongParam && menu.LongParam.setting) { _config.setting.primaryKey = menu.LongParam.setting.primaryKey } - - _config.groups.forEach(group => { - group.sublist.forEach(item => { - if ( - (item.type === 'select' || item.type === 'multiselect' || item.type === 'link') && - item.resourceType === '0' && - item.options && item.options.length > 0 - ) { - optionLibs.set(btnTab.uuid + item.uuid, { - uuid: btnTab.uuid + item.uuid, - label: item.label, - parname: btnTab.label, - type: 'Modal', - options: item.options - }) - } - }) - }) } if (!_config.tabgroups) { @@ -148,12 +130,17 @@ // 閰嶇疆榛樿鍊硷紝鍏煎 _config.Template = 'FormTab' + _config.action = _config.action.map(item => { + if (item.intertype === 'inner' && !item.innerFunc) { + item.intertype = 'system' + } + return item + }) this.setState({ config: _config, activeKey: btnTab.activeKey || '0', openEdition: btnTab.open_edition || '', - optionLibs: optionLibs, columns: columns, originMenu: JSON.parse(JSON.stringify(_config)), selectedTables: _config.tables, @@ -355,7 +342,6 @@ let _tabview = menu ? menu.LongParam.Template : '' let param = { editMenu: menu, - optionLibs: this.state.optionLibs, editTab: null, tabConfig: null, editSubTab: null, @@ -442,21 +428,19 @@ const { menu } = this.props const { config } = this.state let _inputfields = [] + let _tabfields = [] let _linkableFields = [] - let _linksupFields = [{ - value: '', - text: '绌�' - }] + let _linksupFields = [] let _formfields = [] // 璁剧疆涓嬫媺鑿滃崟鍙叧鑱斿瓧娈� config.groups.forEach(group => { - let sublist = group.sublist.filter(item => item.type === 'text' || item.type === 'number') - _inputfields = [..._inputfields, ...sublist] - - let suplist = group.sublist.filter(item => item.type === 'select' || item.type === 'link') - _formfields = [..._formfields, ...suplist] + _formfields = [..._formfields, ...group.sublist] }) + + _inputfields = _formfields.filter(item => ['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field) + _tabfields = _formfields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) + _tabfields.unshift({field: '', text: '鍘熻〃鍗�'}) if (card.linkSubField && card.linkSubField.length > 0) { let fields = _inputfields.map(item => item.field) @@ -467,6 +451,7 @@ uniq.set(card.field, true) _formfields.forEach(item => { + if (item.type !== 'select' && item.type !== 'link') return if (item.field && !uniq.has(item.field)) { uniq.set(item.field, true) @@ -494,35 +479,34 @@ }) } - let roleList = [] - if (this.props.sysRoles && this.props.sysRoles.length > 0) { - roleList = this.props.sysRoles.map(role => { - return { - uuid: role.uuid, - field: role.value, - label: role.text - } - }) - } - this.setState({ modaltype: 'search', card: card, - formlist: getModalForm(card, _inputfields, _linkableFields, _linksupFields, false, roleList) + formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields).map(item => { + if (item.key === 'type') { + item.options = item.options.filter(option => !['switch', 'checkbox', 'radio', 'checkcard', 'hint'].includes(option.value)) + } + return item + }) }) } handleAction = (card) => { - let ableField = this.props.permFuncField.join(', ') - let functip = <div> - <p style={{marginBottom: '5px'}}>{this.state.dict['model.tooltip.func.innerface'].replace('@ableField', ableField)}</p> - <p>{this.state.dict['model.tooltip.func.outface']}</p> - </div> + let usefulFields = sessionStorage.getItem('permFuncField') + if (usefulFields) { + try { + usefulFields = JSON.parse(usefulFields) + } catch (e) { + usefulFields = [] + } + } else { + usefulFields = [] + } this.setState({ modaltype: 'actionEdit', card: card, - formlist: getActionForm(card, functip, this.state.config, this.props.permFuncField) + formlist: getActionForm(card, this.state.config, usefulFields) }) } @@ -534,8 +518,7 @@ * 3銆佹坊鍔犳垨缂栬緫鍒楋紝淇濆瓨鏃讹紝濡傛寜閽綅缃缃负琛ㄦ牸锛屽垯淇敼鎿嶄綔鍒楁樉绀虹姸鎬� */ handleSubmit = () => { - const { btnTab } = this.props - const { config, modaltype, optionLibs, card } = this.state + const { config, modaltype, card } = this.state if (modaltype === 'search') { this.modalFormRef.handleConfirm().then(res => { @@ -549,23 +532,9 @@ }) return } - if ( // 鏇存柊涓嬫媺瀛楀吀 - (res.type === 'select' || res.type === 'multiselect' || res.type === 'link') && - res.resourceType === '0' && - res.options && res.options.length > 0 - ) { - optionLibs.set(btnTab.uuid + res.uuid, { - uuid: btnTab.uuid + res.uuid, - label: res.label, - parname: btnTab.label, - type: 'Modal', - options: res.options - }) - } let _groups = null let fieldrepet = false // 瀛楁閲嶅 - let labelrepeat = false // 鎻愮ず鏂囧瓧閲嶅 if (card.iscopy) { _groups = _config.groups.map(group => { @@ -577,8 +546,6 @@ if (item.uuid !== res.uuid && item.field === res.field) { fieldrepet = true - } else if (item.uuid !== res.uuid && item.label === res.label) { - labelrepeat = true } }) @@ -596,8 +563,6 @@ group.sublist = group.sublist.map(item => { if (item.uuid !== res.uuid && item.field === res.field) { fieldrepet = true - } else if (item.uuid !== res.uuid && item.label === res.label) { - labelrepeat = true } if (item.uuid === res.uuid) { @@ -620,13 +585,6 @@ duration: 5 }) return - } else if (labelrepeat) { - notification.warning({ - top: 92, - message: '鍚嶇О宸插瓨鍦紒', - duration: 5 - }) - return } if ((res.type === 'select' || res.type === 'multiselect' || res.type === 'link') && res.resourceType === '1' && /\s/.test(res.dataSource)) { @@ -636,6 +594,7 @@ let param = { func: 's_debug_sql', + exec_type: 'y', LText: res.dataSource } @@ -643,7 +602,7 @@ param.LText = Utils.formatOptions(param.LText) param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') - param.secretkey = Utils.encrypt(param.LText, param.timestamp) + param.secretkey = Utils.encrypt('', param.timestamp) if (window.GLOB.mainSystemApi && res.database === 'sso') { param.rduri = window.GLOB.mainSystemApi @@ -654,7 +613,6 @@ this.setState({ sqlVerifing: false, config: {..._config, groups: _groups}, - optionLibs: optionLibs, modaltype: '' }) } else { @@ -668,7 +626,6 @@ } else { this.setState({ config: {..._config, groups: _groups}, - optionLibs: optionLibs, modaltype: '' }) } @@ -756,30 +713,10 @@ menuNo: menu.MenuNo } - newLText = Utils.formatOptions(DevUtils.getfunc(_param, btn, menu, _config)) - DelText = Utils.formatOptions(DevUtils.dropfunc(_param.funcName)) + newLText = Utils.formatOptions(FuncUtils.getfunc(_param, btn, menu, _config)) + DelText = Utils.formatOptions(FuncUtils.dropfunc(_param.funcName)) - this.refs.btnCreatFunc.exec(btn.innerFunc, newLText, DelText).then(result => { - if (result !== 'success') return - - let isupdate = false - _config.action = _config.action.map(item => { - if (item.uuid === btn.uuid) { - isupdate = true - return btn - } else { - return item - } - }) - - if (!isupdate) { // 鎿嶄綔涓嶆槸淇敼锛屾坊鍔犲厓绱犺嚦鍒楄〃 - _config.action.push(btn) - } - - this.setState({ - config: _config - }) - }) + this.refs.btnCreatFunc.exec(btn.innerFunc, newLText, DelText) }) } @@ -816,16 +753,10 @@ } let _config = {...config, setting: setting} - let newLText = Utils.formatOptions(DevUtils.getTableFunc(setting, menu, _config)) // 鍒涘缓瀛樺偍杩囩▼sql - let DelText = Utils.formatOptions(DevUtils.dropfunc(setting.innerFunc)) // 鍒犻櫎瀛樺偍杩囩▼sql + let newLText = Utils.formatOptions(FuncUtils.getTableFunc(setting, menu, _config)) // 鍒涘缓瀛樺偍杩囩▼sql + let DelText = Utils.formatOptions(FuncUtils.dropfunc(setting.innerFunc)) // 鍒犻櫎瀛樺偍杩囩▼sql - this.refs.tableCreatFunc.exec(setting.innerFunc, newLText, DelText).then(result => { - if (result === 'success') { - this.setState({ - config: _config - }) - } - }) + this.refs.tableCreatFunc.exec(setting.innerFunc, newLText, DelText) }) } @@ -951,7 +882,7 @@ if (_ismutil && group.sublist.length === 0) { _config.enabled = false } - let arr = group.sublist.filter(item => item.field.toLowerCase() === _primary) + let arr = group.sublist.filter(item => item.field && item.field.toLowerCase() === _primary) if (arr.length > 0) { _config.enabled = false @@ -1387,7 +1318,6 @@ initval: '', type: item.type, resourceType: '0', - setAll: 'false', options: [], orderType: 'asc' } @@ -1514,6 +1444,7 @@ let param = { func: 's_debug_sql', + exec_type: 'y', LText: res.dataresource } @@ -1521,7 +1452,7 @@ param.LText = Utils.formatOptions(param.LText) param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') - param.secretkey = Utils.encrypt(param.LText, param.timestamp) + param.secretkey = Utils.encrypt('', param.timestamp) Api.getLocalConfig(param).then(result => { if (result.status) { @@ -1580,7 +1511,6 @@ let param = { editMenu: menu, - optionLibs: this.state.optionLibs, editTab: btn, tabConfig: null, editSubTab: null, @@ -1665,7 +1595,7 @@ let primaryrepeat = false config.groups.forEach(group => { - let arr = group.sublist.filter(item => item.field.toLowerCase() === _primary) + let arr = group.sublist.filter(item => item.field && item.field.toLowerCase() === _primary) if (arr.length > 0) { primaryrepeat = true @@ -1852,7 +1782,7 @@ <div className="ant-col ant-form-item-label"> <label> <Tooltip placement="topLeft" title="姝ゅ鍙互娣诲姞閰嶇疆鐩稿叧鐨勫父鐢ㄨ〃锛屽湪娣诲姞鎼滅储鏉′欢鍜屾樉绀哄垪鏃讹紝鍙�氳繃宸ュ叿鏍忎腑鐨勬坊鍔犳寜閽紝鎵归噺娣诲姞琛ㄦ牸鐩稿叧瀛楁銆�"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> {this.state.dict['header.menu.table.add']} </Tooltip> </label> @@ -1862,7 +1792,7 @@ className="tables" style={{ width: '100%' }} optionFilterProp="children" - value={this.state.dict['header.menu.table.placeholder']} + value="璇烽�夋嫨琛ㄥ悕" onChange={this.onTableChange} showArrow={false} getPopupContainer={() => document.getElementById('common-basedata')} @@ -1881,7 +1811,7 @@ dataSource={this.state.selectedTables} renderItem={(item, index) => <List.Item key={index} title={item.Remark + ' (' + item.TbName + ')'}> {item.Remark + ' (' + item.TbName + ')'} - <Icon type="close" onClick={() => this.deleteTable(item)}/> + <CloseOutlined onClick={() => this.deleteTable(item)}/> <div className="bottom-mask"></div> </List.Item>} />} @@ -1893,7 +1823,7 @@ return (<SourceElement key={index} content={item}/>) })} </div> - <Button type="primary" block onClick={() => this.queryField('search')}>{this.state.dict['header.menu.form.add']}</Button> + <Button type="primary" block onClick={() => this.queryField('search')}>鎵归噺娣诲姞</Button> </Panel> {/* 鎸夐挳娣诲姞 */} <Panel header={this.state.dict['header.menu.action']} key="2"> @@ -1913,9 +1843,9 @@ {configTabs.length > 0 ? <p className="config-btn-title"> <Tooltip placement="topLeft" title="鐐瑰嚮鎸夐挳锛屽彲瀹屾垚鎴栨煡鐪嬫爣绛鹃厤缃俊鎭��"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> </Tooltip> - {this.state.dict['header.menu.tab.configurable']} + 鏍囩閰嶇疆 </p> : null } {configTabs.map((item, index) => { @@ -1936,8 +1866,8 @@ <div className="setting"> <Card title={ <div> - {this.state.dict['header.menu.page.configurable']} - <Icon type="redo" style={{marginLeft: '10px'}} title="鍒锋柊鏍囩鍒楄〃" onClick={this.reloadTab} /> + 椤甸潰閰嶇疆 + <RedoOutlined style={{marginLeft: '10px'}} title="鍒锋柊鏍囩鍒楄〃" onClick={this.reloadTab} /> </div> } bordered={false} extra={ <div> @@ -1946,9 +1876,9 @@ <Button onClick={this.cancelConfig}>{this.state.dict['model.back']}</Button> </div> } style={{ width: '100%' }}> - <Icon type="setting" onClick={this.changeSetting} /> + <SettingOutlined onClick={this.changeSetting} /> <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃悳绱€�嬩腑锛岄�夋嫨瀵瑰簲鎼滅储妗嗘嫋鑷虫澶勬坊鍔狅紱鎴栫偣鍑绘寜閽�婃坊鍔犳悳绱㈡潯浠躲�嬫壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ��"> - <Icon type="question-circle" /> + <QuestionCircleOutlined style={{position: 'relative', color: '#c49f47', left: '5px', top: '20px'}} /> </Tooltip> <Collapse activeKey={config.groups.map(group => group.uuid)} @@ -1957,21 +1887,16 @@ {config.groups.map((group, index) => ( <Panel showArrow={false} header={group.label} key={group.uuid} extra={( <span> - {index === _length - 1 ? <Icon - type="plus" + {index === _length - 1 ? <PlusOutlined onClick={() => { this.handleGroup()}} /> : null} - {_length > 1 && index !== _length - 1 ? <Icon - type="delete" + {_length > 1 && index !== _length - 1 ? <DeleteOutlined onClick={() => { this.closeGroup(group) }} /> : null} - <Icon - type="edit" - onClick={() => { this.handleGroup(group) }} - /> + <EditOutlined onClick={() => { this.handleGroup(group) }}/> </span> )}> - {group.isDefault ? <Icon type="snippets" title={this.state.dict['header.form.paste']} onClick={() => {this.setState({pasteVisible: true})}} /> : null} + {group.isDefault ? <SnippetsOutlined title={this.state.dict['header.form.paste']} onClick={() => {this.setState({pasteVisible: true})}} /> : null} <DragElement type="search" groupId={group.uuid} @@ -1980,14 +1905,13 @@ setting={config.setting} handleMenu={this.handleSearch} deleteMenu={this.deleteElement} - placeholder={this.state.dict['header.form.modal.placeholder']} /> </Panel> ))} </Collapse> <div className="action-list"> <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃寜閽�嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬寜閽嫋鑷虫澶勬坊鍔狅紝濡傞�夋嫨鎸夐挳绫诲瀷涓鸿〃鍗曘�佹柊鏍囩椤电瓑鍚湁閰嶇疆椤甸潰鐨勬寜閽紝鍙湪宸︿晶宸ュ叿鏍�-鎸夐挳-鍙厤缃寜閽锛岀偣鍑绘寜閽畬鎴愮浉鍏抽厤缃�傛敞锛氬綋璁剧疆鎸夐挳鏄剧ず浣嶇疆涓鸿〃鏍兼椂锛屾樉绀哄垪浼氬鍔犳搷浣滃垪銆�"> - <Icon type="question-circle" /> + <QuestionCircleOutlined style={{position: 'absolute', color: '#c49f47', left: '5px', top: '5px'}} /> </Tooltip> <DragElement type="action" @@ -1996,7 +1920,6 @@ handleMenu={this.handleAction} deleteMenu={this.deleteElement} profileMenu={this.profileAction} - placeholder={this.state.dict['header.form.action.placeholder']} /> </div> {/* 鏍囩缁� */} @@ -2011,9 +1934,9 @@ </DndProvider> {/* 缂栬緫琛ㄥ崟 */} <Modal - title={this.state.card && this.state.card.iscopy ? this.state.dict['header.modal.form.copy'] : this.state.dict['header.modal.form.edit']} + title={this.state.card && this.state.card.iscopy ? '琛ㄥ崟-澶嶅埗' : '琛ㄥ崟-缂栬緫'} visible={modaltype === 'search'} - width={700} + width={950} maskClosable={false} onOk={this.handleSubmit} confirmLoading={this.state.sqlVerifing} @@ -2025,7 +1948,6 @@ card={this.state.card} formlist={this.state.formlist} inputSubmit={this.handleSubmit} - optionLibs={this.state.optionLibs} wrappedComponentRef={(inst) => this.modalFormRef = inst} /> </Modal> @@ -2033,7 +1955,7 @@ <Modal title={this.state.dict['model.action'] + '-' + this.state.dict['model.edit']} visible={modaltype === 'actionEdit'} - width={700} + width={900} maskClosable={false} onCancel={this.editModalCancel} footer={[ @@ -2060,7 +1982,6 @@ visible={this.state.tableVisible} width={'65vw'} maskClosable={false} - style={{minWidth: '900px', maxWidth: '1200px'}} cancelText={this.state.dict['model.close']} onOk={this.addFieldSubmit} onCancel={() => { // 鍙栨秷娣诲姞 @@ -2082,12 +2003,19 @@ wrapClassName="common-table-fields-modal" title={'楠岃瘉淇℃伅'} visible={this.state.profileVisible} - width={'75vw'} + width={'90vw'} maskClosable={false} - style={{minWidth: '900px', maxWidth: '1200px'}} okText={this.state.dict['model.submit']} onOk={this.verifySubmit} - onCancel={() => { this.setState({ profileVisible: false }) }} + onCancel={() => { + if (this.verifyRef.handleCancel) { + this.verifyRef.handleCancel().then(() => { + this.setState({ profileVisible: false }) + }) + } else { + this.setState({ profileVisible: false }) + } + }} destroyOnClose > <VerifyCard @@ -2122,7 +2050,6 @@ menu={this.props.menu} config={this.state.config} inputSubmit={this.settingSave} - usefulFields={this.props.permFuncField} wrappedComponentRef={(inst) => this.settingRef = inst} /> </Modal> @@ -2142,7 +2069,7 @@ {this.state.dict['header.menu.config.placeholder']} </Modal> <Modal - title={this.state.dict['header.menu.group.manage']} + title="鍒嗙粍绠$悊" visible={this.state.groupVisible} width={700} maskClosable={false} @@ -2179,11 +2106,8 @@ } } -const mapStateToProps = (state) => { - return { - sysRoles: state.sysRoles, - permFuncField: state.permFuncField - } +const mapStateToProps = () => { + return {} } const mapDispatchToProps = () => { -- Gitblit v1.8.0