From a9b02f6862522b54d0824152017bf2acfec2af7b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 21 三月 2024 10:29:50 +0800
Subject: [PATCH] 2024-03-21
---
src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx | 151 +++++++++++++++++++++++++++-----------------------
1 files changed, 82 insertions(+), 69 deletions(-)
diff --git a/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx b/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx
index 6b9bfbf..94683e2 100644
--- a/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx
+++ b/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx
@@ -1,13 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Select, Button, Input, InputNumber, Radio, Icon, Cascader, Tooltip } from 'antd'
+import { Form, Row, Col, Select, Button, Input, Radio, Cascader } from 'antd'
-import { minkeColorSystem } from '@/utils/option.js'
+import { minkeColorSystem, minkeIconSystem } from '@/utils/option.js'
+import MkIcon from '@/components/mk-icon'
import './index.scss'
class UniqueForm extends Component {
static propTpyes = {
- dict: PropTypes.object, // 瀛楀吀椤�
card: PropTypes.object, // 瀛楁淇℃伅
columns: PropTypes.array, // 鍒楀悕闆嗗悎
markChange: PropTypes.func // 淇敼鍑芥暟
@@ -19,7 +19,8 @@
originField: this.props.card,
signType: 'background',
selectIcon: '',
- options: minkeColorSystem
+ options: JSON.parse(JSON.stringify(minkeColorSystem)),
+ icons: minkeIconSystem.direction
}
UNSAFE_componentWillMount() {
@@ -39,12 +40,25 @@
const { columns } = this.props
let item = columns.filter(col => col.field === record.field)[0]
+ let _type = 'background '
+ if (record.signType === 'icon' || record.signType === 'font') {
+ _type = 'font '
+ }
+
this.setState({
originField: item || '',
editItem: record,
contrastType: record.contrastType || '',
signType: record.signType || '',
- selectIcon: record.icon || ''
+ selectIcon: record.icon || '',
+ options: this.state.options.map(option => {
+ option.children = option.children.map(cell => {
+ cell.label = <div className={_type + cell.value}>{record.icon ? <MkIcon type={record.icon} /> : cell.value}</div>
+
+ return cell
+ })
+ return option
+ })
}, () => {
let fieldvalue = {}
Object.keys(record).forEach(key => {
@@ -57,6 +71,9 @@
})
}
+ /**
+ * @description 瀛楁鍒囨崲
+ */
fieldChange = (value) => {
const { columns } = this.props
let item = columns.filter(col => col.field === value)[0]
@@ -72,12 +89,18 @@
}
}
+ /**
+ * @description 瀵规瘮鍊肩被鍨嬪垏鎹�
+ */
changeType = (val) => {
this.setState({
contrastType: val
})
}
+ /**
+ * @description 鏍囪绫诲瀷鍒囨崲
+ */
changeSignType = (val) => {
let _type = 'background '
if (val === 'icon' || val === 'font') {
@@ -103,12 +126,26 @@
this.setState(newState)
}
+ /**
+ * @description 鍥炬爣绫诲瀷鍒囨崲
+ */
+ changeIconType = (val) => {
+ this.setState({
+ icons: minkeIconSystem[val],
+ selectIcon: ''
+ })
+ this.props.form.setFieldsValue({icon: ''})
+ }
+
+ /**
+ * @description 鍒囨崲鍥炬爣
+ */
changeIcon = (val) => {
this.setState({
selectIcon: val,
options: this.state.options.map(option => {
option.children = option.children.map(cell => {
- cell.label = <div className={'font ' + cell.value}><Icon type={val} /></div>
+ cell.label = <div className={'font ' + cell.value}><MkIcon type={val} /></div>
return cell
})
@@ -127,21 +164,13 @@
this.setState({
editItem: null
})
- this.props.form.setFieldsValue({
- field: '',
- })
- if (this.state.contrastType !== 'static') {
- this.props.form.setFieldsValue({contrastField: ''})
- } else {
- this.props.form.setFieldsValue({contrastValue: ''})
- }
}
})
}
render() {
const { columns } = this.props
- const { originField, contrastType, signType, options, selectIcon } = this.state
+ const { originField, contrastType, signType, options, selectIcon, icons } = this.state
const { getFieldDecorator } = this.props.form
const formItemLayout = {
labelCol: {
@@ -154,19 +183,17 @@
}
}
- let contFields = columns.filter(col => originField.field !== col.field && originField.type === col.type)
-
return (
<Form {...formItemLayout} id="model-mark-form-box" className="mingke-table">
<Row gutter={24}>
<Col span={6}>
- <Form.Item label={'瀛楁'}>
+ <Form.Item label="瀛楁">
{getFieldDecorator('field', {
initialValue: originField.field,
rules: [
{
required: true,
- message: this.props.dict['form.required.select'] + '瀛楁!'
+ message: '璇烽�夋嫨瀛楁!'
}
]
})(
@@ -183,7 +210,7 @@
</Form.Item>
</Col>
<Col span={6}>
- <Form.Item label={'瀵规瘮绫诲瀷'}>
+ <Form.Item label="瀵规瘮绫诲瀷">
{getFieldDecorator('contrastType', {
initialValue: 'static'
})(
@@ -195,46 +222,41 @@
</Form.Item>
</Col>
<Col span={6}>
- <Form.Item label={'瀵规瘮鏂瑰紡'}>
+ <Form.Item label="瀵规瘮鏂瑰紡">
{getFieldDecorator('match', {
initialValue: '=',
rules: [
{
required: true,
- message: this.props.dict['form.required.select'] + '瀵规瘮鏂瑰紡!'
+ message: '璇烽�夋嫨瀵规瘮鏂瑰紡!'
}
]
})(
<Select>
<Select.Option value="="> = </Select.Option>
- {originField.type === 'number' ? <Select.Option value=">"> > </Select.Option> : null}
- {originField.type === 'number' ? <Select.Option value="<"> < </Select.Option> : null}
- {originField.type === 'text' ? <Select.Option value="like"> like </Select.Option> : null}
+ <Select.Option value="!="> != </Select.Option>
+ <Select.Option value=">"> > </Select.Option>
+ <Select.Option value="<"> < </Select.Option>
+ <Select.Option value="like"> like </Select.Option>
</Select>
)}
</Form.Item>
</Col>
{contrastType === 'static' ? <Col span={6}>
- <Form.Item label={'瀵规瘮鍊�'}>
+ <Form.Item label="瀵规瘮鍊�">
{getFieldDecorator('contrastValue', {
- initialValue: '',
- rules: [
- {
- required: true,
- message: this.props.dict['form.required.input'] + '瀵规瘮鍊�!'
- }
- ]
- })(originField.type === 'number' ? <InputNumber /> : <Input placeholder="" autoComplete="off" />)}
+ initialValue: ''
+ })(<Input placeholder="" autoComplete="off" />)}
</Form.Item>
</Col> : null}
{contrastType === 'dynamic' ? <Col span={6}>
- <Form.Item label={'瀵规瘮瀛楁'}>
+ <Form.Item label="瀵规瘮瀛楁">
{getFieldDecorator('contrastField', {
initialValue: '',
rules: [
{
required: true,
- message: this.props.dict['form.required.select'] + '瀵规瘮瀛楁!'
+ message: '璇烽�夋嫨瀵规瘮瀛楁!'
}
]
})(
@@ -242,7 +264,7 @@
showSearch
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
- {contFields.map(item => (
+ {columns.map(item => (
<Select.Option key={item.uuid} title={item.label + '(' + item.field + ')'} value={item.field}>{item.label + '(' + item.field + ')'}</Select.Option>
))}
</Select>
@@ -250,18 +272,13 @@
</Form.Item>
</Col> : null}
<Col span={6}>
- <Form.Item label={
- <Tooltip placement="topLeft" title="鍗＄墖绫诲瀷锛屽湪鍗＄墖鍥捐〃涓捣鏁�">
- <Icon type="question-circle" />
- {'鏍囪'}
- </Tooltip>
- }>
+ <Form.Item label="鏍囪鏂瑰紡">
{getFieldDecorator('signType', {
initialValue: 'background',
rules: [
{
required: true,
- message: this.props.dict['form.required.select'] + '鏍囪鏂瑰紡!'
+ message: '璇烽�夋嫨鏍囪鏂瑰紡!'
}
]
})(
@@ -288,37 +305,33 @@
</Form.Item>
</Col> : null}
{signType === 'icon' ? <Col span={6}>
- <Form.Item label={'鍥炬爣'}>
+ <Form.Item label={'鍥炬爣绫诲瀷'}>
+ {getFieldDecorator('iconType', {
+ initialValue: 'direction'
+ })(
+ <Select onChange={this.changeIconType}>
+ <Select.Option value="direction">鏂瑰悜鎬у浘鏍�</Select.Option>
+ <Select.Option value="hint">鎻愮ず寤鸿鎬у浘鏍�</Select.Option>
+ <Select.Option value="edit">缂栬緫绫诲浘鏍�</Select.Option>
+ <Select.Option value="data">鏁版嵁绫诲浘鏍�</Select.Option>
+ <Select.Option value="normal">缃戠珯閫氱敤鍥炬爣</Select.Option>
+ </Select>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {signType === 'icon' ? <Col span={6}>
+ <Form.Item label="鍥炬爣">
{getFieldDecorator('icon', {
initialValue: '',
rules: [
{
required: true,
- message: this.props.dict['form.required.select'] + '鍥炬爣!'
+ message: '璇烽�夋嫨鍥炬爣!'
}
]
})(
<Select onChange={this.changeIcon} getPopupContainer={() => document.getElementById('model-mark-form-box')}>
- <Select.Option value="arrow-up"><Icon type="arrow-up" /></Select.Option>
- <Select.Option value="arrow-down"><Icon type="arrow-down" /></Select.Option>
- <Select.Option value="arrow-left"><Icon type="arrow-left" /></Select.Option>
- <Select.Option value="arrow-right"><Icon type="arrow-right" /></Select.Option>
- <Select.Option value="check-circle"><Icon type="check-circle" /></Select.Option>
- <Select.Option value="close-circle"><Icon type="close-circle" /></Select.Option>
- <Select.Option value="clock-circle"><Icon type="clock-circle" /></Select.Option>
- <Select.Option value="pause-circle"><Icon type="pause-circle" /></Select.Option>
- <Select.Option value="stop"><Icon type="stop" /></Select.Option>
- <Select.Option value="question-circle"><Icon type="question-circle" /></Select.Option>
- <Select.Option value="exclamation-circle"><Icon type="exclamation-circle" /></Select.Option>
- <Select.Option value="check-square"><Icon type="check-square" /></Select.Option>
- <Select.Option value="warning"><Icon type="warning" /></Select.Option>
- <Select.Option value="minus-circle"><Icon type="minus-circle" /></Select.Option>
- <Select.Option value="issues-close"><Icon type="issues-close" /></Select.Option>
- <Select.Option value="question"><Icon type="question" /></Select.Option>
- <Select.Option value="fall"><Icon type="fall" /></Select.Option>
- <Select.Option value="rise"><Icon type="rise" /></Select.Option>
- <Select.Option value="link"><Icon type="link" /></Select.Option>
- {/* <Select.Option value="link"></Select.Option> */}
+ {icons.map(icon => <Select.Option key={icon} value={icon}><MkIcon type={icon} /></Select.Option>)}
</Select>
)}
</Form.Item>
@@ -330,20 +343,20 @@
rules: [
{
required: true,
- message: this.props.dict['form.required.select'] + '棰滆壊!'
+ message: '璇烽�夋嫨棰滆壊!'
}
]
})(
<Cascader
options={options}
placeholder=""
- displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + ' / ' + selectedOptions[1].value : ''}
+ displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + (selectedOptions[1] ? ' / ' + selectedOptions[1].value : '') : ''}
getPopupContainer={() => document.getElementById('model-mark-form-box')}
/>
)}
</Form.Item>
</Col> : null}
- <Col span={signType === 'icon' ? 24 : 12} style={{textAlign: 'right', marginBottom: 10}}>
+ <Col span={signType === 'icon' ? (!selectIcon ? 24 : 18) : 12} style={{textAlign: 'right', marginBottom: 10}}>
<Button onClick={this.handleConfirm} type="primary" className="mk-green">
淇濆瓨
</Button>
--
Gitblit v1.8.0