@idooel/components 0.0.2 → 0.0.3-beta.2

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

@@ -1,689 +1,1376 @@
-<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="mapFields">
-        </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>
-          <slot v-if="$slots['sub-center']" name="sub-center"></slot>
-        </div>
-        <ele-table
-          v-on="overrideTableEvent"
-          :ref="tableRef"
-          :row-selection="rowSelection"
-          :loading="loading" 
-          :columns="columns"
-          :total="total"
-          :x="x"
-          :y="y"
-          :bordered="setBorder"
-          :height="tableHeight"
-          :width="tableWidth"
-          :actions="actions"
-          :pageSize="pageSize"
-          :pageSizeOptions="pageSizeOptions"
-          :data-source="tableData"
-          @change-page="onChangePage"
-        ></ele-table>
-      </section>
-    </section>
-    <ele-modal-form v-model="modalFormValue" v-on="overrideModalFormEvent" :meta="modalFormMeta"></ele-modal-form>
-    <ele-modal-fsm v-model="showFsmModal" :contextProp="fsmContextProp" :meta="fsmMeta" @cancel="handleCloseFsmModal"></ele-modal-fsm>
-    <ele-modal-table
-      :meta="modalTableMeta"
-      v-model="modalTableValue"
-      v-on="overrideModalTableEvent"
-    ></ele-modal-table>
-  </section>
-</template>
-
-<script>
-import { type, net, util } from '@idooel/shared'
-import { v4 as uuidv4 } from 'uuid'
-import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'
-export default {
-  name: 'ele-tree-table-model',
-  props: {
-    title: {
-      type: [Object, String]
-    },
-    overHeight: {
-      type: Number,
-      default: 0
-    },
-    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,
-      [CONTEXT]: () => {
-        return {
-          exposed: this.exposed
-        }
-      }
-    }
-  },
-  data () {
-    return {
-      tableHeight: 0,
-      tableWidth: 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: {},
-      currentRowData: {},
-      treeWrapperHeight: 0,
-      currentTableSelection: this.currentTableMode == 'radio' ? {} : [],
-      showFsmModal: false,
-      fsmMeta: {},
-      fsmContextProp: {},
-      modalTableValue: false,
-      modalTableMeta: {}
-    }
-  },
-  computed: {
-    setBorder () {
-      return this.tableMeta.bordered === false ? false : true
-    },
-    rowSelection () {
-      if (!this.currentTableMode) return void 0
-      return {
-        columnTitle: this.currentSelectionColumn.columnTitle,
-        fixed: true,
-        type: this.currentTableMode,
-        onChange: this.onChangeTableSelection
-      }
-    },
-    currentSelectionColumn () {
-      const { multiple } = this.tableMeta
-      const target = this.columns.find(item => Object.keys(item).includes('multiple'))
-      const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')
-      if (target) {
-        return target
-      } else if (isGlobalExistMultiple) {
-        return { multiple }
-      }
-      return void 0
-    },
-    x () {
-      const { x } = this.tableMeta
-      return x
-    },
-    y () {
-      const { y } = this.tableMeta
-      return y
-    },
-    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 {
-        showModalForm: this.showModalForm,
-        closeModalForm: this.closeModalForm,
-        showModalTable: this.showModalTable,
-        closeModalTable: this.closeModalTable,
-        currentTableSelection: this.currentTableSelection,
-        currentTreeNode: this.currentTreeNodeData,
-        requestTableData: this.requestTableData,
-        refreshTreeData: this.refreshTreeData,
-        querys: this.tableQuerys,
-        currentRowData: this.currentRowData,
-        getCurrentRowData: this.getCurrentRowData,
-        setCurrentRowData: this.setCurrentRowData,
-        setCurrentTableSelection: this.setCurrentTableSelection,
-        getCurrentTableSelection: this.getCurrentTableSelection,
-        cleanCurrentModelEffect: this.cleanCurrentModelEffect,
-        route: this.$route,
-        _route: this.$route.query,
-        _routeMeta: this.$route.meta
-      }
-    },
-    overrideTableEvent () {
-      const events = this.actions.reduce((ret, action) => {
-        ret[action.eventName || action.key] = (e) => {
-          this.setCurrentRowData(e.exposed.currentRowData)
-          const { target } = action
-          const targetMeta = this.findMetaByKey(target)
-          const { mode } = targetMeta
-          mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })
-          this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })
-        }
-        return ret
-      }, {})
-      return {
-        ...this.$listeners,
-        ...events,
-        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],
-        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]
-      }
-    },
-    overrideModalFormEvent () {
-      const { footerMeta } = this.modalFormMeta
-      const { elements = [] } = footerMeta || {}
-      const eles = type.isFunction(elements) ? elements.call(this) : elements
-      const events = eles.reduce((ret, ele) => {
-        ret[ele.eventName] = (e = {}) => {
-          if (ele.eventName === 'cancel') {
-            this.closeModalForm()
-          } else {
-            const { exposed = {} } = e
-            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})
-          }
-        }
-        return ret
-      }, {})
-      return {
-        ...events
-      }
-    },
-    overrideModalTableEvent () {
-      const { footerMeta } = this.modalTableMeta
-      const { elements = [] } = footerMeta || {}
-      const eles = type.isFunction(elements) ? elements.call(this) : elements
-      const events = eles.reduce((ret, ele) => {
-        ret[ele.eventName] = (e = {}) => {
-          if (ele.eventName === 'cancel') {
-            this.closeModalTable()
-          } else {
-            const { exposed = {} } = e
-            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})
-          }
-        }
-        return ret
-      }, {})
-      return {
-        ...events,
-        exposed: this.exposed
-      }
-    },
-    overrideButtonGroupEvent () {
-      const events = this.getButtonGroupElements.reduce((ret, ele) => {
-        ret[ele.eventName] = (e) => {
-          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})
-        }
-        return ret
-      }, {})
-      return {
-        ...this.$listeners,
-        ...events,
-        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],
-        exposed: this.exposed
-      }
-    },
-    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 },
-                  text ? typeof text == 'object' ? text[item.dataIndex] : text : '', 
-                  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 []
-      }
-    },
-    mapFields () {
-      const { replaceFields = {} } = this.treeMeta
-      const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields
-      return mapFields
-    }
-  },
-  async created () {
-    if (this.showTree) {
-      this.treeData = await this.requestTreeData()
-      const [defaultTreeNode = {}] = this.treeData
-      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]
-      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.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: {
-    async refreshTreeData () {
-      this.treeData = await this.requestTreeData()
-      const [defaultTreeNode = {}] = this.treeData
-      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]
-      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]
-      this.currentTreeNodeData = defaultTreeNode
-    },
-    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {
-      switch (mode) {
-        case BUILT_IN_TRIGGER.FSM:
-          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { 
-            url: 'api-fsm/workbench/fsm/auditFlow',
-            requestType: 'GET',
-            fieldMap: {
-              modelCode: 'modelCode',
-              businessId: 'businessId'
-            }
-          } : modeMeta)
-          break
-        case BUILT_IN_TRIGGER.ELE_MODAL_FORM:
-          this.modalFormMeta = modeMeta
-          this.showModalForm(modeMeta)
-          break
-        case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:
-          this.modalTableMeta = modeMeta
-          this.showModalTable(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.setCurrentTableSelection(selectedRows)
-        this.$emit('on-change-table-selection', this.currentTableSelection)
-        this.$emit('x:refresh-exposed', { exposed: this.exposed })
-      } else {
-        this.setCurrentTableSelection(selectedRows)
-        this.$emit('on-change-table-selection', this.currentTableSelection)
-        this.$emit('x:refresh-exposed', { exposed: this.exposed })
-      }
-    },
-    setCurrentTableSelection (props = {}) {
-      if (this.currentTableMode === 'radio') {
-        this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})
-      } else {
-        this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])
-      }
-    },
-    getCurrentTableSelection () {
-      return this.currentTableSelection
-    },
-    setCurrentRowData (props = {}) {
-      this.currentRowData = props
-    },
-    getCurrentRowData () {
-      return this.currentRowData
-    },
-    cleanCurrentModelEffect () {
-      this.setCurrentTableSelection()
-      this.setCurrentRowData({})
-    },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
-      this.cleanCurrentModelEffect()
-      this.requestTableData()
-    },
-    [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {
-      const { record = {} } = props
-      this.currentRowData = record
-      this.setCurrentRowData(record)
-      this.modalFormMeta = this.editMeta
-      this.modalFormValue = true
-    },
-    [BUILT_IN_EVENT_NAMES.CREATE] () {
-      this.modalFormMeta = this.createMeta
-      this.modalFormValue = true
-    },
-    showModalForm (modeMeta = {}) {
-      if (type.isStr(modeMeta)) {
-        const targetMeta = this.findMetaByKey(modeMeta)
-        this.modalFormMeta = targetMeta
-      } else {
-        this.modalFormMeta = modeMeta
-      }
-      this.modalFormValue = true
-    },
-    showModalTable (modeMeta = {}) {
-      console.log('showModalTable', modeMeta)
-      if (type.isStr(modeMeta)) {
-        const targetMeta = this.findMetaByKey(modeMeta)
-        this.modalTableMeta = targetMeta
-      } else {
-        this.modalTableMeta = modeMeta
-      }
-      this.modalTableValue = true
-    },
-    closeModalForm () {
-      this.modalFormValue = false
-    },
-    closeModalTable () {
-      console.log('closeModalTable')
-      this.modalTableValue = false
-    },
-    findMetaByKey (key) {
-      return this.$attrs[key] || {}
-    },
-    handleClickButtonGroup (props) {
-      const { eventName, target } = props
-      const targetMeta = this.findMetaByKey(target)
-      const { mode } = targetMeta
-      mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })
-      this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })
-    },
-    watchViewPort () {
-      const modelTableWrapper = this.$refs[this.modelTableWrapper]
-      const { top } = modelTableWrapper.getBoundingClientRect()
-      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`
-    },
-    async onSearch (props) {
-      const { overrideInit = false } = this.tableMeta
-      this.tableQuerys = Object.assign(this.tableQuerys, props)
-      if (overrideInit) {
-        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })
-      } else {
-        this.tableData = await this.requestTableData()
-      }
-    },
-    async selectTreeNode (selectedKeys, e) {
-      const { fieldMap } = this.tableMeta
-      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}
-      //@deprecated '_' namespace is deprecated, please use 'exposed' instead
-      const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })
-      const { overrideInit = false } = this.tableMeta
-      if (overrideInit) {
-        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })
-      } else {
-        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.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })
-      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
-          }
-        })
-      })
-      this.cleanCurrentModelEffect()
-      this.tableData = ret
-      return ret
-    },
-    refreshTreeStatus (props = {}) {},
-    refreshTableStatus (props = {}) {},
-    calculateTableHeight () {
-      const currentViewportHeight = window.innerHeight
-      const tableRef = this.$refs[this.tableRef]
-      const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()
-      this.tableWidth = width
-      this.tableHeight = currentViewportHeight - tableToTop - this.overHeight
-    },
-    calculateTreeHeight () {
-      if (!this.showTree) return
-      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="mapFields">
+        </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>
+          <slot v-if="$slots['sub-center']" name="sub-center"></slot>
+        </div>
+        <ele-table
+          v-on="overrideTableEvent"
+          :ref="tableRef"
+          :row-selection="rowSelection"
+          :loading="loading" 
+          :columns="columns"
+          :total="total"
+          :x="x"
+          :y="y"
+          :bordered="setBorder"
+          :height="tableHeight"
+          :width="tableWidth"
+          :actions="actions"
+          :pageSize="pageSize"
+          :pageSizeOptions="pageSizeOptions"
+          :data-source="tableData"
+          :mode="mode"
+          @change-page="onChangePage"
+        ></ele-table>
+      </section>
+    </section>
+    <ele-modal-form v-model="modalFormValue" v-on="overrideModalFormEvent" :meta="modalFormMeta"></ele-modal-form>
+    <ele-modal-fsm v-model="showFsmModal" :contextProp="fsmContextProp" :meta="fsmMeta" @cancel="handleCloseFsmModal"></ele-modal-fsm>
+    <ele-modal-table
+      :meta="modalTableMeta"
+      v-model="modalTableValue"
+      v-on="overrideModalTableEvent"
+    ></ele-modal-table>
+  </section>
+</template>
+
+<script>
+import { type, net } from '@idooel/shared'
+import { v4 as uuidv4 } from 'uuid'
+import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'
+import { createTreeTableModel } from '@idooel/runtime-context'
+export default {
+  name: 'ele-tree-table-model',
+  props: {
+    title: {
+      type: [Object, String]
+    },
+    overHeight: {
+      type: Number,
+      default: 0
+    },
+    treeMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    searchMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    buttonGroupMeta: {
+      typeof: Object,
+      default: () => ({})
+    },
+    tableMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    createMeta: {
+      type: Object
+    },
+    editMeta: {
+      type: Object
+    }
+  },
+  inject: {
+    parentScopeId: {
+      default: () => (() => null)
+    },
+    parentEvalExpression: {
+      from: 'evalExpression',
+      default: () => (() => undefined)
+    }
+  },
+  provide () {
+    return {
+      evalExpression: this.parseExpression,
+      requestTreeData: this.requestTreeData,
+      requestTableData: this.requestTableData,
+      keepAliveRefresh: this.keepAliveRefresh,
+      parentScopeId: () => this.model?.scopeId,
+      [CONTEXT]: () => {
+        return {
+          exposed: this.exposed
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      tableHeight: 0,
+      tableWidth: 0,
+      modalFormMeta: {},
+      modalFormValue: false,
+      treeData: [],
+      tableData: [],
+      defaultExpandedKeys: [],
+      defaultSelectedKeys: [],
+      replaceFields: {
+        title: 'title',
+        children: 'children',
+        key: 'id'
+      },
+      loading: false,
+      total: 0,
+      tableQuerys: {},
+      resizeObserverModelTableWrapper: null,
+      resizeObserverModelTableContainer: null,
+      modelTableWrapperHeight: 0,
+      currentTreeNodeData: {},
+      currentRowData: {},
+      treeWrapperHeight: 0,
+      currentTableSelection: this.currentTableMode == 'radio' ? {} : [],
+      showFsmModal: false,
+      fsmMeta: {},
+      fsmContextProp: {},
+      modalTableValue: false,
+      modalTableMeta: {}
+    }
+  },
+  computed: {
+    setBorder () {
+      return this.tableMeta.bordered === false ? false : true
+    },
+    rowSelection () {
+      if (!this.currentTableMode) return void 0
+      return {
+        columnTitle: this.currentSelectionColumn.columnTitle,
+        fixed: true,
+        type: this.currentTableMode,
+        onChange: this.onChangeTableSelection
+      }
+    },
+    currentSelectionColumn () {
+      const { multiple } = this.tableMeta
+      const target = this.columns.find(item => Object.keys(item).includes('multiple'))
+      const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')
+      if (target) {
+        return target
+      } else if (isGlobalExistMultiple) {
+        return { multiple }
+      }
+      return void 0
+    },
+    x () {
+      const { x } = this.tableMeta
+      return x
+    },
+    y () {
+      const { y } = this.tableMeta
+      return y
+    },
+    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 {
+        showModalForm: this.showModalForm,
+        closeModalForm: this.closeModalForm,
+        showModalTable: this.showModalTable,
+        closeModalTable: this.closeModalTable,
+        currentTableSelection: this.currentTableSelection,
+        currentTreeNode: this.currentTreeNodeData,
+        requestTableData: this.requestTableData,
+        keepAliveRefresh: this.keepAliveRefresh,
+        refreshTreeData: this.refreshTreeData,
+        querys: this.tableQuerys,
+        currentRowData: this.getCurrentRowData(),
+        getCurrentRowData: this.getCurrentRowData,
+        setCurrentRowData: this.setCurrentRowData,
+        setCurrentTableSelection: this.setCurrentTableSelection,
+        getCurrentTableSelection: this.getCurrentTableSelection,
+        cleanCurrentModelEffect: this.cleanCurrentModelEffect,
+        route: this.$route,
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta
+      }
+    },
+    overrideTableEvent () {
+      const events = this.actions.reduce((ret, action) => {
+        ret[action.eventName || action.key] = (e) => {
+          this.setCurrentRowData(e.exposed.currentRowData)
+          const { target } = action
+          const targetMeta = this.findMetaByKey(target)
+          const { mode } = targetMeta
+          mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })
+          this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],
+        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]
+      }
+    },
+    overrideModalFormEvent () {
+      const { footerMeta } = this.modalFormMeta
+      const { elements = [] } = footerMeta || {}
+      const eles = type.isFunction(elements) ? elements.call(this) : elements
+      const events = eles.reduce((ret, ele) => {
+        ret[ele.eventName] = (e = {}) => {
+          if (ele.eventName === 'cancel') {
+            this.closeModalForm()
+          } else {
+            const { exposed = {} } = e
+            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})
+          }
+        }
+        return ret
+      }, {})
+      return {
+        ...events
+      }
+    },
+    overrideModalTableEvent () {
+      const { footerMeta } = this.modalTableMeta
+      const { elements = [] } = footerMeta || {}
+      const eles = type.isFunction(elements) ? elements.call(this) : elements
+      const events = eles.reduce((ret, ele) => {
+        ret[ele.eventName] = (e = {}) => {
+          if (ele.eventName === 'cancel') {
+            this.closeModalTable()
+          } else {
+            const { exposed = {} } = e
+            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})
+          }
+        }
+        return ret
+      }, {})
+      return {
+        ...events,
+        exposed: this.exposed
+      }
+    },
+    overrideButtonGroupEvent () {
+      const events = this.getButtonGroupElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],
+        exposed: this.exposed
+      }
+    },
+    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
+    },
+    mode () {
+      const { page = {} } = this.tableMeta
+      return page.mode
+    },
+    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 },
+                  text ? typeof text == 'object' ? text[item.dataIndex] : text : '', 
+                  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 []
+      }
+    },
+    mapFields () {
+      const { replaceFields = {} } = this.treeMeta
+      const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields
+      return mapFields
+    }
+  },
+  async created () {
+    // onSearch会初始化请求表格数据，所以不需要在这里请求表格数据
+    // 初始化数据池管理器（使用新的 Mutix-based runtime-context）
+    try {
+      // 使用组件名 + UUID 作为调试名称，方便在 DevTools 中区分多个实例
+      // 这里的 Symbol description 将被 mutix devtools plugin 提取显示
+      const debugName = `TreeTableModel_${this.tableRef || uuidv4().slice(0, 8)}`
+      // 获取父作用域 ID
+      const parentId = this.parentScopeId?.() || null
+      // 创建模型时传入父作用域
+      this.model = createTreeTableModel(Symbol(debugName), undefined, parentId)
+      
+      if (!this.model) {
+        throw new Error('Failed to create tree table model')
+      }
+    } catch (error) {
+      console.error('Error creating tree table model:', error)
+      this.model = null
+      return
+    }
+    
+    // 初始化 currentRowData
+    this.initializeCurrentRowData()
+    
+    // 订阅数据池变化，实现精确的状态同步
+    this.setupModelSubscriptions()
+    
+    if (this.showTree) {
+      this.treeData = await this.requestTreeData()
+      const [defaultTreeNode = {}] = this.treeData
+      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]
+      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]
+      
+      // 1. 先更新模型（Single Source of Truth）
+      if (this.model) {
+        this.model.setSelectedNode(defaultTreeNode)
+      }
+      
+      // 2. 组件层数据通过订阅自动更新，无需手动设置
+      // this.currentTreeNodeData = defaultTreeNode // 不再需要
+      
+      const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta
+      
+      // 使用最新的 currentRowData 和统一的表达式上下文
+      const currentRowData = this.getCurrentRowData()
+      const extraContext = { 
+        currentRowData: currentRowData
+      }
+      
+      const initQuerys = Object.assign({}, params, this.parseFieldMap(fieldMap, extraContext))
+      if (overrideInit) {
+        this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })
+      } else {
+        this.tableData = await this.requestTableData(initQuerys)
+      }
+    } else {
+      const { params = {}, fieldMap = {} } = this.tableMeta
+      const currentRowData = this.getCurrentRowData()
+      const extraContext = { 
+        currentRowData: currentRowData
+      }
+      this.tableQuerys = Object.assign({}, params, this.parseFieldMap(fieldMap, extraContext))
+    }
+  },
+  methods: {
+    /**
+     * 构建标准化的表达式数据上下文
+     * @returns {Object} 表达式求值上下文
+     */
+    buildExpressionContext () {
+      let parentSelectedNode = {}
+      let parentCurrentRowData = {}
+      
+      if (this.parentEvalExpression) {
+        try {
+          parentSelectedNode = this.parentEvalExpression('selectedNode') || {}
+          parentCurrentRowData = this.parentEvalExpression('currentRowData') || {}
+        } catch (e) {
+          // ignore
+        }
+      }
+
+      const currentTreeNode = this.model ? this.model.getSelectedNode() : this.currentTreeNodeData
+      const currentRowData = this.getCurrentRowData()
+
+      return {
+        // 路由数据
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta,
+        
+        // 树节点数据 - 合并父级数据以支持字段级 fallback
+        currentTreeNode: { ...parentSelectedNode, ...currentTreeNode },
+        selectedNode: { ...parentSelectedNode, ...currentTreeNode },
+        
+        // 表格数据 - 合并父级数据以支持字段级 fallback
+        currentRowData: { ...parentCurrentRowData, ...currentRowData },
+        currentTableSelection: this.getCurrentTableSelection(),
+        
+        // 分页数据
+        pagination: {
+          currentPage: this.tableQuerys.currentPage || 1,
+          pageSize: this.tableQuerys.pageSize || this.pageSize,
+          total: this.total
+        },
+        
+        // 查询参数
+        queryParams: this.tableQuerys,
+        
+        // 表格元数据
+        tableMeta: this.tableMeta,
+        treeMeta: this.treeMeta,
+        
+        // 暴露的方法和数据
+        exposed: this.exposed
+      }
+    },
+    
+    /**
+     * 统一表达式解析方法
+     * @param {string} expression - 表达式字符串
+     * @param {Object} extraContext - 额外上下文数据
+     * @returns {any} 表达式求值结果
+     */
+    parseExpression (expression, extraContext = {}) {
+      if (!this.model) {
+        console.warn('[TreeTableModel] Model not initialized, cannot parse expression')
+        return undefined
+      }
+      
+      try {
+        const context = {
+          ...this.buildExpressionContext(),
+          ...extraContext
+        }
+        const val = this.model.eval(expression, context)
+        if ((val === undefined || val === null) && this.parentEvalExpression) {
+          return this.parentEvalExpression(expression, extraContext)
+        }
+        return val
+      } catch (error) {
+        console.error(`[TreeTableModel] Expression parsing failed: "${expression}"`, error)
+        return undefined
+      }
+    },
+    
+    /**
+     * 统一字段映射解析方法
+     * @param {Object} fieldMap - 字段映射配置
+     * @param {Object} extraContext - 额外上下文数据
+     * @returns {Object} 解析后的参数字段
+     */
+    parseFieldMap (fieldMap = {}, extraContext = {}) {
+      if (!fieldMap || Object.keys(fieldMap).length === 0) {
+        return {}
+      }
+      
+      const ret = {}
+      Object.keys(fieldMap).forEach((expression) => {
+        const targetKey = fieldMap[expression]
+        // Use this.parseExpression which internally uses model.eval for better context access
+        ret[targetKey] = this.parseExpression(expression, extraContext)
+      })
+      
+      return ret
+    },
+    
+    /**
+     * 设置模型订阅，实现精确的状态同步
+     */
+    setupModelSubscriptions () {
+      if (!this.model) {
+        console.warn('[TreeTableModel] Model not initialized, cannot setup subscriptions')
+        return
+      }
+      
+      // 订阅当前行数据变化
+      this.unsubscribeRowData = this.model.subscribe('currentRowData', (newValue, oldValue) => {
+        // 模型已经确保只有真正变化时才会调用这里
+        this.currentRowData = newValue || {}
+        // 触发视图更新，但避免过度使用$forceUpdate
+        this.$nextTick(() => {
+          this.$emit('x:current-row-changed', { 
+            currentRowData: this.currentRowData,
+            previousRowData: oldValue 
+          })
+        })
+      })
+      
+      // 订阅表格数据变化
+      this.unsubscribeTableData = this.model.subscribe('tableData', (newValue) => {
+        // 模型已经确保只有真正变化时才会调用这里
+        this.tableData = newValue || []
+        this.$emit('x:table-data-changed', { tableData: this.tableData })
+      })
+      
+      // 订阅树数据变化
+      this.unsubscribeTreeData = this.model.subscribe('treeData', (newValue) => {
+        // 模型已经确保只有真正变化时才会调用这里
+        this.treeData = newValue || []
+        this.$emit('x:tree-data-changed', { treeData: this.treeData })
+      })
+      
+      // 订阅加载状态变化
+      this.unsubscribeLoading = this.model.subscribe('loading', (newValue) => {
+        if (this.loading !== newValue) {
+          this.loading = newValue
+          this.$emit('x:loading-changed', { loading: this.loading })
+        }
+      })
+      
+      // 订阅总记录数变化
+      this.unsubscribeTotal = this.model.subscribe('total', (newValue) => {
+        if (this.total !== newValue) {
+          this.total = newValue
+          this.$emit('x:total-changed', { total: this.total })
+        }
+      })
+      
+      // 订阅共享数据变化（用于弹窗表格等场景）
+      this.unsubscribeShared = this.model.subscribe('_sharedData', (newValue) => {
+        if (newValue && Object.keys(newValue).length > 0) {
+          this.setCurrentRowData(newValue)
+          this.$emit('x:shared-data-changed', { sharedData: newValue })
+        }
+      })
+      
+      // 订阅选择数据变化
+      this.unsubscribeSelection = this.model.subscribe('currentTableSelection', (newValue, oldValue) => {
+        // 模型已经确保只有真正变化时才会调用这里
+        this.currentTableSelection = newValue || {}
+        // 触发视图更新和事件通知
+        this.$nextTick(() => {
+          this.$emit('x:current-table-selection-changed', { 
+            currentTableSelection: this.currentTableSelection,
+            previousCurrentTableSelection: oldValue 
+          })
+        })
+      })
+      
+      // 订阅选中的树节点变化
+      this.unsubscribeSelectedNode = this.model.subscribe('selectedNode', (newValue, oldValue) => {
+        // 模型已经确保只有真正变化时才会调用这里
+        this.currentTreeNodeData = newValue || {}
+        // 触发视图更新和事件通知
+        this.$nextTick(() => {
+          this.$emit('x:selected-node-changed', { 
+            selectedNode: this.currentTreeNodeData,
+            previousSelectedNode: oldValue 
+          })
+        })
+      })
+      
+      console.log('[TreeTableModel] Model subscriptions setup completed')
+    },
+    
+    /**
+     * 性能监控工具方法
+     * @param {string} operation - 操作名称
+     * @param {Function} fn - 要监控的函数
+     * @returns {Promise<any>} 函数执行结果
+     */
+    async withPerformanceMonitoring (operation, fn) {
+      const startTime = performance.now()
+      try {
+        const result = await fn()
+        const duration = performance.now() - startTime
+        console.log(`[TreeTableModel] ${operation} took ${duration.toFixed(2)}ms`)
+        return result
+      } catch (error) {
+        const duration = performance.now() - startTime
+        console.error(`[TreeTableModel] ${operation} failed after ${duration.toFixed(2)}ms:`, error)
+        throw error
+      }
+    },
+    
+    /**
+     * 错误处理工具方法
+     * @param {string} context - 错误上下文
+     * @param {Function} fn - 要执行的函数
+     * @param {any} fallbackValue - 错误时的默认值
+     * @returns {any} 函数执行结果或默认值
+     */
+    withErrorHandling (context, fn, fallbackValue = undefined) {
+      try {
+        return fn()
+      } catch (error) {
+        console.error(`[TreeTableModel] Error in ${context}:`, error)
+        return fallbackValue
+      }
+    },
+    
+    /**
+     * 清理所有模型订阅
+     */
+    cleanupModelSubscriptions () {
+      const subscriptions = [
+        'unsubscribeRowData',
+        'unsubscribeTableData', 
+        'unsubscribeTreeData',
+        'unsubscribeLoading',
+        'unsubscribeTotal',
+        'unsubscribeShared',
+        'unsubscribeSelection',
+        'unsubscribeSelectedNode'
+      ]
+      
+      subscriptions.forEach(subscriptionName => {
+        if (this[subscriptionName] && typeof this[subscriptionName] === 'function') {
+          try {
+            this[subscriptionName]()
+            this[subscriptionName] = null
+          } catch (error) {
+            console.warn(`[TreeTableModel] Failed to cleanup subscription: ${subscriptionName}`, error)
+          }
+        }
+      })
+      
+      console.log('[TreeTableModel] Model subscriptions cleanup completed')
+    },
+    
+    initializeCurrentRowData () {
+      if (!this.model) return
+      
+      let initialData = {}
+
+      // 1. 优先检查共享数据（来自父级）
+      const sharedData = this.model.getSharedData()
+      if (sharedData && Object.keys(sharedData).length > 0) {
+        initialData = sharedData
+      } else {
+        // 2. 其次检查 props 或路由参数 (示例逻辑)
+        // const { rowId } = this.$route.query
+        // if (rowId) { ... }
+      }
+
+      // 3. 设置到 Model，这是唯一的数据源初始化入口
+      this.model.setCurrentRowData(initialData)
+      
+      // 4. 同步回本地（虽然 subscribe 会处理，但为了立即能用，这里也设置一下）
+      this.currentRowData = initialData
+    },
+    async refreshTreeData () {
+      return this.withPerformanceMonitoring('refreshTreeData', async () => {
+        this.treeData = await this.requestTreeData()
+        const [defaultTreeNode = {}] = this.treeData
+        this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]
+        this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]
+        
+        // 1. 先更新模型（Single Source of Truth）
+        if (this.model) {
+          this.model.setSelectedNode(defaultTreeNode)
+        }
+        
+        // 2. 组件层数据通过订阅自动更新，无需手动设置
+        // this.currentTreeNodeData = defaultTreeNode // 不再需要
+        
+        this.$emit('x:tree-refreshed', { 
+          treeData: this.treeData,
+          currentTreeNode: defaultTreeNode 
+        })
+        
+        return this.treeData
+      })
+    },
+    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {
+      switch (mode) {
+        case BUILT_IN_TRIGGER.FSM:
+          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { 
+            url: 'api-fsm/workbench/fsm/auditFlow',
+            requestType: 'GET',
+            fieldMap: {
+              modelCode: 'modelCode',
+              businessId: 'businessId'
+            }
+          } : modeMeta)
+          break
+        case BUILT_IN_TRIGGER.ELE_MODAL_FORM:
+          this.modalFormMeta = modeMeta
+          this.showModalForm(modeMeta)
+          break
+        case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:
+          this.modalTableMeta = modeMeta
+          // 将当前行的 record 数据传递给 modal table
+          this.showModalTable(modeMeta, record)
+          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 = []) {
+      // 1. 先更新模型（Single Source of Truth）
+      if (this.model) {
+        this.model.setCurrentTableSelection(selectedRows)
+      }
+      
+      // 2. 组件层数据通过订阅自动更新，无需手动设置
+      // this.setCurrentTableSelection(selectedRows) // 不再需要
+      
+      // 3. 继续后续逻辑
+      this.$emit('on-change-table-selection', this.currentTableSelection)
+      this.$emit('x:refresh-exposed', { exposed: this.exposed })
+    },
+    setCurrentTableSelection (props = {}) {
+      return this.withErrorHandling('setCurrentTableSelection', () => {
+        // 处理数据格式
+        let processedData
+        if (this.currentTableMode === 'radio') {
+          processedData = (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {}
+        } else {
+          processedData = type.isArray(props) ? props : []
+        }
+        
+        // 1. 始终先更新 Model (Single Source of Truth)
+        if (this.model) {
+          this.model.setCurrentTableSelection(processedData)
+        }
+        
+        // 2. 组件层数据通过订阅自动更新，无需手动设置
+        // this.$set(this, 'currentTableSelection', processedData) // 不再需要
+        
+        // 3. 对外广播
+        this.$emit('x:current-table-selection-set', { currentTableSelection: processedData })
+        
+        return processedData
+      }, {})
+    },
+    getCurrentTableSelection () {
+      return this.withErrorHandling('getCurrentTableSelection', () => {
+        if (this.model) {
+          return this.model.getCurrentTableSelection()
+        }
+        console.warn('[TreeTableModel] Model not initialized, getCurrentTableSelection returning local data')
+        return this.currentTableSelection || {}
+      }, {})
+    },
+    setCurrentRowData (props = {}) {
+      return this.withErrorHandling('setCurrentRowData', () => {
+        // 关键：通过浅克隆断开与 Vue 2 Observer 的引用，保证数据纯净
+        const newData = props ? { ...props } : {}
+        
+        // 1. 始终先更新 Model (Single Source of Truth)
+        if (this.model) {
+          this.model.setCurrentRowData(newData)
+        } else {
+          console.warn('[TreeTableModel] Model not initialized, cannot setCurrentRowData in model')
+        }
+        
+        // 2. 更新本地视图 (双重保证，避免订阅延迟导致的闪烁)
+        this.currentRowData = newData
+        
+        // 3. 对外广播
+        // 注意：不再需要手动 emit 事件给外部来同步状态，因为外部如果想监听，应该监听 model 变化
+        // 但为了兼容旧代码，保持一些必要的 emit 可能是好的，比如 'row-change'
+        this.$emit('x:current-row-data-set', { currentRowData: this.currentRowData })
+        
+        return this.currentRowData
+      }, {})
+    },
+    getCurrentRowData () {
+      return this.withErrorHandling('getCurrentRowData', () => {
+        if (this.model) {
+          return this.model.getCurrentRowData()
+        }
+        console.warn('[TreeTableModel] Model not initialized, getCurrentRowData returning local data')
+        return this.currentRowData || {}
+      }, {})
+    },
+    cleanCurrentModelEffect (clearRowData = true) {
+      const action = () => {
+        this.setCurrentTableSelection()
+        if (clearRowData) {
+          this.setCurrentRowData({})
+        }
+      }
+      
+      if (this.model) {
+        this.model.batch(action)
+      } else {
+        action()
+      }
+    },
+    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      this.cleanCurrentModelEffect()
+      this.requestTableData()
+    },
+    [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {
+      const { record = {} } = props
+      this.setCurrentRowData(record)
+      this.modalFormMeta = this.editMeta
+      this.modalFormValue = true
+    },
+    [BUILT_IN_EVENT_NAMES.CREATE] () {
+      this.modalFormMeta = this.createMeta
+      this.modalFormValue = true
+    },
+    showModalForm (modeMeta = {}) {
+      if (type.isStr(modeMeta)) {
+        const targetMeta = this.findMetaByKey(modeMeta)
+        this.modalFormMeta = targetMeta
+      } else {
+        this.modalFormMeta = modeMeta
+      }
+      this.modalFormValue = true
+    },
+    showModalTable (modeMeta = {}, record = null) {
+      // 获取当前行数据并设置到共享命名空间
+      const currentRowData = record || this.getCurrentRowData()
+      
+      // 🔍 关键调试日志 - 开始
+      console.log('[DEBUG] showModalTable - currentRowData:', currentRowData)
+      console.log('[DEBUG] showModalTable - currentTreeNodeData:', this.currentTreeNodeData)
+      console.log('[DEBUG] showModalTable - 是否有model:', !!this.model)
+      
+      if (this.model) {
+        this.model.setSharedData(currentRowData)
+      } else {
+        console.warn('Model not initialized, cannot setSharedData')
+      }
+      
+      let targetMeta = modeMeta
+      if (type.isStr(modeMeta)) {
+        targetMeta = this.findMetaByKey(modeMeta)
+      }
+      
+      // 🔍 关键调试日志 - fieldMap处理
+      console.log('[DEBUG] showModalTable - targetMeta:', targetMeta)
+      console.log('[DEBUG] showModalTable - 是否有fieldMap:', !!(targetMeta && targetMeta.fieldMap))
+      
+      // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData 和父级数据
+      if (targetMeta && targetMeta.tableMeta.fieldMap) {
+        const { fieldMap, params = {} } = targetMeta.tableMeta
+        
+        console.log('[DEBUG] showModalTable - fieldMap:', fieldMap)
+        
+        // 关键：构建完整的上下文，保留原有数据并添加父级节点
+        const extraContext = {}
+        
+        console.log('[DEBUG] showModalTable - extraContext:', extraContext)
+        
+        const parsedParams = this.parseFieldMap(fieldMap, extraContext)
+        
+        console.log('[DEBUG] showModalTable - parsedParams:', parsedParams)
+        
+        // 将解析后的参数传递给 modal table
+        targetMeta.tableMeta = {
+          ...targetMeta.tableMeta,
+          params: {
+            ...params,
+            ...parsedParams
+          }
+        }
+        
+        console.log('[DEBUG] showModalTable - 最终targetMeta.params:', targetMeta.params)
+      }
+      
+      this.modalTableMeta = targetMeta
+      this.modalTableValue = true
+      
+      console.log('[DEBUG] showModalTable - 最终modalTableMeta:', this.modalTableMeta)
+    },
+    closeModalForm () {
+      this.modalFormValue = false
+    },
+    closeModalTable () {
+      this.modalTableValue = false
+    },
+    findMetaByKey (key) {
+      return this.$attrs[key] || {}
+    },
+    handleClickButtonGroup (props) {
+      const { eventName, target } = props
+      const targetMeta = this.findMetaByKey(target)
+      const { mode } = targetMeta
+      mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })
+      this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })
+    },
+    async onSearch (props) {
+      const { overrideInit = false } = this.tableMeta
+      this.tableQuerys = Object.assign(this.tableQuerys, props)
+      if (overrideInit) {
+        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })
+      } else {
+        const { initSearch = false } = props
+        if (this.showTree && initSearch) return
+        this.tableData = await this.requestTableData()
+      }
+    },
+    async selectTreeNode (selectedKeys, e) {
+      const { fieldMap } = this.tableMeta
+      const selectedNodeData = e.node.$vnode.data.props.dataRef || {}
+      
+      // 1. 先更新模型（Single Source of Truth）
+      if (this.model) {
+        this.model.setSelectedNode(selectedNodeData)
+      }
+
+      // 2. 组件层数据通过订阅自动更新，无需手动设置
+      // this.currentTreeNodeData = selectedNodeData // 不再需要
+      
+      // 3. 继续后续逻辑
+      // 使用统一的字段映射解析方法，自动包含所需的上下文
+      const execFieldMapRet = this.parseFieldMap(fieldMap)
+      const { overrideInit = false } = this.tableMeta
+      if (overrideInit) {
+        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })
+      } else {
+        this.tableData = await this.requestTableData(execFieldMapRet)
+      }
+    },
+    async requestTreeData () {
+      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta
+      
+      // 使用统一的字段映射解析方法
+      const fieldMapRet = this.parseFieldMap(fieldMap)
+      
+      try {
+        const startTime = performance.now()
+        const ret = await net[requestType.toLowerCase()](
+          url,
+          { ...params, ...fieldMapRet }
+        ).then(resp => {
+          const { data } = resp || {}
+          return data
+        })
+        
+        // 性能监控
+        const duration = performance.now() - startTime
+        console.log(`[TreeTableModel] Tree data request took ${duration.toFixed(2)}ms`)
+        
+        // 通过模型设置树数据
+        if (this.model) {
+          this.model.setTreeData(ret)
+        }
+        
+        return ret
+      } catch (error) {
+        console.error('[TreeTableModel] Failed to request tree data:', error)
+        // 错误时设置空数据
+        if (this.model) {
+          this.model.setTreeData([])
+        }
+        return []
+      }
+    },
+    async onChangePage (page, pageSize) {
+      this.tableData = await this.requestTableData({ currentPage: page, pageSize })
+    },
+    async requestTableData (props = {}) {
+      const { url, requestType = 'GET', page = {} } = this.tableMeta
+      
+      // 更新查询参数
+      this.tableQuerys = Object.assign(this.tableQuerys, { 
+        currentPage: this.tableQuerys.currentPage || 1, 
+        pageSize: this.tableQuerys.pageSize || page.pageSize || 10 
+      }, props)
+      
+      // 通过模型设置加载状态
+      if (this.model) {
+        this.model.setLoading(true)
+      }
+      
+      this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })
+      
+      try {
+        const startTime = performance.now()
+        const ret = await net[requestType.toLowerCase()](
+          url,
+          this.tableQuerys
+        ).then(resp => {
+          const { data = [], count } = resp || {}
+          
+          // 通过模型设置数据
+          if (this.model) {
+            this.model.batch(() => {
+              this.model.setTableData(data || [])
+              this.model.setTotal(count || 0)
+              this.model.setPagination(
+                this.tableQuerys.currentPage || 1,
+                this.tableQuerys.pageSize || page.pageSize || 10
+              )
+            })
+          }
+          
+          // 性能监控
+          const duration = performance.now() - startTime
+          console.log(`[TreeTableModel] Table data request took ${duration.toFixed(2)}ms, returned ${(data || []).length} items`)
+          
+          return (data || []).map(item => {
+            delete item.children
+            return {
+              key: uuidv4(),
+              ...item
+            }
+          })
+        })
+        
+        // 更新本地数据（保持兼容）
+        this.tableData = ret
+        this.total = this.model ? this.model.getTotal() : 0
+        
+        return ret
+      } catch (error) {
+        console.error('[TreeTableModel] Failed to request table data:', error)
+        
+        // 错误时设置空数据
+        if (this.model) {
+          this.model.setTableData([])
+          this.model.setTotal(0)
+        }
+        
+        this.tableData = []
+        this.total = 0
+        return []
+      } finally {
+        const finalize = () => {
+          if (this.model) {
+            this.model.setLoading(false)
+          }
+          this.loading = false
+          // 清理当前模型效果（不清空currentRowData）
+          this.cleanCurrentModelEffect(false)
+        }
+
+        // 使用 batch 确保 loading 状态改变和清理操作原子化
+        if (this.model) {
+          this.model.batch(finalize)
+        } else {
+          finalize()
+        }
+      }
+    },
+    calculateTableHeight () {
+      const currentViewportHeight = window.innerHeight
+      const tableRef = this.$refs[this.tableRef]
+      if (!tableRef || !tableRef.$el) return
+      
+      const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()
+      this.tableWidth = width
+      
+      // 获取分页组件的高度（如果存在）
+      let paginationHeight = 0
+      const paginationEl = tableRef.$el.querySelector('.g-table__pagination')
+      if (paginationEl) {
+        paginationHeight = paginationEl.getBoundingClientRect().height || 50
+      } else {
+        // 如果分页组件还未渲染，使用默认高度
+        paginationHeight = 50
+      }
+      
+      // 计算表格高度：视口高度 - 表格顶部距离 - 分页高度 - 额外高度
+      const calculatedHeight = currentViewportHeight - tableToTop - paginationHeight - this.overHeight - 20
+      // 确保最小高度，避免表格过小
+      this.tableHeight = Math.max(calculatedHeight, 200)
+    },
+    calculateTreeHeight () {
+      if (!this.showTree) return
+      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]
+      if (!modelTableContainerRef) return
+      
+      const { height } = modelTableContainerRef.getBoundingClientRect()
+      // 确保树的高度和表格容器高度一致
+      this.treeWrapperHeight = height
+      
+      // 如果表格容器有标题，需要减去标题高度
+      const titleEl = modelTableContainerRef.querySelector('.model__table--title')
+      if (titleEl) {
+        const titleHeight = titleEl.getBoundingClientRect().height
+        this.treeWrapperHeight = height - titleHeight
+      }
+    },
+    async keepAliveRefresh () {
+      return this.withPerformanceMonitoring('keepAliveRefresh', async () => {
+        // 重新计算表格高度（应对窗口大小变化）
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.calculateTableHeight()
+            if (this.showTree) {
+              this.calculateTreeHeight()
+            }
+          }, 200)
+        })
+        
+        // 刷新列表数据
+        const { overrideInit = false } = this.tableMeta
+        if (overrideInit) {
+          // 如果使用自定义初始化模式，触发 INIT 事件
+          this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })
+        } else {
+          // 使用当前查询参数刷新表格数据
+          await this.requestTableData(this.tableQuerys)
+        }
+        
+        this.$emit('x:refresh-completed', { 
+          tableData: this.tableData,
+          treeData: this.treeData,
+          currentRowData: this.currentRowData
+        })
+      })
+    }
+  },
+  mounted () {
+    // 初始化时先设置一个默认高度，避免布局混乱
+    this.tableHeight = 400
+    if (this.showTree) {
+      this.treeWrapperHeight = 400
+    }
+    
+    // 延迟计算，确保所有组件都已渲染
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.calculateTableHeight()
+        this.calculateTreeHeight()
+      }, 200)
+    })
+    
+    // 使用 ResizeObserver 监听容器大小变化
+    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {
+      for (const _ of entries) {
+        requestAnimationFrame(() => {
+          // 延迟重新计算，确保分页组件高度已更新
+          setTimeout(() => {
+            this.calculateTableHeight()
+            if (this.showTree) {
+              this.calculateTreeHeight()
+            }
+          }, 100)
+        })
+      }
+    })
+    
+    if (this.$refs[this.modelTableWrapper]) {
+      this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])
+    }
+    
+    // 监听表格容器大小变化（用于同步树高度）
+    if (this.showTree && this.$refs[this.modelTableContainerRef]) {
+      this.resizeObserverModelTableContainer = new ResizeObserver(entries => {
+        for (const _ of entries) {
+          requestAnimationFrame(() => {
+            this.calculateTreeHeight()
+          })
+        }
+      })
+      this.resizeObserverModelTableContainer.observe(this.$refs[this.modelTableContainerRef])
+    }
+    
+    // 监听窗口大小变化
+    this.handleResize = () => {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.calculateTableHeight()
+          if (this.showTree) {
+            this.calculateTreeHeight()
+          }
+        }, 100)
+      })
+    }
+    window.addEventListener('resize', this.handleResize)
+  },
+  destroyed () {
+    if (this.resizeObserverModelTableWrapper) {
+      this.resizeObserverModelTableWrapper.disconnect()
+    }
+    if (this.resizeObserverModelTableContainer) {
+      this.resizeObserverModelTableContainer.disconnect()
+    }
+    if (this.handleResize) {
+      window.removeEventListener('resize', this.handleResize)
+    }
+    if (this.model) {
+      // 清理所有订阅
+      this.cleanupModelSubscriptions()
+      // 清理模型数据
+      this.model.cleanup()
+    }
+  },
+  async activated () {
+    await this.keepAliveRefresh()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele {
+  &.model__tree-table {
+    background: transparent;                                                                                                                                                                                                                 
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .model__tree-table--container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .model__tree--wrapper {
+        width: 240px;
+        background: #fff;
+        flex-shrink: 0;
+        padding: 16px;
+        box-sizing: border-box;
+        margin-right: 16px;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    }
+    .model__table--container {
+      width: 100%;
+      min-width: 0;
+      background: #fff;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      .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;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+        .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;
+          flex-shrink: 0;
+        }
+        .g-table__wrapper {
+          flex: 1;
+          min-height: 0;
+          overflow: hidden;
+          .fsm {
+            cursor: pointer;
+            color: var(--idooel-primary-color);
+          }
+        }
+      }
+    }
+  }
+}
+</style>