From abe57d274e6b12c3612788e0be3d1b9201852ebd Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 24 三月 2021 17:34:55 +0800 Subject: [PATCH] 2021-03-24 --- src/menu/components/form/normal-form/groupform/index.scss | 5 + src/menu/components/form/formaction/index.scss | 1 src/menu/components/form/wrapsetting/settingform/index.jsx | 38 +++++++ src/pc/modulesource/option.jsx | 2 src/tabviews/custom/components/form/normal-form/index.scss | 45 ++++++++ src/menu/components/form/dragtitle/index.scss | 1 src/templates/zshare/formconfig.jsx | 4 src/menu/components/form/normal-form/groupform/index.jsx | 20 +++ src/menu/components/form/normal-form/index.jsx | 6 src/tabviews/custom/components/form/normal-form/index.jsx | 105 ++++++++++++++------ src/menu/components/form/wrapsetting/settingform/index.scss | 3 src/tabviews/zshare/mutilform/index.jsx | 6 src/templates/modalconfig/index.jsx | 2 src/tabviews/custom/index.jsx | 2 src/tabviews/zshare/actionList/normalbutton/index.jsx | 35 ++++++- src/menu/modulesource/option.jsx | 2 16 files changed, 225 insertions(+), 52 deletions(-) diff --git a/src/menu/components/form/dragtitle/index.scss b/src/menu/components/form/dragtitle/index.scss index cc8d2b3..100acac 100644 --- a/src/menu/components/form/dragtitle/index.scss +++ b/src/menu/components/form/dragtitle/index.scss @@ -32,7 +32,6 @@ top: 18px; } .page-card.active { - color: #1890ff; .form-sort { background: #1890ff; } diff --git a/src/menu/components/form/formaction/index.scss b/src/menu/components/form/formaction/index.scss index d6462cd..1fa18b5 100644 --- a/src/menu/components/form/formaction/index.scss +++ b/src/menu/components/form/formaction/index.scss @@ -7,7 +7,6 @@ margin-right: 15px; } .submit { - min-width: 70px; border: none; } .skip { diff --git a/src/menu/components/form/normal-form/groupform/index.jsx b/src/menu/components/form/normal-form/groupform/index.jsx index d853db7..c1611f9 100644 --- a/src/menu/components/form/normal-form/groupform/index.jsx +++ b/src/menu/components/form/normal-form/groupform/index.jsx @@ -1,6 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Radio, Select } from 'antd' +import { Form, Row, Col, Input, Radio, Select, Tooltip, Icon } from 'antd' import { formRule } from '@/utils/option.js' import './index.scss' @@ -85,6 +85,24 @@ </Form.Item> </Col> <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="鐢ㄤ簬琛ㄥ崟鍔犺浇鏃剁殑鐘舵�佹帶鍒躲��"> + <Icon type="question-circle" /> + 鐘舵�佸�� + </Tooltip> + }> + {getFieldDecorator('status', { + initialValue: group.setting.status || '', + rules: [ + { + max: formRule.input.max, + message: formRule.input.message + } + ] + })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)} + </Form.Item> + </Col> + <Col span={12}> <Form.Item label="鐒︾偣"> {getFieldDecorator('focus', { initialValue: group.setting.focus || '' diff --git a/src/menu/components/form/normal-form/groupform/index.scss b/src/menu/components/form/normal-form/groupform/index.scss index 091801f..9a74987 100644 --- a/src/menu/components/form/normal-form/groupform/index.scss +++ b/src/menu/components/form/normal-form/groupform/index.scss @@ -10,4 +10,9 @@ .ant-input-number { width: 100%; } + .anticon-question-circle { + color: #c49f47; + position: relative; + left: -3px; + } } \ No newline at end of file diff --git a/src/menu/components/form/normal-form/index.jsx b/src/menu/components/form/normal-form/index.jsx index 697044f..590fe46 100644 --- a/src/menu/components/form/normal-form/index.jsx +++ b/src/menu/components/form/normal-form/index.jsx @@ -66,7 +66,7 @@ name: card.name, subtype: card.subtype, setting: { }, - wrap: { name: card.name, width: card.width || 24, datatype: 'static' }, + wrap: { name: card.name, width: card.width || 24, datatype: 'static', color: '#1890ff' }, style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' }, columns: [], scripts: [], @@ -77,7 +77,7 @@ style: {}, fields: [], prevButton: {label: '涓婁竴姝�', type: 'prev'}, - subButton: {label: '鎻愪氦', type: 'submit'}, + subButton: {label: '鎻愪氦', type: 'submit', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px'}}, nextButton: {label: '璺宠繃', type: 'next', enable: 'false'} }] } @@ -236,7 +236,7 @@ style: {}, fields: [], prevButton: {label: '涓婁竴姝�', type: 'prev'}, - subButton: {label: '鎻愪氦', type: 'submit'}, + subButton: {label: '鎻愪氦', type: 'submit', style: {backgroundColor: '#1890ff', color: '#ffffff', paddingLeft: '25px', paddingRight: '25px'}}, nextButton: {label: '璺宠繃', type: 'next', enable: 'false'} } diff --git a/src/menu/components/form/wrapsetting/settingform/index.jsx b/src/menu/components/form/wrapsetting/settingform/index.jsx index ff46801..78d7589 100644 --- a/src/menu/components/form/wrapsetting/settingform/index.jsx +++ b/src/menu/components/form/wrapsetting/settingform/index.jsx @@ -2,7 +2,10 @@ import PropTypes from 'prop-types' import { Form, Row, Col, Input, Radio, Tooltip, Icon, InputNumber, Select } from 'antd' +import asyncComponent from '@/utils/asyncComponent' import './index.scss' + +const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) class SettingForm extends Component { static propTpyes = { @@ -53,7 +56,7 @@ } render() { - const { wrap } = this.props + const { wrap, config } = this.props const { getFieldDecorator } = this.props.form const { roleList } = this.state @@ -126,6 +129,39 @@ </Form.Item> </Col> <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="琛ㄥ崟鍔犺浇鏃剁殑鐘舵�侊紝褰撳瓧娈靛�间笌琛ㄥ崟缁勭殑鐘舵�佸�间竴鑷存椂锛屽惎鐢ㄥ搴旂殑琛ㄥ崟缁勩��"> + <Icon type="question-circle" /> + 鐘舵�佹帶鍒� + </Tooltip> + }> + {getFieldDecorator('statusControl', { + initialValue: wrap.statusControl || '' + })( + <Select> + <Select.Option key='' value={''}>鏃�</Select.Option> + {config.columns.map(option => + <Select.Option key={option.uuid} value={option.field}>{option.label}</Select.Option> + )} + </Select> + )} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="瀹屾垚鍚庣殑棰滆壊"> + <Icon type="question-circle" /> + 棰滆壊鎺у埗 + </Tooltip> + }> + {getFieldDecorator('color', { + initialValue: wrap.color || '#1890ff' + })( + <ColorSketch /> + )} + </Form.Item> + </Col> + <Col span={12}> <Form.Item label="榛戝悕鍗�"> {getFieldDecorator('blacklist', { initialValue: wrap.blacklist || [] diff --git a/src/menu/components/form/wrapsetting/settingform/index.scss b/src/menu/components/form/wrapsetting/settingform/index.scss index 159130b..a85d1ac 100644 --- a/src/menu/components/form/wrapsetting/settingform/index.scss +++ b/src/menu/components/form/wrapsetting/settingform/index.scss @@ -8,4 +8,7 @@ .ant-input-number { width: 100%; } + .color-sketch-block { + margin-top: 6px; + } } \ No newline at end of file diff --git a/src/menu/modulesource/option.jsx b/src/menu/modulesource/option.jsx index 957a360..e88ceca 100644 --- a/src/menu/modulesource/option.jsx +++ b/src/menu/modulesource/option.jsx @@ -24,7 +24,7 @@ { type: 'menu', url: Mainsearch, component: 'search', subtype: 'mainsearch', title: '鎼滅储鏉′欢', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: card1, component: 'card', subtype: 'datacard', title: '鏁版嵁鍗�', width: 24 }, { type: 'menu', url: card2, component: 'card', subtype: 'propcard', title: '灞炴�у崱', width: 24 }, - { type: 'menu', url: form, component: 'form', subtype: 'form', title: '琛ㄥ崟', width: 24 }, + { type: 'menu', url: form, component: 'form', subtype: 'stepform', title: '琛ㄥ崟', width: 24 }, { type: 'menu', url: Carousel, component: 'carousel', subtype: 'datacard', title: '杞挱-鍔ㄦ�佹暟鎹�', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: Carousel1, component: 'carousel', subtype: 'propcard', title: '杞挱-闈欐�佹暟鎹�', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: NormalTable, component: 'table', subtype: 'normaltable', title: '甯哥敤琛�', width: 24 }, diff --git a/src/pc/modulesource/option.jsx b/src/pc/modulesource/option.jsx index 7029886..8e94aea 100644 --- a/src/pc/modulesource/option.jsx +++ b/src/pc/modulesource/option.jsx @@ -26,7 +26,7 @@ { type: 'menu', url: Mainsearch, component: 'search', subtype: 'mainsearch', title: '鎼滅储鏉′欢', width: 24 }, { type: 'menu', url: card1, component: 'card', subtype: 'datacard', title: '鏁版嵁鍗�', width: 24 }, { type: 'menu', url: card2, component: 'card', subtype: 'propcard', title: '灞炴�у崱', width: 24 }, - { type: 'menu', url: form, component: 'form', subtype: 'form', title: '琛ㄥ崟', width: 24 }, + { type: 'menu', url: form, component: 'form', subtype: 'stepform', title: '琛ㄥ崟', width: 24 }, { type: 'menu', url: Carousel, component: 'carousel', subtype: 'datacard', title: '杞挱-鍔ㄦ�佹暟鎹�', width: 24 }, { type: 'menu', url: Carousel1, component: 'carousel', subtype: 'propcard', title: '杞挱-闈欐�佹暟鎹�', width: 24 }, { type: 'menu', url: NormalTable, component: 'table', subtype: 'normaltable', title: '甯哥敤琛�', width: 24 }, diff --git a/src/tabviews/custom/components/form/normal-form/index.jsx b/src/tabviews/custom/components/form/normal-form/index.jsx index 2652701..422468b 100644 --- a/src/tabviews/custom/components/form/normal-form/index.jsx +++ b/src/tabviews/custom/components/form/normal-form/index.jsx @@ -2,13 +2,13 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { connect } from 'react-redux' -import { Spin, notification } from 'antd' +import { Spin, notification, Button } 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 asyncComponent from '@/utils/asyncComponent' import asyncSpinComponent from '@/utils/asyncSpinComponent' import MKEmitter from '@/utils/events.js' import zhCN from '@/locales/zh-CN/main.js' @@ -17,6 +17,7 @@ import './index.scss' const MutilForm = asyncSpinComponent(() => import('@/tabviews/zshare/mutilform')) +const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton')) class NormalForm extends Component { static propTpyes = { @@ -34,22 +35,23 @@ loading: false, // 鏁版嵁鍔犺浇鐘舵�� activeKey: '', // 閫変腑鏁版嵁 sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁 - data: {}, // 鏁版嵁 - group: null + data: null, // 鏁版嵁 + group: null, + step: 0 } UNSAFE_componentWillMount () { const { data, BID, config } = this.props - let _data = {} + let _data = null 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)) { + if (_sync && data && data[config.dataName]) { + _data = data[config.dataName] + if (Array.isArray(_data)) { _data = _data[0] || {} } _sync = false @@ -58,10 +60,20 @@ _data = {} } + config.subcards = config.subcards.map(group => { + group.subButton.uuid = group.uuid + group.subButton.Ot = 'requiredSgl' + group.subButton.btnstyle = group.subButton.style + group.subButton.OpenType = 'formSubmit' + + return group + }) + this.setState({ sync: _sync, data: _data, group: config.subcards[0], + step: 0, BID: BID || '', config: config, arr_field: config.columns.map(col => col.field).join(','), @@ -74,6 +86,7 @@ componentDidMount () { MKEmitter.addListener('reloadData', this.reloadData) + MKEmitter.addListener('mkFormSubmit', this.mkFormSubmit) MKEmitter.addListener('resetSelectLine', this.resetParentParam) MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) } @@ -87,6 +100,7 @@ return } MKEmitter.removeListener('reloadData', this.reloadData) + MKEmitter.removeListener('mkFormSubmit', this.mkFormSubmit) MKEmitter.removeListener('resetSelectLine', this.resetParentParam) MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) } @@ -101,8 +115,8 @@ let _data = {} if (nextProps.data && nextProps.data[config.dataName]) { _data = nextProps.data[config.dataName] - if (_data && Array.isArray(_data)) { - _data = _data[0] + if (Array.isArray(_data)) { + _data = _data[0] || {} } } @@ -203,7 +217,7 @@ this.setState({ activeKey: '', - data: _data, + data: _data || {}, loading: false }) } else { @@ -216,20 +230,6 @@ 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) => { @@ -294,9 +294,38 @@ } } + mkFormSubmit = (btnId) => { + const { group } = this.state + + if (group.uuid !== btnId) return + + this.formRef.handleConfirm().then(res => { + MKEmitter.emit('triggerFormSubmit', {menuId: btnId, form: res}) + }) + } + + prevStep = () => { + const { config, group } = this.state + + let _group = config.subcards.filter(item => item.sort === (group.sort - 1))[0] + + this.setState({group: null, step: group.sort - 2}, () => { + this.setState({group: _group}) + }) + } + + nextStep = () => { + const { config, group } = this.state + + let _group = config.subcards.filter(item => item.sort === (group.sort + 1))[0] + + this.setState({group: null, step: group.sort}, () => { + this.setState({group: _group}) + }) + } render() { - const { config, loading, BID, data, group } = this.state + const { config, loading, BID, data, group, dict, step } = this.state return ( <div className="custom-normal-form-box" style={{...config.style}}> @@ -308,20 +337,34 @@ } {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> + <div key={card.uuid} className={'form-title' + (card.sort <= step ? ' active' : '')}> + <span className="form-sort" style={{background: config.wrap.color}}>{card.sort}</span> + <span className="before-line" style={{background: config.wrap.color}}></span> + <span className="after-line" style={{background: config.wrap.color}}></span> {card.setting.title} </div>)) } </div> : null} - <MutilForm + {group && data ? <MutilForm BID={BID} + dict={dict} data={data} - dict={this.state.dict} action={group} inputSubmit={this.handleOk} wrappedComponentRef={(inst) => this.formRef = inst} - /> + /> : null} + {group && data ? <div className="mk-form-action"> + {group.sort !== 1 ? <Button type="link" className="prev" onClick={this.prevStep} style={group.prevButton.style}>{group.prevButton.label}</Button> : null} + <NormalButton + BID={BID} + position="form" + btn={group.subButton} + setting={config.setting} + columns={config.columns} + selectedData={[data]} + /> + {group.nextButton.enable === 'true' && group.sort !== config.subcards.length ? <Button type="link" className="skip" onClick={this.nextStep} style={group.nextButton.style}>{group.nextButton.label}</Button> : null} + </div> : null} </div> ) } diff --git a/src/tabviews/custom/components/form/normal-form/index.scss b/src/tabviews/custom/components/form/normal-form/index.scss index 051089f..285b505 100644 --- a/src/tabviews/custom/components/form/normal-form/index.scss +++ b/src/tabviews/custom/components/form/normal-form/index.scss @@ -4,6 +4,7 @@ background-repeat: no-repeat; background-size: cover; position: relative; + min-height: 200px; .mk-normal-form-title { display: flex; @@ -28,16 +29,54 @@ z-index: 1; } } - .form-title:not(:first-child)::before { + .before-line, .after-line { + display: none; + } + .form-title:not(:first-child) .before-line { + position: absolute; + display: inline-block; + width: 50%; + height: 2px; + background: #d8d8d8; + left: 0%; + top: 18px; + } + .form-title:not(:last-child) .after-line { position: absolute; content: ' '; display: inline-block; - width: 100%; + width: 50%; height: 2px; background: #d8d8d8; - left: -50%; + left: 50%; top: 18px; } + .form-title:not(.active) { + .form-sort { + background: #d8d8d8!important; + } + .before-line, .after-line { + background: #d8d8d8!important; + } + } + } + + .mk-form-action { + position: relative; + text-align: center; + padding-bottom: 10px; + + .prev { + margin-right: 15px; + } + .submit { + min-width: 70px; + border: none; + } + .skip { + position: absolute; + right: 5px; + } } .loading-mask { diff --git a/src/tabviews/custom/index.jsx b/src/tabviews/custom/index.jsx index 18f5659..0df7a58 100644 --- a/src/tabviews/custom/index.jsx +++ b/src/tabviews/custom/index.jsx @@ -672,7 +672,7 @@ return component } - if (['propcard', 'brafteditor', 'sandbox'].includes(component.subtype) && component.wrap.datatype === 'static') { + if (['propcard', 'brafteditor', 'sandbox', 'stepform'].includes(component.subtype) && component.wrap.datatype === 'static') { component.format = '' } diff --git a/src/tabviews/zshare/actionList/normalbutton/index.jsx b/src/tabviews/zshare/actionList/normalbutton/index.jsx index b3dfeee..d1693db 100644 --- a/src/tabviews/zshare/actionList/normalbutton/index.jsx +++ b/src/tabviews/zshare/actionList/normalbutton/index.jsx @@ -54,6 +54,8 @@ if (position === 'toolbar') { MKEmitter.addListener('triggerBtnId', this.actionTrigger) + } else if (position === 'form') { + MKEmitter.addListener('triggerFormSubmit', this.actionSubmit) } } @@ -62,6 +64,23 @@ return } MKEmitter.removeListener('triggerBtnId', this.actionTrigger) + MKEmitter.removeListener('triggerFormSubmit', this.actionSubmit) + } + + actionSubmit = (res) => { + const { btn } = this.props + + if (btn.uuid !== res.menuId) return + + this.setState({ + confirmLoading: true + }) + + this.execSubmit(this.state.tabledata, () => { + this.setState({ + confirmLoading: false + }) + }, res.form) } /** @@ -117,7 +136,7 @@ duration: 5 }) return - } else if (!setting.primaryKey) { + } else if (btn.OpenType !== 'formSubmit' && !setting.primaryKey) { // 闇�瑕侀�夋嫨琛屾椂锛屾牎楠屾槸鍚﹁缃富閿� notification.warning({ top: 92, @@ -179,7 +198,13 @@ return } - if (btn.OpenType === 'prompt') { + if (btn.OpenType === 'formSubmit') { + this.setState({ + tabledata: data + }) + MKEmitter.emit('mkFormSubmit', btn.uuid) + return + } else if (btn.OpenType === 'prompt') { this.updateStatus('start') confirm({ title: this.state.dict['main.action.confirm.tip'], @@ -275,7 +300,7 @@ } param.LText = Utils.formatOptions(param.LText) - } else if (btn.OpenType === 'pop') { // 琛ㄥ崟 + } else if (btn.OpenType === 'pop' || btn.OpenType === 'formSubmit') { // 琛ㄥ崟 if (btn.sqlType === 'insert') { // 绯荤粺鍑芥暟娣诲姞鏃讹紝鐢熸垚uuid primaryId = '' @@ -499,7 +524,7 @@ param[setting.primaryKey] = primaryId // 璁剧疆涓婚敭鍙傛暟 - if (btn.OpenType === 'pop') { // 琛ㄥ崟 + if (btn.OpenType === 'pop' || btn.OpenType === 'formSubmit') { // 琛ㄥ崟 formdata.forEach(_data => { param[_data.key] = _data.value }) @@ -610,7 +635,7 @@ param.BID = this.props.BID } - if (btn.OpenType === 'pop' && formdata) { // 琛ㄥ崟 + if ((btn.OpenType === 'pop' || btn.OpenType === 'formSubmit') && formdata) { // 琛ㄥ崟 formdata.forEach(_data => { param[_data.key] = _data.value }) diff --git a/src/tabviews/zshare/mutilform/index.jsx b/src/tabviews/zshare/mutilform/index.jsx index 56b78f9..e1d34c5 100644 --- a/src/tabviews/zshare/mutilform/index.jsx +++ b/src/tabviews/zshare/mutilform/index.jsx @@ -57,7 +57,9 @@ let supItemVal = {} // 涓婄骇鑿滃崟鍒濆鍊� let deForms = [] // 闇�瑕佸姩鎬佽幏鍙栦笅鎷夎彍鍗曠殑琛ㄥ崟 - action.fields.forEach(item => { + let formlist = fromJS(action.fields).toJS() + + formlist.forEach(item => { if (item.type === 'text' || item.type === 'number') { // 鐢ㄤ簬杩囨护涓嬫媺鑿滃崟鍏宠仈琛ㄥ崟 _inputfields.push(item.field) } else if (item.type === 'textarea') { @@ -71,7 +73,7 @@ } }) - let formlist = action.fields.map(item => { + formlist = formlist.map(item => { if (item.labelwidth) { item.labelCol = {style: {width: item.labelwidth + '%'}} } diff --git a/src/templates/modalconfig/index.jsx b/src/templates/modalconfig/index.jsx index e20cd24..3c44a2e 100644 --- a/src/templates/modalconfig/index.jsx +++ b/src/templates/modalconfig/index.jsx @@ -390,7 +390,7 @@ const { editAction } = this.props const { config, menu, openEdition } = this.state - if ((!config.groups[0] && !config.fields[0]) || (config.fields[0] && config.fields[0].origin)) { + if (config.fields[0] && config.fields[0].origin) { notification.warning({ top: 92, message: '璇锋坊鍔犺〃鍗�', diff --git a/src/templates/zshare/formconfig.jsx b/src/templates/zshare/formconfig.jsx index adb4574..72df4e2 100644 --- a/src/templates/zshare/formconfig.jsx +++ b/src/templates/zshare/formconfig.jsx @@ -667,7 +667,11 @@ } let refresh = [] + if (type === 'subtable') { // 瀛愯〃椤甸潰锛屽彲璁剧疆鍒锋柊涓昏〃鍙婂悓绾ф爣绛� + if (card.focus) { + card.popClose = 'maingrid' + } refresh.push({ value: 'maingrid', text: Formdict['header.form.refresh.maingrid'] -- Gitblit v1.8.0