From b55ad726293330d4e30d589e73a3d49a1b363cbb Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 05 三月 2020 09:27:24 +0800
Subject: [PATCH] 2020-03-05
---
src/components/tabview/index.jsx | 2
src/views/printTemplate/dragelement/itemtypes.js | 8 +
src/tabviews/formtab/index.jsx | 9
src/views/printTemplate/dragelement/card.jsx | 158 ++++++++++++++++++++++
src/views/printTemplate/index.jsx | 45 ++++++
src/views/printTemplate/index.scss | 59 ++++++++
src/views/printTemplate/dragelement/index.scss | 13 +
src/tabviews/commontable/index.jsx | 3
src/tabviews/managetable/index.jsx | 3
src/views/printTemplate/dragelement/index.jsx | 45 ++++++
src/views/printTemplate/dragelement/source.jsx | 15 ++
src/tabviews/tableshare/actionList/index.jsx | 8
12 files changed, 354 insertions(+), 14 deletions(-)
diff --git a/src/components/tabview/index.jsx b/src/components/tabview/index.jsx
index abace19..8dbe85e 100644
--- a/src/components/tabview/index.jsx
+++ b/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 {
diff --git a/src/tabviews/commontable/index.jsx b/src/tabviews/commontable/index.jsx
index b54d89d..526ae53 100644
--- a/src/tabviews/commontable/index.jsx
+++ b/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>
)
}
diff --git a/src/tabviews/formtab/index.jsx b/src/tabviews/formtab/index.jsx
index 0e02983..dcafbe6 100644
--- a/src/tabviews/formtab/index.jsx
+++ b/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}
diff --git a/src/tabviews/managetable/index.jsx b/src/tabviews/managetable/index.jsx
index 6dbb816..a45b20e 100644
--- a/src/tabviews/managetable/index.jsx
+++ b/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>
)
}
diff --git a/src/tabviews/tableshare/actionList/index.jsx b/src/tabviews/tableshare/actionList/index.jsx
index 8e2e4a1..dbb9143 100644
--- a/src/tabviews/tableshare/actionList/index.jsx
+++ b/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
}
}
diff --git a/src/views/printTemplate/dragelement/card.jsx b/src/views/printTemplate/dragelement/card.jsx
new file mode 100644
index 0000000..5419ea0
--- /dev/null
+++ b/src/views/printTemplate/dragelement/card.jsx
@@ -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
diff --git a/src/views/printTemplate/dragelement/index.jsx b/src/views/printTemplate/dragelement/index.jsx
new file mode 100644
index 0000000..291bb24
--- /dev/null
+++ b/src/views/printTemplate/dragelement/index.jsx
@@ -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
diff --git a/src/views/printTemplate/dragelement/index.scss b/src/views/printTemplate/dragelement/index.scss
new file mode 100644
index 0000000..90174bc
--- /dev/null
+++ b/src/views/printTemplate/dragelement/index.scss
@@ -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;
+ }
+}
diff --git a/src/views/printTemplate/dragelement/itemtypes.js b/src/views/printTemplate/dragelement/itemtypes.js
new file mode 100644
index 0000000..9ea1f2c
--- /dev/null
+++ b/src/views/printTemplate/dragelement/itemtypes.js
@@ -0,0 +1,8 @@
+export default {
+ CARD: 'card',
+ form: 'form',
+ search: 'search',
+ action: 'action',
+ columns: 'columns',
+ tab: 'tab'
+}
diff --git a/src/views/printTemplate/dragelement/source.jsx b/src/views/printTemplate/dragelement/source.jsx
new file mode 100644
index 0000000..2341f41
--- /dev/null
+++ b/src/views/printTemplate/dragelement/source.jsx
@@ -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
\ No newline at end of file
diff --git a/src/views/printTemplate/index.jsx b/src/views/printTemplate/index.jsx
index 323829e..69f6f17 100644
--- a/src/views/printTemplate/index.jsx
+++ b/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>
)
}
diff --git a/src/views/printTemplate/index.scss b/src/views/printTemplate/index.scss
index 3083513..a742905 100644
--- a/src/views/printTemplate/index.scss
+++ b/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;
+ }
+ }
+ }
}
\ No newline at end of file
--
Gitblit v1.8.0