From decf1f6555b6e003860401a692faea259cc565af Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 23 三月 2021 21:00:08 +0800 Subject: [PATCH] 2021-03-23 --- src/menu/components/form/formaction/formconfig.jsx | 16 + src/tabviews/zshare/actionList/exceloutbutton/index.jsx | 34 ++ src/menu/components/form/formaction/index.scss | 5 src/menu/components/form/formaction/index.jsx | 62 ++---- src/tabviews/custom/index.jsx | 7 src/tabviews/custom/components/form/normal-form/index.scss | 69 ++++++ src/menu/components/form/formaction/actionform/index.jsx | 9 src/tabviews/custom/components/form/normal-form/index.jsx | 343 ++++++++++++++++++++++++++++++++++ src/templates/sharecomponent/actioncomponent/verifyexcelout/index.jsx | 36 ++- 9 files changed, 515 insertions(+), 66 deletions(-) diff --git a/src/menu/components/form/formaction/actionform/index.jsx b/src/menu/components/form/formaction/actionform/index.jsx index 56ed3f3..454a16e 100644 --- a/src/menu/components/form/formaction/actionform/index.jsx +++ b/src/menu/components/form/formaction/actionform/index.jsx @@ -46,6 +46,13 @@ } getOptions = (_intertype, _procMode) => { + const { card } = this.props + + if (card.type === 'prev') { + return ['type', 'label'] + } else if (card.type === 'next') { + return ['type', 'label', 'enable'] + } let _options = ['type', 'label', 'intertype', 'syncComponent', 'linkmenu', 'open'] // 閫夐」鍒楄〃 if (_intertype === 'custom') { @@ -326,12 +333,10 @@ } handleConfirm = () => { - const { card } = this.props // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� return new Promise((resolve, reject) => { this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { - values.verify = card.verify || null resolve(values) } else { reject(err) diff --git a/src/menu/components/form/formaction/formconfig.jsx b/src/menu/components/form/formaction/formconfig.jsx index 475a856..1a84804 100644 --- a/src/menu/components/form/formaction/formconfig.jsx +++ b/src/menu/components/form/formaction/formconfig.jsx @@ -273,6 +273,20 @@ tooltip: '鎵ц鎴愬姛鍚庨渶瑕佸埛鏂扮殑缁勪欢銆�', required: false, options: modules - } + }, + { + type: 'radio', + key: 'enable', + label: '鏄惁鏄剧ず', + initVal: card.enable || 'false', + required: false, + options: [{ + value: 'true', + text: '鏄剧ず' + }, { + value: 'false', + text: '闅愯棌' + }] + }, ] } diff --git a/src/menu/components/form/formaction/index.jsx b/src/menu/components/form/formaction/index.jsx index e09e7af..c4dd07e 100644 --- a/src/menu/components/form/formaction/index.jsx +++ b/src/menu/components/form/formaction/index.jsx @@ -26,7 +26,6 @@ dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, // 缂栬緫涓厓绱� formlist: null, // 琛ㄥ崟淇℃伅 - elements: null, // 鎸夐挳缁� visible: false, // 妯℃�佹鎺у埗 profVisible: false, // 楠岃瘉淇℃伅缂栬緫 } @@ -130,38 +129,28 @@ * @description 鍏冪礌淇敼鍚庢彁浜や繚瀛� */ handleActionSubmit = () => { - const { elements } = this.state - let color = { primary: '#1890ff', yellow: '#c49f47', orange: 'orange', danger: '#ff4d4f', green: '#26C281', dgreen: '#32c5d2', purple: '#8E44AD', cyan: '#13c2c2', gray: '#666666' } + const { card } = this.state this.actionFormRef.handleConfirm().then(res => { - let _elements = elements.map(cell => { - if (cell.uuid === res.uuid) { - res = {...cell, ...res} - delete res.focus - let btnstyle = {} + res.type = card.type + if (card.verify) { + res.verify = card.verify + } - if (res.class !== cell.class || res.show !== cell.show || !res.btnstyle) { - if (res.show === 'link' || res.show === 'icon') { - btnstyle.color = color[res.class] - btnstyle.backgroundColor = 'transparent' - } else { - btnstyle.color = '#ffffff' - btnstyle.backgroundColor = color[res.class] - } - } - res.btnstyle = {...res.btnstyle, ...btnstyle} + let group = fromJS(this.props.group).toJS() - return res - } - return cell - }) + if (res.type === 'prev') { + group.prevButton = res + } else if (res.type === 'submit') { + group.subButton = res + } else if (res.type === 'next') { + group.nextButton = res + } this.setState({ - elements: _elements, visible: false - }, () => { - this.props.updateElement(_elements) }) + this.props.updateconfig(group) }) } @@ -178,23 +167,15 @@ * @description 楠岃瘉淇℃伅淇濆瓨 */ verifySubmit = () => { - const { elements, card } = this.state - this.verifyRef.handleConfirm().then(res => { - let _elements = elements.map(cell => { - if (cell.uuid === card.uuid) { - cell.verify = res - } + let group = fromJS(this.props.group).toJS() - return cell - }) + group.subButton.verify = res this.setState({ - elements: _elements, profVisible: false - }, () => { - this.props.updateElement(_elements) }) + this.props.updateconfig(group) }) } @@ -221,14 +202,14 @@ } trigger="hover"> <Button type="link" className="submit mk-primary" style={group.subButton.style}>{group.subButton.label}</Button> </Popover> - <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + {group.sort !== config.subcards.length ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.handleAction(group.nextButton)} /> <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => this.handleStyle(group.nextButton)} type="font-colors" /> </div> } trigger="hover"> - <Button type="link" className="skip" style={group.nextButton.style}>{group.nextButton.label}</Button> - </Popover> + <Button type="link" className={'skip ' + group.nextButton.enable} style={group.nextButton.style}>{group.nextButton.label}</Button> + </Popover> : null} {/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */} <Modal title={dict['model.edit']} @@ -244,7 +225,6 @@ > <ActionForm dict={dict} - type="card" card={card} setting={config.setting} formlist={this.state.formlist} @@ -265,7 +245,7 @@ destroyOnClose > <VerifyCard - card={group.subButton} + card={{...group.subButton, modal: {fields: group.fields}}} dict={dict} config={config} columns={config.columns} diff --git a/src/menu/components/form/formaction/index.scss b/src/menu/components/form/formaction/index.scss index 8718432..d6462cd 100644 --- a/src/menu/components/form/formaction/index.scss +++ b/src/menu/components/form/formaction/index.scss @@ -14,4 +14,9 @@ position: absolute; right: 5px; } + .skip:not(.true) { + span { + text-decoration: line-through; + } + } } diff --git a/src/tabviews/custom/components/form/normal-form/index.jsx b/src/tabviews/custom/components/form/normal-form/index.jsx new file mode 100644 index 0000000..2652701 --- /dev/null +++ b/src/tabviews/custom/components/form/normal-form/index.jsx @@ -0,0 +1,343 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { connect } from 'react-redux' +import { Spin, notification } from 'antd' +// import moment from 'moment' + +import Api from '@/api' +// import Utils from '@/utils/utils.js' +import UtilsDM from '@/utils/utils-datamanage.js' +// import asyncComponent from '@/utils/asyncComponent' +import asyncSpinComponent from '@/utils/asyncSpinComponent' +import MKEmitter from '@/utils/events.js' +import zhCN from '@/locales/zh-CN/main.js' +import enUS from '@/locales/en-US/main.js' +import { modifyTabview } from '@/store/action' +import './index.scss' + +const MutilForm = asyncSpinComponent(() => import('@/tabviews/zshare/mutilform')) + +class NormalForm extends Component { + static propTpyes = { + BID: PropTypes.any, // 鐖剁骇Id + data: PropTypes.array, // 缁熶竴鏌ヨ鏁版嵁 + config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 + mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢 + menuType: PropTypes.any, // 鑿滃崟绫诲瀷 + } + + state = { + dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + BID: '', // 涓婄骇ID + config: null, // 鍥捐〃閰嶇疆淇℃伅 + loading: false, // 鏁版嵁鍔犺浇鐘舵�� + activeKey: '', // 閫変腑鏁版嵁 + sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁 + data: {}, // 鏁版嵁 + group: null + } + + UNSAFE_componentWillMount () { + const { data, BID, config } = this.props + + let _data = {} + let _sync = false + + if (config.setting && config.wrap.datatype !== 'static') { + _sync = config.setting.sync === 'true' + + if (_sync && data) { + _data = data[config.dataName] || {} + if (_data && Array.isArray(_data)) { + _data = _data[0] || {} + } + _sync = false + } + } else { + _data = {} + } + + this.setState({ + sync: _sync, + data: _data, + group: config.subcards[0], + BID: BID || '', + config: config, + arr_field: config.columns.map(col => col.field).join(','), + }, () => { + if (config.wrap.datatype !== 'static' && config.setting && config.setting.sync !== 'true' && config.setting.onload === 'true') { + this.loadData() + } + }) + } + + componentDidMount () { + MKEmitter.addListener('reloadData', this.reloadData) + MKEmitter.addListener('resetSelectLine', this.resetParentParam) + MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('reloadData', this.reloadData) + MKEmitter.removeListener('resetSelectLine', this.resetParentParam) + MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) + } + + /** + * @description 鍥捐〃鏁版嵁鏇存柊锛屽埛鏂板唴瀹� + */ + UNSAFE_componentWillReceiveProps (nextProps) { + const { sync, config } = this.state + + if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) { + let _data = {} + if (nextProps.data && nextProps.data[config.dataName]) { + _data = nextProps.data[config.dataName] + if (_data && Array.isArray(_data)) { + _data = _data[0] + } + } + + this.setState({sync: false, data: _data}) + } else if (nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { + if (config.wrap.datatype !== 'static' && config.setting.syncRefresh === 'true') { + this.setState({}, () => { + this.loadData() + }) + } + } + } + + /** + * @description 鎸夐挳鎵ц瀹屾垚鍚庨〉闈㈠埛鏂� + * @param {*} menuId // 鑿滃崟Id + * @param {*} position // 鍒锋柊浣嶇疆 + * @param {*} btn // 鎵ц鐨勬寜閽� + */ + refreshByButtonResult = (menuId, position, btn) => { + const { config, BID } = this.state + + if (config.uuid !== menuId) return + + this.loadData() // 鏁版嵁鍒锋柊 + + if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) { + MKEmitter.emit('reloadData', btn.syncComponentId) // 鍚岀骇鏍囩鍒锋柊 + } + + if (position === 'mainline' && config.setting.supModule) { // 涓昏〃琛屽埛鏂� + MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) + } else if (position === 'popclose') { // 鏍囩鍏抽棴鍒锋柊 + config.setting.supModule && MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) + btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) + } + } + + resetParentParam = (MenuID, id) => { + const { config } = this.state + + if (config.wrap.datatype === 'static' || !config.setting.supModule || config.setting.supModule !== MenuID) return + if (id !== this.state.BID) { + this.setState({ BID: id }, () => { + this.loadData() + }) + } + } + + reloadData = (menuId) => { + const { config } = this.state + + if (menuId !== config.uuid) return + + this.loadData() + } + + async loadData (hastimer) { + const { mainSearch, menuType } = this.props + const { config, arr_field, BID } = this.state + + if (config.wrap.datatype === 'static') { + this.setState({ + data: {}, + loading: false + }) + return + } else if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + this.setState({ + data: {}, + loading: false + }) + return + } + + let searches = [] + if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + let keys = searches.map(item => item.key) + mainSearch.forEach(item => { + if (!keys.includes(item.key)) { + searches.push(item) + } + }) + } + + if (!hastimer) { + this.setState({ + loading: true + }) + } + + let _orderBy = config.setting.order || '' + let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, 1, 1, BID, menuType) + + let result = await Api.genericInterface(param) + if (result.status) { + let _data = result.data && result.data[0] ? result.data[0] : {} + + this.setState({ + activeKey: '', + data: _data, + loading: false + }) + } else { + this.setState({ + loading: false, + }) + notification.error({ + top: 92, + message: result.message, + duration: 10 + }) + } + } + + changeCard = (index, item) => { + const { config, data, activeKey } = this.state + + this.openView(item) + + if (!config.wrap.cardType || activeKey === index) return + + this.setState({ + activeKey: index + }) + + MKEmitter.emit('resetSelectLine', config.uuid, (item.setting.primaryId || ''), data) + } + + openView = (item) => { + if (item.setting.click === 'menu') { + let menu = null + + if (item.setting.menu && item.setting.menu.length > 0) { + let menu_id = item.setting.menu.slice(-1)[0] + menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || '' + } + + if (!menu) { + notification.warning({ + top: 92, + message: '鑿滃崟宸插垹闄ゆ垨娌℃湁璁块棶鏉冮檺锛�', + duration: 5 + }) + return + } + + let newtab = { + ...menu, + selected: true, + param: {} + } + + if (item.setting.joint === 'true') { + newtab.param.BID = item.setting.primaryId + } + + if (['linkage_navigation', 'linkage'].includes(window.GLOB.navBar)) { + this.props.modifyTabview([newtab]) + } else { + let tabs = this.props.tabviews.filter((tab, i) => { + tab.selected = false + return tab.MenuID !== newtab.MenuID + }) + + if (this.props.tabviews.length !== tabs.length) { + this.props.modifyTabview(fromJS(tabs).toJS()) + } + + this.setState({}, () => { + tabs.push(newtab) + this.props.modifyTabview(tabs) + }) + } + } else if (item.setting.click === 'link') { + let src = item.setting.linkurl + + if (item.setting.joint === 'true') { + let con = '?' + + if (/\?/ig.test(src)) { + con = '&' + } + + src = src + `${con}id=${item.setting.primaryId}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` + } + + window.open(src) + } + } + + + render() { + const { config, loading, BID, data, group } = this.state + + return ( + <div className="custom-normal-form-box" style={{...config.style}}> + {loading ? + <div className="loading-mask"> + <div className="ant-spin-blur"></div> + <Spin /> + </div> : null + } + {config.subcards.length > 1 ? <div className="mk-normal-form-title"> + {config.subcards.map(card => ( + <div key={card.uuid} className="form-title"> + <span className="form-sort">{card.sort}</span> + {card.setting.title} + </div>)) + } + </div> : null} + <MutilForm + BID={BID} + data={data} + dict={this.state.dict} + action={group} + inputSubmit={this.handleOk} + wrappedComponentRef={(inst) => this.formRef = inst} + /> + </div> + ) + } +} + +const mapStateToProps = (state) => { + return { + permMenus: state.permMenus, + tabviews: state.tabviews, + } +} + +const mapDispatchToProps = (dispatch) => { + return { + modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(NormalForm) \ No newline at end of file diff --git a/src/tabviews/custom/components/form/normal-form/index.scss b/src/tabviews/custom/components/form/normal-form/index.scss new file mode 100644 index 0000000..051089f --- /dev/null +++ b/src/tabviews/custom/components/form/normal-form/index.scss @@ -0,0 +1,69 @@ +.custom-normal-form-box { + background: #ffffff; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + + .mk-normal-form-title { + display: flex; + line-height: 30px; + min-height: 50px; + margin-bottom: 20px; + .form-title { + position: relative; + flex: 1; + text-align: center; + .form-sort { + background: #d8d8d8; + display: block; + width: 20px; + height: 20px; + line-height: 20px; + border-radius: 20px; + text-align: center; + color: #ffffff; + margin: 10px auto 0px; + position: relative; + z-index: 1; + } + } + .form-title:not(:first-child)::before { + position: absolute; + content: ' '; + display: inline-block; + width: 100%; + height: 2px; + background: #d8d8d8; + left: -50%; + top: 18px; + } + } + + .loading-mask { + position: absolute; + left: 40px; + top: 0; + right: 40px; + bottom: 0px; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + z-index: 1; + + .ant-spin-blur { + position: absolute; + width: 100%; + height: 100%; + opacity: 0.5; + background: #ffffff; + } + } +} + +.custom-card-box::after { + content: ' '; + display: block; + clear: both; +} diff --git a/src/tabviews/custom/index.jsx b/src/tabviews/custom/index.jsx index b113301..18f5659 100644 --- a/src/tabviews/custom/index.jsx +++ b/src/tabviews/custom/index.jsx @@ -23,6 +23,7 @@ const AntvTabs = asyncComponent(() => import('./components/tabs/antv-tabs')) const DataCard = asyncComponent(() => import('./components/card/data-card')) const PropCard = asyncComponent(() => import('./components/card/prop-card')) +const NormalForm = asyncComponent(() => import('./components/form/normal-form')) const CarouselDataCard = asyncComponent(() => import('./components/carousel/data-card')) const CarouselPropCard = asyncComponent(() => import('./components/carousel/prop-card')) const TableCard = asyncComponent(() => import('./components/card/table-card')) @@ -973,6 +974,12 @@ <AntvPie config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} /> </Col> ) + } else if (item.type === 'form') { + return ( + <Col span={item.width} key={item.uuid}> + <NormalForm config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} /> + </Col> + ) } else if (item.type === 'search') { return ( <Col span={item.width} key={item.uuid}> diff --git a/src/tabviews/zshare/actionList/exceloutbutton/index.jsx b/src/tabviews/zshare/actionList/exceloutbutton/index.jsx index f2a67e7..ec8f827 100644 --- a/src/tabviews/zshare/actionList/exceloutbutton/index.jsx +++ b/src/tabviews/zshare/actionList/exceloutbutton/index.jsx @@ -433,12 +433,17 @@ let _header = [] let _topRow = {} let colwidth = [] + let abses = [] btn.verify.columns.forEach(col => { if (_topRow[col.Column]) return _header.push(col.Column) _topRow[col.Column] = col.Text + + if (col.abs === 'true') { + abses.push(col.Column) + } colwidth.push({width: col.Width || 20}) }) @@ -447,14 +452,29 @@ table.push(_topRow) - data && data.forEach(item => { - let _row = {} - _header.forEach(field => { - _row[field] = item[field] + if (data && abses.length > 0) { + data.forEach(item => { + let _row = {} + _header.forEach(field => { + if (item[field] && abses.includes(field)) { + _row[field] = Math.abs(item[field]) + } else { + _row[field] = item[field] + } + }) + + table.push(_row) }) - - table.push(_row) - }) + } else if (data) { + data.forEach(item => { + let _row = {} + _header.forEach(field => { + _row[field] = item[field] + }) + + table.push(_row) + }) + } const ws = XLSX.utils.json_to_sheet(table, {header: _header, skipHeader: true}) diff --git a/src/templates/sharecomponent/actioncomponent/verifyexcelout/index.jsx b/src/templates/sharecomponent/actioncomponent/verifyexcelout/index.jsx index e71b802..8fb4902 100644 --- a/src/templates/sharecomponent/actioncomponent/verifyexcelout/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/verifyexcelout/index.jsx @@ -50,6 +50,25 @@ max: 200, editable: true, width: '25%' + }, + { + title: '鍙栫粷瀵瑰��', + dataIndex: 'abs', + inputType: 'select', + editable: true, + required: false, + width: '25%', + render: (text) => { + if (text === 'true') { + return '鏄�' + } else { + return '鍚�' + } + }, + options: [ + {value: 'true', text: '鏄�'}, + {value: 'false', text: '鍚�'} + ] } ] } @@ -64,21 +83,6 @@ _verify.enable = _verify.enable || 'false' _verify.columns = _verify.columns || [] - - // 鍚屾鏄剧ず鍒� - // if (!_verify.columns || _verify.columns.length === 0) { - // _verify.columns = [] - // config.columns.forEach(item => { - // if (!item.field) return - - // _verify.columns.push({ - // Column: item.field, - // Text: item.label, - // Width: 20, - // uuid: Utils.getuuid() - // }) - // }) - // } if (card.intertype !== 'system') { _verify.enable = 'false' @@ -159,6 +163,7 @@ return } values.uuid = Utils.getuuid() + values.abs = 'false' verify.columns.push(values) this.setState({ @@ -364,6 +369,7 @@ Column: item.field, Text: item.label, Width: 20, + abs: 'false', uuid: Utils.getuuid() }) }) -- Gitblit v1.8.0