2020-06-18

king

2020-06-18 f59a500d24291d7f54b71dcca939a2a23dedca7c

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
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Select, DatePicker, Input, InputNumber, Button } from 'antd'
import moment from 'moment'
import ItemTypes from './itemtypes'
import './index.scss'
 
const { MonthPicker } = DatePicker
const { TextArea } = Input
 
const Card = ({ id, card, cols, moveCard, findCard, editCard, closeCard, copyCard, hasDrop }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.form, id, originalIndex },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const [, drop] = useDrop({
    accept: ItemTypes.form,
    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 close = () => {
    closeCard(id)
  }
 
  const copy = () => {
    copyCard(id)
  }
 
  let selectval = ''
  if (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) {
        selectval = _option.Text || ''
      } else {
        selectval = ''
      }
    } else if (card.setAll === 'true') {
      selectval = '全部'
    }
  }
  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'
    } else if (cols === '4') {
      labelCol = 'ant-col-sm-2'
      wrapCol = 'ant-col-sm-22'
    }
  }
 
  return (
    <div className="page-card" style={{ opacity: opacity}}>
      <div ref={node => drag(drop(node))}>
        {<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>
            <Icon className="edit" type="edit" onClick={edit} />
            <Icon className="edit close" type="close" onClick={close} />
            <Icon className="edit copy" type="copy" onClick={copy} />
          </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} />
            }
            {card.type === 'number' &&
              <InputNumber defaultValue={card.initval} precision={card.decimal} />
            }
            {(card.type === 'multiselect' || card.type === 'select' || card.type === 'link') &&
              <Select defaultValue={selectval}></Select>
            }
            {card.type === 'date' &&
              <DatePicker defaultValue={card.initval ? moment().subtract(card.initval, 'days') : 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} />
            }
            {card.type === 'textarea' &&
              <TextArea defaultValue={card.initval} autosize={{ minRows: 2, maxRows: 6 }} />
            }
            {card.type === 'fileupload' &&
              <Button style={{marginTop: '3px'}}>
                <Icon type="upload" /> 点击上传
              </Button>
            }
            {card.type === 'funcvar' &&
              <Input style={{marginTop: '4px'}} defaultValue={card.linkfield} />
            }
            {card.type === 'linkMain' &&
              <Input style={{marginTop: '4px'}} />
            }
            <div className="input-mask"></div>
          </div>
        </div>}
      </div>
      {/* <Icon className="edit" type="edit" onClick={edit} />
      <Icon className="edit close" type="close" onClick={close} />
      <Icon className="edit copy" type="copy" onClick={copy} /> */}
    </div>
  )
}
export default Card