2020-11-10

king

2020-11-10 a9ac16fecc0cf9bc66dfaefe4e9b35fa3c722812

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
147
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Popover } from 'antd'
import moment from 'moment'
 
import demo1 from '@/assets/img/demo1.jpg'
import demo2 from '@/assets/img/demo2.jpg'
import demo3 from '@/assets/img/demo3.jpg'
import demo4 from '@/assets/img/demo4.jpg'
import demo5 from '@/assets/img/demo5.jpg'
import asyncComponent from '@/utils/asyncComponent'
 
import './index.scss'
 
const BarCode = asyncComponent(() => import('@/components/barcode'))
const QrCode = asyncComponent(() => import('@/components/qrcode'))
 
const Card = ({ id, cardIds, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'action', id, originalIndex },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const [, drop] = useDrop({
    accept: 'action',
    canDrop: () => true,
    drop({ id: draggedId }) {
      if (!draggedId) return
      if (!cardIds.includes(draggedId)) return
 
      if (draggedId !== id) {
        const { index: overIndex } = findCard(id)
        moveCard(draggedId, overIndex)
      }
    },
  })
 
  let _style = {opacity: isDragging ? 0 : 1}
  
  if (card.style) {
    _style = {...card.style, opacity: isDragging ? 0 : 1}
  }
 
  const getContent = () => {
    if (card.eleType === 'sequence') {
      return (
        <div className={'ant-mk-text'}>1</div>
      )
    } else if (card.eleType === 'text' || card.eleType === 'number') {
      let val = `${card.prefix || ''}${card.datatype === 'static' ? (card.value || '') : (card.field || '')}${card.postfix || ''}`
      return (
        <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
      )
    } else if (card.eleType === 'link') {
      let val = card.label || card.value || card.field
      return (
        <div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
      )
    } else if (card.eleType === 'icon') {
      return (<Icon type={card.icon}/>)
    } else if (card.eleType === 'slider') {
      let val = card.value ? (card.value / card.maxValue) * 100 : 30
      return (
        <div className="ant-mk-slider">
          <div className="ant-mk-slider-rail"></div>
          <div className="ant-mk-slider-track" style={{width: `${val}%`, backgroundColor: card.color}}></div>
          <div className="ant-mk-slider-handle" style={{left: `${val}%`, borderColor: card.color}}></div>
        </div>
      )
    } else if (card.eleType === 'picture') {
      let _imagestyle = {}
 
      if (card.url) {
        _imagestyle = {backgroundImage: `url('${card.url}')`}
      } else {
        let index = card.uuid.match(/\d{1}/g)
        index = index[index.length - 1] % 5
        let demos = [demo1, demo2, demo3, demo4, demo5]
 
        _imagestyle = {backgroundImage: `url('${demos[index]}')`}
      }
 
      if (card.style && card.style.borderRadius) {
        _imagestyle.borderRadius = card.style.borderRadius
      }
 
      if (card.lenWidRadio === '16:9') {
        _imagestyle.paddingTop = '56.25%'
      } else if (card.lenWidRadio === '3:2') {
        _imagestyle.paddingTop = '66.67%'
      } else if (card.lenWidRadio === '4:3') {
        _imagestyle.paddingTop = '75%'
      } else {
        _imagestyle.paddingTop = '100%'
      }
 
      return (
        <div className="ant-mk-picture" style={_imagestyle}></div>
      )
    } else if (card.eleType === 'splitline') {
      let _borderWidth = card.borderWidth === undefined ? 1 : card.borderWidth
      return (
        <div style={{paddingTop: '1px'}}>
          <div className="ant-mk-splitline" style={{borderColor: card.color, borderWidth: _borderWidth}}></div>
        </div>
      )
    } else if (card.eleType === 'barcode') {
      return (
        <div style={{height: card.innerHeight || 25}}>
          <BarCode card={card} value={card.value || 'mksoft'}/>
        </div>
      )
    } else if (card.eleType === 'qrcode') {
      return (
        <div style={{minHeight: card.qrWidth || 50}}>
          <QrCode card={card} value={card.value || 'mksoft'}/>
        </div>
      )
    } else if (card.eleType === 'currentDate') {
      return (
        <div className="ant-mk-date">
          {`${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}`}
        </div>
      )
    }
  }
 
  return (
    <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
      <div className="mk-popover-control">
        <Icon className="edit" title="编辑" type="edit" onClick={() => editCard(id)} />
        <Icon className="copy" title="复制" type="copy" onClick={() => copyCard(id)} />
        <Icon className="close" title="删除" type="close" onClick={() => delCard(id)} />
        <Icon className="style" title="调整样式" onClick={() => changeStyle(id)} type="font-colors" />
      </div>
    } trigger="hover">
      <div ref={node => drag(drop(node))} className={'ant-col card-cell ant-col-' + card.width}>
        <div style={_style}>
          {getContent()}
        </div>
      </div>
    </Popover>
  )
}
export default Card