代码调整

src/iscs_new/core/form/elementConst.js

@@ -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 表示不圆滑'
+                }
             ]
         }
     },
@@ -448,7 +496,7 @@ export const elementConst = {
                     precision: 0,
                     step:1,
                     min: 0,
-					max: Math.PI*2,
+                    max: Math.PI * 2,
                     rules:[
                         { required: true, message:'请输入起始弧度', trigger: 'blur' }
                     ],
@@ -462,7 +510,7 @@ export const elementConst = {
                     precision: 0,
                     step:1,
                     min: 0,
-					max: Math.PI*2,
+                    max: Math.PI * 2,
                     rules:[
                         { required: true, message:'请输入终止弧度', trigger: 'blur' }
                     ],
@@ -555,7 +603,7 @@ export const elementConst = {
                     precision: 0,
                     step:1,
                     min: 0,
-					max: Math.PI*2,
+                    max: Math.PI * 2,
                     rules:[
                         { required: true, message:'请输入起始弧度', trigger: 'blur' }
                     ],
@@ -569,7 +617,7 @@ export const elementConst = {
                     precision: 0,
                     step:1,
                     min: 0,
-					max: Math.PI*2,
+                    max: Math.PI * 2,
                     rules:[
                         { required: true, message:'请输入终止弧度', trigger: 'blur' }
                     ],

src/iscs_new/core/form/types.js

@@ -7,4 +7,4 @@ export default {
     Point: 'Point',
     Points: 'Points',
     NumberArray: 'NumberArray'
-}
+};

src/views/iscs_new/components/dataForm.vue

@@ -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')">
+          <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)" />
+                  <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)"
                   />
-          </template> -->
+                  <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,6 +112,20 @@ export default {
     methods: {
         checkFieldType(field, 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;}
     .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>

src/views/iscs_new/iscsDraw/index.vue

@@ -116,43 +116,43 @@ export default {
         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) {
-					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.code = utils.getUID()
+                    newModel.code = utils.getUID();
                     newModel.position = [0, 0];
                     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}}]);
                 }
             });
         },
         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) {
-					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}}]);
                 }
             });
         },
-        onDelete(){
+        onDelete() {
-			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) {
-					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.DELETE}}]);
                 }
             });
         },
-        initPage(){
+        initPage() {
 
-        },
+        }
     }
 };
 </script>
@@ -182,11 +182,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;