iscs 代码调整
This commit is contained in:
joylink_cuiweidong
parent
7ed95d2701
commit
156a63ea02
@ -8,46 +8,24 @@ class BuilderFactory {
|
||||
const elementList = Object.values(elementConst);
|
||||
elementList.forEach(element=>{
|
||||
const temp = Object.assign({}, element);
|
||||
|
||||
temp.formGroup = [];
|
||||
temp.model = {};
|
||||
temp.rules = {};
|
||||
|
||||
// 添加通用配置
|
||||
temp.model['base'] = {};
|
||||
temp.rules['base'] = {};
|
||||
form2Base.forEach(each=>{
|
||||
temp.model['base'][each.prop] = each.value;
|
||||
if (each.rules) {
|
||||
each.required = true;
|
||||
temp.rules['base'][each.prop] = each.rules;
|
||||
}
|
||||
});
|
||||
temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
|
||||
|
||||
// 添加样式配置 样式
|
||||
temp.model['style'] = {};
|
||||
temp.rules['style'] = {};
|
||||
const styleList = element.formList.style;
|
||||
styleList.forEach(each=>{
|
||||
temp.model['style'][each.prop] = each.value;
|
||||
if (each.rules) {
|
||||
each.required = true;
|
||||
temp.rules['style'][each.prop] = each.rules;
|
||||
}
|
||||
const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
|
||||
list.forEach(eachType=>{
|
||||
temp.model[eachType.type] = {};
|
||||
const eachList = element.formList[eachType.type];
|
||||
eachList.forEach(each=>{
|
||||
temp.model[eachType.type][each.prop] = each.value;
|
||||
});
|
||||
temp.formGroup.push({name:eachType.name, code:eachType.type, styleList:eachList});
|
||||
});
|
||||
temp.formGroup.push({name:'样式配置', code:'style', styleList:styleList});
|
||||
|
||||
// shape
|
||||
// element
|
||||
|
||||
// temp.formGroup.push({name:'绘图配置', code:'shape', styleList:form2Base});
|
||||
// temp.rules
|
||||
// let ClassName=element.code;
|
||||
// const = elementTypeList[element];
|
||||
// temp.formStyle=new ClassName();
|
||||
// 添加样式配置 style
|
||||
|
||||
this.formList.push(temp);
|
||||
});
|
||||
return this.formList;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
|
||||
import * as graphic from '../../core/graphic';
|
||||
import form2ShapeStyle from './form2ShapeStyle';
|
||||
import types from './types';
|
||||
const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
|
||||
|
||||
export const elementConst = {
|
||||
@ -12,10 +13,30 @@ export const elementConst = {
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
// opts.shape.x1 number 0 起始点横坐标。
|
||||
// opts.shape.y1 number 0 起始点纵坐标。
|
||||
// opts.shape.x2 number 0 终止点横坐标。
|
||||
// opts.shape.y2 number 0 终止点纵坐标。
|
||||
{prop: 'x1', label: '起始点横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始点横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '起始点横坐标'},
|
||||
{prop: 'y1', label: '起始点纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始点纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '起始点纵坐标'},
|
||||
{prop: 'x2', label: '终止点横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止点横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '终止点横坐标'},
|
||||
{prop: 'y2', label: '终止点纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止点纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '终止点纵坐标'}
|
||||
// opts.shape.percent number 1 已显示的百分比，用于绘制动画。
|
||||
]
|
||||
}
|
||||
@ -37,11 +58,50 @@ export const elementConst = {
|
||||
name:'矩形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
]
|
||||
{prop: 'x', label: '左上角横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入左上角横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '左上角横坐标'},
|
||||
{prop: 'y', label: '左上角纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入左上角纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '左上角纵坐标'},
|
||||
{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,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'},
|
||||
{prop: 'r', label: '圆角矩形半径', type: types.NumberArray, precision: 0, step:1, length:4,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆角矩形半径', trigger: 'blur' }
|
||||
],
|
||||
value: [5, 5, 5, 5],
|
||||
description: '用于创建圆角矩形。左上、右上、右下、左下角的半径依次为 r1、 r2、 r3、 r4。[1, 1, 1, 1]'
|
||||
}]
|
||||
}
|
||||
},
|
||||
[graphicType.Circle]: {
|
||||
@ -49,10 +109,37 @@ export const elementConst = {
|
||||
name:'圆形',
|
||||
formList:{
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '半径'}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -61,6 +148,16 @@ export const elementConst = {
|
||||
name:'多边形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
@ -97,10 +194,43 @@ export const elementConst = {
|
||||
name:'正多边形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape:[
|
||||
|
||||
{prop: 'x', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'y', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '半径'},
|
||||
{prop: 'n', label: '边数', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入边数', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '边数'}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -109,10 +239,43 @@ export const elementConst = {
|
||||
name:'椭圆',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape:[
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'rx', label: '横向半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入横向半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '横向半径'},
|
||||
{prop: 'ry', label: '纵向半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入纵向半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '纵向半径'}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -124,7 +287,46 @@ export const elementConst = {
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '半径'},
|
||||
{prop: 'startAngle', label: '起始弧度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '起始弧度'},
|
||||
{prop: 'endAngle', label: '终止弧度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '终止弧度'},
|
||||
{
|
||||
prop: 'clockwise',
|
||||
label: '顺时针方向',
|
||||
type: types.Boolean,
|
||||
rules:[
|
||||
{ required: true, message:'请选择图形是否不可见', trigger: 'change' }
|
||||
],
|
||||
value: true,
|
||||
description: '顺时针方向。'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -133,10 +335,65 @@ export const elementConst = {
|
||||
name:'扇形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '半径'},
|
||||
{prop: 'r0', label: '内半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入内半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '内半径'},
|
||||
{prop: 'startAngle', label: '起始弧度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '起始弧度'},
|
||||
{prop: 'endAngle', label: '终止弧度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '终止弧度'},
|
||||
{
|
||||
prop: 'clockwise',
|
||||
label: '顺时针方向',
|
||||
type: types.Boolean,
|
||||
rules:[
|
||||
{ required: true, message:'请选择图形是否不可见', trigger: 'change' }
|
||||
],
|
||||
value: true,
|
||||
description: '顺时针方向。'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -145,10 +402,43 @@ export const elementConst = {
|
||||
name:'心形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{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,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -157,10 +447,43 @@ export const elementConst = {
|
||||
name:'水滴',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{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,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ export default [
|
||||
{ prop: 'z1',
|
||||
label: '层级z1',
|
||||
type: types.Number,
|
||||
precisionFlag: 0,
|
||||
precision: 0,
|
||||
min:0,
|
||||
max:20,
|
||||
step:1,
|
||||
@ -18,7 +18,7 @@ export default [
|
||||
prop: 'z2',
|
||||
label: '层级z2',
|
||||
type: types.Number,
|
||||
precisionFlag: 0,
|
||||
precision: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
|
||||
@ -8,23 +8,13 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
precision: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入线宽', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
value: 1,
|
||||
description: '线宽'
|
||||
},
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
{
|
||||
prop: 'opacity',
|
||||
label: '不透明度',
|
||||
@ -32,7 +22,7 @@ export default [
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
precisionFlag: 2,
|
||||
precision: 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入不透明度', trigger: 'blur' }
|
||||
],
|
||||
@ -43,9 +33,9 @@ export default [
|
||||
prop: 'stroke',
|
||||
label: '描边样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入描边样式', trigger: 'blur' }
|
||||
],
|
||||
// rules:[
|
||||
// { required: true, message:'请输入描边样式', trigger: 'blur' }
|
||||
// ],
|
||||
value: '',
|
||||
description: '描边样式。'
|
||||
},
|
||||
@ -57,10 +47,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入描边虚线样式', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入描边虚线样式', trigger: 'blur' }
|
||||
// ],
|
||||
value: [0, 0],
|
||||
description: '描边虚线样式，参考 SVG stroke-dasharray。'
|
||||
},
|
||||
@ -71,10 +61,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
|
||||
// ],
|
||||
value: [0, 0],
|
||||
description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
|
||||
},
|
||||
@ -82,9 +72,9 @@ export default [
|
||||
prop: 'shadowColor',
|
||||
label: '阴影颜色',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
// rules:[
|
||||
// { required: true, message:'请输入阴影颜色', trigger: 'blur' }
|
||||
// ],
|
||||
value: '',
|
||||
description: '阴影颜色。'
|
||||
},
|
||||
@ -95,10 +85,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
|
||||
// ],
|
||||
value: 0,
|
||||
description: '阴影横向偏移。'
|
||||
},
|
||||
@ -109,10 +99,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
|
||||
// ],
|
||||
value: 0,
|
||||
description: '阴影纵向偏移。'
|
||||
},
|
||||
@ -123,10 +113,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
|
||||
// ],
|
||||
value: 0,
|
||||
description: '阴影模糊大小。'
|
||||
},
|
||||
|
||||
@ -1,402 +1,402 @@
|
||||
import types from './types';
|
||||
|
||||
export default [
|
||||
{
|
||||
prop: 'text',
|
||||
label: '内容',
|
||||
{
|
||||
prop: 'text',
|
||||
label: '内容',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入内容', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入内容', trigger: 'blur' }
|
||||
],
|
||||
value: 'context',
|
||||
description: '在图形中显示的文字。'
|
||||
},
|
||||
// {
|
||||
// prop: 'font',
|
||||
// label: '文字样式',
|
||||
description: '在图形中显示的文字。'
|
||||
},
|
||||
// {
|
||||
// prop: 'font',
|
||||
// label: '文字样式',
|
||||
// type: types.String,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入文字样式', trigger: 'blur' }
|
||||
// ],
|
||||
// { required: true, message:'请输入文字样式', trigger: 'blur' }
|
||||
// ],
|
||||
// value: '',
|
||||
// description: '文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。'
|
||||
// },
|
||||
{
|
||||
prop: 'fontStyle',
|
||||
label: '',
|
||||
// description: '文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。'
|
||||
// },
|
||||
{
|
||||
prop: 'fontStyle',
|
||||
label: '',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字样式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字样式', trigger: 'blur' }
|
||||
],
|
||||
value: 'normal',
|
||||
description: '同 CSS font-style。'
|
||||
},
|
||||
{
|
||||
prop: 'fontWeight',
|
||||
label: '文字粗细',
|
||||
description: '同 CSS font-style。'
|
||||
},
|
||||
{
|
||||
prop: 'fontWeight',
|
||||
label: '文字粗细',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字粗细', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字粗细', trigger: 'blur' }
|
||||
],
|
||||
value: 'normal',
|
||||
description: '同 CSS font-weight。'
|
||||
},
|
||||
{
|
||||
prop: 'fontSize',
|
||||
label: '文字大小',
|
||||
description: '同 CSS font-weight。'
|
||||
},
|
||||
{
|
||||
prop: 'fontSize',
|
||||
label: '文字大小',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字大小', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字大小', trigger: 'blur' }
|
||||
],
|
||||
value: '12px',
|
||||
description: '同 CSS font-size。'
|
||||
},
|
||||
{
|
||||
prop: 'fontFamily',
|
||||
label: '文字族',
|
||||
description: '同 CSS font-size。'
|
||||
},
|
||||
{
|
||||
prop: 'fontFamily',
|
||||
label: '文字族',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字族', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字族', trigger: 'blur' }
|
||||
],
|
||||
value: '文字样式',
|
||||
description: '同 CSS font-family。'
|
||||
},
|
||||
{
|
||||
prop: 'textFill',
|
||||
label: '文字填充样式',
|
||||
description: '同 CSS font-family。'
|
||||
},
|
||||
{
|
||||
prop: 'textFill',
|
||||
label: '文字填充样式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字填充样式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '文字填充样式。'
|
||||
},
|
||||
{
|
||||
prop: 'textStroke',
|
||||
label: '文字描边样式',
|
||||
description: '文字填充样式。'
|
||||
},
|
||||
{
|
||||
prop: 'textStroke',
|
||||
label: '文字描边样式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字描边样式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字描边样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '文字描边样式。'
|
||||
},
|
||||
{
|
||||
prop: 'textWidth',
|
||||
label: '文字宽度',
|
||||
description: '文字描边样式。'
|
||||
},
|
||||
{
|
||||
prop: 'textWidth',
|
||||
label: '文字宽度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字宽度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textHeight',
|
||||
label: '文字高度',
|
||||
description: '文字宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textHeight',
|
||||
label: '文字高度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字高度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字高度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字高度，仅用于设置背景色时需要设置。'
|
||||
},
|
||||
{
|
||||
prop: 'textLineWidth',
|
||||
label: '文字描边宽度',
|
||||
description: '文字高度，仅用于设置背景色时需要设置。'
|
||||
},
|
||||
{
|
||||
prop: 'textLineWidth',
|
||||
label: '文字描边宽度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字描边宽度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字描边宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字描边宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textLineHeight',
|
||||
label: '文字行高',
|
||||
description: '文字描边宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textLineHeight',
|
||||
label: '文字行高',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字行高', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字行高', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字行高。'
|
||||
},
|
||||
{
|
||||
prop: 'textPosition',
|
||||
label: '文字位置',
|
||||
description: '文字行高。'
|
||||
},
|
||||
{
|
||||
prop: 'textPosition',
|
||||
label: '文字位置',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字位置', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字位置', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
|
||||
},
|
||||
{
|
||||
prop: 'textOffset',
|
||||
label: '文字行高',
|
||||
description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
|
||||
},
|
||||
{
|
||||
prop: 'textOffset',
|
||||
label: '文字行高',
|
||||
type: types.Point,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字位置偏移', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字位置偏移', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字位置偏移，包括 x、 y。'
|
||||
},
|
||||
{
|
||||
prop: 'textAlign',
|
||||
label: '文字水平对齐方式',
|
||||
description: '文字位置偏移，包括 x、 y。'
|
||||
},
|
||||
{
|
||||
prop: 'textAlign',
|
||||
label: '文字水平对齐方式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。"
|
||||
},
|
||||
{
|
||||
prop: 'textVerticalAlign',
|
||||
label: '文字垂直对齐方式',
|
||||
description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。"
|
||||
},
|
||||
{
|
||||
prop: 'textVerticalAlign',
|
||||
label: '文字垂直对齐方式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。"
|
||||
},
|
||||
{
|
||||
prop: 'textDistance',
|
||||
label: '文字与其对齐的边缘的距离',
|
||||
description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。"
|
||||
},
|
||||
{
|
||||
prop: 'textDistance',
|
||||
label: '文字与其对齐的边缘的距离',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowColor',
|
||||
label: '文字阴影颜色',
|
||||
description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowColor',
|
||||
label: '文字阴影颜色',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字阴影颜色。"
|
||||
},
|
||||
{
|
||||
prop: 'textShadowBlur',
|
||||
label: '文字阴影模糊大小',
|
||||
description: '文字阴影颜色。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowBlur',
|
||||
label: '文字阴影模糊大小',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowOffsetX',
|
||||
label: '文字阴影水平偏移',
|
||||
description: '文字阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowOffsetX',
|
||||
label: '文字阴影水平偏移',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字阴影水平偏移', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字阴影水平偏移', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字阴影水平偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowOffsetY',
|
||||
label: '文字阴影垂直偏移',
|
||||
description: '文字阴影水平偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowOffsetY',
|
||||
label: '文字阴影垂直偏移',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字阴影垂直偏移', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字阴影垂直偏移', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字阴影垂直偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowColor',
|
||||
label: '文字包围盒阴影颜色',
|
||||
description: '文字阴影垂直偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowColor',
|
||||
label: '文字包围盒阴影颜色',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
value: 'transparent',
|
||||
description: "文字包围盒阴影颜色。"
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowBlur',
|
||||
label: '文字包围盒阴影模糊大小',
|
||||
description: '文字包围盒阴影颜色。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowBlur',
|
||||
label: '文字包围盒阴影模糊大小',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字包围盒阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowOffsetX',
|
||||
label: '文字包围盒阴影水平偏移',
|
||||
description: '文字包围盒阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowOffsetX',
|
||||
label: '文字包围盒阴影水平偏移',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒阴影水平偏移', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒阴影水平偏移', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字包围盒阴影水平偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowOffsetY',
|
||||
label: '文字包围盒阴影垂直偏移',
|
||||
description: '文字包围盒阴影水平偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowOffsetY',
|
||||
label: '文字包围盒阴影垂直偏移',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒阴影垂直偏移。', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒阴影垂直偏移。', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字包围盒阴影垂直偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'transformText',
|
||||
label: '文字是否跟随变换效果',
|
||||
description: '文字包围盒阴影垂直偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'transformText',
|
||||
label: '文字是否跟随变换效果',
|
||||
type: types.Boolean,
|
||||
rules:[
|
||||
{ required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
|
||||
],
|
||||
value: false,
|
||||
description: "文字是否跟随变换效果，仅对 Path 或 Image 元素有效"
|
||||
},
|
||||
{
|
||||
prop: 'textRotation',
|
||||
label: '文字旋转角度',
|
||||
description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
|
||||
},
|
||||
{
|
||||
prop: 'textRotation',
|
||||
label: '文字旋转角度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字旋转角度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字旋转角度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
|
||||
},
|
||||
{
|
||||
prop: 'textOrigin',
|
||||
label: '文字变换中心',
|
||||
description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
|
||||
},
|
||||
{
|
||||
prop: 'textOrigin',
|
||||
label: '文字变换中心',
|
||||
type: types.Point,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字变换中心', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字变换中心', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
|
||||
},
|
||||
{
|
||||
prop: 'textBackgroundColor',
|
||||
label: '文字包围盒颜色',
|
||||
description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
|
||||
},
|
||||
{
|
||||
prop: 'textBackgroundColor',
|
||||
label: '文字包围盒颜色',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字包围盒颜色。"
|
||||
},
|
||||
{
|
||||
prop: 'textBorderColor',
|
||||
label: '文字包围盒描边颜色',
|
||||
description: '文字包围盒颜色。'
|
||||
},
|
||||
{
|
||||
prop: 'textBorderColor',
|
||||
label: '文字包围盒描边颜色',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字包围盒描边颜色。"
|
||||
},
|
||||
{
|
||||
prop: 'textBorderWidth',
|
||||
label: '文字包围盒描边宽度',
|
||||
description: '文字包围盒描边颜色。'
|
||||
},
|
||||
{
|
||||
prop: 'textBorderWidth',
|
||||
label: '文字包围盒描边宽度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒描边宽度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒描边宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字包围盒描边宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textBorderRadius',
|
||||
label: '文字圆角大小',
|
||||
description: '文字包围盒描边宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textBorderRadius',
|
||||
label: '文字圆角大小',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字圆角大小', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字圆角大小', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字圆角大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textPadding',
|
||||
label: '文字内边距',
|
||||
description: '文字圆角大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textPadding',
|
||||
label: '文字内边距',
|
||||
type: types.Point,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字内边距', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字内边距', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: "文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。"
|
||||
}
|
||||
]
|
||||
description: '文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。'
|
||||
}
|
||||
];
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formModel" :rules="rules" class="composeForm" label-width="auto">
|
||||
<el-form ref="form" :model="formModel" class="composeForm" label-width="180px">
|
||||
<div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
|
||||
<div class="styleGroupName">
|
||||
{{ styleGroup.name }}
|
||||
</div>
|
||||
<template v-for="item in styleGroup.styleList">
|
||||
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" class="formName">
|
||||
<el-form-item :key="item.prop" :prop="styleGroup.code+'.'+item.prop" :label="item.label" class="formName" :rules="item.rules?item.rules:[]">
|
||||
<!-- {{ tempModel=styleGroup.code?formModel[styleGroup.code]:formModel }} -->
|
||||
<template v-if="checkFieldType(item, 'Number')">
|
||||
<el-input-number
|
||||
v-if="item.precisionFlag"
|
||||
v-if="item.precision!=undefined"
|
||||
v-model="formModel[styleGroup.code][item.prop]"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
@ -100,6 +100,6 @@ export default {
|
||||
.composeForm{padding: 10px 15px;}
|
||||
.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:12px}
|
||||
.formName.el-form-item {margin-bottom:25px}
|
||||
.styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
|
||||
</style>
|
||||
|
||||
@ -15,10 +15,15 @@
|
||||
>保存</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="enabledTab" class="card" type="card" @tab-click="handleTabClick">
|
||||
<el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code">
|
||||
<data-form :ref="'dataform'+index" :form="element" :form-model="element.model" :rules="element.rules" />
|
||||
<el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
|
||||
<data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="bottomBtnGroup">
|
||||
<el-button type="primary" size="small" @click="onSubmit">添加</el-button>
|
||||
<el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- <div class="right-card" :class="{'hide': tableShow}">
|
||||
@ -51,6 +56,7 @@ export default {
|
||||
draftShow: false,
|
||||
// tableShow: false,
|
||||
enabledTab:'',
|
||||
showDeleteButton:false,
|
||||
elementList:[]
|
||||
};
|
||||
},
|
||||
@ -104,7 +110,24 @@ export default {
|
||||
},
|
||||
handleTabClick() {
|
||||
|
||||
}
|
||||
},
|
||||
onSubmit(){
|
||||
let 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.style=Object.assign({},formModel.style);
|
||||
newModel.shape=Object.assign({},formModel.shape);
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice(){
|
||||
|
||||
},
|
||||
initPage(){
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -119,6 +142,7 @@ export default {
|
||||
flex:1;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom:30px;
|
||||
}
|
||||
|
||||
.map-view {
|
||||
@ -176,6 +200,23 @@ export default {
|
||||
box-shadow: -2px 0px 2px #000000;
|
||||
}
|
||||
}
|
||||
.bottomBtnGroup{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
text-align: right;
|
||||
right: 0px;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
padding-top: 5px;
|
||||
border-bottom: 1px #dedede solid;
|
||||
box-shadow: 2px -3px 5px #dedede;
|
||||
}
|
||||
.bottomBtnGroup button{
|
||||
display: inline-block;
|
||||
margin-right:10px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.heightClass .el-card__body{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user