@idooel/components 0.0.1-beta.52 → 0.0.1-beta.54
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.
- package/dist/@idooel/components.esm.js +53 -39
- package/dist/@idooel/components.umd.js +53 -39
- package/package.json +1 -1
- package/packages/composite-components/modal-confirm/src/index.vue +2 -2
- package/packages/composite-components/search-area/src/index.vue +1 -1
- package/packages/models/tree-table-model/src/index.vue +1 -0
|
@@ -2565,6 +2565,7 @@ var script$u = {
|
|
|
2565
2565
|
};
|
|
2566
2566
|
});
|
|
2567
2567
|
});
|
|
2568
|
+
this.tableData = ret;
|
|
2568
2569
|
return ret;
|
|
2569
2570
|
},
|
|
2570
2571
|
refreshTreeStatus(props = {}) {},
|
|
@@ -2766,11 +2767,11 @@ __vue_render__$u._withStripped = true;
|
|
|
2766
2767
|
/* style */
|
|
2767
2768
|
const __vue_inject_styles__$u = function (inject) {
|
|
2768
2769
|
if (!inject) return
|
|
2769
|
-
inject("data-v-845ecb50_0", { source: ".ele.model__tree-table[data-v-845ecb50] {\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-845ecb50] {\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-845ecb50] {\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-845ecb50] {\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-845ecb50] {\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-845ecb50] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-845ecb50] {\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-845ecb50] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAybA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACxbA;AD0bA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACxbA;AD2bA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACzbA;AD2bA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACzbA;AD2bA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACzbA;AD4bA;EACA,gBAAA;AC1bA;AD2bA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACzbA;AD4bA;EACA,eAAA;EACA,kCAAA;AC1bA;;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 </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 :height=\"tableHeight\"\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\" :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 } 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 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 }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 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 treeWrapperHeight: 0,\r\n currentTableSelection: {},\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 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 }\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 }\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 }\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, { h: $createElement, ctx: this }, typeof text == 'string' ? text : text[item.dataIndex], 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 = { \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 })\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 } else {\r\n this.currentTableSelection = selectedRows\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] () {\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 this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n this.tableData = await this.requestTableData()\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 this.tableData = await this.requestTableData(execFieldMapRet)\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.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 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 } = tableRef.$el.getBoundingClientRect()\r\n this.tableHeight = currentViewportHeight - tableToTop\r\n },\r\n calculateTreeHeight () {\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 });
|
|
2770
|
+
inject("data-v-6b84455b_0", { source: ".ele.model__tree-table[data-v-6b84455b] {\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-6b84455b] {\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-6b84455b] {\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-6b84455b] {\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-6b84455b] {\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-6b84455b] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-6b84455b] {\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-6b84455b] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0bA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACzbA;AD2bA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACzbA;AD4bA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC1bA;AD4bA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC1bA;AD4bA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC1bA;AD6bA;EACA,gBAAA;AC3bA;AD4bA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC1bA;AD6bA;EACA,eAAA;EACA,kCAAA;AC3bA;;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 </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 :height=\"tableHeight\"\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\" :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 } 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 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 }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 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 treeWrapperHeight: 0,\r\n currentTableSelection: {},\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 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 }\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 }\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 }\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, { h: $createElement, ctx: this }, typeof text == 'string' ? text : text[item.dataIndex], 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 = { \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 })\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 } else {\r\n this.currentTableSelection = selectedRows\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] () {\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 this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n this.tableData = await this.requestTableData()\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 this.tableData = await this.requestTableData(execFieldMapRet)\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.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 } = tableRef.$el.getBoundingClientRect()\r\n this.tableHeight = currentViewportHeight - tableToTop\r\n },\r\n calculateTreeHeight () {\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 });
|
|
2770
2771
|
|
|
2771
2772
|
};
|
|
2772
2773
|
/* scoped */
|
|
2773
|
-
const __vue_scope_id__$u = "data-v-
|
|
2774
|
+
const __vue_scope_id__$u = "data-v-6b84455b";
|
|
2774
2775
|
/* module identifier */
|
|
2775
2776
|
const __vue_module_identifier__$u = undefined;
|
|
2776
2777
|
/* functional template */
|
|
@@ -11149,39 +11150,50 @@ var __vue_render__$7 = function () {
|
|
|
11149
11150
|
[_vm._v("重置")]
|
|
11150
11151
|
),
|
|
11151
11152
|
_vm._v(" "),
|
|
11152
|
-
|
|
11153
|
-
|
|
11154
|
-
|
|
11155
|
-
|
|
11156
|
-
|
|
11157
|
-
|
|
11158
|
-
|
|
11159
|
-
|
|
11160
|
-
|
|
11161
|
-
|
|
11153
|
+
_vm.innerDataSource.length >
|
|
11154
|
+
_vm.cuttingFormula + 1
|
|
11155
|
+
? _c(
|
|
11156
|
+
"div",
|
|
11157
|
+
{
|
|
11158
|
+
staticClass: "expand-collapse",
|
|
11159
|
+
on: {
|
|
11160
|
+
click: _vm.handleClickExpandCollapse,
|
|
11161
|
+
},
|
|
11162
|
+
},
|
|
11162
11163
|
[
|
|
11163
|
-
|
|
11164
|
-
|
|
11164
|
+
_c(
|
|
11165
|
+
"span",
|
|
11166
|
+
{
|
|
11167
|
+
staticClass: "expand-collapse__text",
|
|
11168
|
+
},
|
|
11169
|
+
[
|
|
11170
|
+
_vm._v(
|
|
11171
|
+
_vm._s(
|
|
11172
|
+
_vm.isExpand ? "收起" : "展开"
|
|
11173
|
+
)
|
|
11174
|
+
),
|
|
11175
|
+
]
|
|
11176
|
+
),
|
|
11177
|
+
_vm._v(" "),
|
|
11178
|
+
_c(
|
|
11179
|
+
"span",
|
|
11180
|
+
{
|
|
11181
|
+
staticClass: "expand-collapse__icon",
|
|
11182
|
+
},
|
|
11183
|
+
[
|
|
11184
|
+
_vm.isExpand
|
|
11185
|
+
? _c("a-icon", {
|
|
11186
|
+
attrs: { type: "up" },
|
|
11187
|
+
})
|
|
11188
|
+
: _c("a-icon", {
|
|
11189
|
+
attrs: { type: "down" },
|
|
11190
|
+
}),
|
|
11191
|
+
],
|
|
11192
|
+
1
|
|
11165
11193
|
),
|
|
11166
11194
|
]
|
|
11167
|
-
)
|
|
11168
|
-
|
|
11169
|
-
_c(
|
|
11170
|
-
"span",
|
|
11171
|
-
{ staticClass: "expand-collapse__icon" },
|
|
11172
|
-
[
|
|
11173
|
-
_vm.isExpand
|
|
11174
|
-
? _c("a-icon", {
|
|
11175
|
-
attrs: { type: "up" },
|
|
11176
|
-
})
|
|
11177
|
-
: _c("a-icon", {
|
|
11178
|
-
attrs: { type: "down" },
|
|
11179
|
-
}),
|
|
11180
|
-
],
|
|
11181
|
-
1
|
|
11182
|
-
),
|
|
11183
|
-
]
|
|
11184
|
-
),
|
|
11195
|
+
)
|
|
11196
|
+
: _vm._e(),
|
|
11185
11197
|
],
|
|
11186
11198
|
1
|
|
11187
11199
|
)
|
|
@@ -11281,11 +11293,11 @@ __vue_render__$7._withStripped = true;
|
|
|
11281
11293
|
/* style */
|
|
11282
11294
|
const __vue_inject_styles__$7 = function (inject) {
|
|
11283
11295
|
if (!inject) return
|
|
11284
|
-
inject("data-v-41aa83a2_0", { source: ".search-area__wrapper[data-v-41aa83a2] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-41aa83a2] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-41aa83a2] {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action[data-v-41aa83a2] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-41aa83a2] {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text[data-v-41aa83a2] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-41aa83a2] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwLA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACvLA;ADyLA;EACA,YAAA;ACvLA;AD0LA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACxLA;ADyLA;EACA,oBAAA;ACvLA;ADyLA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACvLA;ADwLA;EACA,eAAA;ACtLA;ADwLA;EACA,eAAA;EACA,gBAAA;ACtLA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"search-area__wrapper\">\r\n <a-row :gutter=\"gutter\">\r\n <template v-for=\"(item, idx) in innerDataSource\">\r\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\r\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\r\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\r\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\r\n <div class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\r\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\r\n <span class=\"expand-collapse__icon\">\r\n <a-icon v-if=\"isExpand\" type=\"up\" />\r\n <a-icon v-else type=\"down\" />\r\n </span>\r\n </div>\r\n </div>\r\n <div v-else class=\"search-area__item\">\r\n <template v-if=\"item.type == 'Input'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-input v-model=\"item._value\"></ele-input>\r\n </template>\r\n <template v-else-if=\"item.type == 'Select'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-select v-model=\"item._value\" :data-source=\"item.optionList\"></ele-select>\r\n </template>\r\n <template v-else-if=\"item.type == 'DatePicker'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date v-model=\"item._value\" :format=\"item.format\"></ele-date>\r\n </template>\r\n <template v-else-if=\"item.type == 'ele-date-range'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\r\n </template>\r\n </div>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Label from './label.vue'\r\nimport moment from 'moment'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n name: 'ele-search-area',\r\n components: {\r\n Label\r\n },\r\n props: {\r\n gutter: {\r\n type: [Number, Array, Object],\r\n default: () => ([\r\n 16, 8\r\n ])\r\n },\r\n span: {\r\n type: Number,\r\n default: 8\r\n },\r\n dataSource: {\r\n type: Array,\r\n required: true\r\n }\r\n },\r\n data() {\r\n return {\r\n isExpand: false\r\n }\r\n },\r\n computed: {\r\n cuttingFormula () {\r\n return (24 / this.span - 1)\r\n },\r\n buildDataSource () {\r\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\r\n },\r\n innerDataSource () {\r\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\r\n }\r\n },\r\n created() {},\r\n methods: {\r\n controlDisplayByFormula (dataSource = []) {\r\n if (this.isExpand) {\r\n dataSource.forEach(item => {\r\n this.$set(item, '_show', true)\r\n })\r\n } else {\r\n dataSource.forEach((item, idx) => {\r\n if (idx < this.cuttingFormula) {\r\n this.$set(item, '_show', true)\r\n } else {\r\n this.$set(item, '_show', false)\r\n }\r\n })\r\n }\r\n return dataSource\r\n },\r\n buildDefaultValue (arg) {\r\n if (!arg || arg.charAt(0) !== '_') return arg\r\n return parse(arg, {\r\n _route: this.$route.query\r\n })\r\n },\r\n mapDefaultValueToValue () {\r\n this.dataSource.forEach(props => {\r\n this.$set(props, '_show', this.isExpand)\r\n if (props.defaultValue) {\r\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\r\n }\r\n })\r\n return this.dataSource\r\n },\r\n handleClickExpandCollapse () {\r\n this.isExpand = !this.isExpand\r\n },\r\n handleClickSearch () {\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n buildMapto (mapTo = [], dataSource) {\r\n const [ startField, endField ] = mapTo\r\n const [ startValue, endValue ] = dataSource || [null, null]\r\n return {\r\n [startField]: startValue,\r\n [endField]: endValue\r\n }\r\n },\r\n extractValues () {\r\n let ret = {}\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n switch (item.type) {\r\n case 'DatePicker':\r\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\r\n break\r\n case 'ele-date-range':\r\n if (item.mapTo) {\r\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\r\n } else {\r\n ret[item.name] = (item._value || []).join(',')\r\n }\r\n break\r\n default:\r\n ret[item.name] = item._value\r\n break\r\n }\r\n })\r\n return ret\r\n },\r\n handleClickReset () {\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n const { defaultValue } = item\r\n switch (item.type) {\r\n case 'Select':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n case 'DatePicker':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', undefined)\r\n break\r\n case 'ele-date-range':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', [])\r\n break\r\n default:\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n }\r\n })\r\n //TODO defaultValue\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n onChangeSelect (value, props) {\r\n this.$set(props, '_value', value)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.search-area__wrapper {\r\n padding-top: 16px;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n ::v-deep .ant-col {\r\n &:last-child {\r\n float: right;\r\n }\r\n }\r\n .search-area__item {\r\n height: 32px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &.search-area--action {\r\n justify-content: end;\r\n }\r\n .expand-collapse {\r\n margin-left: 8px;\r\n height: 32px;\r\n padding: 4px 16px;\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n .expand-collapse__text {\r\n font-size: 14px;\r\n }\r\n .expand-collapse__icon {\r\n font-size: 16px;\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n}\r\n</style>",".search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper ::v-deep .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
11296
|
+
inject("data-v-9249e75c_0", { source: ".search-area__wrapper[data-v-9249e75c] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-9249e75c] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-9249e75c] {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action[data-v-9249e75c] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-9249e75c] {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text[data-v-9249e75c] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-9249e75c] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwLA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACvLA;ADyLA;EACA,YAAA;ACvLA;AD0LA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACxLA;ADyLA;EACA,oBAAA;ACvLA;ADyLA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACvLA;ADwLA;EACA,eAAA;ACtLA;ADwLA;EACA,eAAA;EACA,gBAAA;ACtLA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"search-area__wrapper\">\r\n <a-row :gutter=\"gutter\">\r\n <template v-for=\"(item, idx) in innerDataSource\">\r\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\r\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\r\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\r\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\r\n <div v-if=\"innerDataSource.length > cuttingFormula + 1\" class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\r\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\r\n <span class=\"expand-collapse__icon\">\r\n <a-icon v-if=\"isExpand\" type=\"up\" />\r\n <a-icon v-else type=\"down\" />\r\n </span>\r\n </div>\r\n </div>\r\n <div v-else class=\"search-area__item\">\r\n <template v-if=\"item.type == 'Input'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-input v-model=\"item._value\"></ele-input>\r\n </template>\r\n <template v-else-if=\"item.type == 'Select'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-select v-model=\"item._value\" :data-source=\"item.optionList\"></ele-select>\r\n </template>\r\n <template v-else-if=\"item.type == 'DatePicker'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date v-model=\"item._value\" :format=\"item.format\"></ele-date>\r\n </template>\r\n <template v-else-if=\"item.type == 'ele-date-range'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\r\n </template>\r\n </div>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Label from './label.vue'\r\nimport moment from 'moment'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n name: 'ele-search-area',\r\n components: {\r\n Label\r\n },\r\n props: {\r\n gutter: {\r\n type: [Number, Array, Object],\r\n default: () => ([\r\n 16, 8\r\n ])\r\n },\r\n span: {\r\n type: Number,\r\n default: 8\r\n },\r\n dataSource: {\r\n type: Array,\r\n required: true\r\n }\r\n },\r\n data() {\r\n return {\r\n isExpand: false\r\n }\r\n },\r\n computed: {\r\n cuttingFormula () {\r\n return (24 / this.span - 1)\r\n },\r\n buildDataSource () {\r\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\r\n },\r\n innerDataSource () {\r\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\r\n }\r\n },\r\n created() {},\r\n methods: {\r\n controlDisplayByFormula (dataSource = []) {\r\n if (this.isExpand) {\r\n dataSource.forEach(item => {\r\n this.$set(item, '_show', true)\r\n })\r\n } else {\r\n dataSource.forEach((item, idx) => {\r\n if (idx < this.cuttingFormula) {\r\n this.$set(item, '_show', true)\r\n } else {\r\n this.$set(item, '_show', false)\r\n }\r\n })\r\n }\r\n return dataSource\r\n },\r\n buildDefaultValue (arg) {\r\n if (!arg || arg.charAt(0) !== '_') return arg\r\n return parse(arg, {\r\n _route: this.$route.query\r\n })\r\n },\r\n mapDefaultValueToValue () {\r\n this.dataSource.forEach(props => {\r\n this.$set(props, '_show', this.isExpand)\r\n if (props.defaultValue) {\r\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\r\n }\r\n })\r\n return this.dataSource\r\n },\r\n handleClickExpandCollapse () {\r\n this.isExpand = !this.isExpand\r\n },\r\n handleClickSearch () {\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n buildMapto (mapTo = [], dataSource) {\r\n const [ startField, endField ] = mapTo\r\n const [ startValue, endValue ] = dataSource || [null, null]\r\n return {\r\n [startField]: startValue,\r\n [endField]: endValue\r\n }\r\n },\r\n extractValues () {\r\n let ret = {}\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n switch (item.type) {\r\n case 'DatePicker':\r\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\r\n break\r\n case 'ele-date-range':\r\n if (item.mapTo) {\r\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\r\n } else {\r\n ret[item.name] = (item._value || []).join(',')\r\n }\r\n break\r\n default:\r\n ret[item.name] = item._value\r\n break\r\n }\r\n })\r\n return ret\r\n },\r\n handleClickReset () {\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n const { defaultValue } = item\r\n switch (item.type) {\r\n case 'Select':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n case 'DatePicker':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', undefined)\r\n break\r\n case 'ele-date-range':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', [])\r\n break\r\n default:\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n }\r\n })\r\n //TODO defaultValue\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n onChangeSelect (value, props) {\r\n this.$set(props, '_value', value)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.search-area__wrapper {\r\n padding-top: 16px;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n ::v-deep .ant-col {\r\n &:last-child {\r\n float: right;\r\n }\r\n }\r\n .search-area__item {\r\n height: 32px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &.search-area--action {\r\n justify-content: end;\r\n }\r\n .expand-collapse {\r\n margin-left: 8px;\r\n height: 32px;\r\n padding: 4px 16px;\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n .expand-collapse__text {\r\n font-size: 14px;\r\n }\r\n .expand-collapse__icon {\r\n font-size: 16px;\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n}\r\n</style>",".search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper ::v-deep .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
11285
11297
|
|
|
11286
11298
|
};
|
|
11287
11299
|
/* scoped */
|
|
11288
|
-
const __vue_scope_id__$7 = "data-v-
|
|
11300
|
+
const __vue_scope_id__$7 = "data-v-9249e75c";
|
|
11289
11301
|
/* module identifier */
|
|
11290
11302
|
const __vue_module_identifier__$7 = undefined;
|
|
11291
11303
|
/* functional template */
|
|
@@ -11969,7 +11981,7 @@ var script$3 = {
|
|
|
11969
11981
|
default: 'small'
|
|
11970
11982
|
},
|
|
11971
11983
|
alert: {
|
|
11972
|
-
type: Object,
|
|
11984
|
+
type: [Object, Boolean],
|
|
11973
11985
|
default: () => ({
|
|
11974
11986
|
type: 'warning',
|
|
11975
11987
|
message: '确定要删除吗?',
|
|
@@ -12069,7 +12081,9 @@ var __vue_render__$3 = function () {
|
|
|
12069
12081
|
_vm.overrideEvents
|
|
12070
12082
|
),
|
|
12071
12083
|
[
|
|
12072
|
-
|
|
12084
|
+
_vm.alert
|
|
12085
|
+
? _c("ele-alert", _vm._b({}, "ele-alert", _vm.alert, false))
|
|
12086
|
+
: _vm._e(),
|
|
12073
12087
|
_vm._v(" "),
|
|
12074
12088
|
_vm.contentText
|
|
12075
12089
|
? _c("div", { staticClass: "ele-modal-confirm__content" }, [
|
|
@@ -12086,12 +12100,12 @@ __vue_render__$3._withStripped = true;
|
|
|
12086
12100
|
/* style */
|
|
12087
12101
|
const __vue_inject_styles__$3 = function (inject) {
|
|
12088
12102
|
if (!inject) return
|
|
12089
|
-
inject("data-v-
|
|
12090
|
-
,inject("data-v-
|
|
12103
|
+
inject("data-v-7af4f130_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,uCAAuC;EACvC,uCAAuC;EACvC,mDAAmD;EACnD,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,gCAAgC;EAChC,4BAA4B;EAC5B,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;AAEA;EACE,4DAA4D;AAC9D;AAEA;EACE,4DAA4D;AAC9D;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
12104
|
+
,inject("data-v-7af4f130_1", { source: ".ele-modal-confirm__content[data-v-7af4f130] {\n margin-top: 8px;\n color: var(--idoole-black-088);\n font-size: 14px;\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\composite-components\\modal-confirm\\src\\index.vue","index.vue"],"names":[],"mappings":"AAkGA;EACA,eAAA;EACA,8BAAA;EACA,eAAA;EACA,iBAAA;ACjGA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <ele-modal :title=\"title\" :value=\"value\" :size=\"size\" @cancel=\"onCancel\" v-on=\"overrideEvents\" :buttonGroupMeta=\"buttonGroupMeta\">\r\n <ele-alert v-if=\"alert\" v-bind=\"alert\"></ele-alert>\r\n <div v-if=\"contentText\" class=\"ele-modal-confirm__content\">\r\n {{ contentText }}\r\n </div>\r\n </ele-modal>\r\n</template>\r\n\r\n<script>\r\nimport { CONTEXT } from '../../../utils'\r\nexport default {\r\n name: 'ele-modal-confirm',\r\n model: {\r\n event: 'change',\r\n prop: 'value'\r\n },\r\n props: {\r\n title: {\r\n type: String\r\n },\r\n size: {\r\n type: String,\r\n default: 'small'\r\n },\r\n alert: {\r\n type: [Object, Boolean],\r\n default: () => ({\r\n type: 'warning',\r\n message: '确定要删除吗?',\r\n description: '删除后将无法恢复',\r\n closable: false\r\n })\r\n },\r\n contentText: {\r\n type: String\r\n },\r\n value: {\r\n type: Boolean,\r\n default: false\r\n },\r\n buttonGroupMeta: {\r\n type: Object\r\n },\r\n //!deprecated\r\n contextProp: {\r\n type: Object,\r\n default: () => ({})\r\n }\r\n },\r\n inject: {\r\n [CONTEXT]: {\r\n default: () => (() => ({}))\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n computed: {\r\n currentContext () {\r\n const { exposed: exposedData = {} } = this[CONTEXT]()\r\n const exposed = Object.assign({}, exposedData, { closeModalConfirm: this.closeModalConfirm })\r\n return {\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n ...this[CONTEXT](),\r\n exposed\r\n }\r\n },\r\n overrideEvents () {\r\n if (!this.buttonGroupMeta) return {}\r\n const { elements = [] } = this.buttonGroupMeta\r\n const events = elements.reduce((ret, ele) =>{\r\n ret[ele.eventName || 'click'] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, ...this.currentContext })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events\r\n }\r\n }\r\n },\r\n methods: {\r\n closeModalConfirm () {\r\n this.$emit('change', false)\r\n },\r\n onCancel () {\r\n this.$emit('change', false)\r\n }\r\n }\r\n}\r\n</script>\r\n<style lang=\"scss\">\r\n@import '../../../theme/index';\r\n</style>\r\n<style lang=\"scss\" scoped>\r\n.ele-modal-confirm__content {\r\n margin-top: 8px;\r\n color: var(--idoole-black-088);\r\n font-size: 14px;\r\n line-height: 22px;\r\n}\r\n</style>",".ele-modal-confirm__content {\n margin-top: 8px;\n color: var(--idoole-black-088);\n font-size: 14px;\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
12091
12105
|
|
|
12092
12106
|
};
|
|
12093
12107
|
/* scoped */
|
|
12094
|
-
const __vue_scope_id__$3 = "data-v-
|
|
12108
|
+
const __vue_scope_id__$3 = "data-v-7af4f130";
|
|
12095
12109
|
/* module identifier */
|
|
12096
12110
|
const __vue_module_identifier__$3 = undefined;
|
|
12097
12111
|
/* functional template */
|
|
@@ -2572,6 +2572,7 @@
|
|
|
2572
2572
|
};
|
|
2573
2573
|
});
|
|
2574
2574
|
});
|
|
2575
|
+
this.tableData = ret;
|
|
2575
2576
|
return ret;
|
|
2576
2577
|
},
|
|
2577
2578
|
refreshTreeStatus(props = {}) {},
|
|
@@ -2773,11 +2774,11 @@
|
|
|
2773
2774
|
/* style */
|
|
2774
2775
|
const __vue_inject_styles__$u = function (inject) {
|
|
2775
2776
|
if (!inject) return
|
|
2776
|
-
inject("data-v-845ecb50_0", { source: ".ele.model__tree-table[data-v-845ecb50] {\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-845ecb50] {\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-845ecb50] {\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-845ecb50] {\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-845ecb50] {\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-845ecb50] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-845ecb50] {\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-845ecb50] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAybA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACxbA;AD0bA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACxbA;AD2bA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACzbA;AD2bA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACzbA;AD2bA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACzbA;AD4bA;EACA,gBAAA;AC1bA;AD2bA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACzbA;AD4bA;EACA,eAAA;EACA,kCAAA;AC1bA;;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 </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 :height=\"tableHeight\"\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\" :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 } 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 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 }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 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 treeWrapperHeight: 0,\r\n currentTableSelection: {},\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 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 }\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 }\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 }\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, { h: $createElement, ctx: this }, typeof text == 'string' ? text : text[item.dataIndex], 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 = { \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 })\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 } else {\r\n this.currentTableSelection = selectedRows\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] () {\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 this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n this.tableData = await this.requestTableData()\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 this.tableData = await this.requestTableData(execFieldMapRet)\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.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 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 } = tableRef.$el.getBoundingClientRect()\r\n this.tableHeight = currentViewportHeight - tableToTop\r\n },\r\n calculateTreeHeight () {\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 });
|
|
2777
|
+
inject("data-v-6b84455b_0", { source: ".ele.model__tree-table[data-v-6b84455b] {\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-6b84455b] {\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-6b84455b] {\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-6b84455b] {\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-6b84455b] {\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-6b84455b] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-6b84455b] {\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-6b84455b] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0bA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACzbA;AD2bA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACzbA;AD4bA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC1bA;AD4bA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC1bA;AD4bA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC1bA;AD6bA;EACA,gBAAA;AC3bA;AD4bA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC1bA;AD6bA;EACA,eAAA;EACA,kCAAA;AC3bA;;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 </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 :height=\"tableHeight\"\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\" :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 } 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 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 }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 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 treeWrapperHeight: 0,\r\n currentTableSelection: {},\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 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 }\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 }\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 }\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, { h: $createElement, ctx: this }, typeof text == 'string' ? text : text[item.dataIndex], 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 = { \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 })\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 } else {\r\n this.currentTableSelection = selectedRows\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] () {\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 this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n this.tableData = await this.requestTableData()\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 this.tableData = await this.requestTableData(execFieldMapRet)\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.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 } = tableRef.$el.getBoundingClientRect()\r\n this.tableHeight = currentViewportHeight - tableToTop\r\n },\r\n calculateTreeHeight () {\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 });
|
|
2777
2778
|
|
|
2778
2779
|
};
|
|
2779
2780
|
/* scoped */
|
|
2780
|
-
const __vue_scope_id__$u = "data-v-
|
|
2781
|
+
const __vue_scope_id__$u = "data-v-6b84455b";
|
|
2781
2782
|
/* module identifier */
|
|
2782
2783
|
const __vue_module_identifier__$u = undefined;
|
|
2783
2784
|
/* functional template */
|
|
@@ -11156,39 +11157,50 @@
|
|
|
11156
11157
|
[_vm._v("重置")]
|
|
11157
11158
|
),
|
|
11158
11159
|
_vm._v(" "),
|
|
11159
|
-
|
|
11160
|
-
|
|
11161
|
-
|
|
11162
|
-
|
|
11163
|
-
|
|
11164
|
-
|
|
11165
|
-
|
|
11166
|
-
|
|
11167
|
-
|
|
11168
|
-
|
|
11160
|
+
_vm.innerDataSource.length >
|
|
11161
|
+
_vm.cuttingFormula + 1
|
|
11162
|
+
? _c(
|
|
11163
|
+
"div",
|
|
11164
|
+
{
|
|
11165
|
+
staticClass: "expand-collapse",
|
|
11166
|
+
on: {
|
|
11167
|
+
click: _vm.handleClickExpandCollapse,
|
|
11168
|
+
},
|
|
11169
|
+
},
|
|
11169
11170
|
[
|
|
11170
|
-
|
|
11171
|
-
|
|
11171
|
+
_c(
|
|
11172
|
+
"span",
|
|
11173
|
+
{
|
|
11174
|
+
staticClass: "expand-collapse__text",
|
|
11175
|
+
},
|
|
11176
|
+
[
|
|
11177
|
+
_vm._v(
|
|
11178
|
+
_vm._s(
|
|
11179
|
+
_vm.isExpand ? "收起" : "展开"
|
|
11180
|
+
)
|
|
11181
|
+
),
|
|
11182
|
+
]
|
|
11183
|
+
),
|
|
11184
|
+
_vm._v(" "),
|
|
11185
|
+
_c(
|
|
11186
|
+
"span",
|
|
11187
|
+
{
|
|
11188
|
+
staticClass: "expand-collapse__icon",
|
|
11189
|
+
},
|
|
11190
|
+
[
|
|
11191
|
+
_vm.isExpand
|
|
11192
|
+
? _c("a-icon", {
|
|
11193
|
+
attrs: { type: "up" },
|
|
11194
|
+
})
|
|
11195
|
+
: _c("a-icon", {
|
|
11196
|
+
attrs: { type: "down" },
|
|
11197
|
+
}),
|
|
11198
|
+
],
|
|
11199
|
+
1
|
|
11172
11200
|
),
|
|
11173
11201
|
]
|
|
11174
|
-
)
|
|
11175
|
-
|
|
11176
|
-
_c(
|
|
11177
|
-
"span",
|
|
11178
|
-
{ staticClass: "expand-collapse__icon" },
|
|
11179
|
-
[
|
|
11180
|
-
_vm.isExpand
|
|
11181
|
-
? _c("a-icon", {
|
|
11182
|
-
attrs: { type: "up" },
|
|
11183
|
-
})
|
|
11184
|
-
: _c("a-icon", {
|
|
11185
|
-
attrs: { type: "down" },
|
|
11186
|
-
}),
|
|
11187
|
-
],
|
|
11188
|
-
1
|
|
11189
|
-
),
|
|
11190
|
-
]
|
|
11191
|
-
),
|
|
11202
|
+
)
|
|
11203
|
+
: _vm._e(),
|
|
11192
11204
|
],
|
|
11193
11205
|
1
|
|
11194
11206
|
)
|
|
@@ -11288,11 +11300,11 @@
|
|
|
11288
11300
|
/* style */
|
|
11289
11301
|
const __vue_inject_styles__$7 = function (inject) {
|
|
11290
11302
|
if (!inject) return
|
|
11291
|
-
inject("data-v-41aa83a2_0", { source: ".search-area__wrapper[data-v-41aa83a2] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-41aa83a2] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-41aa83a2] {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action[data-v-41aa83a2] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-41aa83a2] {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text[data-v-41aa83a2] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-41aa83a2] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwLA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACvLA;ADyLA;EACA,YAAA;ACvLA;AD0LA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACxLA;ADyLA;EACA,oBAAA;ACvLA;ADyLA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACvLA;ADwLA;EACA,eAAA;ACtLA;ADwLA;EACA,eAAA;EACA,gBAAA;ACtLA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"search-area__wrapper\">\r\n <a-row :gutter=\"gutter\">\r\n <template v-for=\"(item, idx) in innerDataSource\">\r\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\r\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\r\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\r\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\r\n <div class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\r\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\r\n <span class=\"expand-collapse__icon\">\r\n <a-icon v-if=\"isExpand\" type=\"up\" />\r\n <a-icon v-else type=\"down\" />\r\n </span>\r\n </div>\r\n </div>\r\n <div v-else class=\"search-area__item\">\r\n <template v-if=\"item.type == 'Input'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-input v-model=\"item._value\"></ele-input>\r\n </template>\r\n <template v-else-if=\"item.type == 'Select'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-select v-model=\"item._value\" :data-source=\"item.optionList\"></ele-select>\r\n </template>\r\n <template v-else-if=\"item.type == 'DatePicker'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date v-model=\"item._value\" :format=\"item.format\"></ele-date>\r\n </template>\r\n <template v-else-if=\"item.type == 'ele-date-range'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\r\n </template>\r\n </div>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Label from './label.vue'\r\nimport moment from 'moment'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n name: 'ele-search-area',\r\n components: {\r\n Label\r\n },\r\n props: {\r\n gutter: {\r\n type: [Number, Array, Object],\r\n default: () => ([\r\n 16, 8\r\n ])\r\n },\r\n span: {\r\n type: Number,\r\n default: 8\r\n },\r\n dataSource: {\r\n type: Array,\r\n required: true\r\n }\r\n },\r\n data() {\r\n return {\r\n isExpand: false\r\n }\r\n },\r\n computed: {\r\n cuttingFormula () {\r\n return (24 / this.span - 1)\r\n },\r\n buildDataSource () {\r\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\r\n },\r\n innerDataSource () {\r\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\r\n }\r\n },\r\n created() {},\r\n methods: {\r\n controlDisplayByFormula (dataSource = []) {\r\n if (this.isExpand) {\r\n dataSource.forEach(item => {\r\n this.$set(item, '_show', true)\r\n })\r\n } else {\r\n dataSource.forEach((item, idx) => {\r\n if (idx < this.cuttingFormula) {\r\n this.$set(item, '_show', true)\r\n } else {\r\n this.$set(item, '_show', false)\r\n }\r\n })\r\n }\r\n return dataSource\r\n },\r\n buildDefaultValue (arg) {\r\n if (!arg || arg.charAt(0) !== '_') return arg\r\n return parse(arg, {\r\n _route: this.$route.query\r\n })\r\n },\r\n mapDefaultValueToValue () {\r\n this.dataSource.forEach(props => {\r\n this.$set(props, '_show', this.isExpand)\r\n if (props.defaultValue) {\r\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\r\n }\r\n })\r\n return this.dataSource\r\n },\r\n handleClickExpandCollapse () {\r\n this.isExpand = !this.isExpand\r\n },\r\n handleClickSearch () {\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n buildMapto (mapTo = [], dataSource) {\r\n const [ startField, endField ] = mapTo\r\n const [ startValue, endValue ] = dataSource || [null, null]\r\n return {\r\n [startField]: startValue,\r\n [endField]: endValue\r\n }\r\n },\r\n extractValues () {\r\n let ret = {}\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n switch (item.type) {\r\n case 'DatePicker':\r\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\r\n break\r\n case 'ele-date-range':\r\n if (item.mapTo) {\r\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\r\n } else {\r\n ret[item.name] = (item._value || []).join(',')\r\n }\r\n break\r\n default:\r\n ret[item.name] = item._value\r\n break\r\n }\r\n })\r\n return ret\r\n },\r\n handleClickReset () {\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n const { defaultValue } = item\r\n switch (item.type) {\r\n case 'Select':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n case 'DatePicker':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', undefined)\r\n break\r\n case 'ele-date-range':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', [])\r\n break\r\n default:\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n }\r\n })\r\n //TODO defaultValue\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n onChangeSelect (value, props) {\r\n this.$set(props, '_value', value)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.search-area__wrapper {\r\n padding-top: 16px;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n ::v-deep .ant-col {\r\n &:last-child {\r\n float: right;\r\n }\r\n }\r\n .search-area__item {\r\n height: 32px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &.search-area--action {\r\n justify-content: end;\r\n }\r\n .expand-collapse {\r\n margin-left: 8px;\r\n height: 32px;\r\n padding: 4px 16px;\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n .expand-collapse__text {\r\n font-size: 14px;\r\n }\r\n .expand-collapse__icon {\r\n font-size: 16px;\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n}\r\n</style>",".search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper ::v-deep .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
11303
|
+
inject("data-v-9249e75c_0", { source: ".search-area__wrapper[data-v-9249e75c] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-9249e75c] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-9249e75c] {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action[data-v-9249e75c] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-9249e75c] {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text[data-v-9249e75c] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-9249e75c] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwLA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACvLA;ADyLA;EACA,YAAA;ACvLA;AD0LA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACxLA;ADyLA;EACA,oBAAA;ACvLA;ADyLA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACvLA;ADwLA;EACA,eAAA;ACtLA;ADwLA;EACA,eAAA;EACA,gBAAA;ACtLA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"search-area__wrapper\">\r\n <a-row :gutter=\"gutter\">\r\n <template v-for=\"(item, idx) in innerDataSource\">\r\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\r\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\r\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\r\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\r\n <div v-if=\"innerDataSource.length > cuttingFormula + 1\" class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\r\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\r\n <span class=\"expand-collapse__icon\">\r\n <a-icon v-if=\"isExpand\" type=\"up\" />\r\n <a-icon v-else type=\"down\" />\r\n </span>\r\n </div>\r\n </div>\r\n <div v-else class=\"search-area__item\">\r\n <template v-if=\"item.type == 'Input'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-input v-model=\"item._value\"></ele-input>\r\n </template>\r\n <template v-else-if=\"item.type == 'Select'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-select v-model=\"item._value\" :data-source=\"item.optionList\"></ele-select>\r\n </template>\r\n <template v-else-if=\"item.type == 'DatePicker'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date v-model=\"item._value\" :format=\"item.format\"></ele-date>\r\n </template>\r\n <template v-else-if=\"item.type == 'ele-date-range'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\r\n </template>\r\n </div>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Label from './label.vue'\r\nimport moment from 'moment'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n name: 'ele-search-area',\r\n components: {\r\n Label\r\n },\r\n props: {\r\n gutter: {\r\n type: [Number, Array, Object],\r\n default: () => ([\r\n 16, 8\r\n ])\r\n },\r\n span: {\r\n type: Number,\r\n default: 8\r\n },\r\n dataSource: {\r\n type: Array,\r\n required: true\r\n }\r\n },\r\n data() {\r\n return {\r\n isExpand: false\r\n }\r\n },\r\n computed: {\r\n cuttingFormula () {\r\n return (24 / this.span - 1)\r\n },\r\n buildDataSource () {\r\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\r\n },\r\n innerDataSource () {\r\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\r\n }\r\n },\r\n created() {},\r\n methods: {\r\n controlDisplayByFormula (dataSource = []) {\r\n if (this.isExpand) {\r\n dataSource.forEach(item => {\r\n this.$set(item, '_show', true)\r\n })\r\n } else {\r\n dataSource.forEach((item, idx) => {\r\n if (idx < this.cuttingFormula) {\r\n this.$set(item, '_show', true)\r\n } else {\r\n this.$set(item, '_show', false)\r\n }\r\n })\r\n }\r\n return dataSource\r\n },\r\n buildDefaultValue (arg) {\r\n if (!arg || arg.charAt(0) !== '_') return arg\r\n return parse(arg, {\r\n _route: this.$route.query\r\n })\r\n },\r\n mapDefaultValueToValue () {\r\n this.dataSource.forEach(props => {\r\n this.$set(props, '_show', this.isExpand)\r\n if (props.defaultValue) {\r\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\r\n }\r\n })\r\n return this.dataSource\r\n },\r\n handleClickExpandCollapse () {\r\n this.isExpand = !this.isExpand\r\n },\r\n handleClickSearch () {\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n buildMapto (mapTo = [], dataSource) {\r\n const [ startField, endField ] = mapTo\r\n const [ startValue, endValue ] = dataSource || [null, null]\r\n return {\r\n [startField]: startValue,\r\n [endField]: endValue\r\n }\r\n },\r\n extractValues () {\r\n let ret = {}\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n switch (item.type) {\r\n case 'DatePicker':\r\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\r\n break\r\n case 'ele-date-range':\r\n if (item.mapTo) {\r\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\r\n } else {\r\n ret[item.name] = (item._value || []).join(',')\r\n }\r\n break\r\n default:\r\n ret[item.name] = item._value\r\n break\r\n }\r\n })\r\n return ret\r\n },\r\n handleClickReset () {\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n const { defaultValue } = item\r\n switch (item.type) {\r\n case 'Select':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n case 'DatePicker':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', undefined)\r\n break\r\n case 'ele-date-range':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', [])\r\n break\r\n default:\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n }\r\n })\r\n //TODO defaultValue\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n onChangeSelect (value, props) {\r\n this.$set(props, '_value', value)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.search-area__wrapper {\r\n padding-top: 16px;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n ::v-deep .ant-col {\r\n &:last-child {\r\n float: right;\r\n }\r\n }\r\n .search-area__item {\r\n height: 32px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &.search-area--action {\r\n justify-content: end;\r\n }\r\n .expand-collapse {\r\n margin-left: 8px;\r\n height: 32px;\r\n padding: 4px 16px;\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n .expand-collapse__text {\r\n font-size: 14px;\r\n }\r\n .expand-collapse__icon {\r\n font-size: 16px;\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n}\r\n</style>",".search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper ::v-deep .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
11292
11304
|
|
|
11293
11305
|
};
|
|
11294
11306
|
/* scoped */
|
|
11295
|
-
const __vue_scope_id__$7 = "data-v-
|
|
11307
|
+
const __vue_scope_id__$7 = "data-v-9249e75c";
|
|
11296
11308
|
/* module identifier */
|
|
11297
11309
|
const __vue_module_identifier__$7 = undefined;
|
|
11298
11310
|
/* functional template */
|
|
@@ -11976,7 +11988,7 @@
|
|
|
11976
11988
|
default: 'small'
|
|
11977
11989
|
},
|
|
11978
11990
|
alert: {
|
|
11979
|
-
type: Object,
|
|
11991
|
+
type: [Object, Boolean],
|
|
11980
11992
|
default: () => ({
|
|
11981
11993
|
type: 'warning',
|
|
11982
11994
|
message: '确定要删除吗?',
|
|
@@ -12076,7 +12088,9 @@
|
|
|
12076
12088
|
_vm.overrideEvents
|
|
12077
12089
|
),
|
|
12078
12090
|
[
|
|
12079
|
-
|
|
12091
|
+
_vm.alert
|
|
12092
|
+
? _c("ele-alert", _vm._b({}, "ele-alert", _vm.alert, false))
|
|
12093
|
+
: _vm._e(),
|
|
12080
12094
|
_vm._v(" "),
|
|
12081
12095
|
_vm.contentText
|
|
12082
12096
|
? _c("div", { staticClass: "ele-modal-confirm__content" }, [
|
|
@@ -12093,12 +12107,12 @@
|
|
|
12093
12107
|
/* style */
|
|
12094
12108
|
const __vue_inject_styles__$3 = function (inject) {
|
|
12095
12109
|
if (!inject) return
|
|
12096
|
-
inject("data-v-
|
|
12097
|
-
,inject("data-v-
|
|
12110
|
+
inject("data-v-7af4f130_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,uCAAuC;EACvC,uCAAuC;EACvC,mDAAmD;EACnD,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,gCAAgC;EAChC,4BAA4B;EAC5B,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;AAEA;EACE,4DAA4D;AAC9D;AAEA;EACE,4DAA4D;AAC9D;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
12111
|
+
,inject("data-v-7af4f130_1", { source: ".ele-modal-confirm__content[data-v-7af4f130] {\n margin-top: 8px;\n color: var(--idoole-black-088);\n font-size: 14px;\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\composite-components\\modal-confirm\\src\\index.vue","index.vue"],"names":[],"mappings":"AAkGA;EACA,eAAA;EACA,8BAAA;EACA,eAAA;EACA,iBAAA;ACjGA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <ele-modal :title=\"title\" :value=\"value\" :size=\"size\" @cancel=\"onCancel\" v-on=\"overrideEvents\" :buttonGroupMeta=\"buttonGroupMeta\">\r\n <ele-alert v-if=\"alert\" v-bind=\"alert\"></ele-alert>\r\n <div v-if=\"contentText\" class=\"ele-modal-confirm__content\">\r\n {{ contentText }}\r\n </div>\r\n </ele-modal>\r\n</template>\r\n\r\n<script>\r\nimport { CONTEXT } from '../../../utils'\r\nexport default {\r\n name: 'ele-modal-confirm',\r\n model: {\r\n event: 'change',\r\n prop: 'value'\r\n },\r\n props: {\r\n title: {\r\n type: String\r\n },\r\n size: {\r\n type: String,\r\n default: 'small'\r\n },\r\n alert: {\r\n type: [Object, Boolean],\r\n default: () => ({\r\n type: 'warning',\r\n message: '确定要删除吗?',\r\n description: '删除后将无法恢复',\r\n closable: false\r\n })\r\n },\r\n contentText: {\r\n type: String\r\n },\r\n value: {\r\n type: Boolean,\r\n default: false\r\n },\r\n buttonGroupMeta: {\r\n type: Object\r\n },\r\n //!deprecated\r\n contextProp: {\r\n type: Object,\r\n default: () => ({})\r\n }\r\n },\r\n inject: {\r\n [CONTEXT]: {\r\n default: () => (() => ({}))\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n computed: {\r\n currentContext () {\r\n const { exposed: exposedData = {} } = this[CONTEXT]()\r\n const exposed = Object.assign({}, exposedData, { closeModalConfirm: this.closeModalConfirm })\r\n return {\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n ...this[CONTEXT](),\r\n exposed\r\n }\r\n },\r\n overrideEvents () {\r\n if (!this.buttonGroupMeta) return {}\r\n const { elements = [] } = this.buttonGroupMeta\r\n const events = elements.reduce((ret, ele) =>{\r\n ret[ele.eventName || 'click'] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, ...this.currentContext })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events\r\n }\r\n }\r\n },\r\n methods: {\r\n closeModalConfirm () {\r\n this.$emit('change', false)\r\n },\r\n onCancel () {\r\n this.$emit('change', false)\r\n }\r\n }\r\n}\r\n</script>\r\n<style lang=\"scss\">\r\n@import '../../../theme/index';\r\n</style>\r\n<style lang=\"scss\" scoped>\r\n.ele-modal-confirm__content {\r\n margin-top: 8px;\r\n color: var(--idoole-black-088);\r\n font-size: 14px;\r\n line-height: 22px;\r\n}\r\n</style>",".ele-modal-confirm__content {\n margin-top: 8px;\n color: var(--idoole-black-088);\n font-size: 14px;\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
12098
12112
|
|
|
12099
12113
|
};
|
|
12100
12114
|
/* scoped */
|
|
12101
|
-
const __vue_scope_id__$3 = "data-v-
|
|
12115
|
+
const __vue_scope_id__$3 = "data-v-7af4f130";
|
|
12102
12116
|
/* module identifier */
|
|
12103
12117
|
const __vue_module_identifier__$3 = undefined;
|
|
12104
12118
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<ele-modal :title="title" :value="value" :size="size" @cancel="onCancel" v-on="overrideEvents" :buttonGroupMeta="buttonGroupMeta">
|
|
3
|
-
<ele-alert v-bind="alert"></ele-alert>
|
|
3
|
+
<ele-alert v-if="alert" v-bind="alert"></ele-alert>
|
|
4
4
|
<div v-if="contentText" class="ele-modal-confirm__content">
|
|
5
5
|
{{ contentText }}
|
|
6
6
|
</div>
|
|
@@ -24,7 +24,7 @@ export default {
|
|
|
24
24
|
default: 'small'
|
|
25
25
|
},
|
|
26
26
|
alert: {
|
|
27
|
-
type: Object,
|
|
27
|
+
type: [Object, Boolean],
|
|
28
28
|
default: () => ({
|
|
29
29
|
type: 'warning',
|
|
30
30
|
message: '确定要删除吗?',
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<div v-if="item.type == '_action'" class="search-area__item search-area--action">
|
|
7
7
|
<ele-button icon="search" type="primary" @click="handleClickSearch">查询</ele-button>
|
|
8
8
|
<ele-button style="margin-left:8px;" icon="reload" @click="handleClickReset">重置</ele-button>
|
|
9
|
-
<div class="expand-collapse" @click="handleClickExpandCollapse">
|
|
9
|
+
<div v-if="innerDataSource.length > cuttingFormula + 1" class="expand-collapse" @click="handleClickExpandCollapse">
|
|
10
10
|
<span class="expand-collapse__text">{{ isExpand ? '收起' : '展开' }}</span>
|
|
11
11
|
<span class="expand-collapse__icon">
|
|
12
12
|
<a-icon v-if="isExpand" type="up" />
|