| | |
| | | import antdEnUS from 'antd/es/locale/en_US' |
| | | import antdZhCN from 'antd/es/locale/zh_CN' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import MenuUtils from '@/menu/utils/menuUtils.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import { modifyCustomMenu } from '@/store/action' |
| | | |
| | |
| | | const PasteController = asyncComponent(() => import('@/menu/pastecontroller')) |
| | | const PaddingController = asyncComponent(() => import('@/menu/padcontroller')) |
| | | const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) |
| | | const StyleCombController = asyncComponent(() => import('@/menu/stylecombcontroller')) |
| | | const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton')) |
| | | const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller')) |
| | | const PopviewController = asyncComponent(() => import('@/menu/popview')) |
| | | const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) |
| | | |
| | | sessionStorage.setItem('isEditState', 'true') |
| | | sessionStorage.setItem('editMenuType', 'menu') // 编辑菜单类型 |
| | | document.body.className = '' |
| | | window.GLOB.UserComponentMap = new Map() // 缓存用户自定义组件 |
| | | |
| | | class MenuDesign extends Component { |
| | | state = { |
| | |
| | | tableFields: [], |
| | | delButtons: [], |
| | | copyButtons: [], |
| | | thawButtons: [], |
| | | activeKey: 'basedata', |
| | | menuloading: false, |
| | | oriConfig: null, |
| | | openEdition: '', |
| | | config: null, |
| | | popBtn: null, // 弹窗标签页 |
| | | visible: false |
| | | visible: false, |
| | | customComponents: [] |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('delButtons', this.delButtons) |
| | | MKEmitter.addListener('thawButtons', this.thawButtons) |
| | | MKEmitter.addListener('copyButtons', this.copyButtons) |
| | | MKEmitter.addListener('changePopview', this.initPopview) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent) |
| | | this.updateCustomComponent() |
| | | } |
| | | |
| | | /** |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('delButtons', this.delButtons) |
| | | MKEmitter.removeListener('thawButtons', this.thawButtons) |
| | | MKEmitter.removeListener('copyButtons', this.copyButtons) |
| | | MKEmitter.removeListener('changePopview', this.initPopview) |
| | | 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 |
| | | |
| | | window.GLOB.UserComponentMap.set(item.c_id, item.c_name) |
| | | coms.push({ |
| | | uuid: item.c_id, |
| | | type: 'menu', |
| | | title: item.c_name, |
| | | url: item.images, |
| | | component: config.type, |
| | | subtype: config.subtype, |
| | | width: config.width || 24, |
| | | 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]}) |
| | | const { copyButtons } = this.state |
| | | |
| | | this.setState({ |
| | | delButtons: [...this.state.delButtons, ...items], |
| | | copyButtons: copyButtons.filter(item => !items.includes(item.uuid)) |
| | | }) |
| | | } |
| | | |
| | | copyButtons = (items) => { |
| | | this.setState({copyButtons: [...this.state.copyButtons, ...items]}) |
| | | } |
| | | |
| | | thawButtons = (item) => { |
| | | this.setState({thawButtons: [...this.state.thawButtons, item]}) |
| | | } |
| | | |
| | | initPopview = (card, btn) => { |
| | |
| | | btn.config = _config |
| | | btn.component = card |
| | | |
| | | sessionStorage.setItem('editMenuType', 'popview') // 编辑弹窗标签 |
| | | |
| | | this.setState({popBtn: btn, visible: true}) |
| | | } |
| | | |
| | | handleBack = () => { |
| | | this.setState({popBtn: null, delButtons: []}, () => { |
| | | this.setState({popBtn: null, delButtons: [], copyButtons: []}, () => { |
| | | sessionStorage.setItem('editMenuType', 'menu') |
| | | this.props.modifyCustomMenu(this.state.config) |
| | | this.setState({visible: false}) |
| | | }) |
| | | } |
| | |
| | | } else { |
| | | config.uuid = MenuId |
| | | config.MenuID = MenuId |
| | | config.Template = 'CustomPage' |
| | | } |
| | | |
| | | if (MenuType === 'billPrint') { |
| | |
| | | openEdition: result.open_edition || '', |
| | | }) |
| | | |
| | | this.props.modifyCustomMenu(config) |
| | | this.getRoleFields() |
| | | } else { |
| | | notification.warning({ |
| | |
| | | } |
| | | |
| | | submitConfig = () => { |
| | | const { openEdition, MenuType, delButtons } = this.state |
| | | const { openEdition, MenuType, delButtons, copyButtons, thawButtons } = this.state |
| | | let config = fromJS(this.state.config).toJS() |
| | | |
| | | if (MenuType === 'billPrint' && (!config.firstCount || !config.everyPCount)) { |
| | |
| | | LText: [] |
| | | } |
| | | |
| | | let btnIds = '' // 用于复制按钮的过滤 |
| | | if (MenuType !== 'billPrint') { |
| | | btnParam.LText = this.getMenuMessage() |
| | | btnParam.LText = btnParam.LText.join(' union all ') |
| | | |
| | | btnIds = btnParam.LText |
| | | |
| | | btnParam.LText = Utils.formatOptions(btnParam.LText) |
| | | btnParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | | btnParam.secretkey = Utils.encrypt(btnParam.LText, btnParam.timestamp) |
| | |
| | | menuloading: true |
| | | }, () => { |
| | | new Promise(resolve => { |
| | | if (MenuType === 'billPrint') { |
| | | if (MenuType === 'billPrint') { // 打印生成页面效果图 |
| | | html2canvas(document.getElementById('menu-shell-inner')).then(canvas => { |
| | | let img = canvas.toDataURL('image/png') // 获取生成的图片 |
| | | Api.fileuploadbase64(img, 'cloud').then(result => { |
| | |
| | | message: response.message, |
| | | duration: 5 |
| | | }) |
| | | this.setState({ |
| | | menuloading: false |
| | | }) |
| | | resolve(false) |
| | | } |
| | | }) |
| | |
| | | message: result.ErrMesg, |
| | | duration: 5 |
| | | }) |
| | | this.setState({ |
| | | menuloading: false |
| | | }) |
| | | resolve(false) |
| | | } |
| | | }) |
| | |
| | | } else { |
| | | resolve(true) |
| | | } |
| | | }).then(res => { |
| | | }).then(res => { // 按钮删除 |
| | | if (!res) return |
| | | |
| | | if (delButtons.length === 0) { |
| | |
| | | } |
| | | return Api.getSystemConfig(_param) |
| | | } |
| | | }).then(res => { |
| | | }).then(res => { // 按钮解除冻结 |
| | | if (!res) return |
| | | |
| | | if (res.status) { |
| | | this.setState({ |
| | | delButtons: [] |
| | | }) |
| | | return Api.getSystemConfig(param) |
| | | } else { |
| | | this.setState({ |
| | | menuloading: false |
| | | }) |
| | | if (!res.status) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | |
| | | }) |
| | | return false |
| | | } |
| | | }).then(res => { |
| | | |
| | | let ids = thawButtons.filter(item => btnIds.indexOf(item) !== -1) |
| | | if (ids.length === 0) { |
| | | return { |
| | | status: true |
| | | } |
| | | } else { |
| | | return Api.getSystemConfig({ |
| | | func: 'sPC_MainMenu_ReDel', |
| | | MenuID: ids.join(',') |
| | | }) |
| | | } |
| | | }).then(res => { // 页面保存 |
| | | if (!res) return |
| | | |
| | | if (res.status) { |
| | | return Api.getSystemConfig(param) |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | | duration: 5 |
| | | }) |
| | | return false |
| | | } |
| | | }).then(res => { // 页面按钮关系保存 |
| | | if (!res) return |
| | | |
| | | if (res.status) { |
| | |
| | | } |
| | | } |
| | | } else { |
| | | this.setState({ |
| | | menuloading: false |
| | | }) |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | |
| | | }) |
| | | return false |
| | | } |
| | | }).then(res => { |
| | | }).then(res => { // 按钮复制 |
| | | if (!res) return |
| | | |
| | | if (res.status) { |
| | | if (!res.status) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | | duration: 5 |
| | | }) |
| | | return false |
| | | } |
| | | |
| | | if (copyButtons.length === 0) { |
| | | return { |
| | | status: true |
| | | } |
| | | } else { |
| | | return new Promise(resolve => { |
| | | let deffers = copyButtons.map(item => { |
| | | return new Promise(resolve => { |
| | | if (btnIds.indexOf(item.uuid) === -1) { // 复制的按钮已删除 |
| | | resolve({ |
| | | status: true |
| | | }) |
| | | return |
| | | } |
| | | |
| | | Api.getSystemConfig({ |
| | | func: 'sPC_Get_LongParam', |
| | | MenuID: item.$originUuid |
| | | }).then(result => { |
| | | if (result.status) { |
| | | let _conf = '' |
| | | |
| | | try { |
| | | _conf = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : '' |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | _conf = '' |
| | | } |
| | | |
| | | if (_conf) { |
| | | _conf.components = MenuUtils.resetConfig(_conf.components) |
| | | _conf.uuid = item.uuid |
| | | _conf.MenuID = item.uuid |
| | | _conf.Template = 'CustomPage' |
| | | } else { |
| | | resolve({ |
| | | status: true |
| | | }) |
| | | return |
| | | } |
| | | |
| | | let _param = { |
| | | func: 'sPC_ButtonParam_AddUpt', |
| | | ParentID: _config.uuid, |
| | | MenuID: item.uuid, |
| | | MenuNo: '', |
| | | Template: 'CustomPage', |
| | | MenuName: item.label, |
| | | PageParam: JSON.stringify({Template: 'CustomPage'}), |
| | | LongParam: window.btoa(window.encodeURIComponent(JSON.stringify(_conf))) |
| | | } |
| | | |
| | | Api.getSystemConfig(_param).then(response => { |
| | | resolve(response) |
| | | }) |
| | | } |
| | | }) |
| | | }) |
| | | }) |
| | | Promise.all(deffers).then(result => { |
| | | let error = null |
| | | result.forEach(response => { |
| | | if (!response.status) { |
| | | error = response |
| | | } |
| | | }) |
| | | |
| | | if (error) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: error.message, |
| | | duration: 5 |
| | | }) |
| | | resolve(false) |
| | | } else { |
| | | resolve({ |
| | | status: true |
| | | }) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | }).then(res => { |
| | | if (res && res.status) { |
| | | this.setState({ |
| | | delButtons: [], |
| | | copyButtons: [], |
| | | thawButtons: [], |
| | | menuloading: false, |
| | | config: {...config, components: []} |
| | | }, () => { |
| | |
| | | } else { |
| | | this.setState({ |
| | | menuloading: false |
| | | }) |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | | duration: 5 |
| | | }) |
| | | } |
| | | }) |
| | |
| | | } |
| | | |
| | | render () { |
| | | const { activeKey, MenuType, popBtn, visible, dict, MenuId, config, ParentId, MenuName, MenuNo, menuloading } = this.state |
| | | const { activeKey, MenuType, popBtn, visible, dict, MenuId, config, ParentId, MenuName, MenuNo, menuloading, customComponents } = this.state |
| | | |
| | | return ( |
| | | <ConfigProvider locale={_locale}> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | </DndProvider> : null} |
| | | {popBtn && visible ? <PopviewController btn={popBtn} handleBack={this.handleBack}/> : null} |
| | | <StyleController /> |
| | | <StyleCombController /> |
| | | <ModalController /> |
| | | </div> |
| | | </ConfigProvider> |