From 3f85ff9067b806df7848ce7b852ff357a7bac7f5 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 29 六月 2021 17:25:43 +0800 Subject: [PATCH] 2021-06-29 --- src/mob/components/topbar/normal-navbar/index.scss | 26 + src/mob/components/topbar/normal-navbar/wrapsetting/index.jsx | 2 src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 12 src/templates/modalconfig/settingform/index.scss | 5 src/templates/modalconfig/settingform/index.jsx | 37 + src/templates/zshare/formconfig.jsx | 11 src/mob/components/topbar/normal-navbar/wrapsetting/settingform/index.jsx | 43 + src/mob/modalconfig/source.jsx | 104 ++++ src/mob/components/formdragelement/card.jsx | 2 src/mob/modalconfig/controller.jsx | 64 +++ src/tabviews/zshare/actionList/exceloutbutton/index.jsx | 4 src/mob/components/topbar/normal-navbar/index.jsx | 14 src/mob/modalconfig/index.jsx | 478 ++++++++++++++++++++++ src/mob/modalconfig/index.scss | 320 +++++++++++++++ src/mob/modalconfig/pastecomponent/index.jsx | 76 +++ src/views/mobdesign/index.jsx | 4 src/mob/modalconfig/pastecomponent/index.scss | 0 17 files changed, 1,163 insertions(+), 39 deletions(-) diff --git a/src/mob/components/formdragelement/card.jsx b/src/mob/components/formdragelement/card.jsx index cef6188..f1f781f 100644 --- a/src/mob/components/formdragelement/card.jsx +++ b/src/mob/components/formdragelement/card.jsx @@ -60,7 +60,7 @@ let formItem = null if (card.type === 'text' || card.type === 'number') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval}</div>{card.scan === 'true' ? <div className="am-list-extra"><Icon type="scan" /></div> : null}</div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval}</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><Icon type="scan" /></div> : null}</div></div>) } else if (card.type === 'number') { formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval}</div></div></div>) } else if (card.type === 'select' || card.type === 'link') { diff --git a/src/mob/components/topbar/normal-navbar/index.jsx b/src/mob/components/topbar/normal-navbar/index.jsx index 9e82f76..6f0a585 100644 --- a/src/mob/components/topbar/normal-navbar/index.jsx +++ b/src/mob/components/topbar/normal-navbar/index.jsx @@ -35,7 +35,7 @@ floor: card.floor, width: card.width || 24, subtype: card.subtype, - wrap: { height: 50, title: 'NavBar', back: 'true', logout: 'false' }, + wrap: { type: 'navbar', height: 50, title: 'NavBar', back: 'true', search: 'false', logout: 'false' }, style: {borderBottomColor: '#bcbcbc', borderBottomWidth: '1px', paddingLeft: '10px', paddingRight: '10px', lineHeight: '2.8', fontSize: '18px' }, } @@ -130,6 +130,10 @@ } } + setSearch = () => { + + } + render() { const { card } = this.state @@ -154,9 +158,13 @@ <div className="am-navbar-left"> {card.wrap.back !== 'false' ? <Icon type="left" /> : null} </div> - <div className="am-navbar-title">{card.wrap.title || ''}</div> + {card.wrap.type !== 'search' ? + <div className="am-navbar-title">{card.wrap.title || ''}</div> : + <div className="am-navbar-search" onDoubleClick={this.setSearch}><div className="search-bar"><Icon type="search" /></div></div> + } <div className="am-navbar-right"> - {card.wrap.logout === 'true' ? <span>閫�鍑�</span> : null} + {card.wrap.search === 'true' ? <Icon type="search" onDoubleClick={this.setSearch}/> : null} + {card.wrap.logout === 'true' ? <Icon type="ellipsis" /> : null} </div> </div> </div> diff --git a/src/mob/components/topbar/normal-navbar/index.scss b/src/mob/components/topbar/normal-navbar/index.scss index 1cd192e..db9ed7f 100644 --- a/src/mob/components/topbar/normal-navbar/index.scss +++ b/src/mob/components/topbar/normal-navbar/index.scss @@ -28,7 +28,7 @@ font-style: inherit; font-weight: inherit; .am-navbar-left { - flex: 1; + width: 30px; text-align: left; color: #1890ff; } @@ -38,10 +38,32 @@ font-weight: inherit; flex: 1; } - .am-navbar-right { + .am-navbar-search { flex: 1; + padding: 0 5px; + .search-bar { + height: 35px; + line-height: 35px; + padding: 0 10px; + color:rgba(0, 0, 0, 0.65); + border: 1px solid #e8e8e8; + background: #efefef; + border-radius: 4px; + position: relative; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + } + } + .am-navbar-right { text-align: right; color: #1890ff; + min-width: 30px; + .anticon-search { + margin-right: 5px; + padding: 5px; + cursor: pointer; + } } } } diff --git a/src/mob/components/topbar/normal-navbar/wrapsetting/index.jsx b/src/mob/components/topbar/normal-navbar/wrapsetting/index.jsx index 9bbfd01..77c0894 100644 --- a/src/mob/components/topbar/normal-navbar/wrapsetting/index.jsx +++ b/src/mob/components/topbar/normal-navbar/wrapsetting/index.jsx @@ -59,7 +59,7 @@ wrapClassName="popview-modal" title="瀵艰埅鏍忚缃�" visible={visible} - width={600} + width={750} maskClosable={false} okText={dict['model.submit']} onOk={this.verifySubmit} diff --git a/src/mob/components/topbar/normal-navbar/wrapsetting/settingform/index.jsx b/src/mob/components/topbar/normal-navbar/wrapsetting/settingform/index.jsx index 0ca649c..f1bfc8d 100644 --- a/src/mob/components/topbar/normal-navbar/wrapsetting/settingform/index.jsx +++ b/src/mob/components/topbar/normal-navbar/wrapsetting/settingform/index.jsx @@ -11,7 +11,9 @@ inputSubmit: PropTypes.func // 鍥炶溅浜嬩欢 } - state = {} + state = { + type: this.props.wrap.type || 'navbar' + } handleConfirm = () => { // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� @@ -37,6 +39,7 @@ render() { const { wrap } = this.props const { getFieldDecorator } = this.props.form + const { type } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -52,14 +55,26 @@ <div className="model-menu-setting-form"> <Form {...formItemLayout}> <Row gutter={24}> - <Col span={22}> + <Col span={12}> + <Form.Item label="绫诲瀷"> + {getFieldDecorator('type', { + initialValue: wrap.type || 'navbar' + })( + <Radio.Group onChange={(e) => this.setState({type: e.target.value})}> + <Radio value="navbar">瀵艰埅鏍�</Radio> + <Radio value="search">鎼滅储鏍�</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> + {type === 'navbar' ? <Col span={12}> <Form.Item label="鏍囬"> {getFieldDecorator('title', { initialValue: wrap.title || '' })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} </Form.Item> - </Col> - <Col span={22}> + </Col> : null} + <Col span={12}> <Form.Item label="楂樺害"> {getFieldDecorator('height', { initialValue: wrap.height || 50, @@ -72,19 +87,31 @@ })(<InputNumber min={30} max={200} precision={0} onPressEnter={this.handleSubmit} />)} </Form.Item> </Col> - <Col span={24}> + <Col span={12}> <Form.Item label="杩斿洖"> {getFieldDecorator('back', { initialValue: wrap.back || 'true' })( <Radio.Group> <Radio value="true">鏄剧ず</Radio> - <Radio value="false">涓嶆樉绀�</Radio> + <Radio value="false">闅愯棌</Radio> </Radio.Group> )} </Form.Item> </Col> - <Col span={24}> + {type === 'navbar' ? <Col span={12}> + <Form.Item label="鎼滅储"> + {getFieldDecorator('search', { + initialValue: wrap.search || 'false' + })( + <Radio.Group> + <Radio value="true">鏄剧ず</Radio> + <Radio value="false">闅愯棌</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> : null} + <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="鐐瑰嚮閫�鍑烘椂锛岃繑鍥炵涓�涓〉闈€��"> <Icon type="question-circle" /> @@ -96,7 +123,7 @@ })( <Radio.Group> <Radio value="true">鏄剧ず</Radio> - <Radio value="false">涓嶆樉绀�</Radio> + <Radio value="false">闅愯棌</Radio> </Radio.Group> )} </Form.Item> diff --git a/src/mob/modalconfig/controller.jsx b/src/mob/modalconfig/controller.jsx new file mode 100644 index 0000000..efd36d6 --- /dev/null +++ b/src/mob/modalconfig/controller.jsx @@ -0,0 +1,64 @@ +import React, {Component} from 'react' +import { is, fromJS } from 'immutable' + +import MKEmitter from '@/utils/events.js' +import ModalConfig from '@/mob/modalconfig' + +class ModalController extends Component { + state = { + btn: null, + config: null, + visible: false + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + componentDidMount () { + MKEmitter.addListener('changeModal', this.initConfig) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 + */ + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('changeModal', this.initConfig) + } + + initConfig = (config, btn) => { + this.setState({ + visible: true, + config: fromJS(config).toJS(), + btn: fromJS(btn).toJS() + }) + } + + handleBack = () => { + this.setState({ + visible: false, + config: null, + btn: null + }) + } + + handleSave = (modal) => { + const { config, btn } = this.state + MKEmitter.emit('submitModal', config, btn, modal) + } + + render () { + const { config, btn, visible } = this.state + + if (!visible) return null + + return ( + <ModalConfig btn={btn} componentConfig={config} handleBack={this.handleBack} handleSave={this.handleSave}/> + ) + } +} + +export default ModalController \ No newline at end of file diff --git a/src/mob/modalconfig/index.jsx b/src/mob/modalconfig/index.jsx new file mode 100644 index 0000000..3e39dc0 --- /dev/null +++ b/src/mob/modalconfig/index.jsx @@ -0,0 +1,478 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { DndProvider } from 'react-dnd' +import HTML5Backend from 'react-dnd-html5-backend' +import moment from 'moment' +import { Button, Modal, Collapse, notification, Switch, Icon } from 'antd' + +import Api from '@/api' +import Utils from '@/utils/utils.js' +import zhCN from '@/locales/zh-CN/model.js' +import enUS from '@/locales/en-US/model.js' +import { getModalForm } from '@/templates/zshare/formconfig' + +import ModalForm from '@/templates/zshare/modalform' +import SourceElement from '@/templates/modalconfig/dragelement/source' +import SettingForm from '@/templates/modalconfig/settingform' +import asyncComponent from '@/utils/asyncComponent' +import { SearchItems } from './source' +import './index.scss' + +const { Panel } = Collapse +const { confirm } = Modal +const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS +const PasteComponent = asyncComponent(() => import('./pastecomponent')) +const DragElement = asyncComponent(() => import('@/mob/components/formdragelement')) +const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) + +class ComModalConfig extends Component { + static propTpyes = { + btn: PropTypes.object, + handleSave: PropTypes.func, + handleBack: PropTypes.func + } + + state = { + dict: CommonDict, // 瀛楀吀 + config: null, // 椤甸潰閰嶇疆锛屽寘鎷ā鏉跨被鍨嬨�佹ā鎬佹璁剧疆銆佹坊鍔犺〃鍚嶃�佽〃鍗曞垪琛� + visible: false, // 琛ㄥ崟缂栬緫妯℃�佹锛屾樉绀烘帶鍒� + tableVisible: false, // 鏁版嵁琛ㄥ瓧娈靛垪琛ㄦā鎬佹锛屾樉绀烘帶鍒� + tableColumns: [], // 琛ㄦ牸瀛楁鍚嶅垪琛� + fields: null, // 琛ㄥ崟锛屽彲閫夊瓧娈碉紙鍘婚噸鍚庯級 + formlist: null, // 琛ㄥ崟缂栬緫妯℃�佹锛屽彲缂栬緫瀛楁 + card: null, // 缂栬緫鍏冪礌 + closeloading: false, // 鑿滃崟淇濆瓨涓� + settingVisible: false, // 鍏ㄥ眬閰嶇疆妯℃�佹 + closeVisible: false, // 鍏抽棴妯℃�佹 + tables: [], // 鍙敤琛ㄥ悕 + selectedTables: [], // 宸查�夎〃鍚� + originConfig: null, // 鍘熷鑿滃崟 + sources: null, // 琛ㄥ崟绫诲瀷 + sqlVerifing: false, // sql楠岃瘉 + openEdition: '', // 缂栬緫鐗堟湰鏍囪锛岄槻姝㈠浜烘搷浣� + showField: false, // 鏄剧ず琛ㄥ崟瀛楁鍊� + standardform: null + } + + /** + * @description 鏁版嵁棰勫鐞� + */ + UNSAFE_componentWillMount () { + const { btn } = this.props + + let _config = btn.modal + _config.version = '1.0' + + this.setState({ + config: _config, + originConfig: fromJS(_config).toJS() + }) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 + */ + componentWillUnmount () { + this.setState = () => { + return + } + } + + /** + * @description 琛ㄥ崟鍙樺寲 + * 1銆佽〃鍗曟嫋鎷芥坊鍔犳椂锛屾鏌ユ槸鍚﹀瓨鍦ㄧず渚嬭〃鍗曪紝濡傚瓨鍦ㄥ垯鍘婚櫎绀轰緥 + * 2銆佽〃鍗曠Щ鍔ㄥ悗锛屼繚瀛樼Щ鍔ㄥ悗鐨勯『搴� + * 3銆佹柊澧炶〃鍗曟椂锛岀洿鎺ユ墦寮�缂栬緫妗� + */ + handleList = (list, newcard) => { + let _config = fromJS(this.state.config).toJS() + + if (list.length > _config.fields.length) { + _config.fields = list.filter(item => !item.origin) + + this.setState({ + config: _config + }, () => { + this.handleForm(newcard) + }) + } else { + _config.fields = list + this.setState({config: _config}) + } + } + + /** + * @description 琛ㄥ崟缂栬緫 + * 1銆佹樉绀虹紪杈戝脊绐�-visible + * 2銆佷繚瀛樼紪杈戦」-card + * 3銆佽缃紪杈戝弬鏁伴」-formlist + */ + handleForm = (_card) => { + const { componentConfig } = this.props + const { config } = this.state + let card = fromJS(_card).toJS() + let _inputfields = [] + let _tabfields = [] + let _linkableFields = [] + let _linksupFields = [{ + value: '', + text: '绌�' + }] + let standardform = null + + _inputfields = config.fields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color') + _tabfields = config.fields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) + _tabfields.unshift({field: '', text: '鍘熻〃鍗�'}) + + let uniq = new Map() + uniq.set(card.field, true) + let index = null + config.fields.forEach((item, i) => { + if (card.uuid === item.uuid) { + index = i + } + if (item.type !== 'select' && item.type !== 'link' && item.type !== 'radio') return + if (item.field && !uniq.has(item.field)) { + uniq.set(item.field, true) + + _linkableFields.push({ + value: item.field, + text: item.label + ' (琛ㄥ崟)' + }) + _linksupFields.push({ + value: item.field, + text: item.label + }) + } + }) + if (index !== null) { + if (index === 0) { + standardform = config.fields[index + 1] || null + } else { + standardform = config.fields[index - 1] || null + } + } + + componentConfig.columns.forEach(col => { + if (col.field && !uniq.has(col.field)) { + uniq.set(col.field, true) + + _linkableFields.push({ + value: col.field, + text: col.label + ' (鏄剧ず鍒�)' + }) + } + }) + + if (card.linkSubField && card.linkSubField.length > 0) { + let fields = _inputfields.map(item => item.field) + card.linkSubField = card.linkSubField.filter(item => fields.includes(item)) + } + + if (!card.span && standardform && standardform.span) { + card.span = standardform.span + card.labelwidth = standardform.labelwidth + } + + this.setState({ + standardform, + visible: true, + card: card, + formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, !!this.props.editTab) + }) + } + + /** + * @description 缂栬緫鍚庢彁浜� + * 1銆佽幏鍙栫紪杈戝悗鐨勮〃鍗曚俊鎭� + * 2銆佸幓闄ゅ彲鑳藉瓨鍦ㄧ殑绀轰緥琛ㄥ崟 + * 3銆侀�氳繃loading鍒锋柊 + */ + handleSubmit = () => { + this.formRef.handleConfirm().then(res => { + let _config = fromJS(this.state.config).toJS() + let fieldrepet = false // 瀛楁閲嶅 + let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅 + + _config.fields = _config.fields.map(item => { + if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) { + fieldrepet = true + } else if (res.label && item.uuid !== res.uuid && item.label === res.label) { + labelrepet = true + } + + if (item.uuid === res.uuid) { + return res + } else { + return item + } + }) + + if (fieldrepet) { + notification.warning({ + top: 92, + message: '瀛楁宸插瓨鍦紒', + duration: 10 + }) + return + } else if (labelrepet) { + notification.warning({ + top: 92, + message: '鍚嶇О宸插瓨鍦紒', + duration: 10 + }) + return + } + + _config.fields = _config.fields.filter(item => !item.origin) + + if ((res.type === 'select' || res.type === 'multiselect' || res.type === 'link') && res.resourceType === '1' && /\s/.test(res.dataSource)) { + this.setState({ + sqlVerifing: true + }) + + let param = { + func: 's_debug_sql', + exec_type: 'y', + LText: res.dataSource + } + + param.LText = param.LText.replace(/@\$|\$@/ig, '') + + param.LText = Utils.formatOptions(param.LText) + param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + param.secretkey = Utils.encrypt('', param.timestamp) + + if (window.GLOB.mainSystemApi && res.database === 'sso') { + param.rduri = window.GLOB.mainSystemApi + } + + Api.getLocalConfig(param).then(result => { + if (result.status) { + this.setState({ + sqlVerifing: false, + config: _config, + card: null, + visible: false + }) + } else { + this.setState({sqlVerifing: false}) + + Modal.error({ + title: result.message + }) + } + }) + } else { + this.setState({ + config: _config, + card: null, + visible: false + }) + } + }) + } + + /** + * @description 琛ㄥ崟鍒犻櫎骞跺埛鏂� + */ + closeForm = (card) => { + let _this = this + + confirm({ + content: `纭畾鍒犻櫎${card.label ? `<<${card.label}>>` : ''}鍚楋紵`, + onOk() { + let _config = fromJS(_this.state.config).toJS() + _config.fields = _config.fields.filter(item => !(item.uuid === card.uuid)) + + _this.setState({ + config: _config, + }) + }, + onCancel() {} + }) + } + + submitConfig = () => { + const { config } = this.state + + this.setState({originConfig: fromJS(config).toJS(), closeVisible: false}) + this.props.handleSave(config) + notification.success({ + top: 92, + message: '淇濆瓨鎴愬姛銆�', + duration: 2 + }) + } + + cancelConfig = () => { + const { config, originConfig } = this.state + + if (!is(fromJS(config), fromJS(originConfig))) { + this.setState({ + closeVisible: true + }) + } else { + this.props.handleBack() + } + } + + /** + * @description 鍏ㄥ眬璁剧疆妯℃�佹 + */ + changeSetting = () => { + this.setState({ + settingVisible: true + }) + } + + /** + * @description 淇濆瓨鍏ㄥ眬璁剧疆 + */ + settingSave = () => { + const {config} = this.state + this.settingRef.handleConfirm().then(res => { + this.setState({ + config: {...config, setting: res}, + settingVisible: false + }) + }) + } + + editModalCancel = () => { + const { config, card } = this.state + + if (card.focus) { + let _fields = config.fields.filter(item => item.uuid !== card.uuid) + let _config = {...config, fields: _fields} + + this.setState({ + card: null, + config: _config, + visible: false + }) + } else { + this.setState({ + card: null, + visible: false + }) + } + } + + /** + * @description 鏇存柊 + */ + updateConfig = (config) => { + this.setState({ + config + }) + } + + render () { + const { btn } = this.props + const { config, dict } = this.state + + return ( + <div className="mob-form-board"> + <DndProvider backend={HTML5Backend}> + <div className="tools"> + <Collapse accordion defaultActiveKey="1" bordered={false}> + <Panel header={dict['header.menu.form']} key="1"> + <div className="search-element"> + {SearchItems.map((item, index) => { + return (<SourceElement key={index} content={item}/>) + })} + </div> + <FieldsComponent + config={config} + type="form" + updatefield={this.updateConfig} + /> + </Panel> + </Collapse> + </div> + <div className="modal-control"> + <Button icon="setting" onClick={this.changeSetting}>璁剧疆</Button> + <Button type="primary" onClick={this.submitConfig}>淇濆瓨</Button> + <Button onClick={this.cancelConfig}>杩斿洖</Button> + <PasteComponent type="menu" Tab={null} insert={this.insert} /> + <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> + </div> + <div className="setting"> + <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}> + <div className="mob-shell-inner"> + <div className="am-navbar"> + <Icon type="close" /> + <div className="am-navbar-title">{btn.label}</div> + </div> + <DragElement + list={config.fields} + setting={config.setting} + showField={this.state.showField} + placeholder={this.state.dict['header.form.modal.placeholder']} + handleList={this.handleList} + handleForm={this.handleForm} + closeForm={this.closeForm} + /> + <Button className="modal-submit" type="primary">纭畾</Button> + </div> + </div> + </div> + </DndProvider> + <Modal + title={this.state.dict['model.edit']} + visible={this.state.visible} + width={850} + onCancel={this.editModalCancel} + onOk={this.handleSubmit} + confirmLoading={this.state.sqlVerifing} + destroyOnClose + > + <ModalForm + dict={this.state.dict} + card={this.state.card} + formlist={this.state.formlist} + inputSubmit={this.handleSubmit} + standardform={this.state.standardform} + wrappedComponentRef={(inst) => this.formRef = inst} + /> + </Modal> + <Modal + title={this.state.dict['model.edit']} + visible={this.state.settingVisible} + width={850} + maskClosable={false} + onOk={this.settingSave} + onCancel={() => { this.setState({ settingVisible: false }) }} + destroyOnClose + > + <SettingForm + config={config} + dict={this.state.dict} + isSubTab={!!this.props.editTab} + inputSubmit={this.settingSave} + wrappedComponentRef={(inst) => this.settingRef = inst} + /> + </Modal> + <Modal + bodyStyle={{textAlign: 'center', color: '#000000', fontSize: '16px'}} + closable={false} + maskClosable={false} + visible={this.state.closeVisible} + onCancel={() => { this.setState({closeVisible: false}) }} + footer={[ + <Button key="save" className="mk-btn mk-green" loading={this.state.closeloading} onClick={this.submitConfig}>{this.state.dict['model.save']}</Button>, + <Button key="confirm" className="mk-btn mk-yellow" onClick={this.props.handleBack}>{this.state.dict['model.notsave']}</Button>, + <Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>{this.state.dict['model.cancel']}</Button> + ]} + destroyOnClose + > + {this.state.dict['header.menu.config.placeholder']} + </Modal> + </div> + ) + } +} + +export default ComModalConfig \ No newline at end of file diff --git a/src/mob/modalconfig/index.scss b/src/mob/modalconfig/index.scss new file mode 100644 index 0000000..c8c931d --- /dev/null +++ b/src/mob/modalconfig/index.scss @@ -0,0 +1,320 @@ +.mob-form-board { + position: fixed; + z-index: 1070; + top: 48px; + left: 0px; + right: 0px; + bottom: 0px; + background: rgba(0, 0, 0, 1); + .tools { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 235px; + background: #ffffff; + border-right: 1px solid #d9d9d9; + height: 100%; + overflow-y: auto; + padding-bottom: 30px; + .ant-collapse-borderless { + background-color: #ffffff; + } + .ant-collapse-item { + border: 0; + } + .ant-input-search { + margin-top: 10px; + } + .ant-collapse-item.ant-collapse-item-active { + border-bottom: 1px solid #d9d9d9; + } + .ant-collapse .ant-collapse-header { + padding: 11px 16px 10px 40px; + border-bottom: 1px solid #d9d9d9; + background: #1890ff; + color: #ffffff; + } + .ant-collapse-content-box { + .ant-form-item { + margin-bottom: 10px; + .ant-form-item-label { + text-align: left; + height: 25px; + line-height: 25px; + } + } + .ant-btn { + margin-bottom: 10px; + } + } + .search-element { + padding-top: 10px; + li { + padding: 0px 16px 10px; + div { + cursor: move; + } + } + } + .tables { + .ant-select-selection-selected-value { + opacity: 0.4!important; + } + } + .ant-list { + margin-top: 20px; + .ant-list-item { + display: -webkit-box; + padding-right: 20px; + position: relative; + padding-left: 5px; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + width: 100%; + .anticon { + position: absolute; + top: 0px; + right: 0px; + padding: 3px 3px 10px 10px; + cursor: pointer; + } + .bottom-mask { + position: absolute; + width: 100%; + height: 8px; + bottom: 0; + left: 0; + background: #ffffff; + border-radius: 8px; + } + } + } + } + .tools::-webkit-scrollbar { + width: 4px; + } + .tools::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08); + background: rgba(0, 0, 0, 0.08); + } + .tools::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); + } + .modal-control { + position: absolute; + right: 0; + top: 0; + width: 120px; + height: 100vh; + padding: 20px 10px; + background: #ffffff; + z-index: 10; + transition: right 0.3s; + + div:not(.draw), button:not(.ant-switch) { + display: block!important; + margin-bottom: 15px; + width: 100%; + } + .ant-switch.big { + min-width: 60px; + height: 24px; + line-height: 24px; + margin-bottom: 15px; + .ant-switch-inner { + font-size: 14px; + } + } + .ant-switch.big:after { + width: 22px; + height: 22px; + } + } + .setting { + position: relative; + width: 100vw; + height: 100%; + background: #959595; + + .mob-shell { + margin: 0 auto; + background: #000000; + background-size: 100% 100%; + padding: 25px 13px 40px; + border-radius: 30px; + + .am-navbar { + height: 45px; + line-height: 45px; + position: relative; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 10px; + .anticon-close { + position: absolute; + line-height: 45px; + font-size: 18px; + left: 10px; + } + .am-navbar-title { + font-size: 16px; + text-align: center; + } + } + .modal-submit { + width: 100%; + border-radius: 0; + opacity: 0.5; + cursor: default; + font-size: 18px; + height: 40px; + } + + .modal-fields-row { + min-height: calc(100% - 95px); + } + + .modal-form { + padding: 0px 24px; + min-height: 87px; + .group-title { + position: relative; + min-height: 22px; + margin-bottom: 10px; + padding-top: 10px; + border-bottom: 1px solid #e8e8e8; + + span { + padding: 0 5px 5px; + } + } + > .ant-row { + min-height: 120px; + } + .ant-row .ant-col-6 { + padding: 0 12px!important; + } + .ant-row.ant-form-item .ant-col { + padding: 0; + } + .textarea2, .textarea4 { + padding-left: 7px; + } + .page-card { + position: relative; + background: #ffffff; + border-radius: 2px; + margin-bottom: 15px; + .ant-form-item { + cursor: move; + display: flex; + margin-bottom: 0px; + .ant-form-item-label { + overflow: visible; + position: relative; + height: 40px; + label { + width: 100%; + cursor: move; + overflow: hidden; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .ant-form-item-control-wrapper { + position: relative; + .ant-select { + width: 100%; + margin-top: 4px; + } + .ant-calendar-picker { + width: 100%; + margin-top: 4px; + } + .ant-input-number { + width: 100%; + margin-top: 4px; + } + .normal-braft-editor { + border: 1px solid #d9d9d9; + border-radius: 4px; + } + } + .ant-form-item-control-wrapper::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + z-index: 1; + } + .ant-col-cuslabel { + width: 10.5%; + } + .ant-col-cuswrap { + width: 89.5%; + } + } + } + .ant-calendar-picker { + min-width: 100px!important; + } + } + } + } + .setting { + overflow-y: auto; + } + .setting::-webkit-scrollbar { + width: 7px; + } + .setting::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13); + background: rgba(0, 0, 0, 0.13); + } + .setting::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); + } +} + + +.modal-fields { + .ant-modal { + top: 50px; + padding-bottom: 5px; + .ant-modal-body { + max-height: calc(100vh - 190px); + overflow-y: auto; + .ant-empty { + margin: 15vh 8px; + } + } + .ant-modal-body::-webkit-scrollbar { + width: 7px; + } + .ant-modal-body::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13); + background: rgba(0, 0, 0, 0.13); + } + .ant-modal-body::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); + } + } +} \ No newline at end of file diff --git a/src/mob/modalconfig/pastecomponent/index.jsx b/src/mob/modalconfig/pastecomponent/index.jsx new file mode 100644 index 0000000..71df022 --- /dev/null +++ b/src/mob/modalconfig/pastecomponent/index.jsx @@ -0,0 +1,76 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { Button, Modal, notification } from 'antd' + +import asyncComponent from '@/utils/asyncComponent' +import './index.scss' + +const PasteForm = asyncComponent(() => import('@/templates/zshare/pasteform')) + +class PasteController extends Component { + static propTpyes = { + config: PropTypes.object, // 缁勪欢閰嶇疆 + updateConfig: PropTypes.func + } + + state = { + visible: false + } + + pasteSubmit = () => { + const { config } = this.props + this.pasteFormRef.handleConfirm().then(res => { + if (res.copyType !== 'form') { + notification.warning({ top: 92, message: '閰嶇疆淇℃伅鏍煎紡閿欒锛�', duration: 5 }) + return + } + + let keys = config.fields.map(item => item.field ? item.field.toLowerCase() : '$emp_ty$') + + if (['multiselect', 'color', 'brafteditor'].includes(res.type)) { + res.type = 'text' + } + + if (res.field && keys.includes(res.field.toLowerCase())) { + notification.warning({ + top: 92, + message: '鎼滅储瀛楁宸插瓨鍦紒', + duration: 5 + }) + return + } + + this.props.updateConfig(config) + this.setState({visible: false}) + + notification.success({ + top: 92, + message: '绮樿创鎴愬姛锛�', + duration: 2 + }) + }) + } + + render() { + const { visible } = this.state + + return ( + <div style={{display: 'inline-block'}}> + <Button icon="snippets" style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} >绮樿创</Button> + <Modal + title="绮樿创" + visible={visible} + width={600} + maskClosable={false} + onOk={this.pasteSubmit} + onCancel={() => {this.setState({visible: false})}} + destroyOnClose + > + <PasteForm wrappedComponentRef={(inst) => this.pasteFormRef = inst} inputSubmit={this.pasteSubmit}/> + </Modal> + </div> + ) + } +} + +export default PasteController \ No newline at end of file diff --git a/src/mob/modalconfig/pastecomponent/index.scss b/src/mob/modalconfig/pastecomponent/index.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/mob/modalconfig/pastecomponent/index.scss diff --git a/src/mob/modalconfig/source.jsx b/src/mob/modalconfig/source.jsx new file mode 100644 index 0000000..3fed414 --- /dev/null +++ b/src/mob/modalconfig/source.jsx @@ -0,0 +1,104 @@ +import zhCN from '@/locales/zh-CN/model.js' +import enUS from '@/locales/en-US/model.js' + +const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS + +export const SearchItems = [ + { + type: 'form', + label: CommonDict['model.form.text'], + subType: 'text', + url: '' + }, + { + type: 'form', + label: CommonDict['model.form.number'], + subType: 'number', + url: '' + }, + { + type: 'form', + label: CommonDict['model.form.select'], + subType: 'select', + url: '' + }, + { + type: 'form', + label: CommonDict['model.form.link'], + subType: 'link', + url: '' + }, + { + type: 'form', + label: '寮�鍏�', + subType: 'switch', + url: '' + }, + { + type: 'form', + label: '澶氶�夋', + subType: 'checkbox', + url: '' + }, + { + type: 'form', + label: '鍗曢�夋', + subType: 'radio', + url: '' + }, + { + type: 'form', + label: '閫夐」鍗�', + subType: 'checkcard', + url: '' + }, + { + type: 'form', + label: CommonDict['header.form.fileupload'], + subType: 'fileupload', + url: '' + }, + { + type: 'form', + label: CommonDict['model.form.dateday'], + subType: 'date', + url: '' + }, + { + type: 'form', + label: CommonDict['model.form.datemonth'], + subType: 'datemonth', + url: '' + }, + { + type: 'form', + label: CommonDict['model.form.datetime'], + subType: 'datetime', + url: '' + }, + { + type: 'form', + label: CommonDict['model.form.textarea'], + subType: 'textarea', + url: '' + }, + { + type: 'form', + label: CommonDict['header.form.funcvar'], + subType: 'funcvar', + url: '' + }, + { + type: 'form', + label: '鎻愮ず', + subType: 'hint', + url: '' + }, + { + type: 'form', + label: '鍒嗗壊绾�', + subType: 'split', + url: '' + } +] + diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx index 2a6777a..b39593c 100644 --- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx +++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx @@ -925,7 +925,7 @@ } else { _chart.color(_typefield) } - if (plot.label === 'true') { + if (plot.label !== 'false') { _chart.label(_valfield, (value) => { if (plot.show === 'percent') { value = value + '%' @@ -1160,7 +1160,7 @@ } else { _chart.color('key') } - if (plot.label === 'true') { + if (plot.label !== 'false') { _chart.label('value*key', (value, key) => { if (plot.show === 'percent') { value = value + '%' @@ -1211,7 +1211,7 @@ } else { _chart.color('key') } - if (plot.label === 'true') { + if (plot.label !== 'false') { _chart.label('value*key', (value, key) => { if (plot.show === 'percent') { value = value + '%' @@ -1269,7 +1269,7 @@ if (plot.barSize) { _chart.size(plot.barSize || 35) } - if (item.label === 'true') { + if (item.label !== 'false') { _chart.label(item.name, (value) => { if (plot.show === 'percent') { value = value + '%' @@ -1514,7 +1514,7 @@ } else { _chart.color(_typefield) } - if (plot.label === 'true') { + if (plot.label !== 'false') { _chart.label(`${_valfield}*${_typefield}`, (value, key) => { if (plot.show === 'percent') { value = value + '%' @@ -1572,7 +1572,7 @@ } else { _chart.color(_typefield) } - if (plot.label === 'true') { + if (plot.label !== 'false') { _chart.label(`${_valfield}*${_typefield}`, (value, key) => { if (plot.show === 'percent') { value = value + '%' diff --git a/src/tabviews/zshare/actionList/exceloutbutton/index.jsx b/src/tabviews/zshare/actionList/exceloutbutton/index.jsx index 4274b92..2bd9686 100644 --- a/src/tabviews/zshare/actionList/exceloutbutton/index.jsx +++ b/src/tabviews/zshare/actionList/exceloutbutton/index.jsx @@ -130,9 +130,7 @@ if (btn.search === 'true' && viewParam.search && viewParam.search.length > 0) { let valid = false viewParam.search.forEach(item => { - if (Array.isArray(item.value) && item.value.length > 0) { - valid = true - } else if (item.value || item.value === 0) { + if (item.value || item.value === 0) { valid = true } }) diff --git a/src/templates/modalconfig/settingform/index.jsx b/src/templates/modalconfig/settingform/index.jsx index ae109a6..6428e40 100644 --- a/src/templates/modalconfig/settingform/index.jsx +++ b/src/templates/modalconfig/settingform/index.jsx @@ -1,6 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Radio, InputNumber, Select } from 'antd' +import { Form, Row, Col, Input, Radio, InputNumber, Select, Tooltip, Icon } from 'antd' import { formRule } from '@/utils/option.js' import './index.scss' @@ -20,6 +20,7 @@ UNSAFE_componentWillMount () { const { config } = this.props + const { appType, display } = this.state let fields = [] config.fields.forEach(f => { @@ -28,8 +29,14 @@ } }) + let _display = display + if (appType === 'mob' && display !== 'prompt' && display !== 'drawer') { + _display = 'drawer' + } + this.setState({ - fields: fields + fields: fields, + display: _display }) } @@ -87,13 +94,25 @@ })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)} </Form.Item> </Col> - <Col span={12}> + {appType !== 'mob' ? <Col span={12}> <Form.Item label="瀹藉害锛�%锛�"> {getFieldDecorator('width', { initialValue: config.setting.width })(<InputNumber min={10} max={90} precision={0} onPressEnter={this.handleSubmit}/>)} </Form.Item> - </Col> + </Col> : null} + {appType === 'mob' ? <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="瀹藉害灏忎簬100鏃朵负鐧惧垎鐜囷紝澶т簬100鏃朵负缁濆鍊笺��"> + <Icon type="question-circle" /> + 瀹藉害 + </Tooltip> + }> + {getFieldDecorator('width', { + initialValue: config.setting.width + })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)} + </Form.Item> + </Col> : null} <Col span={12}> <Form.Item label="鐒︾偣"> {getFieldDecorator('focus', { @@ -115,7 +134,7 @@ )} </Form.Item> </Col> - <Col span={12}> + {appType !== 'mob' ? <Col span={12}> <Form.Item label="琛ㄥ崟鎺掑垪"> {getFieldDecorator('align', { initialValue: config.setting.align || 'left_right' @@ -126,7 +145,7 @@ </Radio.Group> )} </Form.Item> - </Col> + </Col> : null} <Col span={12}> <Form.Item label="瀹屾垚鍚�"> {getFieldDecorator('finish', { @@ -154,17 +173,17 @@ <Col span={12}> <Form.Item label="鏄剧ず鏂瑰紡"> {getFieldDecorator('display', { - initialValue: config.setting.display || 'modal' + initialValue: display || 'modal' })( <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => this.setState({display: e.target.value})}> - <Radio value="modal">妯℃�佹</Radio> + {appType !== 'mob' ? <Radio value="modal">妯℃�佹</Radio> : null} <Radio value="prompt">鏄惁妗�</Radio> <Radio value="drawer">鎶藉眽</Radio> </Radio.Group> )} </Form.Item> </Col> - {!this.props.isSubTab && appType !== 'pc' && display === 'modal' ? <Col span={12}> + {!this.props.isSubTab && !appType && display === 'modal' ? <Col span={12}> <Form.Item label="鎸傝浇瀵硅薄"> {getFieldDecorator('container', { initialValue: config.setting.container || 'tab' diff --git a/src/templates/modalconfig/settingform/index.scss b/src/templates/modalconfig/settingform/index.scss index 091801f..9a74987 100644 --- a/src/templates/modalconfig/settingform/index.scss +++ b/src/templates/modalconfig/settingform/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/templates/zshare/formconfig.jsx b/src/templates/zshare/formconfig.jsx index c69de13..af18758 100644 --- a/src/templates/zshare/formconfig.jsx +++ b/src/templates/zshare/formconfig.jsx @@ -2629,11 +2629,14 @@ label: '鎵爜', initVal: card.scan || 'false', options: [{ - value: 'true', - text: '鍚敤' - }, { value: 'false', - text: '涓嶅惎鐢�' + text: '绂佺敤' + }, { + value: 'simple', + text: '鍗曟鎵爜' + }, { + value: 'multi', + text: '杩炵画鎵爜' }], forbid: appType !== 'mob' }, diff --git a/src/views/mobdesign/index.jsx b/src/views/mobdesign/index.jsx index fe87a8c..8082c53 100644 --- a/src/views/mobdesign/index.jsx +++ b/src/views/mobdesign/index.jsx @@ -34,7 +34,7 @@ const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) const UrlFieldComponent = asyncComponent(() => import('@/menu/urlfieldcomponent')) const PictureController = asyncComponent(() => import('@/menu/picturecontroller')) -const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller')) +const ModalController = asyncComponent(() => import('@/mob/modalconfig/controller')) const StyleCombController = asyncComponent(() => import('@/menu/stylecombcontroller')) const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton')) const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) @@ -1477,7 +1477,7 @@ <div className="pc-setting-tools"> <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> {/* 鍩烘湰淇℃伅 */} - <Panel header={dict['mob.basemsg']} key="basedata"> + <Panel header={dict['mob.basemsg']} forceRender key="basedata"> {/* 鑿滃崟淇℃伅 */} {config ? <MenuForm dict={dict} -- Gitblit v1.8.0