From 5423c7caa9723e0b232ea6c5ef4aaf90bd7a3334 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 21 十月 2020 14:46:25 +0800
Subject: [PATCH] 2020-10-21
---
src/tabviews/zshare/mutilform/index.jsx | 368 ++++++++++++++++++++++++++++++++++++---------------
1 files changed, 257 insertions(+), 111 deletions(-)
diff --git a/src/tabviews/zshare/mutilform/index.jsx b/src/tabviews/zshare/mutilform/index.jsx
index 31363df..30b79f4 100644
--- a/src/tabviews/zshare/mutilform/index.jsx
+++ b/src/tabviews/zshare/mutilform/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
-import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification } from 'antd'
+import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification, Checkbox, Radio, Tooltip, Icon } from 'antd'
import moment from 'moment'
import Api from '@/api'
@@ -9,6 +9,8 @@
import { formRule, calendarColors } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import FileUpload from '../fileupload'
+import CustomSwitch from './customSwitch'
+import CheckCard from './checkCard'
import './index.scss'
const {MonthPicker} = DatePicker
@@ -120,7 +122,7 @@
writein[item.field] = item.writein !== 'false'
fieldlen[item.field] = _fieldlen
- if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
+ if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect' || item.type === 'radio' || item.type === 'checkbox') {
if (item.setAll === 'true') {
item.options.unshift({
key: Utils.getuuid(),
@@ -192,6 +194,14 @@
newval = window.decodeURIComponent(window.atob(newval))
} catch (e) {
console.warn(e)
+ }
+ } else if (item.type === 'switch' && newval !== '') { // 寮�鍏冲彧鎺ユ敹鍥哄畾鍊�
+ if (newval !== item.closeVal && newval !== item.openVal) {
+ newval = ''
+ } else if (newval === item.openVal) {
+ newval = true
+ } else {
+ newval = false
}
}
@@ -277,7 +287,7 @@
const { formlist } = this.state
// 闇�瑕佸姩鎬佽幏鍙栦笅鎷夎彍鍗曠殑琛ㄥ崟
- let deForms = formlist.filter(item => ['select', 'link', 'multiselect'].includes(item.type) && item.resourceType === '1' && (item.type === 'link' || item.hidden !== 'true'))
+ let deForms = formlist.filter(item => ['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && item.resourceType === '1' && (item.type === 'link' || item.hidden !== 'true'))
if (deForms.length === 0) {
return
@@ -395,17 +405,21 @@
delete result.status
let _formlist = formlist.map(item => {
- if (['select', 'link', 'multiselect'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
+ if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
let options = result[item.field].map(cell => {
- let _cell = {
- key: Utils.getuuid(),
- Value: cell[item.valueField],
- Text: cell[item.valueText]
+ let _cell = { key: Utils.getuuid() }
+
+ if (item.type !== 'checkcard') {
+ _cell.Value = cell[item.valueField]
+ _cell.Text = cell[item.valueText]
+ } else {
+ _cell.$value = cell[item.valueField]
+ _cell = {..._cell, ...cell}
}
if (item.type === 'link') {
_cell.ParentID = cell[item.linkField]
- } else if (item.type === 'select' && item.linkSubField && item.linkSubField.length > 0) {
+ } else if ((item.type === 'select' || item.type === 'radio') && item.linkSubField && item.linkSubField.length > 0) {
item.linkSubField.forEach(_field => {
_cell[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
})
@@ -427,7 +441,7 @@
} else {
item.options = item.oriOptions
}
- } else if (item.type === 'select' || item.type === 'multiselect') {
+ } else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
item.options = item.oriOptions
}
return item
@@ -485,17 +499,21 @@
delete result.status
let _formlist = formlist.map(item => {
- if (['select', 'link', 'multiselect'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
+ if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
let options = result[item.field].map(cell => {
- let _cell = {
- key: Utils.getuuid(),
- Value: cell[item.valueField],
- Text: cell[item.valueText]
+ let _cell = { key: Utils.getuuid() }
+
+ if (item.type !== 'checkcard') {
+ _cell.Value = cell[item.valueField]
+ _cell.Text = cell[item.valueText]
+ } else {
+ _cell.$value = cell[item.valueField]
+ _cell = {..._cell, ...cell}
}
if (item.type === 'link') {
_cell.ParentID = cell[item.linkField]
- } else if (item.type === 'select' && item.linkSubField && item.linkSubField.length > 0) {
+ } else if ((item.type === 'select' || item.type === 'radio') && item.linkSubField && item.linkSubField.length > 0) {
item.linkSubField.forEach(_field => {
_cell[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
})
@@ -517,7 +535,7 @@
} else {
item.options = item.oriOptions
}
- } else if (item.type === 'select' || item.type === 'multiselect') {
+ } else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
item.options = item.oriOptions
}
return item
@@ -554,7 +572,7 @@
}
}
- selectChange = (_field, value, option) => {
+ selectChange = (_field, value) => {
const { record } = this.state
let formlist = fromJS(this.state.formlist).toJS()
@@ -576,15 +594,18 @@
})
// 琛ㄥ崟鍒囨崲鏃讹紝鏇存柊鍏宠仈瀛楁
- if (_field.type === 'select' && _field.linkSubField && _field.linkSubField.length > 0 && option.props.data) {
- let _data = option.props.data
- _field.linkSubField.forEach(subfield => {
- if (this.props.form.getFieldValue(subfield) !== undefined) {
- fieldsvalue[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
- } else {
- _record[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
- }
- })
+ if ((_field.type === 'select' || _field.type === 'radio') && _field.linkSubField && _field.linkSubField.length > 0) {
+ let _data = _field.options.filter(op => op.Value === value)[0]
+
+ if (_data) {
+ _field.linkSubField.forEach(subfield => {
+ if (this.props.form.getFieldValue(subfield) !== undefined) {
+ fieldsvalue[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
+ } else {
+ _record[subfield] = (_data[subfield] || _data[subfield] === 0) ? _data[subfield] : ''
+ }
+ })
+ }
}
if (subfields.length === 0) {
@@ -629,17 +650,47 @@
callback()
}
- getFields(formlist) {
+ getFields() {
const { getFieldDecorator } = this.props.form
- const { cols } = this.state
+ const { cols, formlist } = this.state
const fields = []
+ let filtration = {}
formlist.forEach((item, index) => {
+ if ((!item.field && item.type !== 'title' && item.type !== 'hint') || item.hidden === 'true' || item.type === 'funcvar') return
+ if (item.supField) { // 澶氬眰琛ㄥ崟鎺у埗
+ let _supVal = this.props.form.getFieldValue(item.supField)
+
+ if (_supVal === undefined && filtration[item.supField]) {
+ _supVal = filtration[item.supField]
+ }
+
+ if (item.supvalue.includes(_supVal)) {
+ let _subVal = this.props.form.getFieldValue(item.field)
+ filtration[item.field] = _subVal === undefined ? item.initval : _subVal
+ } else {
+ return
+ }
+ }
+
+ let _colspan = 24 / cols
+ if (item.entireLine === 'true') {
+ _colspan = 24
+ }
+
if (item.type === 'title') {
fields.push(
<Col span={24} key={index}>
<p>{item.label}</p>
+ </Col>
+ )
+ } else if (item.type === 'hint') {
+ fields.push(
+ <Col span={24} key={index}>
+ <Form.Item colon={!!item.label} label={item.label || ' '} className="hint">
+ <div className="message">{item.message}</div>
+ </Form.Item>
</Col>
)
} else if (item.type === 'text') {
@@ -669,8 +720,13 @@
}
}
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -693,8 +749,13 @@
let precision = (item.decimal || item.decimal === 0) ? item.decimal : null
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: _initval,
rules: [
@@ -716,8 +777,13 @@
)
} else if (item.type === 'color') { // 棰滆壊閫夋嫨
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -727,7 +793,7 @@
}
]
})(
- <Select onChange={(value, option) => {this.selectChange(item, value, option)}} disabled={item.readonly === 'true'}>
+ <Select disabled={item.readonly === 'true'}>
{calendarColors.map(option =>
<Select.Option key={option.name} style={{background: option.value, color: '#ffffff'}} value={option.name}>{option.name}</Select.Option>
)}
@@ -736,15 +802,109 @@
</Form.Item>
</Col>
)
- } else if (item.type === 'select' || item.type === 'link') { // 涓嬫媺鎼滅储
- let hasSubField = false
- if (item.linkSubField && item.linkSubField.length > 0) { // 瀛樺湪鍏宠仈瀛楁锛屾暟鎹瓨鍌�
- hasSubField = true
- }
+ } else if (item.type === 'checkcard') { // 澶氶�夋
+ fields.push(
+ <Col span={24} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ } className="checkcard">
+ {getFieldDecorator(item.field, {
+ initialValue: item.initval,
+ rules: [
+ {
+ required: item.required === 'true',
+ message: this.props.dict['form.required.select'] + item.label + '!'
+ }
+ ]
+ })(<CheckCard card={item} />)}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'switch') { // 澶氶�夋
+ fields.push(
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
+ {getFieldDecorator(item.field, {
+ initialValue: item.initval,
+ rules: [
+ {
+ required: item.required === 'true',
+ message: this.props.dict['form.required.select'] + item.label + '!'
+ }
+ ]
+ })(<CustomSwitch Item={item} />)}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'checkbox') { // 澶氶�夋
+ let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
+ {getFieldDecorator(item.field, {
+ initialValue: _initval,
+ rules: [
+ {
+ required: item.required === 'true',
+ message: this.props.dict['form.required.select'] + item.label + '!'
+ }
+ ]
+ })(
+ <Checkbox.Group disabled={item.readonly === 'true'}>
+ {item.options.map(option => <Checkbox key={option.key} title={option.Text} value={option.Value}>{option.Text}</Checkbox>)}
+ </Checkbox.Group>
+ )}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'radio') { // 鍗曢�夋
+ fields.push(
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
+ {getFieldDecorator(item.field, {
+ initialValue: item.initval,
+ rules: [
+ {
+ required: item.required === 'true',
+ message: this.props.dict['form.required.select'] + item.label + '!'
+ }
+ ]
+ })(
+ <Radio.Group disabled={item.readonly === 'true'} onChange={(e) => {this.selectChange(item, e.target.value)}}>
+ {item.options.map(option => <Radio key={option.key} value={option.Value}>{option.Text}</Radio>)}
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col>
+ )
+ } else if (item.type === 'select' || item.type === 'link') { // 涓嬫媺鎼滅储
+ fields.push(
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -757,11 +917,11 @@
<Select
showSearch
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- onChange={(value, option) => {this.selectChange(item, value, option)}}
+ onChange={(value) => {this.selectChange(item, value)}}
disabled={item.readonly === 'true'}
>
{item.options.map(option =>
- <Select.Option id={option.key} data={hasSubField ? option : ''} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
+ <Select.Option id={option.key} title={option.Text} key={option.key} value={option.Value}>{option.Text}</Select.Option>
)}
</Select>
)}
@@ -771,8 +931,13 @@
} else if (item.type === 'multiselect') { // 澶氶��
let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: _initval,
rules: [
@@ -798,8 +963,13 @@
)
} else if (item.type === 'date') { // 鏃堕棿鎼滅储
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -816,8 +986,13 @@
)
} else if (item.type === 'datemonth') {
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -834,8 +1009,13 @@
)
} else if (item.type === 'datetime') {
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -871,8 +1051,13 @@
}
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: filelist,
rules: [
@@ -889,8 +1074,13 @@
)
} else if (item.type === 'linkMain') {
fields.push(
- <Col span={24 / cols} key={index}>
- <Form.Item label={item.label}>
+ <Col span={_colspan} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -907,15 +1097,14 @@
// 鍑芥暟鍙橀噺瀛楁锛岄粯璁や笉鏄剧ず
} else if (item.type === 'textarea') {
let _max = item.fieldlength || 512
- let _labelcol = cols !== 3 ? 8 / cols : 3
- let _wrapcol = cols !== 3 ? 16 + (cols - 1) * 4 : 21
- let _style = {}
- if (cols === 2 || cols === 4) {
- _style.paddingLeft = '7px'
- }
fields.push(
- <Col span={24} key={index} className="textarea-row" style={{..._style}}>
- <Form.Item label={item.label} labelCol={{xs: { span: 24 }, sm: { span: _labelcol }}} wrapperCol={ {xs: { span: 24 }, sm: { span: _wrapcol }} }>
+ <Col span={24} key={index}>
+ <Form.Item label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
{getFieldDecorator(item.field, {
initialValue: item.initval,
rules: [
@@ -1034,7 +1223,7 @@
} else if (this.state.datatype[key] === 'number') {
_value = values[key]
- } else if (this.state.datatype[key] === 'multiselect') {
+ } else if (this.state.datatype[key] === 'multiselect' || this.state.datatype[key] === 'checkbox') {
_value = values[key] ? values[key].join(',') : ''
} else if (this.state.datatype[key] === 'fileupload') {
@@ -1104,7 +1293,7 @@
}
render() {
- const { formlist, cols } = this.state
+ const { cols } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -1116,52 +1305,9 @@
}
}
- let _formlist = []
- let rowIndex = 0
- let colIndex = 0
- let filtration = {}
-
- // 琛ㄥ崟鍒嗚锛岄伩鍏嶆帓鍒椾笉鏁撮綈
- formlist.forEach(item => {
- if ((!item.field && item.type !== 'title') || item.hidden === 'true' || item.type === 'funcvar') return
- if (item.supField) { // 澶氬眰琛ㄥ崟鎺у埗
- let _supVal = this.props.form.getFieldValue(item.supField)
-
- if (_supVal === undefined && filtration[item.supField]) {
- _supVal = filtration[item.supField]
- }
-
- if (item.supvalue.includes(_supVal)) {
- let _subVal = this.props.form.getFieldValue(item.field)
- filtration[item.field] = _subVal === undefined ? item.initval : _subVal
- } else {
- return
- }
- }
-
- _formlist[rowIndex] = _formlist[rowIndex] || []
- if (item.type === 'textarea' || item.type === 'title') {
- if (colIndex === 0) {
- _formlist[rowIndex].push(item)
- } else {
- rowIndex++
- _formlist[rowIndex] = [item]
- }
- rowIndex++
- colIndex = 0
- } else {
- _formlist[rowIndex].push(item)
- colIndex++
- }
- if (colIndex >= cols) {
- rowIndex++
- colIndex = 0
- }
- })
-
return (
<Form {...formItemLayout} className="ant-advanced-search-form main-form-field" id="main-form-box">
- {_formlist.map((formrow, index) => <Row key={index} gutter={24}>{this.getFields(formrow)}</Row>)}
+ <Row className={'cols' + cols} gutter={24}>{this.getFields()}</Row>
</Form>
)
}
--
Gitblit v1.8.0