From f3167f8371d19d0ea8fe7d0e7af5517ff0b08cd2 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 07 四月 2021 23:25:29 +0800
Subject: [PATCH] 2021-04-07
---
src/tabviews/zshare/mutilform/index.jsx | 427 +++++++++++++++++++++++++++++-----------------------
1 files changed, 238 insertions(+), 189 deletions(-)
diff --git a/src/tabviews/zshare/mutilform/index.jsx b/src/tabviews/zshare/mutilform/index.jsx
index 2c79f04..1efef2a 100644
--- a/src/tabviews/zshare/mutilform/index.jsx
+++ b/src/tabviews/zshare/mutilform/index.jsx
@@ -33,7 +33,6 @@
}
state = {
- cols: 2, // 鏄剧ず涓哄灏戝垪
datatype: null, // 鏁版嵁绫诲瀷
readtype: null, // 鏄惁鍙
readin: null, // 琛屾暟鎹槸鍚﹀啓鍏�
@@ -44,54 +43,21 @@
record: {} // 璁板綍涓嬫媺琛ㄥ崟鍏宠仈瀛楁锛岀敤浜庢暟鎹啓鍏�
}
- UNSAFE_componentWillMount () {
- let cols = 2
- if (this.props.action.setting && this.props.action.setting.cols) {
- cols = parseInt(this.props.action.setting.cols)
- if (cols > 4 || cols < 1) {
- cols = 2
- }
- }
-
- this.setState({
- cols: cols
- })
- }
-
componentDidMount () {
- const { data, BData } = this.props
- let action = fromJS(this.props.action).toJS()
-
+ const { data, BData, action } = this.props
+
let datatype = {}
let readtype = {}
let readin = {}
let writein = {}
let fieldlen = {}
- let formlist = []
let intercepts = []
let _inputfields = []
-
- 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
- })
- }
-
- formlist.push(...group.sublist)
- })
- } else {
- formlist = action.fields
- }
-
let linkFields = {} // 鍏宠仈鑿滃崟
let supItemVal = {} // 涓婄骇鑿滃崟鍒濆鍊�
let deForms = [] // 闇�瑕佸姩鎬佽幏鍙栦笅鎷夎彍鍗曠殑琛ㄥ崟
+
+ let formlist = fromJS(action.fields).toJS()
formlist.forEach(item => {
if (item.type === 'text' || item.type === 'number') { // 鐢ㄤ簬杩囨护涓嬫媺鑿滃崟鍏宠仈琛ㄥ崟
@@ -108,7 +74,11 @@
})
formlist = formlist.map(item => {
- if (item.type === 'title') return item
+ if (item.labelwidth) {
+ item.labelCol = {style: {width: item.labelwidth + '%'}}
+ item.wrapperCol = {style: {width: (100 - item.labelwidth) + '%'}}
+ }
+ if (item.type === 'split' || item.type === 'hint') return item
// 鏁版嵁鑷姩濉厖
let _readin = item.readin !== 'false'
@@ -153,11 +123,11 @@
if (item.type === 'linkMain') {
newval = BData && BData[item.field] ? BData[item.field] : ''
- } else if (_readin && !/^date/.test(item.type) && this.props.data && this.props.data.hasOwnProperty(item.field)) {
- newval = this.props.data[item.field]
+ } else if (_readin && !/^date/.test(item.type) && data && data.hasOwnProperty(item.field)) {
+ newval = data[item.field]
} else if (item.type === 'date') { // 鏃堕棿鎼滅储
- if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
- newval = this.props.data[item.field]
+ if (_readin && data && data.hasOwnProperty(item.field)) {
+ newval = data[item.field]
}
if (newval) {
newval = moment(newval, 'YYYY-MM-DD')
@@ -169,8 +139,8 @@
newval = null
}
} else if (item.type === 'datemonth') {
- if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
- newval = this.props.data[item.field]
+ if (_readin && data && data.hasOwnProperty(item.field)) {
+ newval = data[item.field]
}
if (newval) {
newval = moment(newval, 'YYYY-MM')
@@ -182,8 +152,8 @@
newval = null
}
} else if (item.type === 'datetime') {
- if (_readin && this.props.data && this.props.data.hasOwnProperty(item.field)) {
- newval = this.props.data[item.field]
+ if (_readin && data && data.hasOwnProperty(item.field)) {
+ newval = data[item.field]
}
if (newval) {
newval = moment(newval, 'YYYY-MM-DD HH:mm:ss')
@@ -229,7 +199,7 @@
if (['select', 'link', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type) && item.resourceType === '1') {
deForms.push(item)
} else if (['select', 'link', 'radio'].includes(item.type) && item.resourceType !== '1') { // 閫変腑绗竴椤�
- if (item.initval && item.initval.indexOf('$first') > -1) {
+ if (typeof(item.initval) === 'string' && item.initval.indexOf('$first') > -1) {
item.initval = item.options[0] ? item.options[0].Value : ''
}
}
@@ -262,7 +232,9 @@
formlist
}, () => {
if (action.setting && action.setting.focus) {
- this.selectInput(action.setting.focus, 'init')
+ setTimeout(() => {
+ this.selectInput(action.setting.focus)
+ }, 500)
}
// 鐢ㄦ潵鏇存柊state锛岄槻姝㈠彈鎺ц〃鍗曞垵濮嬫椂涓嶆樉绀�
this.setState({
@@ -272,7 +244,7 @@
})
}
- selectInput = (selectId, type) => {
+ selectInput = (selectId) => {
try {
let _form = document.getElementById('main-form-box')
let _inputs = _form.getElementsByTagName('input')
@@ -280,7 +252,7 @@
_inputs.forEach(input => {
if (!input || input.id !== selectId) return
- if (input.className === 'ant-select-search__field' && type !== 'init') {
+ if (input.className === 'ant-select-search__field') {
let div = input.parentNode
while (div && div.parentNode) {
div = div.parentNode
@@ -462,7 +434,7 @@
} else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
item.options = item.oriOptions
}
- if (['select', 'link', 'radio'].includes(item.type) && item.initval && item.initval.indexOf('$first') > -1) { // 閫変腑绗竴椤�
+ if (['select', 'link', 'radio'].includes(item.type) && typeof(item.initval) === 'string' && item.initval.indexOf('$first') > -1) { // 閫変腑绗竴椤�
item.initval = item.options[0] ? item.options[0].Value : ''
values.push({field: item.field, value: item.initval})
}
@@ -569,7 +541,7 @@
} else if (['select', 'multiselect', 'radio', 'checkbox', 'checkcard'].includes(item.type)) {
item.options = item.oriOptions
}
- if (['select', 'link', 'radio'].includes(item.type) && item.initval && item.initval.indexOf('$first') > -1) { // 閫変腑绗竴椤�
+ if (['select', 'link', 'radio'].includes(item.type) && typeof(item.initval) === 'string' && item.initval.indexOf('$first') > -1) { // 閫変腑绗竴椤�
item.initval = item.options[0] ? item.options[0].Value : ''
values.push({field: item.field, value: item.initval})
}
@@ -640,7 +612,7 @@
// 琛ㄥ崟鍒囨崲鏃讹紝鏇存柊鍏宠仈瀛楁
if (_field.linkSubField) {
let _data = _field.options.filter(op => op.Value === value)[0]
-
+
if (_data) {
_field.linkSubField.forEach(subfield => {
if (this.props.form.getFieldValue(subfield) !== undefined) {
@@ -716,13 +688,13 @@
getFields() {
const { getFieldDecorator } = this.props.form
- const { cols, formlist } = this.state
+ const { 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.field && item.type !== 'split' && item.type !== 'hint') || item.hidden === 'true' || item.type === 'funcvar') return
if (item.supField) { // 澶氬眰琛ㄥ崟鎺у埗
let _supVal = this.props.form.getFieldValue(item.supField)
@@ -738,21 +710,22 @@
}
}
- let _colspan = 24 / cols
- if (item.entireLine === 'true') {
- _colspan = 24
- }
-
- if (item.type === 'title') {
+ if (item.type === 'split') {
fields.push(
<Col span={24} key={index}>
- <p>{item.label}</p>
+ <p className="mk-form-split-line">{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">
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ colon={!!item.label}
+ label={item.label}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ className="hint"
+ >
<div className="message">{item.message}</div>
</Form.Item>
</Col>
@@ -789,13 +762,18 @@
}
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -817,13 +795,18 @@
let precision = (item.decimal || item.decimal === 0) ? item.decimal : null
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -845,13 +828,18 @@
)
} else if (item.type === 'color') { // 棰滆壊閫夋嫨
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }
+ >
{getFieldDecorator(item.field, {
initialValue: item.initval || 'transparent',
rules: [
@@ -868,13 +856,19 @@
)
} 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">
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ className="checkcard"
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -889,13 +883,18 @@
)
} 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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -912,13 +911,18 @@
let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }
+ >
{getFieldDecorator(item.field, {
initialValue: _initval,
rules: [
@@ -937,13 +941,18 @@
)
} 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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -962,13 +971,18 @@
)
} 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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -996,13 +1010,18 @@
} else if (item.type === 'multiselect') { // 澶氶��
let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }
+ >
{getFieldDecorator(item.field, {
initialValue: _initval,
rules: [
@@ -1028,13 +1047,18 @@
)
} else if (item.type === 'date') { // 鏃堕棿鎼滅储
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -1051,13 +1075,18 @@
)
} else if (item.type === 'datemonth') {
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -1074,13 +1103,18 @@
)
} else if (item.type === 'datetime') {
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -1116,13 +1150,18 @@
}
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : item.label
+ }
+ >
{getFieldDecorator(item.field, {
initialValue: filelist,
rules: [
@@ -1139,13 +1178,18 @@
)
} else if (item.type === 'linkMain') {
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -1170,13 +1214,18 @@
}]
}
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
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ 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: [
@@ -1198,13 +1247,18 @@
let _max = item.fieldlength || 512
fields.push(
- <Col span={24} key={index}>
- <Form.Item label={item.hidelabel !== 'true' && item.tooltip ?
- <Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
- {item.label}
- </Tooltip> : (item.hidelabel !== 'true' ? item.label : '')
- }>
+ <Col span={item.span || 24} key={index}>
+ <Form.Item
+ extra={item.extra || null}
+ labelCol={item.labelCol}
+ wrapperCol={item.wrapperCol}
+ label={item.hidelabel !== 'true' && item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <Icon type="question-circle" />
+ {item.label}
+ </Tooltip> : (item.hidelabel !== 'true' ? item.label : '')
+ }
+ >
{getFieldDecorator(item.field, {
initialValue: item.initval || '',
rules: [
@@ -1389,21 +1443,16 @@
}
render() {
- const { cols } = this.state
- const formItemLayout = {
- labelCol: {
- xs: { span: 24 },
- sm: { span: 8 }
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 }
- }
+ const { action } = this.props
+
+ let _align = 'left_right'
+ if (action.setting && action.setting.align) {
+ _align = action.setting.align
}
return (
- <Form {...formItemLayout} className="ant-advanced-search-form main-form-field" id="main-form-box">
- <Row className={'cols' + cols} gutter={24}>{this.getFields()}</Row>
+ <Form className={'main-form-field ' + _align} id="main-form-box">
+ <Row gutter={24}>{this.getFields()}</Row>
</Form>
)
}
--
Gitblit v1.8.0