From 7051e15582aee4163b3c8dd13dc85f4f1e2ce6eb Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 07 二月 2020 02:11:43 +0800
Subject: [PATCH] 2020-02-07
---
src/tabviews/formtab/formgroup/index.jsx | 165 ++++++++++++++++++------------------------------------
1 files changed, 55 insertions(+), 110 deletions(-)
diff --git a/src/tabviews/formtab/formgroup/index.jsx b/src/tabviews/formtab/formgroup/index.jsx
index b7d9516..906308d 100644
--- a/src/tabviews/formtab/formgroup/index.jsx
+++ b/src/tabviews/formtab/formgroup/index.jsx
@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification } from 'antd'
+import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification, Collapse } from 'antd'
import moment from 'moment'
import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
@@ -9,13 +9,14 @@
const {MonthPicker} = DatePicker
const { TextArea } = Input
+const { Panel } = Collapse
class MainSearch extends Component {
static propTpyes = {
- action: PropTypes.object, // 鎸夐挳淇℃伅銆佽〃鍗曞垪琛�
+ setting: PropTypes.object, // 鍩烘湰淇℃伅
+ groups: PropTypes.array, // 琛ㄥ崟缁�
dict: PropTypes.object, // 瀛楀吀椤�
data: PropTypes.any, // 琛ㄦ牸鏁版嵁
- BData: PropTypes.any, // 涓昏〃鏁版嵁
configMap: PropTypes.object, // 鎸夐挳鍙婁笅鎷夎〃鍗曢厤缃俊鎭泦
inputSubmit: PropTypes.func // input鍥炶溅鎻愪氦
}
@@ -27,90 +28,50 @@
}
componentDidMount () {
- const { data, BData } = this.props
- let action = JSON.parse(JSON.stringify(this.props.action))
+ const { data, groups } = this.props
let datatype = {}
let readtype = {}
- let formlist = []
- if (action.groups.length > 0) {
- action.groups.forEach(group => {
- if (group.sublist.length === 0) return
+ let _formlist = []
- if (!group.default) {
- formlist.push({
- type: 'title',
- label: group.label,
- uuid: group.uuid
- })
- }
-
- group.sublist.forEach(item => {
- datatype[item.field] = item.type
- readtype[item.field] = item.readonly === 'true'
- formlist.push(item)
- })
- })
- } else {
- formlist = action.fields.map(item => {
+ let _groups = groups.map(group => {
+ group.sublist = group.sublist.map(item => {
datatype[item.field] = item.type
readtype[item.field] = item.readonly === 'true'
+
+ if (!/^date/.test(item.type) && data && data.hasOwnProperty(item.field)) {
+ item.initval = data[item.field]
+ }
+
+ _formlist.push(item)
return item
})
- }
- let _inputfields = formlist.filter(item => item.type === 'text' || item.type === 'number') // 鐢ㄤ簬杩囨护涓嬫媺鑿滃崟鍏宠仈琛ㄥ崟
-
- formlist = formlist.map(item => {
- if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
- if (item.setAll === 'true') {
- item.options.unshift({
- key: Utils.getuuid(),
- Value: '',
- Text: this.props.dict['main.all']
- })
- }
-
- if (item.resourceType === '1' && this.props.configMap.hasOwnProperty(item.uuid)) {
- item.options = [...item.options, ...this.props.configMap[item.uuid]]
- }
-
- item.oriOptions = JSON.parse(JSON.stringify(item.options))
-
- if (item.linkSubField && item.linkSubField.length > 0) {
- let _fields = _inputfields.map(_item => _item.field)
- item.linkSubField = item.linkSubField.filter(_item => _fields.includes(_item))
- }
- }
-
- if (item.type === 'linkMain' && BData && BData.hasOwnProperty(item.field)) {
- item.initval = BData[item.field]
- } else if (!/^date/.test(item.type) && this.props.data && this.props.data.hasOwnProperty(item.field)) {
- item.initval = this.props.data[item.field]
- }
-
- return item
+ return group
})
let error = false
- formlist = formlist.map(item => {
- if (item.type === 'link') {
- let supItem = formlist.filter(form => form.field === item.linkField)[0]
-
- if (!supItem && data && data.hasOwnProperty(item.linkField)) {
- supItem = {initval: data[item.linkField]}
+ _groups = _groups.map(group => {
+ group.sublist = group.sublist.map(item => {
+ if (item.type === 'link') {
+ let supItem = _formlist.filter(form => form.field === item.linkField)[0]
+
+ if (!supItem && data && data.hasOwnProperty(item.linkField)) {
+ supItem = {initval: data[item.linkField]}
+ }
+
+ if (!supItem) {
+ error = true
+ } else {
+ item.options = item.oriOptions.filter(option => option.parentId === supItem.initval)
+ }
}
-
- if (!supItem) {
- error = true
- } else {
- item.options = item.oriOptions.filter(option => option.parentId === supItem.initval)
- }
- }
+ return item
+ })
- return item
+ return group
})
if (error) {
@@ -124,21 +85,8 @@
this.setState({
readtype: readtype,
datatype: datatype,
- formlist: formlist
- }, () => {
- if (action.setting && action.setting.focus) {
- try {
- let _form = document.getElementById('main-form-box')
- let _item = _form.getElementsByTagName('input')
- _item = [..._item]
- _item.forEach(input => {
- if (!input || input.id !== action.setting.focus) return
- input.select()
- })
- } catch {
- console.warn('琛ㄥ崟鑾峰彇澶辫触锛�')
- }
- }
+ formlist: _formlist,
+ groups: _groups
})
}
@@ -204,28 +152,22 @@
})
}
- getFields() {
+ getFields(formlist) {
const { getFieldDecorator } = this.props.form
const fields = []
let cols = 2
- if (this.props.action.setting && this.props.action.setting.cols) {
- cols = parseInt(this.props.action.setting.cols)
+ if (this.props.setting && this.props.setting.cols) {
+ cols = parseInt(this.props.setting.cols)
if (cols > 3 || cols < 1) {
cols = 2
}
}
- this.state.formlist.forEach((item, index) => {
- if ((!item.field && item.type !== 'title') || item.hidden === 'true') return
+ formlist.forEach((item, index) => {
+ if (item.hidden === 'true') return
- if (item.type === 'title') {
- fields.push(
- <Col span={24} key={index}>
- <p>{item.label}</p>
- </Col>
- )
- } else if (item.type === 'text') {
+ if (item.type === 'text') {
fields.push(
<Col span={24 / cols} key={index}>
<Form.Item label={item.label}>
@@ -395,7 +337,6 @@
}
]
})(
- // <DatePicker showTime getCalendarContainer={() => document.getElementById('form-box')} />
<DatePicker showTime />
)}
</Form.Item>
@@ -453,15 +394,7 @@
</Col>
)
} else if (item.type === 'funcvar') {
- // fields.push(
- // <Col span={24 / cols} key={index}>
- // <Form.Item label={item.label}>
- // {getFieldDecorator(item.field, {
- // initialValue: item.linkfield || '',
- // })(<Input placeholder="" autoComplete="off" disabled={item.readonly === 'true'} />)}
- // </Form.Item>
- // </Col>
- // )
+
} else if (item.type === 'textarea') {
let _labelcol = cols !== 3 ? 8 / cols : 3
let _wrapcol = cols !== 3 ? 16 + (cols - 1) * 4 : 21
@@ -619,6 +552,7 @@
}
render() {
+ const { groups } = this.props
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -629,9 +563,20 @@
sm: { span: 16 }
}
}
+
+ let keys = groups.map(group => group.uuid)
return (
- <Form {...formItemLayout} className="ant-advanced-search-form main-form-field" id="main-form-box">
- <Row gutter={24}>{this.getFields()}</Row>
+ <Form {...formItemLayout}>
+ <Collapse
+ defaultActiveKey={keys}
+ expandIconPosition='right'
+ >
+ {groups.map(group =>
+ <Panel header={group.label} key={group.uuid}>
+ <Row gutter={24}>{this.getFields(group.sublist)}</Row>
+ </Panel>
+ )}
+ </Collapse>
</Form>
)
}
--
Gitblit v1.8.0