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
| import React, {Component} from 'react'
| import PropTypes from 'prop-types'
| import { fromJS } from 'immutable'
|
| import MkIcon from '@/components/mk-icon'
| import Utils from '@/utils/utils.js'
| import ColumnForm from './columnform'
| import asyncComponent from '@/utils/asyncComponent'
| // import './index.scss'
|
| const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
| class CardMenus extends Component {
| static propTpyes = {
| appType: PropTypes.string,
| menulist: PropTypes.array,
| menus: PropTypes.array,
| update: PropTypes.func
| }
|
| state = {
| columns: [
| {
| title: '标识',
| dataIndex: 'sign',
| inputType: 'input',
| editable: true,
| unique: true,
| required: false,
| width: '20%'
| },
| {
| title: '颜色',
| dataIndex: 'color',
| inputType: 'color',
| editable: true,
| required: true,
| width: '20%',
| render: (text, record) => <span style={{display: 'inline-block', width: '40px', height: '25px', background: text}}></span>
| },
| {
| title: '图标',
| dataIndex: 'icon',
| inputType: 'icon',
| editable: true,
| required: false,
| width: '20%',
| render: (text, record) => record.icon ? <MkIcon style={{fontSize: '24px'}} type={record.icon}/> : ''
| },
| {
| title: '连接线',
| dataIndex: 'linecolor',
| inputType: 'color',
| editable: true,
| required: false,
| allowClear: true,
| width: '20%',
| render: (text, record) => text ? <span style={{display: 'inline-block', width: '40px', height: '25px', background: text}}></span> : null
| },
| {
| title: '备注',
| dataIndex: 'remark',
| inputType: 'input',
| editable: true,
| required: false,
| width: '20%'
| }
| ]
| }
|
| UNSAFE_componentWillMount() {
| const { menus } = this.props
|
| this.setState({
| menus: fromJS(menus).toJS()
| })
| }
|
| columnChange = (values) => {
| const { menus } = this.state
| values.uuid = Utils.getuuid()
| let _menus = [...menus, values]
|
| this.setState({menus: _menus})
| this.props.update(_menus)
| }
|
| changeColumns = (columns) => {
| this.setState({menus: columns})
| this.props.update(columns)
| }
|
| render() {
| const { menus, columns } = this.state
|
| return (
| <div style={{minHeight: '250px'}}>
| <ColumnForm menus={menus} columnChange={this.columnChange}/>
| <p style={{position: 'absolute', fontSize: '12px', transform: 'translate(0px, -20px)'}}>连接线在横向时间轴中有效</p>
| <EditTable actions={['edit', 'move', 'copy', 'del']} type={'timenodes'} data={menus} columns={columns} onChange={this.changeColumns}/>
| </div>
| )
| }
| }
|
| export default CardMenus
|
|
