Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
W
WebPublic
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
前端开发小组
WebPublic
Commits
a4537f07
提交
a4537f07
authored
5月 26, 2020
作者:
钟是志
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
中医大评奖评优 奖状打印第一个版本
上级
5124493b
隐藏空白字符变更
内嵌
并排
正在显示
7 个修改的文件
包含
548 行增加
和
3 行删除
+548
-3
DragSetting.js
zyd_private/DragAndPrint/DragSetting.js
+77
-3
DetailDom.js
zyd_private/DragAndPrint/ViewPrint/DetailDom.js
+95
-0
defaultPhoto.png
zyd_private/DragAndPrint/ViewPrint/defaultPhoto.png
+0
-0
index.js
zyd_private/DragAndPrint/ViewPrint/index.js
+211
-0
index.js
zyd_private/DragAndPrint/index.js
+88
-0
index.less
zyd_private/DragAndPrint/index.less
+42
-0
services.js
zyd_private/DragAndPrint/services.js
+35
-0
没有找到文件。
zyd_private/DragAndPrint/DragSetting.js
浏览文件 @
a4537f07
import
React
,
{
Fragment
,
Component
}
from
'react'
;
import
React
,
{
Fragment
,
Component
}
from
'react'
;
import
PrintSetting
from
'@/webPublic/zyd_private/DragAndPrint
'
;
import
styles
from
'./index.less
'
;
export
default
class
Index
extends
Component
{
export
default
class
Index
extends
Component
{
constructor
(
props
)
{
constructor
(
props
)
{
...
@@ -7,9 +7,83 @@ export default class Index extends Component {
...
@@ -7,9 +7,83 @@ export default class Index extends Component {
this
.
state
=
{};
this
.
state
=
{};
}
}
render
(){
dragEventList
=
()
=>
{
const
{
updateConfig
}
=
this
.
props
;
let
draggedRef
=
null
;
document
.
addEventListener
(
'dragstart'
,
function
(
event
)
{
// 保存拖动元素的引用(ref.)
draggedRef
=
event
.
target
;
// 使其半透明
event
.
target
.
style
.
opacity
=
0.5
;
},
false
);
document
.
addEventListener
(
'dragend'
,
function
(
event
)
{
// 重置透明度
event
.
target
.
style
.
opacity
=
''
;
},
false
);
/* 放下目标节点时触发事件 */
document
.
addEventListener
(
'dragover'
,
function
(
event
)
{
// 阻止默认动作
event
.
preventDefault
();
},
false
);
document
.
addEventListener
(
'drop'
,
function
(
event
)
{
// 阻止默认动作(如打开一些元素的链接)
event
.
preventDefault
();
// 将拖动的元素到所选择的放置目标节点中
if
(
event
.
target
.
id
===
'dropZone'
)
{
const
left
=
event
.
offsetX
;
if
(
left
>
(
event
.
target
.
width
-
draggedRef
.
offsetWidth
-
10
))
{
console
.
error
(
'拖拽到了图片区域外部,不能进行拖拽'
);
return
false
;
}
const
top
=
event
.
offsetY
;
updateConfig
({
id
:
draggedRef
.
id
.
replace
(
'dragKey-'
,
''
),
x
:
left
,
y
:
top
,
});
draggedRef
.
style
.
left
=
left
;
// `${left}px`;
draggedRef
.
style
.
top
=
top
;
// `${top}px`;
}
},
false
);
};
componentDidMount
()
{
this
.
dragEventList
();
}
render
()
{
const
{
backgroundUrl
,
configAll
:
{
config
}
}
=
this
.
props
;
return
(
return
(
<
PrintSetting
code
=
{
'award'
}
/
>
<
div
className
=
{
styles
.
outSideDiv
}
>
<
div
style
=
{{
padding
:
'12px'
,
}}
>
<
img
src
=
{
backgroundUrl
}
id
=
{
'dropZone'
}
draggable
=
{
false
}
className
=
{
styles
.
bgimage
}
alt
=
{
'背景图'
}
/
>
{
config
.
map
((
item
,
index
)
=>
{
return
(
<
div
draggable
=
{
true
}
className
=
{
styles
.
inSideItem
}
key
=
{
item
.
id
}
id
=
{
`dragKey-
${
item
.
id
}
`
}
style
=
{{
top
:
`
${
item
.
y
||
20
+
index
*
40
}
px`
,
left
:
`
${
item
.
x
||
20
}
px`
,
}}
>
{
item
.
title
}
<
/div
>
);
})}
<
/div
>
<
/div
>
);
);
}
}
...
...
zyd_private/DragAndPrint/ViewPrint/DetailDom.js
0 → 100644
浏览文件 @
a4537f07
import
React
from
'react'
;
import
JsBarcode
from
'jsbarcode'
;
import
styles
from
'../index.less'
;
/**
* -2 条形码
* -1 常量
* 0 文字
* 1 时间
* 2 照片
* */
const
normalTextRender
=
(
text
,
config
)
=>
{
if
(
!
text
)
{
return
null
;
}
const
style
=
{
fontSize
:
`
${
config
.
fieldFontSize
||
16
}
px`
,
// 默认 16px
fontFamily
:
`
${
config
.
fieldFont
||
'黑体'
}
`
,
// 默认黑体
};
return
<
span
style
=
{
style
}
>
{
text
}
<
/span>
;
};
class
BarCode
extends
React
.
Component
{
componentDidMount
()
{
this
.
toJsBarcode
();
}
toJsBarcode
()
{
// 调用 JsBarcode方法生成条形码
JsBarcode
(
this
.
barcode
,
this
.
props
.
value
||
'1234567890'
,
{
text
:
''
,
format
:
'CODE39'
,
displayValue
:
false
,
width
:
1.0
,
height
:
30
,
margin
:
0
,
});
}
render
()
{
return
(
<
div
className
=
"barcode-box"
>
<
svg
ref
=
{(
ref
)
=>
{
this
.
barcode
=
ref
;
}}
/
>
<
/div
>
);
}
}
export
default
function
DetailDom
({
config
,
data
})
{
const
{
x
,
y
,
fieldCode
}
=
config
;
const
outSideDom
=
(
children
)
=>
{
return
(
<
div
className
=
{
styles
.
inSideItemPrint
}
key
=
{
fieldCode
}
style
=
{{
left
:
x
+
'px'
,
top
:
y
+
'px'
,
}}
>
{
children
}
<
/div
>
);
};
let
children
=
null
;
switch
(
config
.
fieldType
)
{
case
'-2'
:
// 条形码
children
=
<
BarCode
value
=
{
data
}
/>
;
break
;
case
'-1'
:
// 常量
children
=
normalTextRender
(
config
.
content
,
config
);
break
;
case
'0'
:
// 文字
children
=
normalTextRender
(
data
,
config
);
break
;
case
'1'
:
// 时间
children
=
normalTextRender
(
config
.
content
,
config
);
break
;
case
'2'
:
// 照片
children
=
normalTextRender
(
config
.
content
,
config
);
break
;
default
:
children
=
normalTextRender
(
config
.
content
,
config
);
break
;
}
return
outSideDom
(
children
);
}
zyd_private/DragAndPrint/ViewPrint/defaultPhoto.png
0 → 100644
浏览文件 @
a4537f07
8.0 KB
zyd_private/DragAndPrint/ViewPrint/index.js
0 → 100644
浏览文件 @
a4537f07
import
React
,
{
Component
,
Fragment
}
from
'react'
;
import
{
queryConfig
}
from
'../services'
;
import
{
getInfo
}
from
'@/highOrderComponent/Service'
;
import
{
message
,
Button
}
from
'antd'
;
import
Shell
from
'@/baseComponent/Shell'
;
import
ReactToPrint
from
'react-to-print'
;
import
ButtonDiy
from
'@/baseComponent/ButtonDiy'
;
import
router
from
'umi/router'
;
import
styles
from
'../index.less'
;
import
DetailDom
from
'./DetailDom'
;
export
default
class
ViewPrint
extends
Component
{
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
configAll
:
null
,
viewData
:
null
,
loading
:
false
,
minHeight
:
700
,
showWindowPrint
:
false
,
};
this
.
getConfigInfo
=
queryConfig
.
bind
(
this
);
}
countImageHeight
=
()
=>
{
const
{
configAll
:
{
backgroundUrl
},
}
=
this
.
state
;
const
img
=
new
Image
();
img
.
src
=
backgroundUrl
;
img
.
onload
=
()
=>
{
this
.
setState
({
minHeight
:
img
.
height
,
});
};
};
getViewData
=
()
=>
{
const
{
selectedRows
}
=
this
.
props
;
const
ids
=
selectedRows
.
map
((
x
)
=>
x
.
id
);
this
.
getConfigInfo
().
then
((
x
)
=>
{
this
.
countImageHeight
();
if
(
x
&&
x
.
queryUrl
)
{
getInfo
(
{
ids
:
ids
.
join
(
','
),
},
x
.
queryUrl
,
).
then
((
viewData
)
=>
{
if
(
!
viewData
||
!
viewData
.
length
)
{
message
.
warning
(
'未查询到可打印的奖状数据'
);
console
.
error
(
`
${
x
.
queryUrl
}
接口报错或者没有返回数据`
);
}
this
.
setState
({
viewData
,
});
});
}
});
};
componentDidMount
()
{
this
.
getViewData
();
}
detailDom
=
(
data
)
=>
{
const
{
configAll
:
{
config
},
}
=
this
.
state
;
const
res
=
[];
for
(
let
item
of
config
)
{
if
(
item
.
fieldCode
&&
data
[
item
.
fieldCode
])
{
res
.
push
(
DetailDom
({
config
:
item
,
data
:
data
[
item
.
fieldCode
],
}),
);
}
}
return
res
;
};
onBeforeGetContent
=
()
=>
{
this
.
setState
({
loading
:
true
,
});
return
new
Promise
((
resolve
,
reject
)
=>
{
const
{
selectedRows
}
=
this
.
props
;
const
{
configAll
}
=
this
.
state
;
const
ids
=
selectedRows
.
map
((
x
)
=>
{
return
x
.
id
;
});
if
(
configAll
.
callUrl
&&
false
)
{
// 暂时关闭调用这个接口 不通知后台是否打印了
getInfo
({
ids
:
ids
.
join
(
','
)
},
configAll
.
callUrl
).
then
((
x
)
=>
{
if
(
x
)
{
this
.
setState
({
showWindowPrint
:
true
},
()
=>
{
resolve
(
true
);
});
}
else
{
resolve
(
true
);
}
});
}
else
{
this
.
setState
({
showWindowPrint
:
true
},
()
=>
{
resolve
(
true
);
});
}
});
};
render
()
{
const
{
loading
,
configAll
,
viewData
,
showWindowPrint
,
minHeight
,
}
=
this
.
state
;
if
(
!
configAll
)
{
return
null
;
}
const
{
hasPrintBackground
,
backgroundUrl
}
=
configAll
;
return
(
<
Fragment
>
<
Shell
styleShell
=
{{
marginTop
:
'0'
,
marginBottom
:
'20px'
}}
>
<
div
style
=
{{
height
:
'54px'
,
padding
:
'12px 0 12px 12px'
}}
>
<
ReactToPrint
trigger
=
{()
=>
(
<
Button
shape
=
"round"
type
=
"primary"
loading
=
{
loading
}
style
=
{{
marginRight
:
'20px'
}}
>
打印
<
/Button
>
)}
content
=
{()
=>
this
.
content
}
onBeforeGetContent
=
{
this
.
onBeforeGetContent
}
onAfterPrint
=
{()
=>
{
this
.
setState
({
showWindowPrint
:
false
,
loading
:
false
,
});
}}
/
>
<
ButtonDiy
name
=
{
'返回'
}
handleClick
=
{()
=>
{
router
.
goBack
();
}}
/
>
<
/div
>
<
/Shell
>
{
/** 预览的dom **/
}
{
viewData
&&
viewData
.
length
?
(
<
div
>
{
viewData
.
map
((
info
,
index
)
=>
{
return
(
<
div
className
=
{
styles
.
outSideDivPrint
}
key
=
{
index
+
'divKey'
}
>
<
img
src
=
{
backgroundUrl
}
draggable
=
{
false
}
className
=
{
styles
.
bgimagePrint
}
alt
=
{
'背景图'
}
/
>
{
this
.
detailDom
(
info
)}
<
/div
>
);
})}
<
/div
>
)
:
null
}
{
/** 打印的dom */
}
{
viewData
&&
viewData
.
length
?
(
<
div
ref
=
{(
node
)
=>
(
this
.
content
=
node
)}
style
=
{{
display
:
showWindowPrint
?
'block'
:
'none'
,
}}
>
{
!
showWindowPrint
?
null
:
viewData
.
map
((
info
,
index
)
=>
{
return
(
<
div
className
=
{
styles
.
outSideDivPrint
}
key
=
{
`
${
index
}
divKey`
}
style
=
{{
minHeight
,
}}
>
{
hasPrintBackground
?
(
<
img
src
=
{
backgroundUrl
}
draggable
=
{
false
}
className
=
{
styles
.
bgimagePrint
}
alt
=
{
'背景图'
}
/
>
)
:
null
}
{
this
.
detailDom
(
info
)}
<
/div
>
);
})}
<
/div
>
)
:
null
}
<
/Fragment
>
);
}
}
zyd_private/DragAndPrint/index.js
0 → 100644
浏览文件 @
a4537f07
/**
* 钟是志
* 2020年5月25日 18:03:24
* 一站式请勿使用此组件
* 拖拽配置 打印数据页面
* 用于中医大评奖评优 奖状打印
* 后续可以会应用于其他学校的其他 打印.
* */
import
React
,
{
Component
}
from
'react'
;
import
{
getInfo
}
from
'@/highOrderComponent/Service'
;
import
PropTypes
from
'prop-types'
;
import
DragSetting
from
'./DragSetting'
;
import
Shell
from
'@/baseComponent/Shell'
;
import
ButtonDiy
from
'@/baseComponent/ButtonDiy'
;
import
router
from
'umi/router'
;
import
{
message
}
from
'antd'
;
import
{
saveConfig
,
queryConfig
}
from
'./services'
;
export
default
class
Index
extends
Component
{
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
configAll
:
null
,
};
this
.
getConfigInfo
=
queryConfig
.
bind
(
this
);
}
updateConfig
=
({
id
,
x
,
y
})
=>
{
const
{
configAll
}
=
this
.
state
;
for
(
const
item
of
configAll
.
config
)
{
if
(
item
.
id
+
''
===
id
)
{
item
.
x
=
x
;
item
.
y
=
y
;
}
}
this
.
setState
({
configAll
,
});
};
saveConfig
=
()
=>
{
const
{
configAll
:
{
config
},
}
=
this
.
state
;
saveConfig
({
contentStr
:
JSON
.
stringify
(
config
),
}).
then
((
x
)
=>
{
if
(
x
)
{
message
.
success
(
'保存成功'
);
}
});
};
componentDidMount
()
{
this
.
getConfigInfo
();
}
render
()
{
const
{
configAll
}
=
this
.
state
;
if
(
!
configAll
||
!
configAll
.
backgroundUrl
)
{
return
null
;
}
return
(
<
Shell
styleShell
=
{{
marginTop
:
'0'
,
marginBottom
:
'20px'
}}
>
<
div
style
=
{{
height
:
'54px'
,
padding
:
'12px 0 24px 12px'
}}
>
<
ButtonDiy
name
=
"保存"
className
=
"primary"
handleClick
=
{
this
.
saveConfig
}
/
>
<
/div
>
<
DragSetting
backgroundUrl
=
{
configAll
.
backgroundUrl
}
updateConfig
=
{
this
.
updateConfig
}
configAll
=
{
configAll
}
/
>
<
/Shell
>
);
}
}
Index
.
propTypes
=
{
code
:
PropTypes
.
string
.
isRequired
,
// 后端配置的表里面的code 用于获取所有的配置项
};
Index
.
defaultProps
=
{
code
:
'award'
,
};
zyd_private/DragAndPrint/index.less
0 → 100644
浏览文件 @
a4537f07
.outSideDiv{
position: relative;
text-align: left;
width: 100%;
.bgimage{
height: auto;
overflow: auto;
z-index: 1;
}
.inSideItem{
position: absolute;
cursor: move;
z-index: 10;
color: #000;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
line-height: 28px;
border: 1px solid gray;
background-color: #CCC;
}
}
.outSideDivPrint{
position: relative;
width: 100%;
margin-bottom: 10px;
page-break-after: always;
.bgimagePrint{
height: auto;
overflow: auto;
z-index: 1;
}
.inSideItemPrint{
position: absolute;
z-index: 10;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
}
zyd_private/DragAndPrint/services.js
0 → 100644
浏览文件 @
a4537f07
import
{
getInfo
}
from
'@/highOrderComponent/Service'
;
export
function
getConfigApi
(
code
)
{
return
getInfo
(
{
code
},
'/PublicPrintApi/query'
,
);
}
export
const
queryConfig
=
function
()
{
const
{
code
}
=
this
.
props
;
return
getConfigApi
(
code
).
then
((
x
)
=>
{
if
(
!
x
)
{
console
.
error
(
'配置接口报错'
);
return
false
;
}
if
(
x
)
{
if
(
!
x
.
backgroundUrl
)
{
console
.
error
(
'未配置打印背景图 无法进行操作'
);
return
false
;
}
x
.
config
=
x
.
config
.
filter
((
y
)
=>
{
// 过滤不显示的字段.
return
y
.
hasHidden
===
false
;
});
this
.
setState
({
configAll
:
x
,
});
return
x
;
}
});
};
export
function
saveConfig
(
parmas
=
{})
{
return
getInfo
(
parmas
,
'/PublicPrintApi/update'
);
}
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论