2020-11-10

king

2020-11-10 a9ac16fecc0cf9bc66dfaefe4e9b35fa3c722812

 src/menu/components/card/cardcellcomponent/dragaction/card.jsx

@@ -1,15 +1,21 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Popover } from 'antd'
import './index.scss'
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'

const Card = ({ id, cardIds, card, moveCard, findCard, editCard, delCard, changeStyle }) => {
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 },
@@ -38,9 +44,20 @@
  }

  const getContent = () => {
    if (card.eleType === 'text' || card.eleType === 'number') {
    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 val
      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') {
@@ -65,8 +82,8 @@
        _imagestyle = {backgroundImage: `url('${demos[index]}')`}
      }

      if (card.radius === 'true') {
        _imagestyle.borderRadius = '50%'
      if (card.style && card.style.borderRadius) {
        _imagestyle.borderRadius = card.style.borderRadius
      }

      if (card.lenWidRadio === '16:9') {
@@ -83,8 +100,29 @@
        <div className="ant-mk-picture" style={_imagestyle}></div>
      )
    } else if (card.eleType === 'splitline') {
      let _borderWidth = card.borderWidth === undefined ? 1 : card.borderWidth
      return (
        <div className="ant-mk-splitline" style={{backgroundColor: card.color}}></div>
        <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>
      )
    }
  }
@@ -93,6 +131,7 @@
    <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>