sjgs-data-service-ui v1.0.2

数据源定制界面项目描述

• 项目采用VUE、AVUE、Element进行构建
• 采用provide/inject的API，来解决组件间的参数传递，数据共享等问题。
• 左侧树根据用户名进行过滤，右侧表格的新增功能复用了集成平台
• 此项目目前为移动应用定制工具服务，一切以定制工具的要求为主

如何运行

• 开发环境配置：
  • vue 2.5.2
  • avue 2.2.3
  • element-ui 2.13.0
• 使用git clone的方式获取开发模板。
  • git clone http://60.13.238.19:9088/intergration-platform/phone-platform/designer/sjgs-data-service-ui.git
• 运行命令
  • cd 进入项目
  • npm install
  • npm run dev
  • 在安装的时候可能会缺少别的插件，请根据提示依次安装
  • 如果启动不了可以尝试淘宝的cnpm去启动
  • npm install cnpm -g --registry=https://registry.npm.taobao.org
  • npm install
  • npm run dev

业务介绍

• 主要分为左侧树，和右侧表格
  • 左侧树根据用户名进行过滤，采用provide/inject的API，来解决组件间的参数传递，数据共享等问题。
  • 右侧表格实现数据的增删改查功能采用的avue，但是大部门的button按钮都没有使用avue默认的方法，而是采用Dialog对话会，来进行数据的添加或者修改
  • 在新增按钮中复用的集成平台，
  • 在sql类型中使用了monaco editor插件，但是在使用的时候有几点问题：会在日志中提出

功能新增

• 2020/2/25

  • 新增功能：1.复用集成平台；2.根据用户名，应用id，数据源id进行数据的过滤以及定位

• 2020/3/18

  • 修改在点击修改按钮时，不能对sql、表、存储过程进行切换
• 2020/3/26
  • 存储过程修改成下拉树

问题修复

• 修复多次新增的时候每次都遗留上一次新增的数据（sql，字段，参数）使用destroy-on-close属性。
• 去掉中心库，在sql编辑页面去掉保存按钮也可以对sql进行保存。
• 第二次进入数据定制界面的时候，表格错位；

日志描述

• el-popover 中设置了width，竟然会导致el-popover里面的el-table的fixed区域出现错位的情况:::

<div slot="header" style="height: 20px;">
      <el-popover
        v-if="dataObjectType === 'TABLE'"
        :title="context.selectedTable ? '表 [' + context.selectedTable.name + '] 字段' : '请首先选择表！'"
        placement="bottom"
        :visible-arrow="false"
        <!-- 此处设置了el-popover的width，竟然引起了他里面的el-table的fixed区域错位！！！ -->
        <width="600">
        trigger="click">
        <SelectionFields @batchInsert="batchAddFields"></SelectionFields>
        <el-link slot="reference" :underline="false" type="primary" icon="el-icon-share" style="margin-right: 10px;float: right;" target="_blank" @click="openFieldsDialog">字典</el-link>
      </el-popover>
      <el-link :underline="false" type="primary" icon="el-icon-plus" target="_blank" @click="openDialog" style="margin-right: 10px;float: right;"> 新增</el-link>
    </div>

(/home/adreamdee/Documents/Code Space/HYSoft/hysoft-microservices-ui/sjgs-data-service-ui/深度截图_选择区域_20200104235433.png)

• 编辑页面中sql定义功能：第一次访问的时候，没有数据
  原因：在父子组件中，父组件的数据在 mounted中加载的话，那么传递给子组件的时候，会获取不到值，因为子组件的 mounted要优先于父组件（父组件的mounted在子组件执行完mounted之后才会执行）
  解决：父组件在加载数据的时候，把数据放在created中进行加载、监听、传递
  
• 编辑页面中sql定义功能：页面切换的时候，sql的提示重复；
  原因：在子组件执行mounted的时候，会执行monaco中registerCompletionItemProvider方法，但是在页面切换的时候 会重新执行mounted，在这个时候，前面的registerCompletionItemProvider并没有被销毁，所有，这一次的registerCompletionItemProvider 加上上一次的registerCompletionItemProvider，会存在两个对象，所有sql的提示重复
  解决：在父组件的mounted中，调用子组件的registerCompletionItemProvider方法，执行一次，后面就算子组件的页面切换 也不会重复加载registerCompletionItemProvider方法（ this.$refs.sqlEditor.initSqlHints()），后面因为代码功能的问题没有使用这种方法了； 而是在DataSource中打开Dialog的时候进行一次判断，当类型为sql的时候从DataSource调用DataSourceEdit在调用SqlEditor用的方法
  

• 编辑页面中sql定义功能：切换编辑页面的时候，数据没有进行更新；
  原因：子组件mounted中初始化了编辑器，但是编辑页面在切换的时候，不会销毁子组件，那么新的数据没有被使用，所以数据没有更新
  解决：在子组件中监听父组件传递过来的数据，并且把数据设置给编辑器，完成刷新（以前使用的老办法）；目前使用，所有的弹窗使用的Dialog对话框，那个组件 有一个属性destroy-on-close (关闭时销毁 Dialog 中的元素 boolean — false) 在关闭的时候会销毁对话框，重新渲染
  注意：在编辑器内容改变事件中，不要把数据返回给父组件，这样会出现bug；
  
• 第二次进入数据定制界面的时候，表格错位；
  原因：第二次进入数据源定制界面的时候，页面是没有重新进过渲染的，而且表格的高度也存在问题
  解决: 当移动应用定制平台第二次进入定制界面的时候，使定制界面重新渲染就可以解决表格错位问题
• 在编辑的时候存储过程数据第一次高亮，第二次不是高亮 原因： 在DataSourceEdit的created中，对存储过程数据进行处理，但是发现，当关闭的弹出框的时候会再一次执行created 这样就造成的存储过程的数据出现问题，从而第二次不高亮
  解决：在DataSource打开弹出框的时候调用DataSourceEdit中cascaderDataLoad方法对数据进行加载，从而解决高亮问题