From 9ceeb485628efec0d48a3836113907096ab2c284 Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Thu, 8 Apr 2021 15:17:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/iscs_new/core/form/elementConst.js     |  76 ++---
 src/iscs_new/core/form/form2ShapeStyle.js  |   4 +-
 src/iscs_new/core/form/form2TextStyle.js   | 374 +++++++++++----------
 src/views/iscs_new/components/dataForm.vue | 189 ++++++-----
 4 files changed, 347 insertions(+), 296 deletions(-)

diff --git a/src/iscs_new/core/form/elementConst.js b/src/iscs_new/core/form/elementConst.js
index 8ab9ba0a9..97034053b 100644
--- a/src/iscs_new/core/form/elementConst.js
+++ b/src/iscs_new/core/form/elementConst.js
@@ -1,6 +1,7 @@
 
 import * as graphic from '../../core/graphic';
 import form2ShapeStyle from './form2ShapeStyle';
+import form2TextStyle from './form2TextStyle';
 import types from './types';
 const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
 
@@ -69,10 +70,9 @@ export const elementConst = {
         name:'文字',
         formList: {
             style: [
-
+                ...form2TextStyle
             ],
             shape: [
-
             ]
         }
     },
@@ -488,29 +488,29 @@ export const elementConst = {
                     ],
                     value: 50,
                     description: '半径'
-				},
-				{
-					prop: 'startAngle',
-					label: '起始弧度',
-					type: types.Number,
-					precision: 0,
-					step:1,
-					min: 0,
-					max: 360,
+                },
+                {
+                    prop: 'startAngle',
+                    label: '起始弧度',
+                    type: types.Number,
+                    precision: 0,
+                    step:1,
+                    min: 0,
+                    max: 360,
                     rules:[
                         { required: true, message:'请输入起始弧度', trigger: 'blur' }
                     ],
                     value: 0,
                     description: '起始弧度'
-				},
-				{
-					prop: 'endAngle',
-					label: '终止弧度',
-					type: types.Number,
-					precision: 0,
-					step:1,
-					min: 0,
-					max: 360,
+                },
+                {
+                    prop: 'endAngle',
+                    label: '终止弧度',
+                    type: types.Number,
+                    precision: 0,
+                    step:1,
+                    min: 0,
+                    max: 360,
                     rules:[
                         { required: true, message:'请输入终止弧度', trigger: 'blur' }
                     ],
@@ -595,29 +595,29 @@ export const elementConst = {
                     ],
                     value: 30,
                     description: '内半径'
-				},
-				{
-					prop: 'startAngle',
-					label: '起始弧度',
-					type: types.Number,
-					precision: 0,
-					step:1,
-					min: 0,
-					max: 360,
+                },
+                {
+                    prop: 'startAngle',
+                    label: '起始弧度',
+                    type: types.Number,
+                    precision: 0,
+                    step:1,
+                    min: 0,
+                    max: 360,
                     rules:[
                         { required: true, message:'请输入起始弧度', trigger: 'blur' }
                     ],
                     value: 0,
                     description: '起始弧度'
-				},
-				{
-					prop: 'endAngle',
-					label: '终止弧度',
-					type: types.Number,
-					precision: 0,
-					step:1,
-					min: 0,
-					max: 360,
+                },
+                {
+                    prop: 'endAngle',
+                    label: '终止弧度',
+                    type: types.Number,
+                    precision: 0,
+                    step:1,
+                    min: 0,
+                    max: 360,
                     rules:[
                         { required: true, message:'请输入终止弧度', trigger: 'blur' }
                     ],
diff --git a/src/iscs_new/core/form/form2ShapeStyle.js b/src/iscs_new/core/form/form2ShapeStyle.js
index 8707101f7..c2cafd8d3 100644
--- a/src/iscs_new/core/form/form2ShapeStyle.js
+++ b/src/iscs_new/core/form/form2ShapeStyle.js
@@ -33,7 +33,7 @@ export default [
         prop: 'stroke',
         label: '描边样式',
         type: types.Color,
-        value: '',
+        value: 'rgba(0,0,0,0)',
         description: '描边样式。'
     },
     {
@@ -63,7 +63,7 @@ export default [
         prop: 'shadowColor',
         label: '阴影颜色',
         type: types.Color,
-        value: '',
+        value: 'rgba(0,0,0,0)',
         description: '阴影颜色。'
     },
     {
diff --git a/src/iscs_new/core/form/form2TextStyle.js b/src/iscs_new/core/form/form2TextStyle.js
index 3f4e63694..cbb57fbc5 100644
--- a/src/iscs_new/core/form/form2TextStyle.js
+++ b/src/iscs_new/core/form/form2TextStyle.js
@@ -8,7 +8,8 @@ export default [
         rules:[
             { required: true, message:'请输入内容', trigger: 'blur' }
         ],
-        value: 'context',
+        value: '内容',
+        maxlength:1000,
         description: '在图形中显示的文字。'
     },
     // {
@@ -21,188 +22,212 @@ export default [
     //     value: '',
     // 	description: '文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。'
     // },
-    {
-        prop: 'fontStyle',
-        label: '',
-        type: types.String,
-        rules:[
-            { required: true, message:'请输入文字样式', trigger: 'blur' }
-        ],
-        value: 'normal',
-        description: '同 CSS font-style。'
-    },
+    // {
+    //     prop: 'fontStyle',
+    //     label: '',
+    //     type: types.String,
+    //     rules:[
+    //         { required: true, message:'请输入文字样式', trigger: 'blur' }
+    //     ],
+    //     value: 'normal',
+    //     description: '同 CSS font-style。'
+    // },
     {
         prop: 'fontWeight',
         label: '文字粗细',
-        type: types.String,
+        type: types.Number,
         rules:[
             { required: true, message:'请输入文字粗细', trigger: 'blur' }
         ],
-        value: 'normal',
+        min: 300,
+        max: 800,
+        step: 100,
+        precisionFlag: 0,
+        value: 300,
         description: '同 CSS font-weight。'
     },
     {
         prop: 'fontSize',
         label: '文字大小',
-        type: types.String,
+        type: types.Number,
+        min: 8,
+        max: 30,
+        step: 1,
+        precisionFlag: 0,
         rules:[
             { required: true, message:'请输入文字大小', trigger: 'blur' }
         ],
-        value: '12px',
+        value: 16,
         description: '同 CSS font-size。'
     },
-    {
-        prop: 'fontFamily',
-        label: '文字族',
-        type: types.String,
-        rules:[
-            { required: true, message:'请输入文字族', trigger: 'blur' }
-        ],
-        value: '文字样式',
-        description: '同 CSS font-family。'
-    },
+    // {
+    //     prop: 'fontFamily',
+    //     label: '文字族',
+    //     type: types.String,
+    //     rules:[
+    //         { required: true, message:'请输入文字族', trigger: 'blur' }
+    //     ],
+    //     value: '文字样式',
+    //     description: '同 CSS font-family。'
+    // },
     {
         prop: 'textFill',
         label: '文字填充样式',
-        type: types.String,
+        type: types.Color,
         rules:[
             { required: true, message:'请输入文字填充样式', trigger: 'blur' }
         ],
-        value: '',
+        value: '#000',
         description: '文字填充样式。'
     },
     {
         prop: 'textStroke',
         label: '文字描边样式',
-        type: types.String,
+        type: types.Color,
         rules:[
             { required: true, message:'请输入文字描边样式', trigger: 'blur' }
         ],
-        value: '',
+        value: '#fff',
         description: '文字描边样式。'
     },
     {
-        prop: 'textWidth',
-        label: '文字宽度',
+        prop: 'lineWidth',
+        label: '线宽',
         type: types.Number,
         min: 0,
-        max: 10000,
+        max: 100,
         step: 1,
-        precisionFlag: 0,
+        precision: 0,
         rules:[
-            { required: true, message:'请输入文字宽度', trigger: 'blur' }
+            { required: true, message:'请输入线宽', trigger: 'blur' }
         ],
-        value: 0,
-        description: '文字宽度。'
-    },
-    {
-        prop: 'textHeight',
-        label: '文字高度',
-        type: types.Number,
-        min: 0,
-        max: 10000,
-        step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入文字高度', trigger: 'blur' }
-        ],
-        value: 0,
-        description: '文字高度，仅用于设置背景色时需要设置。'
-    },
-    {
-        prop: 'textLineWidth',
-        label: '文字描边宽度',
-        type: types.Number,
-        min: 0,
-        max: 10000,
-        step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入文字描边宽度', trigger: 'blur' }
-        ],
-        value: 0,
-        description: '文字描边宽度。'
-    },
-    {
-        prop: 'textLineHeight',
-        label: '文字行高',
-        type: types.Number,
-        min: 0,
-        max: 10000,
-        step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入文字行高', trigger: 'blur' }
-        ],
-        value: 0,
-        description: '文字行高。'
-    },
-    {
-        prop: 'textPosition',
-        label: '文字位置',
-        type: types.String,
-        rules:[
-            { required: true, message:'请输入文字位置', trigger: 'blur' }
-        ],
-        value: '',
-        description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
-    },
-    {
-        prop: 'textOffset',
-        label: '文字行高',
-        type: types.Point,
-        min: 0,
-        max: 10000,
-        step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入文字位置偏移', trigger: 'blur' }
-        ],
-        value: 0,
-        description: '文字位置偏移，包括 x、 y。'
+        value: 1,
+        description: '线宽'
     },
+    // {
+    //     prop: 'textWidth',
+    //     label: '文字宽度',
+    //     type: types.Number,
+    //     min: 0,
+    //     max: 10000,
+    //     step: 1,
+    //     precisionFlag: 0,
+    //     rules:[
+    //         { required: true, message:'请输入文字宽度', trigger: 'blur' }
+    //     ],
+    //     value: 0,
+    //     description: '文字宽度。'
+    // },
+    // {
+    //     prop: 'textHeight',
+    //     label: '文字高度',
+    //     type: types.Number,
+    //     min: 0,
+    //     max: 10000,
+    //     step: 1,
+    //     precisionFlag: 0,
+    //     rules:[
+    //         { required: true, message:'请输入文字高度', trigger: 'blur' }
+    //     ],
+    //     value: 0,
+    //     description: '文字高度，仅用于设置背景色时需要设置。'
+    // },
+    // {
+    //     prop: 'textLineWidth',
+    //     label: '文字描边宽度',
+    //     type: types.Number,
+    //     min: 0,
+    //     max: 10000,
+    //     step: 1,
+    //     precisionFlag: 0,
+    //     rules:[
+    //         { required: true, message:'请输入文字描边宽度', trigger: 'blur' }
+    //     ],
+    //     value: 0,
+    //     description: '文字描边宽度。'
+    // },
+    // {
+    //     prop: 'textLineHeight',
+    //     label: '文字行高',
+    //     type: types.Number,
+    //     min: 0,
+    //     max: 10000,
+    //     step: 1,
+    //     precisionFlag: 0,
+    //     rules:[
+    //         { required: true, message:'请输入文字行高', trigger: 'blur' }
+    //     ],
+    //     value: 0,
+    //     description: '文字行高。'
+    // },
+    // {
+    //     prop: 'textPosition',
+    //     label: '文字位置',
+    //     type: types.Select,
+    //     rules:[
+    //         { required: true, message:'请输入文字位置', trigger: 'blur' }
+    //     ],
+    //     value: '',
+    //     description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
+    // },
+    // {
+    //     prop: 'textOffset',
+    //     label: '文字行高',
+    //     type: types.Point,
+    //     min: 0,
+    //     max: 10000,
+    //     step: 1,
+    //     precisionFlag: 0,
+    //     rules:[
+    //         { required: true, message:'请输入文字位置偏移', trigger: 'blur' }
+    //     ],
+    //     value: 0,
+    //     description: '文字位置偏移，包括 x、 y。'
+    // },
     {
         prop: 'textAlign',
         label: '文字水平对齐方式',
-        type: types.String,
+        type: types.Select,
         rules:[
             { required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
         ],
-        value: '',
+        value: 'left',
+        optionList:[{value:'left', label:'左对齐'}, {value:'center', label:'居中对齐'}, {value:'right', label:'右对齐'}],
         description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。"
     },
     {
         prop: 'textVerticalAlign',
         label: '文字垂直对齐方式',
-        type: types.String,
+        type: types.Select,
         rules:[
             { required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
         ],
-        value: '',
+        value: 'top',
+        optionList:[{value:'top', label:'顶对齐'}, {value:'middle', label:'居中对齐'}, {value:'bottom', label:'底对齐'}],
         description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。"
     },
-    {
-        prop: 'textDistance',
-        label: '文字与其对齐的边缘的距离',
-        type: types.Number,
-        min: 0,
-        max: 10000,
-        step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
-        ],
-        value: 0,
-        description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
-    },
+    // {
+    //     prop: 'textDistance',
+    //     label: '文字与其对齐的边缘的距离',
+    //     type: types.Number,
+    //     min: 0,
+    //     max: 10000,
+    //     step: 1,
+    //     precisionFlag: 0,
+    //     rules:[
+    //         { required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
+    //     ],
+    //     value: 0,
+    //     description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
+    // },
     {
         prop: 'textShadowColor',
         label: '文字阴影颜色',
-        type: types.String,
+        type: types.Color,
         rules:[
             { required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
         ],
-        value: '',
+        value: 'rgba(0,0,0,0)',
         description: '文字阴影颜色。'
     },
     {
@@ -224,7 +249,7 @@ export default [
         label: '文字阴影水平偏移',
         type: types.Number,
         min: 0,
-        max: 10000,
+        max: 1000,
         step: 1,
         precisionFlag: 0,
         rules:[
@@ -238,7 +263,7 @@ export default [
         label: '文字阴影垂直偏移',
         type: types.Number,
         min: 0,
-        max: 10000,
+        max: 1000,
         step: 1,
         precisionFlag: 0,
         rules:[
@@ -250,11 +275,11 @@ export default [
     {
         prop: 'textBoxShadowColor',
         label: '文字包围盒阴影颜色',
-        type: types.String,
+        type: types.Color,
         rules:[
             { required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
         ],
-        value: 'transparent',
+        value: 'rgba(0,0,0,0)',
         description: '文字包围盒阴影颜色。'
     },
     {
@@ -262,7 +287,7 @@ export default [
         label: '文字包围盒阴影模糊大小',
         type: types.Number,
         min: 0,
-        max: 10000,
+        max: 1000,
         step: 1,
         precisionFlag: 0,
         rules:[
@@ -276,7 +301,7 @@ export default [
         label: '文字包围盒阴影水平偏移',
         type: types.Number,
         min: 0,
-        max: 10000,
+        max: 1000,
         step: 1,
         precisionFlag: 0,
         rules:[
@@ -290,7 +315,7 @@ export default [
         label: '文字包围盒阴影垂直偏移',
         type: types.Number,
         min: 0,
-        max: 10000,
+        max: 1000,
         step: 1,
         precisionFlag: 0,
         rules:[
@@ -299,62 +324,62 @@ export default [
         value: 0,
         description: '文字包围盒阴影垂直偏移。'
     },
-    {
-        prop: 'transformText',
-        label: '文字是否跟随变换效果',
-        type: types.Boolean,
-        rules:[
-            { required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
-        ],
-        value: false,
-        description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
-    },
-    {
-        prop: 'textRotation',
-        label: '文字旋转角度',
-        type: types.Number,
-        min: 0,
-        max: 360,
-        step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入文字旋转角度', trigger: 'blur' }
-        ],
-        value: 0,
-        description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
-    },
-    {
-        prop: 'textOrigin',
-        label: '文字变换中心',
-        type: types.Point,
-        min: 0,
-        max: 10000,
-        step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入文字变换中心', trigger: 'blur' }
-        ],
-        value: 0,
-        description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
-    },
+    // {
+    //     prop: 'transformText',
+    //     label: '文字是否跟随变换效果',
+    //     type: types.Boolean,
+    //     rules:[
+    //         { required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
+    //     ],
+    //     value: false,
+    //     description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
+    // },
+    // {
+    //     prop: 'textRotation',
+    //     label: '文字旋转角度',
+    //     type: types.Number,
+    //     min: 0,
+    //     max: 360,
+    //     step: 1,
+    //     precisionFlag: 0,
+    //     rules:[
+    //         { required: true, message:'请输入文字旋转角度', trigger: 'blur' }
+    //     ],
+    //     value: 0,
+    //     description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
+    // },
+    // {
+    //     prop: 'textOrigin',
+    //     label: '文字变换中心',
+    //     type: types.Point,
+    //     min: 0,
+    //     max: 10000,
+    //     step: 1,
+    //     precisionFlag: 0,
+    //     rules:[
+    //         { required: true, message:'请输入文字变换中心', trigger: 'blur' }
+    //     ],
+    //     value: 0,
+    //     description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
+    // },
     {
         prop: 'textBackgroundColor',
         label: '文字包围盒颜色',
-        type: types.String,
+        type: types.Color,
         rules:[
             { required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
         ],
-        value: '',
+        value: 'rgba(0,0,0,0)',
         description: '文字包围盒颜色。'
     },
     {
         prop: 'textBorderColor',
         label: '文字包围盒描边颜色',
-        type: types.String,
+        type: types.Color,
         rules:[
             { required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
         ],
-        value: '',
+        value: 'rgba(0,0,0,0)',
         description: '文字包围盒描边颜色。'
     },
     {
@@ -388,15 +413,16 @@ export default [
     {
         prop: 'textPadding',
         label: '文字内边距',
-        type: types.Point,
+        type: types.NumberArray,
+        length:4,
         min: 0,
-        max: 10000,
+        max: 1000,
         step: 1,
         precisionFlag: 0,
         rules:[
             { required: true, message:'请输入文字内边距', trigger: 'blur' }
         ],
-        value: 0,
+        value: [0, 0, 0, 0],
         description: '文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。'
     }
 ];
diff --git a/src/views/iscs_new/components/dataForm.vue b/src/views/iscs_new/components/dataForm.vue
index 8ce26c246..76895c765 100644
--- a/src/views/iscs_new/components/dataForm.vue
+++ b/src/views/iscs_new/components/dataForm.vue
@@ -1,86 +1,111 @@
 <template>
   <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 }}
+    <template v-for="(styleGroup,index) in form.formGroup">
+      <div v-if="styleGroup.styleList.length>0" :key="index" class="styleGroup">
+        <div class="styleGroupName">
+          {{ styleGroup.name }}
+        </div>
+        <template v-for="item in styleGroup.styleList">
+          <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.precision!=undefined"
+                v-model="formModel[styleGroup.code][item.prop]"
+                size="small"
+                :min="isNaN(item.min) ? -Infinity : item.min"
+                :max="isNaN(item.max)? Infinity : item.max"
+                :step="isNaN(item.step) ? -Infinity : item.step"
+                :precision="item.precision"
+              />
+              <el-input-number
+                v-else
+                v-model="formModel[styleGroup.code][item.prop]"
+                size="small"
+                :min="isNaN(item.min) ? -Infinity : item.min"
+                :max="isNaN(item.max)? Infinity : item.max"
+                :step="isNaN(item.step) ? -Infinity : item.step"
+              />
+            </template>
+            <template v-else-if="checkFieldType(item, 'Boolean')">
+              <el-switch
+                v-model="formModel[styleGroup.code][item.prop]"
+                size="small"
+                :active-color="item.activeColor || '#409eff'"
+                :inactive-color="item.inactiveColor || '#dcdfe6'"
+              />
+            </template>
+            <template v-else-if="checkFieldType(item, 'Color')">
+              <el-color-picker
+                v-model="formModel[styleGroup.code][item.prop]"
+                show-alpha
+                size="small"
+              />
+            </template>
+            <template v-else-if="checkFieldType(item, 'NumberArray')">
+              <el-input-number
+                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"
+                :step="isNaN(item.step) ? -Infinity : item.step"
+                :precision="item.precision"
+              />
+            </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>
+            <template v-else-if="checkFieldType(item, 'Select')">
+              <el-select
+                :ref="'select_'+item.prop"
+                v-model="formModel[styleGroup.code][item.prop]"
+                size="small"
+              >
+                <el-option
+                  v-for="option in item.optionList"
+                  :key="option['value']"
+                  :label="option['label']"
+                  :value="option['value']"
+                />
+              </el-select>
+            </template>
+            <template v-else-if="checkFieldType(item, 'String')">
+              <el-input
+                v-model="formModel[styleGroup.code][item.prop]"
+                size="small"
+                type="text"
+                :maxlength="item.maxlength"
+              />
+            </template>
+          </el-form-item>
+        </template>
       </div>
-      <template v-for="item in styleGroup.styleList">
-        <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.precision!=undefined"
-              v-model="formModel[styleGroup.code][item.prop]"
-              size="small"
-              :min="isNaN(item.min) ? -Infinity : item.min"
-              :max="isNaN(item.max)? Infinity : item.max"
-              :step="isNaN(item.step) ? -Infinity : item.step"
-              :precision="item.precision"
-            />
-            <el-input-number
-              v-else
-              v-model="formModel[styleGroup.code][item.prop]"
-              size="small"
-              :min="isNaN(item.min) ? -Infinity : item.min"
-              :max="isNaN(item.max)? Infinity : item.max"
-              :step="isNaN(item.step) ? -Infinity : item.step"
-            />
-          </template>
-          <template v-else-if="checkFieldType(item, 'Boolean')">
-            <el-switch
-              v-model="formModel[styleGroup.code][item.prop]"
-              size="small"
-              :active-color="item.activeColor || '#409eff'"
-              :inactive-color="item.inactiveColor || '#dcdfe6'"
-            />
-          </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, 'NumberArray')">
-            <el-input-number
-              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"
-              :step="isNaN(item.step) ? -Infinity : item.step"
-              :precision="item.precision"
-            />
-          </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>
+    </template>
   </el-form>
 </template>
 <script>
@@ -111,8 +136,8 @@ export default {
         checkFieldType(field, type) {
             return field.type === type;
         },
-		init() {
-		},
+        init() {
+        },
         changeNumber(type, index, form, prop) {
             if (form[prop][index][type] == undefined || parseFloat(form[prop][index][type])) {
                 const newForm = Object.assign([], form[prop]);