From bd06958321afa706f32287c71bd219eb0622c86c Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 10 十二月 2019 16:31:45 +0800 Subject: [PATCH] 2019-12-10 --- src/templates/comtableconfig/actionform/index.jsx | 24 + src/templates/comtableconfig/colspanform/index.jsx | 22 + src/components/header/index.jsx | 11 src/tabviews/commontable/mainAction/index.jsx | 115 +++++--- src/templates/comtableconfig/index.jsx | 34 ++ src/tabviews/commontable/mutilform/index.jsx | 298 ++++++++++++++++++++++ src/templates/comtableconfig/actionform/index.scss | 5 src/templates/modalconfig/modalform/index.jsx | 6 src/templates/comtableconfig/index.scss | 10 src/templates/modalconfig/index.jsx | 64 +++- src/api/index.js | 56 ++- src/templates/modalconfig/source.jsx | 9 src/templates/modalconfig/dragelement/index.jsx | 8 src/locales/zh-CN/comtable.js | 11 src/tabviews/commontable/index.jsx | 49 +++ src/templates/comtableconfig/dragelement/index.jsx | 1 src/locales/en-US/comtable.js | 7 src/assets/css/main.scss | 11 src/tabviews/commontable/mutilform/index.scss | 20 + 19 files changed, 627 insertions(+), 134 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index 150fdb4..db17b3b 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -129,27 +129,43 @@ if (window.GLOB.mainSystemApi) { param.rduri = window.GLOB.mainSystemApi } - if (param.isCache) { // 鏁版嵁闇�瑕佺紦瀛樻椂 - delete param.isCache - - if (GlobMap.has(param)) { - return Promise.resolve(GlobMap.get(param)) - } else { - return new Promise(resolve => { - axios({ - url: '/webapi/dostar', - data: param - }).then(res => { - console.log(res) - GlobMap.set(param, res) - resolve(res) - }) - }) - } + + return axios({ + url: '/webapi/dostar', + data: param + }) + } + + /** + * @description 鑾峰彇绯荤粺閰嶇疆锛屼紭鍏堜粠缂撳瓨涓彇鍊硷紝澧炲姞appkey + */ + getSystemCacheConfig (param) { + param.userid = sessionStorage.getItem('UserID') + param.lang = localStorage.getItem('lang') || '' + param.SessionUid = sessionStorage.getItem('SessionUid') || '' + param.LoginUID = sessionStorage.getItem('LoginUID') || '' + param.appkey = window.GLOB.appkey || '' + if (window.GLOB.mainSystemApi) { + param.rduri = window.GLOB.mainSystemApi + } + + let _param = JSON.parse(JSON.stringify(param)) // 缂撳瓨鏍¢獙锛屽幓闄ゆ椂闂村拰鍔犲瘑瀛楃 + delete _param.timestamp + delete _param.secretkey + _param = JSON.stringify(_param) + + if (GlobMap.has(_param)) { + return Promise.resolve(GlobMap.get(_param)) } else { - return axios({ - url: '/webapi/dostar', - data: param + return new Promise(resolve => { + axios({ + url: '/webapi/dostar', + data: param + }).then(res => { + + GlobMap.set(_param, res) + resolve(res) + }) }) } } diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 386900a..3155d2c 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -156,4 +156,15 @@ .ant-notification-close-icon { color: #ffffff; } +} + +// 閲嶇疆鎻愮ず妗� +.ant-tooltip { + z-index: 1090!important; + .ant-tooltip-inner { + letter-spacing: 1px; + } +} +.ant-tooltip.middle { + max-width: 320px!important; } \ No newline at end of file diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index d1ccdb7..5ab8f48 100644 --- a/src/components/header/index.jsx +++ b/src/components/header/index.jsx @@ -108,15 +108,6 @@ sessionStorage.clear() _this.props.logout() _this.props.history.replace('/login') - // return Api.logoutsystem().then(res => { - // if (res.status) { - // sessionStorage.removeItem('UserID') - // _this.props.resetState() - // _this.props.history.replace('/login') - // } else { - // message.warning(res.message) - // } - // }) }, onCancel() {} }) @@ -240,7 +231,7 @@ {this.state.dict['header.edit']} <Switch size="small" className="edit-switch" disabled={!!this.props.editLevel} onChange={this.changeEditState} /> </Menu.Item>} - <Menu.Item key="1" onClick={this.changePassword}>{this.state.dict['header.password']}</Menu.Item> + {/* <Menu.Item key="1" onClick={this.changePassword}>{this.state.dict['header.password']}</Menu.Item> */} <Menu.Item key="2" onClick={this.logout}>{this.state.dict['header.logout']}</Menu.Item> </Menu> ) diff --git a/src/locales/en-US/comtable.js b/src/locales/en-US/comtable.js index 3d1f25b..defa1ef 100644 --- a/src/locales/en-US/comtable.js +++ b/src/locales/en-US/comtable.js @@ -140,11 +140,14 @@ 'header.form.style': '椋庢牸', 'header.form.color': '棰滆壊', 'header.form.order': '鎺掑垪', - 'header.form.horizontal': '姘村钩', - 'header.form.vertical': '鍨傜洿', + 'header.form.horizontal': '妯悜', + 'header.form.vertical': '绾靛悜', + 'header.form.topPicBottomText': '涓婂浘涓嬫枃', + 'header.form.leftPicRightText': '宸﹀浘鍙虫枃', 'header.form.selectItem.error': '涓嬫媺閫夐」璁剧疆閿欒锛�', 'header.form.request.method': '璇锋眰鏂瑰紡', 'header.form.readonly': '鏄惁鍙', + 'header.form.field.required': '鏄惁蹇呭~', 'form.required.input': 'Please enter the ', 'form.required.select': '璇烽�夋嫨' } \ No newline at end of file diff --git a/src/locales/zh-CN/comtable.js b/src/locales/zh-CN/comtable.js index c6bada0..1371299 100644 --- a/src/locales/zh-CN/comtable.js +++ b/src/locales/zh-CN/comtable.js @@ -118,8 +118,8 @@ 'header.form.resourceType': '閫夐」鏉ユ簮', 'header.form.custom': '鑷畾涔�', 'header.form.datasource': '鏁版嵁婧�', - 'header.form.actionhelp.datasource': '浣跨敤绯荤粺鍑芥暟鏃讹紝璇峰~鍐欐暟鎹簮銆�', - 'header.form.actionhelp.sqlType': '浣跨敤绯荤粺鍑芥暟鏃讹紝璇烽�夋嫨绫诲瀷銆�', + 'header.form.actionhelp.datasource': '浣跨敤绯荤粺鍑芥暟鏃讹紝璇峰~鍐欐暟鎹簮锛屼娇鐢ㄨ嚜瀹氫箟鍑芥暟鏃讹紝鍙拷鐣ャ��', + 'header.form.actionhelp.sqlType': '浣跨敤绯荤粺鍑芥暟鏃讹紝璇烽�夋嫨绫诲瀷锛屼娇鐢ㄨ嚜瀹氫箟鍑芥暟鏃讹紝鍙拷鐣ャ��', 'header.form.action.type': '鎿嶄綔绫诲瀷', 'header.form.action.insert': '娣诲姞', 'header.form.action.update': '淇敼', @@ -140,11 +140,14 @@ 'header.form.style': '椋庢牸', 'header.form.color': '棰滆壊', 'header.form.order': '鎺掑垪', - 'header.form.horizontal': '姘村钩', - 'header.form.vertical': '鍨傜洿', + 'header.form.horizontal': '妯悜', + 'header.form.vertical': '绾靛悜', + 'header.form.topPicBottomText': '涓婂浘涓嬫枃', + 'header.form.leftPicRightText': '宸﹀浘鍙虫枃', 'header.form.selectItem.error': '涓嬫媺閫夐」璁剧疆閿欒锛�', 'header.form.request.method': '璇锋眰鏂瑰紡', 'header.form.readonly': '鏄惁鍙', + 'header.form.field.required': '鏄惁蹇呭~', 'form.required.input': '璇疯緭鍏�', 'form.required.select': '璇烽�夋嫨' } \ No newline at end of file diff --git a/src/tabviews/commontable/index.jsx b/src/tabviews/commontable/index.jsx index f64d0d2..fded058 100644 --- a/src/tabviews/commontable/index.jsx +++ b/src/tabviews/commontable/index.jsx @@ -38,17 +38,16 @@ orderColumn: '', orderType: 'asc', search: '', - fixed: {} + configMap: {} } async loadconfig () { // 鑾峰彇涓昏彍鍗� let param = { func: 'sPC_Get_LongParam', - MenuID: this.props.MenuID, - isCache: true + MenuID: this.props.MenuID } - let result = await Api.getSystemConfig(param) + let result = await Api.getSystemCacheConfig(param) if (result.status && result.LongParam) { let config = window.decodeURIComponent(window.atob(result.LongParam)) @@ -132,6 +131,7 @@ loading: true }, () => { this.improveSearch() + this.improveAction() this.loadmaindata() }) } else { @@ -153,8 +153,6 @@ searchlist.forEach(item => { if (item.type !== 'select' && item.type !== 'link') return - let unloaded = item.options.length === 0 - if (item.setAll === 'true') { item.options.unshift({ key: Utils.getuuid(), @@ -163,7 +161,7 @@ }) } - if (item.resourceType === '1' && item.dataSource && unloaded) { + if (item.resourceType === '1' && item.dataSource) { let param = { func: 'sPC_Get_SelectedList', LText: item.dataSourceSql, @@ -175,7 +173,7 @@ param.secretkey = Utils.encrypt(param.LText, param.timestamp) let defer = new Promise(resolve => { - Api.getSystemConfig(param).then(res => { + Api.getSystemCacheConfig(param).then(res => { res.search = item resolve(res) }) @@ -218,6 +216,40 @@ } }) this.setState({searchlist}) + }) + } + + improveAction = () => { + const { config } = this.state + config.action.forEach(item => { + if (item.OpenType !== 'pop' && item.OpenType !== 'tab' && item.OpenType !== 'blank') return + + Api.getSystemCacheConfig({ + func: 'sPC_Get_LongParam', + MenuID: item.uuid + }).then(res => { + if (res.status) { + let _LongParam = '' + if (res.LongParam) { + _LongParam = window.decodeURIComponent(window.atob(res.LongParam)) + try { + _LongParam = JSON.parse(_LongParam) + } catch (e) { + _LongParam = '' + } + } + + this.setState({ + configMap: {...this.state.configMap, [item.uuid]: _LongParam} + }) + } else { + notification.warning({ + top: 92, + message: res.message, + duration: 10 + }) + } + }) }) } @@ -350,6 +382,7 @@ <MainAction MenuID={this.props.MenuID} setting={setting} + configMap={this.state.configMap} refreshdata={this.refreshbyaction} gettableselected={this.gettableselected} actions={actions} diff --git a/src/tabviews/commontable/mainAction/index.jsx b/src/tabviews/commontable/mainAction/index.jsx index e028e73..22fd0a8 100644 --- a/src/tabviews/commontable/mainAction/index.jsx +++ b/src/tabviews/commontable/mainAction/index.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types' // import { is, fromJS } from 'immutable' import { Button, Affix, Modal, notification } from 'antd' -import MutilForm from '@/components/mutilform' +import MutilForm from '../mutilform' import Api from '@/api' import './index.scss' @@ -13,7 +13,8 @@ MenuID: PropTypes.string, actions: PropTypes.array, // 鎼滅储鏉′欢鍒楄〃 dict: PropTypes.object, // 瀛楀吀椤� - setting: PropTypes.any + setting: PropTypes.any, + configMap: PropTypes.object } state = { @@ -29,7 +30,7 @@ this.props.refreshdata(item, type) } actionTrigger = (item) => { - const { setting } = this.props + const { setting, configMap } = this.props let _this = this let data = this.props.gettableselected() || [] @@ -74,6 +75,22 @@ this.execSubmit(item, data, () => { this.setState({loadingUuid: ''}) }) + } else if (item.OpenType === 'pop') { + let param = configMap[item.uuid] + + if (!param || param.type !== 'Modal') { + notification.warning({ + top: 92, + message: '鏈幏鍙栧埌鎸夐挳閰嶇疆淇℃伅锛�', + duration: 10 + }) + } else { + this.setState({ + visible: true, + execAction: {...param, ...item}, + tabledata: data + }) + } } else { notification.warning({ top: 92, @@ -442,53 +459,31 @@ }) } - getModels = () => { - return ( - <Modal - wrapClassName='action-modal' - title={(this.state.execAction && this.state.execAction.MenuName) || ''} - visible={this.state.visible} - width={(this.state.execAction && +this.state.execAction.PopWidth) || 520} - onOk={this.handleOk} - confirmLoading={this.state.confirmLoading} - onCancel={this.handleCancel} - > - {this.state.formdata && - <MutilForm - dict={this.props.dict} - formlist={this.state.formdata} - data={this.state.tabledata} - wrappedComponentRef={(inst) => this.formRef = inst} - />} - </Modal> - ) - } - handleOk = () => { this.formRef.handleConfirm().then(res => { this.setState({ confirmLoading: true }) console.log(res) - Api.setActionSubmit({ - func: 'SetActionSubmitSuccess' - }).then((res) => { - if (res.status) { - notification.success({ - top: 92, - message: this.props.dict['main.action.confirm.success'] - }) - this.setState({ - confirmLoading: false, - visible: false - }) - } else { - notification.error({ - top: 92, - message: res.message - }) - } - }) + // Api.setActionSubmit({ + // func: 'SetActionSubmitSuccess' + // }).then((res) => { + // if (res.status) { + // notification.success({ + // top: 92, + // message: this.props.dict['main.action.confirm.success'] + // }) + // this.setState({ + // confirmLoading: false, + // visible: false + // }) + // } else { + // notification.error({ + // top: 92, + // message: res.message + // }) + // } + // }) }, () => {}) } @@ -496,7 +491,36 @@ this.setState({ visible: false }) - this.formRef.handleReset() + } + + getModels = () => { + const { execAction } = this.state + let title = '' + let width = '62vw' + if (execAction && execAction.setting) { + title = execAction.setting.title + width = execAction.setting.width + 'vw' + } + + return ( + <Modal + wrapClassName='action-modal' + title={title} + visible={this.state.visible} + width={width} + onOk={this.handleOk} + confirmLoading={this.state.confirmLoading} + onCancel={this.handleCancel} + destroyOnClose + > + <MutilForm + dict={this.props.dict} + action={execAction} + data={this.state.tabledata} + wrappedComponentRef={(inst) => this.formRef = inst} + /> + </Modal> + ) } render() { @@ -557,6 +581,7 @@ ) } })} + {this.getModels()} </div> ) } diff --git a/src/tabviews/commontable/mutilform/index.jsx b/src/tabviews/commontable/mutilform/index.jsx new file mode 100644 index 0000000..65a5403 --- /dev/null +++ b/src/tabviews/commontable/mutilform/index.jsx @@ -0,0 +1,298 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { Form, Row, Col, Input, InputNumber, Select, DatePicker } from 'antd' +import moment from 'moment' +import './index.scss' + +const {MonthPicker} = DatePicker + +class MainSearch extends Component { + static propTpyes = { + action: PropTypes.object, // 鎼滅储鏉′欢鍒楄〃 + dict: PropTypes.object, // 瀛楀吀椤� + data: PropTypes.any // 琛ㄦ牸鏁版嵁 + } + + state = { + datatype: null, + formlist: [] + } + + componentDidMount () { + const { action } = this.props + let datatype = {} + let formlist = [] + if (action.groups.length > 0) { + action.groups.forEach(group => { + if (group.sublist.length === 0) return + + if (!group.default) { + formlist.push({ + type: 'title', + label: group.label, + uuid: group.uuid + }) + } + + group.sublist.forEach(item => { + datatype[item.field] = item.type + formlist.push(item) + }) + }) + } else { + formlist = action.fields.map(item => { + datatype[item.field] = item.type + return item + }) + } + + this.setState({ + datatype: datatype, + formlist: formlist + }) + } + + getFields() { + const { getFieldDecorator } = this.props.form + + const fields = [] + let cols = 2 + if (this.props.form.setting && this.props.form.setting.cols) { + cols = parseInt(this.props.form.setting.cols) + if (cols > 3 || cols < 1) { + cols = 2 + } + } + + this.state.formlist.forEach((item, index) => { + if (!item.field && item.type !== 'title') return + + if (item.type === 'title') { + fields.push( + <Col span={24 / cols} key={index}> + <p>{item.label}</p> + </Col> + ) + } else if (item.type === 'text') { + fields.push( + <Col span={24 / cols} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.field, { + initialValue: this.props.data ? this.props.data[item.field] : item.initval, + rules: [ + { + required: item.required === 'true', + message: this.props.dict['form.required.input'] + item.label + '!' + } + ] + })(<Input placeholder="" autoComplete="off" disabled={item.readonly === 'true'} />)} + </Form.Item> + </Col> + ) + } else if (item.type === 'number') { // 鏁板瓧 + let min = (item.min || item.min === 0) ? item.min : -Infinity + let max = (item.max || item.max === 0) ? item.max : Infinity + let _initval = this.props.data ? this.props.data[item.field] : item.initval + let precision = (item.decimal || item.decimal === 0) ? item.decimal : null + + fields.push( + <Col span={24 / cols} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.field, { + initialValue: _initval, + rules: [ + { + required: item.required === 'true', + message: this.props.dict['form.required.input'] + item.label + '!' + } + ] + })( + precision === null ? + <InputNumber initialValue={_initval} min={min} max={max} disabled={item.readonly === 'true'} /> : + <InputNumber initialValue={_initval} min={min} max={max} precision={precision} disabled={item.readonly === 'true'} /> + )} + </Form.Item> + </Col> + ) + } else if (item.type === 'select') { // 涓嬫媺鎼滅储 + fields.push( + <Col span={24 / cols} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.field, { + initialValue: this.props.data ? this.props.data[item.field] : item.initval, + rules: [ + { + required: item.required === 'true', + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <Select + showSearch + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + getPopupContainer={() => document.getElementById('form-box')} + > + {item.options.map(option => + <Select.Option id={option.key} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option> + )} + </Select> + )} + </Form.Item> + </Col> + ) + } else if (item.type === 'date') { // 鏃堕棿鎼滅储 + let _initval = this.props.data ? this.props.data[item.field] : '' + if (_initval) { + _initval = moment(_initval, 'YYYY-MM-DD') + } else { + _initval = item.initval ? moment().subtract(item.initval, 'days') : null + } + fields.push( + <Col span={24 / cols} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.field, { + initialValue: _initval, + rules: [ + { + required: item.required === 'true', + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <DatePicker getCalendarContainer={() => document.getElementById('form-box')} /> + )} + </Form.Item> + </Col> + ) + } else if (item.type === 'datemonth') { + let _initval = this.props.data ? this.props.data[item.field] : '' + if (_initval) { + _initval = moment(_initval, 'YYYY-MM') + } else { + _initval = item.initval ? moment().subtract(item.initval, 'month') : null + } + fields.push( + <Col span={24 / cols} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.field, { + initialValue: _initval, + rules: [ + { + required: item.required === 'true', + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <MonthPicker getCalendarContainer={() => document.getElementById('form-box')} /> + )} + </Form.Item> + </Col> + ) + } else if (item.type === 'datetime') { + let _initval = this.props.data ? this.props.data[item.field] : '' + if (_initval) { + _initval = moment(_initval, 'YYYY-MM-DD HH:mm:ss') + } else { + _initval = item.initval ? moment().subtract(item.initval, 'days') : null + } + fields.push( + <Col span={24 / cols} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.field, { + initialValue: _initval, + rules: [ + { + required: item.required === 'true', + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <DatePicker showTime getCalendarContainer={() => document.getElementById('form-box')} /> + )} + </Form.Item> + </Col> + ) + } + }) + + return fields + } + + handleConfirm = () => { + // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� + return new Promise((resolve, reject) => { + this.props.form.validateFieldsAndScroll((err, values) => { + if (!err) { + let search = [] + Object.keys(values).forEach(key => { + if (this.state.style[key] === 'datetime') { + let _value = '' + if (values[key]) { + _value = moment(values[key]).format('YYYY-MM-DD HH:mm:ss') + } + search.push({ + type: this.state.style[key], + key: key, + value: _value + }) + } else if (this.state.style[key] === 'datemonth') { + let _value = '' + if (values[key]) { + _value = moment(values[key]).format('YYYY-MM') + } + search.push({ + type: this.state.style[key], + key: key, + value: _value + }) + } else if (this.state.style[key] === 'date') { + let _value = '' + if (values[key]) { + _value = moment(values[key]).format('YYYY-MM-DD') + } + search.push({ + type: this.state.style[key], + key: key, + value: _value + }) + } else { + search.push({ + type: this.state.style[key], + key: key, + value: values[key].replace(/(^\s*|\s*$)/ig, '') + }) + } + }) + resolve(search) + } else { + reject(err) + } + }) + }) + } + + handleReset = () => { + // 閲嶇疆 + this.props.form.resetFields() + } + + render() { + const formItemLayout = { + labelCol: { + xs: { span: 24 }, + sm: { span: 8 } + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 16 } + } + } + return ( + <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box"> + <Row gutter={24}>{this.getFields()}</Row> + </Form> + ) + } +} + +export default Form.create()(MainSearch) \ No newline at end of file diff --git a/src/tabviews/commontable/mutilform/index.scss b/src/tabviews/commontable/mutilform/index.scss new file mode 100644 index 0000000..838b936 --- /dev/null +++ b/src/tabviews/commontable/mutilform/index.scss @@ -0,0 +1,20 @@ +.ant-advanced-search-form.main-search { + padding: 0px 24px 20px; + border-bottom: 1px solid #d9d9d9; + .ant-form-item { + display: flex; + margin-bottom: 10px; + } + .ant-form-item-control-wrapper { + flex: 1; + } + .ant-form-item-label { + width: 100px; + } +} +.ant-advanced-search-form { + position: relative; +} +.ant-advanced-search-form .ant-input-number { + width: 100%; +} \ No newline at end of file diff --git a/src/templates/comtableconfig/actionform/index.jsx b/src/templates/comtableconfig/actionform/index.jsx index cf9a8d2..d850581 100644 --- a/src/templates/comtableconfig/actionform/index.jsx +++ b/src/templates/comtableconfig/actionform/index.jsx @@ -1,6 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Select, Icon, Radio, notification } from 'antd' +import { Form, Row, Col, Input, Select, Icon, Radio, notification, Tooltip } from 'antd' import './index.scss' const { TextArea } = Input @@ -261,13 +261,14 @@ if (item.hidden) return if (item.type === 'text') { // 鏂囨湰鎼滅储 - let help = '' - if (item.key === 'sql') { - help = this.props.dict['header.form.actionhelp.datasource'] - } fields.push( <Col span={12} key={index}> - <Form.Item label={item.label} help={help}> + <Form.Item label={item.tooltip ? + <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> + <Icon type="question-circle" /> + {item.label} + </Tooltip> : item.label + }> {getFieldDecorator(item.key, { initialValue: item.initVal || '', rules: [ @@ -281,13 +282,14 @@ </Col> ) } else if (item.type === 'select') { // 涓嬫媺鎼滅储 - let help = '' - if (item.key === 'sqlType') { - help = this.props.dict['header.form.actionhelp.sqlType'] - } fields.push( <Col span={12} key={index}> - <Form.Item label={item.label} help={help}> + <Form.Item label={item.tooltip ? + <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> + <Icon type="question-circle" /> + {item.label} + </Tooltip> : item.label + }> {getFieldDecorator(item.key, { initialValue: item.initVal || '', rules: [ diff --git a/src/templates/comtableconfig/actionform/index.scss b/src/templates/comtableconfig/actionform/index.scss index 9f25df9..d7dfeb9 100644 --- a/src/templates/comtableconfig/actionform/index.scss +++ b/src/templates/comtableconfig/actionform/index.scss @@ -12,4 +12,9 @@ width: 86%; } } + .anticon-question-circle { + color: #c49f47; + position: relative; + left: -3px; + } } \ No newline at end of file diff --git a/src/templates/comtableconfig/colspanform/index.jsx b/src/templates/comtableconfig/colspanform/index.jsx index 47ca3ec..ace7351 100644 --- a/src/templates/comtableconfig/colspanform/index.jsx +++ b/src/templates/comtableconfig/colspanform/index.jsx @@ -137,6 +137,28 @@ )} </Form.Item> </Col> + <Col span={12}> + <Form.Item label={this.props.dict['header.form.order']}> + {getFieldDecorator('order', { + initialValue: this.props.card.order, + rules: [ + { + required: true, + message: this.props.dict['form.required.select'] + this.props.dict['header.form.order'] + '!' + } + ] + })( + <Select + getPopupContainer={() => document.getElementById('columncolspan')} + > + <Select.Option value="vertical">{this.props.dict['header.form.vertical']}</Select.Option> + <Select.Option value="horizontal">{this.props.dict['header.form.horizontal']}</Select.Option> + <Select.Option value="topPicBottomText">{this.props.dict['header.form.topPicBottomText']}</Select.Option> + <Select.Option value="leftPicRightText">{this.props.dict['header.form.leftPicRightText']}</Select.Option> + </Select> + )} + </Form.Item> + </Col> <Col span={24}> <TransferForm dict={this.props.dict} columns={this.props.columns} ref="column-transfer" selected={this.props.card.sublist}/> </Col> diff --git a/src/templates/comtableconfig/dragelement/index.jsx b/src/templates/comtableconfig/dragelement/index.jsx index 2d63120..3a7545f 100644 --- a/src/templates/comtableconfig/dragelement/index.jsx +++ b/src/templates/comtableconfig/dragelement/index.jsx @@ -122,6 +122,7 @@ if (item.subType === 'colspan') { newcard.sublist = [] newcard.IsSort = 'false' + newcard.order = 'vertical' } } diff --git a/src/templates/comtableconfig/index.jsx b/src/templates/comtableconfig/index.jsx index 87a0a7a..2ca9f9a 100644 --- a/src/templates/comtableconfig/index.jsx +++ b/src/templates/comtableconfig/index.jsx @@ -3,7 +3,7 @@ import { is, fromJS } from 'immutable' import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' -import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch } from 'antd' +import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip } from 'antd' import moment from 'moment' import DragElement from './dragelement' import SourceElement from './dragelement/source' @@ -542,6 +542,11 @@ key: 'innerFunc', label: this.state.dict['header.form.innerFunc'], initVal: card.innerFunc, + tooltip: <div> + <p>鍐呴儴鎺ュ彛: 鍙嚜瀹氫箟鏁版嵁澶勭悊鍑芥暟锛屾湭璁剧疆鏃朵細璋冪敤绯荤粺鍑芥暟锛屼娇鐢ㄧ郴缁熷嚱鏁伴渶瀹屽杽鏁版嵁婧愬強鎿嶄綔绫诲瀷;</p> + <p>澶栭儴鎺ュ彛: 鍙嚜瀹氫箟鏁版嵁澶勭悊鍑芥暟锛屾彁浜ゆ暟鎹粡杩囧唴閮ㄥ嚱鏁板鐞嗗悗锛屼紶鍏ュ閮ㄦ帴鍙o紝鏈缃椂锛屾暟鎹細鐩存帴浼犲叆澶栭儴鎺ュ彛銆�</p> + </div>, + tooltipClass: 'middle', required: false, readonly: false }, @@ -660,6 +665,7 @@ key: 'sql', label: this.state.dict['header.form.datasource'], initVal: card.sql || this.state.config.setting.tableName || '', + tooltip: this.state.dict['header.form.actionhelp.datasource'], required: false }, { @@ -667,6 +673,7 @@ key: 'sqlType', label: this.state.dict['header.form.action.type'], initVal: card.sqlType || 'insert', + tooltip: this.state.dict['header.form.actionhelp.sqlType'], required: false, options: [{ MenuID: 'insert', @@ -1674,8 +1681,11 @@ /> {/* 琛ㄥ悕娣诲姞 */} <div className="ant-col ant-form-item-label"> - <label title={this.state.dict['header.menu.table.add']}> - {this.state.dict['header.menu.table.add']} + <label> + <Tooltip placement="topLeft" title="姝ゅ鍙互娣诲姞閰嶇疆鐩稿叧鐨勫父鐢ㄨ〃锛屽湪娣诲姞鎼滅储鏉′欢鍜屾樉绀哄垪鏃讹紝鍙�氳繃宸ュ叿鏍忎腑鐨勬坊鍔犳寜閽紝鎵归噺娣诲姞琛ㄦ牸鐩稿叧瀛楁銆�"> + <Icon type="question-circle" /> + {this.state.dict['header.menu.table.add']} + </Tooltip> </label> </div> <Select @@ -1724,7 +1734,12 @@ })} </div> {configAction.length > 0 ? - <p className="config-btn-title">{this.state.dict['header.menu.action.configurable']}</p> : null + <p className="config-btn-title"> + <Tooltip placement="topLeft" title="鐐瑰嚮鎸夐挳锛屽彲瀹屾垚鎴栨煡鐪嬫寜閽厤缃俊鎭��"> + <Icon type="question-circle" /> + </Tooltip> + {this.state.dict['header.menu.action.configurable']} + </p> : null } {configAction.map((item, index) => { return ( @@ -1752,7 +1767,7 @@ <div className="setting"> <Card title={this.state.dict['header.menu.page.configurable']} bordered={false} extra={ <div> - <Switch className="big" checkedChildren="鍚�" unCheckedChildren="鍏�" defaultChecked={this.state.config.enabled} onChange={this.onEnabledChange} /> + <Switch className="big" checkedChildren="鍚�" unCheckedChildren="鍋�" defaultChecked={this.state.config.enabled} onChange={this.onEnabledChange} /> <Button type="primary" onClick={this.changeTemplate}>{this.state.dict['header.menu.template.change']}</Button> <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['header.save']}</Button> <Button onClick={this.cancelConfig}>{this.state.dict['header.return']}</Button> @@ -1760,6 +1775,9 @@ } style={{ width: '100%' }}> <Icon type="setting" onClick={this.changeSetting} /> <div className="search-list"> + <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃悳绱€�嬩腑锛岄�夋嫨瀵瑰簲鎼滅储妗嗘嫋鑷虫澶勬坊鍔狅紱鎴栫偣鍑绘寜閽�婃坊鍔犳悳绱㈡潯浠躲�嬫壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ��"> + <Icon type="question-circle" /> + </Tooltip> {!this.state.searchloading ? <DragElement list={this.state.config.search} @@ -1772,6 +1790,9 @@ } </div> <div className="action-list"> + <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃寜閽�嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬寜閽嫋鑷虫澶勬坊鍔狅紝濡傞�夋嫨鎸夐挳绫诲瀷涓鸿〃鍗曘�佹柊鏍囩椤电瓑鍚湁閰嶇疆椤甸潰鐨勬寜閽紝鍙湪宸︿晶宸ュ叿鏍�-鎸夐挳-鍙厤缃寜閽锛岀偣鍑绘寜閽畬鎴愮浉鍏抽厤缃�傛敞锛氬綋璁剧疆鎸夐挳鏄剧ず浣嶇疆涓鸿〃鏍兼椂锛屾樉绀哄垪浼氬鍔犳搷浣滃垪銆�"> + <Icon type="question-circle" /> + </Tooltip> {!this.state.actionloading ? <DragElement list={this.state.config.action} @@ -1785,6 +1806,9 @@ } </div> <div className="column-list"> + <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃樉绀哄垪銆嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬樉绀哄垪鎷栬嚦姝ゅ娣诲姞锛涙垨鐐瑰嚮銆婃坊鍔犳樉绀哄垪銆嬫寜閽壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ�傛敞锛氭坊鍔犲悎骞跺垪鏃讹紝闇�璁剧疆鍙�夊垪銆�"> + <Icon type="question-circle" /> + </Tooltip> {!this.state.columnsloading ? <DragElement list={this.state.config.columns} diff --git a/src/templates/comtableconfig/index.scss b/src/templates/comtableconfig/index.scss index 25391e5..e5c99e6 100644 --- a/src/templates/comtableconfig/index.scss +++ b/src/templates/comtableconfig/index.scss @@ -92,6 +92,10 @@ } } } + .anticon-question-circle { + color: #c49f47; + margin-right: 3px; + } } .tools:hover { overflow-y: auto; @@ -354,6 +358,12 @@ top: 10px; } } + .anticon-question-circle { + color: #c49f47; + position: relative; + left: -15px; + top: 5px; + } } .setting:hover { overflow-y: auto; diff --git a/src/templates/modalconfig/dragelement/index.jsx b/src/templates/modalconfig/dragelement/index.jsx index 28cd6e9..5b7cd29 100644 --- a/src/templates/modalconfig/dragelement/index.jsx +++ b/src/templates/modalconfig/dragelement/index.jsx @@ -77,12 +77,8 @@ newcard.orderBy = '' newcard.orderType = 'asc' newcard.readonly = 'false' - - // let indexes = cards.map(car => {return car.id}) - // let newid = 0 - // while (indexes.includes(newid)) { - // newid++ - // } + newcard.required = 'false' + newcard.id = Utils.getuuid() let targetId = cards.length > 0 ? cards[cards.length - 1].id : 0 diff --git a/src/templates/modalconfig/index.jsx b/src/templates/modalconfig/index.jsx index 98df789..86da3d2 100644 --- a/src/templates/modalconfig/index.jsx +++ b/src/templates/modalconfig/index.jsx @@ -454,6 +454,19 @@ value: 'false', text: this.state.dict['header.form.false'] }] + }, + { + type: 'radio', + key: 'required', + label: this.state.dict['header.form.field.required'], + initVal: card.required || 'false', + options: [{ + value: 'true', + text: this.state.dict['header.form.true'] + }, { + value: 'false', + text: this.state.dict['header.form.false'] + }] } ] }) @@ -468,7 +481,7 @@ handleSubmit = () => { this.formRef.handleConfirm().then(res => { let _config = JSON.parse(JSON.stringify(this.state.config)) - + console.log(res) if ((res.type === 'select' || res.type === 'link') && res.resourceType === '1') { let sql = 'select ' + res.valueField + ',' + res.valueText + ' from (' + res.dataSource + ')' if (res.orderBy) { @@ -477,13 +490,26 @@ res.dataSourceSql = Utils.formatOptions(sql) } - _config.fields = _config.fields.map(item => { - if (item.uuid === res.uuid) { - return res - } else { - return item - } - }) + if (_config.groups.length > 0) { + _config.groups.forEach(group => { + group.sublist = group.sublist.map(item => { + if (item.uuid === res.uuid) { + return res + } else { + return item + } + }) + }) + } else { + _config.fields = _config.fields.map(item => { + if (item.uuid === res.uuid) { + return res + } else { + return item + } + }) + } + _config.fields = _config.fields.filter(item => !item.origin) this.setState({ @@ -510,13 +536,15 @@ cancelText: this.state.dict['header.cancel'], onOk() { let _config = JSON.parse(JSON.stringify(_this.state.config)) - _config.fields = _config.fields.filter(item => { - if (item.uuid === card.uuid) { - return false - } else { - return true - } - }) + + if (_config.groups.length > 0) { + _config.groups.forEach(group => { + group.sublist = group.sublist.filter(item => !(item.uuid === card.uuid)) + }) + } else { + _config.fields = _config.fields.filter(item => !(item.uuid === card.uuid)) + } + _this.setState({ config: _config, loading: true @@ -742,7 +770,8 @@ valueText: '', orderBy: '', orderType: 'asc', - readonly: 'false' + readonly: 'false', + required: 'false' } }) _config.groups[_config.groups.length - 1].sublist = [..._config.groups[_config.groups.length - 1].sublist, ..._additems] @@ -786,7 +815,8 @@ valueText: '', orderBy: '', orderType: 'asc', - readonly: 'false' + readonly: 'false', + required: 'false' } items.push(newcard) diff --git a/src/templates/modalconfig/modalform/index.jsx b/src/templates/modalconfig/modalform/index.jsx index 6a105dd..aa96845 100644 --- a/src/templates/modalconfig/modalform/index.jsx +++ b/src/templates/modalconfig/modalform/index.jsx @@ -29,7 +29,7 @@ let type = formlist.filter(cell => cell.key === 'type')[0].initVal let resourceType = formlist.filter(cell => cell.key === 'resourceType')[0].initVal - let _options = ['label', 'field', 'initval', 'type', 'readonly'] // 榛樿鏄剧ず椤� + let _options = ['label', 'field', 'initval', 'type', 'readonly', 'required'] // 榛樿鏄剧ず椤� if ((type === 'select' || type === 'link') && resourceType === '0') { // 閫夋嫨绫诲瀷銆佽嚜瀹氫箟璧勬簮 _options = [..._options, 'resourceType', 'setAll', 'options'] @@ -62,7 +62,7 @@ openTypeChange = (key, value) => { if (key === 'type') { - let _options = ['label', 'field', 'initval', 'type', 'readonly'] + let _options = ['label', 'field', 'initval', 'type', 'readonly', 'required'] if ((value === 'select' || value === 'link') && this.state.resourceType === '0') { // 閫夋嫨绫诲瀷銆佽嚜瀹氫箟璧勬簮 _options = [..._options, 'resourceType', 'setAll', 'options'] @@ -113,7 +113,7 @@ const { openType } = this.state let value = e.target.value if (key === 'resourceType') { - let _options = ['label', 'field', 'initval', 'type', 'resourceType', 'setAll', 'readonly'] + let _options = ['label', 'field', 'initval', 'type', 'resourceType', 'setAll', 'readonly', 'required'] if (value === '0') { _options = [..._options, 'options'] } else if (value === '1') { diff --git a/src/templates/modalconfig/source.jsx b/src/templates/modalconfig/source.jsx index 1b20be2..0e29aa5 100644 --- a/src/templates/modalconfig/source.jsx +++ b/src/templates/modalconfig/source.jsx @@ -32,7 +32,8 @@ valueText: '', orderBy: '', orderType: 'asc', - readonly: 'false' + readonly: 'false', + required: 'false' }, { origin: true, id: Utils.getuuid(), @@ -50,7 +51,8 @@ valueText: '', orderBy: '', orderType: 'asc', - readonly: 'false' + readonly: 'false', + required: 'false' }, { origin: true, id: Utils.getuuid(), @@ -68,7 +70,8 @@ valueText: '', orderBy: '', orderType: 'asc', - readonly: 'false' + readonly: 'false', + required: 'false' } ] } -- Gitblit v1.8.0