From f59a500d24291d7f54b71dcca939a2a23dedca7c Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 18 六月 2020 17:52:03 +0800 Subject: [PATCH] 2020-06-18 --- src/templates/comtableconfig/index.jsx | 775 ++++++++++++++++++++--------------------------------------- 1 files changed, 267 insertions(+), 508 deletions(-) diff --git a/src/templates/comtableconfig/index.jsx b/src/templates/comtableconfig/index.jsx index 6a548b0..8f6904e 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' @@ -14,28 +14,25 @@ import { getMainMenuForm } from '@/templates/zshare/formconfig' import asyncComponent from '@/utils/asyncComponent' -import TableComponent from '@/templates/sharecomponent/tablecomponent' -import FieldsComponent from '@/templates/sharecomponent/fieldscomponent' -// 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 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' const { Panel } = Collapse const { confirm } = Modal -const CommonDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS const SettingComponent = asyncComponent(() => import('@/templates/sharecomponent/settingcomponent')) +const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) +const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) +const ChartGroupComponent = asyncComponent(() => import('@/templates/sharecomponent/chartgroupcomponent')) +const ChartComponent = asyncComponent(() => import('@/templates/sharecomponent/chartcomponent')) +const CardComponent = asyncComponent(() => import('@/templates/sharecomponent/cardcomponent')) +const TabsComponent = asyncComponent(() => import('@/templates/sharecomponent/tabscomponent')) class ComTableConfig extends Component { static propTpyes = { @@ -46,14 +43,12 @@ } state = { - dict: CommonDict, // 瀛楀吀 + dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, config: null, // 椤甸潰閰嶇疆 tableFields: [], // 琛ㄦ牸鏄剧ず鍒� fields: null, // 鎼滅储鏉′欢鍙婃樉绀哄垪锛屽彲閫夊瓧娈� menuformlist: null, // 鍩烘湰淇℃伅琛ㄥ崟瀛楁 formlist: null, // 鎼滅储鏉′欢銆佹寜閽�佹樉绀哄垪琛ㄥ崟瀛楁 - modaltype: '', // 妯℃�佹绫诲瀷锛屾帶鍒舵ā鎬佹鏄剧ず - card: null, // 缂栬緫鍏冪礌 menuloading: false, // 鑿滃崟淇濆瓨涓� menucloseloading: false, // 鑿滃崟鍏抽棴鏃讹紝閫夋嫨淇濆瓨 loading: false, // 鍔犺浇涓紝椤甸潰spin @@ -67,8 +62,9 @@ optionLibs: null, // 鑷畾涔変笅鎷夐�夐」搴� thawButtons: [], // 宸查�夋嫨瑕佽В鍐荤殑鎸夐挳 activeKey: '0', // 榛樿灞曞紑鍩烘湰淇℃伅 - sqlVerifing: false, // sql楠岃瘉 - pasteContent: null // 绮樿创閰嶇疆淇℃伅 + chartview: null, // 褰撳墠瑙嗗浘 + pasteContent: null, // 绮樿创閰嶇疆淇℃伅 + openEdition: '' // 缂栬緫鐗堟湰鏍囪锛岄槻姝㈠浜烘搷浣� } /** @@ -85,7 +81,7 @@ if (!_LongParam) { _config = fromJS(Source.baseConfig).toJS() if (!menu.isSubtable) { // 涓嶆槸閫夋嫨涓诲瓙琛ㄦ椂锛岄殣钘忔爣绛鹃〉 - _config.tabs = [] + _config.tabgroups = [{ uuid: 'tabs', sublist: [] }] } _config.isAdd = true } else { @@ -107,12 +103,76 @@ }) } - // 閰嶇疆榛樿鍊硷紝鍏煎 - _config.tabs = _config.tabs || [] - _config.tabgroups = _config.tabgroups || ['tabs'] - _config.setting.subtabs = _config.setting.subtabs || [] - _config.Template = 'CommonTable' - _config.easyCode = _config.easyCode || '' + if (!_config.version || _config.version < '1.0') { + // 閰嶇疆榛樿鍊硷紝鍏煎 + _config.version = '1.0' + _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: [] + }] + } else { + _config.charts.forEach(card => { + if (card.chartType === 'card') { + card.details = card.details.map(_cell => { + if (!_cell.fontSize) { + _cell.fontSize = 14 + } + if (!_cell.width) { + _cell.width = 100 + } else if (_cell.width === 'helf') { + _cell.width = 50 + } else if (_cell.width === 'third') { + _cell.width = 33 + } + + if (_cell.bold === 'true') { + _cell.fontWeight = 'normal' + } + + if (!_cell.height) { + _cell.height = 1 + } + + return _cell + }) + + if (card.widthType === 'ratio' && card.avatar && card.avatar.widthType !== 'ratio') { + card.avatar.widthType = 'ratio' + card.avatar.width = 32 + } + } + }) + } + } let _oriActions = [] if (_config.type === 'user') { @@ -143,7 +203,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,7 +216,9 @@ } this.setState({ + chartview: _config.charts[0].uuid, config: _config, + openEdition: menu.open_edition || '', activeKey: menu.activeKey || '0', optionLibs: optionLibs, originActions: _oriActions, @@ -224,253 +286,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 = () => { - this.props.handleView({tabview: 'template'}) - } - getFuncNames = (data, funcNames, tableNames) => { data.forEach(item => { if (item.subfuncs) { @@ -500,54 +315,16 @@ */ submitConfig = () => { const { menu } = this.props - const { originMenu, delActions, thawButtons } = this.state + const { originMenu, delActions, thawButtons, openEdition } = this.state let config = fromJS(this.state.config).toJS() 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 +336,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 +350,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 +407,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 +533,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`) }) @@ -809,6 +576,10 @@ param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' param.secretkey = Utils.encrypt(param.LText, param.timestamp) + if (openEdition) { // 鐗堟湰绠$悊 + param.open_edition = openEdition + } + // 鏈夋寜閽垨鏍囩鍒犻櫎鏃讹紝鍏堣繘琛屽垹闄ゆ搷浣� // 鍒犻櫎鎴愬姛鍚庯紝淇濆瓨椤甸潰閰嶇疆 new Promise(resolve => { @@ -816,7 +587,7 @@ let deffers = delActions.map(item => { let _param = { func: 'sPC_MainMenu_Del', - MenuID: item.card.uuid + MenuID: item.card ? item.card.uuid : item.uuid } if (item.type === 'action') { @@ -923,6 +694,7 @@ this.setState({ config: _config, + openEdition: response.open_edition || '', originMenu: { ...originMenu, LongParam: _config, @@ -934,7 +706,7 @@ supMenuList: _supMenuList } }) - + this.props.reloadmenu() this.submitAction(btnParam, tabParam) @@ -944,6 +716,8 @@ delete localParam.PageParam delete localParam.Template delete localParam.Sort + delete localParam.EasyCode + delete localParam.open_edition Api.getLocalConfig(localParam) } else { @@ -1071,13 +845,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 }) @@ -1189,7 +977,7 @@ */ setSubConfig = (item, type) => { const { menu } = this.props - const { config, originMenu, optionLibs, activeKey } = this.state + const { config, originMenu, optionLibs, activeKey, openEdition } = this.state if (!originMenu.MenuID) { // menuID涓嶅瓨鍦ㄦ椂锛屼负鏂板缓鑿滃崟锛屾彁绀鸿彍鍗曞皻鏈繚瀛� notification.warning({ @@ -1241,8 +1029,8 @@ isbutton = false } - // 淇濆瓨褰撳墠鎵撳紑椤电 - _originMenu.activeKey = activeKey + _originMenu.activeKey = activeKey // 淇濆瓨褰撳墠鎵撳紑椤电 + _originMenu.open_edition = openEdition // 鏇存柊鐗堟湰鍙� let param = { optionLibs: optionLibs, @@ -1256,6 +1044,11 @@ editAction: isbutton ? item : '', subConfig: '', tabview: _view + } + + // 褰撳瓙琛ㄤ娇鐢ㄤ富椤垫悳绱㈡潯浠舵椂锛屽皢涓婚〉鎼滅储鍚戜笅浼犻�� + if (param.editTab && param.editTab.searchPass === 'true') { + param.editTab.mainsearch = fromJS(_config.search).toJS() } this.setState({ @@ -1288,6 +1081,14 @@ param.subConfig = _LongParam } + if (param.editTab) { + param.editTab.open_edition = res.open_edition || '' + } else if (param.editAction) { + param.editAction.open_edition = res.open_edition || '' + } else if (param.btnTab) { + param.btnTab.open_edition = res.open_edition || '' + } + this.props.handleView(param) } else { this.setState({ @@ -1316,107 +1117,62 @@ 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 - }) + let charterr = '' + config.charts.forEach(chart => { + if (!charterr && ['line', 'bar', 'pie'].includes(chart.chartType) && !chart.Xaxis) { + charterr = '鍥捐〃' + (chart.title ? '銆�' + chart.title + '銆�' : '') + '鍧愭爣杞存湭璁剧疆锛屼笉鍙惎鐢紒' + } + }) + + let hasKey = false + config.columns.forEach(col => { + if (config.setting.primaryKey === col.field) { + hasKey = true + } + }) + + if (config.setting.interType === 'inner' && !config.setting.innerFunc && config.setting.default !== 'false' && !config.setting.dataresource) { + return '鑿滃崟灏氭湭璁剧疆鏁版嵁婧愶紝涓嶅彲鍚敤锛�' } else if (!config.setting.primaryKey) { - notification.warning({ - top: 92, - message: '鑿滃崟灏氭湭璁剧疆涓婚敭锛屼笉鍙惎鐢紒', - duration: 5 - }) + return '鑿滃崟灏氭湭璁剧疆涓婚敭锛屼笉鍙惎鐢紒' + } else if (!hasKey) { + return '鏄剧ず鍒椾腑涓嶅瓨鍦ㄤ富閿瓧娈碉紝涓嶅彲鍚敤锛�' } else if (!tabinvalid) { - notification.warning({ - top: 92, - message: '鑿滃崟鏍囩椤佃缃敊璇紙澶氳鏍囩鍐咃紝琛屾爣绛句笉鍙负绌猴級锛屼笉鍙惎鐢紒', - duration: 5 - }) + return '鑿滃崟鏍囩椤佃缃敊璇紙瀛樺湪澶氳鏍囩鏃讹紝琛屾爣绛句笉鍙负绌猴級锛�' + } else if (charterr) { + return charterr } 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 +1257,18 @@ } /** + * @description 鏇存柊鏍囩閰嶇疆淇℃伅 + */ + updatetabs = (config, delcards) => { + const { delActions } = this.state + + this.setState({ + config: config, + delActions: delcards ? [...delActions, ...delcards] : delActions + }) + } + + /** * @description 鏇存柊閰嶇疆淇℃伅 */ updateconfig = (config) => { @@ -1510,13 +1278,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 ( @@ -1537,16 +1305,13 @@ <TableComponent config={config} containerId="main-basedata" - selectedTables={config.tables || []} updatetable={this.updatetable} /> </Panel> {/* 鎼滅储鏉′欢娣诲姞 */} <Panel header={this.state.dict['header.menu.search']} key="1"> <div className="search-element"> - {Source.searchItems.map((item, index) => { - return (<SourceElement key={index} content={item}/>) - })} + {Source.searchItems.map((item, index) => (<SourceElement key={index} content={item}/>))} </div> <FieldsComponent config={config} @@ -1558,9 +1323,7 @@ {/* 鎸夐挳娣诲姞 */} <Panel header={this.state.dict['header.menu.action']} key="2"> <div className="search-element"> - {Source.actionItems.map((item, index) => { - return (<SourceElement key={index} content={item}/>) - })} + {Source.actionItems.map((item, index) => (<SourceElement key={index} content={item}/>))} </div> <div className="config-btn"> {confActions.length > 0 ? @@ -1588,9 +1351,7 @@ {/* 娣诲姞鏄剧ず鍒� */} <Panel header={this.state.dict['header.menu.column']} key="3"> <div className="search-element"> - {Source.columnItems.map((item, index) => { - return (<SourceElement key={index} content={item}/>) - })} + {Source.columnItems.map((item, index) => (<SourceElement key={index} content={item}/>))} </div> <FieldsComponent config={config} @@ -1602,9 +1363,7 @@ {/* 娣诲姞鏍囩 */} <Panel header={this.state.dict['header.menu.tab']} key="4"> <div className="search-element"> - {Source.tabItems.map((item, index) => { - return (<SourceElement key={index} content={item}/>) - })} + {Source.tabItems.map((item, index) => (<SourceElement key={index} content={item}/>))} </div> {configTabs.length > 0 ? <p className="config-btn-title"> @@ -1639,7 +1398,6 @@ <div> <EditComponent dict={this.state.dict} type="maintable" config={this.state.config} MenuID={this.props.menu.MenuID} thawButtons={this.state.thawButtons} refresh={this.editConfig}/> <Switch className="big" checkedChildren="鍚�" unCheckedChildren="鍋�" checked={this.state.config.enabled} onChange={this.onEnabledChange} /> - <Button type="primary" onClick={this.changeTemplate}>{this.state.dict['header.menu.template.change']}</Button> <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['header.save']}</Button> <Button onClick={this.cancelConfig}>{this.state.dict['header.return']}</Button> </div> @@ -1660,73 +1418,73 @@ optionLibs={this.state.optionLibs} updatesearch={this.updatesearch} /> - <ActionComponent - type="main" - menu={{ MenuID: this.props.menu.MenuID, MenuName: this.props.menu.MenuName, MenuNo: this.props.menu.MenuNo }} + <div className="chart-view" style={{position: 'relative'}}> + {/* 瑙嗗浘缁� 鏉冮檺 浼氬憳绛夌骇20+ */} + {this.props.memberLevel >= 20 ? <ChartGroupComponent + config={config} + sysRoles={this.props.sysRoles} + updatechartgroup={this.updatechartgroup} + /> : null} + {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 && item.title ? <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 if (item.chartType === 'card') { + return ( + <Col span={item.width} key={item.uuid}> + <CardComponent + card={item} + config={config} + plotchange={this.updateconfig} + /> + </Col> + ) + } else { + return ( + <Col span={item.width} key={item.uuid}> + <ChartComponent + plot={item} + config={config} + plotchange={this.updateconfig} + /> + </Col> + ) + } + })} + </div> + {/* 鏍囩缁� */} + <TabsComponent 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'}} @@ -1752,7 +1510,8 @@ const mapStateToProps = (state) => { return { sysRoles: state.sysRoles, - permFuncField: state.permFuncField + permFuncField: state.permFuncField, + memberLevel: state.memberLevel } } -- Gitblit v1.8.0