@idooel/components 0.0.1-beta.79 → 0.0.1-beta.80

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.
Files changed (5) hide show
  1. package/dist/@idooel/components.esm.js +27 -13
  2. package/dist/@idooel/components.umd.js +27 -13
  3. package/package.json +1 -1
  4. package/packages/models/tree-table-model/src/index.vue +11 -3
  5. package/packages/tree/src/index.vue +3 -3
package/dist/@idooel/components.esm.js CHANGED
@@ -2153,16 +2153,21 @@ var __vue_render__$z = function () {
2153
2153
  [
2154
2154
  {
2155
2155
  key: "title",
2156
- fn: function (ref) {
2157
- var title = ref.title;
2156
+ fn: function (props) {
2158
2157
  return [
2159
2158
  _c(
2160
2159
  "span",
2161
2160
  {
2162
2161
  staticClass: "tree-node__title",
2163
- attrs: { title: title },
2162
+ attrs: { title: props[_vm.replaceFields.title] },
2164
2163
  },
2165
- [_vm._v("\n " + _vm._s(title) + "\n ")]
2164
+ [
2165
+ _vm._v(
2166
+ "\n " +
2167
+ _vm._s(props[_vm.replaceFields.title]) +
2168
+ "\n "
2169
+ ),
2170
+ ]
2166
2171
  ),
2167
2172
  ]
2168
2173
  },
@@ -2179,7 +2184,7 @@ var __vue_render__$z = function () {
2179
2184
  ],
2180
2185
  null,
2181
2186
  false,
2182
- 729072655
2187
+ 1965669479
2183
2188
  ),
2184
2189
  },
2185
2190
  [
@@ -2203,11 +2208,11 @@ __vue_render__$z._withStripped = true;
2203
2208
  /* style */
2204
2209
  const __vue_inject_styles__$z = function (inject) {
2205
2210
  if (!inject) return
2206
- inject("data-v-02dd33e4_0", { source: ".g-tree__wrapper[data-v-02dd33e4] {\n overflow: hidden;\n}\n.g-tree__wrapper[data-v-02dd33e4] .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper[data-v-02dd33e4] .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\tree\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwFA;EACA,gBAAA;ACvFA;ADyFA;EACA,uBAAA;EACA,gBAAA;EACA,mBAAA;ACvFA;ADyFA;EACA,WAAA;ACvFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-tree__wrapper\">\r\n <a-tree\r\n v-if=\"innerTreeData.length\"\r\n :tree-data=\"innerTreeData\"\r\n :checkable=\"checkable\"\r\n @select=\"selectTreeNode\"\r\n @check=\"checkTreeNode\"\r\n :replaceFields=\"replaceFields\"\r\n :default-expanded-keys=\"defaultExpandedKeys\"\r\n :default-selected-keys=\"defaultSelectedKeys\"\r\n :show-line=\"showLine\"\r\n blockNode \r\n :show-icon=\"showIcon\">\r\n <a-icon v-if=\"switcherIcon\" slot=\"switcherIcon\" :type=\"switcherIcon\" />\r\n <template #title=\"{ title }\">\r\n <span :title=\"title\" class=\"tree-node__title\">\r\n {{ title }}\r\n </span>\r\n </template>\r\n <template slot=\"custom\" slot-scope=\"{ scopedSlots }\">\r\n <a-icon :type=\"scopedSlots.iconName\"></a-icon>\r\n </template>\r\n </a-tree>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'ele-tree',\r\n props: {\r\n treeData: {\r\n type: Array,\r\n default: () => []\r\n },\r\n showLine: {\r\n type: Boolean,\r\n default: false\r\n },\r\n switcherIcon: {\r\n type: String\r\n },\r\n checkable: {\r\n type: Boolean,\r\n default: false\r\n },\r\n replaceFields: {\r\n type: Object,\r\n default: () => ({\r\n title: 'title',\r\n key: 'id',\r\n children: 'children'\r\n })\r\n },\r\n defaultExpandedKeys: {\r\n type: Array\r\n },\r\n defaultSelectedKeys: {\r\n type: Array\r\n },\r\n showIcon: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n computed: {\r\n innerTreeData () {\r\n return this.treeData\r\n }\r\n },\r\n methods: {\r\n checkTreeNode (checkedKeys, e) {\r\n const { checkedNodes } = e\r\n const nodeDatas = checkedNodes.map(item => item.data.props.dataRef)\r\n this.$emit('check', checkedKeys, nodeDatas)\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n selectTreeNode (selectedKeys, e) {\r\n this.$emit('select', selectedKeys, e)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-tree__wrapper {\r\n overflow: hidden;\r\n ::v-deep .ant-tree {\r\n .ant-tree-node-content-wrapper {\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n .ant-tree-node-selected {\r\n color: #fff;\r\n }\r\n }\r\n}\r\n</style>",".g-tree__wrapper {\n overflow: hidden;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
2211
+ inject("data-v-5aaaca72_0", { source: ".g-tree__wrapper[data-v-5aaaca72] {\n overflow: hidden;\n}\n.g-tree__wrapper[data-v-5aaaca72] .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper[data-v-5aaaca72] .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\tree\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwFA;EACA,gBAAA;ACvFA;ADyFA;EACA,uBAAA;EACA,gBAAA;EACA,mBAAA;ACvFA;ADyFA;EACA,WAAA;ACvFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-tree__wrapper\">\r\n <a-tree\r\n v-if=\"innerTreeData.length\"\r\n :tree-data=\"innerTreeData\"\r\n :checkable=\"checkable\"\r\n @select=\"selectTreeNode\"\r\n @check=\"checkTreeNode\"\r\n :replaceFields=\"replaceFields\"\r\n :default-expanded-keys=\"defaultExpandedKeys\"\r\n :default-selected-keys=\"defaultSelectedKeys\"\r\n :show-line=\"showLine\"\r\n blockNode \r\n :show-icon=\"showIcon\">\r\n <a-icon v-if=\"switcherIcon\" slot=\"switcherIcon\" :type=\"switcherIcon\" />\r\n <template #title=\"props\">\r\n <span :title=\"props[replaceFields.title]\" class=\"tree-node__title\">\r\n {{ props[replaceFields.title] }}\r\n </span>\r\n </template>\r\n <template slot=\"custom\" slot-scope=\"{ scopedSlots }\">\r\n <a-icon :type=\"scopedSlots.iconName\"></a-icon>\r\n </template>\r\n </a-tree>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'ele-tree',\r\n props: {\r\n treeData: {\r\n type: Array,\r\n default: () => []\r\n },\r\n showLine: {\r\n type: Boolean,\r\n default: false\r\n },\r\n switcherIcon: {\r\n type: String\r\n },\r\n checkable: {\r\n type: Boolean,\r\n default: false\r\n },\r\n replaceFields: {\r\n type: Object,\r\n default: () => ({\r\n title: 'title',\r\n key: 'id',\r\n children: 'children'\r\n })\r\n },\r\n defaultExpandedKeys: {\r\n type: Array\r\n },\r\n defaultSelectedKeys: {\r\n type: Array\r\n },\r\n showIcon: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n computed: {\r\n innerTreeData () {\r\n return this.treeData\r\n }\r\n },\r\n methods: {\r\n checkTreeNode (checkedKeys, e) {\r\n const { checkedNodes } = e\r\n const nodeDatas = checkedNodes.map(item => item.data.props.dataRef)\r\n this.$emit('check', checkedKeys, nodeDatas)\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n selectTreeNode (selectedKeys, e) {\r\n this.$emit('select', selectedKeys, e)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-tree__wrapper {\r\n overflow: hidden;\r\n ::v-deep .ant-tree {\r\n .ant-tree-node-content-wrapper {\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n .ant-tree-node-selected {\r\n color: #fff;\r\n }\r\n }\r\n}\r\n</style>",".g-tree__wrapper {\n overflow: hidden;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
2207
2212
 
2208
2213
  };
2209
2214
  /* scoped */
2210
- const __vue_scope_id__$z = "data-v-02dd33e4";
2215
+ const __vue_scope_id__$z = "data-v-5aaaca72";
2211
2216
  /* module identifier */
2212
2217
  const __vue_module_identifier__$z = undefined;
2213
2218
  /* functional template */
@@ -2545,14 +2550,24 @@ var script$y = {
2545
2550
  } else {
2546
2551
  return [];
2547
2552
  }
2553
+ },
2554
+ mapFields() {
2555
+ const {
2556
+ replaceFields = {}
2557
+ } = this.treeMeta;
2558
+ const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields;
2559
+ return mapFields;
2548
2560
  }
2549
2561
  },
2550
2562
  async created() {
2551
2563
  if (this.showTree) {
2552
2564
  this.treeData = await this.requestTreeData();
2553
2565
  const [defaultTreeNode = {}] = this.treeData;
2554
- this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]];
2555
- this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]];
2566
+ // const { replaceFields = {} } = this.treeMeta
2567
+ // const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields
2568
+ // console.log('replaceFields', this.replaceFields, replaceFields)
2569
+ this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]];
2570
+ this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]];
2556
2571
  this.currentTreeNodeData = defaultTreeNode;
2557
2572
  }
2558
2573
  const {
@@ -2826,8 +2841,7 @@ var __vue_render__$y = function () {
2826
2841
  "tree-data": _vm.treeData,
2827
2842
  defaultExpandedKeys: _vm.defaultExpandedKeys,
2828
2843
  defaultSelectedKeys: _vm.defaultSelectedKeys,
2829
- "replace-fields":
2830
- _vm.treeMeta.replaceFields || _vm.replaceFields,
2844
+ "replace-fields": _vm.mapFields,
2831
2845
  },
2832
2846
  on: { select: _vm.selectTreeNode },
2833
2847
  }),
@@ -2970,11 +2984,11 @@ __vue_render__$y._withStripped = true;
2970
2984
  /* style */
2971
2985
  const __vue_inject_styles__$y = function (inject) {
2972
2986
  if (!inject) return
2973
- inject("data-v-7ed5388a_0", { source: ".ele.model__tree-table[data-v-7ed5388a] {\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-7ed5388a] {\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-7ed5388a] {\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-7ed5388a] {\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-7ed5388a] {\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-7ed5388a] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-7ed5388a] {\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-7ed5388a] {\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":"AAqgBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACpgBA;ADsgBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACpgBA;ADugBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACrgBA;ADugBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACrgBA;ADugBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACrgBA;ADwgBA;EACA,gBAAA;ACtgBA;ADugBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACrgBA;ADwgBA;EACA,eAAA;EACA,kCAAA;ACtgBA;;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=\"treeMeta.replaceFields || replaceFields\">\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 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 :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 </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\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 }\r\n },\r\n computed: {\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 currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.currentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName] = (e) => {\r\n this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, 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.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 return {\r\n ...this.$listeners\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: 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 },\r\n async created () {\r\n if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n }\r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\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 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 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.currentTableSelection = selectedRows[0]\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n } else {\r\n this.currentTableSelection = selectedRows\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.currentTableSelection = type.isObject(props) ? props : {}\r\n } else {\r\n this.currentTableSelection = type.isArray(props) ? props : []\r\n }\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n },\r\n cleanCurrentModelEffect () {\r\n this.setCurrentTableSelection()\r\n this.setCurrentRowData({})\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.currentRowData = 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 handleClickButtonGroup (props) {\r\n const { eventName } = props\r\n this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n watchViewPort () {\r\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\r\n console.log(modelTableWrapper.getBoundingClientRect())\r\n const { top } = modelTableWrapper.getBoundingClientRect()\r\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\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 execTableFieldMap (fieldMap = {}, props) {\r\n let ret = {}\r\n const keys = Object.keys(fieldMap)\r\n keys.forEach(key => {\r\n const field = fieldMap[key]\r\n ret[field] = props[key]\r\n })\r\n return ret\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 const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)\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 const { pageSize = 10 } = page\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, 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.tableData = ret\r\n return ret\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n refreshTableStatus (props = {}) {},\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 },\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 }\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 });
2987
+ inject("data-v-728855fa_0", { source: ".ele.model__tree-table[data-v-728855fa] {\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-728855fa] {\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-728855fa] {\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-728855fa] {\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-728855fa] {\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-728855fa] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-728855fa] {\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-728855fa] {\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":"AA6gBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC5gBA;AD8gBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AC5gBA;AD+gBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC7gBA;AD+gBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC7gBA;AD+gBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC7gBA;ADghBA;EACA,gBAAA;AC9gBA;AD+gBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC7gBA;ADghBA;EACA,eAAA;EACA,kCAAA;AC9gBA;;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 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 :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 </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\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 }\r\n },\r\n computed: {\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 currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.currentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName] = (e) => {\r\n this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, 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.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 return {\r\n ...this.$listeners\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: 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 if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n // const { replaceFields = {} } = this.treeMeta\r\n // const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n // console.log('replaceFields', this.replaceFields, replaceFields)\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 const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\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 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 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.currentTableSelection = selectedRows[0]\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n } else {\r\n this.currentTableSelection = selectedRows\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.currentTableSelection = type.isObject(props) ? props : {}\r\n } else {\r\n this.currentTableSelection = type.isArray(props) ? props : []\r\n }\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n },\r\n cleanCurrentModelEffect () {\r\n this.setCurrentTableSelection()\r\n this.setCurrentRowData({})\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.currentRowData = 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 handleClickButtonGroup (props) {\r\n const { eventName } = props\r\n this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n watchViewPort () {\r\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\r\n console.log(modelTableWrapper.getBoundingClientRect())\r\n const { top } = modelTableWrapper.getBoundingClientRect()\r\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\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 execTableFieldMap (fieldMap = {}, props) {\r\n let ret = {}\r\n const keys = Object.keys(fieldMap)\r\n keys.forEach(key => {\r\n const field = fieldMap[key]\r\n ret[field] = props[key]\r\n })\r\n return ret\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 const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)\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 const { pageSize = 10 } = page\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, 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.tableData = ret\r\n return ret\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n refreshTableStatus (props = {}) {},\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 },\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 }\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 });
2974
2988
 
2975
2989
  };
2976
2990
  /* scoped */
2977
- const __vue_scope_id__$y = "data-v-7ed5388a";
2991
+ const __vue_scope_id__$y = "data-v-728855fa";
2978
2992
  /* module identifier */
2979
2993
  const __vue_module_identifier__$y = undefined;
2980
2994
  /* functional template */
package/dist/@idooel/components.umd.js CHANGED
@@ -2160,16 +2160,21 @@
2160
2160
  [
2161
2161
  {
2162
2162
  key: "title",
2163
- fn: function (ref) {
2164
- var title = ref.title;
2163
+ fn: function (props) {
2165
2164
  return [
2166
2165
  _c(
2167
2166
  "span",
2168
2167
  {
2169
2168
  staticClass: "tree-node__title",
2170
- attrs: { title: title },
2169
+ attrs: { title: props[_vm.replaceFields.title] },
2171
2170
  },
2172
- [_vm._v("\n " + _vm._s(title) + "\n ")]
2171
+ [
2172
+ _vm._v(
2173
+ "\n " +
2174
+ _vm._s(props[_vm.replaceFields.title]) +
2175
+ "\n "
2176
+ ),
2177
+ ]
2173
2178
  ),
2174
2179
  ]
2175
2180
  },
@@ -2186,7 +2191,7 @@
2186
2191
  ],
2187
2192
  null,
2188
2193
  false,
2189
- 729072655
2194
+ 1965669479
2190
2195
  ),
2191
2196
  },
2192
2197
  [
@@ -2210,11 +2215,11 @@
2210
2215
  /* style */
2211
2216
  const __vue_inject_styles__$z = function (inject) {
2212
2217
  if (!inject) return
2213
- inject("data-v-02dd33e4_0", { source: ".g-tree__wrapper[data-v-02dd33e4] {\n overflow: hidden;\n}\n.g-tree__wrapper[data-v-02dd33e4] .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper[data-v-02dd33e4] .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\tree\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwFA;EACA,gBAAA;ACvFA;ADyFA;EACA,uBAAA;EACA,gBAAA;EACA,mBAAA;ACvFA;ADyFA;EACA,WAAA;ACvFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-tree__wrapper\">\r\n <a-tree\r\n v-if=\"innerTreeData.length\"\r\n :tree-data=\"innerTreeData\"\r\n :checkable=\"checkable\"\r\n @select=\"selectTreeNode\"\r\n @check=\"checkTreeNode\"\r\n :replaceFields=\"replaceFields\"\r\n :default-expanded-keys=\"defaultExpandedKeys\"\r\n :default-selected-keys=\"defaultSelectedKeys\"\r\n :show-line=\"showLine\"\r\n blockNode \r\n :show-icon=\"showIcon\">\r\n <a-icon v-if=\"switcherIcon\" slot=\"switcherIcon\" :type=\"switcherIcon\" />\r\n <template #title=\"{ title }\">\r\n <span :title=\"title\" class=\"tree-node__title\">\r\n {{ title }}\r\n </span>\r\n </template>\r\n <template slot=\"custom\" slot-scope=\"{ scopedSlots }\">\r\n <a-icon :type=\"scopedSlots.iconName\"></a-icon>\r\n </template>\r\n </a-tree>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'ele-tree',\r\n props: {\r\n treeData: {\r\n type: Array,\r\n default: () => []\r\n },\r\n showLine: {\r\n type: Boolean,\r\n default: false\r\n },\r\n switcherIcon: {\r\n type: String\r\n },\r\n checkable: {\r\n type: Boolean,\r\n default: false\r\n },\r\n replaceFields: {\r\n type: Object,\r\n default: () => ({\r\n title: 'title',\r\n key: 'id',\r\n children: 'children'\r\n })\r\n },\r\n defaultExpandedKeys: {\r\n type: Array\r\n },\r\n defaultSelectedKeys: {\r\n type: Array\r\n },\r\n showIcon: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n computed: {\r\n innerTreeData () {\r\n return this.treeData\r\n }\r\n },\r\n methods: {\r\n checkTreeNode (checkedKeys, e) {\r\n const { checkedNodes } = e\r\n const nodeDatas = checkedNodes.map(item => item.data.props.dataRef)\r\n this.$emit('check', checkedKeys, nodeDatas)\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n selectTreeNode (selectedKeys, e) {\r\n this.$emit('select', selectedKeys, e)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-tree__wrapper {\r\n overflow: hidden;\r\n ::v-deep .ant-tree {\r\n .ant-tree-node-content-wrapper {\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n .ant-tree-node-selected {\r\n color: #fff;\r\n }\r\n }\r\n}\r\n</style>",".g-tree__wrapper {\n overflow: hidden;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
2218
+ inject("data-v-5aaaca72_0", { source: ".g-tree__wrapper[data-v-5aaaca72] {\n overflow: hidden;\n}\n.g-tree__wrapper[data-v-5aaaca72] .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper[data-v-5aaaca72] .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\tree\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwFA;EACA,gBAAA;ACvFA;ADyFA;EACA,uBAAA;EACA,gBAAA;EACA,mBAAA;ACvFA;ADyFA;EACA,WAAA;ACvFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-tree__wrapper\">\r\n <a-tree\r\n v-if=\"innerTreeData.length\"\r\n :tree-data=\"innerTreeData\"\r\n :checkable=\"checkable\"\r\n @select=\"selectTreeNode\"\r\n @check=\"checkTreeNode\"\r\n :replaceFields=\"replaceFields\"\r\n :default-expanded-keys=\"defaultExpandedKeys\"\r\n :default-selected-keys=\"defaultSelectedKeys\"\r\n :show-line=\"showLine\"\r\n blockNode \r\n :show-icon=\"showIcon\">\r\n <a-icon v-if=\"switcherIcon\" slot=\"switcherIcon\" :type=\"switcherIcon\" />\r\n <template #title=\"props\">\r\n <span :title=\"props[replaceFields.title]\" class=\"tree-node__title\">\r\n {{ props[replaceFields.title] }}\r\n </span>\r\n </template>\r\n <template slot=\"custom\" slot-scope=\"{ scopedSlots }\">\r\n <a-icon :type=\"scopedSlots.iconName\"></a-icon>\r\n </template>\r\n </a-tree>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'ele-tree',\r\n props: {\r\n treeData: {\r\n type: Array,\r\n default: () => []\r\n },\r\n showLine: {\r\n type: Boolean,\r\n default: false\r\n },\r\n switcherIcon: {\r\n type: String\r\n },\r\n checkable: {\r\n type: Boolean,\r\n default: false\r\n },\r\n replaceFields: {\r\n type: Object,\r\n default: () => ({\r\n title: 'title',\r\n key: 'id',\r\n children: 'children'\r\n })\r\n },\r\n defaultExpandedKeys: {\r\n type: Array\r\n },\r\n defaultSelectedKeys: {\r\n type: Array\r\n },\r\n showIcon: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n computed: {\r\n innerTreeData () {\r\n return this.treeData\r\n }\r\n },\r\n methods: {\r\n checkTreeNode (checkedKeys, e) {\r\n const { checkedNodes } = e\r\n const nodeDatas = checkedNodes.map(item => item.data.props.dataRef)\r\n this.$emit('check', checkedKeys, nodeDatas)\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n selectTreeNode (selectedKeys, e) {\r\n this.$emit('select', selectedKeys, e)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-tree__wrapper {\r\n overflow: hidden;\r\n ::v-deep .ant-tree {\r\n .ant-tree-node-content-wrapper {\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n .ant-tree-node-selected {\r\n color: #fff;\r\n }\r\n }\r\n}\r\n</style>",".g-tree__wrapper {\n overflow: hidden;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
2214
2219
 
2215
2220
  };
2216
2221
  /* scoped */
2217
- const __vue_scope_id__$z = "data-v-02dd33e4";
2222
+ const __vue_scope_id__$z = "data-v-5aaaca72";
2218
2223
  /* module identifier */
2219
2224
  const __vue_module_identifier__$z = undefined;
2220
2225
  /* functional template */
@@ -2552,14 +2557,24 @@
2552
2557
  } else {
2553
2558
  return [];
2554
2559
  }
2560
+ },
2561
+ mapFields() {
2562
+ const {
2563
+ replaceFields = {}
2564
+ } = this.treeMeta;
2565
+ const mapFields = shared.type.isEmpty(replaceFields) ? this.replaceFields : replaceFields;
2566
+ return mapFields;
2555
2567
  }
2556
2568
  },
2557
2569
  async created() {
2558
2570
  if (this.showTree) {
2559
2571
  this.treeData = await this.requestTreeData();
2560
2572
  const [defaultTreeNode = {}] = this.treeData;
2561
- this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]];
2562
- this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]];
2573
+ // const { replaceFields = {} } = this.treeMeta
2574
+ // const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields
2575
+ // console.log('replaceFields', this.replaceFields, replaceFields)
2576
+ this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]];
2577
+ this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]];
2563
2578
  this.currentTreeNodeData = defaultTreeNode;
2564
2579
  }
2565
2580
  const {
@@ -2833,8 +2848,7 @@
2833
2848
  "tree-data": _vm.treeData,
2834
2849
  defaultExpandedKeys: _vm.defaultExpandedKeys,
2835
2850
  defaultSelectedKeys: _vm.defaultSelectedKeys,
2836
- "replace-fields":
2837
- _vm.treeMeta.replaceFields || _vm.replaceFields,
2851
+ "replace-fields": _vm.mapFields,
2838
2852
  },
2839
2853
  on: { select: _vm.selectTreeNode },
2840
2854
  }),
@@ -2977,11 +2991,11 @@
2977
2991
  /* style */
2978
2992
  const __vue_inject_styles__$y = function (inject) {
2979
2993
  if (!inject) return
2980
- inject("data-v-7ed5388a_0", { source: ".ele.model__tree-table[data-v-7ed5388a] {\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-7ed5388a] {\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-7ed5388a] {\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-7ed5388a] {\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-7ed5388a] {\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-7ed5388a] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-7ed5388a] {\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-7ed5388a] {\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":"AAqgBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACpgBA;ADsgBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACpgBA;ADugBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACrgBA;ADugBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACrgBA;ADugBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACrgBA;ADwgBA;EACA,gBAAA;ACtgBA;ADugBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACrgBA;ADwgBA;EACA,eAAA;EACA,kCAAA;ACtgBA;;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=\"treeMeta.replaceFields || replaceFields\">\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 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 :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 </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\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 }\r\n },\r\n computed: {\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 currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.currentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName] = (e) => {\r\n this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, 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.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 return {\r\n ...this.$listeners\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: 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 },\r\n async created () {\r\n if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n }\r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\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 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 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.currentTableSelection = selectedRows[0]\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n } else {\r\n this.currentTableSelection = selectedRows\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.currentTableSelection = type.isObject(props) ? props : {}\r\n } else {\r\n this.currentTableSelection = type.isArray(props) ? props : []\r\n }\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n },\r\n cleanCurrentModelEffect () {\r\n this.setCurrentTableSelection()\r\n this.setCurrentRowData({})\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.currentRowData = 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 handleClickButtonGroup (props) {\r\n const { eventName } = props\r\n this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n watchViewPort () {\r\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\r\n console.log(modelTableWrapper.getBoundingClientRect())\r\n const { top } = modelTableWrapper.getBoundingClientRect()\r\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\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 execTableFieldMap (fieldMap = {}, props) {\r\n let ret = {}\r\n const keys = Object.keys(fieldMap)\r\n keys.forEach(key => {\r\n const field = fieldMap[key]\r\n ret[field] = props[key]\r\n })\r\n return ret\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 const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)\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 const { pageSize = 10 } = page\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, 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.tableData = ret\r\n return ret\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n refreshTableStatus (props = {}) {},\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 },\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 }\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 });
2994
+ inject("data-v-728855fa_0", { source: ".ele.model__tree-table[data-v-728855fa] {\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-728855fa] {\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-728855fa] {\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-728855fa] {\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-728855fa] {\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-728855fa] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-728855fa] {\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-728855fa] {\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":"AA6gBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC5gBA;AD8gBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AC5gBA;AD+gBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC7gBA;AD+gBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC7gBA;AD+gBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC7gBA;ADghBA;EACA,gBAAA;AC9gBA;AD+gBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC7gBA;ADghBA;EACA,eAAA;EACA,kCAAA;AC9gBA;;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 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 :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 </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\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 }\r\n },\r\n computed: {\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 currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.currentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName] = (e) => {\r\n this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, 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.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 return {\r\n ...this.$listeners\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: 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 if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n // const { replaceFields = {} } = this.treeMeta\r\n // const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n // console.log('replaceFields', this.replaceFields, replaceFields)\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 const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\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 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 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.currentTableSelection = selectedRows[0]\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n } else {\r\n this.currentTableSelection = selectedRows\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.currentTableSelection = type.isObject(props) ? props : {}\r\n } else {\r\n this.currentTableSelection = type.isArray(props) ? props : []\r\n }\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n },\r\n cleanCurrentModelEffect () {\r\n this.setCurrentTableSelection()\r\n this.setCurrentRowData({})\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.currentRowData = 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 handleClickButtonGroup (props) {\r\n const { eventName } = props\r\n this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n watchViewPort () {\r\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\r\n console.log(modelTableWrapper.getBoundingClientRect())\r\n const { top } = modelTableWrapper.getBoundingClientRect()\r\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\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 execTableFieldMap (fieldMap = {}, props) {\r\n let ret = {}\r\n const keys = Object.keys(fieldMap)\r\n keys.forEach(key => {\r\n const field = fieldMap[key]\r\n ret[field] = props[key]\r\n })\r\n return ret\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 const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)\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 const { pageSize = 10 } = page\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, 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.tableData = ret\r\n return ret\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n refreshTableStatus (props = {}) {},\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 },\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 }\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 });
2981
2995
 
2982
2996
  };
2983
2997
  /* scoped */
2984
- const __vue_scope_id__$y = "data-v-7ed5388a";
2998
+ const __vue_scope_id__$y = "data-v-728855fa";
2985
2999
  /* module identifier */
2986
3000
  const __vue_module_identifier__$y = undefined;
2987
3001
  /* functional template */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idooel/components",
3
- "version": "0.0.1-beta.79",
3
+ "version": "0.0.1-beta.80",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "main": "dist/@idooel/components.umd.js",
package/packages/models/tree-table-model/src/index.vue CHANGED
@@ -8,7 +8,7 @@
8
8
  :defaultExpandedKeys="defaultExpandedKeys"
9
9
  :defaultSelectedKeys="defaultSelectedKeys"
10
10
  @select="selectTreeNode"
11
- :replace-fields="treeMeta.replaceFields || replaceFields">
11
+ :replace-fields="mapFields">
12
12
  </ele-tree>
13
13
  </section>
14
14
  </section>
@@ -318,14 +318,22 @@ export default {
318
318
  } else {
319
319
  return []
320
320
  }
321
+ },
322
+ mapFields () {
323
+ const { replaceFields = {} } = this.treeMeta
324
+ const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields
325
+ return mapFields
321
326
  }
322
327
  },
323
328
  async created () {
324
329
  if (this.showTree) {
325
330
  this.treeData = await this.requestTreeData()
326
331
  const [defaultTreeNode = {}] = this.treeData
327
- this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]
328
- this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]
332
+ // const { replaceFields = {} } = this.treeMeta
333
+ // const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields
334
+ // console.log('replaceFields', this.replaceFields, replaceFields)
335
+ this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]
336
+ this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]
329
337
  this.currentTreeNodeData = defaultTreeNode
330
338
  }
331
339
  const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta
package/packages/tree/src/index.vue CHANGED
@@ -13,9 +13,9 @@
13
13
  blockNode
14
14
  :show-icon="showIcon">
15
15
  <a-icon v-if="switcherIcon" slot="switcherIcon" :type="switcherIcon" />
16
- <template #title="{ title }">
17
- <span :title="title" class="tree-node__title">
18
- {{ title }}
16
+ <template #title="props">
17
+ <span :title="props[replaceFields.title]" class="tree-node__title">
18
+ {{ props[replaceFields.title] }}
19
19
  </span>
20
20
  </template>
21
21
  <template slot="custom" slot-scope="{ scopedSlots }">