| | |
| | | import { getModalForm, getActionForm } from '@/templates/zshare/formconfig' |
| | | import { queryTableSql } from '@/utils/option.js' |
| | | |
| | | import TabsComponent from '@/templates/sharecomponent/tabscomponent' |
| | | |
| | | import ModalForm from '@/templates/zshare/modalform' |
| | | import PasteForm from '@/templates/zshare/pasteform' |
| | | import ActionForm from './actionform' |
| | | import SettingForm from './settingform' |
| | | import DragElement from './dragelement' |
| | | import GroupForm from './groupform' |
| | | import TabForm from '@/templates/zshare/tabform' |
| | | import EditCard from '@/templates/zshare/editcard' |
| | | import VerifyCard from '@/templates/zshare/verifycard' |
| | | import MenuForm from '@/templates/zshare/menuform' |
| | | import TabDragElement from '@/templates/zshare/tabdragelement' |
| | | import SourceElement from '@/templates/zshare/dragsource' |
| | | import CreateFunc from '@/templates/zshare/createfunc' |
| | | import Source from './source' |
| | |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | 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 (menu && menu.LongParam && menu.LongParam.columns) { |
| | |
| | | handleList = (type, list, card, groupId, elementId) => { |
| | | const { config } = this.state |
| | | |
| | | if (type === 'tabs') { // 标签页调整顺序或添加元素 |
| | | if (list.length > config[card.groupId].length) { |
| | | list = list.filter(item => !item.origin) |
| | | |
| | | this.handleTab(card) |
| | | } |
| | | |
| | | this.setState({config: {...config, [card.groupId]: list}}) |
| | | } else if (type === 'action') { |
| | | if (type === 'action') { |
| | | if (list.length > config.action.length) { |
| | | |
| | | this.handleAction(card) |
| | |
| | | }) |
| | | } |
| | | |
| | | 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: '关联标签', |
| | | 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 |
| | | } |
| | | ] |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 搜索、按钮、显示列修改后提交保存 |
| | |
| | | modaltype: '' |
| | | }) |
| | | }) |
| | | } else if (modaltype === 'tabs') { |
| | | 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: '' |
| | | }) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | } else if (modaltype === 'actionEdit') { |
| | | let _action = config.action.filter(item => item.uuid !== card.uuid) |
| | | _config = {...config, action: _action} |
| | | } else if (modaltype === 'tabs') { |
| | | let _tabgroup = config[card.groupId].filter(item => item.uuid !== card.uuid) |
| | | _config = {...config, [card.groupId]: _tabgroup} |
| | | } else { |
| | | _config = config |
| | | } |
| | |
| | | let _config = JSON.parse(JSON.stringify(_this.state.config)) |
| | | let _delActions = _this.state.delActions |
| | | |
| | | if (element.type === 'tabs') { |
| | | _config[element.card.groupId] = _config[element.card.groupId].filter(item => { |
| | | if (item.uuid === element.card.uuid) { |
| | | return false |
| | | } else { |
| | | return true |
| | | } |
| | | }) |
| | | _delActions.push(element.card.uuid) |
| | | } else if (element.type === 'search') { |
| | | if (element.type === 'search') { |
| | | _config.groups = _config.groups.map(group => { |
| | | group.sublist = group.sublist.filter(item => item.uuid !== element.card.uuid) |
| | | return group |
| | |
| | | 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 |
| | | } |
| | | |
| | | let _LongParam = '' |
| | | let _config = {...config, tables: this.state.selectedTables} |
| | | |
| | |
| | | |
| | | // 标签不合法时,启用状态为false |
| | | if (_config.tabgroups.length > 1) { |
| | | _config.tabgroups.forEach(groupId => { |
| | | if (_config[groupId].length === 0) { |
| | | _config.tabgroups.forEach(group => { |
| | | if (group.sublist.length === 0) { |
| | | _config.enabled = false |
| | | } |
| | | }) |
| | |
| | | } |
| | | }) |
| | | |
| | | _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', |
| | |
| | | |
| | | let _LText = [] |
| | | |
| | | config.tabgroups.forEach(groupId => { |
| | | config[groupId].forEach(item => { |
| | | config.tabgroups.forEach(group => { |
| | | group.sublist.forEach(item => { |
| | | _sort++ |
| | | _LText.push(`select '${btnTab.uuid}' as MenuID ,'${item.linkTab}' as Tabid,'${item.label}' as TabName ,'${_sort * 10}' as Sort`) |
| | | }) |
| | |
| | | let tabinvalid = true |
| | | if (config.tabgroups.length > 1) { |
| | | config.tabgroups.forEach(group => { |
| | | if (config[group].length === 0) { |
| | | if (group.sublist.length === 0) { |
| | | tabinvalid = false |
| | | } |
| | | }) |
| | |
| | | } |
| | | } |
| | | |
| | | addTabGroup = () => { |
| | | let _this = this |
| | | let _config = JSON.parse(JSON.stringify(this.state.config)) |
| | | |
| | | 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() {} |
| | | }) |
| | | } |
| | | |
| | | delTabGroup = (groupId) => { |
| | | let _this = this |
| | | let _config = JSON.parse(JSON.stringify(this.state.config)) |
| | | |
| | | 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 = (group) => { |
| | | let editgroup = { |
| | |
| | | }) |
| | | } |
| | | |
| | | handleTabGroup = (index, type) => { |
| | | let config = JSON.parse(JSON.stringify(this.state.config)) |
| | | |
| | | 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 |
| | | }) |
| | | } |
| | | |
| | | pasteSubmit = () => { |
| | | let _config = JSON.parse(JSON.stringify(this.state.config)) |
| | |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 更新标签配置信息 |
| | | */ |
| | | updatetabs = (config, delcards) => { |
| | | const { delActions } = this.state |
| | | |
| | | this.setState({ |
| | | config: config, |
| | | delActions: delcards ? [...delActions, ...delcards.map(item => item.uuid)] : delActions |
| | | }) |
| | | } |
| | | |
| | | render () { |
| | | const { config, modaltype, activeKey } = this.state |
| | | let _length = config.groups.length |
| | | |
| | | let configTabs = [] |
| | | this.state.config.tabgroups.forEach(group => { |
| | | configTabs.push(...this.state.config[group]) |
| | | config.tabgroups.forEach(group => { |
| | | configTabs.push(...group.sublist) |
| | | }) |
| | | |
| | | return ( |
| | |
| | | /> |
| | | </div> |
| | | {/* 标签组 */} |
| | | {this.state.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) ? |
| | | <Icon type="arrow-down" onClick={() => {this.handleTabGroup(index, 'down')}} /> : null |
| | | } |
| | | {index !== 0 ? <Icon type="arrow-up" onClick={() => {this.handleTabGroup(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={this.state.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']} |
| | | <TabsComponent |
| | | type="formtab" |
| | | config={config} |
| | | tabs={this.state.tabviews} |
| | | setSubConfig={(item) => this.setSubConfig(item, 'tab')} |
| | | updatetabs={this.updatetabs} |
| | | /> |
| | | </div>) |
| | | })} |
| | | </Card> |
| | | </div> |
| | | </DndProvider> |
| | |
| | | formlist={this.state.formlist} |
| | | inputSubmit={this.handleSubmit} |
| | | wrappedComponentRef={(inst) => this.actionFormRef = inst} |
| | | /> |
| | | </Modal> |
| | | {/* 标签编辑 */} |
| | | <Modal |
| | | title={this.state.dict['header.modal.tabs.edit']} |
| | | visible={modaltype === 'tabs'} |
| | | width={700} |
| | | 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> |
| | | {/* 根据字段名添加显示列及搜索条件 */} |