代码调整
This commit is contained in:
joylink_cuiweidong
parent
dcefdfab33
commit
c9b5c908a0
@ -14,47 +14,47 @@ export const elementConst = {
|
||||
],
|
||||
shape: [
|
||||
{
|
||||
prop: 'x1',
|
||||
label: '起始点横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'x1',
|
||||
label: '起始点横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始点横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '起始点横坐标'
|
||||
},
|
||||
{
|
||||
prop: 'y1',
|
||||
label: '起始点纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'y1',
|
||||
label: '起始点纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始点纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 100,
|
||||
description: '起始点纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'x2',
|
||||
label: '终止点横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'x2',
|
||||
label: '终止点横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止点横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 100,
|
||||
description: '终止点横坐标'
|
||||
},
|
||||
{
|
||||
prop: 'y2',
|
||||
label: '终止点纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'y2',
|
||||
label: '终止点纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止点纵坐标', trigger: 'blur' }
|
||||
],
|
||||
@ -81,8 +81,8 @@ export const elementConst = {
|
||||
name:'矩形',
|
||||
formList: {
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
@ -95,60 +95,60 @@ export const elementConst = {
|
||||
],
|
||||
shape: [
|
||||
{
|
||||
prop: 'x',
|
||||
label: '左上角横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'x',
|
||||
label: '左上角横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入左上角横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '左上角横坐标'
|
||||
},
|
||||
{
|
||||
prop: 'y',
|
||||
label: '左上角纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'y',
|
||||
label: '左上角纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入左上角纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '左上角纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '宽度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '宽度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '宽度'
|
||||
},
|
||||
{
|
||||
prop: 'height',
|
||||
label: '高度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'height',
|
||||
label: '高度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '圆角矩形半径',
|
||||
type: types.NumberArray,
|
||||
precision: 0,
|
||||
step:1,
|
||||
length:4,
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '圆角矩形半径',
|
||||
type: types.NumberArray,
|
||||
precision: 0,
|
||||
step:1,
|
||||
length:4,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆角矩形半径', trigger: 'blur' }
|
||||
],
|
||||
@ -162,8 +162,8 @@ export const elementConst = {
|
||||
name:'圆形',
|
||||
formList:{
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
@ -176,40 +176,40 @@ export const elementConst = {
|
||||
],
|
||||
shape: [
|
||||
{
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心横坐标'},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '半径'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -218,8 +218,8 @@ export const elementConst = {
|
||||
name:'多边形',
|
||||
formList: {
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
@ -231,7 +231,31 @@ export const elementConst = {
|
||||
}
|
||||
],
|
||||
shape: [
|
||||
|
||||
{
|
||||
prop: 'points',
|
||||
label: '坐标集合',
|
||||
type: types.Points,
|
||||
precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: [[0, 0], [100, 100], [100, 200]],
|
||||
description: '每个元素是一个横纵坐标的数组'
|
||||
},
|
||||
{
|
||||
prop: 'smooth',
|
||||
label: '圆滑程度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
precision: 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '取值范围为 0 到 1 之间的数字，0 表示不圆滑'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -255,7 +279,31 @@ export const elementConst = {
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{
|
||||
prop: 'points',
|
||||
label: '坐标集合',
|
||||
type: types.Points,
|
||||
precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: [[0, 0], [100, 100], [100, 200]],
|
||||
description: '每个元素是一个横纵坐标的数组'
|
||||
},
|
||||
{
|
||||
prop: 'smooth',
|
||||
label: '圆滑程度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
precision: 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '取值范围为 0 到 1 之间的数字，0 表示不圆滑'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -264,8 +312,8 @@ export const elementConst = {
|
||||
name:'正多边形',
|
||||
formList: {
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
@ -278,53 +326,53 @@ export const elementConst = {
|
||||
],
|
||||
shape:[
|
||||
{
|
||||
prop: 'x',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'x',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心横坐标'
|
||||
},
|
||||
{
|
||||
prop: 'y',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'y',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 40,
|
||||
description: '半径'
|
||||
},
|
||||
{
|
||||
prop: 'n',
|
||||
label: '边数',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'n',
|
||||
label: '边数',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入边数', trigger: 'blur' }
|
||||
],
|
||||
value: 5,
|
||||
description: '边数'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -333,8 +381,8 @@ export const elementConst = {
|
||||
name:'椭圆',
|
||||
formList: {
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
@ -347,53 +395,53 @@ export const elementConst = {
|
||||
],
|
||||
shape:[
|
||||
{
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心横坐标'
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'rx',
|
||||
label: '横向半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'rx',
|
||||
label: '横向半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入横向半径', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '横向半径'
|
||||
},
|
||||
{
|
||||
prop: 'ry',
|
||||
label: '纵向半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'ry',
|
||||
label: '纵向半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入纵向半径', trigger: 'blur' }
|
||||
],
|
||||
value: 30,
|
||||
description: '纵向半径'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -406,70 +454,70 @@ export const elementConst = {
|
||||
],
|
||||
shape: [
|
||||
{
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心横坐标'
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '半径'
|
||||
},
|
||||
{
|
||||
prop: 'startAngle',
|
||||
label: '起始弧度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
min: 0,
|
||||
max: Math.PI*2,
|
||||
},
|
||||
{
|
||||
prop: 'startAngle',
|
||||
label: '起始弧度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '起始弧度'
|
||||
},
|
||||
{
|
||||
prop: 'endAngle',
|
||||
label: '终止弧度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
min: 0,
|
||||
max: Math.PI*2,
|
||||
},
|
||||
{
|
||||
prop: 'endAngle',
|
||||
label: '终止弧度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
|
||||
],
|
||||
value: Math.PI,
|
||||
description: '终止弧度'
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
prop: 'clockwise',
|
||||
label: '顺时针方向',
|
||||
type: types.Boolean,
|
||||
@ -488,7 +536,7 @@ export const elementConst = {
|
||||
formList: {
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
@ -501,82 +549,82 @@ export const elementConst = {
|
||||
],
|
||||
shape: [
|
||||
{
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心横坐标'
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '半径'
|
||||
},
|
||||
{
|
||||
prop: 'r0',
|
||||
label: '内半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'r0',
|
||||
label: '内半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入内半径', trigger: 'blur' }
|
||||
],
|
||||
value: 30,
|
||||
description: '内半径'
|
||||
},
|
||||
{
|
||||
prop: 'startAngle',
|
||||
label: '起始弧度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
min: 0,
|
||||
max: Math.PI*2,
|
||||
},
|
||||
{
|
||||
prop: 'startAngle',
|
||||
label: '起始弧度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '起始弧度'
|
||||
},
|
||||
{
|
||||
prop: 'endAngle',
|
||||
label: '终止弧度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
min: 0,
|
||||
max: Math.PI*2,
|
||||
},
|
||||
{
|
||||
prop: 'endAngle',
|
||||
label: '终止弧度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
|
||||
],
|
||||
value: Math.PI,
|
||||
description: '终止弧度'
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
prop: 'clockwise',
|
||||
label: '顺时针方向',
|
||||
type: types.Boolean,
|
||||
@ -594,8 +642,8 @@ export const elementConst = {
|
||||
name:'心形',
|
||||
formList: {
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
@ -608,53 +656,53 @@ export const elementConst = {
|
||||
],
|
||||
shape: [
|
||||
{
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心横坐标'
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '宽度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '宽度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '宽度'
|
||||
},
|
||||
{
|
||||
prop: 'height',
|
||||
label: '高度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'height',
|
||||
label: '高度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -663,8 +711,8 @@ export const elementConst = {
|
||||
name:'水滴',
|
||||
formList: {
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
@ -677,52 +725,52 @@ export const elementConst = {
|
||||
],
|
||||
shape: [
|
||||
{
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心横坐标'},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '圆心纵坐标'
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '宽度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '宽度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '宽度'
|
||||
},
|
||||
{
|
||||
prop: 'height',
|
||||
label: '高度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
},
|
||||
{
|
||||
prop: 'height',
|
||||
label: '高度',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
export default {
|
||||
String: 'String',
|
||||
Number: 'Number',
|
||||
Select: 'Select',
|
||||
Boolean: 'Boolean',
|
||||
Color: 'Color',
|
||||
Point: 'Point',
|
||||
Points: 'Points',
|
||||
NumberArray: 'NumberArray'
|
||||
}
|
||||
String: 'String',
|
||||
Number: 'Number',
|
||||
Select: 'Select',
|
||||
Boolean: 'Boolean',
|
||||
Color: 'Color',
|
||||
Point: 'Point',
|
||||
Points: 'Points',
|
||||
NumberArray: 'NumberArray'
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formModel" class="composeForm" label-width="180px">
|
||||
<el-form ref="form" :model="formModel" class="composeForm" label-width="110px">
|
||||
<div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
|
||||
<div class="styleGroupName">
|
||||
{{ styleGroup.name }}
|
||||
@ -45,6 +45,7 @@
|
||||
v-for="count in item.length"
|
||||
:key="count"
|
||||
v-model="formModel[styleGroup.code][item.prop][count-1]"
|
||||
style="margin-left:5px"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
:max="isNaN(item.max)? Infinity : item.max"
|
||||
@ -52,12 +53,31 @@
|
||||
:precision="item.precision"
|
||||
/>
|
||||
</template>
|
||||
<!-- <template v-else-if="checkFieldType(item, 'Color')">
|
||||
<el-color-picker
|
||||
v-model="formModel[styleGroup.code][item.prop]"
|
||||
size="small"
|
||||
/>
|
||||
</template> -->
|
||||
<template v-else-if="checkFieldType(item, 'Points')">
|
||||
<div class="point-section">
|
||||
<template v-for="(point, j) in formModel[styleGroup.code][item.prop]">
|
||||
<div :key="j" style="overflow: hidden;">
|
||||
<el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.code],item.prop)" />
|
||||
<span class="pointSplice">, </span>
|
||||
<el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.code],item.prop)" />
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
class="point-button"
|
||||
@click="addPoint(j,formModel[styleGroup.code],item.prop)"
|
||||
/>
|
||||
<el-button
|
||||
icon="el-icon-minus"
|
||||
:disabled="j <3"
|
||||
circle
|
||||
class="point-button"
|
||||
style="margin-left: 4px;"
|
||||
@click="delPoint(j,formModel[styleGroup.code],item.prop)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</div>
|
||||
@ -92,6 +112,20 @@ export default {
|
||||
methods: {
|
||||
checkFieldType(field, type) {
|
||||
return field.type === type;
|
||||
},
|
||||
changeNumber(type, index, form, prop) {
|
||||
if (form[prop][index][type] == undefined || parseFloat(form[prop][index][type])) {
|
||||
const newForm = Object.assign([], form[prop]);
|
||||
newForm[index][type] = parseFloat(form[prop][index][type]) || 0;
|
||||
this.$set(form, prop, newForm);
|
||||
}
|
||||
},
|
||||
addPoint(index, form, prop) {
|
||||
const data = [0, 0];
|
||||
form[prop].splice(index + 1, 0, data);
|
||||
},
|
||||
delPoint(index, form, prop) {
|
||||
form[prop].splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -101,5 +135,13 @@ export default {
|
||||
.styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;}
|
||||
.formName .el-form-item__label {font-size:14px;}
|
||||
.formName.el-form-item {margin-bottom:25px}
|
||||
.point-section {float:left;display: inline-block;}
|
||||
.pointSplice{display: inline-block;margin-left: 4px;margin-right:4px;line-height: 28px;font-size:14px}
|
||||
.styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
|
||||
.point-button {width:28px;height:28px;display:inline-block;margin-left:5px;text-align:center;padding:0px;}
|
||||
// align-items: center;justify-content: center;
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.composeForm .el-form-item__label{line-height:20px;}
|
||||
.composeForm .el-form-item__content{font-size: 0px;}
|
||||
</style>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</el-tabs>
|
||||
<div class="bottomBtnGroup">
|
||||
<el-button type="primary" size="small" @click="onSubmit">添加</el-button>
|
||||
<el-button v-show="showDeleteButton" size="small" type="warning" @click="onModify">修改</el-button>
|
||||
<el-button v-show="showDeleteButton" size="small" type="warning" @click="onModify">修改</el-button>
|
||||
<el-button v-show="showDeleteButton" size="small" type="danger" @click="onDelete">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
|
||||
</div>
|
||||
@ -116,43 +116,43 @@ export default {
|
||||
handleTabClick() {
|
||||
|
||||
},
|
||||
onSubmit(){
|
||||
let that=this;
|
||||
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
onSubmit() {
|
||||
const that = this;
|
||||
that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let formModel=that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
let newModel=Object.assign({},formModel.base);
|
||||
newModel.type = that.enabledTab;
|
||||
newModel.code = utils.getUID()
|
||||
newModel.position = [0, 0];
|
||||
newModel.scale = [1, 1];
|
||||
newModel.style=Object.assign({},formModel.style);
|
||||
newModel.shape=Object.assign({},formModel.shape);
|
||||
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
|
||||
const formModel = that.$refs['dataform' + that.enabledTab][0].formModel;
|
||||
const newModel = Object.assign({}, formModel.base);
|
||||
newModel.type = that.enabledTab;
|
||||
newModel.code = utils.getUID();
|
||||
newModel.position = [0, 0];
|
||||
newModel.scale = [1, 1];
|
||||
newModel.style = Object.assign({}, formModel.style);
|
||||
newModel.shape = Object.assign({}, formModel.shape);
|
||||
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
onModify() {
|
||||
let that=this;
|
||||
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
onModify() {
|
||||
const that = this;
|
||||
that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let model = that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]);
|
||||
const model = that.$refs['dataform' + that.enabledTab][0].formModel;
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]);
|
||||
}
|
||||
});
|
||||
},
|
||||
onDelete(){
|
||||
let that=this;
|
||||
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let model = that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
initPage(){
|
||||
onDelete() {
|
||||
const that = this;
|
||||
that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const model = that.$refs['dataform' + that.enabledTab][0].formModel;
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
|
||||
}
|
||||
});
|
||||
},
|
||||
initPage() {
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -182,11 +182,11 @@ export default {
|
||||
}
|
||||
|
||||
.right-card{
|
||||
width: 470px;
|
||||
width: 550px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translateX(470px);
|
||||
transform: translateX(550px);
|
||||
transition: all 0.5s;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user