| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Modal, notification, Button } from 'antd' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import DevUtils from '@/utils/devutils.js' |
| | | import Utils, { FuncUtils } from '@/utils/utils.js' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import { getActionForm } from './formconfig' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | | import ActionForm from './actionform' |
| | | import VerifyCard from '@/templates/zshare/verifycard' |
| | | import MenuUtils from '@/utils/utils-custom.js' |
| | | import CreateFunc from '@/templates/zshare/createfunc' |
| | | import VerifyPrint from '@/templates/sharecomponent/actioncomponent/verifyprint' |
| | | import VerifyExcelIn from '@/templates/sharecomponent/actioncomponent/verifyexcelin' |
| | | import VerifyExcelOut from '@/templates/sharecomponent/actioncomponent/verifyexcelout' |
| | | import DragElement from './dragaction' |
| | | import './index.scss' |
| | | |
| | | const { confirm } = Modal |
| | | const VerifyCard = asyncSpinComponent(() => import('@/templates/zshare/verifycard')) |
| | | const VerifyPrint = asyncSpinComponent(() => import('@/templates/sharecomponent/actioncomponent/verifyprint')) |
| | | const VerifyExcelIn = asyncSpinComponent(() => import('@/templates/sharecomponent/actioncomponent/verifyexcelin')) |
| | | const VerifyExcelOut = asyncSpinComponent(() => import('@/templates/sharecomponent/actioncomponent/verifyexcelout')) |
| | | |
| | | class ActionComponent extends Component { |
| | | static propTpyes = { |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | appType: sessionStorage.getItem('appType'), |
| | | card: null, // 编辑中元素 |
| | | formlist: null, // 表单信息 |
| | | actionlist: null, // 按钮组 |
| | |
| | | * @description 搜索条件初始化 |
| | | */ |
| | | UNSAFE_componentWillMount () { |
| | | const { config } = this.props |
| | | |
| | | let actionlist = fromJS(config.action).toJS() || [] |
| | | |
| | | this.setState({ |
| | | actionlist: fromJS(this.props.config.action).toJS() |
| | | actionlist: actionlist.map(item => { |
| | | if (item.btnstyle) { // 兼容 |
| | | item.style = item.style || {} |
| | | item.style = {...item.style, ...item.btnstyle} |
| | | delete item.btnstyle |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | }) |
| | | } |
| | | |
| | |
| | | */ |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { actionlist } = this.state |
| | | |
| | | if (!is(fromJS(nextProps.config.action), fromJS(this.props.config.action)) && !is(fromJS(nextProps.config.action), fromJS(actionlist))) { |
| | | this.setState({actionlist: fromJS(nextProps.config.action).toJS()}) |
| | | } |
| | |
| | | if (comIds[0] !== config.uuid || comIds[1] !== 'actionlist') return |
| | | |
| | | let _card = fromJS(card).toJS() |
| | | _card.btnstyle = style |
| | | _card.style = style |
| | | |
| | | let _actionlist = actionlist.map(cell => { |
| | | if (cell.uuid === _card.uuid) return _card |
| | |
| | | changeBtnStyle = (element) => { |
| | | const { config } = this.props |
| | | |
| | | let _style = element.btnstyle ? fromJS(element.btnstyle).toJS() : {} |
| | | let options = ['font', 'border', 'background', 'margin'] |
| | | let _style = element.style ? fromJS(element.style).toJS() : {} |
| | | let options = ['font', 'border', 'background', 'margin', 'padding'] |
| | | |
| | | this.setState({ |
| | | card: element |
| | |
| | | } |
| | | } |
| | | |
| | | getModules = (components, selfId) => { |
| | | let modules = components.map(item => { |
| | | if (item.uuid === selfId) { |
| | | return { |
| | | children: null |
| | | } |
| | | } else if (item.format) { |
| | | return { |
| | | value: item.uuid, |
| | | label: item.name |
| | | } |
| | | } else if (item.type === 'tabs') { |
| | | let _item = { |
| | | value: item.uuid, |
| | | label: item.name, |
| | | children: item.subtabs.map(f_tab => { |
| | | let subItem = { |
| | | value: f_tab.uuid, |
| | | label: f_tab.label, |
| | | children: this.getModules(f_tab.components, selfId) |
| | | } |
| | | |
| | | if (!subItem.children || subItem.children.length === 0) { |
| | | return {children: null} |
| | | } |
| | | return subItem |
| | | }) |
| | | } |
| | | |
| | | _item.children = _item.children.filter(t => t.children !== null) |
| | | |
| | | if (_item.children.length === 0) { |
| | | return {children: null} |
| | | } |
| | | |
| | | return _item |
| | | } else { |
| | | return { |
| | | children: null |
| | | } |
| | | } |
| | | }) |
| | | |
| | | modules = modules.filter(mod => mod.children !== null) |
| | | |
| | | if (modules.length === 0) { |
| | | return null |
| | | } |
| | | return modules |
| | | } |
| | | |
| | | /** |
| | | * @description 按钮编辑,获取按钮表单信息 |
| | | */ |
| | | handleAction = (card) => { |
| | | const { menu, config } = this.props |
| | | const { config } = this.props |
| | | |
| | | let usefulFields = sessionStorage.getItem('permFuncField') |
| | | if (usefulFields) { |
| | | try { |
| | | usefulFields = JSON.parse(usefulFields) |
| | | } catch { |
| | | } catch (e) { |
| | | usefulFields = [] |
| | | } |
| | | } else { |
| | |
| | | let ableField = usefulFields.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 menulist = sessionStorage.getItem('fstMenuList') |
| | | if (menulist) { |
| | | try { |
| | | menulist = JSON.parse(menulist) |
| | | } catch { |
| | | } catch (e) { |
| | | menulist = [] |
| | | } |
| | | } else { |
| | | menulist = [] |
| | | } |
| | | |
| | | let modules = this.getModules(menu.components, config.uuid) |
| | | let modules = MenuUtils.getSubModules(window.GLOB.customMenu.components, config.uuid) |
| | | |
| | | this.setState({ |
| | | visible: true, |
| | | card: card, |
| | | formlist: getActionForm(card, functip, config.setting, usefulFields, this.props.type, menulist, modules) |
| | | formlist: getActionForm(card, functip, config, usefulFields, this.props.type, menulist, modules) |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | if (item.uuid === btn.uuid) { |
| | | btn.btnstyle = item.btnstyle || {} |
| | | btn.style = item.style || {} |
| | | |
| | | if (btn.class !== item.class || btn.show !== item.show || !btn.btnstyle.color) { |
| | | if (btn.class !== item.class || btn.show !== item.show || !btn.style.color) { |
| | | if (btn.show === 'link' || btn.show === 'icon') { |
| | | btn.btnstyle.color = color[btn.class] |
| | | btn.btnstyle.background = 'transparent' |
| | | btn.style.color = color[btn.class] |
| | | btn.style.backgroundColor = 'transparent' |
| | | } else { |
| | | btn.btnstyle.color = '#ffffff' |
| | | btn.btnstyle.background = color[btn.class] |
| | | btn.style.color = '#ffffff' |
| | | btn.style.backgroundColor = color[btn.class] |
| | | } |
| | | } |
| | | return btn |
| | |
| | | if (labelrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: this.state.dict['model.name.exist'] + ' !', |
| | | message: '名称已存在!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | |
| | | */ |
| | | deleteElement = (card) => { |
| | | const { config } = this.props |
| | | const { dict } = this.state |
| | | const { dict, appType } = this.state |
| | | let _this = this |
| | | |
| | | confirm({ |
| | |
| | | |
| | | _actionlist = _actionlist.filter(item => item.uuid !== card.uuid) |
| | | |
| | | let delButtons = sessionStorage.getItem('delButtons') |
| | | try { |
| | | delButtons = JSON.parse(delButtons) |
| | | delButtons.push(card.uuid) |
| | | } catch { |
| | | delButtons = [card.uuid] |
| | | let btnlog = config.btnlog || [] |
| | | if (card.OpenType === 'popview' || card.verify || card.modal) { |
| | | btnlog.push(card) |
| | | } |
| | | sessionStorage.setItem('delButtons', JSON.stringify(delButtons)) |
| | | |
| | | _this.setState({ |
| | | actionlist: _actionlist |
| | | }, () => { |
| | | _this.props.updateaction({...config, action: _actionlist}) |
| | | _this.props.updateaction({...config, action: _actionlist, btnlog}) |
| | | }) |
| | | |
| | | if (card.origin || appType === 'mob') return |
| | | if (appType === 'pc' && card.OpenType !== 'popview') return |
| | | |
| | | MKEmitter.emit('delButtons', [card.uuid]) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | |
| | | * @description 创建按钮存储过程 |
| | | */ |
| | | creatFunc = () => { |
| | | const { menu } = this.props |
| | | const menu = window.GLOB.customMenu |
| | | let _config = fromJS(this.props.config).toJS() |
| | | |
| | | this.actionFormRef.handleConfirm().then(res => { |
| | |
| | | } |
| | | |
| | | if (btn.OpenType === 'pop') { |
| | | let fields = [] |
| | | if (btn.groups.length > 0) { |
| | | btn.groups.forEach(group => { |
| | | fields = [...fields, ...group.sublist] |
| | | }) |
| | | } else { |
| | | fields = btn.fields |
| | | } |
| | | |
| | | let _param = { |
| | | funcName: btn.innerFunc, |
| | | name: _config.setting.tableName || '', |
| | | fields: fields, |
| | | fields: btn.modal ? btn.modal.fields : [], |
| | | menuNo: menu.MenuNo |
| | | } |
| | | newLText = Utils.formatOptions(DevUtils.getfunc(_param, btn, menu, _config)) |
| | | DelText = Utils.formatOptions(DevUtils.dropfunc(btn.innerFunc)) |
| | | newLText = Utils.formatOptions(FuncUtils.getfunc(_param, btn, menu, _config)) |
| | | DelText = Utils.formatOptions(FuncUtils.dropfunc(btn.innerFunc)) |
| | | } else if (btn.OpenType === 'excelIn') { |
| | | let _param = { |
| | | funcName: btn.innerFunc, |
| | | menuNo: menu.MenuNo |
| | | } |
| | | newLText = Utils.formatOptions(DevUtils.getexcelInfunc(_param, btn, menu)) |
| | | DelText = Utils.formatOptions(DevUtils.dropfunc(btn.innerFunc)) |
| | | newLText = Utils.formatOptions(FuncUtils.getexcelInfunc(_param, btn, menu)) |
| | | DelText = Utils.formatOptions(FuncUtils.dropfunc(btn.innerFunc)) |
| | | } else if (btn.OpenType === 'excelOut') { |
| | | let _param = { |
| | | innerFunc: btn.innerFunc |
| | | } |
| | | |
| | | newLText = Utils.formatOptions(DevUtils.getTableFunc(_param, menu, _config)) // 创建存储过程sql |
| | | DelText = Utils.formatOptions(DevUtils.dropfunc(btn.innerFunc)) |
| | | newLText = Utils.formatOptions(FuncUtils.getTableFunc(_param, menu, _config)) // 创建存储过程sql |
| | | DelText = Utils.formatOptions(FuncUtils.dropfunc(btn.innerFunc)) |
| | | } else { |
| | | let _param = { |
| | | funcName: btn.innerFunc, |
| | |
| | | fields: '', |
| | | menuNo: menu.MenuNo |
| | | } |
| | | newLText = Utils.formatOptions(DevUtils.getfunc(_param, btn, menu, _config)) |
| | | DelText = Utils.formatOptions(DevUtils.dropfunc(btn.innerFunc)) |
| | | newLText = Utils.formatOptions(FuncUtils.getfunc(_param, btn, menu, _config)) |
| | | DelText = Utils.formatOptions(FuncUtils.dropfunc(btn.innerFunc)) |
| | | } |
| | | |
| | | this.refs.btnCreatFunc.exec(btn.innerFunc, newLText, DelText) |
| | |
| | | * @description 按钮双击触发子配置 |
| | | */ |
| | | btnDoubleClick = (element) => { |
| | | if (element.OpenType === 'pop' || element.OpenType === 'popview') { |
| | | if (sessionStorage.getItem('style-control') && sessionStorage.getItem('style-control') === 'true') return |
| | | |
| | | if (element.OpenType === 'pop' || element.OpenType === 'popview' || element.execMode === 'pop') { |
| | | this.props.setSubConfig(element) |
| | | } else if (element.OpenType === 'innerpage' && element.pageTemplate === 'page') { |
| | | MKEmitter.emit('changeEditMenu', {MenuID: element.uuid, copyMenuId: element.copyMenuId}) |
| | | } else if (element.OpenType === 'innerpage' && element.pageTemplate === 'linkpage') { |
| | | MKEmitter.emit('changeEditMenu', {MenuID: element.linkmenu}) |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '此按钮无子配置项!', |
| | | duration: 5 |
| | | }) |
| | | this.handleAction(element) |
| | | } |
| | | } |
| | | |
| | |
| | | <Modal |
| | | title={dict['model.action'] + '-' + (card && card.copyType === 'action' ? dict['model.copy'] : dict['model.edit'])} |
| | | visible={visible} |
| | | width={800} |
| | | width={850} |
| | | maskClosable={false} |
| | | onCancel={this.editModalCancel} |
| | | footer={[ |
| | |
| | | visible={profVisible} |
| | | width={'75vw'} |
| | | maskClosable={false} |
| | | style={{minWidth: '900px', maxWidth: '1200px'}} |
| | | okText={dict['model.submit']} |
| | | onOk={this.verifySubmit} |
| | | onCancel={() => { this.setState({ profVisible: false }) }} |
| | |
| | | } |
| | | } |
| | | |
| | | const mapStateToProps = (state) => { |
| | | return { |
| | | menu: state.customMenu |
| | | } |
| | | } |
| | | |
| | | const mapDispatchToProps = () => { |
| | | return {} |
| | | } |
| | | |
| | | export default connect(mapStateToProps, mapDispatchToProps)(ActionComponent) |
| | | export default ActionComponent |