init

src/components/CodeStructure.vue

@@ -0,0 +1,160 @@
+<template>
+  <el-drawer :visible.sync="drawer" :with-header="false" size="70%" direction="btt">
+    <div class="container">
+
+      <center>组件结构检视图
+        <br>
+        <span style="font-size:12px;">Components
+          Structure</span>
+      </center>
+
+      <el-row :gutter="20" style="height:0px;flex-grow:1;">
+        <el-col :span="16" style="height: 100%;">
+          <div style="overflow: scroll;height:100%; margin: 0 20px;padding: 10px;">
+            <v-tree :radio="true" :canDeleteRoot="false" :data='treeData' :draggable='false' :halfcheck='false'
+              :multiple="false" @node-click="onNodeClick" />
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <attribute-input ref="attributeInput" :enableRemoveButton="true" v-if="currentEditRawInfo && drawer"
+            @save="onSaveAttr" shortcutInitMode="auto" @remove="onRemove" @codeRefresh="codeRefresh"
+            :__rawVueInfo__="currentEditRawInfo">
+          </attribute-input>
+        </el-col>
+      </el-row>
+    </div>
+
+  </el-drawer>
+</template>
+
+<script>
+import "./halower-tree.min.css";
+import { VTree } from '@/libs/v2-tree'
+import { isObject } from "@/utils/common";
+
+export default {
+  props: ['visible'],
+  components: {
+    VTree,
+    AttributeInput: resolve => { require(["./AttributeInput"], resolve) },
+  },
+
+  data() {
+    return {
+      // 在此自动生成
+      treeData: [],
+      currentEditRawInfo: null
+    };
+  },
+  beforeCreate() { },
+  created() { },
+  beforeMount() { },
+  mounted() { },
+  beforeUpdate() { },
+  updated() { },
+  destoryed() { },
+  methods: {
+    // 在此自动生成
+    request() {
+      // 网络请求，可选
+    },
+    codeRefresh() {
+      this.$emit('codeRefresh');
+    },
+
+    // 获取这个节点的key
+    getRawComponentKey(__rawVueInfo__) {
+      return Object.keys(__rawVueInfo__)[0];
+    },
+
+    convertStructure(rawInfo) {
+      const title = this.getRawComponentKey(rawInfo);
+      const object = rawInfo[title];
+      const children = [];
+      if (isObject(object)) {
+        for (const key in object) {
+          if (object.hasOwnProperty(key)) {
+            if (key === '__children') {
+              const element = object[key];
+
+              element.forEach(item => {
+                const temp = this.convertStructure(item);
+                temp && children.push(temp);
+              })
+            } else if (isObject(object[key])) {
+              // 组成一个新的结构，适配只有一个子节点的数据结构
+              const __obj = {};
+              __obj[key] = object[key];
+              const child = this.convertStructure(__obj);
+              child && children.push(child);
+            }
+          }
+        }
+
+        return {
+          title: title,
+          expanded: true,
+          children: children,
+          rawInfo: rawInfo,
+        }
+      } else {
+        return null;
+      }
+    },
+
+    onNodeClick(nodeInfo) {
+      this.currentEditRawInfo = nodeInfo.rawInfo;
+    },
+
+    onRemove({ lc_id }) {
+      this.$emit("remove", { lc_id });
+      // 为了降低复杂性，这里先不做删除失败的处理
+      this.currentEditRawInfo = null;
+    },
+    onSaveAttr(resultList) {
+      this.$emit("save", resultList);
+    },
+
+    updateCode(codeRawInfo) {
+      this.treeData = [this.convertStructure(codeRawInfo)];
+    },
+
+  },
+  watch: {
+    canInitShortcut(newValue) {
+    }
+  },
+  computed: {
+    drawer: {
+      get() {
+        return this.visible;
+      },
+      set() {
+        this.$emit('update:visible', false);
+      }
+    },
+    canInitShortcut() {
+      return this.currentEditRawInfo !== null && this.drawer;
+    }
+  },
+  fillter: {},
+};
+</script>
+
+<style scoped>
+/*  在此自动生成 */
+
+center {
+  padding: 20px;
+}
+
+::v-deep .el-drawer__body {
+  height: 100%;
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>