From 92108e6c93de657838bbd766a9eb4f27d85e1c2d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 05 五月 2020 16:41:28 +0800 Subject: [PATCH] 2020-05-05 --- src/templates/comtableconfig/index.jsx | 627 ++++++++++++++------------------------------------------ 1 files changed, 160 insertions(+), 467 deletions(-) diff --git a/src/templates/comtableconfig/index.jsx b/src/templates/comtableconfig/index.jsx index 6a548b0..b3802e7 100644 --- a/src/templates/comtableconfig/index.jsx +++ b/src/templates/comtableconfig/index.jsx @@ -4,7 +4,7 @@ import { is, fromJS } from 'immutable' import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' -import { Button, Card, Modal, Collapse, notification, Spin, Icon, Switch, Tooltip } from 'antd' +import { Button, Card, Modal, Collapse, notification, Spin, Icon, Switch, Tooltip, Col } from 'antd' import moment from 'moment' import Api from '@/api' @@ -16,19 +16,16 @@ import asyncComponent from '@/utils/asyncComponent' import TableComponent from '@/templates/sharecomponent/tablecomponent' import FieldsComponent from '@/templates/sharecomponent/fieldscomponent' -// import ChartGroupComponent from '@/templates/sharecomponent/chartgroupcomponent' +import ChartGroupComponent from '@/templates/sharecomponent/chartgroupcomponent' import SearchComponent from '@/templates/sharecomponent/searchcomponent' import ActionComponent from '@/templates/sharecomponent/actioncomponent' import ColumnComponent from '@/templates/sharecomponent/columncomponent' +import TabsComponent from '@/templates/sharecomponent/tabscomponent' +import ChartComponent from '@/templates/sharecomponent/chartcomponent' -// import SettingForm from './settingform' -import TabForm from '@/templates/zshare/tabform' import MenuForm from '@/templates/zshare/menuform' -import TabDragElement from '@/templates/zshare/tabdragelement' import EditComponent from '@/templates/zshare/editcomponent' import SourceElement from '@/templates/zshare/dragsource' -// import CreateFunc from '@/templates/zshare/createfunc' -// import CreateInterface from '@/templates/zshare/createinterface' import Source from './source' import './index.scss' @@ -52,7 +49,6 @@ fields: null, // 鎼滅储鏉′欢鍙婃樉绀哄垪锛屽彲閫夊瓧娈� menuformlist: null, // 鍩烘湰淇℃伅琛ㄥ崟瀛楁 formlist: null, // 鎼滅储鏉′欢銆佹寜閽�佹樉绀哄垪琛ㄥ崟瀛楁 - modaltype: '', // 妯℃�佹绫诲瀷锛屾帶鍒舵ā鎬佹鏄剧ず card: null, // 缂栬緫鍏冪礌 menuloading: false, // 鑿滃崟淇濆瓨涓� menucloseloading: false, // 鑿滃崟鍏抽棴鏃讹紝閫夋嫨淇濆瓨 @@ -67,7 +63,7 @@ optionLibs: null, // 鑷畾涔変笅鎷夐�夐」搴� thawButtons: [], // 宸查�夋嫨瑕佽В鍐荤殑鎸夐挳 activeKey: '0', // 榛樿灞曞紑鍩烘湰淇℃伅 - sqlVerifing: false, // sql楠岃瘉 + chartview: null, // 褰撳墠瑙嗗浘 pasteContent: null // 绮樿创閰嶇疆淇℃伅 } @@ -109,10 +105,40 @@ // 閰嶇疆榛樿鍊硷紝鍏煎 _config.tabs = _config.tabs || [] - _config.tabgroups = _config.tabgroups || ['tabs'] - _config.setting.subtabs = _config.setting.subtabs || [] _config.Template = 'CommonTable' _config.easyCode = _config.easyCode || '' + + if (!_config.tabgroups) { + _config.tabgroups = [{ uuid: 'tabs', sublist: [] }] + } else if (typeof(_config.tabgroups[0]) === 'string') { + let _tabgroups = [] + _config.tabgroups.forEach(groupId => { + let _group = { + uuid: groupId, + sublist: fromJS(_config[groupId]).toJS() + } + + delete _config[groupId] + + _tabgroups.push(_group) + }) + + _config.tabgroups = _tabgroups + } + + // 鍏煎鍥捐〃 + if (!_config.charts) { + _config.expand = false + _config.charts = [{ + uuid: Utils.getuuid(), + label: '', + title: '', + chartType: 'table', + icon: 'table', + Hide: 'false', + blacklist: [] + }] + } let _oriActions = [] if (_config.type === 'user') { @@ -143,7 +169,7 @@ // 閲嶇疆鏍囩ID _config.tabgroups.forEach(group => { - _config[group] = _config[group].map(tab => { + group.sublist = group.sublist.map(tab => { tab.uuid = Utils.getuuid() if (tab.linkTab) { @@ -156,6 +182,7 @@ } this.setState({ + chartview: _config.charts[0].uuid, config: _config, activeKey: menu.activeKey || '0', optionLibs: optionLibs, @@ -225,246 +252,6 @@ } /** - * @description 鍏冪礌娣诲姞鎴栨嫋鍔ㄦ椂椤哄簭鍙樺寲 - */ - handleList = (type, list, card) => { - const { config } = this.state - - if (list.length > config[card.groupId].length) { - list = list.filter(item => !item.origin) - this.handleTab(card) - } - - this.setState({config: {...config, [card.groupId]: list}}) - } - - /** - * @description 鏍囩缂栬緫锛岀瓫閫夊彲閫夌殑涓嬬骇鏍囩涓庡凡鍏宠仈鐨勪笅绾ф爣绛� - */ - handleTab = (card) => { - const { config } = this.state - - let menus = [ - {value: '', text: '绌�'}, - {value: 'mainTable', text: '涓昏〃'} - ] - let equalTabs = [] - let supMenu = card.supMenu || '' - let equalTab = card.equalTab || [] - let isuptab = true - let equalTabIds = [] - - config.tabgroups.forEach((groupId, i) => { - if (groupId === card.groupId) { - isuptab = false - config[card.groupId].forEach(tab => { // 鍙叧鑱旂殑鍚岀骇鏍囩 - if (tab.uuid === card.uuid) return - - equalTabIds.push(tab.uuid) - equalTabs.push(tab) - }) - } else if (isuptab) { - config[groupId].forEach(tab => { - menus.push({ - value: tab.uuid, - text: tab.label - }) - }) - } - }) - - if (supMenu && menus.filter(menu => menu.value === supMenu).length === 0) { - supMenu = '' - } - - if (equalTab.length > 0) { - equalTab = equalTab.filter(tabId => equalTabIds.includes(tabId)) - } - - - this.setState({ - modaltype: 'tabs', - card: card, - formlist: [ - { - type: 'text', - key: 'label', - label: this.state.dict['header.menu.tabName'], - initVal: card.label || '', - required: true - }, - { - type: 'select', - key: 'type', - label: this.state.dict['header.form.tabType'], - initVal: card.type || 'SubTable', - required: true, - options: [{ - value: 'SubTable', - text: this.state.dict['header.menu.tab.subtable'] - }] - }, - { - type: 'select', - key: 'linkTab', - label: this.state.dict['header.form.linkTab'], - initVal: card.linkTab || '', - required: false, - options: [] - }, - { - type: 'select', - key: 'icon', - label: this.state.dict['header.menu.icon'], - initVal: card.icon || '', - required: false, - options: [{ - value: '', - text: this.state.dict['header.form.empty'] - }, { - value: 'table', - text: 'table' - }, { - value: 'bar-chart', - text: 'bar-chart' - }, { - value: 'pie-chart', - text: 'pie-chart' - }, { - value: 'line-chart', - text: 'line-chart' - }] - }, - { - type: 'select', - key: 'supMenu', - label: this.state.dict['header.form.supTab'], - initVal: supMenu, - required: false, - options: menus - }, - { - type: 'mutilselect', - key: 'equalTab', - label: this.state.dict['header.form.equalTab'], - tooltip: '濡傛灉瀛愭爣绛句腑鍚湁鍒锋柊鍚岀骇鏍囩鐨勬寜閽紝鍦ㄦ澶勬坊鍔犻渶瑕佸埛鏂扮殑鏍囩銆�', - initVal: equalTab, - required: false, - options: equalTabs - }, - { - type: 'text', - key: 'foreignKey', - label: '澶栭敭', - tooltip: '澶栭敭鏃ㄥ湪鏍囩椤典腑鎵ц榛樿鍑芥暟锛堟坊鍔狅級鏃讹紝鏇挎崲BID瀛楁', - initVal: card.foreignKey || '', - required: false - }, - { - type: 'radio', - key: 'searchPass', - label: '涓昏〃鎼滅储', - initVal: card.searchPass || 'false', - tooltip: '浣跨敤涓昏〃鎼滅储鏉′欢鏃讹紝涓昏〃鐨勬悳绱㈡潯浠朵細浼犲叆瀛愯〃涓��', - required: false, - options: [{ - value: 'true', - text: '浣跨敤' - }, { - value: 'false', - text: '涓嶄娇鐢�' - }] - } - ] - }) - } - - /** - * @description 鏍囩淇敼鍚庢彁浜や繚瀛� - */ - handleSubmit = () => { - const { config } = this.state - this.tabsFormRef.handleConfirm().then(res => { - let _tabgroup = config[res.groupId].map(item => { - if (item.uuid === res.uuid) { - return res - } else { - return item - } - }) - _tabgroup = _tabgroup.filter(item => !item.origin) - - this.setState({ - config: {...config, [res.groupId]: _tabgroup}, - modaltype: '' - }) - }) - } - - /** - * @description 鍙栨秷淇濆瓨锛屽鏋滃厓绱犱负鏂版坊鍏冪礌锛屽垯浠庡簭鍒椾腑鍒犻櫎 - */ - editModalCancel = () => { - const { config, card } = this.state - - if (card && card.focus) { - let _config = null - - let _tabgroup = config[card.groupId].filter(item => item.uuid !== card.uuid) - _config = {...config, [card.groupId]: _tabgroup} - - this.setState({ - card: null, - config: _config, - modaltype: '' - }) - } else { - this.setState({ - card: null, - modaltype: '' - }) - } - } - - deleteElement = (element) => { - const { config, thawButtons } = this.state - let _this = this - - confirm({ - content: `纭畾鍒犻櫎<<${element.card.label}>>鍚楋紵`, - okText: this.state.dict['model.confirm'], - cancelText: this.state.dict['header.cancel'], - onOk() { - let _config = null - - if (element.type === 'tabs') { - let _tabgroup = config[element.card.groupId].filter(item => { - if (item.uuid === element.card.uuid) { - return false - } else { - return true - } - }) - _config = {...config, [element.card.groupId]: _tabgroup} - } - - // 鍒犻櫎鎸夐挳鍏冪礌 - let _delActions = _this.state.delActions - if (element.type === 'action' || element.type === 'tabs') { - _delActions.push(element) - } - - _this.setState({ - config: _config, - delActions: _delActions, - thawButtons: thawButtons.filter(key => key !== element.card.uuid) - }) - }, - onCancel() {} - }) - } - - /** * @description 涓夌骇鑿滃崟鍒囨崲妯℃澘 */ changeTemplate = () => { @@ -506,48 +293,10 @@ this.menuformRef.handleConfirm().then(res => { if (config.isAdd) { - if (config.search[0] && config.search[0].origin) { - config.search = config.search.filter(item => !item.origin) - } - if (config.action[0] && config.action[0].origin) { - config.action = config.action.filter(item => !item.origin) - } - if (config.columns[0] && config.columns[0].origin) { - config.columns = config.columns.filter(item => !item.origin) - } - if (config.tabs[0] && config.tabs[0].origin) { - config.tabs = config.tabs.filter(item => !item.origin) - } - } - - let btnNames = config.action.map(item => item.label) - btnNames = Array.from(new Set(btnNames)) - if (btnNames.length < config.action.length) { - notification.warning({ - top: 92, - message: '鎸夐挳鍚嶇О涓嶅彲鐩稿悓锛�', - duration: 5 - }) - return - } - - let tabNames = [] - let tablength = 0 - config.tabgroups.forEach(group => { - config[group].forEach(tab => { - tabNames.push(tab.label) - }) - tablength += config[group].length - }) - tabNames = Array.from(new Set(tabNames)) - - if (tabNames.length < tablength) { - notification.warning({ - top: 92, - message: '鏍囩鍚嶇О涓嶅彲鐩稿悓锛�', - duration: 5 - }) - return + config.search = config.search.filter(item => !item.origin) + config.action = config.action.filter(item => !item.origin) + config.columns = config.columns.filter(item => !item.origin) + config.tabgroups[0].sublist = config.tabgroups[0].sublist.filter(item => !item.origin) } if (config.type === 'user') { // 浣跨敤宸叉湁鑿滃崟鏃讹紝榛樿娣诲姞鍏宠仈鏍囩id @@ -559,11 +308,10 @@ }) config.tabgroups.forEach(group => { - config[group] = config[group].map(tab => { + group.sublist = group.sublist.map(tab => { if (!tab.linkTab) { tab.linkTab = Utils.getuuid() } - return tab }) }) @@ -574,16 +322,9 @@ let _pageParam = {...menu.PageParam, OpenType: res.opentype} // 鏈缃暟鎹簮鎴栨爣绛句笉鍚堟硶鏃讹紝鍚敤鐘舵�佷负false - if (_config.setting.interType === 'inner' && !_config.setting.innerFunc && !_config.setting.dataresource) { + let vresult = this.verifyconfig(_config) + if (vresult !== true) { _config.enabled = false - } else if (!_config.setting.primaryKey) { - _config.enabled = false - } else if (_config.tabgroups.length > 1) { - _config.tabgroups.forEach(group => { - if (_config[group].length === 0) { - _config.enabled = false - } - }) } _config.funcs = [] // 椤甸潰鍙婂瓙椤甸潰瀛樺偍杩囩▼闆� @@ -638,10 +379,8 @@ } }) - _config.tabgroups.forEach(groupId => { - if (_config[groupId].length === 0) return - - _config[groupId].forEach(tab => { + _config.tabgroups.forEach(group => { + group.sublist.forEach(tab => { _config.funcs.push({ type: 'tab', subtype: 'tab', @@ -766,8 +505,8 @@ btntabs.forEach(item => { _LText.push(`select '${item.uuid}' as MenuID ,'${item.linkTab}' as Tabid,'${item.label}' as TabName ,'${item.sort * 10}' as Sort`) }) - _config.tabgroups.forEach(groupId => { - _config[groupId].forEach(item => { + _config.tabgroups.forEach(group => { + group.sublist.forEach(item => { _sort++ _LText.push(`select '${menu.MenuID}' as MenuID ,'${item.linkTab}' as Tabid,'${item.label}' as TabName ,'${_sort * 10}' as Sort`) }) @@ -1071,13 +810,27 @@ return _btn }) - _subconfig.tabgroups.forEach(_groupId => { - _subconfig[_groupId] = _subconfig[_groupId].map(_tab => { - _tab.uuid = Utils.getuuid() - - if (_tab.linkTab) { - _tab.linkTab = '' + + // 鍏煎宸叉湁缁撴瀯 + if (!_subconfig.tabgroups) { + _subconfig.tabgroups = [{ uuid: 'tabs', sublist: [] }] + } else if (typeof(_subconfig.tabgroups[0]) === 'string') { + let _tabgroups = [] + _subconfig.tabgroups.forEach(groupId => { + let _group = { + uuid: groupId, + sublist: fromJS(_subconfig[groupId]).toJS() } + delete _subconfig[groupId] + _tabgroups.push(_group) + }) + _subconfig.tabgroups = _tabgroups + } + + _subconfig.tabgroups.forEach(group => { + group.sublist = group.sublist.map(_tab => { + _tab.uuid = Utils.getuuid() + _tab.linkTab = Utils.getuuid() return _tab }) @@ -1316,107 +1069,44 @@ onEnabledChange = () => { const { config } = this.state + let _enabled = !config.enabled + let result = this.verifyconfig(config) + if (_enabled && result !== true) { + notification.warning({ + top: 92, + message: result, + duration: 5 + }) + return + } + + this.setState({ + config: {...config, enabled: _enabled} + }) + } + + /** + * @description 鏍¢獙閰嶇疆淇℃伅鐨勫悎娉曟�� + */ + verifyconfig = (config) => { let tabinvalid = true if (config.tabgroups.length > 1) { config.tabgroups.forEach(group => { - if (config[group].length === 0) { + if (group.sublist.length === 0) { tabinvalid = false } }) } if (config.setting.interType === 'inner' && !config.setting.innerFunc && !config.setting.dataresource) { - notification.warning({ - top: 92, - message: '鑿滃崟灏氭湭璁剧疆鏁版嵁婧愶紝涓嶅彲鍚敤锛�', - duration: 5 - }) + return '鑿滃崟灏氭湭璁剧疆鏁版嵁婧愶紝涓嶅彲鍚敤锛�' } else if (!config.setting.primaryKey) { - notification.warning({ - top: 92, - message: '鑿滃崟灏氭湭璁剧疆涓婚敭锛屼笉鍙惎鐢紒', - duration: 5 - }) + return '鑿滃崟灏氭湭璁剧疆涓婚敭锛屼笉鍙惎鐢紒' } else if (!tabinvalid) { - notification.warning({ - top: 92, - message: '鑿滃崟鏍囩椤佃缃敊璇紙澶氳鏍囩鍐咃紝琛屾爣绛句笉鍙负绌猴級锛屼笉鍙惎鐢紒', - duration: 5 - }) + return '鑿滃崟鏍囩椤佃缃敊璇紙瀛樺湪澶氳鏍囩鏃讹紝琛屾爣绛句笉鍙负绌猴級锛�' } else { - this.setState({ - config: {...config, enabled: !config.enabled} - }) + return true } - } - - /** - * @description 澧炲姞鏍囩椤靛垎缁� - */ - addTabGroup = () => { - let _this = this - let _config = fromJS(this.state.config).toJS() - - confirm({ - content: `纭畾鏂板缓鏍囩缁勫悧锛焋, - okText: this.state.dict['model.confirm'], - cancelText: this.state.dict['header.cancel'], - onOk() { - let newgroup = 'tabs' + Utils.getuuid() - - _config.tabgroups.push(newgroup) - _config[newgroup] = [] - - _this.setState({ - config: _config - }) - }, - onCancel() {} - }) - } - - /** - * @description 鍒犻櫎鏍囩椤靛垎缁� - */ - delTabGroup = (groupId) => { - let _this = this - let _config = fromJS(this.state.config).toJS() - - confirm({ - content: `纭畾鍒犻櫎鏍囩缁勫悧锛焋, - okText: this.state.dict['model.confirm'], - cancelText: this.state.dict['header.cancel'], - onOk() { - - _config.tabgroups = _config.tabgroups.filter(group => group !== groupId) - delete _config[groupId] - - _this.setState({ - config: _config - }) - }, - onCancel() {} - }) - } - - handleGroup = (index, type) => { - let config = fromJS(this.state.config).toJS() - - if (type === 'up') { - config.tabgroups.splice(index, 0, config.tabgroups.splice(index - 1, 1)[0]) - } else { - config.tabgroups.splice(index, 0, config.tabgroups.splice(index + 1, 1)[0]) - } - - this.setState({ - config: config - }) - - notification.success({ - top: 92, - message: '璋冩暣鎴愬姛', - duration: 2 - }) } /** @@ -1501,6 +1191,18 @@ } /** + * @description 鏇存柊鏍囩閰嶇疆淇℃伅 + */ + updatetabs = (config, delcards) => { + const { delActions } = this.state + + this.setState({ + config: config, + delActions: delcards ? [...delActions, ...delcards] : delActions + }) + } + + /** * @description 鏇存柊閰嶇疆淇℃伅 */ updateconfig = (config) => { @@ -1510,13 +1212,13 @@ } render () { - const { modaltype, activeKey, config } = this.state + const { activeKey, config, chartview } = this.state const confActions = config.action.filter(_action => !_action.origin && ['pop', 'popview', 'blank', 'tab'].includes(_action.OpenType)) let configTabs = [] config.tabgroups.forEach(group => { - configTabs.push(...config[group]) + configTabs.push(...group.sublist) }) return ( @@ -1660,73 +1362,64 @@ optionLibs={this.state.optionLibs} updatesearch={this.updatesearch} /> - <ActionComponent + <div className="chart-view" style={{position: 'relative'}}> + {/* 瑙嗗浘缁� */} + <ChartGroupComponent + config={config} + sysRoles={this.props.sysRoles} + updatechartgroup={this.updatechartgroup} + /> + {config.charts.map(item => { + if (!config.expand && chartview !== item.uuid) return '' + + if (item.chartType === 'table') { + return ( + <Col span={item.width || 24} key={item.uuid}> + {config.charts.length > 1 ? <p className="chart-title">{item.title}</p> : null} + <ActionComponent + type="main" + menu={{ MenuID: this.props.menu.MenuID, MenuName: this.props.menu.MenuName, MenuNo: this.props.menu.MenuNo }} + config={config} + tabs={this.state.tabviews} + menuformRef={this.menuformRef} + pasteContent={this.state.pasteContent} + usefulFields={this.props.permFuncField} + setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')} + updateaction={this.updateaction} + /> + <ColumnComponent + config={config} + menu={this.props.menu} + sysRoles={this.props.sysRoles} + pasteContent={this.state.pasteContent} + updatecolumn={this.updateconfig} + /> + </Col> + ) + } else { + return ( + <Col span={item.width} key={item.uuid}> + <ChartComponent + plot={item} + config={config} + plotchange={this.updateconfig} + /> + </Col> + ) + } + })} + </div> + {/* 鏍囩缁� */} + <TabsComponent type="main" - menu={{ MenuID: this.props.menu.MenuID, MenuName: this.props.menu.MenuName, MenuNo: this.props.menu.MenuNo }} config={config} tabs={this.state.tabviews} - menuformRef={this.menuformRef} - pasteContent={this.state.pasteContent} - usefulFields={this.props.permFuncField} - setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')} - updateaction={this.updateaction} + setSubConfig={(item) => this.setSubConfig(item, 'tab')} + updatetabs={this.updatetabs} /> - {/* 鏄剧ず鍒� */} - <ColumnComponent - config={config} - menu={this.props.menu} - sysRoles={this.props.sysRoles} - pasteContent={this.state.pasteContent} - updatecolumn={this.updateconfig} - /> - {/* 鏍囩缁� */} - {config.tabgroups.map((groupId, index) => { - return ( - <div key={index} className="tab-list"> - {index === 0 ? <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃爣绛鹃〉銆嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬爣绛鹃〉鎷栬嚦姝ゅ娣诲姞銆�"> - <Icon type="question-circle" /> - </Tooltip> : null} - {index !== (config.tabgroups.length - 1) ? - <Icon type="arrow-down" onClick={() => {this.handleGroup(index, 'down')}} /> : null - } - {index !== 0 ? <Icon type="arrow-up" onClick={() => {this.handleGroup(index, 'up')}} /> : null} - {index === 0 ? <Icon type="plus" onClick={this.addTabGroup} /> : null} - {index !== 0 ? <Icon type="delete" onClick={() => {this.delTabGroup(groupId)}} /> : null} - <TabDragElement - type="tabs" - groupId={groupId} - list={config[groupId]} - handleList={this.handleList} - handleMenu={this.handleTab} - deleteMenu={this.deleteElement} - doubleClickCard={(tab) => this.setSubConfig(tab, 'tab')} - placeholder={this.state.dict['header.form.tab.placeholder']} - /> - </div>) - })} </Card> </div> </DndProvider> - {/* 鏍囩缂栬緫 */} - <Modal - title={this.state.dict['header.modal.tabs.edit']} - visible={modaltype === 'tabs'} - width={750} - maskClosable={false} - onOk={this.handleSubmit} - onCancel={this.editModalCancel} - destroyOnClose - > - <TabForm - type="tabs" - dict={this.state.dict} - card={this.state.card} - tabs={this.state.tabviews} - formlist={this.state.formlist} - inputSubmit={this.handleSubmit} - wrappedComponentRef={(inst) => this.tabsFormRef = inst} - /> - </Modal> {/* 杩斿洖鏃舵湭淇濆瓨鎻愮ず */} <Modal bodyStyle={{textAlign: 'center', color: '#000000', fontSize: '16px'}} -- Gitblit v1.8.0