| | |
| | | import { is, fromJS } from 'immutable' |
| | | import { DndProvider } from 'react-dnd' |
| | | import HTML5Backend from 'react-dnd-html5-backend' |
| | | import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip } from 'antd' |
| | | import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip, message } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | | import options from '@/store/options.js' |
| | | import zhCN from '@/locales/zh-CN/comtable.js' |
| | | import enUS from '@/locales/en-US/comtable.js' |
| | | import { getSearchForm, getActionForm, getColumnForm } from '@/templates/zshare/formconfig' |
| | |
| | | import TransferForm from '@/components/transferform' |
| | | import SourceElement from '@/templates/zshare/dragelement/source' |
| | | import CreateFunc from '@/templates/zshare/createfunc' |
| | | import CreateInterface from '@/templates/zshare/createinterface' |
| | | import Source from './source' |
| | | import './index.scss' |
| | | |
| | |
| | | optionLibs: null, // 自定义下拉选项库 |
| | | thawBtnVisible: false, // 解冻按钮弹窗 |
| | | thawbtnlist: null, // 解冻按钮列表 |
| | | thawButtons: [] // 已选择要解冻的按钮 |
| | | thawButtons: [], // 已选择要解冻的按钮 |
| | | activeKey: '0' // 默认展开基本信息 |
| | | } |
| | | |
| | | /** |
| | |
| | | |
| | | this.setState({ |
| | | config: _config, |
| | | activeKey: menu.activeKey || '0', |
| | | optionLibs: optionLibs, |
| | | originActions: _oriActions, |
| | | originMenu: JSON.parse(JSON.stringify(menu)), |
| | |
| | | */ |
| | | handleColumn = (card) => { |
| | | const { menu } = this.props |
| | | |
| | | |
| | | if (card.type !== 'colspan') { |
| | | this.setState({ |
| | | modaltype: 'columns', |
| | | card: card, |
| | | formlist: getColumnForm(card, menu.roleList) |
| | | let menulist = menu.fstMenuList.map(item => { |
| | | return { |
| | | value: item.MenuID, |
| | | label: item.text, |
| | | isLeaf: false |
| | | } |
| | | }) |
| | | |
| | | if ((card.type === 'text' || card.type === 'number') && card.linkmenu && card.linkmenu.length > 0) { |
| | | let _param = { |
| | | func: 'sPC_Get_FunMenu', |
| | | ParentID: card.linkmenu[0], |
| | | systemType: options.systemType, |
| | | debug: 'Y' |
| | | } |
| | | |
| | | this.setState({ |
| | | loading: true |
| | | }) |
| | | |
| | | Api.getSystemConfig(_param).then(result => { |
| | | if (result.status) { |
| | | menulist = menulist.map(item => { |
| | | if (item.value === card.linkmenu[0]) { |
| | | item.children = result.data.map(item => { |
| | | let submenu = { |
| | | value: item.ParentID, |
| | | label: item.MenuNameP, |
| | | children: item.FunMenu.map(cell => { |
| | | return { |
| | | value: cell.MenuID, |
| | | label: cell.MenuName, |
| | | MenuID: cell.MenuID, |
| | | MenuName: cell.MenuName, |
| | | MenuNo: cell.MenuNo, |
| | | Ot: cell.Ot, |
| | | PageParam: cell.PageParam, |
| | | LinkUrl: cell.LinkUrl |
| | | } |
| | | }) |
| | | } |
| | | |
| | | submenu.children = submenu.children.filter(cell => cell.MenuID !== menu.MenuID) |
| | | |
| | | return submenu |
| | | }) |
| | | } |
| | | return item |
| | | }) |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | }) |
| | | } |
| | | |
| | | this.setState({ |
| | | loading: false, |
| | | modaltype: 'columns', |
| | | card: card, |
| | | formlist: getColumnForm(card, menu.roleList, menulist) |
| | | }) |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | modaltype: 'columns', |
| | | card: card, |
| | | formlist: getColumnForm(card, menu.roleList, menulist) |
| | | }) |
| | | } |
| | | } else { |
| | | this.setState({ |
| | | modaltype: 'colspan', |
| | |
| | | }) |
| | | } |
| | | |
| | | let fieldrepet = false // 字段重复 |
| | | let labelrepet = false // 提示文字重复 |
| | | |
| | | let _search = config.search.map(item => { |
| | | if (item.uuid !== res.uuid && item.field === res.field) { |
| | | fieldrepet = true |
| | | } else if (item.uuid !== res.uuid && item.field && item.label === res.label) { |
| | | labelrepet = true |
| | | } |
| | | |
| | | if (item.uuid === res.uuid) { |
| | | return res |
| | | } else { |
| | | return item |
| | | } |
| | | }) |
| | | |
| | | if (fieldrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '字段已存在!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } else if (labelrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '名称已存在!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | _search = _search.filter(item => !item.origin) |
| | | |
| | | this.setState({ |
| | |
| | | }) |
| | | } else if (modaltype === 'columns' || modaltype === 'colspan') { |
| | | this.columnFormRef.handleConfirm().then(res => { |
| | | let fieldrepet = false // 字段重复 |
| | | let labelrepet = false // 提示文字重复 |
| | | |
| | | let _columns = config.columns.map(item => { |
| | | if (item.uuid !== res.uuid && item.field === res.field) { |
| | | fieldrepet = true |
| | | } else if (item.uuid !== res.uuid && item.field && item.label === res.label) { |
| | | labelrepet = true |
| | | } |
| | | |
| | | if (item.uuid === res.uuid) { |
| | | return res |
| | | } else { |
| | | return item |
| | | } |
| | | }) |
| | | |
| | | if (fieldrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '字段已存在!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } else if (labelrepet) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '名称已存在!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | _columns = _columns.filter(item => !item.origin) |
| | | |
| | | this.setState({ |
| | |
| | | editModalCancel = () => { |
| | | const { config, card, modaltype } = this.state |
| | | |
| | | if (card.focus) { |
| | | if (card && card.focus) { |
| | | let _config = null |
| | | if (modaltype === 'search') { |
| | | let _search = config.search.filter(item => item.uuid !== card.uuid) |
| | |
| | | */ |
| | | tableCreatFunc = () => { |
| | | const { menu } = this.props |
| | | let config = JSON.parse(JSON.stringify(this.state.config)) |
| | | const { config } = this.state |
| | | |
| | | this.settingRef.handleConfirm().then(res => { |
| | | const setting = res |
| | | this.settingRef.handleConfirm().then(setting => { |
| | | |
| | | if (!(setting.interType === 'inner') || !setting.innerFunc) { |
| | | notification.warning({ |
| | | top: 92, |
| | |
| | | return |
| | | } |
| | | |
| | | if (/[^\s]+\s+[^\s]+/ig.test(setting.dataresource) && config.setting.dataresource !== setting.dataresource) { |
| | | let param = { |
| | | func: 's_DataSrc_Save', |
| | | LText: setting.dataresource, |
| | | MenuID: menu.MenuID |
| | | } |
| | | |
| | | param.LText = Utils.formatOptions(param.LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | |
| | | Api.getLocalConfig(param) |
| | | } |
| | | |
| | | let newLText = Utils.formatOptions(Utils.getTableFunc(setting, menu, config)) // 创建存储过程sql |
| | | let _config = {...config, setting: setting} |
| | | let newLText = Utils.formatOptions(Utils.getTableFunc(setting, menu, _config)) // 创建存储过程sql |
| | | let DelText = Utils.formatOptions(Utils.dropfunc(setting.innerFunc)) // 删除存储过程sql |
| | | |
| | | this.refs.tableCreatFunc.exec(setting.innerFunc, newLText, DelText).then(result => { |
| | | if (result === 'success') { |
| | | this.setState({ |
| | | config: {...config, setting: setting} |
| | | config: _config |
| | | }) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 创建按钮接口(写入) |
| | | */ |
| | | btnCreatInterface = () => { |
| | | const { menu } = this.props |
| | | const { config } = this.state |
| | | |
| | | this.menuformRef.handleConfirm().then(res => { |
| | | this.actionFormRef.handleConfirm().then(result => { |
| | | if (!['pop', 'exec', 'prompt'].includes(result) || result.funcType || result.intertype !== 'inner' || result.innerFunc ) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '打开方式为 弹窗(表单)、提示框或直接执行,且使用系统函数时,才可以创建接口!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | let _menu = { |
| | | type: 'main', |
| | | MenuID: menu.MenuID, |
| | | menuName: res.menuName, |
| | | menuNo: res.menuNo |
| | | } |
| | | |
| | | this.refs.btnCreatInterface.triggerInInterface(result, config, _menu) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 创建表格接口(读出) |
| | | */ |
| | | tableCreatInterface = () => { |
| | | const { menu } = this.props |
| | | const { config } = this.state |
| | | |
| | | this.menuformRef.handleConfirm().then(res => { |
| | | this.settingRef.handleConfirm().then(setting => { |
| | | if (setting.interType !== 'inner' || setting.innerFunc) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '接口类型为-内部,且不存在内部函数时,才可以创建接口!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | let _config = {...config, setting: setting} |
| | | let _menu = { |
| | | type: 'main', |
| | | MenuID: menu.MenuID, |
| | | menuName: res.menuName, |
| | | menuNo: res.menuNo |
| | | } |
| | | |
| | | this.refs.tableCreatInterface.triggerOutInterface(_menu, _config) |
| | | }) |
| | | }) |
| | | } |
| | |
| | | profileVisible: true, |
| | | card: element |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 按钮双击触发子配置 |
| | | */ |
| | | btnDoubleClick = (element) => { |
| | | if (!element.origin && (element.OpenType === 'pop' || element.OpenType === 'popview' || element.OpenType === 'blank' || element.OpenType === 'tab')) { |
| | | this.setSubConfig(element, 'button') |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '此按钮无子配置项!', |
| | | duration: 10 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | /** |
| | |
| | | */ |
| | | setSubConfig = (item, type) => { |
| | | const { menu } = this.props |
| | | const { config, originMenu, optionLibs } = this.state |
| | | const { config, originMenu, optionLibs, activeKey } = this.state |
| | | |
| | | if (!originMenu.MenuID) { // menuID不存在时,为新建菜单,提示菜单尚未保存 |
| | | notification.warning({ |
| | |
| | | uuid = item.linkTab |
| | | isbutton = false |
| | | } |
| | | |
| | | // 保存当前打开页签 |
| | | _originMenu.activeKey = activeKey |
| | | |
| | | let param = { |
| | | optionLibs: optionLibs, |
| | |
| | | }) |
| | | } |
| | | |
| | | copycolumn = () => { |
| | | const { config } = this.state |
| | | |
| | | let oInput = document.createElement('input') |
| | | let val = { |
| | | copyType: 'columns', |
| | | columns: config.columns |
| | | } |
| | | |
| | | oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val))) |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | | document.execCommand('Copy') |
| | | oInput.className = 'oInput' |
| | | oInput.style.display = 'none' |
| | | |
| | | message.success('复制成功。') |
| | | |
| | | document.body.removeChild(oInput) |
| | | } |
| | | |
| | | /** |
| | | * @description 选择不保存时,如有复制按钮,则删除 |
| | | */ |
| | |
| | | } |
| | | |
| | | pasteSubmit = () => { |
| | | const { config } = this.state |
| | | |
| | | this.pasteFormRef.handleConfirm().then(res => { |
| | | if (res.copyType !== 'action') { |
| | | if (res.copyType === 'action') { |
| | | this.setState({ |
| | | modaltype: '' |
| | | }, () => { |
| | | this.handleAction(res, 'copy') |
| | | }) |
| | | } else if (res.copyType === 'columns') { |
| | | if (config.columns && config.columns.length > 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '显示列已存在!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | this.setState({ |
| | | modaltype: '', |
| | | config: {...config, columns: res.columns} |
| | | }) |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '配置信息格式错误!', |
| | | duration: 10 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | this.setState({ |
| | | modaltype: '' |
| | | }, () => { |
| | | this.handleAction(res, 'copy') |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | render () { |
| | | const { modaltype } = this.state |
| | | const configAction = this.state.config.action.filter(_action => |
| | | const { modaltype, activeKey, config } = this.state |
| | | |
| | | const configAction = config.action.filter(_action => |
| | | !_action.origin && (_action.OpenType === 'pop' || _action.OpenType === 'popview' || _action.OpenType === 'blank' || _action.OpenType === 'tab') |
| | | ) |
| | | |
| | | let configTabs = [] |
| | | this.state.config.tabgroups.forEach(group => { |
| | | configTabs.push(...this.state.config[group]) |
| | | config.tabgroups.forEach(group => { |
| | | configTabs.push(...config[group]) |
| | | }) |
| | | |
| | | let hasbtncrtinter = false |
| | | if (modaltype === 'actionEdit' && config.setting.interType === 'inner' && !config.setting.innerFunc && config.setting.dataresource) { |
| | | hasbtncrtinter = true |
| | | } |
| | | |
| | | return ( |
| | | <div className="common-table-board"> |
| | | <DndProvider backend={HTML5Backend}> |
| | | {/* 工具栏 */} |
| | | <div className="tools"> |
| | | <Collapse accordion defaultActiveKey="0" bordered={false}> |
| | | <Collapse accordion defaultActiveKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> |
| | | {/* 基本信息 */} |
| | | <Panel header={this.state.dict['header.menu.basedata']} key="0" id="common-basedata"> |
| | | <Panel forceRender={true} header={this.state.dict['header.menu.basedata']} key="0" id="common-basedata"> |
| | | {/* 菜单信息 */} |
| | | <MenuForm |
| | | dict={this.state.dict} |
| | |
| | | </Tooltip> |
| | | <DragElement |
| | | type="search" |
| | | list={this.state.config.search} |
| | | list={config.search} |
| | | handleList={this.handleList} |
| | | handleMenu={this.handleSearch} |
| | | deleteMenu={this.deleteElement} |
| | |
| | | </div> |
| | | <DragElement |
| | | type="action" |
| | | list={this.state.config.action} |
| | | setting={this.state.config.setting} |
| | | list={config.action} |
| | | setting={config.setting} |
| | | handleList={this.handleList} |
| | | handleMenu={this.handleAction} |
| | | copyElement={(val) => this.handleAction(val, 'copy')} |
| | | deleteMenu={this.deleteElement} |
| | | profileMenu={this.profileAction} |
| | | doubleClickCard={this.btnDoubleClick} |
| | | placeholder={this.state.dict['header.form.action.placeholder']} |
| | | /> |
| | | </div> |
| | |
| | | <Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《显示列》中,选择对应类型的显示列拖至此处添加;或点击《添加显示列》按钮批量添加,选择批量添加时,需提前选择使用表。注:添加合并列时,需设置可选列。"> |
| | | <Icon type="question-circle" /> |
| | | </Tooltip> |
| | | {config.columns && config.columns.length > 0 ? <Icon className="column-copy" title="copy" type="copy" onClick={this.copycolumn} /> : null} |
| | | <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showColumnName} onChange={this.onColumnNameChange} /> |
| | | <DragElement |
| | | type="columns" |
| | | list={this.state.config.columns} |
| | | setting={this.state.config.setting} |
| | | gridBtn={this.state.config.gridBtn} |
| | | list={config.columns} |
| | | setting={config.setting} |
| | | gridBtn={config.gridBtn} |
| | | handleList={this.handleList} |
| | | handleMenu={this.handleColumn} |
| | | deleteMenu={this.deleteElement} |
| | |
| | | /> |
| | | </div> |
| | | {/* 标签组 */} |
| | | {this.state.config.tabgroups.map((groupId, index) => { |
| | | {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 !== (this.state.config.tabgroups.length - 1) ? |
| | | {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} |
| | |
| | | <TabDragElement |
| | | type="tabs" |
| | | groupId={groupId} |
| | | list={this.state.config[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>) |
| | |
| | | maskClosable={false} |
| | | onCancel={this.editModalCancel} |
| | | footer={[ |
| | | hasbtncrtinter ? <CreateInterface key="interface" dict={this.state.dict} ref="btnCreatInterface" trigger={this.btnCreatInterface}/> : null, |
| | | modaltype === 'actionEdit' ? <CreateFunc key="create" dict={this.state.dict} ref="btnCreatFunc" trigger={this.creatFunc}/> : null, |
| | | <Button key="cancel" onClick={this.editModalCancel}>{this.state.dict['header.cancel']}</Button>, |
| | | <Button key="confirm" type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button> |
| | |
| | | tabs={this.state.tabviews} |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleSubmit} |
| | | setting={this.state.config.setting} |
| | | setting={config.setting} |
| | | wrappedComponentRef={(inst) => this.actionFormRef = inst} |
| | | /> |
| | | </Modal> |
| | |
| | | <ColumnForm |
| | | dict={this.state.dict} |
| | | card={this.state.card} |
| | | MenuID={this.props.menu.MenuID} |
| | | inputSubmit={this.handleSubmit} |
| | | formlist={this.state.formlist} |
| | | wrappedComponentRef={(inst) => this.columnFormRef = inst} |
| | |
| | | dict={this.state.dict} |
| | | card={this.state.card} |
| | | inputSubmit={this.handleSubmit} |
| | | columns={this.state.config.columns} |
| | | columns={config.columns} |
| | | wrappedComponentRef={(inst) => this.columnFormRef = inst} |
| | | /> |
| | | </Modal> |
| | |
| | | <GridBtnForm |
| | | dict={this.state.dict} |
| | | inputSubmit={this.handleSubmit} |
| | | card={this.state.config.gridBtn} |
| | | card={config.gridBtn} |
| | | wrappedComponentRef={(inst) => this.gridBtnFormRef = inst} |
| | | /> |
| | | </Modal> |
| | |
| | | <VerifyCard |
| | | card={this.state.card} |
| | | dict={this.state.dict} |
| | | columns={this.state.config.columns} |
| | | columns={config.columns} |
| | | wrappedComponentRef={(inst) => this.verifyRef = inst} |
| | | /> : null |
| | | } |
| | |
| | | <VerifyCardPrint |
| | | card={this.state.card} |
| | | dict={this.state.dict} |
| | | columns={this.state.config.columns} |
| | | columns={config.columns} |
| | | wrappedComponentRef={(inst) => this.verifyRef = inst} |
| | | /> : null |
| | | } |
| | |
| | | <VerifyCardExcelIn |
| | | card={this.state.card} |
| | | dict={this.state.dict} |
| | | columns={this.state.config.columns} |
| | | columns={config.columns} |
| | | wrappedComponentRef={(inst) => this.verifyRef = inst} |
| | | /> : null |
| | | } |
| | |
| | | }) |
| | | }} |
| | | footer={[ |
| | | <CreateInterface key="interface" dict={this.state.dict} ref="tableCreatInterface" trigger={this.tableCreatInterface}/>, |
| | | <CreateFunc key="create" dict={this.state.dict} ref="tableCreatFunc" trigger={this.tableCreatFunc}/>, |
| | | <Button key="cancel" onClick={() => { this.setState({ settingVisible: false }) }}>{this.state.dict['header.cancel']}</Button>, |
| | | <Button key="confirm" type="primary" onClick={this.settingSave}>{this.state.dict['header.confirm']}</Button> |
| | |
| | | dict={this.state.dict} |
| | | menu={this.props.menu} |
| | | inputSubmit={this.settingSave} |
| | | data={this.state.config.setting} |
| | | columns={this.state.config.columns} |
| | | data={config.setting} |
| | | columns={config.columns} |
| | | usefulFields={this.props.permFuncField} |
| | | wrappedComponentRef={(inst) => this.settingRef = inst} |
| | | /> |