From c7aece35a62b6e91fd98a625bf0e53f64bfbd18d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 17 八月 2023 16:22:15 +0800
Subject: [PATCH] 2023-08-17
---
src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx | 382 +++++++++++++----------------------------------------
1 files changed, 96 insertions(+), 286 deletions(-)
diff --git a/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx b/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx
index fa1f32e..94683e2 100644
--- a/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx
+++ b/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx
@@ -1,12 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Select, Button, Input, InputNumber, Radio, Icon, Cascader } from 'antd'
-import './index.scss'
+import { Form, Row, Col, Select, Button, Input, Radio, Cascader } from 'antd'
+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 // 淇敼鍑芥暟
@@ -18,216 +19,8 @@
originField: this.props.card,
signType: 'background',
selectIcon: '',
- options: [
- {
- value: 'DustRed',
- label: '钖勬毊',
- children: [
- { value: 'dust-red-1', label: 'dust-red-1' },
- { value: 'dust-red-2', label: 'dust-red-2' },
- { value: 'dust-red-3', label: 'dust-red-3' },
- { value: 'dust-red-4', label: 'dust-red-4' },
- { value: 'dust-red-5', label: 'dust-red-5' },
- { value: 'dust-red-6', label: 'dust-red-6' },
- { value: 'dust-red-7', label: 'dust-red-7' },
- { value: 'dust-red-8', label: 'dust-red-8' },
- { value: 'dust-red-9', label: 'dust-red-9' },
- { value: 'dust-red-10', label: 'dust-red-10' }
- ]
- },
- {
- value: 'Volcano',
- label: '鐏北',
- children: [
- { value: 'volcano-1', label: 'volcano-1' },
- { value: 'volcano-2', label: 'volcano-2' },
- { value: 'volcano-3', label: 'volcano-3' },
- { value: 'volcano-4', label: 'volcano-4' },
- { value: 'volcano-5', label: 'volcano-5' },
- { value: 'volcano-6', label: 'volcano-6' },
- { value: 'volcano-7', label: 'volcano-7' },
- { value: 'volcano-8', label: 'volcano-8' },
- { value: 'volcano-9', label: 'volcano-9' },
- { value: 'volcano-10', label: 'volcano-10' }
- ],
- },
- {
- value: 'SunsetOrange',
- label: '鏃ユ毊',
- children: [
- { value: 'orange-1', label: 'orange-1' },
- { value: 'orange-2', label: 'orange-2' },
- { value: 'orange-3', label: 'orange-3' },
- { value: 'orange-4', label: 'orange-4' },
- { value: 'orange-5', label: 'orange-5' },
- { value: 'orange-6', label: 'orange-6' },
- { value: 'orange-7', label: 'orange-7' },
- { value: 'orange-8', label: 'orange-8' },
- { value: 'orange-9', label: 'orange-9' },
- { value: 'orange-10', label: 'orange-10' }
- ]
- },
- {
- value: 'CalendulaGold',
- label: '閲戠洀鑺�',
- children: [
- { value: 'gold-1', label: 'gold-1' },
- { value: 'gold-2', label: 'gold-2' },
- { value: 'gold-3', label: 'gold-3' },
- { value: 'gold-4', label: 'gold-4' },
- { value: 'gold-5', label: 'gold-5' },
- { value: 'gold-6', label: 'gold-6' },
- { value: 'gold-7', label: 'gold-7' },
- { value: 'gold-8', label: 'gold-8' },
- { value: 'gold-9', label: 'gold-9' },
- { value: 'gold-10', label: 'gold-10' }
- ]
- },
- {
- value: 'SunriseYellow',
- label: '鏃ュ嚭',
- children: [
- { value: 'yellow-1', label: 'yellow-1' },
- { value: 'yellow-2', label: 'yellow-2' },
- { value: 'yellow-3', label: 'yellow-3' },
- { value: 'yellow-4', label: 'yellow-4' },
- { value: 'yellow-5', label: 'yellow-5' },
- { value: 'yellow-6', label: 'yellow-6' },
- { value: 'yellow-7', label: 'yellow-7' },
- { value: 'yellow-8', label: 'yellow-8' },
- { value: 'yellow-9', label: 'yellow-9' },
- { value: 'yellow-10', label: 'yellow-10' }
- ]
- },
- {
- value: 'Lime',
- label: '闈掓煚',
- children: [
- { value: 'lime-1', label: 'lime-1' },
- { value: 'lime-2', label: 'lime-2' },
- { value: 'lime-3', label: 'lime-3' },
- { value: 'lime-4', label: 'lime-4' },
- { value: 'lime-5', label: 'lime-5' },
- { value: 'lime-6', label: 'lime-6' },
- { value: 'lime-7', label: 'lime-7' },
- { value: 'lime-8', label: 'lime-8' },
- { value: 'lime-9', label: 'lime-9' },
- { value: 'lime-10', label: 'lime-10' }
- ]
- },
- {
- value: 'PolarGreen',
- label: '鏋佸厜缁�',
- children: [
- { value: 'green-1', label: 'green-1' },
- { value: 'green-2', label: 'green-2' },
- { value: 'green-3', label: 'green-3' },
- { value: 'green-4', label: 'green-4' },
- { value: 'green-5', label: 'green-5' },
- { value: 'green-6', label: 'green-6' },
- { value: 'green-7', label: 'green-7' },
- { value: 'green-8', label: 'green-8' },
- { value: 'green-9', label: 'green-9' },
- { value: 'green-10', label: 'green-10' }
- ]
- },
- {
- value: 'Cyan',
- label: '鏄庨潚',
- children: [
- { value: 'cyan-1', label: 'cyan-1' },
- { value: 'cyan-2', label: 'cyan-2' },
- { value: 'cyan-3', label: 'cyan-3' },
- { value: 'cyan-4', label: 'cyan-4' },
- { value: 'cyan-5', label: 'cyan-5' },
- { value: 'cyan-6', label: 'cyan-6' },
- { value: 'cyan-7', label: 'cyan-7' },
- { value: 'cyan-8', label: 'cyan-8' },
- { value: 'cyan-9', label: 'cyan-9' },
- { value: 'cyan-10', label: 'cyan-10' }
- ]
- },
- {
- value: 'DaybreakBlue',
- label: '鎷傛檽钃�',
- children: [
- { value: 'blue-1', label: 'blue-1' },
- { value: 'blue-2', label: 'blue-2' },
- { value: 'blue-3', label: 'blue-3' },
- { value: 'blue-4', label: 'blue-4' },
- { value: 'blue-5', label: 'blue-5' },
- { value: 'blue-6', label: 'blue-6' },
- { value: 'blue-7', label: 'blue-7' },
- { value: 'blue-8', label: 'blue-8' },
- { value: 'blue-9', label: 'blue-9' },
- { value: 'blue-10', label: 'blue-10' }
- ]
- },
- {
- value: 'GeekBlue',
- label: '鏋佸钃�',
- children: [
- { value: 'geekblue-1', label: 'geekblue-1' },
- { value: 'geekblue-2', label: 'geekblue-2' },
- { value: 'geekblue-3', label: 'geekblue-3' },
- { value: 'geekblue-4', label: 'geekblue-4' },
- { value: 'geekblue-5', label: 'geekblue-5' },
- { value: 'geekblue-6', label: 'geekblue-6' },
- { value: 'geekblue-7', label: 'geekblue-7' },
- { value: 'geekblue-8', label: 'geekblue-8' },
- { value: 'geekblue-9', label: 'geekblue-9' },
- { value: 'geekblue-10', label: 'geekblue-10' }
- ]
- },
- {
- value: 'GoldenPurple',
- label: '閰辩传',
- children: [
- { value: 'purple-1', label: 'purple-1' },
- { value: 'purple-2', label: 'purple-2' },
- { value: 'purple-3', label: 'purple-3' },
- { value: 'purple-4', label: 'purple-4' },
- { value: 'purple-5', label: 'purple-5' },
- { value: 'purple-6', label: 'purple-6' },
- { value: 'purple-7', label: 'purple-7' },
- { value: 'purple-8', label: 'purple-8' },
- { value: 'purple-9', label: 'purple-9' },
- { value: 'purple-10', label: 'purple-10' }
- ]
- },
- {
- value: 'Magenta',
- label: '娉曞紡娲嬬孩',
- children: [
- { value: 'magenta-1', label: 'magenta-1' },
- { value: 'magenta-2', label: 'magenta-2' },
- { value: 'magenta-3', label: 'magenta-3' },
- { value: 'magenta-4', label: 'magenta-4' },
- { value: 'magenta-5', label: 'magenta-5' },
- { value: 'magenta-6', label: 'magenta-6' },
- { value: 'magenta-7', label: 'magenta-7' },
- { value: 'magenta-8', label: 'magenta-8' },
- { value: 'magenta-9', label: 'magenta-9' },
- { value: 'magenta-10', label: 'magenta-10' }
- ]
- },
- {
- value: 'Gray',
- label: '涓�ц壊',
- children: [
- { value: 'gray-1', label: 'gray-1' },
- { value: 'gray-2', label: 'gray-2' },
- { value: 'gray-3', label: 'gray-3' },
- { value: 'gray-4', label: 'gray-4' },
- { value: 'gray-5', label: 'gray-5' },
- { value: 'gray-6', label: 'gray-6' },
- { value: 'gray-7', label: 'gray-7' },
- { value: 'gray-8', label: 'gray-8' },
- { value: 'gray-9', label: 'gray-9' },
- { value: 'gray-10', label: 'gray-10' }
- ]
- }
- ]
+ options: JSON.parse(JSON.stringify(minkeColorSystem)),
+ icons: minkeIconSystem.direction
}
UNSAFE_componentWillMount() {
@@ -247,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 => {
@@ -265,6 +71,9 @@
})
}
+ /**
+ * @description 瀛楁鍒囨崲
+ */
fieldChange = (value) => {
const { columns } = this.props
let item = columns.filter(col => col.field === value)[0]
@@ -280,12 +89,18 @@
}
}
+ /**
+ * @description 瀵规瘮鍊肩被鍨嬪垏鎹�
+ */
changeType = (val) => {
this.setState({
contrastType: val
})
}
+ /**
+ * @description 鏍囪绫诲瀷鍒囨崲
+ */
changeSignType = (val) => {
let _type = 'background '
if (val === 'icon' || val === 'font') {
@@ -311,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
})
@@ -326,7 +155,6 @@
}
handleConfirm = () => {
- // const { columns } = this.props
// 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
@@ -336,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: {
@@ -363,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: '璇烽�夋嫨瀛楁!'
}
]
})(
@@ -392,7 +210,7 @@
</Form.Item>
</Col>
<Col span={6}>
- <Form.Item label={'瀵规瘮绫诲瀷'}>
+ <Form.Item label="瀵规瘮绫诲瀷">
{getFieldDecorator('contrastType', {
initialValue: 'static'
})(
@@ -403,27 +221,42 @@
)}
</Form.Item>
</Col>
- {contrastType === 'static' ? <Col span={6}>
- <Form.Item label={'瀵规瘮鍊�'}>
- {getFieldDecorator('contrastValue', {
- initialValue: '',
+ <Col span={6}>
+ <Form.Item label="瀵规瘮鏂瑰紡">
+ {getFieldDecorator('match', {
+ initialValue: '=',
rules: [
{
required: true,
- message: this.props.dict['form.required.input'] + '瀵规瘮鍊�!'
+ message: '璇烽�夋嫨瀵规瘮鏂瑰紡!'
}
]
- })(originField.type === 'number' ? <InputNumber /> : <Input placeholder="" autoComplete="off" />)}
+ })(
+ <Select>
+ <Select.Option value="="> = </Select.Option>
+ <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="瀵规瘮鍊�">
+ {getFieldDecorator('contrastValue', {
+ 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: '璇烽�夋嫨瀵规瘮瀛楁!'
}
]
})(
@@ -431,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>
@@ -439,33 +272,13 @@
</Form.Item>
</Col> : null}
<Col span={6}>
- <Form.Item label={'瀵规瘮鏂瑰紡'}>
- {getFieldDecorator('match', {
- initialValue: '=',
- rules: [
- {
- required: true,
- message: this.props.dict['form.required.select'] + '瀵规瘮鏂瑰紡!'
- }
- ]
- })(
- <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>
- )}
- </Form.Item>
- </Col>
- <Col span={6}>
- <Form.Item label={'鏍囪鏂瑰紡'}>
+ <Form.Item label="鏍囪鏂瑰紡">
{getFieldDecorator('signType', {
initialValue: 'background',
rules: [
{
required: true,
- message: this.props.dict['form.required.select'] + '鏍囪鏂瑰紡!'
+ message: '璇烽�夋嫨鏍囪鏂瑰紡!'
}
]
})(
@@ -474,6 +287,7 @@
<Select.Option value="background">鍗曞厓鏍硷紙鑳屾櫙锛�</Select.Option>
<Select.Option value="line">琛�</Select.Option>
<Select.Option value="icon">鍥炬爣</Select.Option>
+ <Select.Option value="card">鍗＄墖</Select.Option>
</Select>
)}
</Form.Item>
@@ -491,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>
@@ -533,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