joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2021-04-08 11:15:39 +08:00
parent dcefdfab33
commit c9b5c908a0
4 changed files with 425 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

620
src/iscs_new/core/form/elementConst.js
View File

@ -14,47 +14,47 @@ export const elementConst = {
], ],
shape: [ shape: [
{ {
prop: 'x1', prop: 'x1',
label: '起始点横坐标', label: '起始点横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入起始点横坐标', trigger: 'blur' } { required: true, message:'请输入起始点横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '起始点横坐标' description: '起始点横坐标'
}, },
{ {
prop: 'y1', prop: 'y1',
label: '起始点纵坐标', label: '起始点纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入起始点纵坐标', trigger: 'blur' } { required: true, message:'请输入起始点纵坐标', trigger: 'blur' }
], ],
value: 100, value: 100,
description: '起始点纵坐标' description: '起始点纵坐标'
}, },
{ {
prop: 'x2', prop: 'x2',
label: '终止点横坐标', label: '终止点横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入终止点横坐标', trigger: 'blur' } { required: true, message:'请输入终止点横坐标', trigger: 'blur' }
], ],
value: 100, value: 100,
description: '终止点横坐标' description: '终止点横坐标'
}, },
{ {
prop: 'y2', prop: 'y2',
label: '终止点纵坐标', label: '终止点纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入终止点纵坐标', trigger: 'blur' } { required: true, message:'请输入终止点纵坐标', trigger: 'blur' }
], ],
@ -81,8 +81,8 @@ export const elementConst = {
name:'矩形', name:'矩形',
formList: { formList: {
style: [ style: [
...form2ShapeStyle, ...form2ShapeStyle,
{ {
prop: 'fill', prop: 'fill',
label: '填充样式', label: '填充样式',
type: types.Color, type: types.Color,
@ -95,60 +95,60 @@ export const elementConst = {
], ],
shape: [ shape: [
{ {
prop: 'x', prop: 'x',
label: '左上角横坐标', label: '左上角横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入左上角横坐标', trigger: 'blur' } { required: true, message:'请输入左上角横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '左上角横坐标' description: '左上角横坐标'
}, },
{ {
prop: 'y', prop: 'y',
label: '左上角纵坐标', label: '左上角纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入左上角纵坐标', trigger: 'blur' } { required: true, message:'请输入左上角纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '左上角纵坐标' description: '左上角纵坐标'
}, },
{ {
prop: 'width', prop: 'width',
label: '宽度', label: '宽度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入宽度', trigger: 'blur' } { required: true, message:'请输入宽度', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '宽度' description: '宽度'
}, },
{ {
prop: 'height', prop: 'height',
label: '高度', label: '高度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入高度', trigger: 'blur' } { required: true, message:'请输入高度', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '高度' description: '高度'
}, },
{ {
prop: 'r', prop: 'r',
label: '圆角矩形半径', label: '圆角矩形半径',
type: types.NumberArray, type: types.NumberArray,
precision: 0, precision: 0,
step:1, step:1,
length:4, length:4,
rules:[ rules:[
{ required: true, message:'请输入圆角矩形半径', trigger: 'blur' } { required: true, message:'请输入圆角矩形半径', trigger: 'blur' }
], ],
@ -162,8 +162,8 @@ export const elementConst = {
name:'圆形', name:'圆形',
formList:{ formList:{
style: [ style: [
...form2ShapeStyle, ...form2ShapeStyle,
{ {
prop: 'fill', prop: 'fill',
label: '填充样式', label: '填充样式',
type: types.Color, type: types.Color,
@ -176,40 +176,40 @@ export const elementConst = {
], ],
shape: [ shape: [
{ {
prop: 'cx', prop: 'cx',
label: '圆心横坐标', label: '圆心横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' } { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心横坐标'}, description: '圆心横坐标'},
{ {
prop: 'cy', prop: 'cy',
label: '圆心纵坐标', label: '圆心纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' } { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心纵坐标' description: '圆心纵坐标'
}, },
{ {
prop: 'r', prop: 'r',
label: '半径', label: '半径',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入半径', trigger: 'blur' } { required: true, message:'请输入半径', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '半径' description: '半径'
} }
] ]
} }
}, },
@ -218,8 +218,8 @@ export const elementConst = {
name:'多边形', name:'多边形',
formList: { formList: {
style: [ style: [
...form2ShapeStyle, ...form2ShapeStyle,
{ {
prop: 'fill', prop: 'fill',
label: '填充样式', label: '填充样式',
type: types.Color, type: types.Color,
@ -231,7 +231,31 @@ export const elementConst = {
} }
], ],
shape: [ 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 ...form2ShapeStyle
], ],
shape: [ 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:'正多边形', name:'正多边形',
formList: { formList: {
style: [ style: [
...form2ShapeStyle, ...form2ShapeStyle,
{ {
prop: 'fill', prop: 'fill',
label: '填充样式', label: '填充样式',
type: types.Color, type: types.Color,
@ -278,53 +326,53 @@ export const elementConst = {
], ],
shape:[ shape:[
{ {
prop: 'x', prop: 'x',
label: '圆心横坐标', label: '圆心横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' } { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心横坐标' description: '圆心横坐标'
}, },
{ {
prop: 'y', prop: 'y',
label: '圆心纵坐标', label: '圆心纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' } { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心纵坐标' description: '圆心纵坐标'
}, },
{ {
prop: 'r', prop: 'r',
label: '半径', label: '半径',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入半径', trigger: 'blur' } { required: true, message:'请输入半径', trigger: 'blur' }
], ],
value: 40, value: 40,
description: '半径' description: '半径'
}, },
{ {
prop: 'n', prop: 'n',
label: '边数', label: '边数',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入边数', trigger: 'blur' } { required: true, message:'请输入边数', trigger: 'blur' }
], ],
value: 5, value: 5,
description: '边数' description: '边数'
} }
] ]
} }
}, },
@ -333,8 +381,8 @@ export const elementConst = {
name:'椭圆', name:'椭圆',
formList: { formList: {
style: [ style: [
...form2ShapeStyle, ...form2ShapeStyle,
{ {
prop: 'fill', prop: 'fill',
label: '填充样式', label: '填充样式',
type: types.Color, type: types.Color,
@ -347,53 +395,53 @@ export const elementConst = {
], ],
shape:[ shape:[
{ {
prop: 'cx', prop: 'cx',
label: '圆心横坐标', label: '圆心横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' } { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心横坐标' description: '圆心横坐标'
}, },
{ {
prop: 'cy', prop: 'cy',
label: '圆心纵坐标', label: '圆心纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' } { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心纵坐标' description: '圆心纵坐标'
}, },
{ {
prop: 'rx', prop: 'rx',
label: '横向半径', label: '横向半径',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入横向半径', trigger: 'blur' } { required: true, message:'请输入横向半径', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '横向半径' description: '横向半径'
}, },
{ {
prop: 'ry', prop: 'ry',
label: '纵向半径', label: '纵向半径',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入纵向半径', trigger: 'blur' } { required: true, message:'请输入纵向半径', trigger: 'blur' }
], ],
value: 30, value: 30,
description: '纵向半径' description: '纵向半径'
} }
] ]
} }
}, },
@ -406,70 +454,70 @@ export const elementConst = {
], ],
shape: [ shape: [
{ {
prop: 'cx', prop: 'cx',
label: '圆心横坐标', label: '圆心横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' } { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心横坐标' description: '圆心横坐标'
}, },
{ {
prop: 'cy', prop: 'cy',
label: '圆心纵坐标', label: '圆心纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' } { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心纵坐标' description: '圆心纵坐标'
}, },
{ {
prop: 'r', prop: 'r',
label: '半径', label: '半径',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入半径', trigger: 'blur' } { required: true, message:'请输入半径', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '半径' description: '半径'
}, },
{ {
prop: 'startAngle', prop: 'startAngle',
label: '起始弧度', label: '起始弧度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
min: 0, min: 0,
max: Math.PI*2, max: Math.PI * 2,
rules:[ rules:[
{ required: true, message:'请输入起始弧度', trigger: 'blur' } { required: true, message:'请输入起始弧度', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '起始弧度' description: '起始弧度'
}, },
{ {
prop: 'endAngle', prop: 'endAngle',
label: '终止弧度', label: '终止弧度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
min: 0, min: 0,
max: Math.PI*2, max: Math.PI * 2,
rules:[ rules:[
{ required: true, message:'请输入终止弧度', trigger: 'blur' } { required: true, message:'请输入终止弧度', trigger: 'blur' }
], ],
value: Math.PI, value: Math.PI,
description: '终止弧度' description: '终止弧度'
}, },
{ {
prop: 'clockwise', prop: 'clockwise',
label: '顺时针方向', label: '顺时针方向',
type: types.Boolean, type: types.Boolean,
@ -488,7 +536,7 @@ export const elementConst = {
formList: { formList: {
style: [ style: [
...form2ShapeStyle, ...form2ShapeStyle,
{ {
prop: 'fill', prop: 'fill',
label: '填充样式', label: '填充样式',
type: types.Color, type: types.Color,
@ -501,82 +549,82 @@ export const elementConst = {
], ],
shape: [ shape: [
{ {
prop: 'cx', prop: 'cx',
label: '圆心横坐标', label: '圆心横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' } { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心横坐标' description: '圆心横坐标'
}, },
{ {
prop: 'cy', prop: 'cy',
label: '圆心纵坐标', label: '圆心纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' } { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心纵坐标' description: '圆心纵坐标'
}, },
{ {
prop: 'r', prop: 'r',
label: '半径', label: '半径',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入半径', trigger: 'blur' } { required: true, message:'请输入半径', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '半径' description: '半径'
}, },
{ {
prop: 'r0', prop: 'r0',
label: '内半径', label: '内半径',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入内半径', trigger: 'blur' } { required: true, message:'请输入内半径', trigger: 'blur' }
], ],
value: 30, value: 30,
description: '内半径' description: '内半径'
}, },
{ {
prop: 'startAngle', prop: 'startAngle',
label: '起始弧度', label: '起始弧度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
min: 0, min: 0,
max: Math.PI*2, max: Math.PI * 2,
rules:[ rules:[
{ required: true, message:'请输入起始弧度', trigger: 'blur' } { required: true, message:'请输入起始弧度', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '起始弧度' description: '起始弧度'
}, },
{ {
prop: 'endAngle', prop: 'endAngle',
label: '终止弧度', label: '终止弧度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
min: 0, min: 0,
max: Math.PI*2, max: Math.PI * 2,
rules:[ rules:[
{ required: true, message:'请输入终止弧度', trigger: 'blur' } { required: true, message:'请输入终止弧度', trigger: 'blur' }
], ],
value: Math.PI, value: Math.PI,
description: '终止弧度' description: '终止弧度'
}, },
{ {
prop: 'clockwise', prop: 'clockwise',
label: '顺时针方向', label: '顺时针方向',
type: types.Boolean, type: types.Boolean,
@ -594,8 +642,8 @@ export const elementConst = {
name:'心形', name:'心形',
formList: { formList: {
style: [ style: [
...form2ShapeStyle, ...form2ShapeStyle,
{ {
prop: 'fill', prop: 'fill',
label: '填充样式', label: '填充样式',
type: types.Color, type: types.Color,
@ -608,53 +656,53 @@ export const elementConst = {
], ],
shape: [ shape: [
{ {
prop: 'cx', prop: 'cx',
label: '圆心横坐标', label: '圆心横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' } { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心横坐标' description: '圆心横坐标'
}, },
{ {
prop: 'cy', prop: 'cy',
label: '圆心纵坐标', label: '圆心纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' } { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心纵坐标' description: '圆心纵坐标'
}, },
{ {
prop: 'width', prop: 'width',
label: '宽度', label: '宽度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入宽度', trigger: 'blur' } { required: true, message:'请输入宽度', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '宽度' description: '宽度'
}, },
{ {
prop: 'height', prop: 'height',
label: '高度', label: '高度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入高度', trigger: 'blur' } { required: true, message:'请输入高度', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '高度' description: '高度'
} }
] ]
} }
}, },
@ -663,8 +711,8 @@ export const elementConst = {
name:'水滴', name:'水滴',
formList: { formList: {
style: [ style: [
...form2ShapeStyle, ...form2ShapeStyle,
{ {
prop: 'fill', prop: 'fill',
label: '填充样式', label: '填充样式',
type: types.Color, type: types.Color,
@ -677,52 +725,52 @@ export const elementConst = {
], ],
shape: [ shape: [
{ {
prop: 'cx', prop: 'cx',
label: '圆心横坐标', label: '圆心横坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' } { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心横坐标'}, description: '圆心横坐标'},
{ {
prop: 'cy', prop: 'cy',
label: '圆心纵坐标', label: '圆心纵坐标',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' } { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '圆心纵坐标' description: '圆心纵坐标'
}, },
{ {
prop: 'width', prop: 'width',
label: '宽度', label: '宽度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入宽度', trigger: 'blur' } { required: true, message:'请输入宽度', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '宽度' description: '宽度'
}, },
{ {
prop: 'height', prop: 'height',
label: '高度', label: '高度',
type: types.Number, type: types.Number,
precision: 0, precision: 0,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入高度', trigger: 'blur' } { required: true, message:'请输入高度', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '高度' description: '高度'
} }
] ]
} }
} }

18
src/iscs_new/core/form/types.js
View File

@ -1,10 +1,10 @@
export default { export default {
String: 'String', String: 'String',
Number: 'Number', Number: 'Number',
Select: 'Select', Select: 'Select',
Boolean: 'Boolean', Boolean: 'Boolean',
Color: 'Color', Color: 'Color',
Point: 'Point', Point: 'Point',
Points: 'Points', Points: 'Points',
NumberArray: 'NumberArray' NumberArray: 'NumberArray'
} };

56
src/views/iscs_new/components/dataForm.vue
View File

@ -1,5 +1,5 @@
<template> <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 v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
<div class="styleGroupName"> <div class="styleGroupName">
{{ styleGroup.name }} {{ styleGroup.name }}
@ -45,6 +45,7 @@
v-for="count in item.length" v-for="count in item.length"
:key="count" :key="count"
v-model="formModel[styleGroup.code][item.prop][count-1]" v-model="formModel[styleGroup.code][item.prop][count-1]"
style="margin-left:5px"
size="small" size="small"
:min="isNaN(item.min) ? -Infinity : item.min" :min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max" :max="isNaN(item.max)? Infinity : item.max"
@ -52,12 +53,31 @@
:precision="item.precision" :precision="item.precision"
/> />
</template> </template>
<!-- <template v-else-if="checkFieldType(item, 'Color')"> <template v-else-if="checkFieldType(item, 'Points')">
<el-color-picker <div class="point-section">
v-model="formModel[styleGroup.code][item.prop]" <template v-for="(point, j) in formModel[styleGroup.code][item.prop]">
size="small" <div :key="j" style="overflow: hidden;">
/> <el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.code],item.prop)" />
</template> --> <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> </el-form-item>
</template> </template>
</div> </div>
@ -92,6 +112,20 @@ export default {
methods: { methods: {
checkFieldType(field, type) { checkFieldType(field, type) {
return field.type === 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;} .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__label {font-size:14px;}
.formName.el-form-item {margin-bottom:25px} .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;} .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> </style>

66
src/views/iscs_new/iscsDraw/index.vue
View File

@ -22,7 +22,7 @@
</el-tabs> </el-tabs>
<div class="bottomBtnGroup"> <div class="bottomBtnGroup">
<el-button type="primary" size="small" @click="onSubmit">添加</el-button> <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" type="danger" @click="onDelete">删除</el-button>
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button> <el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
</div> </div>
@ -116,43 +116,43 @@ export default {
handleTabClick() { handleTabClick() {
}, },
onSubmit(){ onSubmit() {
let that=this; const that = this;
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => { that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) { if (valid) {
let formModel=that.$refs['dataform'+that.enabledTab][0].formModel; const formModel = that.$refs['dataform' + that.enabledTab][0].formModel;
let newModel=Object.assign({},formModel.base); const newModel = Object.assign({}, formModel.base);
newModel.type = that.enabledTab; newModel.type = that.enabledTab;
newModel.code = utils.getUID() newModel.code = utils.getUID();
newModel.position = [0, 0]; newModel.position = [0, 0];
newModel.scale = [1, 1]; newModel.scale = [1, 1];
newModel.style=Object.assign({},formModel.style); newModel.style = Object.assign({}, formModel.style);
newModel.shape=Object.assign({},formModel.shape); newModel.shape = Object.assign({}, formModel.shape);
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]); this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
} }
}); });
}, },
onModify() { onModify() {
let that=this; const that = this;
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => { that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) { if (valid) {
let model = that.$refs['dataform'+that.enabledTab][0].formModel; const model = that.$refs['dataform' + that.enabledTab][0].formModel;
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]); 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> </script>
@ -182,11 +182,11 @@ export default {
} }
.right-card{ .right-card{
width: 470px; width: 550px;
height: 100%; height: 100%;
position: absolute; position: absolute;
right: 0; right: 0;
transform: translateX(470px); transform: translateX(550px);
transition: all 0.5s; transition: all 0.5s;
background: #fff; background: #fff;
z-index: 9; z-index: 9;