代码调整

src/iscs_new/core/form/builderFactory.js

@@ -37,6 +37,7 @@ class BuilderFactory {
                 }
             });
             temp.formGroup.push({name:'样式配置', code:'style', styleList:styleList});
+
             // shape
             // element
 

src/iscs_new/core/form/form2ShapeStyle.js

@@ -1,6 +1,20 @@
 import types from './types';
 
 export default [
+    {
+        prop: 'lineWidth',
+        label: '线宽',
+        type: types.Number,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
+        rules:[
+            { required: true, message:'请输入线宽', trigger: 'blur' }
+        ],
+        value: 0,
+        description: '线宽'
+    },
     {
         prop: 'fill',
         label: '填充样式',
@@ -11,16 +25,6 @@ export default [
         value: '',
         description: '填充样式。'
     },
-    {
-        prop: 'stroke',
-        label: '描边样式',
-        type: types.Color,
-        rules:[
-            { required: true, message:'请输入描边样式', trigger: 'blur' }
-        ],
-        value: '',
-        description: '描边样式。'
-    },
     {
         prop: 'opacity',
         label: '不透明度',
@@ -35,10 +39,21 @@ export default [
         value: 1,
         description: '不透明度。'
     },
+    {
+        prop: 'stroke',
+        label: '描边样式',
+        type: types.Color,
+        rules:[
+            { required: true, message:'请输入描边样式', trigger: 'blur' }
+        ],
+        value: '',
+        description: '描边样式。'
+    },
     {
         prop: 'lineDash',
         label: '描边虚线',
         type: types.NumberArray,
+        length:2,
         min: 0,
         max: 100,
         step: 1,
@@ -46,13 +61,13 @@ export default [
         rules:[
             { required: true, message:'请输入描边虚线样式', trigger: 'blur' }
         ],
-        value: 1,
+        value: [0, 0],
         description: '描边虚线样式，参考 SVG stroke-dasharray。'
     },
     {
         prop: 'lineDashOffset',
         label: '描边虚线偏移',
-        type: types.Point,
+        type: types.Number,
         min: 0,
         max: 100,
         step: 1,
@@ -63,24 +78,10 @@ export default [
         value: [0, 0],
         description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
     },
-    {
-        prop: 'shadowBlur',
-        label: '阴影模糊大小',
-        type: types.Number,
-        min: 0,
-        max: 100,
-        step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
-        ],
-        value: 0,
-        description: '阴影模糊大小。'
-    },
     {
         prop: 'shadowColor',
         label: '阴影颜色',
-        type: types.String,
+        type: types.Color,
         rules:[
             { required: true, message:'请输入阴影颜色', trigger: 'blur' }
         ],
@@ -116,18 +117,18 @@ export default [
         description: '阴影纵向偏移。'
     },
     {
-        prop: 'lineWidth',
+        prop: 'shadowBlur',
-        label: '线宽',
+        label: '阴影模糊大小',
         type: types.Number,
         min: 0,
         max: 100,
         step: 1,
         precisionFlag: 0,
         rules:[
-            { required: true, message:'请输入线宽', trigger: 'blur' }
+            { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
         ],
         value: 0,
-        description: '线宽。'
+        description: '阴影模糊大小。'
     },
     {
         prop: 'strokeNoScale',
@@ -138,15 +139,15 @@ export default [
         ],
         value: false,
         description: '描边粗细不随缩放而改变，不选中时则会根据缩放同比例缩放描边粗细。'
-    },
-    {
-        prop: 'blend',
-        label: '混合模式',
-        type: types.String,
-        rules:[
-            { required: true, message:'请输入混合模式', trigger: 'blur' }
-        ],
-        value: '',
-        description: '混合模式，同 Canvas globalCompositeOperation。'
     }
+    // {
+    //     prop: 'blend',
+    //     label: '混合模式',
+    //     type: types.String,
+    //     rules:[
+    //         { required: true, message:'请输入混合模式', trigger: 'blur' }
+    //     ],
+    //     value: '',
+    //     description: '混合模式，同 Canvas globalCompositeOperation。'
+    // }
 ];

src/views/iscs_new/components/dataForm.vue

@@ -11,7 +11,7 @@
             <el-input-number
               v-if="item.precisionFlag"
               v-model="formModel[styleGroup.code][item.prop]"
-              size="mini"
+              size="small"
               :min="isNaN(item.min) ? -Infinity : item.min"
               :max="isNaN(item.max)? Infinity : item.max"
               :step="isNaN(item.step) ? -Infinity : item.step"
@@ -20,7 +20,7 @@
             <el-input-number
               v-else
               v-model="formModel[styleGroup.code][item.prop]"
-              size="mini"
+              size="small"
               :min="isNaN(item.min) ? -Infinity : item.min"
               :max="isNaN(item.max)? Infinity : item.max"
               :step="isNaN(item.step) ? -Infinity : item.step"
@@ -29,10 +29,35 @@
           <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]"
+              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, 'Color')">
+            <el-color-picker
+              v-model="formModel[styleGroup.code][item.prop]"
+              size="small"
+            />
+          </template> -->
         </el-form-item>
       </template>
     </div>