| | |
| | | handleActionSubmit = () => { |
| | | const { elements } = this.state |
| | | |
| | | this.actionFormRef.handleConfirm().then(ele => { |
| | | this.actionFormRef.handleConfirm().then(res => { |
| | | let _elements = elements.map(cell => { |
| | | if (cell.uuid === ele.uuid) { |
| | | ele = {...cell, ...ele} |
| | | return ele |
| | | if (cell.uuid === res.uuid) { |
| | | res = {...cell, ...res} |
| | | delete res.focus |
| | | |
| | | return res |
| | | } |
| | | |
| | | return cell |
| | |
| | | } |
| | | } |
| | | } |
| | | .setting:hover { |
| | | .setting { |
| | | overflow-y: auto; |
| | | } |
| | | .setting::-webkit-scrollbar { |
| | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import { refreshTabView } from '@/store/action' |
| | | import MKEmitter from '@/utils/events.js' |
| | | |
| | | import MainSearch from '@/tabviews/zshare/topSearch' |
| | | import NotFount from '@/components/404' |
| | |
| | | setting: null, // 页面全局设置:数据源、按钮及显示列固定、主键等 |
| | | data: null, // 列表数据集 |
| | | selectedData: [], // 已选表格数据 |
| | | resetTable: false, // 表格重置,值在true与false之间切换,切换时表格重置 |
| | | total: 0, // 总数 |
| | | loading: false, // 列表数据加载中 |
| | | pageIndex: 1, // 页码 |
| | |
| | | pickup: false, // 主表数据隐藏显示切换 |
| | | treevisible: false, // 菜单结构树弹框显示隐藏控制 |
| | | refreshtabs: null, // 需要刷新的标签集 |
| | | triggerBtn: null, // 点击表格中或快捷键触发的按钮 |
| | | tabActive: null, // 标签页展开控制 |
| | | chartId: '', // 展开图表ID |
| | | statFields: [], // 合计字段 |
| | |
| | | |
| | | if (!preKey) return |
| | | |
| | | let istrigger = false |
| | | let triggerId = '' |
| | | |
| | | actions.forEach(item => { |
| | | if (!item.shortcut || typeof(item.shortcut) !== 'object' || item.shortcut.length === 0 || istrigger) return |
| | | |
| | | if (preKey === item.shortcut[0] && keyCode === item.shortcut[1]) { |
| | | actions.some(item => { |
| | | if (Array.isArray(item.shortcut) && preKey === item.shortcut[0] && keyCode === item.shortcut[1]) { |
| | | e.preventDefault() |
| | | istrigger = true |
| | | |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: this.props.MenuID, |
| | | button: item, |
| | | data: null |
| | | triggerId = item.uuid |
| | | return true |
| | | } |
| | | }) |
| | | } |
| | | return false |
| | | }) |
| | | |
| | | if (istrigger) return |
| | | if (triggerId) { |
| | | MKEmitter.emit('triggerBtnId', triggerId) |
| | | return |
| | | } |
| | | |
| | | Object.keys(userConfig).forEach(key => { |
| | | if (key === this.props.MenuID || !userConfig[key].action || istrigger) return |
| | | Object.keys(userConfig).some(key => { |
| | | if (key === this.props.MenuID || !userConfig[key].action) return false |
| | | |
| | | let _actions = userConfig[key].action |
| | | |
| | | Object.keys(_actions).forEach(btnkey => { |
| | | Object.keys(_actions).some(btnkey => { |
| | | let item = _actions[btnkey] |
| | | |
| | | if (!item.shortcut || typeof(item.shortcut) !== 'object' || item.shortcut.length === 0 || istrigger) return |
| | | |
| | | if (preKey === item.shortcut[0] && keyCode === item.shortcut[1]) { |
| | | if (Array.isArray(item.shortcut) && preKey === item.shortcut[0] && keyCode === item.shortcut[1]) { |
| | | e.preventDefault() |
| | | istrigger = true |
| | | triggerId = btnkey |
| | | |
| | | let _groupId = '' |
| | | let _ActiveTabId = '' |
| | | config.tabgroups.forEach(group => { |
| | | if (group.sublist.length === 0) return |
| | | |
| | | let _tab = group.sublist.filter(tab => tab.uuid === key)[0] |
| | | if (_tab) { |
| | | |
| | | if (!_tab) return |
| | | |
| | | _groupId = group.uuid |
| | | _ActiveTabId = _tab.uuid |
| | | } |
| | | }) |
| | | |
| | | if (this.state.tabActive[_groupId] === _ActiveTabId) { |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: key, |
| | | button: {...item, uuid: btnkey}, |
| | | data: null |
| | | } |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | tabActive: {...this.state.tabActive, [_groupId]: _ActiveTabId} |
| | | }, () => { |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: key, |
| | | button: {...item, uuid: btnkey}, |
| | | data: null |
| | | } |
| | | MKEmitter.emit('triggerBtnId', triggerId) |
| | | }) |
| | | }) |
| | | |
| | | return true |
| | | } |
| | | } |
| | | return false |
| | | }) |
| | | |
| | | if (triggerId) return true |
| | | return false |
| | | }) |
| | | } |
| | | } |
| | |
| | | return item |
| | | }), |
| | | total: result.total, |
| | | selectedData: [], |
| | | loading: false, |
| | | pickup: false, |
| | | BIDs: { |
| | |
| | | this.getStatFieldsValue() |
| | | }) |
| | | } else { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + 'mainTable') // 列表重置 |
| | | this.setState({ |
| | | resetTable: !this.state.resetTable, |
| | | selectedData: [], |
| | | pageIndex: 1, |
| | | search: searches |
| | | }, () => { |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | selectedData: [], |
| | | pageIndex: pagination.current, |
| | | pageSize: pagination.pageSize, |
| | | orderBy: (sorter.field && sorter.order) ? `${sorter.field} ${sorter.order}` : '' |
| | |
| | | * @description 表格刷新 |
| | | */ |
| | | reloadtable = () => { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + 'mainTable') // 列表重置 |
| | | this.setState({ |
| | | resetTable: !this.state.resetTable, |
| | | selectedData: [], |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadmaindata() |
| | |
| | | */ |
| | | changeSelectedData = (selectedData) => { |
| | | this.setState({selectedData}) |
| | | } |
| | | |
| | | /** |
| | | * @description 表格中,按钮触发事件传递 |
| | | */ |
| | | buttonTrigger = (btn, record) => { |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: this.props.MenuID, |
| | | button: btn, |
| | | data: record |
| | | } |
| | | }) |
| | | } |
| | | |
| | | /** |
| | |
| | | |
| | | render() { |
| | | const { menuType } = this.props |
| | | const { BID, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, pickup, config, triggerBtn, userConfig, tabActive, chartId, search, selectedData } = this.state |
| | | const { BID, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, pickup, config, userConfig, tabActive, chartId, search, selectedData } = this.state |
| | | |
| | | return ( |
| | | <div className="commontable" id={this.state.ContainerId}> |
| | |
| | | setting={setting} |
| | | actions={actions} |
| | | dict={this.state.dict} |
| | | triggerBtn={triggerBtn} |
| | | MenuID={this.props.MenuID} |
| | | selectedData={selectedData} |
| | | logcolumns={this.state.logcolumns} |
| | | ContainerId={this.state.ContainerId} |
| | | operations={config.gridBtn.operations || []} |
| | | refreshdata={this.refreshbyaction} |
| | | getexceloutparam={this.getexceloutparam} |
| | | /> |
| | |
| | | } |
| | | <MainTable |
| | | tableId="mainTable" |
| | | BID={BID} |
| | | pickup={pickup} |
| | | config={config} |
| | | setting={setting} |
| | |
| | | total={this.state.total} |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | | statFValue={this.state.statFValue} |
| | | refreshdata={this.refreshbytable} |
| | | buttonTrigger={this.buttonTrigger} |
| | | logcolumns={this.state.logcolumns} |
| | | statFValue={this.state.statFValue} |
| | | handleTableId={this.handleTableId} |
| | | resetTable={this.state.resetTable} |
| | | ContainerId={this.state.ContainerId} |
| | | refreshbyaction={this.refreshbyaction} |
| | | chgSelectData={this.changeSelectedData} |
| | | /> |
| | | </div> |
| | |
| | | ) |
| | | } else if (item.chartType === 'card') { |
| | | return ( |
| | | <Col span={item.width} key={item.uuid}> |
| | | <Col className="card-view" span={item.width} key={item.uuid}> |
| | | <CardComponent |
| | | BID={BID} |
| | | plot={item} |
| | |
| | | MenuID={_tab.linkTab} |
| | | mainSearch={_tab.searchPass === 'true' ? search : null} |
| | | userConfig={userConfig ? userConfig[_tab.uuid] : null} |
| | | triggerBtn={triggerBtn} |
| | | SupMenuID={this.props.MenuID} |
| | | refreshtabs={this.state.refreshtabs} |
| | | ContainerId={this.state.ContainerId} |
| | |
| | | >.ant-col { |
| | | min-height: 100px; |
| | | } |
| | | >.card-view.ant-col-24 { |
| | | padding: 0!important; |
| | | .card-row-box { |
| | | padding: 0; |
| | | } |
| | | } |
| | | .chart-title { |
| | | position: relative; |
| | | color: rgba(0, 0, 0, 0.65); |
| | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import NotFount from '@/components/404' |
| | | import MKEmitter from '@/utils/events.js' |
| | | |
| | | import './index.scss' |
| | | |
| | |
| | | handleMainTable: PropTypes.func, // 刷新主表 |
| | | refreshtabs: PropTypes.any, // 标签刷新控制 |
| | | userConfig: PropTypes.any, // 用户自定义设置 |
| | | triggerBtn: PropTypes.any // 快捷键或点击行按钮触发事件 |
| | | } |
| | | |
| | | state = { |
| | |
| | | setting: null, // 页面全局设置:数据源、按钮及显示列固定、主键等 |
| | | data: null, // 列表数据集 |
| | | selectedData: [], // 已选表格数据 |
| | | resetTable: false, // 表格重置,值在true与false之间切换,切换时表格重置 |
| | | total: 0, // 总数 |
| | | loading: false, // 列表数据加载中 |
| | | pageIndex: 1, // 页码 |
| | |
| | | orderBy: '', // 排序 |
| | | search: [], // 搜索条件数组,使用时需分场景处理 |
| | | pickup: false, // 子表数据隐藏显示切换 |
| | | triggerBtn: null, // 按钮触发 |
| | | chartId: '', // 展开图表ID |
| | | statFields: [], // 合计字段 |
| | | statFValue: [] // 合计值 |
| | |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (this.state.config && this.props.Tab.supMenu && !is(fromJS(this.props.BID), fromJS(nextProps.BID))) { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1, |
| | | selectedData: [], |
| | | resetTable: !this.state.resetTable, |
| | | pageIndex: 1 |
| | | }, () => { |
| | | if (this.state.setting) { |
| | | this.loadmaindata(nextProps.BID, 'refresh') |
| | |
| | | }) |
| | | } else if (this.state.config && nextProps.refreshtabs && nextProps.refreshtabs.includes(this.props.Tab.uuid)) { |
| | | this.reloadtable() |
| | | } else if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.parentId === this.props.Tab.uuid) { |
| | | let trigger = nextProps.triggerBtn |
| | | |
| | | trigger.parentId = this.props.MenuID |
| | | |
| | | this.setState({ |
| | | triggerBtn: trigger |
| | | }) |
| | | } else if (!this.props.Tab.supMenu && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { |
| | | if (this.state.setting) { |
| | | this.setState({}, () => { |
| | |
| | | return item |
| | | }), |
| | | total: result.total, |
| | | selectedData: [], |
| | | pickup: false, |
| | | loading: false |
| | | }) |
| | |
| | | * 含有初始不加载的页面,修改设置 |
| | | */ |
| | | refreshbysearch = (searches) => { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1, |
| | | search: searches, |
| | | resetTable: !this.state.resetTable, |
| | | selectedData: [], |
| | | }, () => { |
| | | this.loadmaindata() |
| | | this.getStatFieldsValue() |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | selectedData: [], |
| | | pageIndex: pagination.current, |
| | | pageSize: pagination.pageSize, |
| | | orderBy: (sorter.field && sorter.order) ? `${sorter.field} ${sorter.order}` : '' |
| | |
| | | * @description 表格刷新 |
| | | */ |
| | | reloadtable = () => { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1, |
| | | selectedData: [], |
| | | resetTable: !this.state.resetTable |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadmaindata() |
| | | this.getStatFieldsValue() |
| | |
| | | reloadview = () => { |
| | | this.setState({ loadingview: true, viewlost: false, lostmsg: '', config: null, searchlist: null, actions: null, |
| | | columns: null, arr_field: '', setting: null, data: null, total: 0, loading: false, pageIndex: 1, pageSize: 10, |
| | | orderBy: '', search: [], triggerBtn: null |
| | | orderBy: '', search: [] |
| | | }, () => { |
| | | this.loadconfig() |
| | | }) |
| | |
| | | } |
| | | |
| | | /** |
| | | * @description 表格中,按钮触发事件传递 |
| | | */ |
| | | buttonTrigger = (btn, record) => { |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: this.props.MenuID, |
| | | button: btn, |
| | | data: record |
| | | } |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 表格Id变化 |
| | | */ |
| | | handleTableId = (type = this.props.Tab.uuid, id = '', data = '') => { |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { config, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, pickup, triggerBtn, chartId, selectedData } = this.state |
| | | const { config, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, pickup, chartId, selectedData } = this.state |
| | | |
| | | return ( |
| | | <div className="subtable" id={'subtable' + this.props.MenuID}> |
| | |
| | | actions={actions} |
| | | Tab={this.props.Tab} |
| | | BID={this.props.BID} |
| | | triggerBtn={triggerBtn} |
| | | BData={this.props.BData} |
| | | MenuID={this.props.MenuID} |
| | | selectedData={selectedData} |
| | | logcolumns={this.state.logcolumns} |
| | | refreshdata={this.refreshbyaction} |
| | | ContainerId={this.props.ContainerId} |
| | | operations={config.gridBtn.operations || []} |
| | | getexceloutparam={this.getexceloutparam} |
| | | /> |
| | | </div> |
| | |
| | | setting={setting} |
| | | columns={columns} |
| | | pageSize={pageSize} |
| | | BID={this.props.BID} |
| | | dict={this.state.dict} |
| | | data={this.state.data} |
| | | BData={this.props.BData} |
| | | total={this.state.total} |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | | statFValue={this.state.statFValue} |
| | | refreshdata={this.refreshbytable} |
| | | buttonTrigger={this.buttonTrigger} |
| | | logcolumns={this.state.logcolumns} |
| | | statFValue={this.state.statFValue} |
| | | handleTableId={this.handleTableId} |
| | | resetTable={this.state.resetTable} |
| | | ContainerId={this.props.ContainerId} |
| | | refreshbyaction={this.refreshbyaction} |
| | | chgSelectData={this.changeSelectedData} |
| | | /> |
| | | </div> |
| | |
| | | >.ant-col { |
| | | min-height: 100px; |
| | | } |
| | | >.card-view.ant-col-24 { |
| | | padding: 0!important; |
| | | .card-row-box { |
| | | padding: 0; |
| | | } |
| | | } |
| | | .chart-title { |
| | | position: relative; |
| | | color: rgba(0, 0, 0, 0.65); |
| | |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import SubSearch from '@/tabviews/zshare/topSearch' |
| | | import NotFount from '@/components/404' |
| | | import MKEmitter from '@/utils/events.js' |
| | | |
| | | import './index.scss' |
| | | |
| | |
| | | setting: null, // 页面全局设置:数据源、按钮及显示列固定、主键等 |
| | | data: null, // 列表数据集 |
| | | selectedData: [], // 已选表格数据 |
| | | resetTable: false, // 表格重置,值在true与false之间切换,切换时表格重置 |
| | | total: 0, // 总数 |
| | | loading: false, // 列表数据加载中 |
| | | pageIndex: 1, // 页码 |
| | | pageSize: 10, // 每页数据条数 |
| | | orderBy: '', // 排序 |
| | | search: '', // 搜索条件数组,使用时需分场景处理 |
| | | triggerBtn: null, // 按钮触发 |
| | | chartId: '', // 展开图表ID |
| | | statFields: [], // 合计字段 |
| | | statFValue: [] // 合计值 |
| | |
| | | return item |
| | | }), |
| | | total: result.total, |
| | | selectedData: [], |
| | | loading: false |
| | | }) |
| | | } else { |
| | |
| | | * 含有初始不加载的页面,修改设置 |
| | | */ |
| | | refreshbysearch = (searches) => { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1, |
| | | search: searches, |
| | | selectedData: [], |
| | | resetTable: !this.state.resetTable |
| | | search: searches |
| | | }, () => { |
| | | this.loadmaindata() |
| | | this.getStatFieldsValue() |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | selectedData: [], |
| | | pageIndex: pagination.current, |
| | | pageSize: pagination.pageSize, |
| | | orderBy: (sorter.field && sorter.order) ? `${sorter.field} ${sorter.order}` : '' |
| | |
| | | * @description 表格刷新 |
| | | */ |
| | | reloadtable = () => { |
| | | MKEmitter.emit('resetTable', this.props.MenuID + this.props.Tab.uuid) // 列表重置 |
| | | this.setState({ |
| | | pageIndex: 1, |
| | | selectedData: [], |
| | | resetTable: !this.state.resetTable |
| | | pageIndex: 1 |
| | | }, () => { |
| | | this.loadmaindata() |
| | | this.getStatFieldsValue() |
| | |
| | | */ |
| | | reloadview = () => { |
| | | this.setState({ loadingview: true, viewlost: false, lostmsg: '', config: null, searchlist: null, actions: null, columns: null, |
| | | arr_field: '', setting: null, data: null, total: 0, loading: false, pageIndex: 1, pageSize: 10, orderBy: '', search: '', |
| | | triggerBtn: null |
| | | arr_field: '', setting: null, data: null, total: 0, loading: false, pageIndex: 1, pageSize: 10, orderBy: '', search: '' |
| | | }, () => { |
| | | this.loadconfig() |
| | | }) |
| | |
| | | } else if (position === 'trigger') { // 日历子表触发标签点击事件 |
| | | this.props.closeModalView && this.props.closeModalView() |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 表格中,按钮触发事件传递 |
| | | */ |
| | | buttonTrigger = (btn, record) => { |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: this.props.SupMenuID, |
| | | button: btn, |
| | | data: record |
| | | } |
| | | }) |
| | | } |
| | | |
| | | /** |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { config, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, triggerBtn, chartId, selectedData } = this.state |
| | | const { config, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, chartId, selectedData } = this.state |
| | | |
| | | return ( |
| | | <div className="subtabtable" id={'subtabtable' + this.props.MenuID}> |
| | |
| | | {config.charts.length > 1 ? <p className="chart-table chart-title">{item.title}</p> : null} |
| | | <div style={{minHeight: '25px'}}> |
| | | <SubAction |
| | | triggerBtn={triggerBtn} |
| | | setting={setting} |
| | | actions={actions} |
| | | BID={this.props.BID} |
| | |
| | | selectedData={selectedData} |
| | | MenuID={this.props.SupMenuID} |
| | | logcolumns={this.state.logcolumns} |
| | | operations={config.gridBtn.operations || []} |
| | | refreshdata={this.refreshbyaction} |
| | | getexceloutparam={this.getexceloutparam} |
| | | /> |
| | | </div> |
| | | <SubTable |
| | | tableId="" |
| | | tableId={this.props.Tab.uuid} |
| | | config={config} |
| | | setting={setting} |
| | | columns={columns} |
| | | pageSize={pageSize} |
| | | BID={this.props.BID} |
| | | data={this.state.data} |
| | | dict={this.state.dict} |
| | | BData={this.props.BData} |
| | | total={this.state.total} |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | | statFValue={this.state.statFValue} |
| | | refreshdata={this.refreshbytable} |
| | | buttonTrigger={this.buttonTrigger} |
| | | resetTable={this.state.resetTable} |
| | | logcolumns={this.state.logcolumns} |
| | | statFValue={this.state.statFValue} |
| | | refreshbyaction={this.refreshbyaction} |
| | | chgSelectData={this.changeSelectedData} |
| | | handleTableId={() => {}} |
| | | /> |
| | |
| | | data={this.state.data} |
| | | loading={this.state.loading} |
| | | logcolumns={this.state.logcolumns} |
| | | buttonTrigger={this.buttonTrigger} |
| | | refreshdata={this.refreshbyaction} |
| | | handleTableId={() => {}} |
| | | /> |
| | |
| | | >.ant-col { |
| | | min-height: 100px; |
| | | } |
| | | >.card-view.ant-col-24 { |
| | | padding: 0!important; |
| | | .card-row-box { |
| | | padding: 0; |
| | | } |
| | | } |
| | | .chart-title { |
| | | position: relative; |
| | | color: rgba(0, 0, 0, 0.65); |
| | |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import Utils from '@/utils/utils.js' |
| | | import UtilsDM from '@/utils/utils-datamanage.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import {refreshTabView, modifyTabview} from '@/store/action' |
| | |
| | | confirmLoading: false,// 自定义设置模态框加载中 |
| | | revertLoading: false, // 恢复默认设置 |
| | | settingVisible: false,// 自定义设置模态框 |
| | | triggerBtn: null, // 点击表格中或快捷键触发的按钮 |
| | | tabActive: null, // 标签页展开控制 |
| | | expandedKeys: [], // 展开的树节点 |
| | | selectedKeys: [] // 选中的树节点 |
| | |
| | | |
| | | if (!preKey) return |
| | | |
| | | let istrigger = false |
| | | let triggerId = '' |
| | | |
| | | Object.keys(userConfig).forEach(key => { |
| | | if (key === this.props.MenuID || !userConfig[key].action || istrigger) return |
| | | Object.keys(userConfig).some(key => { |
| | | if (key === this.props.MenuID || !userConfig[key].action) return false |
| | | |
| | | let _actions = userConfig[key].action |
| | | |
| | | Object.keys(_actions).forEach(btnkey => { |
| | | Object.keys(_actions).some(btnkey => { |
| | | let item = _actions[btnkey] |
| | | |
| | | if (!item.shortcut || typeof(item.shortcut) !== 'object' || item.shortcut.length === 0 || istrigger) return |
| | | |
| | | if (preKey === item.shortcut[0] && keyCode === item.shortcut[1]) { |
| | | if (Array.isArray(item.shortcut) && preKey === item.shortcut[0] && keyCode === item.shortcut[1]) { |
| | | e.preventDefault() |
| | | istrigger = true |
| | | triggerId = btnkey |
| | | |
| | | let _groupId = '' |
| | | let _ActiveTabId = '' |
| | | config.tabgroups.forEach(group => { |
| | | if (group.sublist.length === 0) return |
| | | |
| | | let _tab = group.sublist.filter(tab => tab.uuid === key)[0] |
| | | if (_tab) { |
| | | |
| | | if (!_tab) return |
| | | |
| | | _groupId = group.uuid |
| | | _ActiveTabId = _tab.uuid |
| | | } |
| | | }) |
| | | |
| | | if (this.state.tabActive[_groupId] === _ActiveTabId) { |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: key, |
| | | button: {...item, uuid: btnkey}, |
| | | data: null |
| | | } |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | tabActive: {...this.state.tabActive, [_groupId]: _ActiveTabId} |
| | | }, () => { |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: key, |
| | | button: {...item, uuid: btnkey}, |
| | | data: null |
| | | } |
| | | MKEmitter.emit('triggerBtnId', triggerId) |
| | | }) |
| | | }) |
| | | |
| | | return true |
| | | } |
| | | } |
| | | return false |
| | | }) |
| | | |
| | | if (triggerId) return true |
| | | return false |
| | | }) |
| | | } |
| | | } |
| | |
| | | |
| | | render() { |
| | | const { menuType } = this.props |
| | | const { setting, loadingview, viewlost, config, triggerBtn, userConfig, tabActive, tabgroups, treeNodes, treedata, expandedKeys, selectedKeys } = this.state |
| | | const { setting, loadingview, viewlost, config, userConfig, tabActive, tabgroups, treeNodes, treedata, expandedKeys, selectedKeys } = this.state |
| | | |
| | | return ( |
| | | <div className="tree-page" id={this.state.ContainerId}> |
| | |
| | | MenuID={_tab.linkTab} |
| | | mainSearch={null} |
| | | userConfig={userConfig ? userConfig[_tab.uuid] : null} |
| | | triggerBtn={triggerBtn} |
| | | SupMenuID={this.props.MenuID} |
| | | refreshtabs={this.state.refreshtabs} |
| | | ContainerId={this.state.ContainerId} |
| | |
| | | import Api from '@/api' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | const { confirm } = Modal |
| | |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | updateStatus: PropTypes.func, // 按钮状态更新 |
| | | triggerBtn: PropTypes.any |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS |
| | | } |
| | | |
| | | /** |
| | | * @description 外部触发按钮点击 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) { |
| | | this.actionTrigger(nextProps.triggerBtn.data) |
| | | } |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | loading: false |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | } |
| | | |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (record) => { |
| | | const { setting, selectedData } = this.props |
| | | let data = [] |
| | | actionTrigger = (triggerId) => { |
| | | const { setting, selectedData, btn } = this.props |
| | | const { loading } = this.state |
| | | |
| | | if (record) { // 表格中触发按钮 |
| | | data = [record] |
| | | } else { |
| | | data = selectedData || [] |
| | | } |
| | | if ((triggerId && btn.uuid !== triggerId) || loading) return |
| | | |
| | | let data = selectedData || [] |
| | | |
| | | if (data.length !== 1) { |
| | | // 需要选择单行时,校验数据 |
| | |
| | | |
| | | let primaryId = data[0][setting.primaryKey] || '' |
| | | |
| | | this.props.updateStatus('start') |
| | | this.setState({loading: true}) |
| | | this.changeUser(primaryId) |
| | | } |
| | | |
| | |
| | | message: res.message || res.ErrMesg, |
| | | duration: btn.verify && btn.verify.ntime ? btn.verify.ntime : 10 |
| | | }) |
| | | _this.props.updateStatus('over') |
| | | _this.setState({loading: false}) |
| | | } |
| | | }, () => { |
| | | resolve() |
| | | _this.props.updateStatus('over') |
| | | _this.setState({loading: false}) |
| | | }) |
| | | }) |
| | | }, |
| | | onCancel() { |
| | | _this.props.updateStatus('over') |
| | | _this.setState({loading: false}) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | render() { |
| | | const { btn, show } = this.props |
| | | const { loading } = this.state |
| | | |
| | | if (show === 'actionList') { |
| | | return ( |
| | | <div className="mk-btn-wrap"> |
| | | {!show ? <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | <Button |
| | | icon={btn.icon} |
| | | loading={loading} |
| | | className={'mk-btn mk-' + btn.class} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{btn.label}</Button> : null} |
| | | {show === 'icon' ? <Button className="action-cell" icon={btn.icon || 'dash'} onClick={() => {this.actionTrigger()}}></Button> : null} |
| | | {show === 'text' ? <Button className="action-cell" onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | {show === 'all' ? <Button className="action-cell" icon={btn.icon || ''} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | </div> |
| | | >{btn.label}</Button> |
| | | ) |
| | | } else { // icon、text、 all 卡片 |
| | | return ( |
| | | <Button |
| | | type="link" |
| | | loading={loading} |
| | | icon={show === 'text' ? '' : (btn.icon || '')} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{show === 'icon' && btn.icon ? '' : btn.label}</Button> |
| | | ) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .mk-btn-wrap { |
| | | display: inline-block; |
| | | .action-cell { |
| | | border: 0; |
| | | background: transparent !important; |
| | | } |
| | | .action-cell[ant-click-animating-without-extra-node="true"]::after { |
| | | display: none!important; |
| | | } |
| | | } |
| | | |
| | |
| | | import Api from '@/api' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | class ExcelInButton extends Component { |
| | |
| | | btn: PropTypes.object, // 按钮 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | updateStatus: PropTypes.func, // 按钮状态更新 |
| | | triggerBtn: PropTypes.any, |
| | | } |
| | | |
| | | state = { |
| | |
| | | primaryId: '', |
| | | } |
| | | |
| | | /** |
| | | * @description 外部触发按钮点击 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) { |
| | | this.actionTrigger(nextProps.triggerBtn.data) |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | /** |
| | |
| | | this.setState({ |
| | | loading: true |
| | | }) |
| | | this.props.updateStatus('start') |
| | | } else if (type === 'over') { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | this.props.updateStatus('over') |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (record) => { |
| | | actionTrigger = (triggerId) => { |
| | | const { setting, Tab, BID, btn, selectedData } = this.props |
| | | const { loading } = this.state |
| | | |
| | | if ((triggerId && btn.uuid !== triggerId) || loading) return |
| | | |
| | | if (Tab && Tab.supMenu && !BID) { |
| | | notification.warning({ |
| | |
| | | return |
| | | } |
| | | |
| | | let data = [] |
| | | |
| | | if (record) { // 表格中触发按钮 |
| | | data = [record] |
| | | } else { |
| | | data = selectedData || [] |
| | | } |
| | | let data = selectedData || [] |
| | | |
| | | if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | // 需要选择单行时,校验数据 |
| | |
| | | const { btn, show } = this.props |
| | | const { loading } = this.state |
| | | |
| | | return ( |
| | | <div className="mk-btn-wrap"> |
| | | {!show ? <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | if (show === 'actionList') { |
| | | return <div style={{display: 'inline-block'}}> |
| | | <Button |
| | | icon={btn.icon} |
| | | onClick={() => {this.actionTrigger()}} |
| | | loading={loading} |
| | | >{btn.label}</Button> : null} |
| | | {show === 'icon' ? <Button |
| | | className="import-icon" |
| | | icon="upload" |
| | | className={'mk-btn mk-' + btn.class} |
| | | onClick={() => {this.actionTrigger()}} |
| | | loading={loading} |
| | | title={btn.label} |
| | | ></Button> : null} |
| | | >{btn.label}</Button> |
| | | <ExcelIn btn={btn} triggerExcelIn={() => this.updateStatus('start')} returndata={this.getexceldata} ref="excelIn" /> |
| | | </div> |
| | | ) |
| | | } else { // icon、text、 all 卡片 |
| | | return <div style={{display: 'inline-block'}}> |
| | | <Button |
| | | type="link" |
| | | loading={loading} |
| | | icon={show === 'text' ? '' : (show === 'icon' ? (btn.icon || 'upload') : (btn.icon || ''))} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{show === 'icon' ? '' : btn.label}</Button> |
| | | <ExcelIn btn={btn} triggerExcelIn={() => this.updateStatus('start')} returndata={this.getexceldata} ref="excelIn" /> |
| | | </div> |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .mk-btn-wrap { |
| | | display: inline-block; |
| | | |
| | | .import-icon { |
| | | border: 0; |
| | | box-shadow: unset; |
| | | } |
| | | } |
| | |
| | | import Api from '@/api' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | class ExcelOutButton extends Component { |
| | |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | updateStatus: PropTypes.func, // 按钮状态更新 |
| | | getexceloutparam: PropTypes.func, // 获取表格中参数 |
| | | triggerBtn: PropTypes.any, |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | excelName: '', |
| | | excelName: '', // 文件名 |
| | | search: '', // 搜索条件 |
| | | loading: false |
| | | } |
| | | |
| | | /** |
| | | * @description 外部触发按钮点击 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) { |
| | | this.actionTrigger() |
| | | } |
| | | loading: false // 导出中 |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | } |
| | | |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | /** |
| | |
| | | loading: true, |
| | | excelName: name |
| | | }) |
| | | this.props.updateStatus('start') |
| | | } else if (type === 'over') { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | this.props.updateStatus('over') |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = () => { |
| | | actionTrigger = (triggerId) => { |
| | | const { setting, Tab, BID, btn } = this.props |
| | | const { loading } = this.state |
| | | |
| | | if ((triggerId && btn.uuid !== triggerId) || loading) return |
| | | |
| | | if (Tab && Tab.supMenu && !BID) { |
| | | notification.warning({ |
| | |
| | | const { btn, show } = this.props |
| | | const { loading } = this.state |
| | | |
| | | if (show === 'actionList') { |
| | | return ( |
| | | <div className="mk-btn-wrap"> |
| | | {!show ? <Button |
| | | <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | icon={btn.icon} |
| | | onClick={() => {this.actionTrigger()}} |
| | | loading={loading} |
| | | >{btn.label}</Button> : null} |
| | | {show === 'icon' ? <Button |
| | | className="export-icon" |
| | | icon="download" |
| | | onClick={() => {this.actionTrigger()}} |
| | | loading={loading} |
| | | title={btn.label} |
| | | ></Button> : null} |
| | | </div> |
| | | >{btn.label}</Button> |
| | | ) |
| | | } else { // icon、text、 all 卡片 |
| | | return ( |
| | | <Button |
| | | type="link" |
| | | loading={loading} |
| | | icon={show === 'text' ? '' : (show === 'icon' ? (btn.icon || 'download') : (btn.icon || ''))} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{show === 'icon' ? '' : btn.label}</Button> |
| | | ) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .mk-btn-wrap { |
| | | display: inline-block; |
| | | |
| | | .export-icon { |
| | | border: 0; |
| | | box-shadow: unset; |
| | | } |
| | | } |
| | |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | actions: PropTypes.array, // 按钮组 |
| | | operations: PropTypes.array, // 表格中按钮组 |
| | | logcolumns: PropTypes.array, // 显示列 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | ContainerId: PropTypes.any, // tab页面ID,用于弹窗控制 |
| | | refreshdata: PropTypes.func, // 执行完成后数据刷新 |
| | | getexceloutparam: PropTypes.func, // 获取excel导出数据 |
| | | triggerBtn: PropTypes.any, // 快捷键触发的按钮 |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | running: false, |
| | | triggerBtn: null |
| | | } |
| | | |
| | | /** |
| | | * @description 上级菜单id变化时,刷新数据 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.parentId === this.props.MenuID) { |
| | | if (!this.state.running) { |
| | | this.setState({ |
| | | triggerBtn: nextProps.triggerBtn |
| | | }) |
| | | } |
| | | } |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | updateStatus = (type, positon, unclose) => { |
| | | if (type === 'start') { |
| | | this.setState({running: true}) |
| | | } else if (type === 'over') { |
| | | this.setState({running: false}) |
| | | } else if (type === 'refresh') { |
| | | updateStatus = (type, positon) => { |
| | | if (type === 'refresh') { |
| | | this.props.refreshdata(positon) |
| | | if (!unclose) { |
| | | this.setState({running: false}) |
| | | } |
| | | } else if (type === 'trigger') { // 日历中的新标签页触发事件 |
| | | this.props.refreshdata('trigger') |
| | | } |
| | |
| | | return ( |
| | | <NormalButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | |
| | | columns={logcolumns} |
| | | ContainerId={ContainerId} |
| | | selectedData={selectedData} |
| | | triggerBtn={this.state.triggerBtn} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | |
| | | return ( |
| | | <ExcelInButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | triggerBtn={this.state.triggerBtn} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | |
| | | return ( |
| | | <ExcelOutButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | setting={setting} |
| | | triggerBtn={this.state.triggerBtn} |
| | | getexceloutparam={getexceloutparam} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | |
| | | return ( |
| | | <PopupButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | triggerBtn={this.state.triggerBtn} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | |
| | | return ( |
| | | <TabButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | btn={item} |
| | | MenuID={MenuID} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | triggerBtn={this.state.triggerBtn} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | |
| | | return ( |
| | | <NewPageButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | btn={item} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | updateStatus={this.updateStatus} |
| | | triggerBtn={this.state.triggerBtn} |
| | | /> |
| | | ) |
| | | } else if (item.OpenType === 'funcbutton') { |
| | |
| | | return ( |
| | | <ChangeUserButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | BID={BID} |
| | | btn={item} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | triggerBtn={this.state.triggerBtn} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | |
| | | return ( |
| | | <PrintButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | |
| | | setting={setting} |
| | | ContainerId={ContainerId} |
| | | selectedData={selectedData} |
| | | triggerBtn={this.state.triggerBtn} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { setting, MenuID, actions, operations } = this.props |
| | | const { setting, MenuID, actions } = this.props |
| | | let fixed = setting.actionfixed && setting.tabType === 'main' // 按钮是否固定在头部 |
| | | |
| | | if (fixed) { |
| | |
| | | <Affix offsetTop={48}> |
| | | <div className="button-list toolbar-button" id={fixed ? MenuID + 'mainaction' : ''}> |
| | | {this.getButtonList(actions)} |
| | | {operations && operations.length > 0 ? <div className="grid-button-list">{this.getButtonList(operations)}</div> : null} |
| | | </div> |
| | | </Affix> |
| | | ) |
| | |
| | | return ( |
| | | <div className="button-list toolbar-button" id={fixed ? MenuID + 'mainaction' : ''}> |
| | | {this.getButtonList(actions)} |
| | | {operations && operations.length > 0 ? <div className="grid-button-list">{this.getButtonList(operations)}</div> : null} |
| | | </div> |
| | | ) |
| | | } |
| | |
| | | |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | const { confirm } = Modal |
| | |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | updateStatus: PropTypes.func, // 按钮状态更新 |
| | | triggerBtn: PropTypes.any, |
| | | } |
| | | |
| | | state = { |
| | |
| | | visible: false |
| | | } |
| | | |
| | | /** |
| | | * @description 外部触发按钮点击 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) { |
| | | this.actionTrigger(nextProps.triggerBtn.data) |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (record) => { |
| | | actionTrigger = (triggerId) => { |
| | | const { setting, btn, selectedData } = this.props |
| | | const _this = this |
| | | let data = [] |
| | | |
| | | if (record) { // 表格中触发按钮 |
| | | data = [record] |
| | | } else { |
| | | data = selectedData || [] |
| | | } |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | let data = selectedData || [] |
| | | |
| | | if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | // 需要选择单行时,校验数据 |
| | |
| | | render() { |
| | | const { btn, show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | return ( |
| | | <div className="mk-btn-wrap"> |
| | | {!show ? <Button |
| | | <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | icon={btn.icon} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{btn.label}</Button> : null} |
| | | {show === 'icon' ? <Button className="action-cell" icon={btn.icon || 'dash'} onClick={() => {this.actionTrigger()}}></Button> : null} |
| | | {show === 'text' ? <Button className="action-cell" onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | {show === 'all' ? <Button className="action-cell" icon={btn.icon || ''} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | </div> |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{btn.label}</Button> |
| | | ) |
| | | } else { // icon、text、 all 卡片 |
| | | return ( |
| | | <Button |
| | | type="link" |
| | | icon={show === 'text' ? '' : (btn.icon || '')} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{show === 'icon' && btn.icon ? '' : btn.label}</Button> |
| | | ) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .mk-btn-wrap { |
| | | display: inline-block; |
| | | .action-cell { |
| | | border: 0; |
| | | background: transparent !important; |
| | | } |
| | | .action-cell[ant-click-animating-without-extra-node="true"]::after { |
| | | display: none!important; |
| | | } |
| | | } |
| | | |
| | | .pay-query { |
| | | .ant-modal-confirm-btns { |
| | | width: 100%; |
| | |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | const MutilForm = asyncSpinComponent(() => import('@/tabviews/zshare/mutilform')) |
| | |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | ContainerId: PropTypes.any, // tab页面ID,用于弹窗控制 |
| | | updateStatus: PropTypes.func, // 按钮状态更新 |
| | | triggerBtn: PropTypes.any, |
| | | } |
| | | |
| | | state = { |
| | |
| | | loadingNumber: '' |
| | | } |
| | | |
| | | /** |
| | | * @description 外部触发按钮点击 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) { |
| | | this.actionTrigger(nextProps.triggerBtn.data) |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | /** |
| | |
| | | this.setState({ |
| | | loading: true |
| | | }) |
| | | this.props.updateStatus('start') |
| | | } else if (type === 'over') { |
| | | this.setState({ |
| | | loading: false, |
| | | visible: false |
| | | }) |
| | | this.props.updateStatus('over') |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (record) => { |
| | | actionTrigger = (triggerId) => { |
| | | const { setting, Tab, BID, btn, selectedData } = this.props |
| | | const { loading } = this.state |
| | | |
| | | if ((triggerId && btn.uuid !== triggerId) || loading) return |
| | | |
| | | if (Tab && Tab.supMenu && !BID) { |
| | | notification.warning({ |
| | |
| | | } |
| | | |
| | | let _this = this |
| | | let data = [] |
| | | |
| | | if (record) { // 表格中触发按钮 |
| | | data = [record] |
| | | } else { |
| | | data = selectedData || [] |
| | | } |
| | | let data = selectedData || [] |
| | | |
| | | if (btn.Ot !== 'notRequired' && data.length === 0) { |
| | | // 需要选择行时,校验数据 |
| | |
| | | |
| | | } |
| | | |
| | | let _unclose = false |
| | | if (btn.OpenType !== 'pop' || !btnconfig || btnconfig.setting.finish !== 'unclose') { |
| | | this.setState({ |
| | | loading: false, |
| | | visible: false |
| | | }) |
| | | } else { |
| | | _unclose = true |
| | | } |
| | | |
| | | if (btn.verify && btn.verify.noteEnable === 'true') { |
| | | this.sendMessage() |
| | | } |
| | | |
| | | this.props.updateStatus('refresh', btn.execSuccess, _unclose) |
| | | this.props.updateStatus('refresh', btn.execSuccess) |
| | | } |
| | | |
| | | sendMessage = () => { |
| | |
| | | */ |
| | | execError = (res) => { |
| | | const { btn } = this.props |
| | | const { btnconfig } = this.state |
| | | |
| | | if (res.ErrCode === 'E') { |
| | | Modal.error({ |
| | |
| | | message.error(res.message || res.ErrMesg) |
| | | } |
| | | |
| | | let _unclose = false |
| | | if (btn.OpenType === 'pop' && btnconfig && btnconfig.setting.display !== 'prompt') { |
| | | _unclose = true |
| | | } else { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | } |
| | | |
| | | this.props.updateStatus('refresh', btn.execError, _unclose) |
| | | this.props.updateStatus('refresh', btn.execError) |
| | | } |
| | | |
| | | /** |
| | |
| | | const { btn, show } = this.props |
| | | const { loadingNumber, loading } = this.state |
| | | |
| | | return ( |
| | | <div className="mk-btn-wrap"> |
| | | {!show ? <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | if (show === 'actionList') { |
| | | return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}> |
| | | <Button |
| | | icon={btn.icon} |
| | | onClick={() => {this.actionTrigger()}} |
| | | loading={loading} |
| | | >{loadingNumber ? `(${loadingNumber})` : '' + btn.label}</Button> : null} |
| | | {show === 'icon' ? <Button className="action-cell" icon={btn.icon || 'dash'} loading={loading} onClick={() => {this.actionTrigger()}}></Button> : null} |
| | | {show === 'text' ? <Button className="action-cell" loading={loading} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | {show === 'all' ? <Button className="action-cell" icon={btn.icon || ''} loading={loading} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | {show && show.indexOf('plus') > -1 ? <Button className="action-cell" style={{fontSize: show.substring(4) + 'px'}} icon={btn.icon || 'plus'} loading={loading} onClick={() => {this.actionTrigger()}}></Button> : null} |
| | | className={'mk-btn mk-' + btn.class} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{loadingNumber ? `(${loadingNumber})` : '' + btn.label}</Button> |
| | | {this.getModels()} |
| | | </div> |
| | | ) |
| | | } else if (show && show.indexOf('plus') > -1) { |
| | | return <div className="mk-btn-wrap"> |
| | | <Button |
| | | type="link" |
| | | loading={loading} |
| | | icon={btn.icon || 'plus'} |
| | | style={{fontSize: show.substring(4) + 'px'}} |
| | | onClick={() => {this.actionTrigger()}} |
| | | ></Button> |
| | | {this.getModels()} |
| | | </div> |
| | | } else { // icon、text、 all 卡片 |
| | | return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}> |
| | | <Button |
| | | type="link" |
| | | loading={loading} |
| | | icon={show === 'text' ? '' : (btn.icon || '')} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{show === 'icon' && btn.icon ? '' : btn.label}</Button> |
| | | {this.getModels()} |
| | | </div> |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .mk-btn-wrap { |
| | | display: inline-block; |
| | | .action-cell { |
| | | border: 0; |
| | | background: transparent !important; |
| | | } |
| | | .action-cell[ant-click-animating-without-extra-node="true"]::after { |
| | | display: none!important; |
| | | } |
| | | } |
| | |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | const SubTabTable = asyncSpinComponent(() => import('@/tabviews/subtabtable')) |
| | |
| | | btn: PropTypes.object, // 按钮 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | updateStatus: PropTypes.func, // 按钮状态更新 |
| | | triggerBtn: PropTypes.any, |
| | | } |
| | | |
| | | state = { |
| | |
| | | loading: false, |
| | | } |
| | | |
| | | /** |
| | | * @description 外部触发按钮点击 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) { |
| | | this.actionTrigger(nextProps.triggerBtn.data) |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (record) => { |
| | | actionTrigger = (triggerId) => { |
| | | const { setting, Tab, BID, btn, selectedData } = this.props |
| | | const { loading } = this.state |
| | | |
| | | if ((triggerId && btn.uuid !== triggerId) || loading) return |
| | | |
| | | if (Tab && Tab.supMenu && !BID) { |
| | | notification.warning({ |
| | |
| | | return |
| | | } |
| | | |
| | | let data = [] |
| | | |
| | | if (record) { // 表格中触发按钮 |
| | | data = [record] |
| | | } else { |
| | | data = selectedData || [] |
| | | } |
| | | let data = selectedData || [] |
| | | |
| | | if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | // 需要选择单行时,校验数据 |
| | |
| | | primaryId: primaryId, |
| | | visible: true |
| | | }) |
| | | this.props.updateStatus('start') |
| | | } |
| | | |
| | | // 操作后刷新主表 |
| | |
| | | const { loading, popData, primaryId } = this.state |
| | | |
| | | return ( |
| | | <div className="mk-btn-wrap"> |
| | | {!show ? <Button |
| | | <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}> |
| | | {show === 'actionList' ? <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | icon={btn.icon} |
| | | onClick={() => {this.actionTrigger()}} |
| | | loading={loading} |
| | | >{btn.label}</Button> : null} |
| | | {show === 'icon' ? <Button className="action-cell" icon={btn.icon || 'dash'} loading={loading} onClick={() => {this.actionTrigger()}}></Button> : null} |
| | | {show === 'text' ? <Button className="action-cell" loading={loading} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | {show === 'all' ? <Button className="action-cell" icon={btn.icon || ''} loading={loading} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | {['icon', 'text', 'all'].includes(show) ? <Button |
| | | type="link" |
| | | loading={loading} |
| | | icon={show === 'text' ? '' : (btn.icon || '')} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{show === 'icon' && btn.icon ? '' : btn.label}</Button> : null} |
| | | <Modal |
| | | className="popview-modal" |
| | | title={btn.label} |
| | |
| | | .mk-btn-wrap { |
| | | display: inline-block; |
| | | .action-cell { |
| | | border: 0; |
| | | background: transparent !important; |
| | | } |
| | | .action-cell[ant-click-animating-without-extra-node="true"]::after { |
| | | display: none!important; |
| | | } |
| | | } |
| | | |
| | |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | const MutilForm = asyncSpinComponent(() => import('@/tabviews/zshare/mutilform')) |
| | |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | ContainerId: PropTypes.any, // tab页面ID,用于弹窗控制 |
| | | updateStatus: PropTypes.func, // 按钮状态更新 |
| | | triggerBtn: PropTypes.any, |
| | | } |
| | | |
| | | state = { |
| | |
| | | loadingNumber: '' |
| | | } |
| | | |
| | | /** |
| | | * @description 外部触发按钮点击 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) { |
| | | this.actionTrigger(nextProps.triggerBtn.data) |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | /** |
| | |
| | | this.setState({ |
| | | loading: true |
| | | }) |
| | | this.props.updateStatus('start') |
| | | } else if (type === 'over') { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | this.props.updateStatus('over') |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (record) => { |
| | | actionTrigger = (triggerId) => { |
| | | const { setting, Tab, BID, btn, selectedData } = this.props |
| | | const { loading } = this.state |
| | | |
| | | if ((triggerId && btn.uuid !== triggerId) || loading) return |
| | | |
| | | if (Tab && Tab.supMenu && !BID) { |
| | | notification.warning({ |
| | |
| | | } |
| | | |
| | | let _this = this |
| | | let data = [] |
| | | |
| | | if (record) { // 表格中触发按钮 |
| | | data = [record] |
| | | } else { |
| | | data = selectedData || [] |
| | | } |
| | | let data = selectedData || [] |
| | | |
| | | if (btn.Ot !== 'notRequired' && data.length === 0) { |
| | | // 需要选择行时,校验数据 |
| | |
| | | const { btn, show } = this.props |
| | | const { loadingNumber, loading } = this.state |
| | | |
| | | return ( |
| | | <div className="mk-btn-wrap"> |
| | | {!show ? <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | if (show === 'actionList') { |
| | | return <div style={{display: 'inline-block'}}> |
| | | <Button |
| | | icon={btn.icon} |
| | | onClick={() => {this.actionTrigger()}} |
| | | loading={loading} |
| | | >{loadingNumber ? `(${loadingNumber})` : '' + btn.label}</Button> : null} |
| | | {show === 'icon' ? <Button className="action-cell" icon={btn.icon || 'dash'} loading={loading} onClick={() => {this.actionTrigger()}}></Button> : null} |
| | | {show === 'text' ? <Button className="action-cell" loading={loading} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | {show === 'all' ? <Button className="action-cell" icon={btn.icon || ''} loading={loading} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | className={'mk-btn mk-' + btn.class} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{loadingNumber ? `(${loadingNumber})` : '' + btn.label}</Button> |
| | | {this.getModels()} |
| | | </div> |
| | | ) |
| | | } else { // icon、text、 all 卡片 |
| | | return <div style={{display: 'inline-block'}}> |
| | | <Button |
| | | type="link" |
| | | loading={loading} |
| | | icon={show === 'text' ? '' : (btn.icon || '')} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{show === 'icon' && btn.icon ? '' : btn.label}</Button> |
| | | {this.getModels()} |
| | | </div> |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .mk-btn-wrap { |
| | | display: inline-block; |
| | | .action-cell { |
| | | border: 0; |
| | | background: transparent !important; |
| | | } |
| | | .action-cell[ant-click-animating-without-extra-node="true"]::after { |
| | | display: none!important; |
| | | } |
| | | } |
| | | |
| | |
| | | import { modifyTabview } from '@/store/action' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | class TabButton extends Component { |
| | |
| | | btn: PropTypes.object, // 按钮 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | triggerBtn: PropTypes.any, |
| | | updateStatus: PropTypes.any |
| | | } |
| | | |
| | |
| | | primaryId: '' |
| | | } |
| | | |
| | | /** |
| | | * @description 外部触发按钮点击 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) { |
| | | this.actionTrigger(nextProps.triggerBtn.data) |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (record) => { |
| | | actionTrigger = (triggerId) => { |
| | | const { setting, btn, tabviews, MenuID, selectedData } = this.props |
| | | let data = [] |
| | | |
| | | if (record) { // 表格中触发按钮 |
| | | data = [record] |
| | | } else { |
| | | data = selectedData || [] |
| | | } |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | let data = selectedData || [] |
| | | |
| | | if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | // 需要选择单行时,校验数据 |
| | |
| | | render() { |
| | | const { btn, show } = this.props |
| | | |
| | | if (show === 'actionList') { |
| | | return ( |
| | | <div className="mk-btn-wrap"> |
| | | {!show ? <Button |
| | | <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | icon={btn.icon} |
| | | onClick={() => {this.actionTrigger()}} |
| | | >{btn.label}</Button> : null} |
| | | {show === 'icon' ? <Button className="action-cell" icon={btn.icon || 'dash'} onClick={() => {this.actionTrigger()}}></Button> : null} |
| | | {show === 'text' ? <Button className="action-cell" onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | {show === 'all' ? <Button className="action-cell" icon={btn.icon || ''} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null} |
| | | </div> |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{btn.label}</Button> |
| | | ) |
| | | } else { // icon、text、 all 卡片 |
| | | return ( |
| | | <Button |
| | | type="link" |
| | | icon={show === 'text' ? '' : (btn.icon || '')} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{show === 'icon' && btn.icon ? '' : btn.label}</Button> |
| | | ) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .mk-btn-wrap { |
| | | display: inline-block; |
| | | .action-cell { |
| | | border: 0; |
| | | background: transparent !important; |
| | | } |
| | | .action-cell[ant-click-animating-without-extra-node="true"]::after { |
| | | display: none!important; |
| | | } |
| | | } |
| | | |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Card, Spin, Empty, Tabs } from 'antd' |
| | | import { Icon, Card, Spin, Empty } from 'antd' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncExcelComponent from './asyncButtonComponent' |
| | |
| | | const NewPageButton = asyncComponent(() => import('@/tabviews/zshare/actionList/newpagebutton')) |
| | | const ChangeUserButton = asyncComponent(() => import('@/tabviews/zshare/actionList/changeuserbutton')) |
| | | const PrintButton = asyncComponent(() => import('@/tabviews/zshare/actionList/printbutton')) |
| | | |
| | | const { TabPane } = Tabs |
| | | |
| | | class CardCell extends Component { |
| | | static propTpyes = { |
| | |
| | | } |
| | | |
| | | return ( |
| | | <div className={'chart-card-box ' + card.outclass} style={card.outstyle || null} > |
| | | <div className={'chart-card-box ' + card.outclass}> |
| | | {type !== 'insert' ? <Card |
| | | size="small" |
| | | className={'chart-card ' + (selectKey === data.key ? 'chart-card-selected' : '')} |
| | |
| | | } |
| | | }) |
| | | |
| | | if (plot.widthType === 'absolute') { |
| | | plot.cardWidth = 6 |
| | | } |
| | | if (plot.avatar && plot.avatar.widthType === 'absolute') { |
| | | card.avatar.width = 32 |
| | | } |
| | | |
| | | actions.forEach(item => { |
| | | if ((item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType)) || item.funcType === 'changeuser') { |
| | | actionMap.set(item.uuid, item) |
| | |
| | | } else if (card.avatar.type === 'picture' && colMap.get(plot.avatar.field)) { |
| | | card.avatar.field = plot.avatar.field |
| | | card.avatar.width = plot.avatar.width |
| | | card.avatar.widthType = plot.avatar.widthType |
| | | card.avatar.radius = plot.avatar.radius !== 'false' |
| | | |
| | | let _width = card.avatar.width |
| | | if (plot.avatar.widthType === 'ratio') { |
| | | _width = _width + '%' |
| | | } |
| | | let _width = card.avatar.width + '%' |
| | | |
| | | card.avatar.class = {width: _width, paddingTop: _width} |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | let outclass = '' |
| | | |
| | | if (plot.widthType === 'ratio' && plot.over !== 'roll') { |
| | | outclass += ' ant-col ant-col-' + plot.cardWidth |
| | | } |
| | | |
| | | card.outclass = outclass |
| | | card.outclass = ' ant-col ant-col-' + plot.cardWidth |
| | | card.bordered = plot.border !== 'hidden' |
| | | |
| | | if (plot.widthType === 'absolute') { |
| | | card.outstyle = { width: plot.cardWidth } |
| | | } |
| | | |
| | | if (plot.bgfield && colMap.get(plot.bgfield)) { |
| | | let col = fromJS(colMap.get(plot.bgfield)).toJS() |
| | |
| | | let _flex = false |
| | | let _cardWidth = 300 |
| | | |
| | | if (plot.widthType === 'absolute') { |
| | | _cardWidth = plot.cardWidth |
| | | } else { |
| | | let _outWidth = document.body.offsetWidth - 260 |
| | | if (this.cardRef.offsetWidth) { |
| | | _outWidth = this.cardRef.offsetWidth |
| | | } |
| | | _cardWidth = Math.floor(_outWidth * plot.cardWidth / 24 - 20) |
| | | } |
| | | |
| | | if (card.avatar.widthType === 'ratio' && card.avatar.display !== 'block') { |
| | | if (card.avatar.display !== 'block') { |
| | | if (card.avatar.width < 90) { |
| | | _flex = true |
| | | } |
| | |
| | | </div> |
| | | <div style={{clear: 'both'}}></div> |
| | | </div> |
| | | {plot.over !== 'roll' && data && data.length > 0 && |
| | | {data && data.length > 0 && |
| | | data.map((item, i) => ( |
| | | <CardCell |
| | | key={i} |
| | |
| | | /> |
| | | )) |
| | | } |
| | | {!loading && card.insertAction && plot.over !== 'roll' ? |
| | | {!loading && card.insertAction ? |
| | | <CardCell |
| | | key="insert" |
| | | type="insert" |
| | |
| | | switchCard={() => {}} |
| | | refreshdata={this.props.refreshdata} |
| | | /> : null |
| | | } |
| | | {plot.over === 'roll' && data && data.length > 0 ? |
| | | <Tabs activeKey=""> |
| | | {data.map((item, i) => ( |
| | | <TabPane tab={<CardCell |
| | | BID={BID} |
| | | Tab={Tab} |
| | | card={card} |
| | | data={item} |
| | | BData={BData} |
| | | MenuID={MenuID} |
| | | colMap={colMap} |
| | | selectKey={selectKey} |
| | | logcolumns={logcolumns} |
| | | setting={config.setting} |
| | | ContainerId={ContainerId} |
| | | switchCard={this.switchCard} |
| | | refreshdata={this.props.refreshdata} |
| | | />} key={i}></TabPane> |
| | | ))} |
| | | {!loading && card.insertAction ? |
| | | <TabPane tab={<CardCell |
| | | type="insert" |
| | | BID={BID} |
| | | Tab={Tab} |
| | | card={card} |
| | | data={{key: 'insert'}} |
| | | BData={BData} |
| | | MenuID={MenuID} |
| | | setting={config.setting} |
| | | ContainerId={ContainerId} |
| | | switchCard={() => {}} |
| | | refreshdata={this.props.refreshdata} |
| | | />} key="insert"></TabPane> : null |
| | | } |
| | | </Tabs> : null |
| | | } |
| | | {(loading || !card.insertAction) && (!data || data.length === 0) ? <Empty description={false}/> : null} |
| | | <div className="clear"></div> |
| | |
| | | import md5 from 'md5' |
| | | import { is, fromJS } from 'immutable' |
| | | import {connect} from 'react-redux' |
| | | import { Table, message, Affix, Button, Typography, Modal, Icon } from 'antd' |
| | | import { Table, message, Affix, Typography, Modal, Icon } from 'antd' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import { modifyTabview } from '@/store/action' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import '@/assets/css/table.scss' |
| | | import './index.scss' |
| | | |
| | | const { Paragraph } = Typography |
| | | |
| | | const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton')) |
| | | const PopupButton = asyncComponent(() => import('@/tabviews/zshare/actionList/popupbutton')) |
| | | const TabButton = asyncComponent(() => import('@/tabviews/zshare/actionList/tabbutton')) |
| | | const NewPageButton = asyncComponent(() => import('@/tabviews/zshare/actionList/newpagebutton')) |
| | | |
| | | class NormalTable extends Component { |
| | | static defaultProps = { |
| | |
| | | |
| | | static propTpyes = { |
| | | tableId: PropTypes.string, // 列表Id |
| | | resetTable: PropTypes.bool, // 表格重置 |
| | | statFValue: PropTypes.any, // 合计字段数据 |
| | | pageSize: PropTypes.any, // 每页数据 |
| | | dict: PropTypes.object, // 字典项 |
| | |
| | | setting: PropTypes.object, // 表格全局设置:tableType(表格是否可选、单选、多选)、columnfixed(列固定)、actionfixed(按钮固定) |
| | | pickup: PropTypes.any, // 数据收起 |
| | | columns: PropTypes.array, // 表格列 |
| | | logcolumns: PropTypes.array, // 字段列 |
| | | BID: PropTypes.any, // 主表Id |
| | | ContainerId: PropTypes.any, // 标签页外层Id |
| | | BData: PropTypes.any, // 主表数据 |
| | | data: PropTypes.any, // 表格数据 |
| | | total: PropTypes.any, // 总数 |
| | | loading: PropTypes.bool, // 表格加载中 |
| | | refreshdata: PropTypes.func, // 表格中排序列、页码的变化时刷新 |
| | | buttonTrigger: PropTypes.func, // 表格中按钮触发操作 |
| | | handleTableId: PropTypes.func, // 数据切换 |
| | | chgSelectData: PropTypes.func, // 数据切换 |
| | | refreshbyaction: PropTypes.func, // 数据切换 |
| | | } |
| | | |
| | | state = { |
| | |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | /** |
| | | * @description 上级菜单id变化时,刷新数据 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (this.props.resetTable !== nextProps.resetTable) { |
| | | this.resetTable() |
| | | } |
| | | componentDidMount () { |
| | | MKEmitter.addListener('resetTable', this.resetTable) |
| | | } |
| | | |
| | | /** |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('resetTable', this.resetTable) |
| | | } |
| | | |
| | | // 字段透视 |
| | |
| | | ) |
| | | } else if (item.type === 'action') { |
| | | return ( |
| | | <div className={item.style} style={{ minWidth: (item.Width || 120) + 'px' }}> |
| | | <div className="action-col" style={{ minWidth: (item.Width || 120) + 'px' }}> |
| | | {item.operations.map(btn => { |
| | | return <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | icon={btn.icon} |
| | | if (['exec', 'prompt', 'pop'].includes(btn.OpenType)) { |
| | | return ( |
| | | <NormalButton |
| | | key={btn.uuid} |
| | | onClick={(e) => {this.actionTrigger(e, btn, record)}} |
| | | >{btn.label}</Button> |
| | | btn={btn} |
| | | BID={this.props.BID} |
| | | selectedData={[record]} |
| | | BData={this.props.BData} |
| | | setting={this.props.setting} |
| | | columns={this.props.logcolumns} |
| | | ContainerId={this.props.ContainerId} |
| | | updateStatus={this.props.refreshbyaction} |
| | | /> |
| | | ) |
| | | } else if (btn.OpenType === 'popview') { |
| | | return ( |
| | | <PopupButton |
| | | key={btn.uuid} |
| | | btn={btn} |
| | | BID={this.props.BID} |
| | | selectedData={[record]} |
| | | BData={this.props.BData} |
| | | setting={this.props.setting} |
| | | updateStatus={this.props.refreshbyaction} |
| | | /> |
| | | ) |
| | | } else if (btn.OpenType === 'tab' || btn.OpenType === 'blank') { |
| | | return ( |
| | | <TabButton |
| | | key={btn.uuid} |
| | | btn={btn} |
| | | selectedData={[record]} |
| | | MenuID={this.props.MenuID} |
| | | setting={this.props.setting} |
| | | updateStatus={this.props.refreshbyaction} |
| | | /> |
| | | ) |
| | | } else if (btn.OpenType === 'innerpage' || btn.OpenType === 'outerpage') { |
| | | return ( |
| | | <NewPageButton |
| | | key={btn.uuid} |
| | | btn={btn} |
| | | selectedData={[record]} |
| | | setting={this.props.setting} |
| | | updateStatus={this.props.refreshbyaction} |
| | | /> |
| | | ) |
| | | } |
| | | return null |
| | | })} |
| | | </div> |
| | | ) |
| | |
| | | } |
| | | } |
| | | |
| | | actionTrigger = (e, btn, record) => { |
| | | e.stopPropagation() |
| | | this.props.buttonTrigger(btn, record) |
| | | } |
| | | |
| | | copycontent = (e, content) => { |
| | | // 表格中内容复制 |
| | | e.stopPropagation() |
| | |
| | | changedata = (index) => { |
| | | const { data, setting } = this.props |
| | | |
| | | if (!this.props.tableId) return |
| | | |
| | | let _id = '' |
| | | let _data = '' |
| | | |
| | |
| | | this.props.handleTableId(this.props.tableId, _id, _data) |
| | | } |
| | | |
| | | resetTable = () => { |
| | | resetTable = (id) => { |
| | | const { MenuID, tableId } = this.props |
| | | |
| | | if (id !== (MenuID + tableId)) return |
| | | |
| | | this.setState({ |
| | | pageIndex: 1, |
| | | selectedRowKeys: [], |
| | |
| | | cursor: zoom-in; |
| | | } |
| | | } |
| | | .text { |
| | | .action-col { |
| | | .ant-btn > .anticon + span { |
| | | margin-left: 3px; |
| | | } |
| | |
| | | color: #1890ff; |
| | | box-shadow: none; |
| | | padding: 0 5px; |
| | | margin: 0px 5px; |
| | | .anticon-loading { |
| | | display: none; |
| | | } |
| | | } |
| | | .button { |
| | | button { |
| | | margin: 0px 5px; |
| | | > div { |
| | | margin: 0 3px; |
| | | } |
| | | > button { |
| | | margin: 0 3px; |
| | | } |
| | | .ant-btn.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) { |
| | | padding-left: 0px; |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | .setting:hover { |
| | | .setting { |
| | | overflow-y: auto; |
| | | } |
| | | .setting::-webkit-scrollbar { |
| | |
| | | item.hidden = true |
| | | } else if (item.key === 'field' && card.elemType === 'avatar') { |
| | | item.options = columns.filter(option => option.type === card.type) |
| | | } else if (item.key === 'widthType' && card.elemType === 'avatar' && card.type === 'picture') { |
| | | item.hidden = false |
| | | } else if (item.key === 'size' && card.elemType === 'avatar' && card.type === 'icon') { |
| | | item.hidden = false |
| | | } else if (item.key === 'width' && card.elemType === 'avatar' && card.type === 'picture') { |
| | |
| | | } |
| | | |
| | | typeChange = (key, value) => { |
| | | const { card } = this.props |
| | | const { columns, oriformlist } = this.state |
| | | |
| | | if (key === 'datatype') { |
| | |
| | | formlist: oriformlist.map(item => { |
| | | if (item.key === 'field') { |
| | | item.options = columns.filter(option => option.type === value) |
| | | } else if (item.key === 'widthType') { |
| | | item.hidden = value !== 'picture' |
| | | } else if (item.key === 'width') { |
| | | item.hidden = value !== 'picture' |
| | | item.max = card.widthType === 'ratio' ? 100 : 500 |
| | | } else if (item.key === 'size') { |
| | | item.hidden = value !== 'icon' |
| | | } else if (item.key === 'radius') { |
| | |
| | | }, () => { |
| | | if (this.props.form.getFieldValue('field') !== undefined) { |
| | | this.props.form.setFieldsValue({field: ''}) |
| | | } |
| | | }) |
| | | } else if (key === 'widthType') { |
| | | this.setState({ |
| | | formlist: oriformlist.map(item => { |
| | | if (item.key === 'width') { |
| | | item.max = value === 'ratio' ? 100 : 500 |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | }, () => { |
| | | if (this.props.form.getFieldValue('width') !== undefined) { |
| | | this.props.form.setFieldsValue({width: 32}) |
| | | } |
| | | }) |
| | | } |
| | |
| | | values.icon = column.icon |
| | | values.color = column.color |
| | | |
| | | values.avatarWidth = values.size |
| | | } else if (values.widthType === 'absolute') { |
| | | values.avatarWidth = values.width |
| | | } else { |
| | | values.avatarWidth = values.width + '%' |
| | | values.width = values.size |
| | | } |
| | | } |
| | | |
| | |
| | | this.setState({ |
| | | cardcell: _cell, |
| | | modaltype: 'avatar', |
| | | formlist: getCardDetailForm(_cell, _columns, 'avatar', [], card.widthType === 'ratio') |
| | | formlist: getCardDetailForm(_cell, _columns, 'avatar', []) |
| | | }) |
| | | } |
| | | |
| | |
| | | if (card.bottom && card.bottom.actions.length > 0) { |
| | | _width = Math.floor((100 / card.bottom.actions.length) * 10000) / 10000 + '%' |
| | | } |
| | | let outclass = card.widthType === 'ratio' ? ' ant-col ant-col-' + card.cardWidth : '' |
| | | |
| | | if (card.widthType === 'absolute') { |
| | | card.cardWidth = 6 |
| | | } |
| | | if (card.avatar && card.avatar.widthType === 'absolute') { |
| | | card.avatar.width = 32 |
| | | } |
| | | |
| | | let outclass = 'ant-col-' + card.cardWidth |
| | | |
| | | if (card.background) { |
| | | outclass += ' background ' + card.background |
| | | } |
| | |
| | | |
| | | let metastyle = {} |
| | | if (card.subelement.includes('avatar')) { |
| | | let _cardWidth = card.cardWidth |
| | | |
| | | // 计算卡片宽度 |
| | | if (card.widthType === 'ratio' && card.over !== 'roll') { |
| | | let _outWidth = document.body.offsetWidth - 260 |
| | | _cardWidth = Math.floor(_outWidth * card.cardWidth / 24 - 20) |
| | | } |
| | | let _cardWidth = Math.floor(_outWidth * card.cardWidth / 24 - 20) |
| | | |
| | | if (card.avatar.type === 'picture') { |
| | | if (card.avatar.widthType === 'ratio') { |
| | | if (card.avatar.width < 90 && card.avatar.display !== 'block') { |
| | | metastyle.display = 'flex' |
| | | } |
| | | } else { |
| | | if (card.avatar.width < _cardWidth * 0.9 && card.avatar.display !== 'block') { |
| | | metastyle.display = 'flex' |
| | | } |
| | | } |
| | | } else { |
| | | if (card.avatar.size < _cardWidth * 0.9 && card.avatar.display !== 'block') { |
| | |
| | | {card.title ? <p className="chart-title">{card.title}</p> : null} |
| | | <div |
| | | ref={(ref) => this.cardRef = ref} |
| | | className={'ant-card chart-card ' + outclass} |
| | | style={card.widthType === 'absolute' ? { width: card.cardWidth } : null} |
| | | className={'ant-card chart-card ant-col ' + outclass} |
| | | > |
| | | {card.subelement.includes('header') ? |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | |
| | | <Icon className="close" title="close" type="close" onClick={() => this.deleteElem('avatar')} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <div className="ant-card-meta-avatar" style={{width: card.avatar.avatarWidth || 32, paddingTop: card.avatar.avatarWidth || 32}}> |
| | | <div className="ant-card-meta-avatar" style={card.avatar.type === 'icon' ? {width: card.avatar.width, paddingTop: card.avatar.width} : {width: card.avatar.width + '%', paddingTop: card.avatar.width + '%'}}> |
| | | <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{borderRadius: card.avatar.radius === 'true' ? '50%' : 0}}> |
| | | {card.avatar.type === 'picture' ? <img src={avatar} alt=""/> : null} |
| | | {card.avatar.type === 'icon' ? <Icon className={'font ' + card.avatar.color} style={{fontSize: card.avatar.size + 'px'}} type={card.avatar.icon} /> : null} |
| | |
| | | item.hidden = true |
| | | } else if (item.key === 'height' && ['table', 'card'].includes(_type)) { |
| | | item.hidden = true |
| | | } else if (item.key === 'widthType' && _type === 'card') { |
| | | item.hidden = false |
| | | } else if (item.key === 'cardWidth' && _type === 'card') { |
| | | item.hidden = false |
| | | } else if (item.key === 'over' && _type === 'card') { |
| | | item.hidden = false |
| | | } else if (item.key === 'border' && _type === 'card') { |
| | | item.hidden = false |
| | |
| | | } |
| | | |
| | | typeChange = (key, value) => { |
| | | const { card } = this.props |
| | | let formlist = JSON.parse(JSON.stringify(this.props.formlist)) |
| | | |
| | | if (key === 'chartType') { |
| | |
| | | item.hidden = true |
| | | } else if (item.key === 'height' && ['table', 'card'].includes(value)) { |
| | | item.hidden = true |
| | | } else if (item.key === 'widthType' && value === 'card') { |
| | | item.hidden = false |
| | | } else if (item.key === 'cardWidth' && value === 'card') { |
| | | item.min = card.widthType === 'absolute' ? 50 : 1 |
| | | item.max = card.widthType === 'absolute' ? 1000 : 24 |
| | | item.hidden = false |
| | | } else if (item.key === 'over' && value === 'card') { |
| | | item.hidden = false |
| | | } else if (item.key === 'border' && value === 'card') { |
| | | item.hidden = false |
| | |
| | | } else if (item.key === 'bgfield') { |
| | | item.hidden = value !== 'card' |
| | | } |
| | | return item |
| | | }) |
| | | }) |
| | | } |
| | | } |
| | | |
| | | radioChange = (val, key) => { |
| | | const { formlist } = this.state |
| | | |
| | | if (key === 'widthType') { |
| | | this.setState({ |
| | | formlist: formlist.map(item => { |
| | | if (item.key === 'cardWidth') { |
| | | item.min = val === 'absolute' ? 50 : 1 |
| | | item.max = val === 'absolute' ? 1000 : 24 |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | }) |
| | | if (val === 'absolute') { |
| | | this.props.form.setFieldsValue({cardWidth: 250}) |
| | | } else { |
| | | this.props.form.setFieldsValue({cardWidth: 6}) |
| | | } |
| | | } else if (key === 'over' && val === 'roll') { |
| | | this.setState({ |
| | | formlist: formlist.map(item => { |
| | | if (item.key === 'cardWidth') { |
| | | item.min = 50 |
| | | item.max = 1000 |
| | | } else if (item.key === 'widthType') { |
| | | item.readonly = true |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | }) |
| | | if (this.props.form.getFieldValue('widthType') !== undefined) { |
| | | this.props.form.setFieldsValue({widthType: 'absolute', cardWidth: 250}) |
| | | } |
| | | } else if (key === 'over' && val === 'whole') { |
| | | this.setState({ |
| | | formlist: formlist.map(item => { |
| | | if (item.key === 'widthType') { |
| | | item.readonly = false |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | }) |
| | |
| | | } |
| | | ] |
| | | })( |
| | | <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)} disabled={item.readonly}> |
| | | <Radio.Group disabled={item.readonly}> |
| | | { |
| | | item.options.map(option => { |
| | | return ( |
| | |
| | | result.subelement = selectlegend.subelement |
| | | } |
| | | |
| | | if (result.widthType === 'ratio' && result.avatar && result.avatar.widthType !== 'ratio') { |
| | | result.avatar.widthType = 'ratio' |
| | | result.avatar.width = 32 |
| | | } |
| | | |
| | | if (!result.details) { |
| | | result.details = [ |
| | | {elemType: 'detail', fontWeight: 'normal', fontSize: 14, width: 100, height: 1, uuid: 'cardtitle', content: 'Card content', datatype: 'static', align: 'left'}, |
| | |
| | | type: 'picture', |
| | | field: '', |
| | | size: 14, |
| | | widthType: 'ratio', |
| | | width: 32, |
| | | avatarWidth: 32, |
| | | radius: 'true', |
| | | display: 'inline' |
| | | } |
| | |
| | | let extraActions = config.action.filter(item => ['pop', 'prompt', 'exec'].includes(item.OpenType) && item.Ot === 'notRequired') |
| | | extraActions = extraActions.map(cell => ({value: cell.uuid, text: cell.label})) |
| | | |
| | | if (item.extraAction && extraActions.filter(cell => cell.uuid === item.extraAction).length === 0) { |
| | | if (item.extraAction && extraActions.filter(cell => cell.value === item.extraAction).length === 0) { |
| | | item.extraAction = '' |
| | | } |
| | | |
| | |
| | | initVal: this.props.card.Width, |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'style', |
| | | label: this.props.dict['model.form.style'], |
| | | initVal: this.props.card.style, |
| | | required: true, |
| | | options: [{ |
| | | MenuID: 'button', |
| | | text: this.props.dict['header.form.button'] |
| | | }, { |
| | | MenuID: 'text', |
| | | text: this.props.dict['model.form.href'] |
| | | }] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'show', |
| | | label: this.props.dict['header.form.order'], |
| | | initVal: this.props.card.show, |
| | | required: true, |
| | | options: [{ |
| | | MenuID: 'horizontal', |
| | | text: this.props.dict['header.form.horizontal'] |
| | | }, { |
| | | MenuID: 'vertical', |
| | | text: this.props.dict['header.form.vertical'] |
| | | }] |
| | | } |
| | | // { |
| | | // type: 'select', |
| | | // key: 'style', |
| | | // label: this.props.dict['model.form.style'], |
| | | // initVal: this.props.card.style, |
| | | // required: true, |
| | | // options: [{ |
| | | // MenuID: 'button', |
| | | // text: this.props.dict['header.form.button'] |
| | | // }, { |
| | | // MenuID: 'text', |
| | | // text: this.props.dict['model.form.href'] |
| | | // }] |
| | | // }, |
| | | // { |
| | | // type: 'select', |
| | | // key: 'show', |
| | | // label: this.props.dict['header.form.order'], |
| | | // initVal: this.props.card.show, |
| | | // required: true, |
| | | // options: [{ |
| | | // MenuID: 'horizontal', |
| | | // text: this.props.dict['header.form.horizontal'] |
| | | // }, { |
| | | // MenuID: 'vertical', |
| | | // text: this.props.dict['header.form.vertical'] |
| | | // }] |
| | | // } |
| | | ] |
| | | } |
| | | |
| | |
| | | }) |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, activeKey) |
| | |
| | | }) |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, activeKey) |
| | |
| | | }) |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, activeKey) |
| | |
| | | }) |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, activeKey) |
| | |
| | | }) |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, activeKey) |
| | |
| | | }) |
| | | }, () => { // 验证失败 |
| | | this.setState({ |
| | | activeKey: val, |
| | | loading: false |
| | | }) |
| | | }, activeKey) |
| | |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'over', |
| | | label: '超出时', |
| | | initVal: card.over || 'whole', |
| | | required: true, |
| | | hidden: true, |
| | | options: [{ |
| | | value: 'whole', |
| | | text: '展示全部' |
| | | }, { |
| | | value: 'roll', |
| | | text: '滚动' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'widthType', |
| | | label: '宽度设置', |
| | | initVal: card.over === 'roll' ? 'absolute' : card.widthType || 'ratio', |
| | | required: true, |
| | | hidden: true, |
| | | readonly: card.over === 'roll', |
| | | options: [{ |
| | | value: 'ratio', |
| | | text: '比例' |
| | | }, { |
| | | value: 'absolute', |
| | | text: '绝对值' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'number', |
| | | key: 'cardWidth', |
| | | min: card.widthType === 'absolute' ? 50 : 1, |
| | | max: card.widthType === 'absolute' ? 1000 : 24, |
| | | min: 1, |
| | | max: 24, |
| | | decimal: 0, |
| | | label: '卡片宽度', |
| | | tooltip: '类型为比例时,栅格布局,每行等分为24列;类型为绝对值,范围50-1000。', |
| | | tooltip: '栅格布局,每行等分为24列。', |
| | | initVal: card.cardWidth || 6, |
| | | hidden: true, |
| | | required: true |
| | |
| | | * @param {array} _columns // 显示列 |
| | | * @param {string} _type // 类型,卡片的部位 |
| | | * @param {array} _actions // 按钮列表 |
| | | * @param {boolean} isRatioCard // 表格宽度类型,是否为比例 |
| | | */ |
| | | export function getCardDetailForm (card, _columns, _type, _actions = [], isRatioCard) { |
| | | export function getCardDetailForm (card, _columns, _type, _actions = []) { |
| | | let actions = '' |
| | | if (_type === 'bottom') { |
| | | actions = card.actions ? card.actions.map(cell => cell.value) : [] |
| | |
| | | label: '宽度(%)', |
| | | initVal: card.width || 100, |
| | | required: true, |
| | | forbid: !['detail'].includes(_type) |
| | | forbid: !['detail', 'avatar'].includes(_type) |
| | | }, |
| | | { |
| | | type: 'number', |
| | |
| | | initVal: card.height || 1, |
| | | required: true, |
| | | forbid: !['detail'].includes(_type) |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'widthType', |
| | | label: '宽度设置', |
| | | initVal: card.widthType || 'ratio', |
| | | required: false, |
| | | forbid: !['avatar'].includes(_type), |
| | | hidden: true, |
| | | readonly: !!isRatioCard, |
| | | options: [{ |
| | | value: 'ratio', |
| | | text: '比例' |
| | | }, { |
| | | value: 'absolute', |
| | | text: '绝对值' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'number', |
| | | key: 'width', |
| | | label: '宽度值', |
| | | initVal: card.width || 32, |
| | | min: 1, |
| | | max: card.widthType === 'ratio' ? 100 : 500, |
| | | required: false, |
| | | hidden: true, |
| | | forbid: !['avatar'].includes(_type) |
| | | }, |
| | | { |
| | | type: 'radio', |
| | |
| | | |
| | | return _cell |
| | | }) |
| | | |
| | | if (card.widthType === 'ratio' && card.avatar && card.avatar.widthType !== 'ratio') { |
| | | card.avatar.widthType = 'ratio' |
| | | card.avatar.width = 32 |
| | | } |
| | | } |
| | | }) |
| | | } |
| | |
| | | |
| | | return _cell |
| | | }) |
| | | |
| | | if (card.widthType === 'ratio' && card.avatar && card.avatar.widthType !== 'ratio') { |
| | | card.avatar.widthType = 'ratio' |
| | | card.avatar.width = 32 |
| | | } |
| | | } |
| | | }) |
| | | } |