From bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 22 十二月 2021 14:36:03 +0800
Subject: [PATCH] 2021-12-22
---
src/templates/sharecomponent/fieldscomponent/editcard/index.jsx | 82 +++++++++++++++++++++++++++--------------
1 files changed, 54 insertions(+), 28 deletions(-)
diff --git a/src/templates/sharecomponent/fieldscomponent/editcard/index.jsx b/src/templates/sharecomponent/fieldscomponent/editcard/index.jsx
index be3460f..c6d82e3 100644
--- a/src/templates/sharecomponent/fieldscomponent/editcard/index.jsx
+++ b/src/templates/sharecomponent/fieldscomponent/editcard/index.jsx
@@ -1,5 +1,7 @@
import React, {Component} from 'react'
-import { Row, Col, Icon, Radio, Input, Button } from 'antd'
+import { is, fromJS } from 'immutable'
+import { Row, Col, Radio, Input, Button } from 'antd'
+import { CheckOutlined } from '@ant-design/icons'
import './index.scss'
const { Search } = Input
@@ -29,8 +31,21 @@
}
}
+ UNSAFE_componentWillReceiveProps (nextProps) {
+ const { card } = this.state
+
+ if (nextProps.card.origin !== card.origin) {
+ this.setState({
+ card: {...card, origin: nextProps.card.origin}
+ })
+ }
+ }
+
changeSelect = () => {
const { card } = this.state
+
+ if (card.origin) return
+
this.setState({
card: {...card, selected: !card.selected}
}, () => {
@@ -40,38 +55,41 @@
changeType = (e) => {
const { card } = this.state
+
+ if (card.origin) return
+
this.setState({
card: {...card, type: e.target.value}
}, () => {
- this.props.changeCard(this.state.card)
+ this.props.changeCard(this.state.card, 'update')
})
}
render() {
const { card, type } = this.state
return (
- <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} >
+ <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '') + (card.origin ? ' fixed' : '')} >
<div className="base" onClick={this.changeSelect}>
- <Icon type="check" />
- <p title={card.field}>{this.props.dict['model.form.field']}锛� <span>{card.field}</span></p>
- <p title={card.label}>{this.props.dict['model.name']}锛� <span>{card.label}</span></p>
+ <CheckOutlined />
+ <p title={card.field}>瀛楁锛� <span>{card.field}</span></p>
+ <p title={card.label}>鍚嶇О锛� <span>{card.label}</span></p>
</div>
{type === 'search' ?
- <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}>
+ <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected || card.origin}>
<Radio value="text">text</Radio>
<Radio value="select">select</Radio>
<Radio value="daterange">dateRange</Radio>
</Radio.Group> : null
}
{type === 'columns' ?
- <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}>
+ <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected || card.origin}>
<Radio value="text">text</Radio>
<Radio value="number">number</Radio>
<Radio value="picture">picture</Radio>
</Radio.Group> : null
}
{type === 'form' ?
- <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}>
+ <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected || card.origin}>
<Radio value="text">text</Radio>
<Radio value="number">number</Radio>
<Radio value="select">select</Radio>
@@ -88,18 +106,31 @@
super(props)
this.state = {
- dataSource: props.data,
- selectCards: props.data.filter(item => item.selected),
+ selectCards: [],
type: props.type,
searchKey: '',
- loading: false
}
}
- changeCard = (item) => {
+ UNSAFE_componentWillReceiveProps (nextProps) {
+ const { data } = this.props
+
+ if (!is(fromJS(nextProps.data), fromJS(data))) {
+ this.setState({selectCards: []})
+ }
+ }
+
+ changeCard = (item, m) => {
let cards = JSON.parse(JSON.stringify(this.state.selectCards))
- if (!item.selected) {
+ if (m === 'update') {
+ cards = cards.map(card => {
+ if (card.field === item.field) {
+ return item
+ }
+ return card
+ })
+ } else if (!item.selected) {
cards = cards.filter(card => card.field !== item.field)
} else {
cards.push(item)
@@ -107,42 +138,37 @@
this.setState({
selectCards: cards
+ }, () => {
+ this.props.onChange(cards)
})
}
reset = () => {
this.setState({
searchKey: '',
- loading: true
- }, () => {
- this.setState({
- loading: false
- })
})
}
render() {
- const { dict } = this.props
- const { dataSource, type, loading } = this.state
+ const { data } = this.props
+ const { type } = this.state
return (
<div className="common-modal-edit-card">
<Row className="search-row">
<Col span={8}>
- {!loading ? <Search placeholder={dict['form.required.input'] + dict['header.form.field']} onSearch={value => {this.setState({searchKey: value})}} enterButton /> : null}
+ <Search placeholder="璇疯緭鍏ュ瓧娈�" autoFocus onSearch={value => {this.setState({searchKey: value})}} enterButton />
</Col>
<Col span={8}>
- <Button onClick={this.reset}>
- {this.props.dict['header.reset']}
- </Button>
+ <Button onClick={this.reset}>閲嶇疆</Button>
</Col>
</Row>
<Row>
- {dataSource.map((item, index) => {
- if (item.field.toLowerCase().indexOf(this.state.searchKey.toLowerCase()) >= 0) {
+ {data.map((item, index) => {
+ if (item.field.toLowerCase().indexOf(this.state.searchKey.toLowerCase()) >= 0 || item.label.indexOf(this.state.searchKey) >= 0) {
return (
<Col key={index} span={8}>
- <EditCardCell ref={'cellCard' + index} type={type} card={item} dict={this.props.dict} changeCard={this.changeCard} />
+ <EditCardCell type={type} card={item} changeCard={this.changeCard} />
</Col>
)
} else {
--
Gitblit v1.8.0