Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
D
dataease
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
zhu
dataease
Commits
039f3832
提交
039f3832
authored
6月 01, 2021
作者:
wangjiahao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(仪表盘): 增加文字组件 矩形组件等,统一归类为样式组件 增加仪表盘侧边 '其他' 按钮 用来存放其他类型的组件
上级
e05dd9f6
隐藏空白字符变更
内嵌
并排
正在显示
12 个修改的文件
包含
427 行增加
和
60 行删除
+427
-60
AttrList.vue
frontend/src/components/canvas/components/AttrList.vue
+67
-21
Shape.vue
frontend/src/components/canvas/components/Editor/Shape.vue
+0
-1
index.vue
frontend/src/components/canvas/components/Editor/index.vue
+26
-9
component-list.js
.../src/components/canvas/custom-component/component-list.js
+26
-7
style.js
frontend/src/components/canvas/utils/style.js
+1
-0
en.js
frontend/src/lang/en.js
+13
-4
tw.js
frontend/src/lang/tw.js
+14
-5
zh.js
frontend/src/lang/zh.js
+14
-5
index.js
frontend/src/store/index.js
+2
-0
index.vue
frontend/src/views/panel/AssistComponent/index.vue
+225
-0
index.vue
frontend/src/views/panel/edit/index.vue
+36
-7
index.vue
frontend/src/views/panel/filter/index.vue
+3
-1
没有找到文件。
frontend/src/components/canvas/components/AttrList.vue
浏览文件 @
039f3832
<!-- TODO: 这个页面后续将用 JSX 重构 -->
<
template
>
<
template
>
<div
class=
"attr-list"
>
<div
class=
"attr-list"
>
<el-form>
<el-form>
<el-form-item
v-for=
"(key, index) in styleKeys.filter(item =>
(item != 'rotate' && item != 'borderWidth')
)"
:key=
"index"
:label=
"map[key]"
>
<el-form-item
v-for=
"(key, index) in styleKeys.filter(item =>
item != 'rotate'
)"
:key=
"index"
:label=
"map[key]"
>
<el-color-picker
v-if=
"key == 'borderColor'"
v-model=
"curComponent.style[key]"
/>
<el-color-picker
v-if=
"key == 'borderColor'"
v-model=
"curComponent.style[key]"
/>
<el-color-picker
v-else-if=
"key == 'color'"
v-model=
"curComponent.style[key]"
/>
<el-color-picker
v-else-if=
"key == 'color'"
v-model=
"curComponent.style[key]"
/>
<el-color-picker
v-else-if=
"key == 'backgroundColor'"
v-model=
"curComponent.style[key]"
/>
<el-color-picker
v-else-if=
"key == 'backgroundColor'"
v-model=
"curComponent.style[key]"
/>
<el-select
v-else-if=
"key == 'textAlign'"
v-model=
"curComponent.style[key]"
>
<el-select
v-else-if=
"selectKey.includes(key)"
v-model=
"curComponent.style[key]"
>
<el-option
<template
v-if=
"key == 'textAlign'"
>
v-for=
"item in options"
<el-option
:key=
"item.value"
v-for=
"item in textAlignOptions"
:label=
"item.label"
:key=
"item.value"
:value=
"item.value"
:label=
"item.label"
/>
:value=
"item.value"
/>
</
template
>
<
template
v-else-if=
"key == 'borderStyle'"
>
<el-option
v-for=
"item in borderStyleOptions"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
/>
</
template
>
<
template
v-else
>
<el-option
v-for=
"item in verticalAlignOptions"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
/>
</
template
>
</el-select>
</el-select>
<el-input
v-if=
"key ==='opacity'"
v-model=
"curComponent.style[key]"
type=
"number"
:min=
"0"
:step=
"0.1"
:max=
"1"
/>
<el-input
v-else
v-model=
"curComponent.style[key]"
type=
"number"
/>
<el-input
v-else
v-model=
"curComponent.style[key]"
type=
"number"
/>
</el-form-item>
</el-form-item>
<
!--
<el-form-item
v-if=
"curComponent && !excludes.includes(curComponent.component)"
label=
"内容"
>
--
>
<
el-form-item
v-if=
"curComponent && !excludes.includes(curComponent.component)"
:label=
"$t('panel.content')"
>
<!--
<el-input
v-model=
"curComponent.propValue"
type=
"textarea"
/>
--
>
<el-input
v-model=
"curComponent.propValue"
type=
"textarea"
/
>
<
!--
</el-form-item>
--
>
<
/el-form-item
>
</el-form>
</el-form>
</div>
</div>
</template>
</template>
...
@@ -27,21 +45,46 @@
...
@@ -27,21 +45,46 @@
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
excludes
:
[
'Picture'
,
'Group'
],
// 这些组件不显示内容
excludes
:
[
'Picture'
,
'Group'
,
'user-view'
],
// 这些组件不显示内容
o
ptions
:
[
textAlignO
ptions
:
[
{
{
label
:
this
.
$t
(
'panel.
aline
_left'
),
label
:
this
.
$t
(
'panel.
text_align
_left'
),
value
:
'left'
value
:
'left'
},
},
{
{
label
:
this
.
$t
(
'panel.
aline
_center'
),
label
:
this
.
$t
(
'panel.
text_align
_center'
),
value
:
'center'
value
:
'center'
},
},
{
{
label
:
this
.
$t
(
'panel.
aline
_right'
),
label
:
this
.
$t
(
'panel.
text_align
_right'
),
value
:
'right'
value
:
'right'
}
}
],
],
borderStyleOptions
:
[
{
label
:
this
.
$t
(
'panel.border_style_solid'
),
value
:
'solid'
},
{
label
:
this
.
$t
(
'panel.border_style_dashed'
),
value
:
'dashed'
}
],
verticalAlignOptions
:
[
{
label
:
this
.
$t
(
'panel.vertical_align_top'
),
value
:
'top'
},
{
label
:
this
.
$t
(
'panel.vertical_align_middle'
),
value
:
'middle'
},
{
label
:
this
.
$t
(
'panel.vertical_align_bottom'
),
value
:
'bottom'
}
],
selectKey
:
[
'textAlign'
,
'borderStyle'
,
'verticalAlign'
],
map
:
{
map
:
{
left
:
this
.
$t
(
'panel.left'
),
left
:
this
.
$t
(
'panel.left'
),
top
:
this
.
$t
(
'panel.top'
),
top
:
this
.
$t
(
'panel.top'
),
...
@@ -49,6 +92,7 @@ export default {
...
@@ -49,6 +92,7 @@ export default {
width
:
this
.
$t
(
'panel.width'
),
width
:
this
.
$t
(
'panel.width'
),
color
:
this
.
$t
(
'panel.color'
),
color
:
this
.
$t
(
'panel.color'
),
backgroundColor
:
this
.
$t
(
'panel.backgroundColor'
),
backgroundColor
:
this
.
$t
(
'panel.backgroundColor'
),
borderStyle
:
this
.
$t
(
'panel.borderStyle'
),
borderWidth
:
this
.
$t
(
'panel.borderWidth'
),
borderWidth
:
this
.
$t
(
'panel.borderWidth'
),
borderColor
:
this
.
$t
(
'panel.borderColor'
),
borderColor
:
this
.
$t
(
'panel.borderColor'
),
borderRadius
:
this
.
$t
(
'panel.borderRadius'
),
borderRadius
:
this
.
$t
(
'panel.borderRadius'
),
...
@@ -57,12 +101,14 @@ export default {
...
@@ -57,12 +101,14 @@ export default {
lineHeight
:
this
.
$t
(
'panel.lineHeight'
),
lineHeight
:
this
.
$t
(
'panel.lineHeight'
),
letterSpacing
:
this
.
$t
(
'panel.letterSpacing'
),
letterSpacing
:
this
.
$t
(
'panel.letterSpacing'
),
textAlign
:
this
.
$t
(
'panel.textAlign'
),
textAlign
:
this
.
$t
(
'panel.textAlign'
),
opacity
:
this
.
$t
(
'panel.opacity'
)
opacity
:
this
.
$t
(
'panel.opacity'
),
verticalAlign
:
this
.
$t
(
'panel.verticalAlign'
)
}
}
}
}
},
},
computed
:
{
computed
:
{
styleKeys
()
{
styleKeys
()
{
console
.
log
(
this
.
$store
.
state
.
curComponent
.
style
)
return
this
.
$store
.
state
.
curComponent
?
Object
.
keys
(
this
.
$store
.
state
.
curComponent
.
style
)
:
[]
return
this
.
$store
.
state
.
curComponent
?
Object
.
keys
(
this
.
$store
.
state
.
curComponent
.
style
)
:
[]
},
},
curComponent
()
{
curComponent
()
{
...
@@ -73,10 +119,10 @@ export default {
...
@@ -73,10 +119,10 @@ export default {
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.attr-list
{
.attr-list
{
overflow
:
auto
;
overflow
:
auto
;
padding
:
0px
;
padding
:
2
0px
;
padding-top
:
0
;
padding-top
:
0
;
height
:
100%
;
height
:
100%
;
}
}
</
style
>
</
style
>
frontend/src/components/canvas/components/Editor/Shape.vue
浏览文件 @
039f3832
...
@@ -334,7 +334,6 @@ export default {
...
@@ -334,7 +334,6 @@ export default {
curPoint
,
curPoint
,
symmetricPoint
symmetricPoint
})
})
// console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
// console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
this
.
$store
.
commit
(
'setShapeStyle'
,
style
)
this
.
$store
.
commit
(
'setShapeStyle'
,
style
)
this
.
element
.
propValue
&&
this
.
element
.
propValue
.
viewId
&&
eventBus
.
$emit
(
'resizing'
,
this
.
element
.
propValue
.
viewId
)
this
.
element
.
propValue
&&
this
.
element
.
propValue
.
viewId
&&
eventBus
.
$emit
(
'resizing'
,
this
.
element
.
propValue
.
viewId
)
...
...
frontend/src/components/canvas/components/Editor/index.vue
浏览文件 @
039f3832
...
@@ -21,22 +21,20 @@
...
@@ -21,22 +21,20 @@
:index=
"index"
:index=
"index"
:class=
"
{ lock: item.isLock }"
:class=
"
{ lock: item.isLock }"
>
>
<!-- item.style---
{{
item
.
style
}}
-->
<!-- item.style---
{{
getShapeStyleInt
(
item
.
style
)
}}
-->
<component
<component
:is=
"item.component"
:is=
"item.component"
v-if=
"item.type==='
custom
'"
v-if=
"item.type==='
v-text
'"
:id=
"'component' + item.id"
:id=
"'component' + item.id"
class=
"component"
class=
"component"
:style=
"
item.style
"
:style=
"
getComponentStyleDefault(item.style)
"
:
out-style=
"getShapeStyleInt(item.style)
"
:
prop-value=
"item.propValue
"
:element=
"item"
:element=
"item"
:out-style=
"getShapeStyleInt(item.style)"
@
input=
"handleInput"
/>
/>
<component
<component
:is=
"item.component"
:is=
"item.component"
v-else
v-else
-if=
"item.type==='other'"
:id=
"'component' + item.id"
:id=
"'component' + item.id"
class=
"component"
class=
"component"
:style=
"getComponentStyle(item.style)"
:style=
"getComponentStyle(item.style)"
...
@@ -45,6 +43,16 @@
...
@@ -45,6 +43,16 @@
:filter=
"filter"
:filter=
"filter"
:out-style=
"getShapeStyleInt(item.style)"
:out-style=
"getShapeStyleInt(item.style)"
/>
/>
<component
:is=
"item.component"
v-else
:id=
"'component' + item.id"
class=
"component"
:style=
"getComponentStyleDefault(item.style)"
:prop-value=
"item.propValue"
:element=
"item"
:out-style=
"getShapeStyleInt(item.style)"
/>
<!--
<component
<!--
<component
:is=
"item.component"
:is=
"item.component"
v-else
v-else
...
@@ -365,17 +373,26 @@ export default {
...
@@ -365,17 +373,26 @@ export default {
return
result
return
result
},
},
getComponentStyleDefault
(
style
)
{
debugger
return
getStyle
(
style
,
[
'top'
,
'left'
,
'width'
,
'height'
,
'rotate'
])
// return style
},
getComponentStyle
(
style
)
{
getComponentStyle
(
style
)
{
debugger
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
return
style
return
style
},
},
handleInput
(
element
,
value
)
{
handleInput
(
element
,
value
)
{
// 根据文本组件高度调整 shape 高度
// 根据文本组件高度调整 shape 高度
this
.
$store
.
commit
(
'setShapeStyle'
,
{
height
:
this
.
getTextareaHeight
(
element
,
value
)
})
// remain -自适应画布会导致一些问题 暂时不修改
// this.$store.commit('setShapeStyle', { height: this.getTextareaHeight(element, value) })
},
},
getTextareaHeight
(
element
,
text
)
{
getTextareaHeight
(
element
,
text
)
{
debugger
// eslint-disable-next-line prefer-const
// eslint-disable-next-line prefer-const
let
{
lineHeight
,
fontSize
,
height
}
=
element
.
style
let
{
lineHeight
,
fontSize
,
height
}
=
element
.
style
if
(
lineHeight
===
''
)
{
if
(
lineHeight
===
''
)
{
...
...
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @
039f3832
...
@@ -11,6 +11,25 @@ export const commonAttr = {
...
@@ -11,6 +11,25 @@ export const commonAttr = {
isLock
:
false
// 是否锁定组件
isLock
:
false
// 是否锁定组件
}
}
export
const
assistList
=
[
{
id
:
'10001'
,
component
:
'v-text'
,
type
:
'v-text'
,
label
:
'文字'
,
icon
:
'iconfont icon-shuru'
,
defaultClass
:
'text-filter'
},
{
id
:
'10004'
,
component
:
'rect-shape'
,
type
:
'rect-shape'
,
label
:
'矩形'
,
icon
:
'iconfont icon-xialakuang'
,
defaultClass
:
'text-filter'
}
]
// 编辑器左侧组件列表
// 编辑器左侧组件列表
const
list
=
[
const
list
=
[
{
{
...
@@ -19,7 +38,7 @@ const list = [
...
@@ -19,7 +38,7 @@ const list = [
label
:
'文字'
,
label
:
'文字'
,
propValue
:
'双击编辑文字'
,
propValue
:
'双击编辑文字'
,
icon
:
'wenben'
,
icon
:
'wenben'
,
type
:
'
other
'
,
type
:
'
v-text
'
,
style
:
{
style
:
{
width
:
200
,
width
:
200
,
height
:
22
,
height
:
22
,
...
@@ -37,7 +56,7 @@ const list = [
...
@@ -37,7 +56,7 @@ const list = [
label
:
'按钮'
,
label
:
'按钮'
,
propValue
:
'按钮'
,
propValue
:
'按钮'
,
icon
:
'button'
,
icon
:
'button'
,
type
:
'
other
'
,
type
:
'
v-button
'
,
style
:
{
style
:
{
width
:
100
,
width
:
100
,
height
:
34
,
height
:
34
,
...
@@ -58,7 +77,7 @@ const list = [
...
@@ -58,7 +77,7 @@ const list = [
component
:
'Picture'
,
component
:
'Picture'
,
label
:
'图片'
,
label
:
'图片'
,
icon
:
'tupian'
,
icon
:
'tupian'
,
type
:
'
other
'
,
type
:
'
Picture
'
,
propValue
:
require
(
'@/components/canvas/assets/title.jpg'
),
propValue
:
require
(
'@/components/canvas/assets/title.jpg'
),
style
:
{
style
:
{
width
:
300
,
width
:
300
,
...
@@ -71,7 +90,7 @@ const list = [
...
@@ -71,7 +90,7 @@ const list = [
component
:
'Picture'
,
component
:
'Picture'
,
label
:
'背景-科技1'
,
label
:
'背景-科技1'
,
icon
:
'tupian'
,
icon
:
'tupian'
,
type
:
'
other
'
,
type
:
'
Picture
'
,
propValue
:
require
(
'@/components/canvas/assets/bg-kj-1.jpg'
),
propValue
:
require
(
'@/components/canvas/assets/bg-kj-1.jpg'
),
style
:
{
style
:
{
width
:
600
,
width
:
600
,
...
@@ -83,9 +102,9 @@ const list = [
...
@@ -83,9 +102,9 @@ const list = [
id
:
'10004'
,
id
:
'10004'
,
component
:
'rect-shape'
,
component
:
'rect-shape'
,
label
:
'矩形'
,
label
:
'矩形'
,
propValue
:
'
'
,
propValue
:
''
,
icon
:
'juxing'
,
icon
:
'juxing'
,
type
:
'
other
'
,
type
:
'
rect-shape
'
,
style
:
{
style
:
{
width
:
200
,
width
:
200
,
height
:
200
,
height
:
200
,
...
@@ -112,7 +131,7 @@ const list = [
...
@@ -112,7 +131,7 @@ const list = [
style
:
{
style
:
{
width
:
200
,
width
:
200
,
height
:
300
,
height
:
300
,
border
Width
:
1
border
Radius
:
''
}
}
}
}
]
]
...
...
frontend/src/components/canvas/utils/style.js
浏览文件 @
039f3832
...
@@ -27,6 +27,7 @@ export function getStyle(style, filter = []) {
...
@@ -27,6 +27,7 @@ export function getStyle(style, filter = []) {
}
}
})
})
debugger
return
result
return
result
}
}
...
...
frontend/src/lang/en.js
浏览文件 @
039f3832
...
@@ -932,6 +932,7 @@ export default {
...
@@ -932,6 +932,7 @@ export default {
width
:
'Width'
,
width
:
'Width'
,
color
:
'Color'
,
color
:
'Color'
,
backgroundColor
:
'BackgroundColor'
,
backgroundColor
:
'BackgroundColor'
,
borderStyle
:
'Border Style'
,
borderWidth
:
'BorderWidth'
,
borderWidth
:
'BorderWidth'
,
borderColor
:
'BorderColor'
,
borderColor
:
'BorderColor'
,
borderRadius
:
'BorderRadius'
,
borderRadius
:
'BorderRadius'
,
...
@@ -941,10 +942,18 @@ export default {
...
@@ -941,10 +942,18 @@ export default {
letterSpacing
:
'LetterSpacing'
,
letterSpacing
:
'LetterSpacing'
,
textAlign
:
'TextAlign'
,
textAlign
:
'TextAlign'
,
opacity
:
'Opacity'
,
opacity
:
'Opacity'
,
aline_left
:
'Aline Left'
,
verticalAlign
:
'Vertical Align'
,
aline_center
:
'Aline Center'
,
text_align_left
:
'Aline Left'
,
aline_right
:
'Aline Right'
,
text_align_center
:
'Aline Center'
,
select_component
:
'Check Component'
text_align_right
:
'Aline Right'
,
vertical_align_top
:
'Align Align'
,
vertical_align_middle
:
'Align Middle'
,
vertical_align_bottom
:
'Align Bottom'
,
border_style_solid
:
'Solid'
,
border_style_dashed
:
'Dashed'
,
select_component
:
'Check Component'
,
other_module
:
'Other'
,
content
:
'Content'
},
},
plugin
:
{
plugin
:
{
local_install
:
'Local installation'
,
local_install
:
'Local installation'
,
...
...
frontend/src/lang/tw.js
浏览文件 @
039f3832
...
@@ -932,6 +932,7 @@ export default {
...
@@ -932,6 +932,7 @@ export default {
width
:
'宽'
,
width
:
'宽'
,
color
:
'颜色'
,
color
:
'颜色'
,
backgroundColor
:
'背景色'
,
backgroundColor
:
'背景色'
,
borderStyle
:
'边框风格'
,
borderWidth
:
'边框宽度'
,
borderWidth
:
'边框宽度'
,
borderColor
:
'边框颜色'
,
borderColor
:
'边框颜色'
,
borderRadius
:
'边框半径'
,
borderRadius
:
'边框半径'
,
...
@@ -939,12 +940,20 @@ export default {
...
@@ -939,12 +940,20 @@ export default {
fontWeight
:
'字体粗细'
,
fontWeight
:
'字体粗细'
,
lineHeight
:
'行高'
,
lineHeight
:
'行高'
,
letterSpacing
:
'字间距'
,
letterSpacing
:
'字间距'
,
textAlign
:
'
对齐方式
'
,
textAlign
:
'
左右对齐
'
,
opacity
:
'透明度'
,
opacity
:
'透明度'
,
aline_left
:
'左对齐'
,
verticalAlign
:
'上下对齐'
,
aline_center
:
'居中'
,
text_align_left
:
'左对齐'
,
aline_right
:
'右对齐'
,
text_align_center
:
'左右居中'
,
select_component
:
'请选择组件'
text_align_right
:
'右对齐'
,
vertical_align_top
:
'上对齐'
,
vertical_align_middle
:
'居中对齐'
,
vertical_align_bottom
:
'下对齐'
,
border_style_solid
:
'实线'
,
border_style_dashed
:
'虚线'
,
select_component
:
'请选择组件'
,
other_module
:
'其他'
,
content
:
'内容'
},
},
plugin
:
{
plugin
:
{
local_install
:
'本地安裝'
,
local_install
:
'本地安裝'
,
...
...
frontend/src/lang/zh.js
浏览文件 @
039f3832
...
@@ -932,6 +932,7 @@ export default {
...
@@ -932,6 +932,7 @@ export default {
width
:
'宽'
,
width
:
'宽'
,
color
:
'颜色'
,
color
:
'颜色'
,
backgroundColor
:
'背景色'
,
backgroundColor
:
'背景色'
,
borderStyle
:
'边框风格'
,
borderWidth
:
'边框宽度'
,
borderWidth
:
'边框宽度'
,
borderColor
:
'边框颜色'
,
borderColor
:
'边框颜色'
,
borderRadius
:
'边框半径'
,
borderRadius
:
'边框半径'
,
...
@@ -939,12 +940,20 @@ export default {
...
@@ -939,12 +940,20 @@ export default {
fontWeight
:
'字体粗细'
,
fontWeight
:
'字体粗细'
,
lineHeight
:
'行高'
,
lineHeight
:
'行高'
,
letterSpacing
:
'字间距'
,
letterSpacing
:
'字间距'
,
textAlign
:
'
对齐方式
'
,
textAlign
:
'
左右对齐
'
,
opacity
:
'透明度'
,
opacity
:
'透明度'
,
aline_left
:
'左对齐'
,
verticalAlign
:
'上下对齐'
,
aline_center
:
'居中'
,
text_align_left
:
'左对齐'
,
aline_right
:
'右对齐'
,
text_align_center
:
'左右居中'
,
select_component
:
'请选择组件'
text_align_right
:
'右对齐'
,
vertical_align_top
:
'上对齐'
,
vertical_align_middle
:
'居中对齐'
,
vertical_align_bottom
:
'下对齐'
,
border_style_solid
:
'实线'
,
border_style_dashed
:
'虚线'
,
select_component
:
'请选择组件'
,
other_module
:
'其他'
,
content
:
'内容'
},
},
plugin
:
{
plugin
:
{
local_install
:
'本地安装'
,
local_install
:
'本地安装'
,
...
...
frontend/src/store/index.js
浏览文件 @
039f3832
...
@@ -72,6 +72,7 @@ const data = {
...
@@ -72,6 +72,7 @@ const data = {
},
},
setCurComponent
(
state
,
{
component
,
index
})
{
setCurComponent
(
state
,
{
component
,
index
})
{
console
.
log
(
'curComponent'
+
JSON
.
stringify
(
component
))
state
.
curComponent
=
component
state
.
curComponent
=
component
state
.
curComponentIndex
=
index
state
.
curComponentIndex
=
index
},
},
...
@@ -87,6 +88,7 @@ const data = {
...
@@ -87,6 +88,7 @@ const data = {
if
(
width
)
curComponent
.
style
.
width
=
parseInt
(
canvasStyleData
.
selfAdaption
?
(
width
*
100
/
curCanvasScale
.
scaleWidth
)
:
width
)
if
(
width
)
curComponent
.
style
.
width
=
parseInt
(
canvasStyleData
.
selfAdaption
?
(
width
*
100
/
curCanvasScale
.
scaleWidth
)
:
width
)
if
(
height
)
curComponent
.
style
.
height
=
parseInt
(
canvasStyleData
.
selfAdaption
?
(
height
*
100
/
curCanvasScale
.
scaleHeight
)
:
height
)
if
(
height
)
curComponent
.
style
.
height
=
parseInt
(
canvasStyleData
.
selfAdaption
?
(
height
*
100
/
curCanvasScale
.
scaleHeight
)
:
height
)
if
(
rotate
)
curComponent
.
style
.
rotate
=
rotate
if
(
rotate
)
curComponent
.
style
.
rotate
=
rotate
console
.
log
(
'setShapeStyle'
+
JSON
.
stringify
(
curComponent
))
},
},
setShapeSingleStyle
({
curComponent
},
{
key
,
value
})
{
setShapeSingleStyle
({
curComponent
},
{
key
,
value
})
{
...
...
frontend/src/views/panel/AssistComponent/index.vue
0 → 100644
浏览文件 @
039f3832
<
template
>
<div
class=
"filter-container"
@
dragstart=
"handleDragStart"
>
<div
class=
"widget-subject"
>
<div
class=
"filter-header"
>
<div
class=
"filter-header-text"
>
样式组件
</div>
</div>
<div
class=
"filter-widget-content"
>
<div
v-for=
"(item, index) in assistList"
:key=
"index"
:data-id=
"item.id"
draggable
:data-index=
"index"
:class=
"'filter-widget '+ (item.defaultClass || '')"
>
<div
class=
"filter-widget-icon"
>
<i
:class=
"(item.icon || 'el-icon-setting') + ' widget-icon-i'"
/>
</div>
<div
class=
"filter-widget-text"
>
{{
item
.
label
}}
</div>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
assistList
}
from
'@/components/canvas/custom-component/component-list'
export
default
{
name
:
'FilterGroup'
,
data
()
{
return
{
assistList
}
},
methods
:
{
handleDragStart
(
ev
)
{
ev
.
dataTransfer
.
effectAllowed
=
'copy'
const
dataTrans
=
{
type
:
'assist'
,
id
:
ev
.
target
.
dataset
.
id
}
ev
.
dataTransfer
.
setData
(
'componentInfo'
,
JSON
.
stringify
(
dataTrans
))
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.filter-container
{
width
:
240px
;
overflow
:
hidden
auto
;
min-height
:
24px
;
padding-top
:
0px
;
padding-bottom
:
0px
;
position
:
relative
;
height
:
940px
;
max-height
:
976px
;
}
.filter-header
{
overflow
:
hidden
;
position
:
relative
;
margin-top
:
24px
;
margin-left
:
15px
;
align-items
:
center
;
word-break
:
break-all
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
flex-start
;
flex-wrap
:
nowrap
;
}
.filter-header-text
{
font-size
:
14px
;
max-width
:
100%
;
color
:
gray
;
text-align
:
left
;
white-space
:
pre
;
text-overflow
:
ellipsis
;
position
:
relative
;
flex-shrink
:
0
;
box-sizing
:
border-box
;
overflow
:
hidden
;
overflow-x
:
hidden
;
overflow-y
:
hidden
;
word-break
:
break-all
;
}
.filter-widget-content
{
position
:
relative
;
margin-left
:
5px
;
}
.filter-widget
{
width
:
100px
;
height
:
36px
;
position
:
relative
;
float
:
left
;
margin-top
:
10px
;
margin-left
:
10px
;
filter
:
progid
:
DXImageTransform
.
Microsoft
.
gradient
(
startColorstr
=
#1a3685
f2
,
endColorstr
=
#1a3685
f2
);
font-size
:
12px
;
border-radius
:
10px
;
cursor
:
pointer
;
overflow
:
hidden
;
}
.time-filter
{
background-color
:
rgba
(
54
,
133
,
242
,.
1
);
.filter-widget-icon
{
color
:
#3685f2
;
}
.filter-widget-text
{
color
:
#3d4d66
;
}
}
.time-filter
:hover
{
background-color
:
#3685f2
;
color
:
#fff
;
.filter-widget-icon
{
background-color
:
#3685f2
;
color
:
#fff
;
}
.filter-widget-text
{
color
:
#fff
;
}
}
.text-filter
{
background-color
:
rgba
(
35
,
190
,
239
,.
1
);
.filter-widget-icon
{
color
:
#23beef
;
}
.filter-widget-text
{
color
:
#3d4d66
;
}
}
.text-filter
:hover
{
background-color
:
#23beef
;
color
:
#fff
;
.filter-widget-icon
{
background-color
:
#23beef
;
color
:
#fff
;
}
.filter-widget-text
{
color
:
#fff
;
}
}
.tree-filter
{
background-color
:
rgba
(
22
,
160
,
132
,.
1
);
.filter-widget-icon
{
color
:
#37b4aa
;
}
.filter-widget-text
{
color
:
#3d4d66
;
}
}
.tree-filter
:hover
{
background-color
:
#37b4aa
;
.filter-widget-icon
{
color
:
#37b4aa
;
}
.filter-widget-text
{
color
:
#fff
;
}
}
.filter-widget-icon
{
width
:
40px
;
height
:
36px
;
text-align
:
center
;
line-height
:
1
;
position
:
absolute
;
top
:
0px
;
bottom
:
0px
;
left
:
0px
;
justify-content
:
center
;
align-items
:
center
;
flex-direction
:
row
;
flex-wrap
:
nowrap
;
display
:
flex
;
.widget-icon-i
{
width
:
24px
;
height
:
24px
;
position
:
relative
;
flex-shrink
:
0
;
font-size
:
24px
;
margin
:
auto
;
font-family
:
fineui
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
text-align
:
center
;
}
}
.filter-widget-text
{
font-size
:
14px
;
height
:
36px
;
line-height
:
36px
;
text-align
:
left
;
white-space
:
pre
;
text-overflow
:
ellipsis
;
position
:
absolute
;
inset
:
0px
0px
0px
40px
;
box-sizing
:
border-box
;
overflow
:
hidden
;
overflow-x
:
hidden
;
overflow-y
:
hidden
;
word-break
:
break-all
;
cursor
:
pointer
;
}
.widget-subject
{
display
:
flow-root
;
}
</
style
>
frontend/src/views/panel/edit/index.vue
浏览文件 @
039f3832
...
@@ -52,6 +52,23 @@
...
@@ -52,6 +52,23 @@
<div
style=
"width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
/>
<div
style=
"width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
/>
</div>
</div>
<!-- 过滤组件 end -->
<!-- 过滤组件 end -->
<!-- 其他组件 start -->
<div
tabindex=
"-1"
style=
"position: relative; margin: 16px auto"
>
<div
style=
"height: 60px; position: relative"
>
<div
class=
"button-div-class"
style=
" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; "
>
<el-button
circle
:class=
"show&&showIndex===3? 'button-show':'button-closed'"
class=
"el-icon-brush"
size=
"mini"
@
click=
"showPanel(3)"
/>
</div>
<div
style=
" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;"
>
<div
style=
" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
>
{{
$t
(
'panel.other_module'
)
}}
</div>
</div>
</div>
</div>
<div
style=
"height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;"
>
<div
style=
"width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
/>
</div>
<!-- 其他组件 end -->
</div>
</div>
</div>
</div>
</de-aside-container>
</de-aside-container>
...
@@ -73,6 +90,7 @@
...
@@ -73,6 +90,7 @@
<view-select
v-show=
" show && showIndex===0"
/>
<view-select
v-show=
" show && showIndex===0"
/>
<filter-group
v-show=
" show &&showIndex===1"
/>
<filter-group
v-show=
" show &&showIndex===1"
/>
<subject-setting
v-show=
" show &&showIndex===2"
/>
<subject-setting
v-show=
" show &&showIndex===2"
/>
<assist-component
v-show=
" show &&showIndex===3"
/>
</el-drawer>
</el-drawer>
<div
<div
...
@@ -147,8 +165,9 @@ import Toolbar from '@/components/canvas/components/Toolbar'
...
@@ -147,8 +165,9 @@ import Toolbar from '@/components/canvas/components/Toolbar'
import
{
findOne
}
from
'@/api/panel/panel'
import
{
findOne
}
from
'@/api/panel/panel'
import
PreviewFullScreen
from
'@/components/canvas/components/Editor/PreviewFullScreen'
import
PreviewFullScreen
from
'@/components/canvas/components/Editor/PreviewFullScreen'
import
Preview
from
'@/components/canvas/components/Editor/Preview'
import
Preview
from
'@/components/canvas/components/Editor/Preview'
import
AttrList
from
'@/components/canvas/components/AttrList
.vue
'
import
AttrList
from
'@/components/canvas/components/AttrList'
import
elementResizeDetectorMaker
from
'element-resize-detector'
import
elementResizeDetectorMaker
from
'element-resize-detector'
import
AssistComponent
from
'@/views/panel/AssistComponent'
// 引入样式
// 引入样式
import
'@/components/canvas/assets/iconfont/iconfont.css'
import
'@/components/canvas/assets/iconfont/iconfont.css'
...
@@ -171,7 +190,8 @@ export default {
...
@@ -171,7 +190,8 @@ export default {
SubjectSetting
,
SubjectSetting
,
PreviewFullScreen
,
PreviewFullScreen
,
Preview
,
Preview
,
AttrList
AttrList
,
AssistComponent
},
},
data
()
{
data
()
{
return
{
return
{
...
@@ -334,6 +354,7 @@ export default {
...
@@ -334,6 +354,7 @@ export default {
return
data
return
data
},
},
handleDrop
(
e
)
{
handleDrop
(
e
)
{
debugger
e
.
preventDefault
()
e
.
preventDefault
()
e
.
stopPropagation
()
e
.
stopPropagation
()
let
component
let
component
...
@@ -341,8 +362,15 @@ export default {
...
@@ -341,8 +362,15 @@ export default {
const
componentInfo
=
JSON
.
parse
(
e
.
dataTransfer
.
getData
(
'componentInfo'
))
const
componentInfo
=
JSON
.
parse
(
e
.
dataTransfer
.
getData
(
'componentInfo'
))
// 用户视图设置 复制一个模板
if
(
componentInfo
.
type
===
'assist'
)
{
if
(
componentInfo
.
type
===
'view'
)
{
// 辅助设计组件
componentList
.
forEach
(
componentTemp
=>
{
if
(
componentInfo
.
id
===
componentTemp
.
id
)
{
component
=
deepCopy
(
componentTemp
)
}
})
}
else
if
(
componentInfo
.
type
===
'view'
)
{
// 用户视图设置 复制一个模板
componentList
.
forEach
(
componentTemp
=>
{
componentList
.
forEach
(
componentTemp
=>
{
if
(
componentTemp
.
type
===
'view'
)
{
if
(
componentTemp
.
type
===
'view'
)
{
component
=
deepCopy
(
componentTemp
)
component
=
deepCopy
(
componentTemp
)
...
@@ -368,6 +396,7 @@ export default {
...
@@ -368,6 +396,7 @@ export default {
component
=
deepCopy
(
this
.
currentFilterCom
)
component
=
deepCopy
(
this
.
currentFilterCom
)
}
}
// position = absolution 或导致有偏移 这里中和一下偏移量
component
.
style
.
top
=
e
.
offsetY
component
.
style
.
top
=
e
.
offsetY
component
.
style
.
left
=
e
.
offsetX
component
.
style
.
left
=
e
.
offsetX
component
.
id
=
newComponentId
component
.
id
=
newComponentId
...
@@ -546,10 +575,10 @@ export default {
...
@@ -546,10 +575,10 @@ export default {
background-color
:
#ffffff
!
important
;
background-color
:
#ffffff
!
important
;
}
}
.style-aside
{
.style-aside
{
width
:
85
px
;
width
:
200
px
;
max-width
:
85
px
!
important
;
max-width
:
200
px
!
important
;
border
:
1px
solid
#E6E6E6
;
border
:
1px
solid
#E6E6E6
;
padding
:
3
px
;
padding
:
10
px
;
transition
:
all
0
.3s
;
transition
:
all
0
.3s
;
}
}
...
...
frontend/src/views/panel/filter/index.vue
浏览文件 @
039f3832
...
@@ -28,7 +28,8 @@
...
@@ -28,7 +28,8 @@
</
template
>
</
template
>
<
script
>
import
componentList
from
'@/components/canvas/custom-component/component-list'
<
script
>
import
componentList
from
'@/components/canvas/custom-component/component-list'
import
{
ApplicationContext
}
from
'@/utils/ApplicationContext'
import
{
ApplicationContext
}
from
'@/utils/ApplicationContext'
export
default
{
export
default
{
name
:
'FilterGroup'
,
name
:
'FilterGroup'
,
...
@@ -73,6 +74,7 @@ export default {
...
@@ -73,6 +74,7 @@ export default {
return
result
return
result
})
})
}
}
console
.
log
(
'this.widgetSubjects=>'
+
JSON
.
stringify
(
this
.
widgetSubjects
))
},
},
methods
:
{
methods
:
{
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论