# Conflicts:
#	src/iscs_new/core/form/elementConst.js
#	src/views/iscs_new/components/dataForm.vue
#	src/views/iscs_new/iscsDraw/index.vue
This commit is contained in:
ival 2021-04-08 11:20:45 +08:00
commit d1281b0346
4 changed files with 360 additions and 271 deletions

View File

@ -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,35 +454,35 @@ 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' }
],
@ -468,8 +516,8 @@ export const elementConst = {
],
value: 180,
description: '终止弧度'
},
{
},
{
prop: 'clockwise',
label: '顺时针方向',
type: types.Boolean,
@ -488,7 +536,7 @@ export const elementConst = {
formList: {
style: [
...form2ShapeStyle,
{
{
prop: 'fill',
label: '填充样式',
type: types.Color,
@ -501,47 +549,47 @@ 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' }
],
@ -575,8 +623,8 @@ export const elementConst = {
],
value: 180,
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: '高度'
}
}
]
}
}

View File

@ -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'
};

View File

@ -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,8 +112,21 @@ export default {
return field.type === type;
},
init() {
}
},
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);
}
}
};
</script>
@ -102,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>

View File

@ -101,7 +101,7 @@ export default {
newModel.code = utils.getUID(this.enabledTab)
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
}
});
});
},
onModify() {
this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => {
@ -154,11 +154,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;