2020-02-21

king

2020-02-21 063b983daaf51a7f1e8677bde1e9c0e618866c91

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Button, Select, DatePicker, Input, InputNumber } from 'antd'
import moment from 'moment'
import ItemTypes from './itemtypes'
import './index.scss'
 
const { MonthPicker } = DatePicker
const { TextArea } = Input
 
const Card = ({ id, type, cols, card, moveCard, findCard, editCard, delCard, profileCard, hasDrop }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes[type], id, originalIndex },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const [, drop] = useDrop({
    accept: ItemTypes[type],
    canDrop: () => true,
    drop: (item) => {
      if (!item.hasOwnProperty('originalIndex')) {
        hasDrop(card)
      }
    },
    hover({ id: draggedId }) {
      if (!draggedId) return
      if (draggedId !== id) {
        const { index: overIndex } = findCard(id)
        moveCard(draggedId, overIndex)
      }
    },
  })
  const opacity = isDragging ? 0 : 1
 
  const edit = () => {
    editCard(id)
  }
  
  const del = () => {
    delCard(id)
  }
  
  const profile = () => {
    profileCard(id)
  }
 
  let _defaultValue = '' // 下拉搜索、时间范围类型，初始值需要预处理
 
  if (type === 'search' && (card.type === 'multiselect' || card.type === 'select' || card.type === 'link')) {
    if (card.initval) {
      let _option = card.options.filter(option => option.Value === card.initval)[0]
      if (_option) {
        _defaultValue = _option.Text || ''
      } else {
        _defaultValue = ''
      }
    } else if (card.setAll === 'true') {
      _defaultValue = '全部'
    }
  } else if (type === 'search' && card.type === 'daterange') {
    _defaultValue = [null, null]
    if (card.initval) {
      try {
        let _initval = JSON.parse(card.initval)
        _defaultValue = [moment().subtract(_initval[0], 'days'), moment().subtract(_initval[1], 'days')]
      } catch {
        _defaultValue = [null, null]
      }
    }
  }
 
  let labelCol = 'ant-col-sm-8'
  let wrapCol = 'ant-col-sm-16'
  if (card.type === 'textarea') {
    if (cols === '2') {
      labelCol = 'ant-col-sm-4'
      wrapCol = 'ant-col-sm-20'
    } else if (cols === '3') {
      labelCol = 'ant-col-cuslabel'
      wrapCol = 'ant-col-cuswrap'
    }
  }
 
  return (
    <div className="page-card" style={{ opacity: opacity}}>
      <div ref={node => drag(drop(node))}>
        {type === 'search' ?
          <div className="ant-row ant-form-item">
            <div className={'ant-col ant-form-item-label ant-col-xs-24 ' + labelCol}>
              <label title={card.label}>{card.label}</label>
            </div>
            <div className={'ant-col ant-form-item-control-wrapper ant-col-xs-24 ' + wrapCol}>
              {card.type === 'text' ?
                <Input style={{marginTop: '4px'}} defaultValue={card.initval} /> : null
              }
              {card.type === 'number' ?
                <InputNumber defaultValue={card.initval} precision={card.decimal} /> : null
              }
              {(card.type === 'multiselect' || card.type === 'select' || card.type === 'link') ?
                <Select defaultValue={_defaultValue}></Select> : null
              }
              {card.type === 'date' ?
                <DatePicker defaultValue={card.initval ? moment().subtract(card.initval, 'days') : null} /> : null
              }
              {card.type === 'datemonth' ?
                <MonthPicker defaultValue={card.initval ? moment().subtract(card.initval, 'month') : null} /> : null
              }
              {card.type === 'datetime' ?
                <DatePicker showTime defaultValue={card.initval ? moment().subtract(card.initval, 'days') : null} /> : null
              }
              {card.type === 'textarea' ?
                <TextArea defaultValue={card.initval} autosize={{ minRows: 2, maxRows: 6 }} /> : null
              }
              {card.type === 'funcvar' &&
                <Input style={{marginTop: '4px'}} defaultValue={card.linkfield} />
              }
              {card.type === 'fileupload' ?
                <Button>
                  <Icon type="upload" /> 点击上传
                </Button> : null
              }
              <div className="input-mask"></div>
            </div>
          </div> : null
        }
        {type === 'action' ?
          <Button
            className={'mk-btn mk-' + card.class}
            icon={card.icon}
            key={card.uuid}
          >
            {card.label}{card.position === 'grid' && <Icon type="table" />}
          </Button> : null
        }
      </div>
      <Icon className="edit" title="编辑" type="edit" onClick={edit} />
      {type === 'action' && card.btnType === 'confirm' && card.intertype === 'inner' && !card.innerFunc ?
        <Icon className="edit profile" title="校验规则" type="profile" onClick={profile} /> : null
      }
      {card.btnType !== 'confirm' && card.btnType !== 'cancel' && <Icon className="edit close" title="删除" type="close" onClick={del} />}
    </div>
  )
}
export default Card