From ee32a69f9a7f25c37757325dc28ac7b5127dceca Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 15 十月 2019 22:23:36 +0800
Subject: [PATCH] datamanage-update
---
src/components/mutilform/index.jsx | 193 ++++++++++++++++++++++++++----------------------
1 files changed, 104 insertions(+), 89 deletions(-)
diff --git a/src/components/mutilform/index.jsx b/src/components/mutilform/index.jsx
index d0a3e9e..667ec75 100644
--- a/src/components/mutilform/index.jsx
+++ b/src/components/mutilform/index.jsx
@@ -1,42 +1,39 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Input, Select, DatePicker } from 'antd'
+import { Form, Row, Col, Input, InputNumber, Select, DatePicker } from 'antd'
import moment from 'moment'
-import Utils from '@/utils/utils.js'
import './index.scss'
-const {MonthPicker, WeekPicker} = DatePicker
const dateFormat = 'YYYY-MM-DD'
-const weekFormat = 'YYYYMMDD'
-const monthFormat = 'YYYY-MM'
+const timeFormat = 'YYYY-MM-DD HH:mm:ss'
class MainSearch extends Component {
static propTpyes = {
formlist: PropTypes.array, // 鎼滅储鏉′欢鍒楄〃
dict: PropTypes.object, // 瀛楀吀椤�
- data: PropTypes.object // 琛ㄦ牸鏁版嵁
+ data: PropTypes.any, // 琛ㄦ牸鏁版嵁
+ cols: PropTypes.number
}
state = {
formats: null, // 浜嬩欢鏍￠獙瑙勫垯
- match: null // 鎼滅储鏉′欢鍖归厤瑙勫垯
+ datatype: null
}
UNSAFE_componentWillMount () {
let formats = {}
- let match = {}
+ let datatype = {}
this.props.formlist.forEach(item => {
- if (item.Type === 'date') {
- // formats[item.FieldName] = dateFormat
- formats[item.FieldName] = weekFormat
- } else if (item.ID === 'WHE1400200905') {
- formats[item.FieldName] = monthFormat
+ if (item.InputType === 'date') {
+ formats[item.FieldName] = dateFormat
+ } else if (item.InputType === 'datetime') {
+ formats[item.FieldName] = timeFormat
}
- match[item.FieldName] = item.Op
+ datatype[item.FieldName] = item.InputType
})
this.setState({
formats: formats,
- match: match
+ datatype: datatype
})
}
@@ -44,31 +41,61 @@
const { getFieldDecorator } = this.props.form
const fields = []
this.props.formlist.forEach((item, index) => {
- if (item.InputType === 'text' || item.InputType === 'string') { // 鏂囨湰鎼滅储
+ if (item.Hide !== 'false') return // input闅愯棌
+
+ let validate = item.Validate ? JSON.parse(item.Validate) : {} // 妫�楠屾槸鍚﹀繀濉�
+ let _required = validate.required || false
+ if (item.InputType === 'text') { // 鏂囨湰鎼滅储
fields.push(
- <Col span={12} key={index}>
+ <Col span={24 / this.props.cols} key={index}>
<Form.Item label={item.Label}>
{getFieldDecorator(item.FieldName, {
- initialValue: this.props.data[item.FieldName],
+ initialValue: this.props.data ? this.props.data[item.FieldName] : item.InitVal,
rules: [
{
- required: item.required,
+ required: _required,
message: this.props.dict['main.form.required.input'] + item.Label + '!'
}
]
- })(<Input placeholder="" autoComplete="off" disabled={item.ReadOnly === 'true'} />)}
+ })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.InputType === 'spinner') { // 鏁板瓧
+ validate.min = (validate.min || validate.min === 0) ? validate.min : -Infinity
+ validate.max = (validate.max || validate.max === 0) ? validate.max : Infinity
+ validate.precision = (validate.precision || validate.precision === 0) ? validate.precision : ''
+ let _initval = (this.props.data ? this.props.data[item.FieldName] : item.InitVal) || 0
+ let model = <InputNumber initialValue={_initval} disabled={item.readonly} min={validate.min} max={validate.max} />
+
+ if (validate.precision === +validate.precision) { // 鏁版嵁绮惧害
+ model = <InputNumber initialValue={_initval} disabled={item.readonly} min={validate.min} max={validate.max} precision={validate.precision} />
+ }
+
+ fields.push(
+ <Col span={24 / this.props.cols} key={index}>
+ <Form.Item label={item.Label}>
+ {getFieldDecorator(item.FieldName, {
+ initialValue: _initval,
+ rules: [
+ {
+ required: _required,
+ message: this.props.dict['main.form.required.input'] + item.Label + '!'
+ }
+ ]
+ })(model)}
</Form.Item>
</Col>
)
} else if (item.InputType === 'select') { // 涓嬫媺鎼滅储
fields.push(
- <Col span={12} key={index}>
+ <Col span={24 / this.props.cols} key={index}>
<Form.Item label={item.Label}>
{getFieldDecorator(item.FieldName, {
- initialValue: this.props.data[item.FieldName],
+ initialValue: this.props.data ? this.props.data[item.FieldName] : item.InitVal,
rules: [
{
- required: item.required,
+ required: _required,
message: this.props.dict['main.form.required.select'] + item.Label + '!'
}
]
@@ -76,6 +103,7 @@
<Select
showSearch
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+ getPopupContainer={() => document.getElementById('form-box')}
>
{item.DynOptions.map(option =>
<Select.Option id={option.id} title={option.text} key={option.id} value={option.id}>{option.text}</Select.Option>
@@ -86,37 +114,43 @@
</Col>
)
} else if (item.InputType === 'date') { // 鏃堕棿鎼滅储
- if (item.ID === 'WHE14002009024') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.Label}>
- {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09-14', dateFormat) })(
- <DatePicker format={dateFormat} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.ID === 'WHE1400200905') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.Label}>
- {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09', monthFormat) })(
- <MonthPicker format={monthFormat} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.ID === 'WHE1400200902') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.Label}>
- {getFieldDecorator(item.FieldName, {initialValue: moment('20190906', weekFormat) })(
- <WeekPicker />
- )}
- </Form.Item>
- </Col>
- )
- }
+ let _initval = this.props.data ? this.props.data[item.FieldName] : item.InitVal
+ fields.push(
+ <Col span={24 / this.props.cols} key={index}>
+ <Form.Item label={item.Label}>
+ {getFieldDecorator(item.FieldName, {
+ initialValue: _initval ? moment(_initval, dateFormat) : null,
+ rules: [
+ {
+ required: _required,
+ message: this.props.dict['main.form.required.select'] + item.Label + '!'
+ }
+ ]
+ })(
+ <DatePicker getCalendarContainer={() => document.getElementById('form-box')} format={dateFormat} />
+ )}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.InputType === 'datetime') {
+ let _initval = this.props.data ? this.props.data[item.FieldName] : item.InitVal
+ fields.push(
+ <Col span={24 / this.props.cols} key={index}>
+ <Form.Item label={item.Label}>
+ {getFieldDecorator(item.FieldName, {
+ initialValue: _initval ? moment(_initval, timeFormat) : null,
+ rules: [
+ {
+ required: _required,
+ message: this.props.dict['main.form.required.select'] + item.Label + '!'
+ }
+ ]
+ })(
+ <DatePicker showTime format={timeFormat} />
+ )}
+ </Form.Item>
+ </Col>
+ )
}
})
@@ -128,7 +162,21 @@
return new Promise((resolve, reject) => {
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
- resolve(values)
+ let formdata = {}
+ Object.keys(values).forEach(key => {
+ if (values[key] && typeof(values[key]) === 'object') {
+ formdata[key] = moment(values[key]).format(this.state.formats[key])
+ } else if (values[key] || values[key] === 0) {
+ if (this.state.datatype[key] === 'spinner') {
+ formdata[key] = parseFloat(values[key])
+ } else {
+ formdata[key] = values[key].replace(/\t|\v|\n|\r/g,'')
+ }
+ } else {
+ formdata[key] = ''
+ }
+ })
+ resolve(formdata)
} else {
reject(err)
}
@@ -139,39 +187,6 @@
handleReset = () => {
// 閲嶇疆
this.props.form.resetFields()
- }
-
- getFieldsValues = (searches) => {
- // 鑾峰彇鎼滅储鏉′欢鍊�
- let search = []
- Object.keys(searches).forEach(key => {
- if (searches[key] && typeof(searches[key]) === 'object') {
- if (this.state.formats[key] === weekFormat) {
- search.push({
- type: 'date',
- key: key,
- value: moment(searches[key]).startOf('week').format(this.state.formats[key]) + ' ' + moment(searches[key]).endOf('week').format(this.state.formats[key]),
- op: this.state.match[key]
- })
- } else {
- search.push({
- type: 'date',
- key: key,
- value: moment(searches[key]).format(this.state.formats[key]),
- op: this.state.match[key]
- })
- }
- } else if (searches[key] && searches[key] !== '-1') {
- search.push({
- type: 'text',
- key: key,
- value: searches[key],
- op: this.state.match[key]
- })
- }
- })
- search = Utils.jointsearchkey(search)
- this.props.refreshdata(search)
}
render() {
@@ -186,7 +201,7 @@
}
}
return (
- <Form {...formItemLayout} className="ant-advanced-search-form">
+ <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box">
<Row gutter={24}>{this.getFields()}</Row>
</Form>
)
--
Gitblit v1.8.0