一、初始载入

1.SQL页面在载入完成时会先触发各区块内容的数据请求方法，载入下图所见内容，如要查看返回数据的全貌可以自行打印。

 // mounted 钩子函数：页面加载完成时触发，避免某些DOM节点未加载，获取不到对应的属性/数据
mounted () {
    // 获取右边代码片段栏的高度
    this.$nextTick(function () {
      var height = this.$refs.rightAside.$el.clientHeight
      this.rightAsideHeight = height // 右边栏的高度
    })
    this.getJiaoBenList() // 左侧脚本列表集合
    this.getScriptfrag(null) // 右侧代码片段列表
    this.getDataRatio() // 获取数据脚本状态占比
    this.getDirectoryName() // 获取脚本列表里目录的对应数据，如：所属哪一个机构域
    this.handleSelect() // 后台定义的数据字典信息，如数据库类型jdbcType，排序类型，脚本状态
    this.getPrincipalBy() // 获取指派人即脚本负责人下拉框信息
    this.asyncGetOrgDomainInfoDropDown() // 机构域下拉框信息 
    this.getProjectInfo('') // 获取所有项目信息
  },

2.如下图所示各块区域，对应权限条件下的初始数据就会通过上述钩子函数内的代码加载完成，如左侧脚本列表
区的现有项目下拉列表和全部项目脚本目录等。

二、左侧脚本列表区

1.项目选择

在确认机构域后，首先可以控制的是所属项目，该选择会导致初始化的全部项目脚本列表，变成选中项目下的全部脚本列表

2.新增项目和项目详情

鼠标滑至菜单会触发 getCaozuo (command)弹出”新增项目”和”项目详情”选项。

3.脚本搜索框

按脚本名模糊搜索还可以可筛选按钮一起关联筛选

4.新增脚本目录以及导入导出

5.筛选按钮

图上看到的脚本列表都是符合筛选条件的，同时数据库筛选，会联动编辑器区的数据库类型回显

6.脚本列表

① 脚本列表的结构

element-ui 提供了一个递归组件 ,该组件是一个树状结构的列表，列表数据是标签属性 :data="treeList"

数据结构：

通过对这样数据结构的treeList解析，会得到平台所见的脚本列表

② 脚本列表的node节点

在标签下用插值表达式直接获取{{ node.data }} 可以得到该节点下的所有数据，比如我打印 aaaaaaaa 这个脚本

③ 脚本目录的相关操作

④点击脚本

没有了修改脚本名？和删除脚本功能？

点击脚本产生的一系列关联基本都在中间编辑器区里 ↓↓↓↓↓↓↓↓↓↓↓

三、中间编辑器区

1.脚本操作功能区

2.脚本标签栏

操作	描述	便查代码
触发	点击脚本列表里的脚本时，就推送了一个对象给tabsList,tabsList会加载出对应的标签	addTable/this.nodeId判断是都会目录下新建
点击标签	该标签对象内的所有属性都会被切换	getSqlContent(tabsValue)
关闭标签	脚本未被修改：直接关闭，修改过的脚本关闭会提示是否保存	removeTab( )
修改脚本后标签		item.contentIsStars
右键标签		getRightClickName( )/closeMenu
标签缩略菜单		handleTabsCommand/dropdownClose

3.脚本状态栏

脚本状态栏表明了当前脚本的状态信息，版本描述 —> 完成状态 —> 历史版本 —> 数据库类型，这里的功能在aceEditor.vue组件里

4.编辑器

这部分功能在aceEditor.vue组件里，这一块，主要是和父组件SQLEditor.vue的各种数据的通信。
这里还涉及到代码片段的插入 ↓↓↓↓↓↓↓↓↓↓↓

四、代码片段区

1.搜索 handleCodequery

2.新增片段按钮 getScriptFragMenu

3.所属项目

4.排序 getScriptfragByProjectId

5.点击片段 getCode

五、可能的组件抽离方案

先处理问题：

1.对于冗余代码的清理

1.无需默认值的时候，声明的变量只需要设置为空

2.各组件之间的数据通信梳理

如果按功能区块抽离，目前除了aceEditor与其他组件之间的通信只需要调整外，其他功能块的组件基本上需要重新设置的不多。