2024-07-01

king

2024-07-01 866db6d8afa6980fd485570acda6b5fcebda4da3

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 from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Button, Popover } from 'antd'
import { CopyOutlined, EditOutlined, FontColorsOutlined, CloseOutlined, ProfileOutlined, WarningOutlined, DisconnectOutlined } from '@ant-design/icons'
 
import MkIcon from '@/components/mk-icon'
import { resetStyle } from '@/utils/utils-custom.js'
import './index.scss'
 
const Card = ({ id, card, type, moveCard, findCard, editCard, delCard, copyCard, changeStyle, profileCard, doubleClickCard }) => {
  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 || draggedId === id) return
 
      const { index: originIndex } = findCard(draggedId)
      if (originIndex === -1) return
 
      const { index: overIndex } = findCard(id)
      moveCard(draggedId, overIndex)
    },
  })
  const opacity = isDragging ? 0.5 : 1
 
  let hasProfile = false
  let forbidSql = false
  if (['pop', 'prompt', 'exec'].includes(card.OpenType)) {
    hasProfile = true
    if (card.verify && card.verify.default === 'false') {
      forbidSql = true
    }
  } else if (card.OpenType === 'excelIn' || card.OpenType === 'excelOut') {
    hasProfile = true
    if (card.verify && card.verify.default === 'false') {
      forbidSql = true
    }
  } else if (card.funcType === 'print') {
    hasProfile = true
  } else if (card.funcType === 'megvii') {
    hasProfile = true
  } else if (card.payMode === 'system') {
    hasProfile = true
  }
 
  let btnElement = null
  let _style = resetStyle(card.style)
  let _class = ''
  let show = card.show
  if (type === 'datacard' || type === 'dualdatacard') {
    _style = null
    _class = 'swiper swiper-' + card.color
    show = 'button'
  }
  if (card.hidden === 'true') {
    _class += ' mk-hidden'
  }
  let warning = null
  if (card.OpenType === 'innerpage' && !card.pageTemplate) {
    warning = <WarningOutlined style={{color: 'orange', marginLeft: '5px'}}/>
  } else if (forbidSql) {
    warning = <DisconnectOutlined className="mk-disconnect"/>
  }
 
  if (show === 'icon') {
    btnElement = (
      <Button
        type="link"
        style={_style}
        className={_class}
        onDoubleClick={() => doubleClickCard(id)}
      >{card.icon ? <MkIcon type={card.icon}/> : card.label}{warning}</Button>
    )
  } else if (show === 'link') {
    btnElement = (
      <Button
        type="link"
        style={_style}
        className={_class}
        onDoubleClick={() => doubleClickCard(id)}
      >{card.label}{card.icon ? <MkIcon type={card.icon}/> : null}{warning}</Button>
    )
  } else {
    btnElement = (
      <Button
        style={_style}
        className={_class}
        onDoubleClick={() => doubleClickCard(id)}
      >
        <MkIcon type={card.icon}/>{card.label}{warning}
      </Button>
    )
  }
 
  let updateTime = null
  if (card.updateTime && card.updateTime.indexOf(window.GLOB.curDate) > -1) {
    updateTime = card.updateTime.substr(11)
  }
 
  return (
    <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
      <div className="mk-popover-control">
        <EditOutlined className="edit" onClick={() => editCard(id)} />
        {!card.$fixed ? <CopyOutlined className="copy" onClick={() => copyCard(id)} /> : null}
        {!card.$fixed ? <CloseOutlined className="close" onClick={() => delCard(id)} /> : null}
        {type !== 'datacard' && type !== 'basetable' && !card.$fixed ? <FontColorsOutlined className="style" title="调整样式" onClick={() => changeStyle(id)}/> : ''}
        {hasProfile ? <ProfileOutlined className="profile" title="验证" onClick={() => profileCard(id)} /> : null}
        {updateTime}
      </div>
    } trigger="hover">
      <div className="page-card" style={{ opacity: opacity}}>
        <div ref={node => drag(drop(node))}>
          {btnElement}
        </div>
      </div>
    </Popover>
  )
}
export default Card