1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| import React, { Component } from 'react'
| import PropTypes from 'prop-types'
| import { Icon, notification } from 'antd'
|
| import asyncComponent from '@/utils/asyncComponent'
| import Utils from '@/utils/utils.js'
| import './index.scss'
|
| const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
| class EdiFieldsTable extends Component {
| static propTpyes = {
| dict: PropTypes.object, // 字典项
| onChange: PropTypes.func // 数据变化
| }
|
| UNSAFE_componentWillMount () {
| let data = this.props['data-__meta'].initialValue || []
|
| this.setState({
| data: data.map(item => {
| item.uuid = item.uuid || item.key
| return item
| })
| })
| }
|
| state = {
| data: [],
| columns: [
| {
| title: '字段名',
| dataIndex: 'field',
| inputType: 'input',
| editable: true,
| width: '20%',
| },
| {
| title: '字体颜色',
| dataIndex: 'color',
| inputType: 'color',
| editable: true,
| width: '20%',
| render: (text, record) => {
| return <span style={{color: text}}>示例</span>
| }
| },
| {
| title: '字体大小',
| dataIndex: 'fontSize',
| inputType: 'number',
| min: 12,
| max: 50,
| editable: true,
| width: '20%',
| },
| {
| title: '对齐方式',
| dataIndex: 'align',
| inputType: 'select',
| editable: true,
| width: '20%',
| options: [
| {value: 'left', text: 'left'},
| {value: 'center', text: 'center'},
| {value: 'right', text: 'right'},
| {value: 'justify', text: 'justify'}
| ]
| }
| ]
| }
|
| handleAdd = () => {
| let _index = this.state.data.length + 1
| let item = {
| key: Utils.getuuid(),
| field: `field${_index}`,
| color: 'rgba(0, 0, 0, 0.85)',
| align: 'left',
| fontSize: 14,
| }
|
| item.uuid = item.key
|
| while (this.state.data.filter(cell => cell.field === item.field).length > 0) {
| _index++
| item.field = `field${_index}`
| }
|
| let data = [...this.state.data, item]
|
| this.setState({ data }, () => {
| this.props.onChange(data)
| })
| }
|
| changeData = (data) => {
| let fields = data.map(cell => cell.field)
| fields = Array.from(new Set(fields))
| if (data.length > 1 && data.length > fields.length) {
| notification.warning({
| top: 92,
| message: '字段名不可重复！',
| duration: 5
| })
| return
| }
| Array.from(new Set(fields))
| this.setState({ data }, () => {
| this.props.onChange(data)
| })
| }
|
| render() {
| const { data, columns } = this.state
|
| return (
| <div className="modal-card-field-table">
| {data.length < 3 ? <Icon className="add-row" type="plus" onClick={this.handleAdd} /> : null}
| <EditTable actions={['edit', 'move', 'del']} data={data} columns={columns} onChange={this.changeData}/>
| </div>
| )
| }
| }
|
| export default EdiFieldsTable
|
|
