From 3cbad93c94c39730e45600efeabdfebcd424c2cc Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 14 一月 2021 19:00:19 +0800 Subject: [PATCH] 2021-01-14 --- src/menu/popview/index.jsx | 287 ++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 182 insertions(+), 105 deletions(-) diff --git a/src/menu/popview/index.jsx b/src/menu/popview/index.jsx index 471b71a..efb26ea 100644 --- a/src/menu/popview/index.jsx +++ b/src/menu/popview/index.jsx @@ -11,6 +11,7 @@ import Utils from '@/utils/utils.js' import zhCN from '@/locales/zh-CN/mob.js' import enUS from '@/locales/en-US/mob.js' +import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' import { modifyCustomMenu } from '@/store/action' @@ -19,13 +20,13 @@ const { Panel } = Collapse const { confirm } = Modal -const Header = asyncComponent(() => import('@/menu/header')) +const MenuForm = asyncComponent(() => import('./menuform')) const SourceWrap = asyncComponent(() => import('@/menu/modelsource')) const MenuShell = asyncComponent(() => import('@/menu/menushell')) const BgController = asyncComponent(() => import('@/menu/bgcontroller')) +const PasteController = asyncComponent(() => import('@/menu/pastecontroller')) const PaddingController = asyncComponent(() => import('@/menu/padcontroller')) -const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) -const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller')) +const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton')) const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) sessionStorage.setItem('isEditState', 'true') @@ -33,7 +34,6 @@ class MenuDesign extends Component { static propTpyes = { btn: PropTypes.object, - handleSave: PropTypes.func, handleBack: PropTypes.func } @@ -49,6 +49,7 @@ oriConfig: null, openEdition: '', config: null, + customComponents: [] } UNSAFE_componentWillMount() { @@ -59,6 +60,13 @@ }, () => { this.getMenuParam() }) + } + + componentDidMount () { + MKEmitter.addListener('delButtons', this.delButtons) + MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) + MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent) + this.updateCustomComponent() } shouldComponentUpdate (nextProps, nextState) { @@ -72,35 +80,98 @@ this.setState = () => { return } + MKEmitter.removeListener('delButtons', this.delButtons) + MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) + MKEmitter.removeListener('updateCustomComponent', this.updateCustomComponent) + } + + updateCustomComponent = () => { + Api.getSystemConfig({ + func: 's_get_custom_components', + typecharone: '' + }).then(res => { + let coms = [] + if (res.cus_list && res.cus_list.length > 0) { + res.cus_list.forEach(item => { + let config = '' + + try { + config = JSON.parse(window.decodeURIComponent(window.atob(item.long_param))) + } catch (e) { + console.warn('Parse Failure') + config = '' + } + + if (!config || !item.c_name) return + + coms.push({ + type: 'menu', + title: item.c_name, + url: item.images, + component: config.type, + subtype: config.subtype, + config + }) + }) + } + this.setState({customComponents: coms}) + }) + } + + updateComponentStyle = (parentId, keys, style) => { + const { config } = this.state + + if (config.uuid !== parentId) return + + let components = config.components.map(item => { + if (keys.includes(item.uuid)) { + item.style = {...item.style, ...style} + } + return item + }) + + this.setState({ + config: {...config, components: []} + }, () => { + this.setState({ + config: {...config, components: components} + }) + }) + } + + delButtons = (items) => { + this.setState({delButtons: [...this.state.delButtons, ...items]}) } closeView = () => { const { oriConfig, config } = this.state if (!config) { - window.close() + this.props.handleBack() return } let _config = fromJS(config).toJS() delete _config.tableFields + const _this = this if (!is(fromJS(oriConfig), fromJS(_config))) { confirm({ title: '閰嶇疆宸蹭慨鏀癸紝鏀惧純淇濆瓨鍚楋紵', content: '', onOk() { - window.close() + _this.props.handleBack() }, onCancel() {} }) } else { - window.close() + this.props.handleBack() } } getMenuParam = () => { - const { MenuId, MenuType } = this.state + const { btn } = this.props + const { MenuId } = this.state let param = { func: 'sPC_Get_LongParam', @@ -112,7 +183,7 @@ let config = null try { - config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) + config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null } catch (e) { console.warn('Parse Failure') config = null @@ -125,18 +196,20 @@ MenuID: MenuId, Template: 'CustomPage', enabled: false, + MenuName: btn.config.MenuName + '-' + btn.label, + MenuNo: '', tables: [], components: [], + viewType: 'popview', style: { backgroundColor: '#ffffff', backgroundImage: '', paddingTop: '16px', paddingBottom: '80px', paddingLeft: '16px', paddingRight: '16px' }, - MenuType: MenuType } } else { config.uuid = MenuId config.MenuID = MenuId - config.MenuType = config.MenuType || MenuType + config.Template = 'CustomPage' } this.setState({ @@ -145,7 +218,7 @@ openEdition: result.open_edition || '', }) - this.getRoleFields() + this.props.modifyCustomMenu(config) } else { notification.warning({ top: 92, @@ -167,6 +240,8 @@ item.subtabs.forEach(tab => { traversal(tab.components) }) + } else if (item.type === 'group') { + traversal(item.components) } else if (item.type === 'card' || (item.type === 'table' && item.subtype === 'tablecard')) { item.action && item.action.forEach(btn => { buttons.push(`select '${btn.uuid}' as menuid, '${item.name + '-' + btn.label}' as menuname, '${_sort * 10}' as Sort`) @@ -219,6 +294,8 @@ item.subtabs.forEach(tab => { tab.components = this.filterConfig(tab.components) }) + } else if (item.type === 'group') { + item.components = this.filterConfig(item.components) } else if (item.type === 'table' && item.subtype === 'normaltable') { item.search = item.search.filter(a => !a.origin) item.action = item.action.filter(a => !a.origin) @@ -229,10 +306,11 @@ } submitConfig = () => { - const { openEdition } = this.state + const { btn } = this.props + const { openEdition, delButtons } = this.state let config = fromJS(this.state.config).toJS() - if (config.cacheUseful === 'true' && !config.cacheTime) { + if ((config.cacheUseful === 'true' && !config.cacheTime) || !config.MenuNo || !config.MenuName) { notification.warning({ top: 92, message: '璇峰畬鍠勮彍鍗曞熀鏈俊鎭紒', @@ -250,25 +328,18 @@ let _config = fromJS(config).toJS() delete _config.tableFields + let _name = (btn.component.name ? btn.component.name + '-' : '') + btn.label + let param = { - func: 'sPC_TrdMenu_AddUpt', - FstID: _config.fstMenuId || '', - SndID: _config.parentId, - ParentID: _config.parentId, + func: 'sPC_ButtonParam_AddUpt', + ParentID: btn.config.uuid, MenuID: _config.uuid, MenuNo: _config.MenuNo || '', - EasyCode: _config.easyCode || '', Template: 'CustomPage', - MenuName: _config.MenuName || '', - PageParam: JSON.stringify({Template: 'CustomPage', OpenType: 'newtab'}), - LongParam: window.btoa(window.encodeURIComponent(JSON.stringify(_config))), - LText: '', - LTexttb: '' + MenuName: _name, + PageParam: JSON.stringify({Template: 'CustomPage'}), + LongParam: window.btoa(window.encodeURIComponent(JSON.stringify(_config))) } - - param.LText = Utils.formatOptions(param.LText) - param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') - param.secretkey = Utils.encrypt(param.LText, param.timestamp) if (openEdition) { // 鐗堟湰绠$悊 param.open_edition = openEdition @@ -276,7 +347,7 @@ let btnParam = { // 娣诲姞鑿滃崟鎸夐挳 func: 'sPC_Button_AddUpt', - Type: 40, // 娣诲姞鑿滃崟涓嬬殑鎸夐挳type涓�40锛屾寜閽笅鐨勬寜閽畉ype涓�60 + Type: 60, // 娣诲姞鑿滃崟涓嬬殑鎸夐挳type涓�40锛屾寜閽笅鐨勬寜閽畉ype涓�60 ParentID: _config.uuid, MenuNo: _config.MenuNo, Template: 'CustomPage', @@ -295,11 +366,36 @@ menuloading: true }, () => { new Promise(resolve => { - resolve(true) + if (delButtons.length === 0) { + resolve({ + status: true + }) + } else { + let _param = { + func: 'sPC_MainMenu_Del', + MenuID: delButtons.join(',') + } + Api.getSystemConfig(_param).then(res => { + resolve(res) + }) + } }).then(res => { - if (!res) return - - return Api.getSystemConfig(param) + if (res.status) { + this.setState({ + delButtons: [] + }) + return Api.getSystemConfig(param) + } else { + this.setState({ + menuloading: false + }) + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + return false + } }).then(res => { if (!res) return @@ -355,37 +451,6 @@ }) } }) - }) - } - - getRoleFields = () => { - Api.getSystemConfig({func: 'sPC_Get_Roles_sModular'}).then(res => { - if (res.status) { - let _permFuncField = [] - let _sysRoles = [] - - if (res.Roles && res.Roles.length > 0) { - _sysRoles = res.Roles.map(role => { - return { - uuid: Utils.getuuid(), - value: role.RoleID, - text: role.RoleName - } - }) - } - - if (res.sModular && res.sModular.length > 0) { - res.sModular.forEach(field => { - if (field.ModularNo) { - _permFuncField.push(field.ModularNo) - } - }) - _permFuncField = _permFuncField.sort() - } - - sessionStorage.setItem('sysRoles', JSON.stringify(_sysRoles)) - sessionStorage.setItem('permFuncField', JSON.stringify(_permFuncField)) - } }) } @@ -461,51 +526,63 @@ this.props.modifyCustomMenu(config) } + insert = (item) => { + let config = fromJS(this.state.config).toJS() + + config.components.push(item) + + this.setState({config}) + this.props.modifyCustomMenu(config) + } + render () { - const { activeKey, MenuType, dict, config, menuloading } = this.state + const { btn } = this.props + const { activeKey, MenuType, dict, config, menuloading, customComponents } = this.state return ( - <div className="pc-menu-view" id="view"> - <Header /> - <DndProvider backend={HTML5Backend}> - <div className="menu-body"> - <div className="menu-setting"> - <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> - {/* 鍩烘湰淇℃伅 */} - <Panel header={dict['mob.basemsg']} key="basedata"> - {/* 琛ㄥ悕娣诲姞 */} - {config ? <TableComponent config={config} updatetable={this.updatetable}/> : null} - </Panel> - {/* 缁勪欢娣诲姞 */} - <Panel header={dict['mob.component']} key="component"> - <SourceWrap MenuType={MenuType} /> - </Panel> - <Panel header={'鑳屾櫙'} key="background"> - {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} - </Panel> - <Panel header={'鍐呰竟璺�'} key="padding"> - {config ? <PaddingController config={config} updateConfig={this.updateConfig} /> : null} - </Panel> - </Collapse> - </div> - <div className={'menu-view ' + (menuloading ? 'saving' : '')}> - <Card title={ - <div> {config && config.MenuName} </div> - } bordered={false} extra={ - <div> - {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null} - <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> - <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> - </div> - } style={{ width: '100%' }}> - {config && config.components ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} - </Card> - </div> + <DndProvider backend={HTML5Backend}> + <div className="menu-body"> + <div className="menu-setting"> + <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> + {/* 鍩烘湰淇℃伅 */} + <Panel header={dict['mob.basemsg']} key="basedata"> + {/* 鑿滃崟淇℃伅 */} + {config ? <MenuForm dict={dict} config={config} btn={btn} updateConfig={this.updateConfig}/> : null} + {/* 琛ㄥ悕娣诲姞 */} + {config ? <TableComponent config={config} updatetable={this.updatetable}/> : null} + </Panel> + {/* 缁勪欢娣诲姞 */} + <Panel header={dict['mob.component']} key="component"> + <SourceWrap MenuType={MenuType} /> + </Panel> + {customComponents && customComponents.length ? <Panel header="鑷畾涔夌粍浠�" key="cuscomponent"> + <SourceWrap components={customComponents} MenuType={MenuType} /> + </Panel> : null} + <Panel header={'鑳屾櫙'} key="background"> + {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} + </Panel> + <Panel header={'鍐呰竟璺�'} key="padding"> + {config ? <PaddingController config={config} updateConfig={this.updateConfig} /> : null} + </Panel> + </Collapse> </div> - </DndProvider> - <StyleController /> - <ModalController /> - </div> + <div className={'menu-view ' + (menuloading ? 'saving' : '')}> + <Card title={ + <div> {config && config.MenuName} </div> + } bordered={false} extra={ + <div> + <StyleCombControlButton menu={config} /> + <PasteController type="menu" Tab={null} insert={this.insert} /> + {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null} + <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> + <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> + </div> + } style={{ width: '100%' }}> + {config && config.components ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} + </Card> + </div> + </div> + </DndProvider> ) } } -- Gitblit v1.8.0