2020-03-05

king

2020-03-05 b55ad726293330d4e30d589e73a3d49a1b363cbb

2020-03-05

 src/components/tabview/index.jsx

@@ -89,7 +89,7 @@
    } else if (view.type === 'TabForm') {
      return (<Comps.TabForm MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>)
    } else if (view.type === 'FormTab') {
      return (<Comps.FormTab MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} menuType={view.param.menuType} key={view.MenuID} param={view.param}/>)
      return (<Comps.FormTab MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>)
    } else if (view.type === 'iframe') {
      return (<Comps.Iframe key={view.MenuID} title={view.MenuName} MenuName={view.MenuName} url={service + view.LinkUrl}/>)
    } else {

 src/tabviews/commontable/index.jsx

@@ -755,6 +755,7 @@
        view: 'formtab',
        tabBtn: btn,
        tabParam: {
          menuType: 'main',
          btn: btn,
          data: data[0] || null,
          primaryId: btn.Ot !== 'notRequired' ? _primaryId : '',
@@ -1001,7 +1002,7 @@
          </Modal>
          {viewlost ? <NotFount msg={this.state.lostmsg} /> : null}
        </div> : null}
        {view === 'formtab' ? <FormTab menuType="main" MenuID={this.state.tabBtn.uuid} param={this.state.tabParam} refresh={this.refreshbyformtab}/> : null}
        {view === 'formtab' ? <FormTab MenuID={this.state.tabBtn.uuid} param={this.state.tabParam} refresh={this.refreshbyformtab}/> : null}
      </div>
    )
  }

 src/tabviews/formtab/index.jsx

@@ -22,7 +22,6 @@

class NormalTable extends Component {
  static propTpyes = {
    menuType: PropTypes.any,        // 菜单类型，普通菜单或HS
    // MenuNo: PropTypes.string,    // 菜单参数
    // MenuName: PropTypes.string,  // 菜单参数
    MenuID: PropTypes.string,       // 菜单Id
@@ -104,7 +103,7 @@
      _arrField = _arrField.join(',')

      // 权限过滤
      if (this.props.menuType !== 'HS') {
      if (this.props.param.menuType !== 'HS') {
        config.action = config.action.filter(item => permAction[item.uuid])
      }
      // config.tabgroups.forEach(group => {
@@ -413,7 +412,7 @@
    if (setting.interType === 'inner') {
      param.func = setting.innerFunc
    } else {
      if (this.props.menuType === 'HS') {
      if (this.props.param.menuType === 'HS') {
        if (setting.sysInterface === 'true' && options.cloudServiceApi) {
          param.rduri = options.cloudServiceApi
        } else if (setting.sysInterface !== 'true') {
@@ -609,7 +608,7 @@
        }
        {hasform ?
          <FormAction
            menuType={this.props.menuType}
            menuType={this.props.param.menuType}
            logcolumns={[]}
            setting={setting}
            actions={actions}
@@ -637,7 +636,7 @@
                      {_tab.type === 'SubTable' ?
                        <SubTable
                          Tab={_tab}
                          menuType={this.props.menuType}
                          menuType={this.props.param.menuType}
                          MenuID={_tab.linkTab}
                          SupMenuID={this.props.MenuID}
                          refreshtabs={this.state.refreshtabs}

 src/tabviews/managetable/index.jsx

@@ -741,6 +741,7 @@
        view: 'formtab',
        tabBtn: btn,
        tabParam: {
          menuType: 'HS',
          btn: btn,
          data: data[0] || null,
          primaryId: btn.Ot !== 'notRequired' ? _primaryId : '',
@@ -987,7 +988,7 @@
          </Modal>
          {viewlost ? <NotFount msg={this.state.lostmsg} /> : null}
        </div> : null}
        {view === 'formtab' ? <FormTab menuType="HS" MenuID={this.state.tabBtn.uuid} param={this.state.tabParam} refresh={this.refreshbyformtab}/> : null}
        {view === 'formtab' ? <FormTab MenuID={this.state.tabBtn.uuid} param={this.state.tabParam} refresh={this.refreshbyformtab}/> : null}
      </div>
    )
  }

 src/tabviews/tableshare/actionList/index.jsx

@@ -643,15 +643,15 @@

      if (this.props.menuType === 'HS') {
        if (btn.sysInterface === 'true' && options.cloudServiceApi) {
          param.rduri = options.cloudServiceApi
          res.rduri = options.cloudServiceApi
        } else if (btn.sysInterface !== 'true') {
          param.rduri = btn.interface
          res.rduri = btn.interface
        }
      } else {
        if (btn.sysInterface === 'true') {
          param.rduri = window.GLOB.mainSystemApi || window.GLOB.subSystemApi
          res.rduri = window.GLOB.mainSystemApi || window.GLOB.subSystemApi
        } else {
          param.rduri = btn.interface
          res.rduri = btn.interface
        }
      }


 src/views/printTemplate/dragelement/card.jsx

New file
@@ -0,0 +1,158 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Button, Select, DatePicker, Input } from 'antd'
import moment from 'moment'
import ItemTypes from './itemtypes'
import './index.scss'

const { MonthPicker, WeekPicker, RangePicker } = DatePicker
// const { Paragraph } = Typography

const Card = ({ id, type, card, moveCard, findCard, editCard, delCard, copyCard, profileCard, hasDrop, showfield }) => {
  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 copy = () => {
    copyCard(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 hasProfile = false
  if (type === 'action') {
    if (['pop', 'prompt', 'exec'].includes(card.OpenType) && card.intertype === 'inner' && !card.innerFunc) {
      hasProfile = true
    } else if (card.OpenType === 'excelIn' || card.OpenType === 'excelOut') {
      hasProfile = true
    }
  }

  return (
    <div className="page-card" style={type === 'columns' ? { flex: card.Width, opacity: opacity} : { 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">
              <label title={card.label}>{card.label}</label>
            </div>
            <div className="ant-col ant-form-item-control-wrapper">
              {card.type === 'text' ?
                <Input style={{marginTop: '4px'}} defaultValue={card.initval} /> : 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 === 'dateweek' ?
                <WeekPicker defaultValue={card.initval ? moment().subtract(card.initval * 7, 'days') : null} /> : null
              }
              {card.type === 'datemonth' ?
                <MonthPicker defaultValue={card.initval ? moment().subtract(card.initval, 'month') : null} /> : null
              }
              {card.type === 'daterange' ?
                <RangePicker
                  className="data-range"
                  placeholder={['开始日期', '结束日期']}
                  renderExtraFooter={() => 'extra footer'}
                  defaultValue={_defaultValue}
                /> : 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
        }
        {type === 'columns' ?
          <span className="ant-table-header-column">
            <div className="ant-table-column-sorters" title={card.label} style={{textAlign: card.Align}}>
              <span className="ant-table-column-title">{card.label}</span>
              {card.IsSort === 'true' ?
                <span className="ant-table-column-sorter">
                  <Icon type="caret-up" />
                  <Icon type="caret-down" />
                </span> : null
              }
            </div>
            {showfield ?
              <div className="ant-table-column-fields">
                <span className="ant-table-column-title">{card.type === 'colspan' ? card.subfield : card.field}</span>
              </div> : null
            }
          </span> : null
        }
      </div>
      <Icon className="edit" title="编辑" type="edit" onClick={edit} />
      <Icon className="edit close" title="删除" type="close" onClick={del} />
      {type === 'action' ? <Icon className="edit copy" title="复制" type="copy" onClick={copy} /> : null}
      {hasProfile ? <Icon className="edit profile" title="校验规则" type="profile" onClick={profile} /> : null}
    </div>
  )
}
export default Card

 src/views/printTemplate/dragelement/index.jsx

New file
@@ -0,0 +1,45 @@
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
import { is, fromJS } from 'immutable'
import update from 'immutability-helper'
import { Col, Icon } from 'antd'
import Utils from '@/utils/utils.js'
import Card from './card'
import ItemTypes from './itemtypes'
import './index.scss'

const Container = ({list, type }) => {
  
  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
    const { card, index } = findCard(id)
    const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
    handleList(type, _cards)
  }

  if (!is(fromJS(cards), fromJS(list))) {
    setCards(list)
  }
  
  const findCard = id => {
    const card = cards.filter(c => `${c.uuid}` === id)[0]
    return {
      card,
      index: cards.indexOf(card),
    }
  }
 
  const [, drop] = useDrop({
    accept: ItemTypes[type],
    drop(item) {
      
    }
  })

  return (
    <div ref={drop} className="ant-row">
      
    </div>
  )
}
export default Container

 src/views/printTemplate/dragelement/index.scss

New file
@@ -0,0 +1,13 @@
.print-source-item {
  display: block;
  box-shadow: 0px 0px 2px #757575;
  padding: 6px 15px;
  background-color: white;
  margin: 0px 0px 20px;
  cursor: move;
  border-radius: 4px;

  .anticon {
    margin-left: 10px;
  }
}

 src/views/printTemplate/dragelement/itemtypes.js

New file
@@ -0,0 +1,8 @@
export default {
  CARD: 'card',
  form: 'form',
  search: 'search',
  action: 'action',
  columns: 'columns',
  tab: 'tab'
}

 src/views/printTemplate/dragelement/source.jsx

New file
@@ -0,0 +1,15 @@
import React from 'react'
import { useDrag } from 'react-dnd'
import { Icon } from 'antd'
import './index.scss'

const SourceElement = ({content}) => {
  const [, drag] = useDrag({ item: content })
  return (
    <div ref={drag} className="print-source-item">
      {content.label}
      <Icon type={content.icon} />
    </div>
  )
}
export default SourceElement

 src/views/printTemplate/index.jsx

@@ -1,5 +1,36 @@
import React, {Component} from 'react'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Card } from 'antd'
import SourceElement from './dragelement/source'
import './index.scss'

const printItems = [
  {
    type: 'print',
    label: '文本',
    subType: 'text',
    icon: 'file-text'
  },
  {
    type: 'print',
    label: '条形码',
    subType: 'barcode',
    icon: 'barcode'
  },
  {
    type: 'print',
    label: '二维码',
    subType: 'qrcode',
    icon: 'qrcode'
  },
  {
    type: 'print',
    label: '图片',
    subType: 'picture',
    icon: 'file-image'
  }
]

class PrintTemplate extends Component {
  state = {
@@ -22,7 +53,21 @@
  render () {
    return (
      <div className="print-template">
        <DndProvider backend={HTML5Backend}>
          <header className="print-header-container ant-menu-dark">模板制作</header>
          <aside className="tools">
            <Card title="工具栏">
              {printItems.map((item, index) => {
                return (<SourceElement key={index} content={item}/>)
              })}
            </Card>
          </aside>
          <aside className="setting">
            <Card title="状态栏">

            </Card>
          </aside>
        </DndProvider>
      </div>
    )
  }

 src/views/printTemplate/index.scss

@@ -1,5 +1,60 @@
.print-template {
  display: flex;
  flex: auto;
  overflow-x: hidden;
  min-height: 100%;
  padding: 48px 250px 0px 240px;

  .print-header-container {
    position: fixed;
    z-index: 1060;
    left: 0;
    top: 0;
    font-weight: bold!important;
    font-size: 20px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    background: #001529;
  }
  .tools {
    width: 240px;
    position: fixed;
    top: 47px;
    left: -1px;
    bottom: 0px;
    .ant-card {
      height: 100%;
      .ant-card-head {
        background: #1890ff;
        color: #ffffff;
      }
      .ant-card-head-title {
        padding: 10px 0;
      }
      .ant-card-body {
        padding: 24px 12px;
      }
    }
  }
  .setting {
    width: 250px;
    position: fixed;
    top: 47px;
    right: -1px;
    bottom: 0px;
    .ant-card {
      height: 100%;
      .ant-card-head {
        background: #1890ff;
        color: #ffffff;
      }
      .ant-card-head-title {
        padding: 10px 0;
      }
      .ant-card-body {
        padding: 24px 12px;
      }
    }
  }
}