From 2cb2247d7ebaf19af4c5d944d724dc28b620f05f Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Mon, 2 Aug 2021 17:33:42 +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/views/newDraw/drawForm.vue | 122 ++++++++++++++++++++++-----------
 src/views/newDraw/edit.vue     |   2 +-
 2 files changed, 83 insertions(+), 41 deletions(-)

diff --git a/src/views/newDraw/drawForm.vue b/src/views/newDraw/drawForm.vue
index df19c29db..526a3bf52 100644
--- a/src/views/newDraw/drawForm.vue
+++ b/src/views/newDraw/drawForm.vue
@@ -5,36 +5,48 @@
       <el-button type="text" style="margin-right: 10px" @click="back">返回</el-button>
     </div>
     <div class="styleGroup">
-      <div class="styleGroupName">
-        绘图配置
-      </div>
-      <el-form ref="form" :model="form" label-width="80px">
-        <el-form-item label="模型:">
-          <el-select v-model="form.code" size="mini" placeholder="请选择" @change="modelChange">
-            <el-option
-              v-for="item in model"
-              :key="item.code"
-              :label="item.name + '(' + item.code + ')'"
-              :value="item.code"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="位置:">
-          <el-input-number v-model="form.position[0]" size="mini" />
-          <el-input-number v-model="form.position[1]" size="mini" />
-        </el-form-item>
-        <el-form-item label="旋转:">
-          <el-input-number v-model="form.rotation" size="mini" :min="-360" :max="360" />
-        </el-form-item>
-        <el-form-item label="缩放:">
-          <el-input-number v-model="form.scale[0]" :precision="2" :step="0.1" size="mini" :min="0.1" />
-          <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;">
-        <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-card type="border-card" class="elementCard">
+        <el-tabs v-model="enabledTab" class="eachElementPane" type="card">
+          <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">
+                  <el-option
+                    v-for="item in model"
+                    :key="item.code"
+                    :label="item.name + '(' + item.code + ')'"
+                    :value="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="位置:">
+                <el-input-number v-model="form.position[0]" size="mini" />
+                <el-input-number v-model="form.position[1]" size="mini" />
+              </el-form-item>
+              <el-form-item label="旋转:">
+                <el-input-number v-model="form.rotation" size="mini" :min="-360" :max="360" />
+              </el-form-item>
+              <el-form-item label="缩放:">
+                <el-input-number v-model="form.scale[0]" :precision="2" :step="0.1" size="mini" :min="0.1" />
+                <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: 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) {
-            // this.form.code = compose.code;
-            // this.form.type = compose.type;
-            // this.form.name = compose.name;
-            // this.form.position = compose.position;
-            // this.form.rotation = compose.rotation;
-            // this.form.scale = compose.scale;
-            this.form = compose;
+        selectChange({code, type, name, position, rotation, scale, shapeList}) {
+            this.form = {code, type, name, position, rotation, scale};
+            this.allowModifyList = [];
+            shapeList.forEach(shape=>{
+                if (shape.editAttrList && shape.editAttrList.length > 0) {
+                    this.allowModifyList.push({code:shape.code, editAttrList:shape.editAttrList, name:shape.name});
+                    // style
+                    // 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;}
-    .styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
+    .styleGroup{height:100%}
+    .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>
+
diff --git a/src/views/newDraw/edit.vue b/src/views/newDraw/edit.vue
index 11752620e..7d38ef7d3 100644
--- a/src/views/newDraw/edit.vue
+++ b/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>