编辑页布局

src/views/chartFrame_manage/frameEditor.vue

@@ -1,7 +1,37 @@
 <template>
     <!-- 添加编辑框架 -->
-    <div>
-        编辑编辑
+    <div class="frame-editor-wrap">
+        <div class="option-wrap">
+            <el-input style="width:240px;" placeholder="请输入框架名称"></el-input>
+            <el-button type="primary" style="margin-left:auto;" @click="handleEditNode">添加节点</el-button>
+            <el-button type="primary" style="margin-left:20px;">保存</el-button>
+        </div>
+        <div class="editor-wrap">
+            <div class="tool-wrap">工具栏</div>
+            <div class="frame-wrap"></div>
+        </div>
+        <!-- 添加/编辑节点弹窗 -->
+        <el-dialog
+            :title="modifyNode.nodeId?'编辑节点':'添加节点'"
+            :visible.sync="isModifyNodeDialogShow"
+            :close-on-click-modal="false"
+            :modal-append-to-body="false"
+            @close="isModifyNodeDialogShow=false"
+            width="589px"
+            v-dialogDrag
+            center
+        >
+            <div class="dialog-container">
+                <el-form>
+
+                </el-form>
+            </div>
+            <div class="dialog-footer">
+                <el-button>取消</el-button>
+                <el-button type="primary">确定</el-button>
+            </div>
+
+        </el-dialog>
     </div>
 </template>
 
@@ -9,15 +39,47 @@
 export default {
     data() {
         return {
-
+            modifyNode:{},
+            isModifyNodeDialogShow:false,
+            rules:{
+                nodeName:[{required: true,message: "请输入节点名称",trigger: "blur"}],
+                nodeLink:[{required: true,message: "请选择节点链接",trigger: "blur"}]
+            }
         };
     },
     methods: {
-
+        handleEditNode(node={}){
+            this.modifyNode = node
+            this.isModifyNodeDialogShow = true
+        },
+        addNode(){},
     },
 };
 </script>
 
 <style scoped lang="scss">
-
+.frame-editor-wrap{
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 120px);
+    *{box-sizing: border-box;}
+    .option-wrap{
+        display: flex;
+        justify-content: space-between;
+    }
+    .editor-wrap{
+        margin-top: 15px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        .tool-wrap{
+            background-color:#F6F7F8;
+            padding: 5px;
+        }
+        .frame-wrap{
+            flex:1;
+        }
+    }
+}
 </style>