From 137fb8ea6af2789b3238b22bac31d80bced41dfe Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 28 七月 2021 11:39:39 +0800
Subject: [PATCH] 2021-07-28
---
src/tabviews/zshare/mutilform/checkCard/index.jsx | 29 ++++++++++++++++++++++-------
1 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/src/tabviews/zshare/mutilform/checkCard/index.jsx b/src/tabviews/zshare/mutilform/checkCard/index.jsx
index c8ceec6..fd825fa 100644
--- a/src/tabviews/zshare/mutilform/checkCard/index.jsx
+++ b/src/tabviews/zshare/mutilform/checkCard/index.jsx
@@ -2,6 +2,7 @@
import PropTypes from 'prop-types'
import { Col, Row } from 'antd'
+import MKEmitter from '@/utils/events.js'
import './index.scss'
class CheckCard extends Component {
@@ -29,10 +30,12 @@
}
changeCard = (item) => {
- const { multiple } = this.props.card
+ const { card } = this.props
const { selectKeys } = this.state
- if (multiple === 'true') {
+ if (card.readonly) return
+
+ if (card.multiple === 'true') {
let keys = []
if (selectKeys.includes(item.$value)) {
keys = selectKeys.filter(key => key !== item.$value)
@@ -45,7 +48,13 @@
}, () => {
this.props.onChange && this.props.onChange(keys.join(','))
})
- } else if (multiple !== 'true' && selectKeys !== item.$value) {
+ } else if (selectKeys !== item.$value) {
+ card.linkFields && card.linkFields.forEach((m, i) => {
+ setTimeout(() => {
+ MKEmitter.emit('mkSP', m.uuid, item.$value, 0)
+ }, (i + 1) * 10)
+ })
+
this.setState({
selectKeys: item.$value
}, () => {
@@ -55,7 +64,7 @@
}
getCards = () => {
- const { display, width, options, fields, ratio, multiple } = this.props.card
+ const { display, width, options, fields, ratio, multiple, backgroundColor, borderColor } = this.props.card
const { selectKeys } = this.state
let paddingTop = '100%'
@@ -67,12 +76,16 @@
paddingTop = '56.25%'
}
+ let style = borderColor ? {borderColor} : {}
+ let _style = backgroundColor ? {backgroundColor} : null
+
if (!options || options.length === 0) {
return null
} else if (display !== 'picture') {
if (!fields || fields.length === 0) {
return null
}
+
return options.map(item => {
let _active = false
if (multiple === 'true' && selectKeys.includes(item.$value)) {
@@ -82,7 +95,8 @@
}
return <Col span={width} key={item.key}>
- <div className={'card-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)}>
+ <div className={'card-cell' + (_active ? ' active' : '') + (_style ? ' bg-control' : '')} style={style} onClick={() => this.changeCard(item)}>
+ <div className="bg-mask" style={_style}></div>
{fields.map(col => {
return <span key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
})}
@@ -99,7 +113,7 @@
}
return <Col span={width} key={item.key}>
- <div className={'card-pic-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)} style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
+ <div className={'card-pic-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)} style={{...style, paddingTop, backgroundImage: `url(${item.$url})`}}>
</div>
</Col>
})
@@ -107,8 +121,9 @@
}
render() {
+ const { card } = this.props
return (
- <div className="check-card-form-box">
+ <div className={'check-card-form-box' + (card.readonly ? ' readonly' : '')}>
<Row gutter={12}>{this.getCards()}</Row>
</div>
)
--
Gitblit v1.8.0