@idooel/components 0.0.1-beta.39 → 0.0.1-beta.40

package/packages/{tree-table-model → models/tree-table-model}/src/index.vue

@@ -1,493 +1,494 @@
-<template>
-  <section class="ele model__tree-table">
-    <section class="model__tree-table--container" v-if="showTree">
-      <div class="model__tree--title"></div>
-      <section :ref="modelTreeWrapper" class="model__tree--wrapper" :style="{height: `${treeWrapperHeight}px`}">
-        <ele-tree
-          :tree-data="treeData"
-          :defaultExpandedKeys="defaultExpandedKeys"
-          :defaultSelectedKeys="defaultSelectedKeys"
-          @select="selectTreeNode"
-          :replace-fields="treeMeta.replaceFields || replaceFields">
-        </ele-tree>
-      </section>
-    </section>
-    <section class="model__table--container" :ref="modelTableContainerRef">
-      <div class="model__table--title" v-if="title">
-        <template v-if="titleMode">
-          <div :class="[`model__table-title--${titleMode}`]"></div>
-        </template>
-        <template v-else>
-          <div class="model__table-title--text">{{ title }}</div>
-        </template>
-      </div>
-      <section :ref="modelTableWrapper" class="model__table--wrapper">
-        <ele-search-area :ref="searchArea" @search="onSearch" :data-source="searchMeta.elements"></ele-search-area>
-        <div class="button-row__area">
-          <ele-button-group class="model-table__button-group" v-on="overrideButtonGroupEvent" :ref="buttonGroup" @click="handleClickButtonGroup" :data-source="getButtonGroupElements"></ele-button-group>
-          <slot name="tags"></slot>
-        </div>
-        <ele-table
-          v-on="overrideTableEvent"
-          :ref="tableRef"
-          :row-selection="rowSelection"
-          :loading="loading" 
-          :columns="columns"
-          :total="total"
-          :height="tableHeight"
-          :actions="actions"
-          :pageSize="pageSize"
-          :pageSizeOptions="pageSizeOptions"
-          :data-source="tableData"
-          @change-page="onChangePage"
-        ></ele-table>
-      </section>
-    </section>
-    <ele-modal-form v-model="modalFormValue" :meta="modalFormMeta"></ele-modal-form>
-    <ele-modal-timeline v-model="showFsmModal" :contextProp="fsmContextProp" :meta="fsmMeta" @cancel="handleCloseFsmModal"></ele-modal-timeline>
-  </section>
-</template>
-
-<script>
-import EleTree from '../../tree/src/index.vue'
-import EleTable from '../../table/src/index.vue'
-import EleSearchArea from '../../composite-components/search-area/src/index.vue'
-import EleButtonGroup from '../../composite-components/button-group/src/index.vue'
-import { type, net } from '@idooel/shared'
-import { v4 as uuidv4 } from 'uuid'
-import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER } from '../../utils'
-export default {
-  name: 'ele-tree-table-model',
-  components: {
-    EleTree,
-    EleTable,
-    EleSearchArea,
-    EleButtonGroup
-  },
-  props: {
-    title: {
-      type: [Object, String]
-    },
-    treeMeta: {
-      type: Object,
-      default: () => ({})
-    },
-    searchMeta: {
-      type: Object,
-      default: () => ({})
-    },
-    buttonGroupMeta: {
-      typeof: Object,
-      default: () => ({})
-    },
-    tableMeta: {
-      type: Object,
-      default: () => ({})
-    },
-    createMeta: {
-      type: Object
-    },
-    editMeta: {
-      type: Object
-    }
-  },
-  provide () {
-    return {
-      requestTreeData: this.requestTreeData,
-      requestTableData: this.requestTableData
-    }
-  },
-  data () {
-    return {
-      tableHeight: 0,
-      modalFormMeta: {},
-      modalFormValue: false,
-      treeData: [],
-      tableData: [],
-      defaultExpandedKeys: [],
-      defaultSelectedKeys: [],
-      replaceFields: {
-        title: 'title',
-        children: 'children',
-        key: 'id'
-      },
-      loading: false,
-      total: 0,
-      tableQuerys: {},
-      resizeObserverModelTableWrapper: null,
-      modelTableWrapperHeight: 0,
-      currentTreeNodeData: {},
-      treeWrapperHeight: 0,
-      currentTableSelection: {},
-      showFsmModal: false,
-      fsmMeta: {},
-      fsmContextProp: {}
-    }
-  },
-  computed: {
-    rowSelection () {
-      if (!this.currentTableMode) return void 0
-      return {
-        columnTitle: this.currentSelectionColumn.columnTitle,
-        fixed: true,
-        type: this.currentTableMode,
-        onChange: this.onChangeTableSelection
-      }
-    },
-    currentSelectionColumn () {
-      return this.columns.find(item => Object.keys(item).includes('multiple'))
-    },
-    currentTableMode () {
-      if (!this.currentSelectionColumn) return void 0
-      const { multiple } = this.currentSelectionColumn
-      if (type.isBool(multiple)) {
-        if (multiple) {
-          return 'checkbox'
-        } else {
-          return 'radio'
-        }
-      } else {
-        return void 0
-      }
-    },
-    modelTableContainerRef () {
-      return uuidv4()
-    },
-    titleMode () {
-      if (type.isObject(this.title)) {
-        const { mode = '' } = this.title
-        return mode
-      }
-      return void 0
-    },
-    tableRef () {
-      return uuidv4()
-    },
-    exposed () {
-      return {
-        currentTableSelection: this.currentTableSelection,
-        currentTreeNode: this.currentTreeNodeData,
-        requestTableData: this.requestTableData
-      }
-    },
-    overrideTableEvent () {
-      const events = this.actions.reduce((ret, action) => {
-        ret[action.eventName] = (e) => {
-          this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })
-        }
-        return ret
-      }, {})
-      return {
-        ...this.$listeners,
-        ...events,
-        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT]
-      }
-    },
-    overrideButtonGroupEvent () {
-      const events = this.getButtonGroupElements.reduce((ret, ele) => {
-        ret[ele.eventName] = (e) => {
-          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })
-        }
-        return ret
-      }, {})
-      return {
-        ...this.$listeners,
-        ...events,
-        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE]
-      }
-    },
-    showTree () {
-      return !!Object.keys(this.treeMeta).length
-    },
-    buttonGroup () {
-      return uuidv4()
-    },
-    searchArea () {
-      return uuidv4()
-    },
-    modelTreeWrapper () {
-      return uuidv4()
-    },
-    modelTableWrapper () {
-      return uuidv4()
-    },
-    actions () {
-      const { operations } = this.tableMeta
-      return operations.elements
-    },
-    pageSize () {
-      const { page = {} } = this.tableMeta
-      return page.pageSize || 10
-    },
-    pageSizeOptions () {
-      const { page = {} } = this.tableMeta
-      return page.pageSizeOptions || ['10', '20', '30', '40']
-    },
-    columns () {
-      const { columns, operations } = this.tableMeta
-      if (type.get(columns) === 'array') {
-        const columnsOptions = columns.map(item => {
-          const { mode = 'text' } = item
-          if (item.render) {
-            return {
-              ...item,
-              customRender: (text, record, index) => {
-                const { $createElement } = this
-                return item.render.call(this, { h: $createElement, ctx: this }, typeof text == 'string' ? text : text[item.dataIndex], record, index)
-              }
-            }
-          } else if (mode !== BUILT_IN_TRIGGER.TEXT) {
-            const { [`${mode}Meta`]: modeMeta } = item
-            return {
-              ...item,
-              customRender: (text, record, index) => {
-                return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>
-              }
-            }
-          }
-          return {
-            ...item
-          }
-        })
-        if (operations) {
-          return [
-            ...columnsOptions,
-            {
-              title: '操作',
-              width: operations.width,
-              key: 'action',
-              fixed: 'right',
-              scopedSlots: { customRender: 'action' }
-            }
-          ]
-        }
-        return columnsOptions
-      } else {
-        console.error('Error: columns is invalid, please check it')
-        return []
-      }
-    },
-    getButtonGroupElements () {
-      const { elements } = this.buttonGroupMeta
-      if (type.get(elements) === 'function') {
-        return elements.call(this)
-      } else if (type.get(elements) === 'array') {
-        return elements
-      } else {
-        return []
-      }
-    }
-  },
-  async created () {
-    if (this.showTree) {
-      this.treeData = await this.requestTreeData()
-      const [defaultTreeNode = {}] = this.treeData
-      this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
-      this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
-      this.currentTreeNodeData = defaultTreeNode
-    }
-    const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta
-    const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }
-    const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))
-    if (overrideInit) {
-      this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })
-    } else {
-      this.tableData = await this.requestTableData(initQuerys)
-    }
-  },
-  methods: {
-    dispatchTrigger ({ mode, record = {}, modeMeta = {} }) {
-      switch (mode) {
-        case BUILT_IN_TRIGGER.FSM:
-          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta)
-          break
-        default:
-          break
-      }
-    },
-    handleCloseFsmModal () {
-      this.showFsmModal = false
-    },
-    [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {
-      this.fsmMeta = meta
-      this.fsmContextProp = record
-      this.showFsmModal = true
-    },
-    onChangeTableSelection (_, selectedRows) {
-      if (this.currentTableMode === 'radio') {
-        this.currentTableSelection = selectedRows[0]
-      } else {
-        this.currentTableSelection = selectedRows
-      }
-    },
-    [BUILT_IN_EVENT_NAMES.EDIT] () {
-      this.modalFormMeta = this.editMeta
-      this.modalFormValue = true
-    },
-    [BUILT_IN_EVENT_NAMES.CREATE] () {
-      this.modalFormMeta = this.createMeta
-      this.modalFormValue = true
-    },
-    handleClickButtonGroup (props) {
-      const { eventName } = props
-      this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })
-    },
-    watchViewPort () {
-      const modelTableWrapper = this.$refs[this.modelTableWrapper]
-      console.log(modelTableWrapper.getBoundingClientRect())
-      const { top } = modelTableWrapper.getBoundingClientRect()
-      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`
-    },
-    async onSearch (props) {
-      this.tableQuerys = Object.assign(this.tableQuerys, props)
-      this.tableData = await this.requestTableData()
-    },
-    execTableFieldMap (fieldMap = {}, props) {
-      let ret = {}
-      const keys = Object.keys(fieldMap)
-      keys.forEach(key => {
-        const field = fieldMap[key]
-        ret[field] = props[key]
-      })
-      return ret
-    },
-    async selectTreeNode (selectedKeys, e) {
-      const { fieldMap } = this.tableMeta
-      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef
-      const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)
-      this.tableData = await this.requestTableData(execFieldMapRet)
-    },
-    async requestTreeData () {
-      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta
-      const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })
-      const ret = await net[requestType.toLowerCase()](
-        url,
-        { ...params, ...fieldMapRet }
-      ).then(resp => {
-        const { data } = resp || {}
-        return data
-      })
-      return ret
-    },
-    async onChangePage (page, pageSize) {
-      this.tableData = await this.requestTableData({ currentPage: page, pageSize })
-    },
-    async requestTableData (props = {}) {
-      const { url, requestType = 'GET', page = {} } = this.tableMeta
-      const { pageSize = 10 } = page
-      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)
-      this.loading = true
-      const ret = await net[requestType.toLowerCase()](
-        url,
-        this.tableQuerys
-      ).then(resp => {
-        const { data = [], count } = resp || {}
-        this.total = count
-        this.loading = false
-        return data.map(item => {
-          delete item.children
-          return {
-            key: uuidv4(),
-            ...item
-          }
-        })
-      })
-      return ret
-    },
-    refreshTreeStatus (props = {}) {},
-    refreshTableStatus (props = {}) {},
-    calculateTableHeight () {
-      const currentViewportHeight = window.innerHeight
-      const tableRef = this.$refs[this.tableRef]
-      const { top: tableToTop } = tableRef.$el.getBoundingClientRect()
-      this.tableHeight = currentViewportHeight - tableToTop
-    },
-    calculateTreeHeight () {
-      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]
-      const { height } = modelTableContainerRef.getBoundingClientRect()
-      this.treeWrapperHeight = height
-    }
-  },
-  mounted () {
-    this.calculateTableHeight()
-    this.$nextTick(() => {
-      this.calculateTreeHeight()
-    })
-    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {
-      for (const _ of entries) {
-        requestAnimationFrame(() => {
-          this.calculateTableHeight()
-        })
-      }
-    })
-    this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])
-  },
-  destroyed () {
-    this.resizeObserverModelTableWrapper.disconnect()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.ele {
-  &.model__tree-table {
-    background: transparent;                                                                                                                                                                                                                 
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    .model__tree-table--container {
-      .model__tree--wrapper {
-        width: 240px;
-        background: #fff;
-        flex-shrink: 0;
-        padding: 16px;
-        box-sizing: border-box;
-        margin-right: 16px;
-        overflow-y: auto;
-      }
-    }
-    .model__table--container {
-      width: 100%;
-      min-width: 0;
-      background: #fff;
-      .model__table--title {
-        .model__table-title--bar {
-          width: 100%;
-          height: 8px;
-          background: var(--idooel-primary-color);
-          border-top-left-radius: 4px;
-          border-top-right-radius: 4px;
-        }
-        .model__table-title--text {
-          text-align: left;
-          padding: 16px;
-          font-size: 16px;
-          font-weight: bold;
-          background: #fff;
-          border-bottom: 1px solid;
-          border-color: var(--idoole-black-016);
-        }
-      }
-      .model__table--wrapper {
-        background: #fff;
-        .button-row__area {
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: space-between;
-          padding-top: 16px;
-          padding-bottom: 8px;
-          padding-right: 16px;
-        }
-        .g-table__wrapper {
-          .fsm {
-            cursor: pointer;
-            color: var(--idooel-primary-color);
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <section class="ele model__tree-table">
+    <section class="model__tree-table--container" v-if="showTree">
+      <div class="model__tree--title"></div>
+      <section :ref="modelTreeWrapper" class="model__tree--wrapper" :style="{height: `${treeWrapperHeight}px`}">
+        <ele-tree
+          :tree-data="treeData"
+          :defaultExpandedKeys="defaultExpandedKeys"
+          :defaultSelectedKeys="defaultSelectedKeys"
+          @select="selectTreeNode"
+          :replace-fields="treeMeta.replaceFields || replaceFields">
+        </ele-tree>
+      </section>
+    </section>
+    <section class="model__table--container" :ref="modelTableContainerRef">
+      <div class="model__table--title" v-if="title">
+        <template v-if="titleMode">
+          <div :class="[`model__table-title--${titleMode}`]"></div>
+        </template>
+        <template v-else>
+          <div class="model__table-title--text">{{ title }}</div>
+        </template>
+      </div>
+      <section :ref="modelTableWrapper" class="model__table--wrapper">
+        <ele-search-area :ref="searchArea" @search="onSearch" :data-source="searchMeta.elements"></ele-search-area>
+        <div class="button-row__area">
+          <ele-button-group class="model-table__button-group" v-on="overrideButtonGroupEvent" :ref="buttonGroup" @click="handleClickButtonGroup" :data-source="getButtonGroupElements"></ele-button-group>
+          <slot name="tags"></slot>
+        </div>
+        <ele-table
+          v-on="overrideTableEvent"
+          :ref="tableRef"
+          :row-selection="rowSelection"
+          :loading="loading" 
+          :columns="columns"
+          :total="total"
+          :height="tableHeight"
+          :actions="actions"
+          :pageSize="pageSize"
+          :pageSizeOptions="pageSizeOptions"
+          :data-source="tableData"
+          @change-page="onChangePage"
+        ></ele-table>
+      </section>
+    </section>
+    <ele-modal-form v-model="modalFormValue" :meta="modalFormMeta"></ele-modal-form>
+    <ele-modal-fsm v-model="showFsmModal" :contextProp="fsmContextProp" :meta="fsmMeta" @cancel="handleCloseFsmModal"></ele-modal-fsm>
+  </section>
+</template>
+
+<script>
+import { type, net } from '@idooel/shared'
+import { v4 as uuidv4 } from 'uuid'
+import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER } from '../../../utils'
+export default {
+  name: 'ele-tree-table-model',
+  props: {
+    title: {
+      type: [Object, String]
+    },
+    treeMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    searchMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    buttonGroupMeta: {
+      typeof: Object,
+      default: () => ({})
+    },
+    tableMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    createMeta: {
+      type: Object
+    },
+    editMeta: {
+      type: Object
+    }
+  },
+  provide () {
+    return {
+      requestTreeData: this.requestTreeData,
+      requestTableData: this.requestTableData
+    }
+  },
+  data () {
+    return {
+      tableHeight: 0,
+      modalFormMeta: {},
+      modalFormValue: false,
+      treeData: [],
+      tableData: [],
+      defaultExpandedKeys: [],
+      defaultSelectedKeys: [],
+      replaceFields: {
+        title: 'title',
+        children: 'children',
+        key: 'id'
+      },
+      loading: false,
+      total: 0,
+      tableQuerys: {},
+      resizeObserverModelTableWrapper: null,
+      modelTableWrapperHeight: 0,
+      currentTreeNodeData: {},
+      treeWrapperHeight: 0,
+      currentTableSelection: {},
+      showFsmModal: false,
+      fsmMeta: {},
+      fsmContextProp: {}
+    }
+  },
+  computed: {
+    rowSelection () {
+      if (!this.currentTableMode) return void 0
+      return {
+        columnTitle: this.currentSelectionColumn.columnTitle,
+        fixed: true,
+        type: this.currentTableMode,
+        onChange: this.onChangeTableSelection
+      }
+    },
+    currentSelectionColumn () {
+      return this.columns.find(item => Object.keys(item).includes('multiple'))
+    },
+    currentTableMode () {
+      if (!this.currentSelectionColumn) return void 0
+      const { multiple } = this.currentSelectionColumn
+      if (type.isBool(multiple)) {
+        if (multiple) {
+          return 'checkbox'
+        } else {
+          return 'radio'
+        }
+      } else {
+        return void 0
+      }
+    },
+    modelTableContainerRef () {
+      return uuidv4()
+    },
+    titleMode () {
+      if (type.isObject(this.title)) {
+        const { mode = '' } = this.title
+        return mode
+      }
+      return void 0
+    },
+    tableRef () {
+      return uuidv4()
+    },
+    exposed () {
+      return {
+        currentTableSelection: this.currentTableSelection,
+        currentTreeNode: this.currentTreeNodeData,
+        requestTableData: this.requestTableData
+      }
+    },
+    overrideTableEvent () {
+      const events = this.actions.reduce((ret, action) => {
+        ret[action.eventName] = (e) => {
+          this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT]
+      }
+    },
+    overrideButtonGroupEvent () {
+      const events = this.getButtonGroupElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE]
+      }
+    },
+    showTree () {
+      return !!Object.keys(this.treeMeta).length
+    },
+    buttonGroup () {
+      return uuidv4()
+    },
+    searchArea () {
+      return uuidv4()
+    },
+    modelTreeWrapper () {
+      return uuidv4()
+    },
+    modelTableWrapper () {
+      return uuidv4()
+    },
+    actions () {
+      const { operations } = this.tableMeta
+      if (operations) {
+        return operations.elements
+      } else {
+        return []
+      }
+    },
+    pageSize () {
+      const { page = {} } = this.tableMeta
+      return page.pageSize || 10
+    },
+    pageSizeOptions () {
+      const { page = {} } = this.tableMeta
+      return page.pageSizeOptions || ['10', '20', '30', '40']
+    },
+    columns () {
+      const { columns, operations } = this.tableMeta
+      if (type.get(columns) === 'array') {
+        const columnsOptions = columns.map(item => {
+          const { mode = 'text' } = item
+          if (item.render) {
+            return {
+              ...item,
+              customRender: (text, record, index) => {
+                const { $createElement } = this
+                return item.render.call(this, { h: $createElement, ctx: this }, typeof text == 'string' ? text : text[item.dataIndex], record, index)
+              }
+            }
+          } else if (mode !== BUILT_IN_TRIGGER.TEXT) {
+            const { [`${mode}Meta`]: modeMeta } = item
+            return {
+              ...item,
+              customRender: (text, record, index) => {
+                return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>
+              }
+            }
+          }
+          return {
+            ...item
+          }
+        })
+        if (operations) {
+          return [
+            ...columnsOptions,
+            {
+              title: '操作',
+              width: operations.width,
+              key: 'action',
+              fixed: 'right',
+              scopedSlots: { customRender: 'action' }
+            }
+          ]
+        }
+        return columnsOptions
+      } else {
+        console.error('Error: columns is invalid, please check it')
+        return []
+      }
+    },
+    getButtonGroupElements () {
+      const { elements } = this.buttonGroupMeta
+      if (type.get(elements) === 'function') {
+        return elements.call(this)
+      } else if (type.get(elements) === 'array') {
+        return elements
+      } else {
+        return []
+      }
+    }
+  },
+  async created () {
+    if (this.showTree) {
+      this.treeData = await this.requestTreeData()
+      const [defaultTreeNode = {}] = this.treeData
+      this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
+      this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
+      this.currentTreeNodeData = defaultTreeNode
+    }
+    const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta
+    const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }
+    const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))
+    if (overrideInit) {
+      this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })
+    } else {
+      this.tableData = await this.requestTableData(initQuerys)
+    }
+  },
+  methods: {
+    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {
+      switch (mode) {
+        case BUILT_IN_TRIGGER.FSM:
+          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = { 
+            url: 'api-fsm/workbench/fsm/auditFlow',
+            requestType: 'GET',
+            fieldMap: {
+              modelCode: 'modelCode',
+              businessId: 'businessId'
+            }
+          })
+          break
+        default:
+          break
+      }
+    },
+    handleCloseFsmModal () {
+      this.showFsmModal = false
+    },
+    [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {
+      this.fsmMeta = meta
+      this.fsmContextProp = record
+      this.showFsmModal = true
+    },
+    onChangeTableSelection (_, selectedRows) {
+      if (this.currentTableMode === 'radio') {
+        this.currentTableSelection = selectedRows[0]
+      } else {
+        this.currentTableSelection = selectedRows
+      }
+    },
+    [BUILT_IN_EVENT_NAMES.EDIT] () {
+      this.modalFormMeta = this.editMeta
+      this.modalFormValue = true
+    },
+    [BUILT_IN_EVENT_NAMES.CREATE] () {
+      this.modalFormMeta = this.createMeta
+      this.modalFormValue = true
+    },
+    handleClickButtonGroup (props) {
+      const { eventName } = props
+      this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })
+    },
+    watchViewPort () {
+      const modelTableWrapper = this.$refs[this.modelTableWrapper]
+      console.log(modelTableWrapper.getBoundingClientRect())
+      const { top } = modelTableWrapper.getBoundingClientRect()
+      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`
+    },
+    async onSearch (props) {
+      this.tableQuerys = Object.assign(this.tableQuerys, props)
+      this.tableData = await this.requestTableData()
+    },
+    execTableFieldMap (fieldMap = {}, props) {
+      let ret = {}
+      const keys = Object.keys(fieldMap)
+      keys.forEach(key => {
+        const field = fieldMap[key]
+        ret[field] = props[key]
+      })
+      return ret
+    },
+    async selectTreeNode (selectedKeys, e) {
+      const { fieldMap } = this.tableMeta
+      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef
+      const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)
+      this.tableData = await this.requestTableData(execFieldMapRet)
+    },
+    async requestTreeData () {
+      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta
+      const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })
+      const ret = await net[requestType.toLowerCase()](
+        url,
+        { ...params, ...fieldMapRet }
+      ).then(resp => {
+        const { data } = resp || {}
+        return data
+      })
+      return ret
+    },
+    async onChangePage (page, pageSize) {
+      this.tableData = await this.requestTableData({ currentPage: page, pageSize })
+    },
+    async requestTableData (props = {}) {
+      const { url, requestType = 'GET', page = {} } = this.tableMeta
+      const { pageSize = 10 } = page
+      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)
+      this.loading = true
+      const ret = await net[requestType.toLowerCase()](
+        url,
+        this.tableQuerys
+      ).then(resp => {
+        const { data = [], count } = resp || {}
+        this.total = count
+        this.loading = false
+        return data.map(item => {
+          delete item.children
+          return {
+            key: uuidv4(),
+            ...item
+          }
+        })
+      })
+      return ret
+    },
+    refreshTreeStatus (props = {}) {},
+    refreshTableStatus (props = {}) {},
+    calculateTableHeight () {
+      const currentViewportHeight = window.innerHeight
+      const tableRef = this.$refs[this.tableRef]
+      const { top: tableToTop } = tableRef.$el.getBoundingClientRect()
+      this.tableHeight = currentViewportHeight - tableToTop
+    },
+    calculateTreeHeight () {
+      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]
+      const { height } = modelTableContainerRef.getBoundingClientRect()
+      this.treeWrapperHeight = height
+    }
+  },
+  mounted () {
+    this.calculateTableHeight()
+    this.$nextTick(() => {
+      this.calculateTreeHeight()
+    })
+    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {
+      for (const _ of entries) {
+        requestAnimationFrame(() => {
+          this.calculateTableHeight()
+        })
+      }
+    })
+    this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])
+  },
+  destroyed () {
+    this.resizeObserverModelTableWrapper.disconnect()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele {
+  &.model__tree-table {
+    background: transparent;                                                                                                                                                                                                                 
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    .model__tree-table--container {
+      .model__tree--wrapper {
+        width: 240px;
+        background: #fff;
+        flex-shrink: 0;
+        padding: 16px;
+        box-sizing: border-box;
+        margin-right: 16px;
+        overflow-y: auto;
+      }
+    }
+    .model__table--container {
+      width: 100%;
+      min-width: 0;
+      background: #fff;
+      .model__table--title {
+        .model__table-title--bar {
+          width: 100%;
+          height: 8px;
+          background: var(--idooel-primary-color);
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
+        .model__table-title--text {
+          text-align: left;
+          padding: 16px;
+          font-size: 16px;
+          font-weight: bold;
+          background: #fff;
+          border-bottom: 1px solid;
+          border-color: var(--idoole-black-016);
+        }
+      }
+      .model__table--wrapper {
+        background: #fff;
+        .button-row__area {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          padding-top: 16px;
+          padding-bottom: 8px;
+          padding-right: 16px;
+        }
+        .g-table__wrapper {
+          .fsm {
+            cursor: pointer;
+            color: var(--idooel-primary-color);
+          }
+        }
+      }
+    }
+  }
+}
+</style>