Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
bdc
/
bdcdj-web
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
48c4ee4b
authored
2023-07-25 16:18:42 +0800
by
xiaomiao
Browse Files
Options
Browse Files
Tag
Download
Plain Diff
Merge branch 'master' of
http://yun.pashanhoo.com:9090/bdc/bdcdj-web
2 parents
cd13d0a5
d05294ce
Hide whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
710 additions
and
665 deletions
src/components/CheckBox/checkbox.vue
src/components/Loading/src/loading.vue
src/components/NoticeBar/index.vue
src/components/PhotoZoom/index.vue
src/components/Popup/index.vue
src/components/Popup1/index.vue
src/components/SvgIcon/index.vue
src/components/Theme/theme.vue
src/components/publicPicture/index.vue
src/components/ywPopup/index.vue
src/layout/index.vue
src/views/workflow/workFrame.vue
src/views/workflow/workFrameView.vue
src/components/CheckBox/checkbox.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-2
0 10:22:20
* @LastEditTime: 2023-07-2
5 16:06:03
-->
<
template
>
<label
class=
"el-checkbox"
:class=
"[
...
...
@@ -46,9 +46,7 @@
default
:
''
}
},
componentName
:
'ElCheckbox'
,
data
()
{
return
{
selfModel
:
false
,
...
...
@@ -56,7 +54,6 @@
isLimitExceeded
:
false
};
},
computed
:
{
model
:
{
/**
...
...
@@ -129,7 +126,6 @@
store
()
{
return
this
.
_checkboxGroup
?
this
.
_checkboxGroup
.
value
:
this
.
value
;
},
/**
* @description: isLimitDisabled
* @author: renchao
...
...
src/components/Loading/src/loading.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:10:17
-->
<
template
>
<transition
name=
"el-loading-fade"
@
after-leave=
"handleAfterLeave"
>
<div
v-show=
"visible"
class=
"el-loading-mask"
:style=
"
{ backgroundColor: background || '' }"
...
...
@@ -9,37 +14,35 @@
</div>
</transition>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
text
:
null
,
spinner
:
null
,
background
:
null
,
fullscreen
:
true
,
visible
:
false
,
customClass
:
''
};
},
methods
:
{
handleAfterLeave
()
{
this
.
$emit
(
'after-leave'
);
export
default
{
data
()
{
return
{
text
:
null
,
spinner
:
null
,
background
:
null
,
fullscreen
:
true
,
visible
:
false
,
customClass
:
''
};
},
setText
(
text
)
{
this
.
text
=
text
;
methods
:
{
handleAfterLeave
()
{
this
.
$emit
(
'after-leave'
);
},
setText
(
text
)
{
this
.
text
=
text
;
}
}
}
};
};
</
script
>
<
style
scoped
lang=
"scss"
>
.el-loading-spinner
{
margin-top
:
-100px
!important
;
.el-loading-spinner
{
margin-top
:
-100px
!important
;
.img
{
width
:
80px
;
height
:
80px
;
.img
{
width
:
80px
;
height
:
80px
;
}
}
}
</
style
>
\ No newline at end of file
...
...
src/components/NoticeBar/index.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:10:08
-->
<
template
>
<transition
name=
"fade"
>
<!--主要内容-->
...
...
@@ -18,163 +23,163 @@
</transition>
</
template
>
<
script
>
export
default
{
props
:
{
noticeList
:
{
type
:
Array
,
default
:
[]
}
},
data
()
{
return
{
speed
:
50
,
// 速度(单位px/s)
backWidth
:
''
,
// 父级宽度
backHeight
:
''
,
// 父级高度
wordLength
:
''
,
// 文本长度
state
:
1
,
firstAnimationTime
:
''
,
// 状态一动画效果
secondAnimationTime
:
''
,
// 状态二动画效果
};
},
watch
:
{
noticeList
:
{
handler
(
newName
,
oldName
)
{
let
that
=
this
this
.
Listener
();
setTimeout
(
res
=>
{
that
.
getData
();
},
100
);
},
deep
:
true
}
},
methods
:
{
/**
* @description: handleNotice
* @param {*} item
* @author: renchao
*/
handleNotice
(
item
)
{
this
.
$alertMes
(
item
.
noticeTitle
,
item
.
noticeContent
)
},
/**
* @description: 获取数据
* @author: renchao
*/
getData
()
{
let
style
=
document
.
styleSheets
[
0
];
let
text
=
this
.
$refs
.
text
;
let
back
=
this
.
$refs
.
back
;
this
.
backWidth
=
back
.
offsetWidth
;
this
.
backHeight
=
back
.
offsetHeight
;
text
.
style
.
lineHeight
=
this
.
backHeight
+
'px'
;
this
.
wordLength
=
text
.
offsetWidth
;
this
.
ComputationTime
();
// 计算时间
style
.
insertRule
(
`@keyframes firstAnimation {0% {left:0px;}100% {left:-
${
this
.
wordLength
}
px;}}`
);
style
.
insertRule
(
`@keyframes secondAnimation {0% {left:
${
this
.
backWidth
}
px;}100% {left:-
${
this
.
wordLength
}
px;}}`
);
setTimeout
(
res
=>
{
this
.
changeState
();
},
300
);
export
default
{
props
:
{
noticeList
:
{
type
:
Array
,
default
:
[]
}
},
/**
* @description: 用速度计算时间(想要保持速度一样,2种状态时间不同需算出)
* @author: renchao
*/
ComputationTime
()
{
this
.
firstAnimationTime
=
this
.
wordLength
/
this
.
speed
;
this
.
secondAnimationTime
=
(
this
.
wordLength
+
this
.
backWidth
)
/
this
.
speed
;
data
()
{
return
{
speed
:
50
,
// 速度(单位px/s)
backWidth
:
''
,
// 父级宽度
backHeight
:
''
,
// 父级高度
wordLength
:
''
,
// 文本长度
state
:
1
,
firstAnimationTime
:
''
,
// 状态一动画效果
secondAnimationTime
:
''
,
// 状态二动画效果
};
},
/**
* @description: 根据状态切换动画
* @author: renchao
*/
changeState
()
{
let
text
=
this
.
$refs
.
text
;
if
(
this
.
state
==
1
)
{
text
.
style
.
animation
=
`firstAnimation
${
this
.
firstAnimationTime
}
s linear`
;
this
.
state
=
2
;
}
else
{
text
.
style
.
animation
=
`secondAnimation
${
this
.
secondAnimationTime
}
s linear infinite`
;
watch
:
{
noticeList
:
{
handler
(
newName
,
oldName
)
{
let
that
=
this
this
.
Listener
();
setTimeout
(
res
=>
{
that
.
getData
();
},
100
);
},
deep
:
true
}
},
/**
* @description: Listener
* @author: renchao
*/
Listener
()
{
let
text
=
this
.
$refs
.
text
;
text
.
addEventListener
(
'animationend'
,
res
=>
{
methods
:
{
/**
* @description: handleNotice
* @param {*} item
* @author: renchao
*/
handleNotice
(
item
)
{
this
.
$alertMes
(
item
.
noticeTitle
,
item
.
noticeContent
)
},
/**
* @description: 获取数据
* @author: renchao
*/
getData
()
{
let
style
=
document
.
styleSheets
[
0
];
let
text
=
this
.
$refs
.
text
;
let
back
=
this
.
$refs
.
back
;
this
.
backWidth
=
back
.
offsetWidth
;
this
.
backHeight
=
back
.
offsetHeight
;
text
.
style
.
lineHeight
=
this
.
backHeight
+
'px'
;
this
.
wordLength
=
text
.
offsetWidth
;
this
.
ComputationTime
();
// 计算时间
style
.
insertRule
(
`@keyframes firstAnimation {0% {left:0px;}100% {left:-
${
this
.
wordLength
}
px;}}`
);
style
.
insertRule
(
`@keyframes secondAnimation {0% {left:
${
this
.
backWidth
}
px;}100% {left:-
${
this
.
wordLength
}
px;}}`
);
setTimeout
(
res
=>
{
this
.
changeState
();
},
false
)
},
/**
* @description: mouseOver
* @author: renchao
*/
mouseOver
()
{
let
text
=
this
.
$refs
.
text
;
text
.
style
.
animationPlayState
=
'paused'
},
/**
* @description: mouseLeave
* @author: renchao
*/
mouseLeave
()
{
let
text
=
this
.
$refs
.
text
;
text
.
style
.
animationPlayState
=
''
},
300
);
},
/**
* @description: 用速度计算时间(想要保持速度一样,2种状态时间不同需算出)
* @author: renchao
*/
ComputationTime
()
{
this
.
firstAnimationTime
=
this
.
wordLength
/
this
.
speed
;
this
.
secondAnimationTime
=
(
this
.
wordLength
+
this
.
backWidth
)
/
this
.
speed
;
},
/**
* @description: 根据状态切换动画
* @author: renchao
*/
changeState
()
{
let
text
=
this
.
$refs
.
text
;
if
(
this
.
state
==
1
)
{
text
.
style
.
animation
=
`firstAnimation
${
this
.
firstAnimationTime
}
s linear`
;
this
.
state
=
2
;
}
else
{
text
.
style
.
animation
=
`secondAnimation
${
this
.
secondAnimationTime
}
s linear infinite`
;
}
},
/**
* @description: Listener
* @author: renchao
*/
Listener
()
{
let
text
=
this
.
$refs
.
text
;
text
.
addEventListener
(
'animationend'
,
res
=>
{
this
.
changeState
();
},
false
)
},
/**
* @description: mouseOver
* @author: renchao
*/
mouseOver
()
{
let
text
=
this
.
$refs
.
text
;
text
.
style
.
animationPlayState
=
'paused'
},
/**
* @description: mouseLeave
* @author: renchao
*/
mouseLeave
()
{
let
text
=
this
.
$refs
.
text
;
text
.
style
.
animationPlayState
=
''
}
}
}
};
};
</
script
>
<
style
lang=
"scss"
scoped
>
.noticebar
{
display
:
flex
;
align-items
:
center
;
width
:
100%
;
height
:
28px
;
background
:
rgba
(
0
,
0
,
0
,
0.1
);
.noticebar
{
display
:
flex
;
align-items
:
center
;
width
:
100%
;
height
:
28px
;
background
:
rgba
(
0
,
0
,
0
,
0.1
);
.icon
{
img
{
height
:
100%
;
width
:
100%
;
.icon
{
img
{
height
:
100%
;
width
:
100%
;
}
}
}
.back
{
overflow
:
hidden
;
white-space
:
nowrap
;
margin
:
0
auto
;
height
:
100%
;
width
:
100%
;
cursor
:
pointer
;
position
:
relative
;
font-size
:
14px
;
color
:
#fff
;
.text
{
position
:
absolute
;
display
:
inline-block
;
padding
:
2px
0
;
display
:
flex
;
.back
{
overflow
:
hidden
;
white-space
:
nowrap
;
margin
:
0
auto
;
height
:
100%
;
width
:
100%
;
cursor
:
pointer
;
position
:
relative
;
font-size
:
14px
;
color
:
#fff
;
p
{
margin-right
:
80px
;
.text
{
position
:
absolute
;
display
:
inline-block
;
padding
:
2px
0
;
display
:
flex
;
align-items
:
center
;
height
:
28px
;
line-height
:
28px
;
p
{
margin-right
:
80px
;
display
:
flex
;
align-items
:
center
;
height
:
28px
;
line-height
:
28px
;
}
}
}
}
}
</
style
>
...
...
src/components/PhotoZoom/index.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:09:59
-->
<
template
>
<div
style=
"width: 100%;height: 100%"
>
<vue-photo-zoom-pro
:width=
"bigWidth"
:url=
"url"
:type=
"type"
:scale=
"scale"
:out-show=
"showType"
...
...
@@ -5,7 +10,6 @@
</vue-photo-zoom-pro>
</div>
</
template
>
<
script
>
import
vuePhotoZoomPro
from
'@/components/PhotoZoom/vue-photo-zoom-pro'
export
default
{
...
...
src/components/Popup/index.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:06:21
-->
<
template
>
<transition
name=
"msgbox-fade"
v-if=
"myShow"
>
<div
class=
"ls-mask"
v-loading=
"loading"
>
...
...
@@ -21,181 +26,179 @@
</transition>
</
template
>
<
script
>
export
default
{
name
:
'index'
,
data
()
{
return
{
title
:
'标题'
,
editItem
:
""
,
formData
:
undefined
,
//父组件传递的参数 负责传给子组件
btnShow
:
false
,
cancel
:
function
()
{
},
confirm
:
function
()
{
},
cancelText
:
'取消'
,
confirmText
:
'确认'
,
isSync
:
false
,
isShow
:
false
,
myShow
:
false
,
titleStyle
:
'center'
,
width
:
"75%"
,
height
:
"auto"
,
contentHeight
:
""
,
iconClass
:
""
,
key
:
0
}
},
props
:
{
loading
:
{
type
:
Boolean
,
default
:
false
},
},
watch
:
{
isShow
(
newValue
)
{
this
.
editItem
=
this
.
loadViewFn
(
this
.
editItem
)
document
.
body
.
appendChild
(
this
.
$el
);
this
.
myShow
=
newValue
}
},
mounted
()
{
/**
* @description: 计算滚动条高度
* @author: renchao
*/
setTimeout
(()
=>
{
if
(
this
.
btnShow
)
{
if
(
this
.
height
==
'auto'
)
{
this
.
contentHeight
=
(
this
.
$refs
.
contentRef
.
offsetHeight
)
+
'px'
}
else
{
this
.
contentHeight
=
this
.
height
}
}
else
{
if
(
this
.
height
==
'auto'
)
{
this
.
contentHeight
=
(
this
.
$refs
.
contentRef
.
offsetHeight
)
+
'px'
export
default
{
name
:
'index'
,
data
()
{
return
{
title
:
'标题'
,
editItem
:
""
,
formData
:
undefined
,
//父组件传递的参数 负责传给子组件
btnShow
:
false
,
cancel
:
function
()
{
},
confirm
:
function
()
{
},
cancelText
:
'取消'
,
confirmText
:
'确认'
,
isSync
:
false
,
isShow
:
false
,
myShow
:
false
,
titleStyle
:
'center'
,
width
:
"75%"
,
height
:
"auto"
,
contentHeight
:
""
,
iconClass
:
""
,
key
:
0
}
},
props
:
{
loading
:
{
type
:
Boolean
,
default
:
false
},
},
watch
:
{
isShow
(
newValue
)
{
this
.
editItem
=
this
.
loadViewFn
(
this
.
editItem
)
document
.
body
.
appendChild
(
this
.
$el
);
this
.
myShow
=
newValue
}
},
mounted
()
{
/**
* @description: 计算滚动条高度
* @author: renchao
*/
setTimeout
(()
=>
{
if
(
this
.
btnShow
)
{
if
(
this
.
height
==
'auto'
)
{
this
.
contentHeight
=
(
this
.
$refs
.
contentRef
.
offsetHeight
)
+
'px'
}
else
{
this
.
contentHeight
=
this
.
height
}
}
else
{
this
.
contentHeight
=
this
.
height
if
(
this
.
height
==
'auto'
)
{
this
.
contentHeight
=
(
this
.
$refs
.
contentRef
.
offsetHeight
)
+
'px'
}
else
{
this
.
contentHeight
=
this
.
height
}
}
}
},
300
)
},
methods
:
{
/**
* @description: onCancel
* @author: renchao
*/
onCancel
()
{
this
.
isShow
=
false
this
.
cancel
()
},
300
)
},
/**
* @description: onConfirm
* @author: renchao
*/
onConfirm
()
{
this
.
loading
=
true
let
res
=
new
Promise
((
resolve
,
reject
)
=>
{
this
.
confirm
()
resolve
(
true
)
})
if
(
res
)
{
methods
:
{
/**
* @description: onCancel
* @author: renchao
*/
onCancel
()
{
this
.
isShow
=
false
this
.
cancel
()
},
/**
* @description: onConfirm
* @author: renchao
*/
onConfirm
()
{
this
.
loading
=
true
let
res
=
new
Promise
((
resolve
,
reject
)
=>
{
this
.
confirm
()
resolve
(
true
)
})
if
(
res
)
{
this
.
isShow
=
false
}
},
/**
* @description: loadingFn
* @param {*} e
* @author: renchao
*/
loadingFn
(
e
)
{
//加载状态
this
.
loading
=
e
},
/**
* @description: loadViewFn
* @param {*} view
* @author: renchao
*/
loadViewFn
(
view
)
{
return
(
r
)
=>
require
.
ensure
([],
()
=>
r
(
require
(
`@/views/
${
view
}
.vue`
))
)
}
},
/**
* @description: loadingFn
* @param {*} e
* @author: renchao
*/
loadingFn
(
e
)
{
//加载状态
this
.
loading
=
e
},
/**
* @description: loadViewFn
* @param {*} view
* @author: renchao
*/
loadViewFn
(
view
)
{
return
(
r
)
=>
require
.
ensure
([],
()
=>
r
(
require
(
`@/views/
${
view
}
.vue`
))
)
}
},
destroyed
()
{
if
(
this
.
appendToBody
&&
this
.
$el
&&
this
.
$el
.
parentNode
)
{
this
.
$el
.
parentNode
.
removeChild
(
this
.
$el
);
destroyed
()
{
if
(
this
.
appendToBody
&&
this
.
$el
&&
this
.
$el
.
parentNode
)
{
this
.
$el
.
parentNode
.
removeChild
(
this
.
$el
);
}
}
}
}
</
script
>
<
style
scoped
lang=
"scss"
>
.ls-mask
{
width
:
100%
;
height
:
100%
;
z-index
:
2000
;
position
:
fixed
;
left
:
0
;
top
:
0
;
background
:
rgba
(
0
,
0
,
0
,
0.3
);
}
.ls-mask-window
{
background
:
white
;
position
:
relative
;
left
:
50%
;
top
:
50%
;
min-height
:
200px
;
transform
:
translate
(
-50%
,
-50%
);
border-radius
:
5px
;
overflow
:
hidden
;
}
.ls-mask
{
width
:
100%
;
height
:
100%
;
z-index
:
2000
;
position
:
fixed
;
left
:
0
;
top
:
0
;
background
:
rgba
(
0
,
0
,
0
,
0.3
);
}
.ls-mask-window
b
{
padding-left
:
5px
;
}
.ls-mask-window
{
background
:
white
;
position
:
relative
;
left
:
50%
;
top
:
50%
;
min-height
:
200px
;
transform
:
translate
(
-50%
,
-50%
);
border-radius
:
5px
;
overflow
:
hidden
;
}
.ls-title
{
padding
:
16px
;
color
:
#ffffff
;
font-size
:
16px
;
background
:
linear-gradient
(
3deg
,
#409EFF
,
#a7cbee
);
}
.ls-mask-window
b
{
padding-left
:
5px
;
}
.ls-title
.svg-icon
{
font-size
:
18px
;
}
.ls-title
{
padding
:
16px
;
color
:
#ffffff
;
font-size
:
16px
;
background
:
linear-gradient
(
3deg
,
#409eff
,
#a7cbee
);
}
.mask-content
{
padding
:
20px
;
width
:
100%
;
min-height
:
30%
;
max-height
:
90vh
;
overflow-y
:
scroll
;
}
.ls-title
.svg-icon
{
font-size
:
18px
;
}
.ls-mask-footer
{
height
:
50px
;
display
:
flex
;
justify-content
:
center
;
width
:
100%
;
position
:
absolute
;
border-top
:
1px
solid
$
borderColor
;
bottom
:
0
;
background
:
#ffffff
;
border-bottom-left-radius
:
5px
;
border-bottom-right-radius
:
5px
;
overflow
:
hidden
;
}
.mask-content
{
padding
:
20px
;
width
:
100%
;
min-height
:
30%
;
max-height
:
90vh
;
overflow-y
:
scroll
;
}
.ls-mask-footer
{
height
:
50px
;
display
:
flex
;
justify-content
:
center
;
width
:
100%
;
position
:
absolute
;
border-top
:
1px
solid
$
borderColor
;
bottom
:
0
;
background
:
#ffffff
;
border-bottom-left-radius
:
5px
;
border-bottom-right-radius
:
5px
;
overflow
:
hidden
;
}
/
deep
/
.closeStyle
{
position
:
absolute
;
top
:
13px
;
right
:
26px
;
font-size
:
24px
;
cursor
:
pointer
;
color
:
#409EFF
;
}
/
deep
/
.closeStyle
{
position
:
absolute
;
top
:
13px
;
right
:
26px
;
font-size
:
24px
;
cursor
:
pointer
;
color
:
#409eff
;
}
/
deep
/
.el-loading-mask
{
background
:
none
;
}
/
deep
/
.el-loading-mask
{
background
:
none
;
}
</
style
>
...
...
src/components/Popup1/index.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:08:30
-->
<
template
>
<transition
name=
"msgbox-fade"
>
<div
class=
"ls-mask"
v-if=
"myShow"
>
...
...
src/components/SvgIcon/index.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:08:55
-->
<!--显示svg文件图标-->
<
template
>
<div
v-if=
"isExternal"
:style=
"styleExternalIcon"
class=
"svg-external-icon svg-icon"
v-on=
"$listeners"
/>
...
...
@@ -5,59 +10,58 @@
<use
:xlink:href=
"iconName"
/>
</svg>
</
template
>
<
script
>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import
{
isExternal
}
from
'@/utils/validate'
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import
{
isExternal
}
from
'@/utils/validate'
export
default
{
name
:
'SvgIcon'
,
props
:
{
iconClass
:
{
type
:
String
,
required
:
true
},
className
:
{
type
:
String
,
default
:
''
}
},
computed
:
{
isExternal
()
{
return
isExternal
(
this
.
iconClass
)
},
iconName
()
{
return
`#icon-
${
this
.
iconClass
}
`
},
svgClass
()
{
if
(
this
.
className
)
{
return
'svg-icon '
+
this
.
className
}
else
{
return
'svg-icon'
export
default
{
name
:
'SvgIcon'
,
props
:
{
iconClass
:
{
type
:
String
,
required
:
true
},
className
:
{
type
:
String
,
default
:
''
}
},
styleExternalIcon
()
{
return
{
mask
:
`url(
${
this
.
iconClass
}
) no-repeat 50% 50%`
,
'-webkit-mask'
:
`url(
${
this
.
iconClass
}
) no-repeat 50% 50%`
computed
:
{
isExternal
()
{
return
isExternal
(
this
.
iconClass
)
},
iconName
()
{
return
`#icon-
${
this
.
iconClass
}
`
},
svgClass
()
{
if
(
this
.
className
)
{
return
'svg-icon '
+
this
.
className
}
else
{
return
'svg-icon'
}
},
styleExternalIcon
()
{
return
{
mask
:
`url(
${
this
.
iconClass
}
) no-repeat 50% 50%`
,
'-webkit-mask'
:
`url(
${
this
.
iconClass
}
) no-repeat 50% 50%`
}
}
}
}
}
</
script
>
<
style
scoped
>
.svg-icon
{
width
:
1em
;
height
:
1em
;
vertical-align
:
-0.15em
;
fill
:
currentColor
;
overflow
:
hidden
;
}
.svg-icon
{
width
:
1em
;
height
:
1em
;
vertical-align
:
-0.15em
;
fill
:
currentColor
;
overflow
:
hidden
;
}
.svg-external-icon
{
background-color
:
currentColor
;
mask-size
:
cover
!important
;
display
:
inline-block
;
}
.svg-external-icon
{
background-color
:
currentColor
;
mask-size
:
cover
!important
;
display
:
inline-block
;
}
</
style
>
...
...
src/components/Theme/theme.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:09:09
-->
<
template
>
<el-color-picker
v-model=
"theme"
:predefine=
"['#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d',]"
...
...
@@ -5,137 +10,154 @@
</
template
>
<
script
>
const
version
=
require
(
'element-ui/package.json'
).
version
// element-ui version from node_modules
const
ORIGINAL_THEME
=
'#409EFF'
// default color
export
default
{
data
()
{
return
{
chalk
:
''
,
// content of theme-chalk css
theme
:
''
}
},
computed
:
{
defaultTheme
()
{
return
this
.
$store
.
state
.
app
.
theme
}
},
watch
:
{
defaultTheme
:
{
handler
:
function
(
val
,
oldVal
)
{
this
.
theme
=
val
},
immediate
:
true
const
version
=
require
(
'element-ui/package.json'
).
version
// element-ui version from node_modules
const
ORIGINAL_THEME
=
'#409EFF'
// default color
export
default
{
data
()
{
return
{
chalk
:
''
,
// content of theme-chalk css
theme
:
''
}
},
async
theme
(
val
)
{
const
oldVal
=
this
.
chalk
?
this
.
theme
:
ORIGINAL_THEME
if
(
typeof
val
!==
'string'
)
return
const
themeCluster
=
this
.
getThemeCluster
(
val
.
replace
(
'#'
,
''
))
const
originalCluster
=
this
.
getThemeCluster
(
oldVal
.
replace
(
'#'
,
''
))
console
.
log
(
themeCluster
,
originalCluster
)
const
$message
=
this
.
$message
({
message
:
' Compiling the theme'
,
customClass
:
'theme-message'
,
type
:
'success'
,
duration
:
0
,
iconClass
:
'el-icon-loading'
})
const
getHandler
=
(
variable
,
id
)
=>
{
return
()
=>
{
const
originalCluster
=
this
.
getThemeCluster
(
ORIGINAL_THEME
.
replace
(
'#'
,
''
))
const
newStyle
=
this
.
updateStyle
(
this
[
variable
],
originalCluster
,
themeCluster
)
let
styleTag
=
document
.
getElementById
(
id
)
if
(
!
styleTag
)
{
styleTag
=
document
.
createElement
(
'style'
)
styleTag
.
setAttribute
(
'id'
,
id
)
document
.
head
.
appendChild
(
styleTag
)
computed
:
{
defaultTheme
()
{
return
this
.
$store
.
state
.
app
.
theme
}
},
watch
:
{
defaultTheme
:
{
handler
:
function
(
val
,
oldVal
)
{
this
.
theme
=
val
},
immediate
:
true
},
async
theme
(
val
)
{
const
oldVal
=
this
.
chalk
?
this
.
theme
:
ORIGINAL_THEME
if
(
typeof
val
!==
'string'
)
return
const
themeCluster
=
this
.
getThemeCluster
(
val
.
replace
(
'#'
,
''
))
const
originalCluster
=
this
.
getThemeCluster
(
oldVal
.
replace
(
'#'
,
''
))
console
.
log
(
themeCluster
,
originalCluster
)
const
$message
=
this
.
$message
({
message
:
' Compiling the theme'
,
customClass
:
'theme-message'
,
type
:
'success'
,
duration
:
0
,
iconClass
:
'el-icon-loading'
})
const
getHandler
=
(
variable
,
id
)
=>
{
return
()
=>
{
const
originalCluster
=
this
.
getThemeCluster
(
ORIGINAL_THEME
.
replace
(
'#'
,
''
))
const
newStyle
=
this
.
updateStyle
(
this
[
variable
],
originalCluster
,
themeCluster
)
let
styleTag
=
document
.
getElementById
(
id
)
if
(
!
styleTag
)
{
styleTag
=
document
.
createElement
(
'style'
)
styleTag
.
setAttribute
(
'id'
,
id
)
document
.
head
.
appendChild
(
styleTag
)
}
styleTag
.
innerText
=
newStyle
}
styleTag
.
innerText
=
newStyle
}
}
if
(
!
this
.
chalk
)
{
const
url
=
`https://unpkg.com/element-ui@
${
version
}
/lib/theme-chalk/index.css`
await
this
.
getCSSString
(
url
,
'chalk'
)
}
if
(
!
this
.
chalk
)
{
const
url
=
`https://unpkg.com/element-ui@
${
version
}
/lib/theme-chalk/index.css`
await
this
.
getCSSString
(
url
,
'chalk'
)
}
const
chalkHandler
=
getHandler
(
'chalk'
,
'chalk-style'
)
const
chalkHandler
=
getHandler
(
'chalk'
,
'chalk-style'
)
chalkHandler
()
chalkHandler
()
const
styles
=
[].
slice
.
call
(
document
.
querySelectorAll
(
'style'
))
.
filter
(
style
=>
{
const
text
=
style
.
innerText
return
new
RegExp
(
oldVal
,
'i'
).
test
(
text
)
&&
!
/Chalk Variables/
.
test
(
text
)
const
styles
=
[].
slice
.
call
(
document
.
querySelectorAll
(
'style'
))
.
filter
(
style
=>
{
const
text
=
style
.
innerText
return
new
RegExp
(
oldVal
,
'i'
).
test
(
text
)
&&
!
/Chalk Variables/
.
test
(
text
)
})
styles
.
forEach
(
style
=>
{
const
{
innerText
}
=
style
if
(
typeof
innerText
!==
'string'
)
return
style
.
innerText
=
this
.
updateStyle
(
innerText
,
originalCluster
,
themeCluster
)
})
styles
.
forEach
(
style
=>
{
const
{
innerText
}
=
style
if
(
typeof
innerText
!==
'string'
)
return
style
.
innerText
=
this
.
updateStyle
(
innerText
,
originalCluster
,
themeCluster
)
})
this
.
$emit
(
'change'
,
val
)
this
.
$emit
(
'change'
,
val
)
$message
.
close
()
}
},
methods
:
{
/**
* @description: updateStyle
* @param {*} style
* @param {*} oldCluster
* @param {*} newCluster
* @author: renchao
*/
updateStyle
(
style
,
oldCluster
,
newCluster
)
{
let
newStyle
=
style
oldCluster
.
forEach
((
color
,
index
)
=>
{
newStyle
=
newStyle
.
replace
(
new
RegExp
(
color
,
'ig'
),
newCluster
[
index
])
})
return
newStyle
$message
.
close
()
}
},
/**
* @description: getCSSString
* @param {*} url
* @param {*} variable
* @author: renchao
*/
getCSSString
(
url
,
variable
)
{
return
new
Promise
(
resolve
=>
{
const
xhr
=
new
XMLHttpRequest
()
xhr
.
onreadystatechange
=
()
=>
{
if
(
xhr
.
readyState
===
4
&&
xhr
.
status
===
200
)
{
this
[
variable
]
=
xhr
.
responseText
.
replace
(
/@font-face{
[^
}
]
+}/
,
''
)
resolve
()
methods
:
{
/**
* @description: updateStyle
* @param {*} style
* @param {*} oldCluster
* @param {*} newCluster
* @author: renchao
*/
updateStyle
(
style
,
oldCluster
,
newCluster
)
{
let
newStyle
=
style
oldCluster
.
forEach
((
color
,
index
)
=>
{
newStyle
=
newStyle
.
replace
(
new
RegExp
(
color
,
'ig'
),
newCluster
[
index
])
})
return
newStyle
},
/**
* @description: getCSSString
* @param {*} url
* @param {*} variable
* @author: renchao
*/
getCSSString
(
url
,
variable
)
{
return
new
Promise
(
resolve
=>
{
const
xhr
=
new
XMLHttpRequest
()
xhr
.
onreadystatechange
=
()
=>
{
if
(
xhr
.
readyState
===
4
&&
xhr
.
status
===
200
)
{
this
[
variable
]
=
xhr
.
responseText
.
replace
(
/@font-face{
[^
}
]
+}/
,
''
)
resolve
()
}
}
xhr
.
open
(
'GET'
,
url
)
xhr
.
send
()
})
},
/**
* @description: getThemeCluster
* @param {*} theme
* @author: renchao
*/
getThemeCluster
(
theme
)
{
const
tintColor
=
(
color
,
tint
)
=>
{
let
red
=
parseInt
(
color
.
slice
(
0
,
2
),
16
)
let
green
=
parseInt
(
color
.
slice
(
2
,
4
),
16
)
let
blue
=
parseInt
(
color
.
slice
(
4
,
6
),
16
)
if
(
tint
===
0
)
{
// when primary color is in its rgb space
return
[
red
,
green
,
blue
].
join
(
','
)
}
else
{
red
+=
Math
.
round
(
tint
*
(
255
-
red
))
green
+=
Math
.
round
(
tint
*
(
255
-
green
))
blue
+=
Math
.
round
(
tint
*
(
255
-
blue
))
red
=
red
.
toString
(
16
)
green
=
green
.
toString
(
16
)
blue
=
blue
.
toString
(
16
)
return
`#
${
red
}${
green
}${
blue
}
`
}
}
xhr
.
open
(
'GET'
,
url
)
xhr
.
send
()
})
},
/**
* @description: getThemeCluster
* @param {*} theme
* @author: renchao
*/
getThemeCluster
(
theme
)
{
const
tintColor
=
(
color
,
tint
)
=>
{
let
red
=
parseInt
(
color
.
slice
(
0
,
2
),
16
)
let
green
=
parseInt
(
color
.
slice
(
2
,
4
),
16
)
let
blue
=
parseInt
(
color
.
slice
(
4
,
6
),
16
)
if
(
tint
===
0
)
{
// when primary color is in its rgb space
return
[
red
,
green
,
blue
].
join
(
','
)
}
else
{
red
+=
Math
.
round
(
tint
*
(
255
-
red
))
green
+=
Math
.
round
(
tint
*
(
255
-
green
))
blue
+=
Math
.
round
(
tint
*
(
255
-
blue
))
const
shadeColor
=
(
color
,
shade
)
=>
{
let
red
=
parseInt
(
color
.
slice
(
0
,
2
),
16
)
let
green
=
parseInt
(
color
.
slice
(
2
,
4
),
16
)
let
blue
=
parseInt
(
color
.
slice
(
4
,
6
),
16
)
red
=
Math
.
round
((
1
-
shade
)
*
red
)
green
=
Math
.
round
((
1
-
shade
)
*
green
)
blue
=
Math
.
round
((
1
-
shade
)
*
blue
)
red
=
red
.
toString
(
16
)
green
=
green
.
toString
(
16
)
...
...
@@ -143,48 +165,31 @@ export default {
return
`#
${
red
}${
green
}${
blue
}
`
}
}
const
shadeColor
=
(
color
,
shade
)
=>
{
let
red
=
parseInt
(
color
.
slice
(
0
,
2
),
16
)
let
green
=
parseInt
(
color
.
slice
(
2
,
4
),
16
)
let
blue
=
parseInt
(
color
.
slice
(
4
,
6
),
16
)
red
=
Math
.
round
((
1
-
shade
)
*
red
)
green
=
Math
.
round
((
1
-
shade
)
*
green
)
blue
=
Math
.
round
((
1
-
shade
)
*
blue
)
red
=
red
.
toString
(
16
)
green
=
green
.
toString
(
16
)
blue
=
blue
.
toString
(
16
)
return
`#
${
red
}${
green
}${
blue
}
`
}
const
clusters
=
[
theme
]
for
(
let
i
=
0
;
i
<=
9
;
i
++
)
{
clusters
.
push
(
tintColor
(
theme
,
Number
((
i
/
10
).
toFixed
(
2
))))
const
clusters
=
[
theme
]
for
(
let
i
=
0
;
i
<=
9
;
i
++
)
{
clusters
.
push
(
tintColor
(
theme
,
Number
((
i
/
10
).
toFixed
(
2
))))
}
clusters
.
push
(
shadeColor
(
theme
,
0.1
))
return
clusters
}
clusters
.
push
(
shadeColor
(
theme
,
0.1
))
return
clusters
}
}
}
</
script
>
<
style
>
.theme-message
,
.theme-picker-dropdown
{
z-index
:
99999
!important
;
}
.theme-picker
.el-color-picker__trigger
{
height
:
26px
!important
;
width
:
26px
!important
;
padding
:
2px
;
}
.theme-picker-dropdown
.el-color-dropdown__link-btn
{
display
:
none
;
}
.theme-message
,
.theme-picker-dropdown
{
z-index
:
99999
!important
;
}
.theme-picker
.el-color-picker__trigger
{
height
:
26px
!important
;
width
:
26px
!important
;
padding
:
2px
;
}
.theme-picker-dropdown
.el-color-dropdown__link-btn
{
display
:
none
;
}
</
style
>
...
...
src/components/publicPicture/index.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:08:48
-->
<
template
>
<el-image-viewer
:on-close=
"closeViewer"
:url-list=
"urlList"
>
</el-image-viewer>
</
template
>
<
script
>
import
ElImageViewer
from
'element-ui/packages/image/src/image-viewer'
export
default
{
components
:
{
ElImageViewer
,
},
props
:
{
urlList
:
{
type
:
Array
,
default
:
function
()
{
return
[]
}
}
},
data
()
{
return
{
wrapperElem
:
null
}
},
mounted
()
{
this
.
$nextTick
(()
=>
{
let
wrapper
=
document
.
getElementsByClassName
(
'el-image-viewer__actions__inner'
)
let
downImg
=
document
.
createElement
(
'i'
)
downImg
.
setAttribute
(
'class'
,
'el-icon-download'
)
wrapper
[
0
].
appendChild
(
downImg
)
if
(
wrapper
.
length
>
0
)
{
this
.
wrapperElem
=
wrapper
[
0
]
this
.
wrapperElem
.
addEventListener
(
'click'
,
this
.
hideCusBtn
)
import
ElImageViewer
from
'element-ui/packages/image/src/image-viewer'
export
default
{
components
:
{
ElImageViewer
,
},
props
:
{
urlList
:
{
type
:
Array
,
default
:
function
()
{
return
[]
}
}
})
},
methods
:
{
/**
* @description: closeViewer
* @author: renchao
*/
closeViewer
()
{
this
.
$emit
(
'close-viewer'
)
},
/**
* @description: hideCusBtn
* @param {*} e
* @author: renchao
*/
hideCusBtn
(
e
)
{
let
className
=
e
.
target
.
className
if
(
className
===
'el-icon-download'
)
{
let
imgUrl
=
document
.
getElementsByClassName
(
'el-image-viewer__canvas'
)[
0
].
children
[
0
].
src
this
.
downloadImage
(
imgUrl
)
data
()
{
return
{
wrapperElem
:
null
}
},
/**
* @description: downloadImage
* @param {*} imgUrl
* @author: renchao
*/
downloadImage
(
imgUrl
)
{
let
tmpArr
=
imgUrl
.
split
(
'/'
)
let
fileName
=
tmpArr
[
tmpArr
.
length
-
1
]
window
.
URL
=
window
.
URL
||
window
.
webkitURL
let
xhr
=
new
XMLHttpRequest
()
xhr
.
open
(
'get'
,
imgUrl
,
true
)
xhr
.
responseType
=
'blob'
xhr
.
onload
=
function
()
{
if
(
this
.
status
==
200
)
{
//得到一个blob对象
let
blob
=
this
.
response
let
fileUrl
=
window
.
URL
.
createObjectURL
(
blob
)
let
a
=
document
.
createElement
(
'a'
)
;
(
document
.
body
||
document
.
documentElement
).
appendChild
(
a
)
a
.
href
=
fileUrl
if
(
'download'
in
a
)
{
a
.
download
=
fileName
}
else
{
a
.
setAttribute
(
'download'
,
fileName
)
mounted
()
{
this
.
$nextTick
(()
=>
{
let
wrapper
=
document
.
getElementsByClassName
(
'el-image-viewer__actions__inner'
)
let
downImg
=
document
.
createElement
(
'i'
)
downImg
.
setAttribute
(
'class'
,
'el-icon-download'
)
wrapper
[
0
].
appendChild
(
downImg
)
if
(
wrapper
.
length
>
0
)
{
this
.
wrapperElem
=
wrapper
[
0
]
this
.
wrapperElem
.
addEventListener
(
'click'
,
this
.
hideCusBtn
)
}
})
},
methods
:
{
/**
* @description: closeViewer
* @author: renchao
*/
closeViewer
()
{
this
.
$emit
(
'close-viewer'
)
},
/**
* @description: hideCusBtn
* @param {*} e
* @author: renchao
*/
hideCusBtn
(
e
)
{
let
className
=
e
.
target
.
className
if
(
className
===
'el-icon-download'
)
{
let
imgUrl
=
document
.
getElementsByClassName
(
'el-image-viewer__canvas'
)[
0
].
children
[
0
].
src
this
.
downloadImage
(
imgUrl
)
}
},
/**
* @description: downloadImage
* @param {*} imgUrl
* @author: renchao
*/
downloadImage
(
imgUrl
)
{
let
tmpArr
=
imgUrl
.
split
(
'/'
)
let
fileName
=
tmpArr
[
tmpArr
.
length
-
1
]
window
.
URL
=
window
.
URL
||
window
.
webkitURL
let
xhr
=
new
XMLHttpRequest
()
xhr
.
open
(
'get'
,
imgUrl
,
true
)
xhr
.
responseType
=
'blob'
xhr
.
onload
=
function
()
{
if
(
this
.
status
==
200
)
{
//得到一个blob对象
let
blob
=
this
.
response
let
fileUrl
=
window
.
URL
.
createObjectURL
(
blob
)
let
a
=
document
.
createElement
(
'a'
)
;
(
document
.
body
||
document
.
documentElement
).
appendChild
(
a
)
a
.
href
=
fileUrl
if
(
'download'
in
a
)
{
a
.
download
=
fileName
}
else
{
a
.
setAttribute
(
'download'
,
fileName
)
}
a
.
target
=
'_self'
a
.
click
()
a
.
remove
()
}
a
.
target
=
'_self'
a
.
click
()
a
.
remove
()
}
}
xhr
.
send
()
xhr
.
send
()
},
},
},
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
/
deep
/
.el-image-viewer__close
{
color
:
#ffffff
;
}
/
deep
/
.el-image-viewer__close
{
color
:
#ffffff
;
}
</
style
>
...
...
src/components/ywPopup/index.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:09:44
-->
<
template
>
<transition
name=
"msgbox-fade"
>
<div
class=
"ls-mask"
v-if=
"myShow"
>
...
...
src/layout/index.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-25 16:10:52
-->
<
template
>
<div
class=
"app-wrapper"
>
<navbar
/>
...
...
@@ -11,59 +16,59 @@
</div>
</
template
>
<
script
>
import
{
AppMain
,
Navbar
,
Sidebar
,
TagsView
}
from
'./components'
import
ResizeMixin
from
'./mixin/ResizeHandler'
import
{
mapState
}
from
'vuex'
export
default
{
name
:
'Layout'
,
components
:
{
AppMain
,
Navbar
,
Sidebar
,
TagsView
},
mixins
:
[
ResizeMixin
],
computed
:
{
...
mapState
({
sidebar
:
state
=>
state
.
app
.
sidebar
,
needTagsView
:
state
=>
state
.
settings
.
tagsView
,
fixedHeader
:
state
=>
state
.
settings
.
fixedHeader
})
import
{
AppMain
,
Navbar
,
Sidebar
,
TagsView
}
from
'./components'
import
ResizeMixin
from
'./mixin/ResizeHandler'
import
{
mapState
}
from
'vuex'
export
default
{
name
:
'Layout'
,
components
:
{
AppMain
,
Navbar
,
Sidebar
,
TagsView
},
mixins
:
[
ResizeMixin
],
computed
:
{
...
mapState
({
sidebar
:
state
=>
state
.
app
.
sidebar
,
needTagsView
:
state
=>
state
.
settings
.
tagsView
,
fixedHeader
:
state
=>
state
.
settings
.
fixedHeader
})
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
@import
"~@/styles/mixin.scss"
;
@import
"~@/styles/mixin.scss"
;
.app-wrapper
{
@include
clearfix;
position
:
relative
;
height
:
100%
;
width
:
100%
;
.app-wrapper
{
@include
clearfix;
position
:
relative
;
height
:
100%
;
width
:
100%
;
&.mobile.openSidebar
{
position
:
fixed
;
top
:
0
;
&.mobile.openSidebar
{
position
:
fixed
;
top
:
0
;
}
}
}
.drawer-bg
{
background
:
#000
;
opacity
:
0.3
;
width
:
100%
;
top
:
0
;
height
:
100%
;
position
:
absolute
;
z-index
:
999
;
}
.drawer-bg
{
background
:
#000
;
opacity
:
0.3
;
width
:
100%
;
top
:
0
;
height
:
100%
;
position
:
absolute
;
z-index
:
999
;
}
.fixed-header
{
width
:
100%
;
transition
:
width
0.28s
;
}
.fixed-header
{
width
:
100%
;
transition
:
width
0.28s
;
}
.el-dropdown-menu--small
{
padding
:
0
;
width
:
5px
;
}
.el-dropdown-menu--small
{
padding
:
0
;
width
:
5px
;
}
</
style
>
...
...
src/views/workflow/workFrame.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-2
4 09:39:34
* @LastEditTime: 2023-07-2
5 16:15:39
-->
<
template
>
<div
class=
"container"
>
...
...
@@ -158,7 +158,6 @@
this
.
fresh
++
;
//获取单元对应的所有表单信息
this
.
tabList
=
res
.
result
;
console
.
log
(
res
.
result
,
'res.result'
);
//默认加载第一个表单信息
let
arr
=
res
.
result
.
filter
(
item
=>
item
.
defaultForm
)
if
(
arr
.
length
>
0
)
{
...
...
src/views/workflow/workFrameView.vue
View file @
48c4ee4
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-0
6-09 16:55:31
* @LastEditTime: 2023-0
7-25 16:15:46
-->
<
template
>
<div
class=
"container"
>
...
...
@@ -125,7 +125,13 @@
//获取单元对应的所有表单信息
this
.
tabList
=
res
.
result
;
//默认加载第一个表单信息
this
.
tabName
=
res
.
result
[
0
].
value
;
//默认加载第一个表单信息
let
arr
=
res
.
result
.
filter
(
item
=>
item
.
defaultForm
)
if
(
arr
.
length
>
0
)
{
this
.
tabName
=
arr
[
0
].
value
;
}
else
{
this
.
tabName
=
res
.
result
[
0
].
value
;
}
this
.
ableOperation
=
this
.
tabList
[
0
].
ableOperation
//批量操作无分屏按钮
if
(
index
!=
null
)
{
...
...
Please
register
or
sign in
to post a comment