一、使用 SQL 快速开发

1. 新建动态表格模板代码

​ 如：umppPlanOrderResolve_dy.vue

<template slot="umppPlanOrderResolve_dy">
  <div slot="center">
     <eh-tabs :tabs.sync="tabs" v-model="tabsName" ref="myTabs">
        <template slot="umppPlanOrderResolve-Slot">
            <eh-dyna-big-data-grid
              id="umppPlanOrderResolveDyGrid"
              ref="umppPlanOrderResolveDyGrid"
              @selection-change="handleSelectionChange"
              :options="{ isAdd: false, isEdit: false, isDel: false }"
              :dataSourceParams="{}"
            >
            </eh-dyna-big-data-grid>
		</template>
    </eh-tabs>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "umppPlanOrderResolve_dy",
  data() {
    return {
      rowData:[],
      activeNames: ["1"],
      tabs: [
        // 默认展示的所有标签页
        { name: "umppPlanOrderResolve-Slot", title: "订单分解" },
      ],
      tabsName: "umppPlanOrderResolve-Slot", // 默认展示并聚焦的标签页，key自定义
    };
  },
  methods: {
    //点击某一行获取数据
    handleSelectionChange(val) {
      this.rowData = val;
    },
  }
}
</script>

<style scoped>

</style>

多 Tab 页 VUE 模板

如：poScheduleDataCheck.vue

<template slot="poScheduleDataCheck">
  <eh-layout>
    <div slot="center">
      <eh-tabs :tabs.sync="tabs" v-model="tabsName" ref="myTabs">
        <template slot="invalidProduBom-Slot">
          <eh-dyna-big-data-grid
            id="invalidProduBomDyGrid"
            ref="invalidProduBomDyGrid"
            @selection-change="handleSelectionChange"
            :options="{ isAdd: false, isEdit: false, isDel: false }"
            :dataSourceParams="{}"
          >
          </eh-dyna-big-data-grid>
        </template>
        <template slot="invalidProduceCapacity-Slot">
          <eh-dyna-big-data-grid
            id="invalidProduceCapacityDyGrid"
            ref="invalidProduceCapacityDyGrid"
            @selection-change="handleSelectionChange"
            :options="{ isAdd: false, isEdit: false, isDel: false }"
            :dataSourceParams="{}"
          >
          </eh-dyna-big-data-grid>
        </template>
        <template slot="invalidSapWorkCenter-Slot">
          <eh-dyna-big-data-grid
            id="invalidSapWorkCenterDyGrid"
            ref="invalidSapWorkCenterDyGrid"
            @selection-change="handleSelectionChange"
            :options="{ isAdd: false, isEdit: false, isDel: false }"
            :dataSourceParams="{}"
          >
          </eh-dyna-big-data-grid>
        </template>
      </eh-tabs>
    </div>
  </eh-layout>
</template>

<script>
import qs from "qs";
export default {
  name: "poScheduleDataCheck",
  data() {
    return {
      activeNames: ["1","2","3"],
      tabs: [
        // 默认展示的所有标签页
        { name: "invalidProduBom-Slot", title: "BOM结构检查" },
        { name: "invalidProduceCapacity-Slot", title: "产线能力配置检查" },
        { name: "invalidSapWorkCenter-Slot", title: "产线成本中心检查" },
      ],
      tabsName: "invalidProduBom-Slot", // 默认展示并聚焦的标签页，key自定义
      rowData:[],
    };
  },
  methods: {
    //点击某一行获取数据
    handleSelectionChange(val) {
      this.rowData = val;
    },
  }
}
</script>

<style scoped>

</style>

2. 自定义 GridId 和 SQL 脚本

​ 打开动态表格配置页面

​ 点击新增 SQL 查询，配置 GridId 和 SQL 语句

​ 设置标题

​ SQL 脚本举例：（见附件《动态表格组件使用 SQL 快速开发.pdf》）

3. 配置菜单

4. 调整个性化配置主要是按钮、查询模板和列属性

​ 调整好属性后如下：

到此动态表格使用 SQL 快速开发完成
动态表格组件使用 SQL 快速开发.pdf