@idooel/components 0.0.2-beta.17 → 0.0.2-beta.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3002,6 +3002,7 @@ var script$A = {
|
|
|
3002
3002
|
}
|
|
3003
3003
|
},
|
|
3004
3004
|
async created() {
|
|
3005
|
+
// onSearch会初始化请求表格数据，所以不需要在这里请求表格数据
|
|
3005
3006
|
// 确保全局数据池已初始化
|
|
3006
3007
|
if (!window.__idooel_data_pool__) {
|
|
3007
3008
|
console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.');
|
|
@@ -3042,25 +3043,25 @@ var script$A = {
|
|
|
3042
3043
|
this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]];
|
|
3043
3044
|
this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]];
|
|
3044
3045
|
this.currentTreeNodeData = defaultTreeNode;
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
}
|
|
3062
|
-
|
|
3063
|
-
|
|
3046
|
+
const {
|
|
3047
|
+
params = {},
|
|
3048
|
+
fieldMap = {},
|
|
3049
|
+
overrideInit = false
|
|
3050
|
+
} = this.tableMeta;
|
|
3051
|
+
const currentRowData = this.getCurrentRowData();
|
|
3052
|
+
const ctx = {
|
|
3053
|
+
...this.currentTreeNodeData,
|
|
3054
|
+
_route: this.$route.query,
|
|
3055
|
+
currentRowData: currentRowData
|
|
3056
|
+
};
|
|
3057
|
+
const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx));
|
|
3058
|
+
if (overrideInit) {
|
|
3059
|
+
this.$emit(RESERVE_EVENT_NAMES.INIT, {
|
|
3060
|
+
...this.exposed
|
|
3061
|
+
});
|
|
3062
|
+
} else {
|
|
3063
|
+
this.tableData = await this.requestTableData(initQuerys);
|
|
3064
|
+
}
|
|
3064
3065
|
}
|
|
3065
3066
|
},
|
|
3066
3067
|
methods: {
|
|
@@ -3274,6 +3275,7 @@ var script$A = {
|
|
|
3274
3275
|
...this.exposed
|
|
3275
3276
|
});
|
|
3276
3277
|
} else {
|
|
3278
|
+
if (this.showTree) return;
|
|
3277
3279
|
this.tableData = await this.requestTableData();
|
|
3278
3280
|
}
|
|
3279
3281
|
},
|
|
@@ -3626,11 +3628,11 @@ __vue_render__$A._withStripped = true;
|
|
|
3626
3628
|
/* style */
|
|
3627
3629
|
const __vue_inject_styles__$A = function (inject) {
|
|
3628
3630
|
if (!inject) return
|
|
3629
|
-
inject("data-v-b410229e_0", { source: ".ele.model__tree-table[data-v-b410229e] {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-b410229e] {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-b410229e] {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-b410229e] {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-b410229e] {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-b410229e] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-b410229e] {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-b410229e] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6vBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC5vBA;AD8vBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AC5vBA;AD+vBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC7vBA;AD+vBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC7vBA;AD+vBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC7vBA;ADgwBA;EACA,gBAAA;AC9vBA;AD+vBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC7vBA;ADgwBA;EACA,eAAA;EACA,kCAAA;AC9vBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <section class=\"ele model__tree-table\">\r\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n <div class=\"model__tree--title\"></div>\r\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n <ele-tree\r\n :tree-data=\"treeData\"\r\n :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n @select=\"selectTreeNode\"\r\n :replace-fields=\"mapFields\">\r\n </ele-tree>\r\n </section>\r\n </section>\r\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n <div class=\"model__table--title\" v-if=\"title\">\r\n <template v-if=\"titleMode\">\r\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n </template>\r\n <template v-else>\r\n <div class=\"model__table-title--text\">{{ title }}</div>\r\n </template>\r\n </div>\r\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n <div class=\"button-row__area\">\r\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n <slot name=\"tags\"></slot>\r\n <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n </div>\r\n <ele-table\r\n v-on=\"overrideTableEvent\"\r\n :ref=\"tableRef\"\r\n :row-selection=\"rowSelection\"\r\n :loading=\"loading\" \r\n :columns=\"columns\"\r\n :total=\"total\"\r\n :x=\"x\"\r\n :y=\"y\"\r\n :bordered=\"setBorder\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n <ele-modal-table\r\n :meta=\"modalTableMeta\"\r\n v-model=\"modalTableValue\"\r\n v-on=\"overrideModalTableEvent\"\r\n ></ele-modal-table>\r\n </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nimport { createTreeTableModel } from '../../../utils/runtime-context'\r\nexport default {\r\n name: 'ele-tree-table-model',\r\n props: {\r\n title: {\r\n type: [Object, String]\r\n },\r\n overHeight: {\r\n type: Number,\r\n default: 0\r\n },\r\n treeMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n searchMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n buttonGroupMeta: {\r\n typeof: Object,\r\n default: () => ({})\r\n },\r\n tableMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n createMeta: {\r\n type: Object\r\n },\r\n editMeta: {\r\n type: Object\r\n }\r\n },\r\n provide () {\r\n return {\r\n requestTreeData: this.requestTreeData,\r\n requestTableData: this.requestTableData,\r\n [CONTEXT]: () => {\r\n return {\r\n exposed: this.exposed\r\n }\r\n }\r\n }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 0,\r\n tableWidth: 0,\r\n modalFormMeta: {},\r\n modalFormValue: false,\r\n treeData: [],\r\n tableData: [],\r\n defaultExpandedKeys: [],\r\n defaultSelectedKeys: [],\r\n replaceFields: {\r\n title: 'title',\r\n children: 'children',\r\n key: 'id'\r\n },\r\n loading: false,\r\n total: 0,\r\n tableQuerys: {},\r\n resizeObserverModelTableWrapper: null,\r\n modelTableWrapperHeight: 0,\r\n currentTreeNodeData: {},\r\n currentRowData: {},\r\n treeWrapperHeight: 0,\r\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\r\n showFsmModal: false,\r\n fsmMeta: {},\r\n fsmContextProp: {},\r\n modalTableValue: false,\r\n modalTableMeta: {},\r\n dataPoolManager: null\r\n }\r\n },\r\n computed: {\r\n setBorder () {\r\n return this.tableMeta.bordered === false ? false : true\r\n },\r\n rowSelection () {\r\n if (!this.currentTableMode) return void 0\r\n return {\r\n columnTitle: this.currentSelectionColumn.columnTitle,\r\n fixed: true,\r\n type: this.currentTableMode,\r\n onChange: this.onChangeTableSelection\r\n }\r\n },\r\n currentSelectionColumn () {\r\n const { multiple } = this.tableMeta\r\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\r\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\r\n if (target) {\r\n return target\r\n } else if (isGlobalExistMultiple) {\r\n return { multiple }\r\n }\r\n return void 0\r\n },\r\n x () {\r\n const { x } = this.tableMeta\r\n return x\r\n },\r\n y () {\r\n const { y } = this.tableMeta\r\n return y\r\n },\r\n currentTableMode () {\r\n if (!this.currentSelectionColumn) return void 0\r\n const { multiple } = this.currentSelectionColumn\r\n if (type.isBool(multiple)) {\r\n if (multiple) {\r\n return 'checkbox'\r\n } else {\r\n return 'radio'\r\n }\r\n } else {\r\n return void 0\r\n }\r\n },\r\n modelTableContainerRef () {\r\n return uuidv4()\r\n },\r\n titleMode () {\r\n if (type.isObject(this.title)) {\r\n const { mode = '' } = this.title\r\n return mode\r\n }\r\n return void 0\r\n },\r\n tableRef () {\r\n return uuidv4()\r\n },\r\n exposed () {\r\n return {\r\n showModalForm: this.showModalForm,\r\n closeModalForm: this.closeModalForm,\r\n showModalTable: this.showModalTable,\r\n closeModalTable: this.closeModalTable,\r\n currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n refreshTreeData: this.refreshTreeData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.getCurrentRowData(),\r\n getCurrentRowData: this.getCurrentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n getCurrentTableSelection: this.getCurrentTableSelection,\r\n cleanCurrentModelEffect: this.cleanCurrentModelEffect,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n dataPool: this.model ? this.model.getDataPool() : null,\r\n dataPoolManager: this.model || null\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName || action.key] = (e) => {\r\n this.setCurrentRowData(e.exposed.currentRowData)\r\n const { target } = action\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n }\r\n },\r\n overrideModalFormEvent () {\r\n const { footerMeta } = this.modalFormMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalForm()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events\r\n }\r\n },\r\n overrideModalTableEvent () {\r\n const { footerMeta } = this.modalTableMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalTable()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events,\r\n exposed: this.exposed\r\n }\r\n },\r\n overrideButtonGroupEvent () {\r\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n exposed: this.exposed\r\n }\r\n },\r\n showTree () {\r\n return !!Object.keys(this.treeMeta).length\r\n },\r\n buttonGroup () {\r\n return uuidv4()\r\n },\r\n searchArea () {\r\n return uuidv4()\r\n },\r\n modelTreeWrapper () {\r\n return uuidv4()\r\n },\r\n modelTableWrapper () {\r\n return uuidv4()\r\n },\r\n actions () {\r\n const { operations } = this.tableMeta\r\n if (operations) {\r\n return operations.elements\r\n } else {\r\n return []\r\n }\r\n },\r\n pageSize () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSize || 10\r\n },\r\n pageSizeOptions () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSizeOptions || ['10', '20', '30', '40']\r\n },\r\n columns () {\r\n const { columns, operations } = this.tableMeta\r\n if (type.get(columns) === 'array') {\r\n const columnsOptions = columns.map(item => {\r\n const { mode = 'text' } = item\r\n if (item.render) {\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n const { $createElement } = this\r\n return item.render.call(this, \r\n { h: $createElement, ctx: this },\r\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n record, index)\r\n }\r\n }\r\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n const { [`${mode}Meta`]: modeMeta } = item\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n }\r\n }\r\n }\r\n return {\r\n ...item\r\n }\r\n })\r\n if (operations) {\r\n return [\r\n ...columnsOptions,\r\n {\r\n title: '操作',\r\n width: operations.width,\r\n key: 'action',\r\n fixed: 'right',\r\n scopedSlots: { customRender: 'action' }\r\n }\r\n ]\r\n }\r\n return columnsOptions\r\n } else {\r\n console.error('Error: columns is invalid, please check it')\r\n return []\r\n }\r\n },\r\n getButtonGroupElements () {\r\n const { elements } = this.buttonGroupMeta\r\n if (type.get(elements) === 'function') {\r\n return elements.call(this)\r\n } else if (type.get(elements) === 'array') {\r\n return elements\r\n } else {\r\n return []\r\n }\r\n },\r\n mapFields () {\r\n const { replaceFields = {} } = this.treeMeta\r\n const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n return mapFields\r\n }\r\n },\r\n async created () {\r\n // 确保全局数据池已初始化\r\n if (!window.__idooel_data_pool__) {\r\n console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.')\r\n return\r\n }\r\n \r\n // 初始化数据池管理器（使用新的 runtime-context）\r\n try {\r\n this.model = createTreeTableModel('treeTableModel')\r\n \r\n if (!this.model) {\r\n throw new Error('Failed to create tree table model')\r\n }\r\n } catch (error) {\r\n console.error('Error creating tree table model:', error)\r\n this.model = null\r\n return\r\n }\r\n \r\n // 初始化 currentRowData（尝试从共享命名空间获取）\r\n this.initializeCurrentRowData()\r\n \r\n // 订阅数据池变化\r\n this.unsubscribe = this.model.subscribe('currentRowData', (event) => {\r\n this.currentRowData = event.value || {}\r\n this.$forceUpdate()\r\n })\r\n \r\n // 订阅共享数据变化\r\n this.unsubscribeShared = this.model.subscribeShared((event) => {\r\n // 当有新的共享数据时，更新当前组件的 currentRowData\r\n if (event.value && Object.keys(event.value).length > 0) {\r\n this.setCurrentRowData(event.value)\r\n }\r\n })\r\n \r\n if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n }\r\n \r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const currentRowData = this.getCurrentRowData()\r\n const ctx = { \r\n ...this.currentTreeNodeData, \r\n _route: this.$route.query, \r\n currentRowData: currentRowData\r\n }\r\n \r\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(initQuerys)\r\n }\r\n },\r\n methods: {\r\n initializeCurrentRowData () {\r\n if (!this.model) {\r\n console.warn('Model not initialized, skipping currentRowData initialization')\r\n return\r\n }\r\n \r\n // 检查是否有来自父组件的共享数据（比如 modal table 场景）\r\n const parentData = this.model.getSharedData()\r\n \r\n if (parentData && Object.keys(parentData).length > 0) {\r\n this.setCurrentRowData(parentData)\r\n return\r\n }\r\n \r\n // 可以根据路由参数、props 或其他来源设置初始的 currentRowData\r\n const { query } = this.$route\r\n \r\n // 示例：如果路由中有特定参数，可以设置为 currentRowData\r\n if (query.rowId || query.selectedId) {\r\n // 这里可以根据实际需求从服务端或其他地方获取数据\r\n // const presetData = { id: query.rowId, /* 其他字段 */ }\r\n // this.setCurrentRowData(presetData)\r\n }\r\n \r\n // 目前保持空对象，等待用户选择行数据\r\n },\r\n async refreshTreeData () {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n },\r\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\r\n switch (mode) {\r\n case BUILT_IN_TRIGGER.FSM:\r\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \r\n url: 'api-fsm/workbench/fsm/auditFlow',\r\n requestType: 'GET',\r\n fieldMap: {\r\n modelCode: 'modelCode',\r\n businessId: 'businessId'\r\n }\r\n } : modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\r\n this.modalFormMeta = modeMeta\r\n this.showModalForm(modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\r\n this.modalTableMeta = modeMeta\r\n // 将当前行的 record 数据传递给 modal table\r\n this.showModalTable(modeMeta, record)\r\n break\r\n default:\r\n break\r\n }\r\n },\r\n handleCloseFsmModal () {\r\n this.showFsmModal = false\r\n },\r\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\r\n this.fsmMeta = meta\r\n this.fsmContextProp = record\r\n this.showFsmModal = true\r\n },\r\n onChangeTableSelection (_, selectedRows = []) {\r\n if (this.currentTableMode === 'radio') {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n } else {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\r\n } else {\r\n this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\r\n }\r\n },\r\n getCurrentTableSelection () {\r\n return this.currentTableSelection\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n if (this.model) {\r\n this.model.setCurrentRowData(props)\r\n } else {\r\n console.warn('Model not initialized, cannot setCurrentRowData in model')\r\n }\r\n },\r\n getCurrentRowData () {\r\n if (this.model) {\r\n return this.model.getCurrentRowData()\r\n }\r\n console.warn('Model not initialized, getCurrentRowData returning local data')\r\n return this.currentRowData || {}\r\n },\r\n cleanCurrentModelEffect (clearRowData = true) {\r\n this.setCurrentTableSelection()\r\n if (clearRowData) {\r\n this.setCurrentRowData({})\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n this.cleanCurrentModelEffect()\r\n this.requestTableData()\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\r\n const { record = {} } = props\r\n this.setCurrentRowData(record)\r\n this.modalFormMeta = this.editMeta\r\n this.modalFormValue = true\r\n },\r\n [BUILT_IN_EVENT_NAMES.CREATE] () {\r\n this.modalFormMeta = this.createMeta\r\n this.modalFormValue = true\r\n },\r\n showModalForm (modeMeta = {}) {\r\n if (type.isStr(modeMeta)) {\r\n const targetMeta = this.findMetaByKey(modeMeta)\r\n this.modalFormMeta = targetMeta\r\n } else {\r\n this.modalFormMeta = modeMeta\r\n }\r\n this.modalFormValue = true\r\n },\r\n showModalTable (modeMeta = {}, record = null) {\r\n // 获取当前行数据并设置到共享命名空间\r\n const currentRowData = record || this.getCurrentRowData()\r\n if (this.model) {\r\n this.model.setSharedData(currentRowData)\r\n } else {\r\n console.warn('Model not initialized, cannot setSharedData')\r\n }\r\n \r\n let targetMeta = modeMeta\r\n if (type.isStr(modeMeta)) {\r\n targetMeta = this.findMetaByKey(modeMeta)\r\n }\r\n \r\n // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData\r\n if (targetMeta && targetMeta.fieldMap) {\r\n const { fieldMap, params = {} } = targetMeta\r\n \r\n const ctx = { \r\n ...this.currentTreeNodeData, \r\n _route: this.$route.query, \r\n ...currentRowData \r\n }\r\n const parsedParams = parseFieldMap(fieldMap, ctx)\r\n \r\n // 将当前的 currentRowData 传递给 modal table，通过 params\r\n targetMeta = {\r\n ...targetMeta,\r\n params: {\r\n ...params,\r\n ...parsedParams\r\n }\r\n }\r\n }\r\n \r\n this.modalTableMeta = targetMeta\r\n this.modalTableValue = true\r\n },\r\n closeModalForm () {\r\n this.modalFormValue = false\r\n },\r\n closeModalTable () {\r\n this.modalTableValue = false\r\n },\r\n findMetaByKey (key) {\r\n return this.$attrs[key] || {}\r\n },\r\n handleClickButtonGroup (props) {\r\n const { eventName, target } = props\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\r\n this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n async onSearch (props) {\r\n const { overrideInit = false } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData()\r\n }\r\n },\r\n async selectTreeNode (selectedKeys, e) {\r\n const { fieldMap } = this.tableMeta\r\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\r\n //@deprecated '_' namespace is deprecated, please use 'exposed' instead\r\n const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(execFieldMapRet)\r\n }\r\n },\r\n async requestTreeData () {\r\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\r\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n { ...params, ...fieldMapRet }\r\n ).then(resp => {\r\n const { data } = resp || {}\r\n return data\r\n })\r\n return ret\r\n },\r\n async onChangePage (page, pageSize) {\r\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\r\n },\r\n async requestTableData (props = {}) {\r\n const { url, requestType = 'GET', page = {} } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: this.tableQuerys.currentPage || 1, pageSize: this.tableQuerys.pageSize || 10 }, props)\r\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n this.loading = true\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n this.tableQuerys\r\n ).then(resp => {\r\n const { data = [], count } = resp || {}\r\n this.total = count\r\n this.loading = false\r\n return (data || []).map(item => {\r\n delete item.children\r\n return {\r\n key: uuidv4(),\r\n ...item\r\n }\r\n })\r\n })\r\n this.cleanCurrentModelEffect(false) // 不清空 currentRowData，除非明确需要\r\n this.tableData = ret\r\n return ret\r\n },\r\n calculateTableHeight () {\r\n const currentViewportHeight = window.innerHeight\r\n const tableRef = this.$refs[this.tableRef]\r\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\r\n this.tableWidth = width\r\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\r\n },\r\n calculateTreeHeight () {\r\n if (!this.showTree) return\r\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\r\n const { height } = modelTableContainerRef.getBoundingClientRect()\r\n this.treeWrapperHeight = height\r\n },\r\n async keepAliveRefresh () {\r\n // 重新计算表格高度（应对窗口大小变化）\r\n this.$nextTick(() => {\r\n this.calculateTableHeight()\r\n if (this.showTree) {\r\n this.calculateTreeHeight()\r\n }\r\n })\r\n // 刷新列表数据\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n // 如果使用自定义初始化模式，触发 INIT 事件\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n // 使用当前查询参数刷新表格数据\r\n await this.requestTableData(this.tableQuerys)\r\n }\r\n }\r\n },\r\n mounted () {\r\n this.calculateTableHeight()\r\n this.$nextTick(() => {\r\n this.calculateTreeHeight()\r\n })\r\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n this.calculateTableHeight()\r\n })\r\n }\r\n })\r\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\r\n },\r\n destroyed () {\r\n this.resizeObserverModelTableWrapper.disconnect()\r\n if (this.model) {\r\n // 清理订阅\r\n if (this.unsubscribe) {\r\n this.unsubscribe()\r\n }\r\n if (this.unsubscribeShared) {\r\n this.unsubscribeShared()\r\n }\r\n // 清理模型数据\r\n if (this.model) {\r\n this.model.cleanup()\r\n }\r\n }\r\n },\r\n async activated () {\r\n await this.keepAliveRefresh()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n &.model__tree-table {\r\n background: transparent; \r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n .model__tree-table--container {\r\n .model__tree--wrapper {\r\n width: 240px;\r\n background: #fff;\r\n flex-shrink: 0;\r\n padding: 16px;\r\n box-sizing: border-box;\r\n margin-right: 16px;\r\n overflow-y: auto;\r\n }\r\n }\r\n .model__table--container {\r\n width: 100%;\r\n min-width: 0;\r\n background: #fff;\r\n .model__table--title {\r\n .model__table-title--bar {\r\n width: 100%;\r\n height: 8px;\r\n background: var(--idooel-primary-color);\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n }\r\n .model__table-title--text {\r\n text-align: left;\r\n padding: 16px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n background: #fff;\r\n border-bottom: 1px solid;\r\n border-color: var(--idoole-black-016);\r\n }\r\n }\r\n .model__table--wrapper {\r\n background: #fff;\r\n .button-row__area {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-top: 16px;\r\n padding-bottom: 8px;\r\n padding-right: 16px;\r\n }\r\n .g-table__wrapper {\r\n .fsm {\r\n cursor: pointer;\r\n color: var(--idooel-primary-color);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n",".ele.model__tree-table {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3631
|
+
inject("data-v-0641f844_0", { source: ".ele.model__tree-table[data-v-0641f844] {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-0641f844] {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-0641f844] {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-0641f844] {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-0641f844] {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-0641f844] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-0641f844] {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-0641f844] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA8vBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC7vBA;AD+vBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AC7vBA;ADgwBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC9vBA;ADgwBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC9vBA;ADgwBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC9vBA;ADiwBA;EACA,gBAAA;AC/vBA;ADgwBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC9vBA;ADiwBA;EACA,eAAA;EACA,kCAAA;AC/vBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <section class=\"ele model__tree-table\">\r\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n <div class=\"model__tree--title\"></div>\r\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n <ele-tree\r\n :tree-data=\"treeData\"\r\n :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n @select=\"selectTreeNode\"\r\n :replace-fields=\"mapFields\">\r\n </ele-tree>\r\n </section>\r\n </section>\r\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n <div class=\"model__table--title\" v-if=\"title\">\r\n <template v-if=\"titleMode\">\r\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n </template>\r\n <template v-else>\r\n <div class=\"model__table-title--text\">{{ title }}</div>\r\n </template>\r\n </div>\r\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n <div class=\"button-row__area\">\r\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n <slot name=\"tags\"></slot>\r\n <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n </div>\r\n <ele-table\r\n v-on=\"overrideTableEvent\"\r\n :ref=\"tableRef\"\r\n :row-selection=\"rowSelection\"\r\n :loading=\"loading\" \r\n :columns=\"columns\"\r\n :total=\"total\"\r\n :x=\"x\"\r\n :y=\"y\"\r\n :bordered=\"setBorder\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n <ele-modal-table\r\n :meta=\"modalTableMeta\"\r\n v-model=\"modalTableValue\"\r\n v-on=\"overrideModalTableEvent\"\r\n ></ele-modal-table>\r\n </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nimport { createTreeTableModel } from '../../../utils/runtime-context'\r\nexport default {\r\n name: 'ele-tree-table-model',\r\n props: {\r\n title: {\r\n type: [Object, String]\r\n },\r\n overHeight: {\r\n type: Number,\r\n default: 0\r\n },\r\n treeMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n searchMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n buttonGroupMeta: {\r\n typeof: Object,\r\n default: () => ({})\r\n },\r\n tableMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n createMeta: {\r\n type: Object\r\n },\r\n editMeta: {\r\n type: Object\r\n }\r\n },\r\n provide () {\r\n return {\r\n requestTreeData: this.requestTreeData,\r\n requestTableData: this.requestTableData,\r\n [CONTEXT]: () => {\r\n return {\r\n exposed: this.exposed\r\n }\r\n }\r\n }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 0,\r\n tableWidth: 0,\r\n modalFormMeta: {},\r\n modalFormValue: false,\r\n treeData: [],\r\n tableData: [],\r\n defaultExpandedKeys: [],\r\n defaultSelectedKeys: [],\r\n replaceFields: {\r\n title: 'title',\r\n children: 'children',\r\n key: 'id'\r\n },\r\n loading: false,\r\n total: 0,\r\n tableQuerys: {},\r\n resizeObserverModelTableWrapper: null,\r\n modelTableWrapperHeight: 0,\r\n currentTreeNodeData: {},\r\n currentRowData: {},\r\n treeWrapperHeight: 0,\r\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\r\n showFsmModal: false,\r\n fsmMeta: {},\r\n fsmContextProp: {},\r\n modalTableValue: false,\r\n modalTableMeta: {},\r\n dataPoolManager: null\r\n }\r\n },\r\n computed: {\r\n setBorder () {\r\n return this.tableMeta.bordered === false ? false : true\r\n },\r\n rowSelection () {\r\n if (!this.currentTableMode) return void 0\r\n return {\r\n columnTitle: this.currentSelectionColumn.columnTitle,\r\n fixed: true,\r\n type: this.currentTableMode,\r\n onChange: this.onChangeTableSelection\r\n }\r\n },\r\n currentSelectionColumn () {\r\n const { multiple } = this.tableMeta\r\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\r\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\r\n if (target) {\r\n return target\r\n } else if (isGlobalExistMultiple) {\r\n return { multiple }\r\n }\r\n return void 0\r\n },\r\n x () {\r\n const { x } = this.tableMeta\r\n return x\r\n },\r\n y () {\r\n const { y } = this.tableMeta\r\n return y\r\n },\r\n currentTableMode () {\r\n if (!this.currentSelectionColumn) return void 0\r\n const { multiple } = this.currentSelectionColumn\r\n if (type.isBool(multiple)) {\r\n if (multiple) {\r\n return 'checkbox'\r\n } else {\r\n return 'radio'\r\n }\r\n } else {\r\n return void 0\r\n }\r\n },\r\n modelTableContainerRef () {\r\n return uuidv4()\r\n },\r\n titleMode () {\r\n if (type.isObject(this.title)) {\r\n const { mode = '' } = this.title\r\n return mode\r\n }\r\n return void 0\r\n },\r\n tableRef () {\r\n return uuidv4()\r\n },\r\n exposed () {\r\n return {\r\n showModalForm: this.showModalForm,\r\n closeModalForm: this.closeModalForm,\r\n showModalTable: this.showModalTable,\r\n closeModalTable: this.closeModalTable,\r\n currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n refreshTreeData: this.refreshTreeData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.getCurrentRowData(),\r\n getCurrentRowData: this.getCurrentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n getCurrentTableSelection: this.getCurrentTableSelection,\r\n cleanCurrentModelEffect: this.cleanCurrentModelEffect,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n dataPool: this.model ? this.model.getDataPool() : null,\r\n dataPoolManager: this.model || null\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName || action.key] = (e) => {\r\n this.setCurrentRowData(e.exposed.currentRowData)\r\n const { target } = action\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n }\r\n },\r\n overrideModalFormEvent () {\r\n const { footerMeta } = this.modalFormMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalForm()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events\r\n }\r\n },\r\n overrideModalTableEvent () {\r\n const { footerMeta } = this.modalTableMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalTable()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events,\r\n exposed: this.exposed\r\n }\r\n },\r\n overrideButtonGroupEvent () {\r\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n exposed: this.exposed\r\n }\r\n },\r\n showTree () {\r\n return !!Object.keys(this.treeMeta).length\r\n },\r\n buttonGroup () {\r\n return uuidv4()\r\n },\r\n searchArea () {\r\n return uuidv4()\r\n },\r\n modelTreeWrapper () {\r\n return uuidv4()\r\n },\r\n modelTableWrapper () {\r\n return uuidv4()\r\n },\r\n actions () {\r\n const { operations } = this.tableMeta\r\n if (operations) {\r\n return operations.elements\r\n } else {\r\n return []\r\n }\r\n },\r\n pageSize () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSize || 10\r\n },\r\n pageSizeOptions () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSizeOptions || ['10', '20', '30', '40']\r\n },\r\n columns () {\r\n const { columns, operations } = this.tableMeta\r\n if (type.get(columns) === 'array') {\r\n const columnsOptions = columns.map(item => {\r\n const { mode = 'text' } = item\r\n if (item.render) {\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n const { $createElement } = this\r\n return item.render.call(this, \r\n { h: $createElement, ctx: this },\r\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n record, index)\r\n }\r\n }\r\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n const { [`${mode}Meta`]: modeMeta } = item\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n }\r\n }\r\n }\r\n return {\r\n ...item\r\n }\r\n })\r\n if (operations) {\r\n return [\r\n ...columnsOptions,\r\n {\r\n title: '操作',\r\n width: operations.width,\r\n key: 'action',\r\n fixed: 'right',\r\n scopedSlots: { customRender: 'action' }\r\n }\r\n ]\r\n }\r\n return columnsOptions\r\n } else {\r\n console.error('Error: columns is invalid, please check it')\r\n return []\r\n }\r\n },\r\n getButtonGroupElements () {\r\n const { elements } = this.buttonGroupMeta\r\n if (type.get(elements) === 'function') {\r\n return elements.call(this)\r\n } else if (type.get(elements) === 'array') {\r\n return elements\r\n } else {\r\n return []\r\n }\r\n },\r\n mapFields () {\r\n const { replaceFields = {} } = this.treeMeta\r\n const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n return mapFields\r\n }\r\n },\r\n async created () {\r\n // onSearch会初始化请求表格数据，所以不需要在这里请求表格数据\r\n // 确保全局数据池已初始化\r\n if (!window.__idooel_data_pool__) {\r\n console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.')\r\n return\r\n }\r\n \r\n // 初始化数据池管理器（使用新的 runtime-context）\r\n try {\r\n this.model = createTreeTableModel('treeTableModel')\r\n \r\n if (!this.model) {\r\n throw new Error('Failed to create tree table model')\r\n }\r\n } catch (error) {\r\n console.error('Error creating tree table model:', error)\r\n this.model = null\r\n return\r\n }\r\n \r\n // 初始化 currentRowData（尝试从共享命名空间获取）\r\n this.initializeCurrentRowData()\r\n \r\n // 订阅数据池变化\r\n this.unsubscribe = this.model.subscribe('currentRowData', (event) => {\r\n this.currentRowData = event.value || {}\r\n this.$forceUpdate()\r\n })\r\n \r\n // 订阅共享数据变化\r\n this.unsubscribeShared = this.model.subscribeShared((event) => {\r\n // 当有新的共享数据时，更新当前组件的 currentRowData\r\n if (event.value && Object.keys(event.value).length > 0) {\r\n this.setCurrentRowData(event.value)\r\n }\r\n })\r\n \r\n if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const currentRowData = this.getCurrentRowData()\r\n const ctx = { \r\n ...this.currentTreeNodeData, \r\n _route: this.$route.query, \r\n currentRowData: currentRowData\r\n }\r\n \r\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(initQuerys)\r\n }\r\n }\r\n },\r\n methods: {\r\n initializeCurrentRowData () {\r\n if (!this.model) {\r\n console.warn('Model not initialized, skipping currentRowData initialization')\r\n return\r\n }\r\n \r\n // 检查是否有来自父组件的共享数据（比如 modal table 场景）\r\n const parentData = this.model.getSharedData()\r\n \r\n if (parentData && Object.keys(parentData).length > 0) {\r\n this.setCurrentRowData(parentData)\r\n return\r\n }\r\n \r\n // 可以根据路由参数、props 或其他来源设置初始的 currentRowData\r\n const { query } = this.$route\r\n \r\n // 示例：如果路由中有特定参数，可以设置为 currentRowData\r\n if (query.rowId || query.selectedId) {\r\n // 这里可以根据实际需求从服务端或其他地方获取数据\r\n // const presetData = { id: query.rowId, /* 其他字段 */ }\r\n // this.setCurrentRowData(presetData)\r\n }\r\n \r\n // 目前保持空对象，等待用户选择行数据\r\n },\r\n async refreshTreeData () {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n },\r\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\r\n switch (mode) {\r\n case BUILT_IN_TRIGGER.FSM:\r\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \r\n url: 'api-fsm/workbench/fsm/auditFlow',\r\n requestType: 'GET',\r\n fieldMap: {\r\n modelCode: 'modelCode',\r\n businessId: 'businessId'\r\n }\r\n } : modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\r\n this.modalFormMeta = modeMeta\r\n this.showModalForm(modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\r\n this.modalTableMeta = modeMeta\r\n // 将当前行的 record 数据传递给 modal table\r\n this.showModalTable(modeMeta, record)\r\n break\r\n default:\r\n break\r\n }\r\n },\r\n handleCloseFsmModal () {\r\n this.showFsmModal = false\r\n },\r\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\r\n this.fsmMeta = meta\r\n this.fsmContextProp = record\r\n this.showFsmModal = true\r\n },\r\n onChangeTableSelection (_, selectedRows = []) {\r\n if (this.currentTableMode === 'radio') {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n } else {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\r\n } else {\r\n this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\r\n }\r\n },\r\n getCurrentTableSelection () {\r\n return this.currentTableSelection\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n if (this.model) {\r\n this.model.setCurrentRowData(props)\r\n } else {\r\n console.warn('Model not initialized, cannot setCurrentRowData in model')\r\n }\r\n },\r\n getCurrentRowData () {\r\n if (this.model) {\r\n return this.model.getCurrentRowData()\r\n }\r\n console.warn('Model not initialized, getCurrentRowData returning local data')\r\n return this.currentRowData || {}\r\n },\r\n cleanCurrentModelEffect (clearRowData = true) {\r\n this.setCurrentTableSelection()\r\n if (clearRowData) {\r\n this.setCurrentRowData({})\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n this.cleanCurrentModelEffect()\r\n this.requestTableData()\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\r\n const { record = {} } = props\r\n this.setCurrentRowData(record)\r\n this.modalFormMeta = this.editMeta\r\n this.modalFormValue = true\r\n },\r\n [BUILT_IN_EVENT_NAMES.CREATE] () {\r\n this.modalFormMeta = this.createMeta\r\n this.modalFormValue = true\r\n },\r\n showModalForm (modeMeta = {}) {\r\n if (type.isStr(modeMeta)) {\r\n const targetMeta = this.findMetaByKey(modeMeta)\r\n this.modalFormMeta = targetMeta\r\n } else {\r\n this.modalFormMeta = modeMeta\r\n }\r\n this.modalFormValue = true\r\n },\r\n showModalTable (modeMeta = {}, record = null) {\r\n // 获取当前行数据并设置到共享命名空间\r\n const currentRowData = record || this.getCurrentRowData()\r\n if (this.model) {\r\n this.model.setSharedData(currentRowData)\r\n } else {\r\n console.warn('Model not initialized, cannot setSharedData')\r\n }\r\n \r\n let targetMeta = modeMeta\r\n if (type.isStr(modeMeta)) {\r\n targetMeta = this.findMetaByKey(modeMeta)\r\n }\r\n \r\n // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData\r\n if (targetMeta && targetMeta.fieldMap) {\r\n const { fieldMap, params = {} } = targetMeta\r\n \r\n const ctx = { \r\n ...this.currentTreeNodeData, \r\n _route: this.$route.query, \r\n ...currentRowData \r\n }\r\n const parsedParams = parseFieldMap(fieldMap, ctx)\r\n \r\n // 将当前的 currentRowData 传递给 modal table，通过 params\r\n targetMeta = {\r\n ...targetMeta,\r\n params: {\r\n ...params,\r\n ...parsedParams\r\n }\r\n }\r\n }\r\n \r\n this.modalTableMeta = targetMeta\r\n this.modalTableValue = true\r\n },\r\n closeModalForm () {\r\n this.modalFormValue = false\r\n },\r\n closeModalTable () {\r\n this.modalTableValue = false\r\n },\r\n findMetaByKey (key) {\r\n return this.$attrs[key] || {}\r\n },\r\n handleClickButtonGroup (props) {\r\n const { eventName, target } = props\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\r\n this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n async onSearch (props) {\r\n const { overrideInit = false } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n if (this.showTree) return\r\n this.tableData = await this.requestTableData()\r\n }\r\n },\r\n async selectTreeNode (selectedKeys, e) {\r\n const { fieldMap } = this.tableMeta\r\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\r\n //@deprecated '_' namespace is deprecated, please use 'exposed' instead\r\n const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(execFieldMapRet)\r\n }\r\n },\r\n async requestTreeData () {\r\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\r\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n { ...params, ...fieldMapRet }\r\n ).then(resp => {\r\n const { data } = resp || {}\r\n return data\r\n })\r\n return ret\r\n },\r\n async onChangePage (page, pageSize) {\r\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\r\n },\r\n async requestTableData (props = {}) {\r\n const { url, requestType = 'GET', page = {} } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: this.tableQuerys.currentPage || 1, pageSize: this.tableQuerys.pageSize || 10 }, props)\r\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n this.loading = true\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n this.tableQuerys\r\n ).then(resp => {\r\n const { data = [], count } = resp || {}\r\n this.total = count\r\n this.loading = false\r\n return (data || []).map(item => {\r\n delete item.children\r\n return {\r\n key: uuidv4(),\r\n ...item\r\n }\r\n })\r\n })\r\n this.cleanCurrentModelEffect(false) // 不清空 currentRowData，除非明确需要\r\n this.tableData = ret\r\n return ret\r\n },\r\n calculateTableHeight () {\r\n const currentViewportHeight = window.innerHeight\r\n const tableRef = this.$refs[this.tableRef]\r\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\r\n this.tableWidth = width\r\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\r\n },\r\n calculateTreeHeight () {\r\n if (!this.showTree) return\r\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\r\n const { height } = modelTableContainerRef.getBoundingClientRect()\r\n this.treeWrapperHeight = height\r\n },\r\n async keepAliveRefresh () {\r\n // 重新计算表格高度（应对窗口大小变化）\r\n this.$nextTick(() => {\r\n this.calculateTableHeight()\r\n if (this.showTree) {\r\n this.calculateTreeHeight()\r\n }\r\n })\r\n // 刷新列表数据\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n // 如果使用自定义初始化模式，触发 INIT 事件\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n // 使用当前查询参数刷新表格数据\r\n await this.requestTableData(this.tableQuerys)\r\n }\r\n }\r\n },\r\n mounted () {\r\n this.calculateTableHeight()\r\n this.$nextTick(() => {\r\n this.calculateTreeHeight()\r\n })\r\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n this.calculateTableHeight()\r\n })\r\n }\r\n })\r\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\r\n },\r\n destroyed () {\r\n this.resizeObserverModelTableWrapper.disconnect()\r\n if (this.model) {\r\n // 清理订阅\r\n if (this.unsubscribe) {\r\n this.unsubscribe()\r\n }\r\n if (this.unsubscribeShared) {\r\n this.unsubscribeShared()\r\n }\r\n // 清理模型数据\r\n if (this.model) {\r\n this.model.cleanup()\r\n }\r\n }\r\n },\r\n async activated () {\r\n await this.keepAliveRefresh()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n &.model__tree-table {\r\n background: transparent; \r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n .model__tree-table--container {\r\n .model__tree--wrapper {\r\n width: 240px;\r\n background: #fff;\r\n flex-shrink: 0;\r\n padding: 16px;\r\n box-sizing: border-box;\r\n margin-right: 16px;\r\n overflow-y: auto;\r\n }\r\n }\r\n .model__table--container {\r\n width: 100%;\r\n min-width: 0;\r\n background: #fff;\r\n .model__table--title {\r\n .model__table-title--bar {\r\n width: 100%;\r\n height: 8px;\r\n background: var(--idooel-primary-color);\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n }\r\n .model__table-title--text {\r\n text-align: left;\r\n padding: 16px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n background: #fff;\r\n border-bottom: 1px solid;\r\n border-color: var(--idoole-black-016);\r\n }\r\n }\r\n .model__table--wrapper {\r\n background: #fff;\r\n .button-row__area {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-top: 16px;\r\n padding-bottom: 8px;\r\n padding-right: 16px;\r\n }\r\n .g-table__wrapper {\r\n .fsm {\r\n cursor: pointer;\r\n color: var(--idooel-primary-color);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n",".ele.model__tree-table {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3630
3632
|
|
|
3631
3633
|
};
|
|
3632
3634
|
/* scoped */
|
|
3633
|
-
const __vue_scope_id__$A = "data-v-
|
|
3635
|
+
const __vue_scope_id__$A = "data-v-0641f844";
|
|
3634
3636
|
/* module identifier */
|
|
3635
3637
|
const __vue_module_identifier__$A = undefined;
|
|
3636
3638
|
/* functional template */
|
|
@@ -3007,6 +3007,7 @@
|
|
|
3007
3007
|
}
|
|
3008
3008
|
},
|
|
3009
3009
|
async created() {
|
|
3010
|
+
// onSearch会初始化请求表格数据，所以不需要在这里请求表格数据
|
|
3010
3011
|
// 确保全局数据池已初始化
|
|
3011
3012
|
if (!window.__idooel_data_pool__) {
|
|
3012
3013
|
console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.');
|
|
@@ -3047,25 +3048,25 @@
|
|
|
3047
3048
|
this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]];
|
|
3048
3049
|
this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]];
|
|
3049
3050
|
this.currentTreeNodeData = defaultTreeNode;
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
}
|
|
3067
|
-
|
|
3068
|
-
|
|
3051
|
+
const {
|
|
3052
|
+
params = {},
|
|
3053
|
+
fieldMap = {},
|
|
3054
|
+
overrideInit = false
|
|
3055
|
+
} = this.tableMeta;
|
|
3056
|
+
const currentRowData = this.getCurrentRowData();
|
|
3057
|
+
const ctx = {
|
|
3058
|
+
...this.currentTreeNodeData,
|
|
3059
|
+
_route: this.$route.query,
|
|
3060
|
+
currentRowData: currentRowData
|
|
3061
|
+
};
|
|
3062
|
+
const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx));
|
|
3063
|
+
if (overrideInit) {
|
|
3064
|
+
this.$emit(RESERVE_EVENT_NAMES.INIT, {
|
|
3065
|
+
...this.exposed
|
|
3066
|
+
});
|
|
3067
|
+
} else {
|
|
3068
|
+
this.tableData = await this.requestTableData(initQuerys);
|
|
3069
|
+
}
|
|
3069
3070
|
}
|
|
3070
3071
|
},
|
|
3071
3072
|
methods: {
|
|
@@ -3279,6 +3280,7 @@
|
|
|
3279
3280
|
...this.exposed
|
|
3280
3281
|
});
|
|
3281
3282
|
} else {
|
|
3283
|
+
if (this.showTree) return;
|
|
3282
3284
|
this.tableData = await this.requestTableData();
|
|
3283
3285
|
}
|
|
3284
3286
|
},
|
|
@@ -3631,11 +3633,11 @@
|
|
|
3631
3633
|
/* style */
|
|
3632
3634
|
const __vue_inject_styles__$A = function (inject) {
|
|
3633
3635
|
if (!inject) return
|
|
3634
|
-
inject("data-v-b410229e_0", { source: ".ele.model__tree-table[data-v-b410229e] {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-b410229e] {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-b410229e] {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-b410229e] {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-b410229e] {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-b410229e] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-b410229e] {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-b410229e] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6vBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC5vBA;AD8vBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AC5vBA;AD+vBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC7vBA;AD+vBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC7vBA;AD+vBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC7vBA;ADgwBA;EACA,gBAAA;AC9vBA;AD+vBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC7vBA;ADgwBA;EACA,eAAA;EACA,kCAAA;AC9vBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <section class=\"ele model__tree-table\">\r\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n <div class=\"model__tree--title\"></div>\r\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n <ele-tree\r\n :tree-data=\"treeData\"\r\n :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n @select=\"selectTreeNode\"\r\n :replace-fields=\"mapFields\">\r\n </ele-tree>\r\n </section>\r\n </section>\r\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n <div class=\"model__table--title\" v-if=\"title\">\r\n <template v-if=\"titleMode\">\r\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n </template>\r\n <template v-else>\r\n <div class=\"model__table-title--text\">{{ title }}</div>\r\n </template>\r\n </div>\r\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n <div class=\"button-row__area\">\r\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n <slot name=\"tags\"></slot>\r\n <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n </div>\r\n <ele-table\r\n v-on=\"overrideTableEvent\"\r\n :ref=\"tableRef\"\r\n :row-selection=\"rowSelection\"\r\n :loading=\"loading\" \r\n :columns=\"columns\"\r\n :total=\"total\"\r\n :x=\"x\"\r\n :y=\"y\"\r\n :bordered=\"setBorder\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n <ele-modal-table\r\n :meta=\"modalTableMeta\"\r\n v-model=\"modalTableValue\"\r\n v-on=\"overrideModalTableEvent\"\r\n ></ele-modal-table>\r\n </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nimport { createTreeTableModel } from '../../../utils/runtime-context'\r\nexport default {\r\n name: 'ele-tree-table-model',\r\n props: {\r\n title: {\r\n type: [Object, String]\r\n },\r\n overHeight: {\r\n type: Number,\r\n default: 0\r\n },\r\n treeMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n searchMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n buttonGroupMeta: {\r\n typeof: Object,\r\n default: () => ({})\r\n },\r\n tableMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n createMeta: {\r\n type: Object\r\n },\r\n editMeta: {\r\n type: Object\r\n }\r\n },\r\n provide () {\r\n return {\r\n requestTreeData: this.requestTreeData,\r\n requestTableData: this.requestTableData,\r\n [CONTEXT]: () => {\r\n return {\r\n exposed: this.exposed\r\n }\r\n }\r\n }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 0,\r\n tableWidth: 0,\r\n modalFormMeta: {},\r\n modalFormValue: false,\r\n treeData: [],\r\n tableData: [],\r\n defaultExpandedKeys: [],\r\n defaultSelectedKeys: [],\r\n replaceFields: {\r\n title: 'title',\r\n children: 'children',\r\n key: 'id'\r\n },\r\n loading: false,\r\n total: 0,\r\n tableQuerys: {},\r\n resizeObserverModelTableWrapper: null,\r\n modelTableWrapperHeight: 0,\r\n currentTreeNodeData: {},\r\n currentRowData: {},\r\n treeWrapperHeight: 0,\r\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\r\n showFsmModal: false,\r\n fsmMeta: {},\r\n fsmContextProp: {},\r\n modalTableValue: false,\r\n modalTableMeta: {},\r\n dataPoolManager: null\r\n }\r\n },\r\n computed: {\r\n setBorder () {\r\n return this.tableMeta.bordered === false ? false : true\r\n },\r\n rowSelection () {\r\n if (!this.currentTableMode) return void 0\r\n return {\r\n columnTitle: this.currentSelectionColumn.columnTitle,\r\n fixed: true,\r\n type: this.currentTableMode,\r\n onChange: this.onChangeTableSelection\r\n }\r\n },\r\n currentSelectionColumn () {\r\n const { multiple } = this.tableMeta\r\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\r\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\r\n if (target) {\r\n return target\r\n } else if (isGlobalExistMultiple) {\r\n return { multiple }\r\n }\r\n return void 0\r\n },\r\n x () {\r\n const { x } = this.tableMeta\r\n return x\r\n },\r\n y () {\r\n const { y } = this.tableMeta\r\n return y\r\n },\r\n currentTableMode () {\r\n if (!this.currentSelectionColumn) return void 0\r\n const { multiple } = this.currentSelectionColumn\r\n if (type.isBool(multiple)) {\r\n if (multiple) {\r\n return 'checkbox'\r\n } else {\r\n return 'radio'\r\n }\r\n } else {\r\n return void 0\r\n }\r\n },\r\n modelTableContainerRef () {\r\n return uuidv4()\r\n },\r\n titleMode () {\r\n if (type.isObject(this.title)) {\r\n const { mode = '' } = this.title\r\n return mode\r\n }\r\n return void 0\r\n },\r\n tableRef () {\r\n return uuidv4()\r\n },\r\n exposed () {\r\n return {\r\n showModalForm: this.showModalForm,\r\n closeModalForm: this.closeModalForm,\r\n showModalTable: this.showModalTable,\r\n closeModalTable: this.closeModalTable,\r\n currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n refreshTreeData: this.refreshTreeData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.getCurrentRowData(),\r\n getCurrentRowData: this.getCurrentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n getCurrentTableSelection: this.getCurrentTableSelection,\r\n cleanCurrentModelEffect: this.cleanCurrentModelEffect,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n dataPool: this.model ? this.model.getDataPool() : null,\r\n dataPoolManager: this.model || null\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName || action.key] = (e) => {\r\n this.setCurrentRowData(e.exposed.currentRowData)\r\n const { target } = action\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n }\r\n },\r\n overrideModalFormEvent () {\r\n const { footerMeta } = this.modalFormMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalForm()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events\r\n }\r\n },\r\n overrideModalTableEvent () {\r\n const { footerMeta } = this.modalTableMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalTable()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events,\r\n exposed: this.exposed\r\n }\r\n },\r\n overrideButtonGroupEvent () {\r\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n exposed: this.exposed\r\n }\r\n },\r\n showTree () {\r\n return !!Object.keys(this.treeMeta).length\r\n },\r\n buttonGroup () {\r\n return uuidv4()\r\n },\r\n searchArea () {\r\n return uuidv4()\r\n },\r\n modelTreeWrapper () {\r\n return uuidv4()\r\n },\r\n modelTableWrapper () {\r\n return uuidv4()\r\n },\r\n actions () {\r\n const { operations } = this.tableMeta\r\n if (operations) {\r\n return operations.elements\r\n } else {\r\n return []\r\n }\r\n },\r\n pageSize () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSize || 10\r\n },\r\n pageSizeOptions () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSizeOptions || ['10', '20', '30', '40']\r\n },\r\n columns () {\r\n const { columns, operations } = this.tableMeta\r\n if (type.get(columns) === 'array') {\r\n const columnsOptions = columns.map(item => {\r\n const { mode = 'text' } = item\r\n if (item.render) {\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n const { $createElement } = this\r\n return item.render.call(this, \r\n { h: $createElement, ctx: this },\r\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n record, index)\r\n }\r\n }\r\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n const { [`${mode}Meta`]: modeMeta } = item\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n }\r\n }\r\n }\r\n return {\r\n ...item\r\n }\r\n })\r\n if (operations) {\r\n return [\r\n ...columnsOptions,\r\n {\r\n title: '操作',\r\n width: operations.width,\r\n key: 'action',\r\n fixed: 'right',\r\n scopedSlots: { customRender: 'action' }\r\n }\r\n ]\r\n }\r\n return columnsOptions\r\n } else {\r\n console.error('Error: columns is invalid, please check it')\r\n return []\r\n }\r\n },\r\n getButtonGroupElements () {\r\n const { elements } = this.buttonGroupMeta\r\n if (type.get(elements) === 'function') {\r\n return elements.call(this)\r\n } else if (type.get(elements) === 'array') {\r\n return elements\r\n } else {\r\n return []\r\n }\r\n },\r\n mapFields () {\r\n const { replaceFields = {} } = this.treeMeta\r\n const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n return mapFields\r\n }\r\n },\r\n async created () {\r\n // 确保全局数据池已初始化\r\n if (!window.__idooel_data_pool__) {\r\n console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.')\r\n return\r\n }\r\n \r\n // 初始化数据池管理器（使用新的 runtime-context）\r\n try {\r\n this.model = createTreeTableModel('treeTableModel')\r\n \r\n if (!this.model) {\r\n throw new Error('Failed to create tree table model')\r\n }\r\n } catch (error) {\r\n console.error('Error creating tree table model:', error)\r\n this.model = null\r\n return\r\n }\r\n \r\n // 初始化 currentRowData（尝试从共享命名空间获取）\r\n this.initializeCurrentRowData()\r\n \r\n // 订阅数据池变化\r\n this.unsubscribe = this.model.subscribe('currentRowData', (event) => {\r\n this.currentRowData = event.value || {}\r\n this.$forceUpdate()\r\n })\r\n \r\n // 订阅共享数据变化\r\n this.unsubscribeShared = this.model.subscribeShared((event) => {\r\n // 当有新的共享数据时，更新当前组件的 currentRowData\r\n if (event.value && Object.keys(event.value).length > 0) {\r\n this.setCurrentRowData(event.value)\r\n }\r\n })\r\n \r\n if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n }\r\n \r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const currentRowData = this.getCurrentRowData()\r\n const ctx = { \r\n ...this.currentTreeNodeData, \r\n _route: this.$route.query, \r\n currentRowData: currentRowData\r\n }\r\n \r\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(initQuerys)\r\n }\r\n },\r\n methods: {\r\n initializeCurrentRowData () {\r\n if (!this.model) {\r\n console.warn('Model not initialized, skipping currentRowData initialization')\r\n return\r\n }\r\n \r\n // 检查是否有来自父组件的共享数据（比如 modal table 场景）\r\n const parentData = this.model.getSharedData()\r\n \r\n if (parentData && Object.keys(parentData).length > 0) {\r\n this.setCurrentRowData(parentData)\r\n return\r\n }\r\n \r\n // 可以根据路由参数、props 或其他来源设置初始的 currentRowData\r\n const { query } = this.$route\r\n \r\n // 示例：如果路由中有特定参数，可以设置为 currentRowData\r\n if (query.rowId || query.selectedId) {\r\n // 这里可以根据实际需求从服务端或其他地方获取数据\r\n // const presetData = { id: query.rowId, /* 其他字段 */ }\r\n // this.setCurrentRowData(presetData)\r\n }\r\n \r\n // 目前保持空对象，等待用户选择行数据\r\n },\r\n async refreshTreeData () {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n },\r\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\r\n switch (mode) {\r\n case BUILT_IN_TRIGGER.FSM:\r\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \r\n url: 'api-fsm/workbench/fsm/auditFlow',\r\n requestType: 'GET',\r\n fieldMap: {\r\n modelCode: 'modelCode',\r\n businessId: 'businessId'\r\n }\r\n } : modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\r\n this.modalFormMeta = modeMeta\r\n this.showModalForm(modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\r\n this.modalTableMeta = modeMeta\r\n // 将当前行的 record 数据传递给 modal table\r\n this.showModalTable(modeMeta, record)\r\n break\r\n default:\r\n break\r\n }\r\n },\r\n handleCloseFsmModal () {\r\n this.showFsmModal = false\r\n },\r\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\r\n this.fsmMeta = meta\r\n this.fsmContextProp = record\r\n this.showFsmModal = true\r\n },\r\n onChangeTableSelection (_, selectedRows = []) {\r\n if (this.currentTableMode === 'radio') {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n } else {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\r\n } else {\r\n this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\r\n }\r\n },\r\n getCurrentTableSelection () {\r\n return this.currentTableSelection\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n if (this.model) {\r\n this.model.setCurrentRowData(props)\r\n } else {\r\n console.warn('Model not initialized, cannot setCurrentRowData in model')\r\n }\r\n },\r\n getCurrentRowData () {\r\n if (this.model) {\r\n return this.model.getCurrentRowData()\r\n }\r\n console.warn('Model not initialized, getCurrentRowData returning local data')\r\n return this.currentRowData || {}\r\n },\r\n cleanCurrentModelEffect (clearRowData = true) {\r\n this.setCurrentTableSelection()\r\n if (clearRowData) {\r\n this.setCurrentRowData({})\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n this.cleanCurrentModelEffect()\r\n this.requestTableData()\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\r\n const { record = {} } = props\r\n this.setCurrentRowData(record)\r\n this.modalFormMeta = this.editMeta\r\n this.modalFormValue = true\r\n },\r\n [BUILT_IN_EVENT_NAMES.CREATE] () {\r\n this.modalFormMeta = this.createMeta\r\n this.modalFormValue = true\r\n },\r\n showModalForm (modeMeta = {}) {\r\n if (type.isStr(modeMeta)) {\r\n const targetMeta = this.findMetaByKey(modeMeta)\r\n this.modalFormMeta = targetMeta\r\n } else {\r\n this.modalFormMeta = modeMeta\r\n }\r\n this.modalFormValue = true\r\n },\r\n showModalTable (modeMeta = {}, record = null) {\r\n // 获取当前行数据并设置到共享命名空间\r\n const currentRowData = record || this.getCurrentRowData()\r\n if (this.model) {\r\n this.model.setSharedData(currentRowData)\r\n } else {\r\n console.warn('Model not initialized, cannot setSharedData')\r\n }\r\n \r\n let targetMeta = modeMeta\r\n if (type.isStr(modeMeta)) {\r\n targetMeta = this.findMetaByKey(modeMeta)\r\n }\r\n \r\n // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData\r\n if (targetMeta && targetMeta.fieldMap) {\r\n const { fieldMap, params = {} } = targetMeta\r\n \r\n const ctx = { \r\n ...this.currentTreeNodeData, \r\n _route: this.$route.query, \r\n ...currentRowData \r\n }\r\n const parsedParams = parseFieldMap(fieldMap, ctx)\r\n \r\n // 将当前的 currentRowData 传递给 modal table，通过 params\r\n targetMeta = {\r\n ...targetMeta,\r\n params: {\r\n ...params,\r\n ...parsedParams\r\n }\r\n }\r\n }\r\n \r\n this.modalTableMeta = targetMeta\r\n this.modalTableValue = true\r\n },\r\n closeModalForm () {\r\n this.modalFormValue = false\r\n },\r\n closeModalTable () {\r\n this.modalTableValue = false\r\n },\r\n findMetaByKey (key) {\r\n return this.$attrs[key] || {}\r\n },\r\n handleClickButtonGroup (props) {\r\n const { eventName, target } = props\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\r\n this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n async onSearch (props) {\r\n const { overrideInit = false } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData()\r\n }\r\n },\r\n async selectTreeNode (selectedKeys, e) {\r\n const { fieldMap } = this.tableMeta\r\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\r\n //@deprecated '_' namespace is deprecated, please use 'exposed' instead\r\n const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(execFieldMapRet)\r\n }\r\n },\r\n async requestTreeData () {\r\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\r\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n { ...params, ...fieldMapRet }\r\n ).then(resp => {\r\n const { data } = resp || {}\r\n return data\r\n })\r\n return ret\r\n },\r\n async onChangePage (page, pageSize) {\r\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\r\n },\r\n async requestTableData (props = {}) {\r\n const { url, requestType = 'GET', page = {} } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: this.tableQuerys.currentPage || 1, pageSize: this.tableQuerys.pageSize || 10 }, props)\r\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n this.loading = true\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n this.tableQuerys\r\n ).then(resp => {\r\n const { data = [], count } = resp || {}\r\n this.total = count\r\n this.loading = false\r\n return (data || []).map(item => {\r\n delete item.children\r\n return {\r\n key: uuidv4(),\r\n ...item\r\n }\r\n })\r\n })\r\n this.cleanCurrentModelEffect(false) // 不清空 currentRowData，除非明确需要\r\n this.tableData = ret\r\n return ret\r\n },\r\n calculateTableHeight () {\r\n const currentViewportHeight = window.innerHeight\r\n const tableRef = this.$refs[this.tableRef]\r\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\r\n this.tableWidth = width\r\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\r\n },\r\n calculateTreeHeight () {\r\n if (!this.showTree) return\r\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\r\n const { height } = modelTableContainerRef.getBoundingClientRect()\r\n this.treeWrapperHeight = height\r\n },\r\n async keepAliveRefresh () {\r\n // 重新计算表格高度（应对窗口大小变化）\r\n this.$nextTick(() => {\r\n this.calculateTableHeight()\r\n if (this.showTree) {\r\n this.calculateTreeHeight()\r\n }\r\n })\r\n // 刷新列表数据\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n // 如果使用自定义初始化模式，触发 INIT 事件\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n // 使用当前查询参数刷新表格数据\r\n await this.requestTableData(this.tableQuerys)\r\n }\r\n }\r\n },\r\n mounted () {\r\n this.calculateTableHeight()\r\n this.$nextTick(() => {\r\n this.calculateTreeHeight()\r\n })\r\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n this.calculateTableHeight()\r\n })\r\n }\r\n })\r\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\r\n },\r\n destroyed () {\r\n this.resizeObserverModelTableWrapper.disconnect()\r\n if (this.model) {\r\n // 清理订阅\r\n if (this.unsubscribe) {\r\n this.unsubscribe()\r\n }\r\n if (this.unsubscribeShared) {\r\n this.unsubscribeShared()\r\n }\r\n // 清理模型数据\r\n if (this.model) {\r\n this.model.cleanup()\r\n }\r\n }\r\n },\r\n async activated () {\r\n await this.keepAliveRefresh()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n &.model__tree-table {\r\n background: transparent; \r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n .model__tree-table--container {\r\n .model__tree--wrapper {\r\n width: 240px;\r\n background: #fff;\r\n flex-shrink: 0;\r\n padding: 16px;\r\n box-sizing: border-box;\r\n margin-right: 16px;\r\n overflow-y: auto;\r\n }\r\n }\r\n .model__table--container {\r\n width: 100%;\r\n min-width: 0;\r\n background: #fff;\r\n .model__table--title {\r\n .model__table-title--bar {\r\n width: 100%;\r\n height: 8px;\r\n background: var(--idooel-primary-color);\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n }\r\n .model__table-title--text {\r\n text-align: left;\r\n padding: 16px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n background: #fff;\r\n border-bottom: 1px solid;\r\n border-color: var(--idoole-black-016);\r\n }\r\n }\r\n .model__table--wrapper {\r\n background: #fff;\r\n .button-row__area {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-top: 16px;\r\n padding-bottom: 8px;\r\n padding-right: 16px;\r\n }\r\n .g-table__wrapper {\r\n .fsm {\r\n cursor: pointer;\r\n color: var(--idooel-primary-color);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n",".ele.model__tree-table {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3636
|
+
inject("data-v-0641f844_0", { source: ".ele.model__tree-table[data-v-0641f844] {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-0641f844] {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-0641f844] {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-0641f844] {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-0641f844] {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-0641f844] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-0641f844] {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-0641f844] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA8vBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC7vBA;AD+vBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AC7vBA;ADgwBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC9vBA;ADgwBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC9vBA;ADgwBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC9vBA;ADiwBA;EACA,gBAAA;AC/vBA;ADgwBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC9vBA;ADiwBA;EACA,eAAA;EACA,kCAAA;AC/vBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <section class=\"ele model__tree-table\">\r\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n <div class=\"model__tree--title\"></div>\r\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n <ele-tree\r\n :tree-data=\"treeData\"\r\n :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n @select=\"selectTreeNode\"\r\n :replace-fields=\"mapFields\">\r\n </ele-tree>\r\n </section>\r\n </section>\r\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n <div class=\"model__table--title\" v-if=\"title\">\r\n <template v-if=\"titleMode\">\r\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n </template>\r\n <template v-else>\r\n <div class=\"model__table-title--text\">{{ title }}</div>\r\n </template>\r\n </div>\r\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n <div class=\"button-row__area\">\r\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n <slot name=\"tags\"></slot>\r\n <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n </div>\r\n <ele-table\r\n v-on=\"overrideTableEvent\"\r\n :ref=\"tableRef\"\r\n :row-selection=\"rowSelection\"\r\n :loading=\"loading\" \r\n :columns=\"columns\"\r\n :total=\"total\"\r\n :x=\"x\"\r\n :y=\"y\"\r\n :bordered=\"setBorder\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n <ele-modal-table\r\n :meta=\"modalTableMeta\"\r\n v-model=\"modalTableValue\"\r\n v-on=\"overrideModalTableEvent\"\r\n ></ele-modal-table>\r\n </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nimport { createTreeTableModel } from '../../../utils/runtime-context'\r\nexport default {\r\n name: 'ele-tree-table-model',\r\n props: {\r\n title: {\r\n type: [Object, String]\r\n },\r\n overHeight: {\r\n type: Number,\r\n default: 0\r\n },\r\n treeMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n searchMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n buttonGroupMeta: {\r\n typeof: Object,\r\n default: () => ({})\r\n },\r\n tableMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n createMeta: {\r\n type: Object\r\n },\r\n editMeta: {\r\n type: Object\r\n }\r\n },\r\n provide () {\r\n return {\r\n requestTreeData: this.requestTreeData,\r\n requestTableData: this.requestTableData,\r\n [CONTEXT]: () => {\r\n return {\r\n exposed: this.exposed\r\n }\r\n }\r\n }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 0,\r\n tableWidth: 0,\r\n modalFormMeta: {},\r\n modalFormValue: false,\r\n treeData: [],\r\n tableData: [],\r\n defaultExpandedKeys: [],\r\n defaultSelectedKeys: [],\r\n replaceFields: {\r\n title: 'title',\r\n children: 'children',\r\n key: 'id'\r\n },\r\n loading: false,\r\n total: 0,\r\n tableQuerys: {},\r\n resizeObserverModelTableWrapper: null,\r\n modelTableWrapperHeight: 0,\r\n currentTreeNodeData: {},\r\n currentRowData: {},\r\n treeWrapperHeight: 0,\r\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\r\n showFsmModal: false,\r\n fsmMeta: {},\r\n fsmContextProp: {},\r\n modalTableValue: false,\r\n modalTableMeta: {},\r\n dataPoolManager: null\r\n }\r\n },\r\n computed: {\r\n setBorder () {\r\n return this.tableMeta.bordered === false ? false : true\r\n },\r\n rowSelection () {\r\n if (!this.currentTableMode) return void 0\r\n return {\r\n columnTitle: this.currentSelectionColumn.columnTitle,\r\n fixed: true,\r\n type: this.currentTableMode,\r\n onChange: this.onChangeTableSelection\r\n }\r\n },\r\n currentSelectionColumn () {\r\n const { multiple } = this.tableMeta\r\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\r\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\r\n if (target) {\r\n return target\r\n } else if (isGlobalExistMultiple) {\r\n return { multiple }\r\n }\r\n return void 0\r\n },\r\n x () {\r\n const { x } = this.tableMeta\r\n return x\r\n },\r\n y () {\r\n const { y } = this.tableMeta\r\n return y\r\n },\r\n currentTableMode () {\r\n if (!this.currentSelectionColumn) return void 0\r\n const { multiple } = this.currentSelectionColumn\r\n if (type.isBool(multiple)) {\r\n if (multiple) {\r\n return 'checkbox'\r\n } else {\r\n return 'radio'\r\n }\r\n } else {\r\n return void 0\r\n }\r\n },\r\n modelTableContainerRef () {\r\n return uuidv4()\r\n },\r\n titleMode () {\r\n if (type.isObject(this.title)) {\r\n const { mode = '' } = this.title\r\n return mode\r\n }\r\n return void 0\r\n },\r\n tableRef () {\r\n return uuidv4()\r\n },\r\n exposed () {\r\n return {\r\n showModalForm: this.showModalForm,\r\n closeModalForm: this.closeModalForm,\r\n showModalTable: this.showModalTable,\r\n closeModalTable: this.closeModalTable,\r\n currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n refreshTreeData: this.refreshTreeData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.getCurrentRowData(),\r\n getCurrentRowData: this.getCurrentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n getCurrentTableSelection: this.getCurrentTableSelection,\r\n cleanCurrentModelEffect: this.cleanCurrentModelEffect,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n dataPool: this.model ? this.model.getDataPool() : null,\r\n dataPoolManager: this.model || null\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName || action.key] = (e) => {\r\n this.setCurrentRowData(e.exposed.currentRowData)\r\n const { target } = action\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n }\r\n },\r\n overrideModalFormEvent () {\r\n const { footerMeta } = this.modalFormMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalForm()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events\r\n }\r\n },\r\n overrideModalTableEvent () {\r\n const { footerMeta } = this.modalTableMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalTable()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events,\r\n exposed: this.exposed\r\n }\r\n },\r\n overrideButtonGroupEvent () {\r\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n exposed: this.exposed\r\n }\r\n },\r\n showTree () {\r\n return !!Object.keys(this.treeMeta).length\r\n },\r\n buttonGroup () {\r\n return uuidv4()\r\n },\r\n searchArea () {\r\n return uuidv4()\r\n },\r\n modelTreeWrapper () {\r\n return uuidv4()\r\n },\r\n modelTableWrapper () {\r\n return uuidv4()\r\n },\r\n actions () {\r\n const { operations } = this.tableMeta\r\n if (operations) {\r\n return operations.elements\r\n } else {\r\n return []\r\n }\r\n },\r\n pageSize () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSize || 10\r\n },\r\n pageSizeOptions () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSizeOptions || ['10', '20', '30', '40']\r\n },\r\n columns () {\r\n const { columns, operations } = this.tableMeta\r\n if (type.get(columns) === 'array') {\r\n const columnsOptions = columns.map(item => {\r\n const { mode = 'text' } = item\r\n if (item.render) {\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n const { $createElement } = this\r\n return item.render.call(this, \r\n { h: $createElement, ctx: this },\r\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n record, index)\r\n }\r\n }\r\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n const { [`${mode}Meta`]: modeMeta } = item\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n }\r\n }\r\n }\r\n return {\r\n ...item\r\n }\r\n })\r\n if (operations) {\r\n return [\r\n ...columnsOptions,\r\n {\r\n title: '操作',\r\n width: operations.width,\r\n key: 'action',\r\n fixed: 'right',\r\n scopedSlots: { customRender: 'action' }\r\n }\r\n ]\r\n }\r\n return columnsOptions\r\n } else {\r\n console.error('Error: columns is invalid, please check it')\r\n return []\r\n }\r\n },\r\n getButtonGroupElements () {\r\n const { elements } = this.buttonGroupMeta\r\n if (type.get(elements) === 'function') {\r\n return elements.call(this)\r\n } else if (type.get(elements) === 'array') {\r\n return elements\r\n } else {\r\n return []\r\n }\r\n },\r\n mapFields () {\r\n const { replaceFields = {} } = this.treeMeta\r\n const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n return mapFields\r\n }\r\n },\r\n async created () {\r\n // onSearch会初始化请求表格数据，所以不需要在这里请求表格数据\r\n // 确保全局数据池已初始化\r\n if (!window.__idooel_data_pool__) {\r\n console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.')\r\n return\r\n }\r\n \r\n // 初始化数据池管理器（使用新的 runtime-context）\r\n try {\r\n this.model = createTreeTableModel('treeTableModel')\r\n \r\n if (!this.model) {\r\n throw new Error('Failed to create tree table model')\r\n }\r\n } catch (error) {\r\n console.error('Error creating tree table model:', error)\r\n this.model = null\r\n return\r\n }\r\n \r\n // 初始化 currentRowData（尝试从共享命名空间获取）\r\n this.initializeCurrentRowData()\r\n \r\n // 订阅数据池变化\r\n this.unsubscribe = this.model.subscribe('currentRowData', (event) => {\r\n this.currentRowData = event.value || {}\r\n this.$forceUpdate()\r\n })\r\n \r\n // 订阅共享数据变化\r\n this.unsubscribeShared = this.model.subscribeShared((event) => {\r\n // 当有新的共享数据时，更新当前组件的 currentRowData\r\n if (event.value && Object.keys(event.value).length > 0) {\r\n this.setCurrentRowData(event.value)\r\n }\r\n })\r\n \r\n if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const currentRowData = this.getCurrentRowData()\r\n const ctx = { \r\n ...this.currentTreeNodeData, \r\n _route: this.$route.query, \r\n currentRowData: currentRowData\r\n }\r\n \r\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(initQuerys)\r\n }\r\n }\r\n },\r\n methods: {\r\n initializeCurrentRowData () {\r\n if (!this.model) {\r\n console.warn('Model not initialized, skipping currentRowData initialization')\r\n return\r\n }\r\n \r\n // 检查是否有来自父组件的共享数据（比如 modal table 场景）\r\n const parentData = this.model.getSharedData()\r\n \r\n if (parentData && Object.keys(parentData).length > 0) {\r\n this.setCurrentRowData(parentData)\r\n return\r\n }\r\n \r\n // 可以根据路由参数、props 或其他来源设置初始的 currentRowData\r\n const { query } = this.$route\r\n \r\n // 示例：如果路由中有特定参数，可以设置为 currentRowData\r\n if (query.rowId || query.selectedId) {\r\n // 这里可以根据实际需求从服务端或其他地方获取数据\r\n // const presetData = { id: query.rowId, /* 其他字段 */ }\r\n // this.setCurrentRowData(presetData)\r\n }\r\n \r\n // 目前保持空对象，等待用户选择行数据\r\n },\r\n async refreshTreeData () {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n },\r\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\r\n switch (mode) {\r\n case BUILT_IN_TRIGGER.FSM:\r\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \r\n url: 'api-fsm/workbench/fsm/auditFlow',\r\n requestType: 'GET',\r\n fieldMap: {\r\n modelCode: 'modelCode',\r\n businessId: 'businessId'\r\n }\r\n } : modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\r\n this.modalFormMeta = modeMeta\r\n this.showModalForm(modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\r\n this.modalTableMeta = modeMeta\r\n // 将当前行的 record 数据传递给 modal table\r\n this.showModalTable(modeMeta, record)\r\n break\r\n default:\r\n break\r\n }\r\n },\r\n handleCloseFsmModal () {\r\n this.showFsmModal = false\r\n },\r\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\r\n this.fsmMeta = meta\r\n this.fsmContextProp = record\r\n this.showFsmModal = true\r\n },\r\n onChangeTableSelection (_, selectedRows = []) {\r\n if (this.currentTableMode === 'radio') {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n } else {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\r\n } else {\r\n this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\r\n }\r\n },\r\n getCurrentTableSelection () {\r\n return this.currentTableSelection\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n if (this.model) {\r\n this.model.setCurrentRowData(props)\r\n } else {\r\n console.warn('Model not initialized, cannot setCurrentRowData in model')\r\n }\r\n },\r\n getCurrentRowData () {\r\n if (this.model) {\r\n return this.model.getCurrentRowData()\r\n }\r\n console.warn('Model not initialized, getCurrentRowData returning local data')\r\n return this.currentRowData || {}\r\n },\r\n cleanCurrentModelEffect (clearRowData = true) {\r\n this.setCurrentTableSelection()\r\n if (clearRowData) {\r\n this.setCurrentRowData({})\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n this.cleanCurrentModelEffect()\r\n this.requestTableData()\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\r\n const { record = {} } = props\r\n this.setCurrentRowData(record)\r\n this.modalFormMeta = this.editMeta\r\n this.modalFormValue = true\r\n },\r\n [BUILT_IN_EVENT_NAMES.CREATE] () {\r\n this.modalFormMeta = this.createMeta\r\n this.modalFormValue = true\r\n },\r\n showModalForm (modeMeta = {}) {\r\n if (type.isStr(modeMeta)) {\r\n const targetMeta = this.findMetaByKey(modeMeta)\r\n this.modalFormMeta = targetMeta\r\n } else {\r\n this.modalFormMeta = modeMeta\r\n }\r\n this.modalFormValue = true\r\n },\r\n showModalTable (modeMeta = {}, record = null) {\r\n // 获取当前行数据并设置到共享命名空间\r\n const currentRowData = record || this.getCurrentRowData()\r\n if (this.model) {\r\n this.model.setSharedData(currentRowData)\r\n } else {\r\n console.warn('Model not initialized, cannot setSharedData')\r\n }\r\n \r\n let targetMeta = modeMeta\r\n if (type.isStr(modeMeta)) {\r\n targetMeta = this.findMetaByKey(modeMeta)\r\n }\r\n \r\n // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData\r\n if (targetMeta && targetMeta.fieldMap) {\r\n const { fieldMap, params = {} } = targetMeta\r\n \r\n const ctx = { \r\n ...this.currentTreeNodeData, \r\n _route: this.$route.query, \r\n ...currentRowData \r\n }\r\n const parsedParams = parseFieldMap(fieldMap, ctx)\r\n \r\n // 将当前的 currentRowData 传递给 modal table，通过 params\r\n targetMeta = {\r\n ...targetMeta,\r\n params: {\r\n ...params,\r\n ...parsedParams\r\n }\r\n }\r\n }\r\n \r\n this.modalTableMeta = targetMeta\r\n this.modalTableValue = true\r\n },\r\n closeModalForm () {\r\n this.modalFormValue = false\r\n },\r\n closeModalTable () {\r\n this.modalTableValue = false\r\n },\r\n findMetaByKey (key) {\r\n return this.$attrs[key] || {}\r\n },\r\n handleClickButtonGroup (props) {\r\n const { eventName, target } = props\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\r\n this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n async onSearch (props) {\r\n const { overrideInit = false } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n if (this.showTree) return\r\n this.tableData = await this.requestTableData()\r\n }\r\n },\r\n async selectTreeNode (selectedKeys, e) {\r\n const { fieldMap } = this.tableMeta\r\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\r\n //@deprecated '_' namespace is deprecated, please use 'exposed' instead\r\n const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(execFieldMapRet)\r\n }\r\n },\r\n async requestTreeData () {\r\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\r\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n { ...params, ...fieldMapRet }\r\n ).then(resp => {\r\n const { data } = resp || {}\r\n return data\r\n })\r\n return ret\r\n },\r\n async onChangePage (page, pageSize) {\r\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\r\n },\r\n async requestTableData (props = {}) {\r\n const { url, requestType = 'GET', page = {} } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: this.tableQuerys.currentPage || 1, pageSize: this.tableQuerys.pageSize || 10 }, props)\r\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n this.loading = true\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n this.tableQuerys\r\n ).then(resp => {\r\n const { data = [], count } = resp || {}\r\n this.total = count\r\n this.loading = false\r\n return (data || []).map(item => {\r\n delete item.children\r\n return {\r\n key: uuidv4(),\r\n ...item\r\n }\r\n })\r\n })\r\n this.cleanCurrentModelEffect(false) // 不清空 currentRowData，除非明确需要\r\n this.tableData = ret\r\n return ret\r\n },\r\n calculateTableHeight () {\r\n const currentViewportHeight = window.innerHeight\r\n const tableRef = this.$refs[this.tableRef]\r\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\r\n this.tableWidth = width\r\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\r\n },\r\n calculateTreeHeight () {\r\n if (!this.showTree) return\r\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\r\n const { height } = modelTableContainerRef.getBoundingClientRect()\r\n this.treeWrapperHeight = height\r\n },\r\n async keepAliveRefresh () {\r\n // 重新计算表格高度（应对窗口大小变化）\r\n this.$nextTick(() => {\r\n this.calculateTableHeight()\r\n if (this.showTree) {\r\n this.calculateTreeHeight()\r\n }\r\n })\r\n // 刷新列表数据\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n // 如果使用自定义初始化模式，触发 INIT 事件\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n // 使用当前查询参数刷新表格数据\r\n await this.requestTableData(this.tableQuerys)\r\n }\r\n }\r\n },\r\n mounted () {\r\n this.calculateTableHeight()\r\n this.$nextTick(() => {\r\n this.calculateTreeHeight()\r\n })\r\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n this.calculateTableHeight()\r\n })\r\n }\r\n })\r\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\r\n },\r\n destroyed () {\r\n this.resizeObserverModelTableWrapper.disconnect()\r\n if (this.model) {\r\n // 清理订阅\r\n if (this.unsubscribe) {\r\n this.unsubscribe()\r\n }\r\n if (this.unsubscribeShared) {\r\n this.unsubscribeShared()\r\n }\r\n // 清理模型数据\r\n if (this.model) {\r\n this.model.cleanup()\r\n }\r\n }\r\n },\r\n async activated () {\r\n await this.keepAliveRefresh()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n &.model__tree-table {\r\n background: transparent; \r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n .model__tree-table--container {\r\n .model__tree--wrapper {\r\n width: 240px;\r\n background: #fff;\r\n flex-shrink: 0;\r\n padding: 16px;\r\n box-sizing: border-box;\r\n margin-right: 16px;\r\n overflow-y: auto;\r\n }\r\n }\r\n .model__table--container {\r\n width: 100%;\r\n min-width: 0;\r\n background: #fff;\r\n .model__table--title {\r\n .model__table-title--bar {\r\n width: 100%;\r\n height: 8px;\r\n background: var(--idooel-primary-color);\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n }\r\n .model__table-title--text {\r\n text-align: left;\r\n padding: 16px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n background: #fff;\r\n border-bottom: 1px solid;\r\n border-color: var(--idoole-black-016);\r\n }\r\n }\r\n .model__table--wrapper {\r\n background: #fff;\r\n .button-row__area {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-top: 16px;\r\n padding-bottom: 8px;\r\n padding-right: 16px;\r\n }\r\n .g-table__wrapper {\r\n .fsm {\r\n cursor: pointer;\r\n color: var(--idooel-primary-color);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n",".ele.model__tree-table {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3635
3637
|
|
|
3636
3638
|
};
|
|
3637
3639
|
/* scoped */
|
|
3638
|
-
const __vue_scope_id__$A = "data-v-
|
|
3640
|
+
const __vue_scope_id__$A = "data-v-0641f844";
|
|
3639
3641
|
/* module identifier */
|
|
3640
3642
|
const __vue_module_identifier__$A = undefined;
|
|
3641
3643
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -388,6 +388,7 @@ export default {
|
|
|
388
388
|
}
|
|
389
389
|
},
|
|
390
390
|
async created () {
|
|
391
|
+
// onSearch会初始化请求表格数据，所以不需要在这里请求表格数据
|
|
391
392
|
// 确保全局数据池已初始化
|
|
392
393
|
if (!window.__idooel_data_pool__) {
|
|
393
394
|
console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.')
|
|
@@ -430,21 +431,20 @@ export default {
|
|
|
430
431
|
this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]
|
|
431
432
|
this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]
|
|
432
433
|
this.currentTreeNodeData = defaultTreeNode
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
this.tableData = await this.requestTableData(initQuerys)
|
|
434
|
+
const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta
|
|
435
|
+
const currentRowData = this.getCurrentRowData()
|
|
436
|
+
const ctx = {
|
|
437
|
+
...this.currentTreeNodeData,
|
|
438
|
+
_route: this.$route.query,
|
|
439
|
+
currentRowData: currentRowData
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))
|
|
443
|
+
if (overrideInit) {
|
|
444
|
+
this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })
|
|
445
|
+
} else {
|
|
446
|
+
this.tableData = await this.requestTableData(initQuerys)
|
|
447
|
+
}
|
|
448
448
|
}
|
|
449
449
|
},
|
|
450
450
|
methods: {
|
|
@@ -639,6 +639,7 @@ export default {
|
|
|
639
639
|
if (overrideInit) {
|
|
640
640
|
this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })
|
|
641
641
|
} else {
|
|
642
|
+
if (this.showTree) return
|
|
642
643
|
this.tableData = await this.requestTableData()
|
|
643
644
|
}
|
|
644
645
|
},
|