@idooel/components 0.0.1-beta.77 → 0.0.1-beta.78
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.
|
@@ -2385,7 +2385,8 @@ var script$y = {
|
|
|
2385
2385
|
return {
|
|
2386
2386
|
...this.$listeners,
|
|
2387
2387
|
...events,
|
|
2388
|
-
[BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT]
|
|
2388
|
+
[BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],
|
|
2389
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]
|
|
2389
2390
|
};
|
|
2390
2391
|
},
|
|
2391
2392
|
overrideModalFormEvent() {
|
|
@@ -2598,6 +2599,14 @@ var script$y = {
|
|
|
2598
2599
|
setCurrentRowData(props = {}) {
|
|
2599
2600
|
this.currentRowData = props;
|
|
2600
2601
|
},
|
|
2602
|
+
cleanCurrentModelEffect() {
|
|
2603
|
+
this.setCurrentTableSelection();
|
|
2604
|
+
this.setCurrentRowData({});
|
|
2605
|
+
},
|
|
2606
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
|
|
2607
|
+
this.cleanCurrentModelEffect();
|
|
2608
|
+
this.requestTableData();
|
|
2609
|
+
},
|
|
2601
2610
|
[BUILT_IN_EVENT_NAMES.EDIT](props = {}) {
|
|
2602
2611
|
const {
|
|
2603
2612
|
record = {}
|
|
@@ -2941,11 +2950,11 @@ __vue_render__$y._withStripped = true;
|
|
|
2941
2950
|
/* style */
|
|
2942
2951
|
const __vue_inject_styles__$y = function (inject) {
|
|
2943
2952
|
if (!inject) return
|
|
2944
|
-
inject("data-v-392fecc2_0", { source: ".ele.model__tree-table[data-v-392fecc2] {\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-392fecc2] {\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-392fecc2] {\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-392fecc2] {\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-392fecc2] {\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-392fecc2] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-392fecc2] {\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-392fecc2] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAwfA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACvfA;ADyfA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACvfA;AD0fA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACxfA;AD0fA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACxfA;AD0fA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACxfA;AD2fA;EACA,gBAAA;ACzfA;AD0fA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACxfA;AD2fA;EACA,eAAA;EACA,kCAAA;ACzfA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <section class=\"ele model__tree-table\">\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\n <div class=\"model__tree--title\"></div>\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n <ele-tree\n :tree-data=\"treeData\"\n :defaultExpandedKeys=\"defaultExpandedKeys\"\n :defaultSelectedKeys=\"defaultSelectedKeys\"\n @select=\"selectTreeNode\"\n :replace-fields=\"treeMeta.replaceFields || replaceFields\">\n </ele-tree>\n </section>\n </section>\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n <div class=\"model__table--title\" v-if=\"title\">\n <template v-if=\"titleMode\">\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n </template>\n <template v-else>\n <div class=\"model__table-title--text\">{{ title }}</div>\n </template>\n </div>\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n <div class=\"button-row__area\">\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n <slot name=\"tags\"></slot>\n <slot name=\"sub-center\"></slot>\n </div>\n <ele-table\n v-on=\"overrideTableEvent\"\n :ref=\"tableRef\"\n :row-selection=\"rowSelection\"\n :loading=\"loading\" \n :columns=\"columns\"\n :total=\"total\"\n :x=\"x\"\n :y=\"y\"\n :height=\"tableHeight\"\n :width=\"tableWidth\"\n :actions=\"actions\"\n :pageSize=\"pageSize\"\n :pageSizeOptions=\"pageSizeOptions\"\n :data-source=\"tableData\"\n @change-page=\"onChangePage\"\n ></ele-table>\n </section>\n </section>\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n </section>\n</template>\n\n<script>\nimport { type, net } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n name: 'ele-tree-table-model',\n props: {\n title: {\n type: [Object, String]\n },\n overHeight: {\n type: Number,\n default: 0\n },\n treeMeta: {\n type: Object,\n default: () => ({})\n },\n searchMeta: {\n type: Object,\n default: () => ({})\n },\n buttonGroupMeta: {\n typeof: Object,\n default: () => ({})\n },\n tableMeta: {\n type: Object,\n default: () => ({})\n },\n createMeta: {\n type: Object\n },\n editMeta: {\n type: Object\n }\n },\n provide () {\n return {\n requestTreeData: this.requestTreeData,\n requestTableData: this.requestTableData,\n [CONTEXT]: () => {\n return {\n exposed: { ...this.exposed }\n }\n }\n }\n },\n data () {\n return {\n tableHeight: 0,\n tableWidth: 0,\n modalFormMeta: {},\n modalFormValue: false,\n treeData: [],\n tableData: [],\n defaultExpandedKeys: [],\n defaultSelectedKeys: [],\n replaceFields: {\n title: 'title',\n children: 'children',\n key: 'id'\n },\n loading: false,\n total: 0,\n tableQuerys: {},\n resizeObserverModelTableWrapper: null,\n modelTableWrapperHeight: 0,\n currentTreeNodeData: {},\n currentRowData: {},\n treeWrapperHeight: 0,\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n showFsmModal: false,\n fsmMeta: {},\n fsmContextProp: {}\n }\n },\n computed: {\n rowSelection () {\n if (!this.currentTableMode) return void 0\n return {\n columnTitle: this.currentSelectionColumn.columnTitle,\n fixed: true,\n type: this.currentTableMode,\n onChange: this.onChangeTableSelection\n }\n },\n currentSelectionColumn () {\n const { multiple } = this.tableMeta\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n if (target) {\n return target\n } else if (isGlobalExistMultiple) {\n return { multiple }\n }\n return void 0\n },\n x () {\n const { x } = this.tableMeta\n return x\n },\n y () {\n const { y } = this.tableMeta\n return y\n },\n currentTableMode () {\n if (!this.currentSelectionColumn) return void 0\n const { multiple } = this.currentSelectionColumn\n if (type.isBool(multiple)) {\n if (multiple) {\n return 'checkbox'\n } else {\n return 'radio'\n }\n } else {\n return void 0\n }\n },\n modelTableContainerRef () {\n return uuidv4()\n },\n titleMode () {\n if (type.isObject(this.title)) {\n const { mode = '' } = this.title\n return mode\n }\n return void 0\n },\n tableRef () {\n return uuidv4()\n },\n exposed () {\n return {\n currentTableSelection: this.currentTableSelection,\n currentTreeNode: this.currentTreeNodeData,\n requestTableData: this.requestTableData,\n querys: this.tableQuerys,\n currentRowData: this.currentRowData,\n setCurrentRowData: this.setCurrentRowData,\n setCurrentTableSelection: this.setCurrentTableSelection\n }\n },\n overrideTableEvent () {\n const events = this.actions.reduce((ret, action) => {\n ret[action.eventName] = (e) => {\n this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT]\n }\n },\n overrideModalFormEvent () {\n return {\n ...this.$listeners\n }\n },\n overrideButtonGroupEvent () {\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE]\n }\n },\n showTree () {\n return !!Object.keys(this.treeMeta).length\n },\n buttonGroup () {\n return uuidv4()\n },\n searchArea () {\n return uuidv4()\n },\n modelTreeWrapper () {\n return uuidv4()\n },\n modelTableWrapper () {\n return uuidv4()\n },\n actions () {\n const { operations } = this.tableMeta\n if (operations) {\n return operations.elements\n } else {\n return []\n }\n },\n pageSize () {\n const { page = {} } = this.tableMeta\n return page.pageSize || 10\n },\n pageSizeOptions () {\n const { page = {} } = this.tableMeta\n return page.pageSizeOptions || ['10', '20', '30', '40']\n },\n columns () {\n const { columns, operations } = this.tableMeta\n if (type.get(columns) === 'array') {\n const columnsOptions = columns.map(item => {\n const { mode = 'text' } = item\n if (item.render) {\n return {\n ...item,\n customRender: (text, record, index) => {\n const { $createElement } = this\n return item.render.call(this, \n { h: $createElement, ctx: this },\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n record, index)\n }\n }\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n const { [`${mode}Meta`]: modeMeta } = item\n return {\n ...item,\n customRender: (text, record, index) => {\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n }\n }\n }\n return {\n ...item\n }\n })\n if (operations) {\n return [\n ...columnsOptions,\n {\n title: '操作',\n width: operations.width,\n key: 'action',\n fixed: 'right',\n scopedSlots: { customRender: 'action' }\n }\n ]\n }\n return columnsOptions\n } else {\n console.error('Error: columns is invalid, please check it')\n return []\n }\n },\n getButtonGroupElements () {\n const { elements } = this.buttonGroupMeta\n if (type.get(elements) === 'function') {\n return elements.call(this)\n } else if (type.get(elements) === 'array') {\n return elements\n } else {\n return []\n }\n }\n },\n async created () {\n if (this.showTree) {\n this.treeData = await this.requestTreeData()\n const [defaultTreeNode = {}] = this.treeData\n this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]\n this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]\n this.currentTreeNodeData = defaultTreeNode\n }\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(initQuerys)\n }\n },\n methods: {\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n switch (mode) {\n case BUILT_IN_TRIGGER.FSM:\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = { \n url: 'api-fsm/workbench/fsm/auditFlow',\n requestType: 'GET',\n fieldMap: {\n modelCode: 'modelCode',\n businessId: 'businessId'\n }\n })\n break\n default:\n break\n }\n },\n handleCloseFsmModal () {\n this.showFsmModal = false\n },\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n this.fsmMeta = meta\n this.fsmContextProp = record\n this.showFsmModal = true\n },\n onChangeTableSelection (_, selectedRows = []) {\n if (this.currentTableMode === 'radio') {\n this.currentTableSelection = selectedRows[0]\n this.$emit('on-change-table-selection', this.currentTableSelection)\n } else {\n this.currentTableSelection = selectedRows\n this.$emit('on-change-table-selection', this.currentTableSelection)\n }\n },\n setCurrentTableSelection (props = {}) {\n if (this.currentTableMode === 'radio') {\n this.currentTableSelection = type.isObject(props) ? props : {}\n } else {\n this.currentTableSelection = type.isArray(props) ? props : []\n }\n },\n setCurrentRowData (props = {}) {\n this.currentRowData = props\n },\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n const { record = {} } = props\n this.currentRowData = record\n this.modalFormMeta = this.editMeta\n this.modalFormValue = true\n },\n [BUILT_IN_EVENT_NAMES.CREATE] () {\n this.modalFormMeta = this.createMeta\n this.modalFormValue = true\n },\n handleClickButtonGroup (props) {\n const { eventName } = props\n this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })\n },\n watchViewPort () {\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\n console.log(modelTableWrapper.getBoundingClientRect())\n const { top } = modelTableWrapper.getBoundingClientRect()\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n },\n async onSearch (props) {\n const { overrideInit = false } = this.tableMeta\n this.tableQuerys = Object.assign(this.tableQuerys, props)\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData()\n }\n },\n execTableFieldMap (fieldMap = {}, props) {\n let ret = {}\n const keys = Object.keys(fieldMap)\n keys.forEach(key => {\n const field = fieldMap[key]\n ret[field] = props[key]\n })\n return ret\n },\n async selectTreeNode (selectedKeys, e) {\n const { fieldMap } = this.tableMeta\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef\n const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)\n const { overrideInit = false } = this.tableMeta\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(execFieldMapRet)\n }\n },\n async requestTreeData () {\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n const ret = await net[requestType.toLowerCase()](\n url,\n { ...params, ...fieldMapRet }\n ).then(resp => {\n const { data } = resp || {}\n return data\n })\n return ret\n },\n async onChangePage (page, pageSize) {\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n },\n async requestTableData (props = {}) {\n const { url, requestType = 'GET', page = {} } = this.tableMeta\n const { pageSize = 10 } = page\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n this.loading = true\n const ret = await net[requestType.toLowerCase()](\n url,\n this.tableQuerys\n ).then(resp => {\n const { data = [], count } = resp || {}\n this.total = count\n this.loading = false\n return (data || []).map(item => {\n delete item.children\n return {\n key: uuidv4(),\n ...item\n }\n })\n })\n this.tableData = ret\n return ret\n },\n refreshTreeStatus (props = {}) {},\n refreshTableStatus (props = {}) {},\n calculateTableHeight () {\n const currentViewportHeight = window.innerHeight\n const tableRef = this.$refs[this.tableRef]\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n this.tableWidth = width\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n },\n calculateTreeHeight () {\n if (!this.showTree) return\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n const { height } = modelTableContainerRef.getBoundingClientRect()\n this.treeWrapperHeight = height\n }\n },\n mounted () {\n this.calculateTableHeight()\n this.$nextTick(() => {\n this.calculateTreeHeight()\n })\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n for (const _ of entries) {\n requestAnimationFrame(() => {\n this.calculateTableHeight()\n })\n }\n })\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n },\n destroyed () {\n this.resizeObserverModelTableWrapper.disconnect()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.model__tree-table {\n background: transparent; \n display: flex;\n flex-direction: row;\n width: 100%;\n .model__tree-table--container {\n .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 }\n .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n .model__table--title {\n .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 .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 }\n .model__table--wrapper {\n background: #fff;\n .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 .g-table__wrapper {\n .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n }\n }\n }\n }\n }\n}\n</style>\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 });
|
|
2953
|
+
inject("data-v-5df5d493_0", { source: ".ele.model__tree-table[data-v-5df5d493] {\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-5df5d493] {\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-5df5d493] {\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-5df5d493] {\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-5df5d493] {\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-5df5d493] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-5df5d493] {\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-5df5d493] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAigBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AChgBA;ADkgBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AChgBA;ADmgBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACjgBA;ADmgBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACjgBA;ADmgBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACjgBA;ADogBA;EACA,gBAAA;AClgBA;ADmgBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACjgBA;ADogBA;EACA,eAAA;EACA,kCAAA;AClgBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <section class=\"ele model__tree-table\">\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\n <div class=\"model__tree--title\"></div>\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n <ele-tree\n :tree-data=\"treeData\"\n :defaultExpandedKeys=\"defaultExpandedKeys\"\n :defaultSelectedKeys=\"defaultSelectedKeys\"\n @select=\"selectTreeNode\"\n :replace-fields=\"treeMeta.replaceFields || replaceFields\">\n </ele-tree>\n </section>\n </section>\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n <div class=\"model__table--title\" v-if=\"title\">\n <template v-if=\"titleMode\">\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n </template>\n <template v-else>\n <div class=\"model__table-title--text\">{{ title }}</div>\n </template>\n </div>\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n <div class=\"button-row__area\">\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n <slot name=\"tags\"></slot>\n <slot name=\"sub-center\"></slot>\n </div>\n <ele-table\n v-on=\"overrideTableEvent\"\n :ref=\"tableRef\"\n :row-selection=\"rowSelection\"\n :loading=\"loading\" \n :columns=\"columns\"\n :total=\"total\"\n :x=\"x\"\n :y=\"y\"\n :height=\"tableHeight\"\n :width=\"tableWidth\"\n :actions=\"actions\"\n :pageSize=\"pageSize\"\n :pageSizeOptions=\"pageSizeOptions\"\n :data-source=\"tableData\"\n @change-page=\"onChangePage\"\n ></ele-table>\n </section>\n </section>\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n </section>\n</template>\n\n<script>\nimport { type, net } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n name: 'ele-tree-table-model',\n props: {\n title: {\n type: [Object, String]\n },\n overHeight: {\n type: Number,\n default: 0\n },\n treeMeta: {\n type: Object,\n default: () => ({})\n },\n searchMeta: {\n type: Object,\n default: () => ({})\n },\n buttonGroupMeta: {\n typeof: Object,\n default: () => ({})\n },\n tableMeta: {\n type: Object,\n default: () => ({})\n },\n createMeta: {\n type: Object\n },\n editMeta: {\n type: Object\n }\n },\n provide () {\n return {\n requestTreeData: this.requestTreeData,\n requestTableData: this.requestTableData,\n [CONTEXT]: () => {\n return {\n exposed: { ...this.exposed }\n }\n }\n }\n },\n data () {\n return {\n tableHeight: 0,\n tableWidth: 0,\n modalFormMeta: {},\n modalFormValue: false,\n treeData: [],\n tableData: [],\n defaultExpandedKeys: [],\n defaultSelectedKeys: [],\n replaceFields: {\n title: 'title',\n children: 'children',\n key: 'id'\n },\n loading: false,\n total: 0,\n tableQuerys: {},\n resizeObserverModelTableWrapper: null,\n modelTableWrapperHeight: 0,\n currentTreeNodeData: {},\n currentRowData: {},\n treeWrapperHeight: 0,\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n showFsmModal: false,\n fsmMeta: {},\n fsmContextProp: {}\n }\n },\n computed: {\n rowSelection () {\n if (!this.currentTableMode) return void 0\n return {\n columnTitle: this.currentSelectionColumn.columnTitle,\n fixed: true,\n type: this.currentTableMode,\n onChange: this.onChangeTableSelection\n }\n },\n currentSelectionColumn () {\n const { multiple } = this.tableMeta\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n if (target) {\n return target\n } else if (isGlobalExistMultiple) {\n return { multiple }\n }\n return void 0\n },\n x () {\n const { x } = this.tableMeta\n return x\n },\n y () {\n const { y } = this.tableMeta\n return y\n },\n currentTableMode () {\n if (!this.currentSelectionColumn) return void 0\n const { multiple } = this.currentSelectionColumn\n if (type.isBool(multiple)) {\n if (multiple) {\n return 'checkbox'\n } else {\n return 'radio'\n }\n } else {\n return void 0\n }\n },\n modelTableContainerRef () {\n return uuidv4()\n },\n titleMode () {\n if (type.isObject(this.title)) {\n const { mode = '' } = this.title\n return mode\n }\n return void 0\n },\n tableRef () {\n return uuidv4()\n },\n exposed () {\n return {\n currentTableSelection: this.currentTableSelection,\n currentTreeNode: this.currentTreeNodeData,\n requestTableData: this.requestTableData,\n querys: this.tableQuerys,\n currentRowData: this.currentRowData,\n setCurrentRowData: this.setCurrentRowData,\n setCurrentTableSelection: this.setCurrentTableSelection\n }\n },\n overrideTableEvent () {\n const events = this.actions.reduce((ret, action) => {\n ret[action.eventName] = (e) => {\n this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\n }\n },\n overrideModalFormEvent () {\n return {\n ...this.$listeners\n }\n },\n overrideButtonGroupEvent () {\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE]\n }\n },\n showTree () {\n return !!Object.keys(this.treeMeta).length\n },\n buttonGroup () {\n return uuidv4()\n },\n searchArea () {\n return uuidv4()\n },\n modelTreeWrapper () {\n return uuidv4()\n },\n modelTableWrapper () {\n return uuidv4()\n },\n actions () {\n const { operations } = this.tableMeta\n if (operations) {\n return operations.elements\n } else {\n return []\n }\n },\n pageSize () {\n const { page = {} } = this.tableMeta\n return page.pageSize || 10\n },\n pageSizeOptions () {\n const { page = {} } = this.tableMeta\n return page.pageSizeOptions || ['10', '20', '30', '40']\n },\n columns () {\n const { columns, operations } = this.tableMeta\n if (type.get(columns) === 'array') {\n const columnsOptions = columns.map(item => {\n const { mode = 'text' } = item\n if (item.render) {\n return {\n ...item,\n customRender: (text, record, index) => {\n const { $createElement } = this\n return item.render.call(this, \n { h: $createElement, ctx: this },\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n record, index)\n }\n }\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n const { [`${mode}Meta`]: modeMeta } = item\n return {\n ...item,\n customRender: (text, record, index) => {\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n }\n }\n }\n return {\n ...item\n }\n })\n if (operations) {\n return [\n ...columnsOptions,\n {\n title: '操作',\n width: operations.width,\n key: 'action',\n fixed: 'right',\n scopedSlots: { customRender: 'action' }\n }\n ]\n }\n return columnsOptions\n } else {\n console.error('Error: columns is invalid, please check it')\n return []\n }\n },\n getButtonGroupElements () {\n const { elements } = this.buttonGroupMeta\n if (type.get(elements) === 'function') {\n return elements.call(this)\n } else if (type.get(elements) === 'array') {\n return elements\n } else {\n return []\n }\n }\n },\n async created () {\n if (this.showTree) {\n this.treeData = await this.requestTreeData()\n const [defaultTreeNode = {}] = this.treeData\n this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]\n this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]\n this.currentTreeNodeData = defaultTreeNode\n }\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(initQuerys)\n }\n },\n methods: {\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n switch (mode) {\n case BUILT_IN_TRIGGER.FSM:\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = { \n url: 'api-fsm/workbench/fsm/auditFlow',\n requestType: 'GET',\n fieldMap: {\n modelCode: 'modelCode',\n businessId: 'businessId'\n }\n })\n break\n default:\n break\n }\n },\n handleCloseFsmModal () {\n this.showFsmModal = false\n },\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n this.fsmMeta = meta\n this.fsmContextProp = record\n this.showFsmModal = true\n },\n onChangeTableSelection (_, selectedRows = []) {\n if (this.currentTableMode === 'radio') {\n this.currentTableSelection = selectedRows[0]\n this.$emit('on-change-table-selection', this.currentTableSelection)\n } else {\n this.currentTableSelection = selectedRows\n this.$emit('on-change-table-selection', this.currentTableSelection)\n }\n },\n setCurrentTableSelection (props = {}) {\n if (this.currentTableMode === 'radio') {\n this.currentTableSelection = type.isObject(props) ? props : {}\n } else {\n this.currentTableSelection = type.isArray(props) ? props : []\n }\n },\n setCurrentRowData (props = {}) {\n this.currentRowData = props\n },\n cleanCurrentModelEffect () {\n this.setCurrentTableSelection()\n this.setCurrentRowData({})\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n this.cleanCurrentModelEffect()\n this.requestTableData()\n },\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n const { record = {} } = props\n this.currentRowData = record\n this.modalFormMeta = this.editMeta\n this.modalFormValue = true\n },\n [BUILT_IN_EVENT_NAMES.CREATE] () {\n this.modalFormMeta = this.createMeta\n this.modalFormValue = true\n },\n handleClickButtonGroup (props) {\n const { eventName } = props\n this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })\n },\n watchViewPort () {\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\n console.log(modelTableWrapper.getBoundingClientRect())\n const { top } = modelTableWrapper.getBoundingClientRect()\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n },\n async onSearch (props) {\n const { overrideInit = false } = this.tableMeta\n this.tableQuerys = Object.assign(this.tableQuerys, props)\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData()\n }\n },\n execTableFieldMap (fieldMap = {}, props) {\n let ret = {}\n const keys = Object.keys(fieldMap)\n keys.forEach(key => {\n const field = fieldMap[key]\n ret[field] = props[key]\n })\n return ret\n },\n async selectTreeNode (selectedKeys, e) {\n const { fieldMap } = this.tableMeta\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef\n const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)\n const { overrideInit = false } = this.tableMeta\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(execFieldMapRet)\n }\n },\n async requestTreeData () {\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n const ret = await net[requestType.toLowerCase()](\n url,\n { ...params, ...fieldMapRet }\n ).then(resp => {\n const { data } = resp || {}\n return data\n })\n return ret\n },\n async onChangePage (page, pageSize) {\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n },\n async requestTableData (props = {}) {\n const { url, requestType = 'GET', page = {} } = this.tableMeta\n const { pageSize = 10 } = page\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n this.loading = true\n const ret = await net[requestType.toLowerCase()](\n url,\n this.tableQuerys\n ).then(resp => {\n const { data = [], count } = resp || {}\n this.total = count\n this.loading = false\n return (data || []).map(item => {\n delete item.children\n return {\n key: uuidv4(),\n ...item\n }\n })\n })\n this.tableData = ret\n return ret\n },\n refreshTreeStatus (props = {}) {},\n refreshTableStatus (props = {}) {},\n calculateTableHeight () {\n const currentViewportHeight = window.innerHeight\n const tableRef = this.$refs[this.tableRef]\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n this.tableWidth = width\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n },\n calculateTreeHeight () {\n if (!this.showTree) return\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n const { height } = modelTableContainerRef.getBoundingClientRect()\n this.treeWrapperHeight = height\n }\n },\n mounted () {\n this.calculateTableHeight()\n this.$nextTick(() => {\n this.calculateTreeHeight()\n })\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n for (const _ of entries) {\n requestAnimationFrame(() => {\n this.calculateTableHeight()\n })\n }\n })\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n },\n destroyed () {\n this.resizeObserverModelTableWrapper.disconnect()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.model__tree-table {\n background: transparent; \n display: flex;\n flex-direction: row;\n width: 100%;\n .model__tree-table--container {\n .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 }\n .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n .model__table--title {\n .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 .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 }\n .model__table--wrapper {\n background: #fff;\n .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 .g-table__wrapper {\n .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n }\n }\n }\n }\n }\n}\n</style>\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 });
|
|
2945
2954
|
|
|
2946
2955
|
};
|
|
2947
2956
|
/* scoped */
|
|
2948
|
-
const __vue_scope_id__$y = "data-v-
|
|
2957
|
+
const __vue_scope_id__$y = "data-v-5df5d493";
|
|
2949
2958
|
/* module identifier */
|
|
2950
2959
|
const __vue_module_identifier__$y = undefined;
|
|
2951
2960
|
/* functional template */
|
|
@@ -12073,6 +12082,7 @@ var script$8 = {
|
|
|
12073
12082
|
}, {
|
|
12074
12083
|
...headers
|
|
12075
12084
|
});
|
|
12085
|
+
this.setFieldsValue(data);
|
|
12076
12086
|
this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, {
|
|
12077
12087
|
...data
|
|
12078
12088
|
});
|
|
@@ -2392,7 +2392,8 @@
|
|
|
2392
2392
|
return {
|
|
2393
2393
|
...this.$listeners,
|
|
2394
2394
|
...events,
|
|
2395
|
-
[BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT]
|
|
2395
|
+
[BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],
|
|
2396
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]
|
|
2396
2397
|
};
|
|
2397
2398
|
},
|
|
2398
2399
|
overrideModalFormEvent() {
|
|
@@ -2605,6 +2606,14 @@
|
|
|
2605
2606
|
setCurrentRowData(props = {}) {
|
|
2606
2607
|
this.currentRowData = props;
|
|
2607
2608
|
},
|
|
2609
|
+
cleanCurrentModelEffect() {
|
|
2610
|
+
this.setCurrentTableSelection();
|
|
2611
|
+
this.setCurrentRowData({});
|
|
2612
|
+
},
|
|
2613
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
|
|
2614
|
+
this.cleanCurrentModelEffect();
|
|
2615
|
+
this.requestTableData();
|
|
2616
|
+
},
|
|
2608
2617
|
[BUILT_IN_EVENT_NAMES.EDIT](props = {}) {
|
|
2609
2618
|
const {
|
|
2610
2619
|
record = {}
|
|
@@ -2948,11 +2957,11 @@
|
|
|
2948
2957
|
/* style */
|
|
2949
2958
|
const __vue_inject_styles__$y = function (inject) {
|
|
2950
2959
|
if (!inject) return
|
|
2951
|
-
inject("data-v-392fecc2_0", { source: ".ele.model__tree-table[data-v-392fecc2] {\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-392fecc2] {\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-392fecc2] {\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-392fecc2] {\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-392fecc2] {\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-392fecc2] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-392fecc2] {\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-392fecc2] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAwfA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACvfA;ADyfA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACvfA;AD0fA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACxfA;AD0fA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACxfA;AD0fA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACxfA;AD2fA;EACA,gBAAA;ACzfA;AD0fA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACxfA;AD2fA;EACA,eAAA;EACA,kCAAA;ACzfA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <section class=\"ele model__tree-table\">\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\n <div class=\"model__tree--title\"></div>\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n <ele-tree\n :tree-data=\"treeData\"\n :defaultExpandedKeys=\"defaultExpandedKeys\"\n :defaultSelectedKeys=\"defaultSelectedKeys\"\n @select=\"selectTreeNode\"\n :replace-fields=\"treeMeta.replaceFields || replaceFields\">\n </ele-tree>\n </section>\n </section>\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n <div class=\"model__table--title\" v-if=\"title\">\n <template v-if=\"titleMode\">\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n </template>\n <template v-else>\n <div class=\"model__table-title--text\">{{ title }}</div>\n </template>\n </div>\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n <div class=\"button-row__area\">\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n <slot name=\"tags\"></slot>\n <slot name=\"sub-center\"></slot>\n </div>\n <ele-table\n v-on=\"overrideTableEvent\"\n :ref=\"tableRef\"\n :row-selection=\"rowSelection\"\n :loading=\"loading\" \n :columns=\"columns\"\n :total=\"total\"\n :x=\"x\"\n :y=\"y\"\n :height=\"tableHeight\"\n :width=\"tableWidth\"\n :actions=\"actions\"\n :pageSize=\"pageSize\"\n :pageSizeOptions=\"pageSizeOptions\"\n :data-source=\"tableData\"\n @change-page=\"onChangePage\"\n ></ele-table>\n </section>\n </section>\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n </section>\n</template>\n\n<script>\nimport { type, net } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n name: 'ele-tree-table-model',\n props: {\n title: {\n type: [Object, String]\n },\n overHeight: {\n type: Number,\n default: 0\n },\n treeMeta: {\n type: Object,\n default: () => ({})\n },\n searchMeta: {\n type: Object,\n default: () => ({})\n },\n buttonGroupMeta: {\n typeof: Object,\n default: () => ({})\n },\n tableMeta: {\n type: Object,\n default: () => ({})\n },\n createMeta: {\n type: Object\n },\n editMeta: {\n type: Object\n }\n },\n provide () {\n return {\n requestTreeData: this.requestTreeData,\n requestTableData: this.requestTableData,\n [CONTEXT]: () => {\n return {\n exposed: { ...this.exposed }\n }\n }\n }\n },\n data () {\n return {\n tableHeight: 0,\n tableWidth: 0,\n modalFormMeta: {},\n modalFormValue: false,\n treeData: [],\n tableData: [],\n defaultExpandedKeys: [],\n defaultSelectedKeys: [],\n replaceFields: {\n title: 'title',\n children: 'children',\n key: 'id'\n },\n loading: false,\n total: 0,\n tableQuerys: {},\n resizeObserverModelTableWrapper: null,\n modelTableWrapperHeight: 0,\n currentTreeNodeData: {},\n currentRowData: {},\n treeWrapperHeight: 0,\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n showFsmModal: false,\n fsmMeta: {},\n fsmContextProp: {}\n }\n },\n computed: {\n rowSelection () {\n if (!this.currentTableMode) return void 0\n return {\n columnTitle: this.currentSelectionColumn.columnTitle,\n fixed: true,\n type: this.currentTableMode,\n onChange: this.onChangeTableSelection\n }\n },\n currentSelectionColumn () {\n const { multiple } = this.tableMeta\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n if (target) {\n return target\n } else if (isGlobalExistMultiple) {\n return { multiple }\n }\n return void 0\n },\n x () {\n const { x } = this.tableMeta\n return x\n },\n y () {\n const { y } = this.tableMeta\n return y\n },\n currentTableMode () {\n if (!this.currentSelectionColumn) return void 0\n const { multiple } = this.currentSelectionColumn\n if (type.isBool(multiple)) {\n if (multiple) {\n return 'checkbox'\n } else {\n return 'radio'\n }\n } else {\n return void 0\n }\n },\n modelTableContainerRef () {\n return uuidv4()\n },\n titleMode () {\n if (type.isObject(this.title)) {\n const { mode = '' } = this.title\n return mode\n }\n return void 0\n },\n tableRef () {\n return uuidv4()\n },\n exposed () {\n return {\n currentTableSelection: this.currentTableSelection,\n currentTreeNode: this.currentTreeNodeData,\n requestTableData: this.requestTableData,\n querys: this.tableQuerys,\n currentRowData: this.currentRowData,\n setCurrentRowData: this.setCurrentRowData,\n setCurrentTableSelection: this.setCurrentTableSelection\n }\n },\n overrideTableEvent () {\n const events = this.actions.reduce((ret, action) => {\n ret[action.eventName] = (e) => {\n this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT]\n }\n },\n overrideModalFormEvent () {\n return {\n ...this.$listeners\n }\n },\n overrideButtonGroupEvent () {\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE]\n }\n },\n showTree () {\n return !!Object.keys(this.treeMeta).length\n },\n buttonGroup () {\n return uuidv4()\n },\n searchArea () {\n return uuidv4()\n },\n modelTreeWrapper () {\n return uuidv4()\n },\n modelTableWrapper () {\n return uuidv4()\n },\n actions () {\n const { operations } = this.tableMeta\n if (operations) {\n return operations.elements\n } else {\n return []\n }\n },\n pageSize () {\n const { page = {} } = this.tableMeta\n return page.pageSize || 10\n },\n pageSizeOptions () {\n const { page = {} } = this.tableMeta\n return page.pageSizeOptions || ['10', '20', '30', '40']\n },\n columns () {\n const { columns, operations } = this.tableMeta\n if (type.get(columns) === 'array') {\n const columnsOptions = columns.map(item => {\n const { mode = 'text' } = item\n if (item.render) {\n return {\n ...item,\n customRender: (text, record, index) => {\n const { $createElement } = this\n return item.render.call(this, \n { h: $createElement, ctx: this },\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n record, index)\n }\n }\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n const { [`${mode}Meta`]: modeMeta } = item\n return {\n ...item,\n customRender: (text, record, index) => {\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n }\n }\n }\n return {\n ...item\n }\n })\n if (operations) {\n return [\n ...columnsOptions,\n {\n title: '操作',\n width: operations.width,\n key: 'action',\n fixed: 'right',\n scopedSlots: { customRender: 'action' }\n }\n ]\n }\n return columnsOptions\n } else {\n console.error('Error: columns is invalid, please check it')\n return []\n }\n },\n getButtonGroupElements () {\n const { elements } = this.buttonGroupMeta\n if (type.get(elements) === 'function') {\n return elements.call(this)\n } else if (type.get(elements) === 'array') {\n return elements\n } else {\n return []\n }\n }\n },\n async created () {\n if (this.showTree) {\n this.treeData = await this.requestTreeData()\n const [defaultTreeNode = {}] = this.treeData\n this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]\n this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]\n this.currentTreeNodeData = defaultTreeNode\n }\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(initQuerys)\n }\n },\n methods: {\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n switch (mode) {\n case BUILT_IN_TRIGGER.FSM:\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = { \n url: 'api-fsm/workbench/fsm/auditFlow',\n requestType: 'GET',\n fieldMap: {\n modelCode: 'modelCode',\n businessId: 'businessId'\n }\n })\n break\n default:\n break\n }\n },\n handleCloseFsmModal () {\n this.showFsmModal = false\n },\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n this.fsmMeta = meta\n this.fsmContextProp = record\n this.showFsmModal = true\n },\n onChangeTableSelection (_, selectedRows = []) {\n if (this.currentTableMode === 'radio') {\n this.currentTableSelection = selectedRows[0]\n this.$emit('on-change-table-selection', this.currentTableSelection)\n } else {\n this.currentTableSelection = selectedRows\n this.$emit('on-change-table-selection', this.currentTableSelection)\n }\n },\n setCurrentTableSelection (props = {}) {\n if (this.currentTableMode === 'radio') {\n this.currentTableSelection = type.isObject(props) ? props : {}\n } else {\n this.currentTableSelection = type.isArray(props) ? props : []\n }\n },\n setCurrentRowData (props = {}) {\n this.currentRowData = props\n },\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n const { record = {} } = props\n this.currentRowData = record\n this.modalFormMeta = this.editMeta\n this.modalFormValue = true\n },\n [BUILT_IN_EVENT_NAMES.CREATE] () {\n this.modalFormMeta = this.createMeta\n this.modalFormValue = true\n },\n handleClickButtonGroup (props) {\n const { eventName } = props\n this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })\n },\n watchViewPort () {\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\n console.log(modelTableWrapper.getBoundingClientRect())\n const { top } = modelTableWrapper.getBoundingClientRect()\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n },\n async onSearch (props) {\n const { overrideInit = false } = this.tableMeta\n this.tableQuerys = Object.assign(this.tableQuerys, props)\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData()\n }\n },\n execTableFieldMap (fieldMap = {}, props) {\n let ret = {}\n const keys = Object.keys(fieldMap)\n keys.forEach(key => {\n const field = fieldMap[key]\n ret[field] = props[key]\n })\n return ret\n },\n async selectTreeNode (selectedKeys, e) {\n const { fieldMap } = this.tableMeta\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef\n const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)\n const { overrideInit = false } = this.tableMeta\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(execFieldMapRet)\n }\n },\n async requestTreeData () {\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n const ret = await net[requestType.toLowerCase()](\n url,\n { ...params, ...fieldMapRet }\n ).then(resp => {\n const { data } = resp || {}\n return data\n })\n return ret\n },\n async onChangePage (page, pageSize) {\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n },\n async requestTableData (props = {}) {\n const { url, requestType = 'GET', page = {} } = this.tableMeta\n const { pageSize = 10 } = page\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n this.loading = true\n const ret = await net[requestType.toLowerCase()](\n url,\n this.tableQuerys\n ).then(resp => {\n const { data = [], count } = resp || {}\n this.total = count\n this.loading = false\n return (data || []).map(item => {\n delete item.children\n return {\n key: uuidv4(),\n ...item\n }\n })\n })\n this.tableData = ret\n return ret\n },\n refreshTreeStatus (props = {}) {},\n refreshTableStatus (props = {}) {},\n calculateTableHeight () {\n const currentViewportHeight = window.innerHeight\n const tableRef = this.$refs[this.tableRef]\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n this.tableWidth = width\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n },\n calculateTreeHeight () {\n if (!this.showTree) return\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n const { height } = modelTableContainerRef.getBoundingClientRect()\n this.treeWrapperHeight = height\n }\n },\n mounted () {\n this.calculateTableHeight()\n this.$nextTick(() => {\n this.calculateTreeHeight()\n })\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n for (const _ of entries) {\n requestAnimationFrame(() => {\n this.calculateTableHeight()\n })\n }\n })\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n },\n destroyed () {\n this.resizeObserverModelTableWrapper.disconnect()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.model__tree-table {\n background: transparent; \n display: flex;\n flex-direction: row;\n width: 100%;\n .model__tree-table--container {\n .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 }\n .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n .model__table--title {\n .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 .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 }\n .model__table--wrapper {\n background: #fff;\n .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 .g-table__wrapper {\n .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n }\n }\n }\n }\n }\n}\n</style>\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 });
|
|
2960
|
+
inject("data-v-5df5d493_0", { source: ".ele.model__tree-table[data-v-5df5d493] {\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-5df5d493] {\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-5df5d493] {\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-5df5d493] {\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-5df5d493] {\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-5df5d493] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-5df5d493] {\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-5df5d493] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAigBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AChgBA;ADkgBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AChgBA;ADmgBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACjgBA;ADmgBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACjgBA;ADmgBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACjgBA;ADogBA;EACA,gBAAA;AClgBA;ADmgBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACjgBA;ADogBA;EACA,eAAA;EACA,kCAAA;AClgBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <section class=\"ele model__tree-table\">\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\n <div class=\"model__tree--title\"></div>\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n <ele-tree\n :tree-data=\"treeData\"\n :defaultExpandedKeys=\"defaultExpandedKeys\"\n :defaultSelectedKeys=\"defaultSelectedKeys\"\n @select=\"selectTreeNode\"\n :replace-fields=\"treeMeta.replaceFields || replaceFields\">\n </ele-tree>\n </section>\n </section>\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n <div class=\"model__table--title\" v-if=\"title\">\n <template v-if=\"titleMode\">\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n </template>\n <template v-else>\n <div class=\"model__table-title--text\">{{ title }}</div>\n </template>\n </div>\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n <div class=\"button-row__area\">\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n <slot name=\"tags\"></slot>\n <slot name=\"sub-center\"></slot>\n </div>\n <ele-table\n v-on=\"overrideTableEvent\"\n :ref=\"tableRef\"\n :row-selection=\"rowSelection\"\n :loading=\"loading\" \n :columns=\"columns\"\n :total=\"total\"\n :x=\"x\"\n :y=\"y\"\n :height=\"tableHeight\"\n :width=\"tableWidth\"\n :actions=\"actions\"\n :pageSize=\"pageSize\"\n :pageSizeOptions=\"pageSizeOptions\"\n :data-source=\"tableData\"\n @change-page=\"onChangePage\"\n ></ele-table>\n </section>\n </section>\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n </section>\n</template>\n\n<script>\nimport { type, net } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n name: 'ele-tree-table-model',\n props: {\n title: {\n type: [Object, String]\n },\n overHeight: {\n type: Number,\n default: 0\n },\n treeMeta: {\n type: Object,\n default: () => ({})\n },\n searchMeta: {\n type: Object,\n default: () => ({})\n },\n buttonGroupMeta: {\n typeof: Object,\n default: () => ({})\n },\n tableMeta: {\n type: Object,\n default: () => ({})\n },\n createMeta: {\n type: Object\n },\n editMeta: {\n type: Object\n }\n },\n provide () {\n return {\n requestTreeData: this.requestTreeData,\n requestTableData: this.requestTableData,\n [CONTEXT]: () => {\n return {\n exposed: { ...this.exposed }\n }\n }\n }\n },\n data () {\n return {\n tableHeight: 0,\n tableWidth: 0,\n modalFormMeta: {},\n modalFormValue: false,\n treeData: [],\n tableData: [],\n defaultExpandedKeys: [],\n defaultSelectedKeys: [],\n replaceFields: {\n title: 'title',\n children: 'children',\n key: 'id'\n },\n loading: false,\n total: 0,\n tableQuerys: {},\n resizeObserverModelTableWrapper: null,\n modelTableWrapperHeight: 0,\n currentTreeNodeData: {},\n currentRowData: {},\n treeWrapperHeight: 0,\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n showFsmModal: false,\n fsmMeta: {},\n fsmContextProp: {}\n }\n },\n computed: {\n rowSelection () {\n if (!this.currentTableMode) return void 0\n return {\n columnTitle: this.currentSelectionColumn.columnTitle,\n fixed: true,\n type: this.currentTableMode,\n onChange: this.onChangeTableSelection\n }\n },\n currentSelectionColumn () {\n const { multiple } = this.tableMeta\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n if (target) {\n return target\n } else if (isGlobalExistMultiple) {\n return { multiple }\n }\n return void 0\n },\n x () {\n const { x } = this.tableMeta\n return x\n },\n y () {\n const { y } = this.tableMeta\n return y\n },\n currentTableMode () {\n if (!this.currentSelectionColumn) return void 0\n const { multiple } = this.currentSelectionColumn\n if (type.isBool(multiple)) {\n if (multiple) {\n return 'checkbox'\n } else {\n return 'radio'\n }\n } else {\n return void 0\n }\n },\n modelTableContainerRef () {\n return uuidv4()\n },\n titleMode () {\n if (type.isObject(this.title)) {\n const { mode = '' } = this.title\n return mode\n }\n return void 0\n },\n tableRef () {\n return uuidv4()\n },\n exposed () {\n return {\n currentTableSelection: this.currentTableSelection,\n currentTreeNode: this.currentTreeNodeData,\n requestTableData: this.requestTableData,\n querys: this.tableQuerys,\n currentRowData: this.currentRowData,\n setCurrentRowData: this.setCurrentRowData,\n setCurrentTableSelection: this.setCurrentTableSelection\n }\n },\n overrideTableEvent () {\n const events = this.actions.reduce((ret, action) => {\n ret[action.eventName] = (e) => {\n this.$emit(action.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\n }\n },\n overrideModalFormEvent () {\n return {\n ...this.$listeners\n }\n },\n overrideButtonGroupEvent () {\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE]\n }\n },\n showTree () {\n return !!Object.keys(this.treeMeta).length\n },\n buttonGroup () {\n return uuidv4()\n },\n searchArea () {\n return uuidv4()\n },\n modelTreeWrapper () {\n return uuidv4()\n },\n modelTableWrapper () {\n return uuidv4()\n },\n actions () {\n const { operations } = this.tableMeta\n if (operations) {\n return operations.elements\n } else {\n return []\n }\n },\n pageSize () {\n const { page = {} } = this.tableMeta\n return page.pageSize || 10\n },\n pageSizeOptions () {\n const { page = {} } = this.tableMeta\n return page.pageSizeOptions || ['10', '20', '30', '40']\n },\n columns () {\n const { columns, operations } = this.tableMeta\n if (type.get(columns) === 'array') {\n const columnsOptions = columns.map(item => {\n const { mode = 'text' } = item\n if (item.render) {\n return {\n ...item,\n customRender: (text, record, index) => {\n const { $createElement } = this\n return item.render.call(this, \n { h: $createElement, ctx: this },\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n record, index)\n }\n }\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n const { [`${mode}Meta`]: modeMeta } = item\n return {\n ...item,\n customRender: (text, record, index) => {\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n }\n }\n }\n return {\n ...item\n }\n })\n if (operations) {\n return [\n ...columnsOptions,\n {\n title: '操作',\n width: operations.width,\n key: 'action',\n fixed: 'right',\n scopedSlots: { customRender: 'action' }\n }\n ]\n }\n return columnsOptions\n } else {\n console.error('Error: columns is invalid, please check it')\n return []\n }\n },\n getButtonGroupElements () {\n const { elements } = this.buttonGroupMeta\n if (type.get(elements) === 'function') {\n return elements.call(this)\n } else if (type.get(elements) === 'array') {\n return elements\n } else {\n return []\n }\n }\n },\n async created () {\n if (this.showTree) {\n this.treeData = await this.requestTreeData()\n const [defaultTreeNode = {}] = this.treeData\n this.defaultExpandedKeys = [defaultTreeNode[this.replaceFields.key]]\n this.defaultSelectedKeys = [defaultTreeNode[this.replaceFields.key]]\n this.currentTreeNodeData = defaultTreeNode\n }\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(initQuerys)\n }\n },\n methods: {\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n switch (mode) {\n case BUILT_IN_TRIGGER.FSM:\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = { \n url: 'api-fsm/workbench/fsm/auditFlow',\n requestType: 'GET',\n fieldMap: {\n modelCode: 'modelCode',\n businessId: 'businessId'\n }\n })\n break\n default:\n break\n }\n },\n handleCloseFsmModal () {\n this.showFsmModal = false\n },\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n this.fsmMeta = meta\n this.fsmContextProp = record\n this.showFsmModal = true\n },\n onChangeTableSelection (_, selectedRows = []) {\n if (this.currentTableMode === 'radio') {\n this.currentTableSelection = selectedRows[0]\n this.$emit('on-change-table-selection', this.currentTableSelection)\n } else {\n this.currentTableSelection = selectedRows\n this.$emit('on-change-table-selection', this.currentTableSelection)\n }\n },\n setCurrentTableSelection (props = {}) {\n if (this.currentTableMode === 'radio') {\n this.currentTableSelection = type.isObject(props) ? props : {}\n } else {\n this.currentTableSelection = type.isArray(props) ? props : []\n }\n },\n setCurrentRowData (props = {}) {\n this.currentRowData = props\n },\n cleanCurrentModelEffect () {\n this.setCurrentTableSelection()\n this.setCurrentRowData({})\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n this.cleanCurrentModelEffect()\n this.requestTableData()\n },\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n const { record = {} } = props\n this.currentRowData = record\n this.modalFormMeta = this.editMeta\n this.modalFormValue = true\n },\n [BUILT_IN_EVENT_NAMES.CREATE] () {\n this.modalFormMeta = this.createMeta\n this.modalFormValue = true\n },\n handleClickButtonGroup (props) {\n const { eventName } = props\n this.$emit(eventName, { currentTreeNode: this.currentTreeNodeData })\n },\n watchViewPort () {\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\n console.log(modelTableWrapper.getBoundingClientRect())\n const { top } = modelTableWrapper.getBoundingClientRect()\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n },\n async onSearch (props) {\n const { overrideInit = false } = this.tableMeta\n this.tableQuerys = Object.assign(this.tableQuerys, props)\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData()\n }\n },\n execTableFieldMap (fieldMap = {}, props) {\n let ret = {}\n const keys = Object.keys(fieldMap)\n keys.forEach(key => {\n const field = fieldMap[key]\n ret[field] = props[key]\n })\n return ret\n },\n async selectTreeNode (selectedKeys, e) {\n const { fieldMap } = this.tableMeta\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef\n const execFieldMapRet = this.execTableFieldMap(fieldMap, e.node.$vnode.data.props.dataRef)\n const { overrideInit = false } = this.tableMeta\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(execFieldMapRet)\n }\n },\n async requestTreeData () {\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n const ret = await net[requestType.toLowerCase()](\n url,\n { ...params, ...fieldMapRet }\n ).then(resp => {\n const { data } = resp || {}\n return data\n })\n return ret\n },\n async onChangePage (page, pageSize) {\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n },\n async requestTableData (props = {}) {\n const { url, requestType = 'GET', page = {} } = this.tableMeta\n const { pageSize = 10 } = page\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n this.loading = true\n const ret = await net[requestType.toLowerCase()](\n url,\n this.tableQuerys\n ).then(resp => {\n const { data = [], count } = resp || {}\n this.total = count\n this.loading = false\n return (data || []).map(item => {\n delete item.children\n return {\n key: uuidv4(),\n ...item\n }\n })\n })\n this.tableData = ret\n return ret\n },\n refreshTreeStatus (props = {}) {},\n refreshTableStatus (props = {}) {},\n calculateTableHeight () {\n const currentViewportHeight = window.innerHeight\n const tableRef = this.$refs[this.tableRef]\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n this.tableWidth = width\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n },\n calculateTreeHeight () {\n if (!this.showTree) return\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n const { height } = modelTableContainerRef.getBoundingClientRect()\n this.treeWrapperHeight = height\n }\n },\n mounted () {\n this.calculateTableHeight()\n this.$nextTick(() => {\n this.calculateTreeHeight()\n })\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n for (const _ of entries) {\n requestAnimationFrame(() => {\n this.calculateTableHeight()\n })\n }\n })\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n },\n destroyed () {\n this.resizeObserverModelTableWrapper.disconnect()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.model__tree-table {\n background: transparent; \n display: flex;\n flex-direction: row;\n width: 100%;\n .model__tree-table--container {\n .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 }\n .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n .model__table--title {\n .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 .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 }\n .model__table--wrapper {\n background: #fff;\n .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 .g-table__wrapper {\n .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n }\n }\n }\n }\n }\n}\n</style>\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 });
|
|
2952
2961
|
|
|
2953
2962
|
};
|
|
2954
2963
|
/* scoped */
|
|
2955
|
-
const __vue_scope_id__$y = "data-v-
|
|
2964
|
+
const __vue_scope_id__$y = "data-v-5df5d493";
|
|
2956
2965
|
/* module identifier */
|
|
2957
2966
|
const __vue_module_identifier__$y = undefined;
|
|
2958
2967
|
/* functional template */
|
|
@@ -12080,6 +12089,7 @@
|
|
|
12080
12089
|
}, {
|
|
12081
12090
|
...headers
|
|
12082
12091
|
});
|
|
12092
|
+
this.setFieldsValue(data);
|
|
12083
12093
|
this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, {
|
|
12084
12094
|
...data
|
|
12085
12095
|
});
|
package/package.json
CHANGED
|
@@ -180,6 +180,7 @@ export default {
|
|
|
180
180
|
const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
|
|
181
181
|
if (!url) return
|
|
182
182
|
const { data } = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })
|
|
183
|
+
this.setFieldsValue(data)
|
|
183
184
|
this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
|
|
184
185
|
},
|
|
185
186
|
setFieldsValue (props) {
|
|
@@ -205,7 +205,8 @@ export default {
|
|
|
205
205
|
return {
|
|
206
206
|
...this.$listeners,
|
|
207
207
|
...events,
|
|
208
|
-
[BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT]
|
|
208
|
+
[BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],
|
|
209
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]
|
|
209
210
|
}
|
|
210
211
|
},
|
|
211
212
|
overrideModalFormEvent () {
|
|
@@ -376,6 +377,14 @@ export default {
|
|
|
376
377
|
setCurrentRowData (props = {}) {
|
|
377
378
|
this.currentRowData = props
|
|
378
379
|
},
|
|
380
|
+
cleanCurrentModelEffect () {
|
|
381
|
+
this.setCurrentTableSelection()
|
|
382
|
+
this.setCurrentRowData({})
|
|
383
|
+
},
|
|
384
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
|
|
385
|
+
this.cleanCurrentModelEffect()
|
|
386
|
+
this.requestTableData()
|
|
387
|
+
},
|
|
379
388
|
[BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {
|
|
380
389
|
const { record = {} } = props
|
|
381
390
|
this.currentRowData = record
|