代码调整

src/views/newDraw/drawForm.vue

@@ -5,9 +5,9 @@
       <el-button type="text" style="margin-right: 10px" @click="back">返回</el-button>
     </div>
     <div class="styleGroup">
-      <div class="styleGroupName">
+      <el-card type="border-card" class="elementCard">
-        绘图配置
+        <el-tabs v-model="enabledTab" class="eachElementPane" type="card">
-      </div>
+          <el-tab-pane id="drawSettingPane" label="绘图配置" name="drawSetting">
             <el-form ref="form" :model="form" label-width="80px">
               <el-form-item label="模型:">
                 <el-select v-model="form.code" size="mini" placeholder="请选择" @change="modelChange">
@@ -31,10 +31,22 @@
                 <el-input-number v-model="form.scale[1]" :precision="2" :step="0.1" size="mini" :min="0.1" />
               </el-form-item>
             </el-form>
-      <div style="text-align: right;">
+            <div style="text-align: center;">
               <el-button :disabled="!form.code" type="warning" size="mini" @click="updateCompose">修改</el-button>
               <el-button :disabled="!form.code" type="danger" size="mini" @click="deleteCompose">删除</el-button>
             </div>
+          </el-tab-pane>
+          <el-tab-pane v-if="allowModifyList.length>0" id="modelModifyPane" label="模型修改" name="modelModify">
+            <el-tabs v-model="modifyElementTab" class="eachElementPane">
+              <el-tab-pane v-for="(allowModify,index) in allowModifyList" :key="index" :label="allowModify.name" :name="allowModify.code">
+                <!-- {{ allowModify.name }} -->
+              </el-tab-pane>
+            </el-tabs>
+            <!-- {{}} -->
+            <!-- allowModifyList -->
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
     </div>
   </div>
 </template>
@@ -53,6 +65,8 @@ export default {
     },
     data() {
         return {
+            enabledTab:'drawSetting',
+            modifyElementTab:'',
             form: {
                 code: '',
                 type: '',
@@ -60,18 +74,35 @@ export default {
                 position: [0, 0],
                 rotation: 0,
                 scale: [1, 1]
+            },
+            allowModifyList:[],
+            modifyElementForm:{
+                shape:{},
+                style:{}
             }
         };
     },
     methods: {
-        selectChange(compose) {
+        selectChange({code, type, name, position, rotation, scale, shapeList}) {
-            // this.form.code = compose.code;
+            this.form = {code, type, name, position, rotation, scale};
-            // this.form.type = compose.type;
+            this.allowModifyList = [];
-            // this.form.name = compose.name;
+            shapeList.forEach(shape=>{
-            // this.form.position = compose.position;
+                if (shape.editAttrList && shape.editAttrList.length > 0) {
-            // this.form.rotation = compose.rotation;
+                    this.allowModifyList.push({code:shape.code, editAttrList:shape.editAttrList, name:shape.name});
-            // this.form.scale = compose.scale;
+                    // style
-            this.form = compose;
+                    // shape
+                    // code: (...)
+                    // editAttrList: (...)
+                    // name: "Polyline_0_0.78816"
+                }
+            });
+            if (this.allowModifyList.length > 0) {
+                const currentModify = this.allowModifyList[0];
+                this.modifyElementTab = currentModify.code;
+                // currentModify.editAttrList.forEach(each=>{
+                //     this.modifyElementForm[each.attrType][each.attrName] = '';
+                // });
+            }
         },
         modelChange(code) {
             const compose = this.model.find(item => item.code === code);
@@ -102,9 +133,20 @@ export default {
 </script>
 
 <style scoped>
-    .styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin: 30px 15px;}
+    .styleGroup{height:100%}
-    .styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
+    .styleGroup .elementCard {
+        height:100%;
+        width:400px;
+    }
+    #drawSettingPane,#modelModifyPane{height:100%;display: flex;flex-direction:column;}
     /deep/ .el-form-item__content{
         text-align: left;
     }
 </style>
+<style>
+    #modelModifyPane .eachElementPane .el-tabs__nav .el-tabs__item.is-top.is-active{
+        padding: 0px 10px;
+        border-bottom: 2px solid !important;
+    }
+</style>
+

src/views/newDraw/edit.vue

@@ -2,7 +2,7 @@
   <div id="app" style="width: 100%;height: 100%;">
     <!--<jl-model-builder type="测试类型" composeName="测试名称" :model="model" @save="save"></jl-model-builder>-->
     <jl-picture-builder ref="jlPictureBuilder" :model="model" :compose-map="composeMap" @selectChange="selectChange" />
-    <div style="height: 300px;background: #fff;z-index: 999;position: absolute;top: 70px;left: 0;">
+    <div style="height: 300px;background: #fff;z-index: 999;position: absolute;top: 70px;left: 0;overflow:auto">
       <div v-for="item in modelList" :key="item.code">
         <el-button size="mini" style="margin: 5px" @click="addModel(item)">{{ item.name }}</el-button>
       </div>